From acceaeee96a157e24fa3239a16577a683bdec09f Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Tue, 15 Sep 2020 15:37:35 +0800
Subject: [PATCH] =?UTF-8?q?perf(BaseModule):=20=E8=A1=A8=E5=8D=95=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BaseDialog/FormDesignerDialog.vue         |   6 +-
 .../BaseDialog/GenerateFormDialog.vue         |  15 --
 src/components/BaseTable/BaseTable.vue        |  54 +------
 src/components/BaseTable/SearchForm.vue       |  14 +-
 src/components/BaseTable/SeniorSearchForm.vue |   8 +-
 src/components/CrudTable/CrudTable.vue        | 135 +++++-------------
 6 files changed, 51 insertions(+), 181 deletions(-)

diff --git a/src/components/BaseDialog/FormDesignerDialog.vue b/src/components/BaseDialog/FormDesignerDialog.vue
index 6efcd1f..56f095e 100644
--- a/src/components/BaseDialog/FormDesignerDialog.vue
+++ b/src/components/BaseDialog/FormDesignerDialog.vue
@@ -198,9 +198,9 @@
           </tbody>
         </table>
         <el-button type="success"
-                   @click="handleGenerateKey(true)">自动生成表单(初始化,暂时默认一行两列)</el-button>
-        <el-button type="primary"
-                   @click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button>
+                   @click="handleGenerateKey(true)">自动生成表单(根据数据库字段初始化,默认一行两列)</el-button>
+        <!-- <el-button type="primary"
+                   @click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button> -->
       </cus-dialog>
     </el-container>
   </el-dialog>
diff --git a/src/components/BaseDialog/GenerateFormDialog.vue b/src/components/BaseDialog/GenerateFormDialog.vue
index 1003f1c..f73fba9 100644
--- a/src/components/BaseDialog/GenerateFormDialog.vue
+++ b/src/components/BaseDialog/GenerateFormDialog.vue
@@ -14,7 +14,6 @@
              :append-to-body="appendToBody"
              :fullscreen="fullscreen"
              :close-on-click-modal="closeOnClickModal">
-    <slot name="formTitle"></slot>
     <!-- 对话框内动态表单 -->
     <GenerateForm ref="generateDialogForm"
                   :value="formValues"
@@ -27,9 +26,6 @@
     <el-row type="flex"
             justify="end"
             slot="footer">
-      <slot name="footer"
-            v-if="!readOnly"
-            :save="btnSaveOnClick"></slot>
       <template v-if="readOnly">
         <el-button @click="visible=false">关 闭</el-button>
       </template>
@@ -66,9 +62,6 @@ const STATUS = {
   },
 })
 export default class GenerateFormDialog extends Vue {
-  // 异步更新表单数据
-  @Prop({ default: () => ({}), type: Object }) formValuesAsync!: any;
-
   // 子表tableConfig 详情看GenerateFormItem中解释
   @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
@@ -289,13 +282,5 @@ export default class GenerateFormDialog extends Vue {
       formDesign: this.formDesign,
     });
   }
-
-  @Watch('formValuesAsync', { deep: true })
-  onValueChange(value: any) {
-    Object.keys(value).forEach((k) => {
-      // 异步赋值
-      this.$set(this.formValues, k, value[k]);
-    });
-  }
 }
 </script>
diff --git a/src/components/BaseTable/BaseTable.vue b/src/components/BaseTable/BaseTable.vue
index 3bcb667..250b6c6 100644
--- a/src/components/BaseTable/BaseTable.vue
+++ b/src/components/BaseTable/BaseTable.vue
@@ -19,25 +19,16 @@
       <!-- 添加 -->
       <slot name="btnAdd" />
     </div>
-    <!--
-      高级搜索表单
-      submit-handler 用于接收查询按钮点击回调
-     -->
+
     <SearchForm ref="searchForm"
                 v-if="view.searchForm"
                 :columns="columns"
                 @click="fetchHandler(false,true)"
