meixioacomponent 1.1.49 → 2.0.2

package/packages/components/proPageTable/oa_pro_table.vue

@@ -71,120 +71,81 @@
         'check-type-multiple': tableCheckboxConfig.type === 'multiple',
       }"
     >
-      <base-wait :duration="0" :wait="status === 'wait'">
-        <el-table
-            ref="elTable"
-            slot="waitContent"
-            :border="borderColu"
-            :class="{
-            'no-row-bordel': !borderRow,
-          }"
-            :data="tableData"
-            :expand-row-keys="expandRowKeys"
-            :fit="true"
-            :height="tableHeight"
-            :rowKey="columnKey"
-            :stripe="stripe"
-            :style="{
-            width: width,
-            position: 'relative',
-          }"
-            :tree-props="treeProps"
-            @sort-change="sortChange"
-        >
-          <!-- 表格暂无数据 -->
-          <template slot="empty">
-            <baseDefaultSvgVue
-                v-show="defaultSvg"
-                :height="280"
-                :svgName="`no-data`"
-                :text="`表格无数据`"
-                :width="280"
-            ></baseDefaultSvgVue>
-            <!-- 第一次加载骨架屏 -->
-            <oa_pro_table_skeletonVue
-                v-if="loading"
-                slot="append"
-                :height="`${tableHeight}px`"
-                :row="showTableHeader.length"
-            ></oa_pro_table_skeletonVue>
-            <span></span>
-          </template>
-
-          <!--          表格勾选-->
-          <el-table-column
-              v-if="rowKey && canCheck"
-              fixed="left"
-              type="check"
-              width="60px"
-          >
-            <template slot="header" slot-scope="scope">
-              <el-checkbox
-                  v-if="rowKey && tableCheckboxConfig.type === 'multiple'&&useCheckAll"
-                  v-model="tableCheckControl.checkAll"
-                  :indeterminate="tableCheckControl.indeterminate"
-                  @change="tableCheckControl.onTableCheckAll"
-              ></el-checkbox>
-            </template>
-
-            <template slot-scope="scope">
-              <!--              单选框-->
-              <el-checkbox
-                  v-model="scope.row[`${staticKey}`]"
-                  :disabled="
+
+      <t-enhanced-table
+          ref="enhancedTableRef"
+          row-key="key"
+          :expanded-row-keys="expandRowKeys"
+          :columns="showTableHeader"
+          :data="tableData"
+          :stripe="false"
+          :bordered="bordered"
+          :loading="loading"
+          :sort="sort"
+          :resizable="true"
+          :expandIcon="useExpand"
+          table-layout="fixed"
+          :height="tableHeight"
+          :expanded-row="expandedRow"
+          :tree=" treeProps[`children`]? {
+            childrenKey: treeProps[`children`],
+            checkStrictly:  false
+      }:null"
+          :selected-row-keys="tableCheckboxConfig.value"
+          @sort-change="sortChange"
+      >
+
+        <!-- 表格暂无数据 -->
+        <template slot="empty">
+          <baseDefaultSvgVue
+              v-show="defaultSvg"
+              :height="280"
+              :svgName="`no-data`"
+              :text="`表格无数据`"
+              :width="280"
+          ></baseDefaultSvgVue>
+        </template>
+
+
+        <template #title-check>
+          <t-checkbox v-if="rowKey && tableCheckboxConfig.type === 'multiple'&&useCheckAll"
+                      v-model="tableCheckControl.checkAll"
+                      :indeterminate="tableCheckControl.indeterminate"
+                      @change="tableCheckControl.onTableCheckAll">
+          </t-checkbox>
+
+        </template>
+
+
+        <template v-for="(item) in showTableHeader" :slot="item.key" slot-scope="scope">
+
+          <div v-if="item.key==='check'">
+
+            <t-checkbox
+                v-model="scope.row[`${staticKey}`]"
+                :disabled="
                   tableCheckboxConfig.canSelected
                     ? !tableCheckboxConfig.canSelected(scope.row)
                     : false
                 "
