feat(CrudTable): 查询区域支持平铺弹出两种模式

README.md

@@ -149,6 +149,7 @@ npm i element-pro-crud -S
 | :--------------------: | :---------------------------------------------------------------: | :-------------: | :-------------------------------------: | :-------: |
 | `el-table props` |          el-table原生属性见文档          |          https://element.eleme.cn/#/zh-CN/component/table            |
 |       columns        |                       表格json置                        |     Object      |             -             | null |
+|       searchMode        |                        查询区域模式                        |     String      |             popover/cover            | popover |
 |       listField        |                        response 中数据位置                        |     String      |             data/data.list              | data.list |
 |      readOnly       | GenerateFormDialog 中的表单禁用.null 表示均可编辑;{}表示全部只读; |     Boolean      |   true/false   |   false    |  |
 |       isMultiple       |                           是否开启多选                            |     Boolean     |               true,false                |   false   |

package.json

@@ -33,7 +33,7 @@
     "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "report": "cross-env IS_REPORT=true vue-cli-service build",
+    "report": "cross-env IS_REPORT=true vue-cli-service build --target lib --name ProCrud --dest lib src/index.ts",
     "lib": "vue-cli-service build --target lib --name ProCrud --dest lib src/index.ts",
     "deploy": "npm run lib && npm publish",
     "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",

src/component/crud-table/src/CrudTable.vue

@@ -9,7 +9,10 @@
   <div class="CrudTable">
     <div class="base-table">
       <!-- 表格左侧标题 -->
-      <div class="table-title"
+      <div :class="{
+        'table-title': searchMode === 'popover',
+        'table-title-absolute': searchMode === 'cover'
+      }"
            v-if="view.tableTitle && tableTitle">
         <!-- 表格标题 -->
         <h4>{{tableTitle}}</h4>
@@ -21,7 +24,7 @@
                          @after-save="tableOnSave"/>
       </div> -->
       <!-- table右上角按钮 -->
-      <div class="btn-bar">
+      <div class="btn-bar" v-if="searchMode === 'popover'">
         <slot name="btnBarPrevBtn" />
         <!-- 批量删除按钮 -->
         <el-button v-if="view.btnDel"
@@ -39,6 +42,7 @@
 
       <SearchForm ref="searchForm"
                   v-if="view.searchForm"
+                  :searchMode="searchMode"
                   :showSeniorSearchFormButton="view.seniorSearchBtn"
                   :columns="tableConfig.columns"
                   @click="fetchHandler(false,true)"
@@ -49,6 +53,24 @@
                   <template #seniorSearchForm>
                     <slot name="seniorSearchForm"></slot>
                   </template>
+                    <template v-if="searchMode === 'cover'">
+                      <!-- table右上角按钮 -->
+                      <div class="btn-bar">
+                        <slot name="btnBarPrevBtn" />
+                        <!-- 批量删除按钮 -->
+                        <el-button v-if="view.btnDel"
+                                  @click="btnDeletesOnClick"
+                                  type="primary"
+                                  size="mini"
+                                  icon="el-icon-delete">删除</el-button>
+                        <!-- 添加按钮 -->
+                        <el-button v-if="view.btnAdd"
+                                  type="primary"
+                                  icon="el-icon-plus"
+                                  size="mini"
+                                  @click.stop="btnAdd()">{{text.add}}</el-button>
+                      </div>
+                    </template>
       </SearchForm>
       <!-- 表格主体 -->
       <el-table v-loading.lock="loading"