-                :showSeniorSearchForm="view.showSeniorSearchForm"
                 :searchFormCondition.sync="searchFormCondition"
                 :remoteFuncs="remoteFuncs"
                 :isLoading="loading"
                 @clear="dataChangeHandler(true)">
-      <template #SeniorSearchForm>
-        <slot name="SeniorSearchForm"></slot>
-      </template>
     </SearchForm>
-    <slot :loading="loading"
-          name="form" />
     <!-- 表格主体 -->
     <el-table v-loading.lock="loading"
               element-loading-text="加载中……"
@@ -140,8 +131,6 @@
                   :prop="column.prop"
                   :$index="scope.$index" />
           </span>
-          <el-input v-else-if="scope.row.isEdit"
-                    v-model="scope.row[column.prop]"></el-input>
           <span v-else>
             {{ scope.row[column.prop] }}
           </span>
@@ -216,7 +205,7 @@ export default class BaseTable extends Vue {
   maxHeight: string | number = '100%';
 
   // 表格高度
-  tableHeight:number|string = '100%';
+  tableHeight: number | string = '100%';
 
   // 是否需要多选
   @Prop({ default: false, type: Boolean }) isMultiple!: boolean;
@@ -336,25 +325,6 @@ export default class BaseTable extends Vue {
     default: () => ({}),
   }) tableParams!: any;
 
