修改

src/views/newTable/index.vue

@@ -7,32 +7,12 @@
       </div>
       <template v-if="tableData.length">
         <div style="height:100%">
-          <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
-            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
+          <el-table v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
+            <el-table-column v-for="(item, index) in tableColsCopy" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formatter="formatter">
               <template #header>
-                <span class="colTips">
-                  <el-tooltip :content="item.columnDescribe" placement="top">
-                    <span>{{ item.columnLabel }}</span>
-                  </el-tooltip>
-                </span>
-                <span v-if="item.needFilters">
-                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
-                    <i slot="reference" :class="[
-                        'filter-arrow',
-                        'el-icon-arrow-down',
-                        arrowClass(item.columnName),
-                      ]" />
-                    <el-form>
-                      <el-form-item :label="item.columnLabel">
-                        <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
-                          <el-option v-for="(option, optionIndex) in tableDataFilters[
-                              item.columnName
-                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
-                        </el-select>
-                      </el-form-item>
-                    </el-form>
-                  </el-popover>
-                </span>
+                <el-tooltip :content="item.columnDescribe || item.columnLabel" placement="top">
+                  <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" :sortable="item.needSort" :sort-rule.sync="tableDataSortRules[item.columnName]" />
+                </el-tooltip>
               </template>
             </el-table-column>
             <el-table-column fixed="right" label="操作" :width="fixedWidth">
@@ -132,6 +112,7 @@ import NoData from "@/components/nodata";
 import { translateDataToTreeAllTreeMsg } from "@/utils/validate";
 import { Query, newData, modifyData, moveData } from "@/api/webApi";
 import pf from '@/layout/mixin/publicFunc'
+import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
 export default {
   name: "DataTable",
   mixins: [pf],
@@ -196,7 +177,7 @@ export default {
       default: "",
     },
   },
-  components: { Dialog, NoData },
+  components: { Dialog, NoData, TableHeaderCell },
   data () {
     return {
       pageTitle: '',
@@ -243,7 +224,8 @@ export default {
         datasource_id: null
       },
       datasource_id: 4,
-      dataSourceArrs: []
+      dataSourceArrs: [],
+      tableDataSortRules: {},
     };
   },
   watch: {
@@ -292,28 +274,35 @@ export default {
     //设置新增修改表单类型
     fromDataType () {
       return function (type) {
-        return type.replace(/\([^\)]*\)/g, "");
+        if (type) {
+          return type.replace(/\([^\)]*\)/g, '')
+        }
       }
     },
 
     //设置表头-下拉-选中数据
-    filteredTableData () {
-      if (this.isTree) {
-        this.tableData = translateDataToTreeAllTreeMsg(
-          this.tableData,
-          "parentID",
-          "companyID"
-        );
-      }
-      return this.tableData.filter((item) => {
-        let flag = true;
-        Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== "" && item[key] !== value) {
-            flag = false;
+    dealedTableData () {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(String(item[key]))) {
+            flag = false
           }
-        });
-        return flag;
-      });
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
     },
   },
   mounted () {
@@ -337,6 +326,7 @@ export default {
             }
             this.tableCols = returnData;
             this.getQuery(id);
+            this.setTableCols();
           }
         } else {
           this.$message.error("获取表头数据失败");
@@ -350,6 +340,17 @@ export default {
       const arrbegin = _.cloneDeep(this.tableOptionscp);
       this.tableOptions = arrbegin;
     },
+    setTableCols () {
+      this.tableCols.forEach(({ columnName, needFilters, needSort }) => {
+        if (needFilters) {
+          this.$set(this.tableDataFilters, columnName, [])
+          this.$set(this.filterValues, columnName, [])
+        }
+        if (needSort) {
+          this.$set(this.tableDataSortRules, columnName, '')
+        }
+      })
+    },
     load () {
       //
       if (!this.isTree) {
@@ -522,35 +523,34 @@ export default {
           this.tableArrs.push(item.columnName);
           // const reqUt = this.getSelectData(item.listqueryTemplateID)
           // reqUts.push(reqUt)
-          if (!this.tableOptions[item.columnName]) {
-            //开始位置beginPosition 结束位置endPosition (区分开始结束位置必须传null)
-            if (
-              item.columnName !== "beginPosition" &&
-              item.columnName !== "endPosition"
-            ) {
-              this.tableOptions[item.columnName] = await this.getSelectData(
-                item.listqueryTemplateID
-              );
-            } else {
-              this.tableOptions[item.columnName] = await this.getSelectData(
-                item.listqueryTemplateID,
-                null
-              );
-              this.tabledatacopy[item.columnName] = _.cloneDeep(
-                this.tableOptions[item.columnName]
-              );
-            }
-          } else {
-            if (
-              item.columnName === "beginPosition" ||
-              item.columnName === "endPosition"
-            ) {
-              this.tableOptions[item.columnName] = await this.getSelectData(
-                item.listqueryTemplateID,
-                null
-              );
-            }
-          }
+          // if (!this.tableOptions[item.columnName]) {
+          //   if (
+          //     item.columnName !== "beginPosition" &&
+          //     item.columnName !== "endPosition"
+          //   ) {
+          //     this.tableOptions[item.columnName] = await this.getSelectData(
+          //       item.listqueryTemplateID
+          //     );
+          //   } else {
+          //     this.tableOptions[item.columnName] = await this.getSelectData(
+          //       item.listqueryTemplateID,
+          //       null
+          //     );
+          //     this.tabledatacopy[item.columnName] = _.cloneDeep(
+          //       this.tableOptions[item.columnName]
+          //     );
+          //   }
+          // } else {
+          //   if (
+          //     item.columnName === "beginPosition" ||
+          //     item.columnName === "endPosition"
+          //   ) {
+          //     this.tableOptions[item.columnName] = await this.getSelectData(
+          //       item.listqueryTemplateID,
+          //       null
+          //     );
+          //   }
+          // }
           //
         }
         // this.filterValues[item.columnName] = ''
@@ -665,6 +665,15 @@ export default {
     popoverHideHandler () {
       this.colShowFilter = "";
     },
+    formatter (row, column, cellValue, index) {
+      const sameColumn = this.tableCols.find(
+        col => col.columnName === column.property
+      )
+      if (sameColumn && this.fromDataType(sameColumn.dataType) === 'datetime') {
+        return (cellValue ?? '').replace('T', ' ')
+      }
+      return cellValue
+    },
     //分组
     tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column["property"])) {
@@ -843,6 +852,12 @@ export default {
       .cell {
         font-weight: bold;
         color: #101116;
+        .el-tooltip {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          line-height: 34px;
+        }
         > .el-checkbox {
           display: none;
         }

src/views/newUserManagement/index.vue

@@ -323,6 +323,7 @@ export default {
       // this.treeCheckId = this.arrs[this.arrs.length-1].user_group_id
     },
     async handleNodeClick (data, index) {
+      console.log(data)
       this.activeIndex = index
       if (data.user_group_id !== 0) {
         this.treeCheckId = data.user_group_id