perf: 重构版本提交 @0.8.3-2

BoBoooooo · Jan 21, 2021 · d3171be · d3171be
1 parent 586744f
commit d3171be
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -233,7 +233,6 @@ npm i element-pro-crud -S
 | 事件名称  |             说明             |                      回调参数                      |
 | :-------: | :--------------------------: | :------------------------------------------------: |
 | `el-table events` |          el-table原生事件见文档          |          https://element.eleme.cn/#/zh-CN/component/table            |
-|   done    |       表格数据请求完成       |              整个 ProTable 组件对象               |
 | selection-change |           多选事件           |              选中的行 (params: Array)              |
 |  form-change   | 监听 dialog 中 form 对象改变 | 返回当前表单对象以及当前表单 json (params: Object) |
 | form-btn-on-click |           表单内按钮组件点击回调           |             widget(表单组件json)              |
@@ -246,7 +245,6 @@ npm i element-pro-crud -S
 | columnFormatter | 结合表格设计自定义列使用 |
 |  btnBarPrevBtn  |           自定义右上角功能按钮           |
 |    btnCustom    |      自定义操作按钮 参数为 {row}     |
-|    seniorSearchForm    |      自定义高级查询表单      |
 |    dialogFooter    |      弹出表单右侧底部slot     |
 
 #### Methods

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.3-1",
+  "version": "0.8.3-2",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

diff --git a/src/component/crud-table/index.ts b/src/component/crud-table/index.ts
@@ -0,0 +1,12 @@
+import CrudTable from './src/CrudTable.vue';
+
+// 为组件添加 install 方法，用于按需引入
+// eslint-disable-next-line func-names
+CrudTable.install = function (Vue, options) {
+  if (options) {
+    Vue.prototype.$PROCRUD = options;
+  }
+  Vue.component('CrudTable', CrudTable);
+};
+
+export default CrudTable;
diff --git a/src/component/pro-table/CrudTable.vue → src/component/crud-table/src/CrudTable.vue b/src/component/pro-table/CrudTable.vue → src/component/crud-table/src/CrudTable.vue
@@ -113,8 +113,8 @@ import { confirm } from '@/utils/confirm';
 import SvgIcon from '@/icons/SvgIcon.vue';
 import _cloneDeep from 'lodash/cloneDeep';
 import { DML } from '@/types/common';