-  // 请求类型(远端,本地)
-  @Prop({
-    type: String,
-    default: 'remote',
-    validator(value) {
-      const types = ['remote', 'local'];
-      const validType = types.indexOf(value) !== -1;
-      if (!validType) {
-        throw new Error(`Invalid type of '${value}', please set one type of 'remote' or 'local'.`);
-      }
-      return validType;
-    },
-  }) type!: string;
-
-  // 表格数据data
-  @Prop({
-    type: Array,
-  }) data: any;
-
   // 表格设计json
   @Prop({
     type: Array,
@@ -393,7 +363,6 @@ export default class BaseTable extends Vue {
   get view() {
     return {
       searchForm: true,
-      showSeniorSearchForm: true,
       ...this.visibleList,
     };
   }
@@ -416,15 +385,12 @@ export default class BaseTable extends Vue {
   mounted() {
     // event: expand changed to `expand-change` in Element v2.x
     this.$refs.table.$on('expand', (row, expanded) => this.emitEventHandler('expand', row, expanded));
-    const { type, data } = this;
+
+    // 初始化表格高度
     this.setMaxHeight();
+    // 请求数据
+    this.fetchHandler(true);
 
-    // type为remote则加载远程数据,否则加载本地数据
-    if (type === 'remote') {
-      this.fetchHandler(true);
-    } else {
-      this.tableData = this.data;
-    }
     // 自适应分页组件按钮;
     window.addEventListener('resize', () => {
       this.setPagerByWidth();
@@ -624,14 +590,6 @@ export default class BaseTable extends Vue {
     // 最后再刷新表格
     this.dataChangeHandler();
   }
-
-  @Watch('data')
-  onDataChange(value: any, oldval: any) {
-    // 监听本地数据变动实时更新列表
-    if (Array.isArray(value) && this.type === 'local') {
-      this.tableData = this.data;
-    }
-  }
 }
 </script>
 <style scoped>
diff --git a/src/components/BaseTable/SearchForm.vue b/src/components/BaseTable/SearchForm.vue
index 248f931..03d2f0b 100644
--- a/src/components/BaseTable/SearchForm.vue
+++ b/src/components/BaseTable/SearchForm.vue
@@ -23,8 +23,7 @@
              style="display:inline"></i>
         </el-tooltip>
         <!-- 高级查询表单 -->
-        <SeniorSearchForm v-if="showSeniorSearchForm"
-                          :remoteFuncs="remoteFuncs"
+        <SeniorSearchForm :remoteFuncs="remoteFuncs"
                           @fetchSearch="getFetchParamsSearch"
                           :columns="columns"> </SeniorSearchForm>
         <el-tooltip class="item"
@@ -37,8 +36,6 @@
         </el-tooltip>
       </div>
     </el-input>
-    <!-- 自定义高级查询表单-->
-    <slot name="SeniorSearchForm"></slot>
     <div class="tips">
       <!-- 提示当前查询内容 -->
       <template v-if="isArray">
@@ -72,9 +69,6 @@ export default class SearchForm extends Vue {
   // 远程数据方法
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
-  // 是否显示高级查询按钮
-  @Prop({ default: true, type: Boolean }) showSeniorSearchForm!: boolean;
-
   // 表格设计json
   @Prop({
     type: Array,
@@ -86,7 +80,7 @@ export default class SearchForm extends Vue {
   searchContent = '';
 
   // 查询tips
-  paramsTips:any = null;
+  paramsTips: any = null;
 
   get isArray() {
     return Array.isArray(this.paramsTips);
@@ -123,7 +117,7 @@ export default class SearchForm extends Vue {
    * 获取查询条件
    */
   getParams() {
-    let params:any = [];
+    let params: any = [];
     // 拿到所有字段
     const props = this.columns.filter(item => item.searchable).map(item => item.prop);
     const str = props.toString();
@@ -149,7 +143,7 @@ export default class SearchForm extends Vue {
   // 获取高级查询组件中的查询条件
   getFetchParamsSearch(data) {
     this.paramsTips = [];
-    const params:any = [];
+    const params: any = [];
     Object.keys(data).forEach((key) => {
       if (key && data[key]) {
         if (Array.isArray(data[key])) {
diff --git a/src/components/BaseTable/SeniorSearchForm.vue b/src/components/BaseTable/SeniorSearchForm.vue
index 340f7a7..377b2eb 100644
--- a/src/components/BaseTable/SeniorSearchForm.vue
+++ b/src/components/BaseTable/SeniorSearchForm.vue
@@ -57,6 +57,10 @@ import {
   },
 })
 export default class SeniorSearchForm extends Vue {
+   $refs!: {
+    generateDialogForm: HTMLFormElement;
+  };
+
   visible = false;
 
   entity: any = {};
@@ -73,9 +77,6 @@ export default class SeniorSearchForm extends Vue {
   // 远程数据方法
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
-  $refs!: {
-    generateDialogForm: HTMLFormElement;
-  };
 
   created() {
     this.autoGenerateFormByBackend();
@@ -183,7 +184,6 @@ export default class SeniorSearchForm extends Vue {
         row.columns.push(date);
       } else if (option && option.type === 'select') {
         row.columns.push(select);
-        console.log(select);
       } else {
         row.columns.push(input);
       }
diff --git a/src/components/CrudTable/CrudTable.vue b/src/components/CrudTable/CrudTable.vue
index a82f2a8..0015b45 100644
--- a/src/components/CrudTable/CrudTable.vue
+++ b/src/components/CrudTable/CrudTable.vue
@@ -3,7 +3,7 @@
       三次封装关系：el-table->BaseTable.vue->CrudTable.vue
 @author BoBo
 @copyright NanJing Anshare Tech .Com
-@createDate 2018年11月14日17:25:47
+@createDate 2019年07月29日14:58:39
 -->
 <template>
   <div class="CrudTable">
@@ -17,8 +17,6 @@
                :expandModel="expandModel"
                :orderCondition="orderCondition"
                :visibleList="view"
-               :type="rows?'local':'remote'"
-               :data="rows"
                :remoteFuncs="remoteFuncs"
                :fullHeight="fullHeight"
                :height="height"
@@ -43,10 +41,6 @@
       <template #bottomBtn>
         <slot name="bottomBtn"></slot>
       </template>
-      <!-- 高级查询slot -->
-      <template #SeniorSearchForm>
-        <slot name="SeniorSearchForm"></slot>
-      </template>
       <template #columnFormatter="scope">
         <slot name="columnFormatter"
               :row="scope.row"
@@ -111,28 +105,20 @@
                  size="mini"
                  @click.stop="btnAdd()">{{text.add}}</el-button>
     </BaseTable>
-    <!-- 对话框内的只有表单，时表格默认的对话框 -->
+    <!-- 新增、编辑、查看按钮 弹出 表单-->
     <GenerateFormDialog ref="dialog"
                         :tableName="tableName"
                         :dialogFormDesignerName="dialogFormDesignerName"
                         :tableParams="tableParams"
-                        @afterSave="saveDialog"
+                        @afterSave="tableReload"
                         @change="formChange"
-                        :formValuesAsync="formValuesAsync"
                         :remoteFuncs="remoteFuncs"
                         :visibleList="view"
                         :setReadOnly="setReadOnly"
                         :append-to-body="appendToBody"
                         :close_on_click_modal="closeOnClickModal"
                         :fullscreen="fullscreen"
-                        @btnonclick="formBtnOnClick">
-      <template #formTitle>
-        <slot name="formTitle"></slot>
-      </template>
-      <template #footer="{save}">
-        <slot name="footer"
-              :save="save"></slot>
-      </template>
+                        @btnOnClick="formBtnOnClick">
     </GenerateFormDialog>
   </div>
 </template>
@@ -145,6 +131,7 @@ import { DML, crud } from '@/api/public/crud';
 import { getTableDetail, getFormDetail } from '@/api/system/form';
 import BaseTable from '@/components/BaseTable/BaseTable.vue';
 import GenerateFormDialog from '@/components/BaseDialog/GenerateFormDialog.vue';
+import { confirm } from '@/decorator/confirm';
 
 const STATUS = {
   CREATE: 0,
@@ -174,15 +161,9 @@ export default class CrudTable extends Vue {
   // 对话框编辑或删除状态
   dialogStatus = STATUS.CREATE;
 
-  // 如果直接传入rows说明无需请求，直接根据rows生成表体
-  rows = null;
-
   // 从表格列的json获取要导出的字段
   exportCondition: any | null = null;
 
-  // 下载地址
-  downloadURL: string | null = null;
-
   // 多选行选中项
   selectedRows: any = [];
 
@@ -279,9 +260,6 @@ export default class CrudTable extends Vue {
   // 表格行中的添加按钮点击事件
   @Prop({ default: null, type: Function }) promiseForEdit!: any;
 
-  // 表格行中的添加按钮点击事件
-  @Prop({ default: null, type: Function }) promiseForColumns!: any;
-
   // 表格行中的添加按钮点击事件
   @Prop({ default: null, type: Function }) promiseForExport!: any;
 
@@ -312,9 +290,6 @@ export default class CrudTable extends Vue {
   // 远程数据方法
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
-  // 直接传入表头和表体，表格不用再发起任何请求
-  @Prop({ default: null, type: Object }) allResponse!: any;
-
   // 行的 className 的回调方法
   @Prop([String, Function]) rowClassName!: any;
 
@@ -335,7 +310,7 @@ export default class CrudTable extends Vue {
   @Prop({ type: Boolean, default: false }) fullHeight!: boolean;
 
   // 高度minus
-  @Prop({ type: Number, default: 235 }) maxHeightMinus!: number;
+  @Prop({ type: Number, default: 245 }) maxHeightMinus!: number;
 
   // 高度minus
   @Prop(Number) height!: number;
@@ -355,22 +330,12 @@ export default class CrudTable extends Vue {
   // el-table expandModel
   @Prop(Object) expandModel !:any;
 
-  // 自定义导出downloadUrl
-  @Prop({
-    type: String,
-    default: null,
-  })
-  exportDownloadUrl!: string;
-
   // 边框线
   @Prop({ type: Boolean, default: false }) border!: boolean;
 
   // 斑马纹
   @Prop({ type: Boolean, default: true }) stripe!: boolean;
 
-  // 异步更新表单数据
-  @Prop({ default: () => ({}), type: Object }) formValuesAsync!: any;
-
   // 子表tableConfig 详情看GenerateFormItem中解释
   @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
@@ -425,7 +390,6 @@ export default class CrudTable extends Vue {
       actionColumnBtnDel: true,
       personInfo: false,
       actionColumn: true,
-      showSeniorSearchForm: true,
       btnAddOnColumnHeader: false,
       btnDel: false,
       ...this.visibleList,
@@ -433,39 +397,25 @@ export default class CrudTable extends Vue {
   }
 
   created() {
-    // 如果直接传入表头和表体，表格不用再发起任何请求
-    if (this.allResponse) {
-      // allResponse下必须有config属性
-      this.tableConfig = this.allResponse.config;
-      this.rows = this.allResponse.rows;
-      // this.pageSize = undefined;
-    } else {
-      // 如果传入了代理promise请求config使用代理promise请求
-      const promise = this.promiseForColumns ? this.promiseForColumns() : getTableDetail(this.tableDesignerName ? this.tableDesignerName : this.tableName);
-      // 加载表格结构
-      promise.then((res) => {
-        this.tableConfig = JSON.parse(res.data.formJson);
-        // 如果不显示操作列,则隐藏
-        if (!this.view.actionColumn) {
-          this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
-        }
-        const { actionColumnWidth } = this;
-        // 如果显示指明了操作列列宽
-        if (actionColumnWidth) {
-          const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
-          if (actionColumn) {
-            actionColumn.width = actionColumnWidth;
-            actionColumn.minWidth = actionColumnWidth;
-          }
+    // 请求表格设计json
+    const promise = getTableDetail(this.tableDesignerName ? this.tableDesignerName : this.tableName);
+    // 加载表格结构
+    promise.then((res) => {
+      this.tableConfig = JSON.parse(res.data.formJson);
+      // 如果不显示操作列,则隐藏
+      if (!this.view.actionColumn) {
+        this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
+      }
+      const { actionColumnWidth } = this;
+      // 如果显示指明了操作列列宽
+      if (actionColumnWidth) {
+        const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
+        if (actionColumn) {
+          actionColumn.width = actionColumnWidth;
+          actionColumn.minWidth = actionColumnWidth;
         }
-      });
-    }
-    // 下载地址
-    if (this.exportDownloadUrl) {
-      this.downloadURL = this.exportDownloadUrl;
-    } else {
-      this.downloadURL = `${this.tableUrl}/dataExport`;
-    }
+      }
+    });
   }
 
   // 表格刷新
@@ -529,7 +479,7 @@ export default class CrudTable extends Vue {
     }
   }
 
-  // 底部批量删除按钮(暂时只支持单表,不支持外侧传入代理方法)
+  // 批量删除按钮
   btnDeletesOnClick() {
     const { length } = this.selectedRows || [];
     if (length > 0) {
@@ -564,29 +514,17 @@ export default class CrudTable extends Vue {
   }
 
   // 操作列-删除
+  @confirm('确认删除?', '提示')
   actionColumnDel(row) {
-    this.$confirm('确认删除？该操作不可恢复！', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-      .then(() => {
-        // 如果prop传入了promiseForDel说明需要回调自定义删除
-        const promise = this.promiseForDel ? this.promiseForDel({ id: row.id }) : crud(DML.DELETE, this.tableName, {}, { id: row.id });
-        promise.then(() => {
-          this.tableReload();
-          this.$message({
-            type: 'success',
-            message: '删除成功',
-          });
-        });
-      })
-      .catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除',
-        });
+    // 如果prop传入了promiseForDel说明需要回调自定义删除
+    const promise = this.promiseForDel ? this.promiseForDel({ id: row.id }) : crud(DML.DELETE, this.tableName, {}, { id: row.id });
+    promise.then(() => {
+      this.tableReload();
+      this.$message({
+        type: 'success',
+        message: '删除成功',
       });
+    });
   }
 
   // 操作列-编辑按钮是否显示
@@ -628,11 +566,6 @@ export default class CrudTable extends Vue {
     return visible;
   }
 
-  // 对话框保存成功后刷新表格
-  saveDialog() {
-    this.tableReload();
-  }
-
   // 表格数据请求完成
   done(t) {
     t.tableTitle = this.tableTitle;