feat: 解耦版本暂存

BoBoooooo · Jan 18, 2021 · 0513976 · 0513976
1 parent cb77221
commit 0513976
Show file tree

Hide file tree

Showing 16 changed files with 130 additions and 121 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,7 +23,7 @@
 范围|描述|commitId
 --|--|--
  - | 更新版本至0.3.3 | [e1c919b](https://github.com/BoBoooooo/Element-Pro-Crud/commit/e1c919b)
- CrudTable | tableTitle默认隐藏 | [75d4f57](https://github.com/BoBoooooo/Element-Pro-Crud/commit/75d4f57)
+ ProTable | tableTitle默认隐藏 | [75d4f57](https://github.com/BoBoooooo/Element-Pro-Crud/commit/75d4f57)
  - | 优化调试逻辑 | [30d8c1d](https://github.com/BoBoooooo/Element-Pro-Crud/commit/30d8c1d)
  - | 组件代码优化 | [4023818](https://github.com/BoBoooooo/Element-Pro-Crud/commit/4023818)
 

diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
     - `级联选择器` (el-cascader)
     - `富文本编辑器` Tinymce
     - `附件模块` (FileUpload)
-    - `表格模块` (CrudTable)
+    - `表格模块` (ProTable)
     - `树形下拉框` (vue-treeSelect)
     - `自定义插槽`
 - 表格设计器 
@@ -114,11 +114,11 @@ npm i element-pro-crud -S
   Vue.use(GenerateForm);
 
   import Vue from 'vue';
-  import { GenerateForm, CrudTable, FormDesigner, TableDesigner } from 'element-pro-crud';
+  import { GenerateForm, ProTable, FormDesigner, TableDesigner } from 'element-pro-crud';
   import App from './App.vue';
 
   Vue.use(GenerateForm); // 不需要传options
-  Vue.use(CrudTable, options);// options介绍如上,getTables,getFormKey两个方法可以缺省
+  Vue.use(ProTable, options);// options介绍如上,getTables,getFormKey两个方法可以缺省
   Vue.use(FormDesigner, options);// options介绍如上
   Vue.use(TableDesigner, options);// options介绍如上
 
@@ -137,11 +137,11 @@ npm i element-pro-crud -S
 
 - `TableDesigner` // 表格设计器
 
-- `CrudTable` // 高级增删改查 ProTable
+- `ProTable` // 高级增删改查 ProTable
 
 ## 组件文档
 
-### CrudTable
+### ProTable
 
 #### Props
 
@@ -233,7 +233,7 @@ npm i element-pro-crud -S
 | 事件名称  |             说明             |                      回调参数                      |
 | :-------: | :--------------------------: | :------------------------------------------------: |
 | `el-table events` |          el-table原生事件见文档          |          https://element.eleme.cn/#/zh-CN/component/table            |
-|   done    |       表格数据请求完成       |              整个 CrudTable 组件对象               |
+|   done    |       表格数据请求完成       |              整个 ProTable 组件对象               |
 | selection-change |           多选事件           |              选中的行 (params: Array)              |
 |  form-change   | 监听 dialog 中 form 对象改变 | 返回当前表单对象以及当前表单 json (params: Object) |
 | form-btn-on-click |           表单内按钮组件点击回调           |             widget(表单组件json)              |

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -236,13 +236,13 @@
       </el-cascader>
     </template>
     <template v-if="widget.type == 'table'">
-      <CrudTable :closeOnClickModal="false"
+      <ProTable :closeOnClickModal="false"
                  ref="table"
                  @selection="getTableSelection"
                  :tableName="widget.options.tableName"
                  :tableDesignerName="widget.options.tableDesignerName"
                  :dialogFormDesignerName="widget.options.dialogFormDesignerName"
-                 appendToBody
+                 dialogAppendToBody
                  :readOnly="readOnly || widget.options.readonly"
                  :visibleList="tableVisibleList"
                  :showPagination="widget.options.showPagination"
@@ -265,7 +265,7 @@
                 :prop="prop">
           </slot>
         </template>
-      </CrudTable>
+      </ProTable>
     </template>
     <template v-if="widget.type === 'treeselect'">
       <!-- 目前暂时提供了几个常用props,有更多需要自行拓展 -->

diff --git a/src/component/form-designer/src/components/FileUpload/FileUpload.vue b/src/component/form-designer/src/components/FileUpload/FileUpload.vue
@@ -27,7 +27,7 @@
                    type="primary">上传附件</el-button>
       </el-tooltip>
     </el-upload>
-    <CrudTable ref="table"
+    <ProTable ref="table"
                v-if="view.list"
                :listField="listField"
                emptyText="暂无附件"
@@ -88,7 +88,7 @@
           </el-dropdown>
         </div>
       </template>
-    </CrudTable>
+    </ProTable>
   </div>
 </template>
 

diff --git a/src/component/crud-table/index.ts → src/component/pro-table/index.ts b/src/component/crud-table/index.ts → src/component/pro-table/index.ts
@@ -1,12 +1,12 @@
-import CrudTable from './src/CrudTable.vue';
+import ProTable from './src/ProTable.vue';
 
 // 为组件添加 install 方法，用于按需引入
 // eslint-disable-next-line func-names
-CrudTable.install = function (Vue, options) {
+ProTable.install = function (Vue, options) {
   if (options) {
     Vue.prototype.$PROCRUD = options;
   }
-  Vue.component('CrudTable', CrudTable);
+  Vue.component('ProTable', ProTable);
 };
 
-export default CrudTable;
+export default ProTable;
diff --git a/...ent/crud-table/src/GenerateFormDialog.vue → ...nent/pro-table/src/GenerateFormDialog.vue b/...ent/crud-table/src/GenerateFormDialog.vue → ...nent/pro-table/src/GenerateFormDialog.vue
diff --git a/src/component/crud-table/src/CrudTable.vue → src/component/pro-table/src/ProTable.vue b/src/component/crud-table/src/CrudTable.vue → src/component/pro-table/src/ProTable.vue
@@ -1,12 +1,12 @@
 <!--
- * @file: el-table CrudTable封装,支持高级查询 分页 增删改查表单
+ * @file: el-table ProTable封装,支持高级查询 分页 增删改查表单
  * @copyright: BoBo
  * @author: BoBo
  * @Date: 2020年09月14 18:01:58
 -->
 
 <template>
-  <div class="CrudTable">
+  <div class="ProTable">
     <div class="base-table">
       <!-- 表格左侧标题 -->
       <div :class="{
@@ -77,19 +77,11 @@
       <el-table v-loading.lock="loading"
                 v-bind="$attrs"
                 v-on="tableListeners"
-                element-loading-text="加载中……"
                 ref="table"
-                :header-cell-style="{ background: '#f2f2f2', color: '#737373' }"
+                :row-key="(row)=> row.id"
                 :data="tableData"
                 :height="tableHeight"
-                :max-height="maxHeight"
-                :row-style="rowStyle"
-                :cell-style="cellStyle"
-                :row-key="(row)=> row.id"
-                rowKey="id"
-                :lazy="lazy"
-                :load="treeload"
-                :tree-props="{children: 'children', hasChildren: 'flag'}">
+                :max-height="maxHeight">
         <template slot='empty'>
           <SvgIcon icon-class='table_empty'
                    class="empty_icon"></SvgIcon>
@@ -236,7 +228,7 @@ import {
 import { confirm } from '@/utils/confirm';
 import SvgIcon from '@/icons/SvgIcon.vue';
 import _cloneDeep from 'lodash/cloneDeep';
-import { DML } from '@/types/common';
+import { DML, Params, DataSource } from '@/types/common';
 import GenerateFormDialog from './GenerateFormDialog.vue';
 import SearchForm from './SearchForm.vue';
 
@@ -246,14 +238,14 @@ const STATUS = {
   DETAIL: 2,
 };
 @Component({
-  name: 'CrudTable',
+  name: 'ProTable',
   components: {
     GenerateFormDialog,
     SearchForm,
     SvgIcon,
   },
 })
-export default class CrudTable extends Vue {
+export default class ProTable extends Vue {
   // https://github.com/vuejs/vue-class-component/issues/94
   $refs!: {
     table: HTMLFormElement;
@@ -291,14 +283,14 @@ export default class CrudTable extends Vue {
   // 表格高度
   tableHeight: number | string = '100%';
 
-  // 表格结构json，将来可能有多张表
+  // 表格结构json
   tableConfig = { columns: [] };
 
   // 多选行选中项
-  selectedRows: any = [];
+  selectedRows: any[] = [];
 
   // 表格数据
-  tableData = [];
+  tableData: any[] = [];
 
   // 查询模式
   @Prop({
@@ -439,24 +431,6 @@ export default class CrudTable extends Vue {
   // 子表tableConfig 详情看GenerateFormItem中解释
   @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
-  // 行样式
-  @Prop({
-    default: () => ({
-      height: '20px',
-    }),
-    type: Function,
-  })
-  rowStyle!: any;
-
-  // 单元格样式
-  @Prop({
-    default: () => ({
-      padding: '5px',
-    }),
-    type: Function,
-  })
-  cellStyle!: any;
-
   // 操作列宽度
   @Prop({ type: Number, default: null }) actionColumnWidth!: number;
 
@@ -499,13 +473,21 @@ export default class CrudTable extends Vue {
   })
   emptyText!: string;
 
-  // columns
+  // columns列配置
   @Prop({
     type: Object,
     default: null,
   })
   columns!: any;
 
+  // request请求方法
+  @Prop({
+    type: Function,
+    default: null,
+    required: true,
+  })
+  request!: any;
+
   // 分页
   get pagination() {
     return {
@@ -793,13 +775,13 @@ export default class CrudTable extends Vue {
   }
 
   mounted() {
-    // 初始化表格高度
-    this.setMaxHeight();
     // 请求数据
     this.fetchHandler(true);
 
     // 自适应分页组件按钮;
     window.addEventListener('resize', this.resizeHandler);
+    // 初始化表格高度
+    this.setMaxHeight();
   }
 
   resizeHandler() {
@@ -848,14 +830,14 @@ export default class CrudTable extends Vue {
     } = this;
     const { tableParams, searchFormCondition } = this;
 
-    // 已加载完成, tree lazy table 局部刷新.
-    if (this.lazy && this.tableData.length > 0) {
-      this.treeload({
-        id: this.currentRow.parentid,
-      });
-      this.loading = false;
-      return;
-    }
+    // 已加载完成, tree lazy table 局部刷新.     待处理
+    // if (this.lazy && this.tableData.length > 0) {
+    //   this.treeload({
+    //     id: this.currentRow.parentid,
+    //   });
+    //   this.loading = false;
+    //   return;
+    // }
 
     // 如清空查询条件,则清空
     if (clearParams) {
@@ -902,52 +884,12 @@ export default class CrudTable extends Vue {
     } else if (this.orderCondition) {
       Object.assign(axiosParams, { orderCondition: this.orderCondition });
     }
-    // 发起请求
-    // eslint-disable-next-line no-nested-ternary
-    const requestObject = this.promiseForSelect
-      ? this.promiseForSelect(axiosParams, clearParams)
-      : this.lazy
-        ? this.$PROCRUD.crud(DML.TREE_LAZY, this.tableName, axiosParams)
-        : this.$PROCRUD.crud(DML.SELECT, this.tableName, axiosParams);
-
-    requestObject
-      .then((response) => {
-        let result = response;
-        // 此处判断返回的数据格式
-        // 和后台默认约束好的resultBean格式如下:
-        /**
-         * {
-         *    code: 200,
-         *    data: {
-         *      list: [],
-         *      total: 0,
-         *    };
-         *    message: SUCCESS
-         * }
-         */
-        if (response && !Array.isArray(response)) {
-          // 此处listField默认为 data.list
-          result = listField.split('.').reduce((res, key) => res[key], response);
-        }
-        // 判断拿到的list是否为Array
-        if (!result || !Array.isArray(result)) {
-          this.loading = false;
-          throw new Error(`The result of key:${listField} is not Array.`);
-        }
-        // 拿到list数据
-        this.tableData = result as any;
+    this.request(axiosParams)
+      .then((response: DataSource) => {
+        const { data = [], total = 0 } = response;
+        this.tableData = data;
         // 以下代码 获取该列表总数
-        let totalValue = response;
-        // 如果返回直接为list,则说明没有分页处理,直接统计length作为总数
-        if (Array.isArray(response)) {
-          totalValue = response.length;
-        } else if (typeof response === 'object') {
-          // 此处totalField默认为data.total
-          totalValue = totalField.split('.').reduce((res, key) => res[key], response);
-        } else {
-          totalValue = 0;
-        }
-        this.total = totalValue;
+        this.total = total;
         this.loading = false;
         if (this.$refs.table) {
           // 获取到数据后清空已选项
@@ -1059,7 +1001,7 @@ export default class CrudTable extends Vue {
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.CrudTable {
+.ProTable {
   background: white;
   padding: 10px;
   position: relative;

diff --git a/src/component/crud-table/src/SearchForm.vue → src/component/pro-table/src/SearchForm.vue b/src/component/crud-table/src/SearchForm.vue → src/component/pro-table/src/SearchForm.vue
diff --git a/...onent/crud-table/src/SeniorSearchForm.vue → ...ponent/pro-table/src/SeniorSearchForm.vue b/...onent/crud-table/src/SeniorSearchForm.vue → ...ponent/pro-table/src/SeniorSearchForm.vue
diff --git a/.../crud-table/src/SeniorSearchFormCover.vue → ...t/pro-table/src/SeniorSearchFormCover.vue b/.../crud-table/src/SeniorSearchFormCover.vue → ...t/pro-table/src/SeniorSearchFormCover.vue
diff --git a/src/demo/App.vue b/src/demo/App.vue
@@ -64,7 +64,7 @@
           </el-main>
         </el-container>
         <el-container class="container">
-          <el-header>CrudTable组件 此处为人员信息管理示例 （有批量操作按钮时会默认开启多选模式）
+          <el-header>ProTable组件 此处为人员信息管理示例 （有批量操作按钮时会默认开启多选模式）
             <el-button  @click="handleGenerateJson" icon="el-icon-tickets" type="warning" size="small">
               当前表格json
             </el-button>
@@ -162,7 +162,7 @@
                 </div>
               </el-col>
               <el-col :span="20">
-                <CrudTable :searchMode="searchMode? 'cover':'popover'"
+                <PersonTable :searchMode="searchMode? 'cover':'popover'"
                            tableTitle="人员管理"
                            tableName="person"
                            :size="size"
@@ -187,7 +187,7 @@
                     <el-button size="mini"
                                @click="getRowData(row)">自定义</el-button>
                   </template>
-                </CrudTable>
+                </PersonTable>
               </el-col>
             </el-row>
           </el-main>
@@ -210,6 +210,7 @@ import {
   getTables, getFormKey, getTableDetail, getFormDetail,
 } from '@/demo/api/plugin';
 import CusDialog from '@/component/common/CusDialog.vue';
+import PersonTable from './component/PersonTable.vue';
 
 export default {
   name: 'app',
@@ -307,6 +308,7 @@ export default {
   },
   components: {
     CusDialog,
+    PersonTable,
   },
 };
 </script>