-import GenerateFormDialog from './src/GenerateFormDialog.vue';
-import ProTable from './src/ProTable.vue';
+import GenerateFormDialog from './GenerateFormDialog.vue';
+import ProTable from '../../pro-table';
 
 
 const STATUS = {
@@ -426,6 +426,7 @@ export default class CrudTable extends Vue {
 
   handleSelectionChange(selection) {
     this.selectedRows = selection;
+    this.$emit('selection-change', selection);
   }
 
   // 批量删除按钮

diff --git a/...nent/pro-table/src/GenerateFormDialog.vue → ...ent/crud-table/src/GenerateFormDialog.vue b/...nent/pro-table/src/GenerateFormDialog.vue → ...ent/crud-table/src/GenerateFormDialog.vue
@@ -10,10 +10,10 @@
              ref="dialog"
              :title="dialogTitle"
              :visible.sync="visible"
-             :width="width"
-             :append-to-body="appendToBody"
-             :fullscreen="fullscreen"
-             :close-on-click-modal="closeOnClickModal">
+             :width="dialogWidth"
+             :append-to-body="dialogAppendToBody"
+             :fullscreen="dialogFullscreen"
+             :close-on-click-modal="dialogCloseOnClickModal">
     <!-- 对话框内动态表单 -->
     <GenerateForm ref="generateDialogForm"
                   :value="formValues"
@@ -90,7 +90,7 @@ export default class GenerateFormDialog extends Vue {
     type: String,
     default: '80%',
   })
-  width!: string;
+  dialogWidth!: string;
 
   // 表名
   @Prop({
@@ -109,13 +109,13 @@ export default class GenerateFormDialog extends Vue {
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
   // 弹出表单appendToBody
-  @Prop({ default: false, type: Boolean }) appendToBody!: boolean;
+  @Prop({ default: true, type: Boolean }) dialogAppendToBody!: boolean;
 
   // 点击阴影弹框是否可以关闭
-  @Prop({ default: true, type: Boolean }) closeOnClickModal!: boolean;
+  @Prop({ default: true, type: Boolean }) dialogCloseOnClickModal!: boolean;
 
   // 表单是否全屏
-  @Prop({ default: false, type: Boolean }) fullscreen!: boolean;
+  @Prop({ default: false, type: Boolean }) dialogFullscreen!: boolean;
 
   $refs!: {
     generateDialogForm: HTMLFormElement;

diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -58,7 +58,7 @@
                 </el-form-item>
                 <!-- 正常组件通过GenerateFormItem生成 -->
                 <GenerateFormItem v-else
-                                  @selection="getTableSelection($event,citem)"
+                                  @selection-change="getTableSelection($event,citem)"
                                   :key="citem.key"
                                   :models="models"
                                   :remote="remote"
@@ -114,7 +114,7 @@
           <GenerateFormItem :key="item.key"
                             :models="models"
                             :remote="remote"
-                            @selection="getTableSelection($event,item)"
+                            @selection-change="getTableSelection($event,item)"
                             :widget="item"
                             :rules="rules[item.model]"
                             :readOnly="readOnly"
@@ -227,8 +227,6 @@ export default class GenerateForm extends Vue {
 
   rules: any = {};
 
-  tableSelections: any = {};
-
   created() {
     if (this.data.list) {
       // 根据数据结构生成给子组件的数据源
@@ -237,8 +235,9 @@ export default class GenerateForm extends Vue {
   }
 
   getTableSelection($event, item) {
-    this.tableSelections[item.model] = $event;
-    this.$emit('table-selections', this.tableSelections);
+    const tableSelections = {};
+    tableSelections[item.model] = $event;
+    this.$emit('table-selections', tableSelections);
   }
 
   generateModel(genList) {

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -236,9 +236,9 @@
       </el-cascader>
     </template>
     <template v-if="widget.type == 'table'">
-      <ProTable :closeOnClickModal="false"
+      <CrudTable :closeOnClickModal="false"
                  ref="table"
-                 @selection="getTableSelection"
+                 @selection-change="getTableSelection"
                  :tableName="widget.options.tableName"
                  :tableDesignerName="widget.options.tableDesignerName"
                  :dialogFormDesignerName="widget.options.dialogFormDesignerName"
@@ -265,7 +265,7 @@
                 :prop="prop">
           </slot>
         </template>
-      </ProTable>
+      </CrudTable>
     </template>
     <template v-if="widget.type === 'treeselect'">
       <!-- 目前暂时提供了几个常用props,有更多需要自行拓展 -->
@@ -323,20 +323,22 @@ import {
 } from 'vue-property-decorator';
 import TreeSelect from '@riophae/vue-treeselect';
 import { DML } from '@/types/common';
+import CrudTable from '@/component/crud-table/src/CrudTable.vue';
 import { isChinese } from '@/utils/utils';
 import Tinymce from './components/Tinymce/index.vue'; // 富文本编辑器
 import FileUpload from './components/FileUpload/FileUpload.vue';
 import GenerateSubForm from './components/SubForm/GenerateSubForm.vue';
-
 // 高级查询单个查询内容
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
+
 @Component({
   components: {
     TreeSelect,
     Tinymce,
     FileUpload,
     GenerateSubForm,
+    CrudTable: () => import('@/component/crud-table/src/CrudTable.vue'),
   },
   model: {
     prop: 'value',
@@ -642,7 +644,7 @@ export default class GenerateFormItem extends Vue {
   }
 
   getTableSelection(selection) {
-    this.$emit('selection', selection);
+    this.$emit('selection-change', selection);
   }
 
   beforeDestroy() {

diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
@@ -32,9 +32,6 @@
                   :remoteFuncs="remoteFuncs"
                   :isLoading="loading"
                   @clear="dataChangeHandler(true)">
-        <template #seniorSearchForm>
-          <slot name="seniorSearchForm"></slot>
-        </template>
         <template v-if="searchMode === 'cover'">
           <!-- table右上角按钮 -->
           <div class="btn-bar">

diff --git a/src/component/pro-table/src/SearchForm.vue b/src/component/pro-table/src/SearchForm.vue
@@ -30,9 +30,6 @@
                           @fetchSearch="getFetchParamsSearch"
                           :columns="columns">
         </SeniorSearchForm>
-        <!-- 自定义高级查询表单-->
-        <slot name="seniorSearchForm"></slot>
-
         <el-button size="mini"
                    icon="el-icon-refresh"
                    @click="clearEvent()"

diff --git a/src/component/table-designer/src/MenuBar.vue b/src/component/table-designer/src/MenuBar.vue
@@ -186,7 +186,7 @@ export default {
         // 操作列
         case 'addActionColumn':
           this.designedJSON.columns.push({
-            prop: '',
+            prop: '_action',
             label: '操作',
             minWidth: 180,
             align: 'center',

diff --git a/src/component/table-designer/src/TableDesigner.vue b/src/component/table-designer/src/TableDesigner.vue
@@ -15,15 +15,15 @@
     <!-- 对话框内动态表单 -->
     <el-row>
       <el-col :span="12">
-        <el-form size="small" :inline="true" :model="formValues" class="inline-form">
+        <el-form size="small" :inline="true" :model="objJSON" class="inline-form">
           <el-form-item label="表格名称">
             <el-select v-if="allTables" filterable allow-create v-model="formValues.tableName" placeholder="名称">
               <el-option v-for="(item, index) in allTables" :label="item.label" :value="item.value" :key="index"></el-option>
             </el-select>
-            <el-input v-else v-model="formValues.tableName" placeholder="请输入表格名称"></el-input>
+            <el-input v-else v-model="objJSON.name" placeholder="请输入表格名称"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-input v-model="formValues.position" placeholder="使用位置"></el-input>
+            <el-input v-model="objJSON.position" placeholder="使用位置"></el-input>
           </el-form-item>
         </el-form>
       </el-col>
@@ -173,15 +173,11 @@ export default {
     },
     // 返回当前表格设计器对象
     getData() {
-      this.objJSON.name = this.formValues.tableName;
-      this.objJSON.position = this.formValues.position;
       return this.objJSON;
     },
     // 设置内部JSON
     setJSON(tableJson) {
       this.objJSON = tableJson;
-      this.$set(this.formValues, 'tableName', tableJson.name);
-      this.$set(this.formValues, 'position', tableJson.position);
     },
   },
 };

diff --git a/src/demo/component/PersonTable.vue b/src/demo/component/PersonTable.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import CrudTable from '@/component/pro-table/CrudTable.vue';
+import CrudTable from '@/component/crud-table/src/CrudTable.vue';
 import { DML } from '@/types/common';
 import { Vue, Component, Prop } from 'vue-property-decorator';