From 6e27b73ce6f6908d4749a72b8c53b435457a730f Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Fri, 22 Jan 2021 14:14:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=96=B0=E5=A2=9Erequest=20columns?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7ts=E7=B1=BB=E5=9E=8B=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/crud-table/src/CrudTable.vue |   9 +-
 src/component/pro-table/src/ProTable.vue   | 291 ++++++++++-----------
 src/demo/component/PersonCrudTable.vue     |   2 +-
 src/types/common.ts                        |  24 +-
 4 files changed, 159 insertions(+), 167 deletions(-)

diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
index 486292e..4c1796e 100644
--- a/src/component/crud-table/src/CrudTable.vue
+++ b/src/component/crud-table/src/CrudTable.vue
@@ -116,11 +116,12 @@ import {
 import { confirm } from '@/utils/confirm';
 import SvgIcon from '@/icons/SvgIcon.vue';
 import _cloneDeep from 'lodash/cloneDeep';
-import { DML } from '@/types/common';
+import {
+  columns, DataSource, DML, Params,
+} from '@/types/common';
 import GenerateFormDialog from './GenerateFormDialog.vue';
 import ProTable from '../../pro-table';
 
-
 const STATUS = {
   CREATE: 0,
   UPDATE: 1,
@@ -150,7 +151,7 @@ export default class CrudTable extends Vue {
   selectedRows: any = [];
 
   // 表格结构json，将来可能有多张表
-  tableConfig = { columns: [] };
+  tableConfig:columns = { columns: [], name: '', position: '' };
 
   // 表格数据
   tableData = [];
@@ -541,7 +542,7 @@ export default class CrudTable extends Vue {
   }
 
 
-  async request(axiosParams) {
+  async request(axiosParams: Params): Promise<DataSource | undefined> {
     // 已加载完成, tree lazy table 局部刷新.
     // 懒加载待重构
     if (this.lazy) {
diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
index 9750cd9..9889024 100644
--- a/src/component/pro-table/src/ProTable.vue
+++ b/src/component/pro-table/src/ProTable.vue
@@ -7,130 +7,113 @@
 
 <template>
   <div class="ProTable">
-    <div class="base-table">
-      <!-- 表格左侧标题 -->
-      <div :class="{
-        'table-title': searchMode === 'popover',
-        'table-title-absolute': searchMode === 'cover'
+    <!-- 表格左侧标题 -->
+    <div
+      :class="{
+        'table-title-container': searchMode === 'popover',
+        'table-title-container-absolute': searchMode === 'cover',
       }"
-           v-if="view.tableTitle && tableTitle">
-        <!-- 表格标题 -->
-        <h4>{{tableTitle}}</h4>
-      </div>
-      <!-- table右上角按钮 -->
-      <div class="btn-bar"
-           v-if="searchMode === 'popover'">
-        <slot name="btnBarPrevBtn" />
-      </div>
-      <SearchForm ref="searchForm"
-                  v-if="view.searchForm"
-                  :searchMode="searchMode"
-                  :showSeniorSearchFormButton="view.seniorSearchBtn"
-                  :columns="tableConfig.columns || []"
-                  @click="fetchHandler(false,true)"
-                  :searchFormCondition.sync="searchFormCondition"
-                  :remoteFuncs="remoteFuncs"
-                  :isLoading="loading"
-                  @clear="dataChangeHandler(true)">
-        <template v-if="searchMode === 'cover'">
-          <!-- table右上角按钮 -->
-          <div class="btn-bar">
-            <slot name="btnBarPrevBtn" />
-          </div>
-        </template>
-      </SearchForm>
-      <!-- 表格主体 -->
-      <el-table v-loading.lock="loading"
-                v-bind="$attrs"
-                v-on="tableListeners"
-                :height="tableHeight"
-                :max-height="maxHeight"
-                ref="table"
-                :row-key="(row)=> row.id"
-                :data="tableData">
-        <template slot="append">
-          <slot name="append"></slot>
+      v-if="view.tableTitle && tableTitle"
+    >
+      <!-- 表格标题 -->
+      <h4 class="title">{{ tableTitle }}</h4>
+    </div>
+    <!-- table右上角按钮 -->
+    <div class="btn-bar" v-if="searchMode === 'popover'">
+      <slot name="btnBarPrevBtn" />
+    </div>
+    <SearchForm
+      ref="searchForm"
+      v-if="view.searchForm"
+      :searchMode="searchMode"
+      :showSeniorSearchFormButton="view.seniorSearchBtn"
+      :columns="tableConfig.columns || []"
+      @click="fetchHandler(false, true)"
+      :searchFormCondition.sync="searchFormCondition"
+      :remoteFuncs="remoteFuncs"
+      :isLoading="loading"
+      @clear="dataChangeHandler(true)"
+    >
+      <template v-if="searchMode === 'cover'">
+        <!-- table右上角按钮 -->
+        <div class="btn-bar">
+          <slot name="btnBarPrevBtn" />
+        </div>
+      </template>
+    </SearchForm>
+    <!-- 表格主体 -->
+    <el-table v-loading.lock="loading" v-bind="$attrs" v-on="tableListeners" :height="tableHeight" :max-height="maxHeight" ref="table" :row-key="(row) => row.id" :data="tableData">
+      <template slot="append">
+        <slot name="append"></slot>
+      </template>
+      <template slot="empty">
+        <SvgIcon icon-class="table_empty" class="empty_icon"></SvgIcon>
+        <span>{{ this.emptyText }}</span>
+      </template>
+      <el-table-column v-if="isMultiple" type="selection" reserve-selection align="center" header-align="center" width="55" :selectable="selectableFunc"> </el-table-column>
+      <el-table-column v-if="showColumnIndex" type="index" align="center" label="#" header-align="center" width="50"> </el-table-column>
+      <el-table-column
+        v-for="(column, columnIndex) in tableConfig.columns"
+        :key="columnIndex"
+        :column-key="column.columnKey"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.minWidth ? '-' : column.width || 140"
+        :min-width="column.minWidth || column.width || 140"
+        :fixed="column.fixed"
+        :render-header="column.renderHeader"
+        :sortable="column.sortable == 'false' ? false : column.sortable"
+        :sort-by="column.sortBy"
+        :sort-method="column.method"
+        :resizable="column.resizable"
+        :formatter="column.formatter"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :align="column.align"
+        :header-align="column.headerAlign || column.align"
+        :class-name="column.className"
+        :label-class-name="column.labelClassName"
+        :selectable="column.selectable"
+        :reserve-selection="column.reserveSelection"
+        :filters="column.filters"
+        :filter-placement="column.filterPlacement"
+        :filter-multiple="column.filterMultiple"
+        :filter-method="column.filterMethod"
+        :filtered-value="column.filteredValue"
+      >
+        <!-- 操作列表头插槽 -->
+        <template slot="header" slot-scope="scope">
+          <slot v-if="$scopedSlots[`${column.prop}_header`]" :name="`${column.prop}_header`" :column="scope.column"></slot>
+          <span v-else>
+            {{ column.label }}
+          </span>
         </template>
-        <template slot='empty'>
-          <SvgIcon icon-class='table_empty'
-                   class="empty_icon"></SvgIcon>
-          <span>{{this.emptyText}}</span>
+        <!-- 插槽情况 -->
+        <template slot-scope="scope">
+          <!-- 自定义插槽 -->
+          <span v-if="column.slotName">
+            <slot :name="column.slotName" :row="scope.row" :prop="column.prop" :$index="scope.$index" />
+          </span>
+          <span v-else>
+            {{ scope.row[column.prop] }}
+          </span>
         </template>
-        <el-table-column v-if="isMultiple"
-                         type="selection"
-                         reserve-selection
-                         align="center"
-                         header-align="center"
-                         width="55"
-                         :selectable="selectableFunc"> </el-table-column>
-        <el-table-column v-if="showColumnIndex"
-                         type="index"
-                         align="center"
-                         label="#"
-                         header-align="center"
-                         width="50"> </el-table-column>
-        <el-table-column v-for="(column, columnIndex) in tableConfig.columns"
-                         :key="columnIndex"
-                         :column-key="column.columnKey"
-                         :prop="column.prop"
-                         :label="column.label"
-                         :width="column.minWidth ? '-' : column.width || 140"
-                         :min-width="column.minWidth || column.width || 140"
-                         :fixed="column.fixed"
-                         :render-header="column.renderHeader"
-                         :sortable="column.sortable == 'false' ? false : column.sortable"
-                         :sort-by="column.sortBy"
-                         :sort-method="column.method"
-                         :resizable="column.resizable"
-                         :formatter="column.formatter"
-                         :show-overflow-tooltip="column.showOverflowTooltip"
-                         :align="column.align"
-                         :header-align="column.headerAlign || column.align"
-                         :class-name="column.className"
-                         :label-class-name="column.labelClassName"
-                         :selectable="column.selectable"
-                         :reserve-selection="column.reserveSelection"
-                         :filters="column.filters"
-                         :filter-placement="column.filterPlacement"
-                         :filter-multiple="column.filterMultiple"
-                         :filter-method="column.filterMethod"
-                         :filtered-value="column.filteredValue">
-          <!-- 操作列表头插槽 -->
-          <template slot="header" slot-scope="scope">
-           <slot v-if="$scopedSlots[`${column.prop}_header`]" :name="`${column.prop}_header`"  :column="scope.column"></slot>
-           <span v-else>
-             {{column.label}}
-           </span>
-          </template>
-         <!-- 插槽情况 -->
-          <template slot-scope="scope">
-             <!-- 自定义插槽 -->
-            <span v-if="column.slotName">
-              <slot :name="column.slotName"
-                    :row="scope.row"
-                    :prop="column.prop"
-                    :$index="scope.$index" />
-            </span>
-            <span v-else>
-              {{ scope.row[column.prop] }}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 分页 -->
-      <div class="mt-8">
-        <el-pagination v-if="showPagination"
-                       :current-page="pagination.pageIndex"
-                       :page-sizes="pageSizes"
-                       :page-size="pagination.pageSize"
-                       :layout="paginationLayout"
-                       :pager-count="pagerCount"
-                       :small="pagerSmall"
-                       :total="total"
-                       @size-change="handleSizeChange"
-                       @current-change="handleCurrentChange"
-                       style="float:right" />
-      </div>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <div class="mt-8">
+      <el-pagination
+        v-if="showPagination"
+        :current-page="pagination.pageIndex"
+        :page-sizes="pageSizes"
+        :page-size="pagination.pageSize"
+        :layout="paginationLayout"
+        :pager-count="pagerCount"
+        :small="pagerSmall"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        style="float:right"
+      />
     </div>
   </div>
 </template>
@@ -142,7 +125,10 @@ import {
 import { confirm } from '@/utils/confirm';
 import SvgIcon from '@/icons/SvgIcon.vue';
 import _cloneDeep from 'lodash/cloneDeep';
-import { DML, Params, DataSource } from '@/types/common';
+import {
+  DML, Params, DataSource, columns, columnConfig,
+} from '@/types/common';
+import { PropType } from 'vue';
 import SearchForm from './SearchForm.vue';
 
 const STATUS = {
@@ -191,7 +177,7 @@ export default class ProTable extends Vue {
   tableHeight: number | string = '100%';
 
   // 表格结构json
-  tableConfig = { columns: [] };
+  tableConfig: columns = { columns: [], name: '', position: '' };
 
   // 表格数据
   tableData: any[] = [];
@@ -241,11 +227,6 @@ export default class ProTable extends Vue {
   // 是否显示序号列
   @Prop({ default: false }) showColumnIndex!: boolean;
 
-  // 异步更新表单数据
-  @Prop({ default: () => ({}), type: Object }) formValuesAsync!: any;
-
-  // 子表tableConfig 详情看GenerateFormItem中解释
-  @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
   // 是否需要多选
   @Prop({ default: true, type: Boolean }) isMultiple!: boolean;
@@ -272,19 +253,19 @@ export default class ProTable extends Vue {
 
   // columns列配置
   @Prop({
-    type: Object,
+    type: Object as PropType<columns>,
     default: null,
     required: true,
   })
-  columns!: any;
+  columns!: columns;
 
   // request请求方法
   @Prop({
-    type: Function,
+    type: Function as PropType<(params: Params) => Promise<DataSource>>,
     default: null,
     required: true,
   })
-  request!: any;
+  request!: (params: Params) => Promise<DataSource>;
 
   // 分页
   get pagination() {
@@ -338,10 +319,8 @@ export default class ProTable extends Vue {
     this.fetchHandler(true);
     // 自适应分页组件按钮;
     window.addEventListener('resize', this.resizeHandler);
-    console.log(this);
   }
 
-
   // 表格刷新
   tableReload() {
     this.dataChangeHandler();
@@ -393,9 +372,7 @@ export default class ProTable extends Vue {
   fetchHandler(clearParams = false, resetPageIndex = false) {
     let searchCondition: any[] = [];
     this.loading = true;
-    const {
-      showPagination, pagination,
-    } = this;
+    const { showPagination, pagination } = this;
     const { tableParams, searchFormCondition } = this;
     // 如清空查询条件,则清空
     if (clearParams) {
@@ -443,8 +420,7 @@ export default class ProTable extends Vue {
       Object.assign(axiosParams, { orderCondition: this.orderCondition });
     }
     this.request(axiosParams)
-      .then((response: DataSource) => {
-        console.log(response);
+      .then((response) => {
         const { data = [], total = 0 } = response;
         this.tableData = data;
         this.total = total;
@@ -487,7 +463,6 @@ export default class ProTable extends Vue {
     window.removeEventListener('resize', this.resizeHandler);
   }
 
-
   @Watch('columns', {
     deep: true,
   })
@@ -497,38 +472,36 @@ export default class ProTable extends Vue {
 }
 </script>
 
-<style scoped>
-/* 修改暂无数据样式 */
-.base-table >>> .el-table__empty-text {
-  line-height: 10px;
-  margin-bottom: 15px;
-  color: rgba(0, 0, 0, 0.25) !important;
-  font-size: 14px;
-}
-.base-table >>> .empty_icon {
-  width: 4em;
-  height: 4em;
-  display: block;
-  margin: 0 auto;
-}
-</style>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
 .ProTable {
   background: white;
   padding: 10px;
   position: relative;
-  h4 {
+  ::v-deep {
+    .el-table__empty-text {
+      line-height: 10px;
+      margin-bottom: 15px;
+      color: rgba(0, 0, 0, 0.25) !important;
+      font-size: 14px;
+    }
+    .empty_icon {
+      width: 4em;
+      height: 4em;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+  .title {
     margin: 2px 30px 0px 0px;
     padding-left: 15px;
     font-weight: 500;
     font-size: 18px;
   }
-  .table-title {
+  .table-title-container {
     float: left;
     margin-left: 5px;
   }
-  .table-title-absolute {
+  .table-title-container-absolute {
     position: absolute;
     top: 110px;
     left: 10px;
diff --git a/src/demo/component/PersonCrudTable.vue b/src/demo/component/PersonCrudTable.vue
index 9844a18..3d595b6 100644
--- a/src/demo/component/PersonCrudTable.vue
+++ b/src/demo/component/PersonCrudTable.vue
@@ -7,7 +7,7 @@
 
 <template>
   <div class="page-container">
-    <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :tableParams="tableParams" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
+    <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
       <template #columnFormatter="{row,prop}">
         <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
         <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
diff --git a/src/types/common.ts b/src/types/common.ts
index 7053f34..47045e6 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -18,13 +18,13 @@ export enum DML {
 
 export interface Condition {
   field: string;
-  operator: string;
+  operator?: string;
   value: any;
 }
 
 export interface Params {
-  orderCondition?: string;
-  searchCondition?: Array<Condition>;
+  orderCondition: string;
+  searchCondition: Array<Condition>;
   pageIndex: number;
   pageSize: number;
 }
@@ -32,3 +32,21 @@ export interface DataSource {
   data: any[]
   total: number
 }
+
+export interface columns {
+  name: string; // 表格json名称
+  position: string; // 使用位置
+  columns: Array<columnConfig>; // 列配置
+}
+
+export interface columnConfig {
+  prop: string // 字段名
+  label: string // 表头
+  minWidth: number // 最小宽度
+  align: boolean // 内容对齐方式
+  headerAlign: boolean // 表头对齐方式
+  slotName: string // 自定义插槽名
+  fixed: string // 列对齐方式
+  sortable: 'false' | 'custom' // 是否可排序
+  searchable: boolean // 是否可查询
+}