-                  @change="tableCheckControl.onTableRowCheckChange(scope.row)"
-              ></el-checkbox>
-            </template>
-          </el-table-column>
-          <!--          是否开启展开行-->
-          <el-table-column v-if="useExpand" type="expand">
-            <template slot-scope="props">
-              <slot :scope="props.row" name="tableExpand"></slot>
-            </template>
-          </el-table-column>
-          <!--序号-->
-          <el-table-column type="index" width="50" v-if="useIndex" label="序号"></el-table-column>
-
-          <el-table-column
-              v-for="(item, index) in showTableHeader"
-              :key="index"
-              :align="align"
-              :fixed="item.lock"
-              :label="item.label"
-              :prop="item.key"
-              :sortable="item.disabledSortable? false: 'custom'"
-              :width="isAverageWidth ? '' : item.width"
-          >
-            <template slot="header" slot-scope="scope">
-              <oaProtableHeader
-                  :config="item"
-                  :index="index"
-                  :isAverageWidth="isAverageWidth"
-                  :scope="scope"
-                  @handleScreenItem="handleScreenItem"
-                  @headerItemLock="headerItemLock"
-                  @headerItemUnlock="headerItemUnlock"
-              >
-              </oaProtableHeader>
-            </template>
-
-            <template slot-scope="scope">
-              <slot
-                  v-if="item.template"
-                  :name="item.key"
-                  :scope="scope.row"
-              ></slot>
-
-              <el-tooltip
-                  v-else-if="isToolTip(scope.row[`${item.key}`]) && !item.type"
-                  :content="scope.row[`${item.key}`].toString()"
-                  effect="dark"
-                  placement="top"
-              >
+                @change="tableCheckControl.onTableRowCheckChange(scope.row)"
+            >
+            </t-checkbox>
+
+          </div>
+
+          <div v-else>
+            <slot
+                v-if="item.template"
+                :name="item.key"
+                :scope="scope.row"
+            ></slot>
+
+            <t-tooltip
+                v-else-if="isToolTip(scope.row[`${item.key}`]) && !item.type"
+                :content="scope.row[`${item.key}`].toString()"
+                placement="top"
+            >
                 <span
                     :class="nomalStyle(item)"
                     class="cell-content-text"
@@ -192,26 +153,29 @@
                 >
                   {{ scope.row[item.key] }}
                 </span>
-              </el-tooltip>
-
-              <span
-                  v-else-if="!item.type"
-                  :class="nomalStyle(item)"
-                  class="cell-content-text"
-                  @click="rowClick(item, scope.row)"
-              >
+            </t-tooltip>
+
+            <span
+                v-else-if="!item.type"
+                :class="nomalStyle(item)"
+                class="cell-content-text"
+                @click="rowClick(item, scope.row)"
+            >
                 {{ scope.row[item.key] }}
               </span>
 
-              <base-text
-                  v-else-if="item.type"
-                  :content="scope.row[item.key]"
-                  :type="item.type"
-              ></base-text>
-            </template>
-          </el-table-column>
-        </el-table>
-      </base-wait>
+            <base-text
+                v-else-if="item.type"
+                :content="scope.row[item.key]"
+                :type="item.type"
+            ></base-text>
+          </div>
+
+
+        </template>
+
+
+      </t-enhanced-table>
     </div>
 
     <!-- 表格尾部 -->
@@ -259,6 +223,7 @@ import componentConfig from "../../config/componentConfig";
 import {tableSectionMixins} from "../mixins/tableSectionMixins";
 import TableCheckControl from "./TableCheckControl";
 import proTableLocalConfigManage from "../../config/ProTableLocalConfigManage/ProTableLocalConfigManage";