@@ -277,6 +299,13 @@ export default class CrudTable extends Vue {
   // 表格数据
   tableData = [];
 
+  // 查询模式
+  @Prop({
+    type: String,
+    default: 'popover',
+  })
+  searchMode!: string;
+
   // listField
   @Prop({
     type: String,
@@ -1023,6 +1052,7 @@ export default class CrudTable extends Vue {
 .CrudTable {
   background: white;
   padding: 10px;
+  position: relative;
   .table-title {
     float: left;
     margin-left: 5px;
@@ -1034,6 +1064,18 @@ export default class CrudTable extends Vue {
       font-size: 18px;
     }
   }
+  .table-title-absolute{
+    position: absolute;
+    top: 110px;
+    left: 10px;
+     h4 {
+      margin: 2px 30px 0px 0px;
+      padding-left: 15px;
+      border-left: 7px solid #007bff;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
   .btn-bar {
     float: right;
     width: auto;

src/component/crud-table/src/SearchForm.vue

@@ -6,33 +6,50 @@
  -->
 
 <template>
-  <div class="search-form-container">
-    <el-input placeholder="请输入查询内容"
-              @clear="clearEvent"
-              clearable
-              @change="changeEvent"
-              v-model="searchContent"
-              class="input">
-    </el-input>
-    <el-button-group>
-      <el-button size="mini"
-                 type="primary"
-                 icon="el-icon-search"
-                 @click="btnSearchOnClick()"
-                 class="tool-btn">查询</el-button>
-      <!-- 高级查询表单 -->
-      <SeniorSearchForm v-if="showSeniorSearchFormButton && !$slots.seniorSearchForm"
-                        :remoteFuncs="remoteFuncs"
-                        @fetchSearch="getFetchParamsSearch"
-                        :columns="columns">
-      </SeniorSearchForm>
-      <!-- 自定义高级查询表单-->
-      <slot name="seniorSearchForm"></slot>
-      <el-button size="mini"
-                 icon="el-icon-refresh"
-                 @click="clearEvent()"
-                 class="tool-btn">清空</el-button>
-    </el-button-group>
+  <div class="search-form-container" :style="{
+    float: searchMode === 'cover' ? 'none' : 'left'
+  }">
+    <template v-if="searchMode === 'popover'">
+      <el-input placeholder="请输入查询内容"
+                @clear="clearEvent"
+                clearable
+                @change="changeEvent"
+                v-model="searchContent"
+                class="input">
+      </el-input>
+      <el-button-group>
+        <el-button size="mini"
+                   type="primary"
+                   icon="el-icon-search"
+                   @click="btnSearchOnClick()"
+                   class="tool-btn">查询</el-button>
+        <!-- 高级查询表单 -->
+        <SeniorSearchForm v-if="showSeniorSearchFormButton"
+                          :remoteFuncs="remoteFuncs"
+                          @fetchSearch="getFetchParamsSearch"
+                          :columns="columns">
+        </SeniorSearchForm>
+        <!-- 自定义高级查询表单-->
+        <slot name="seniorSearchForm"></slot>
+
+        <el-button size="mini"
+                   icon="el-icon-refresh"
+                   @click="clearEvent()"
+                   class="tool-btn">清空</el-button>
+      </el-button-group>
+    </template>
+    <template v-else>
+    <!-- 高级查询表单 -->
+      <SeniorSearchFormCover
+          v-if="showSeniorSearchFormButton"
+          :remoteFuncs="remoteFuncs"
+          @fetchSearch="getFetchParamsSearch"
+          :columns="columns"
+        >
+        <slot></slot>
+      </SeniorSearchFormCover>
+    </template>
+
     <div class="tips">
       <!-- 提示当前查询内容 -->
       <template v-if="isArray">
@@ -55,11 +72,13 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import SeniorSearchForm from './SeniorSearchForm.vue';
+import SeniorSearchFormCover from './SeniorSearchFormCover.vue';
 
 @Component({
   name: 'SearchForm',
   components: {
     SeniorSearchForm,
+    SeniorSearchFormCover,
   },
 })
 export default class SearchForm extends Vue {
@@ -76,6 +95,13 @@ export default class SearchForm extends Vue {
   })
   columns: any;
 
+  // 查询模式
+  @Prop({
+    type: String,
+    default: 'popover',
+  })
+  searchMode!: string;
+
   // 查询输入框内容
   searchContent = '';