+import {TransomTableCheckConfig, TransomTableConfig} from "../../utils/utils";
 
 export default {
   name: "baseProTable",
@@ -281,8 +246,6 @@ export default {
       defaultSvg: false,
       /* 单选表格  记录之前选择的表格数据 */
       preSingleTableValue: null,
-      // 是否开启斑马纹
-      stripe: true,
       // 是否开启表格竖向条纹
       borderColu: true,
       // 是否开启表格横向条纹
@@ -307,7 +270,13 @@ export default {
       tableCheckControl: null,
 
 
-      tableConfigColumnList: []
+      tableConfigColumnList: [],
+
+      sort: {
+        sortBy: null,
+        // 是否按照降序进行排序
+        descending: false,
+      }
 
     };
   },
@@ -318,6 +287,7 @@ export default {
   mounted() {
     //勾选表格
     this.$nextTick(() => {
+      this.hasColumnSlot = this.$slots["column-mid"];
       this.initTableColumWidth();
       this.onTableDataChange(this.tableData);
     });
@@ -339,12 +309,11 @@ export default {
       type: Object,
       default: () => {
         return {
-          children: "children",
+          children: null,
           hasChildren: "hasChildren",
         };
       },
     },
-
     // 网络请求
     httpRequire: {
       type: Function,
@@ -401,6 +370,14 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    /**
+     * 是否显示表格边框
+     */
+    bordered: {
+      type: Boolean,
+      default: false
+    },
     /*
          快捷筛选的列表
      */
@@ -521,10 +498,23 @@ export default {
     useIndex: {
       type: Boolean,
       default: false
+    },
+    expandedRow: {
+      type: Function,
+      default: () => {
+        return null;
+      }
     }
 
+
   },
   computed: {
+    checkType() {
+      let checkType = null;
+      let tableCheckboxConfig = this.$props.tableCheckboxConfig
+      checkType = tableCheckboxConfig.type
+      return checkType;
+    },
     staticKey() {
       return this.tableCheckControl.staticKey;
     },
@@ -538,8 +528,6 @@ export default {
     },
 
     tableHeight() {
-      this.hasColumnSlot = this.$slots["column-mid"];
-
       return (
           this.$props.height -
           this.config.footHeight -
@@ -565,18 +553,15 @@ export default {
     },
 
     showTableHeader() {
-
       return this.tableConfigColumnList.filter((item) => {
-
         if (item.hasOwnProperty('disabledSortable')) {
           if (!item.disabledSortable) {
-            item.disabledSortable = false;
+            item['sorter'] = false;
           }
         } else {
-          item.disabledSortable = false;
+          item['sorter'] = true;
         }
 
-
         return item.show;
       });
 
@@ -647,8 +632,7 @@ export default {
       this.initProScreenConfig();
       this.initFooterHandleConfig();
       this.tableConfigColumnList.forEach((item, index) => {
-        item.preIndex = index;
-
+        TransomTableConfig(item, index);
         if (!item.hasOwnProperty('show')) {
           this.$set(item, "show", true);
         }
@@ -706,56 +690,50 @@ export default {
 
 
     tableConfigPushEmpty() {
-      //
-      // this.tableConfigColumnList.push({
-      //   label: "",
-      //   key: "noData",
-      //   lock: false,
-      //   width: 40,
-      //   show: true,
-      //   template: false,
-      // });
     },
 
     initTableControl() {
-      const {tableCheckboxConfig, rowKey} = this.$props;
-      this.tableCheckControl = new TableCheckControl(
-          tableCheckboxConfig,
-          rowKey,
-          this.handleSelectionChange,
-          this.handleSelectionCleanChange
-      );
+      if (this.rowKey && this.canCheck) {
+        this.tableConfigColumnList.unshift(TransomTableCheckConfig())
+        const {tableCheckboxConfig, rowKey} = this.$props;
+        this.tableCheckControl = new TableCheckControl(
+            tableCheckboxConfig,
+            rowKey,
+            this.handleSelectionChange,
+            this.handleSelectionCleanChange
+        );
+      }
     },
 
     initTableColumWidth() {
-      const {isAverageWidth} = this;
-      if (isAverageWidth) return;
-      try {
-        this.$nextTick(() => {
-          const tableWidth = this.$refs.elTable.$el.offsetWidth;
-          let totalWidth = 0;
-          let staticLength = 0;
-          const tableConfig = this.tableConfigColumnList;
-          tableConfig.forEach((item) => {
-            if (item.lock || item.staticWidth) {
-              staticLength += 1;
-            }
-            totalWidth += parseInt(item.width);
-          });
-          const sub = tableWidth - totalWidth;
-          if (sub > 0) {
-            const aver = sub / (tableConfig.length - staticLength);
-
-            tableConfig.forEach((item) => {
-              const width = parseInt(item.width);
-              if (!item.lock && !item.staticWidth) {
-                item.width = width + aver;
-              }
-            });
-          }
-        });
-      } catch (error) {
-      }
+      // const {isAverageWidth} = this;
+      // if (isAverageWidth) return;
+      // try {
+      //   this.$nextTick(() => {
+      //     const tableWidth = this.$refs.elTable.$el.offsetWidth;
+      //     let totalWidth = 0;
+      //     let staticLength = 0;
+      //     const tableConfig = this.tableConfigColumnList;
+      //     tableConfig.forEach((item) => {
+      //       if (item.lock || item.staticWidth) {
+      //         staticLength += 1;
+      //       }
+      //       totalWidth += parseInt(item.width);
+      //     });
+      //     const sub = tableWidth - totalWidth;
+      //     if (sub > 0) {
+      //       const aver = sub / (tableConfig.length - staticLength);
+      //
+      //       tableConfig.forEach((item) => {
+      //         const width = parseInt(item.width);
+      //         if (!item.lock && !item.staticWidth) {
+      //           item.width = width + aver;
+      //         }
+      //       });
+      //     }
+      //   });
+      // } catch (error) {
+      // }
     },
 
     searchContentHeightChange(height) {
@@ -909,8 +887,8 @@ export default {
       }
 
       result[`keyword`] = this.module;
-      result[`sortField`] = this.sortField;
-      result[`sortOrder`] = this.sortOrder;
+      result[`sortField`] = this.sort?.sortBy;
+      result[`sortOrder`] = this.sort?.descending ? 'desc' : 'asc';
 
       // 高级筛选的结果
       const searchList = [];
@@ -1026,19 +1004,21 @@ export default {
       if (!isAuth) return;
 
       try {
-        let elTable = this.$refs.elTable.$el;
-        let target = elTable.querySelector(".el-table__body-wrapper");
-        if (target) {
-          target.scrollTop = 0;
-        }
+        // todo
+        // let elTable = this.$refs.elTable.$el;
+        // let target = elTable.querySelector(".el-table__body-wrapper");
+        // if (target) {
+        //   target.scrollTop = 0;
+        // }
       } catch (error) {
       }
     },
     // element表格的重新渲染方法
     daLayoutTable() {
-      this.$nextTick(() => {
-        this.$refs.elTable.doLayout();
-      });
+      // this.$nextTick(() => {
+      // todo
+      //   this.$refs.elTable.doLayout();
+      // });
     },
     // 清空高级筛选的条件
     cleanProscreenCondition(flag = false) {
@@ -1066,7 +1046,8 @@ export default {
 
     // 清空表格勾选的数据
     clearSelection() {
-      this.$refs.elTable?.clearSelection();
+      // todo
+      // this.$refs.elTable?.clearSelection();
     },
 
     // 判断表格的行能否点击
@@ -1098,27 +1079,33 @@ export default {
         this.scrollToTop();
       });
     },
-    sortChange(column) {
-      const {sortByApi} = this.$props;
-      if (sortByApi) {
-        this.sortField = column.prop;
-        this.sortOrder =
-            column.order == null
-                ? null
-                : column.order == "ascending"
-                    ? "asc"
-                    : "desc";
-        this.$nextTick(() => {
-          this.refreshData(true);
-        });
-      } else {
-        this.tableData = this.tableData.sort(
-            this.sortFun(
-                column.prop,
-                column.order ? column.order == "descending" : undefined
-            )
-        );
-      }
+    sortChange(sortInfo) {
+
+      this.sort = sortInfo;
+
+      this.refreshData(true);
+
+
+      // const {sortByApi} = this.$props;
+      // if (sortByApi) {
+      //   this.sortField = column.prop;
+      //   this.sortOrder =
+      //       column.order == null
+      //           ? null
+      //           : column.order == "ascending"
+      //               ? "asc"
+      //               : "desc";
+      //   this.$nextTick(() => {
+      //     this.refreshData(true);
+      //   });
+      // } else {
+      //   this.tableData = this.tableData.sort(
+      //       this.sortFun(
+      //           column.prop,
+      //           column.order ? column.order == "descending" : undefined
+      //       )
+      //   );
+      // }
     },
     sortFun(attr, rev) {
       if (rev == undefined) {
@@ -1145,7 +1132,8 @@ export default {
       this.sortField = null;
       this.sortOrder = null;
       this.$nextTick(() => {
-        this.$refs.elTable.clearSort();
+        // todo
+        // this.$refs.elTable.clearSort();
         this.cleanProscreenCondition(true);
       });
     },
@@ -1191,8 +1179,8 @@ background-color: var(--color-gray-s);
   }
 
   .table-suffix {
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
     width: 40px;
     height: 40px;
     display: flex;
@@ -1207,71 +1195,7 @@ background-color: var(--color-gray-s);
     display: none;
   }
 
-  .oa-pro-table {
-    position: relative;
-
-    /deep/ th {
-      padding: 0 0;
-      background: var(--color-table-header) !important;
-
-      .cell {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-
-        .el-checkbox {
-          margin: 0 var(--margin-5);
-        }
-      }
-    }
-
-    /deep/ td {
-      padding: calc(var(--padding-4) * 1.6) calc(var(--padding-4));
-
-      .cell {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-
-        .el-checkbox {
-          margin: 0 var(--margin-5);
-        }
-      }
-    }
-
-    .table-tooltip-wrap {
-      z-index: -1;
-      position: fixed;
-      visibility: hidden;
-    }
-  }
-
-  .no-row-bordel {
-    /deep/ .el-table__cell {
-      border-bottom: none;
-    }
-  }
-
-  .check-type-single {
-    /deep/ th {
-      .el-checkbox {
-        visibility: hidden;
-      }
-    }
-  }
 
-  .primary,
-  .fun {
-    font-weight: var(--font-weight-g);
-    color: var(--color-primary) !important;
-    font-size: var(--font-size-base) !important;
-  }
-
-  .fun {
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 
   .oa-pro-table-footer {
     width: 100%;