修改

src/components/TableHeaderCell/index.vue

@@ -12,52 +12,20 @@
       <span>{{ label }}</span>
     </template>
     <template v-if="filterable">
-      <el-popover
-        class="table-header-cell-popover"
-        placement="bottom"
-        trigger="click"
-        @show="expand = true"
-        @hide="expand = false"
-      >
-        <span
-          v-if="filterStyle === 'underline'"
-          slot="reference"
-          :class="['btn-filter', { 'btn-filter-active': active }]"
-        >{{ label }}</span>
-        <i
-          v-if="filterStyle === 'arrow'"
-          slot="reference"
-          :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]"
-        />
+      <el-popover class="table-header-cell-popover" placement="bottom" trigger="click" @show="expand = true" @hide="expand = false">
+        <span v-if="filterStyle === 'underline'" slot="reference" :class="['btn-filter', { 'btn-filter-active': active }]">{{ label }}</span>
+        <i v-if="filterStyle === 'arrow'" slot="reference" :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]" />
         <el-form>
           <el-form-item :label="label">
-            <el-select
-              v-model="selections"
-              size="small"
-              placeholder="筛选"
-              multiple
-              filterable
-              default-first-option
-              collapse-tags
-              clearable
-              @change="newVal => { $emit('update:filter-values', newVal) }"
-            >
-              <el-option
-                v-for="(option, optionIndex) in filterOptions"
-                :key="option.value + optionIndex"
-                :value="option.value"
-                :label="option.text"
-              />
+            <el-select v-model="selections" size="small" placeholder="筛选" multiple filterable default-first-option collapse-tags clearable @change="newVal => { $emit('update:filter-values', newVal) }">
+              <el-option v-for="(option, optionIndex) in filterOptions" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
             </el-select>
           </el-form-item>
         </el-form>
       </el-popover>
     </template>
     <template v-if="sortable">
-      <span
-        class="caret-wrapper"
-        @click="sortChange"
-      >
+      <span class="caret-wrapper" @click="sortChange">
         <i class="sort-caret ascending" />
         <i class="sort-caret descending" />
       </span>
@@ -84,31 +52,30 @@ export default {
       type: Array
     },
     sortable: {
-      type: Boolean,
-      default: false
+      type: [Boolean, Number],
     },
     sortRule: {
       type: String,
       default: ''
     }
   },
-  data() {
+  data () {
     return {
       selections: [],
       expand: false
     }
   },
   computed: {
-    active() {
+    active () {
       return this.filterValues?.length
     },
-    filterable() {
+    filterable () {
       return !!this.filterOptions
     }
   },
   watch: {
     filterValues: {
-      handler(val) {
+      handler (val) {
         this.selections = val
       },
       immediate: true,
@@ -116,7 +83,7 @@ export default {
     }
   },
   methods: {
-    sortChange() {
+    sortChange () {
       const sortRule = this.sortRule === '' ? 'ascending' : this.sortRule === 'ascending' ? 'descending' : ''
       this.$emit('update:sort-rule', sortRule)
     }
@@ -143,7 +110,7 @@ export default {
     color: #2d7cff;
   }
   &::after {
-    content: '';
+    content: "";
     display: block;
     width: calc(100% + 4px);
     position: absolute;

src/views/newBagDetails/index.vue

@@ -265,7 +265,7 @@ export default {
         }
       }
       &-msgs {
-        padding: 25px 0;
+        padding: 12px 0;
         height: 135px;
         ::v-deep .el-scrollbar__wrap {
           overflow-x: hidden;

src/views/newQuery/components/table.vue

@@ -1,12 +1,17 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newQueryTable">
     <template v-if="istableChild">
-      <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
+      <el-table v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
         <el-table-column v-for="col in tableColsCopy" :key="col.columnName" :prop="col.columnName" :label="col.groupName">
           <el-table-column v-for="childCol in col.children" :key="childCol.columnName" :prop="childCol.columnName" :label="childCol.columnLabel">
             <template #header>
               <el-tooltip :content="childCol.columnDescribe || childCol.columnLabel" placement="top">
-                <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" :sortable="childCol.needSort" />
+                <template v-if="childCol.needFilters">
+                  <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" :sortable="childCol.needSort" />
+                </template>
+                <template v-else>
+                  <div>{{ childCol.columnLabel }}</div>
+                </template>
               </el-tooltip>
             </template>
           </el-table-column>
@@ -14,36 +19,16 @@
       </el-table>
     </template>
     <template v-else>
-      <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
+      <el-table v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
         <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">
-          <!-- <template #header>
-          <span v-if="item.columnDescribe" class="colTips">
-            <el-tooltip :content="item.columnDescribe" placement="top">
-              <span>{{ item.columnLabel }}</span>
-            </el-tooltip>
-          </span>
-          <span v-else class="colTips">
-            <span>{{ item.columnLabel }}</span>
-          </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>
-        </template> -->
+          <template #header>
+            <template v-if="item.needFilters">
+              <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" :sortable="item.needSort" />
+            </template>
+            <template v-else>
+              <div>{{ item.columnLabel }}</div>
+            </template>
+          </template>
         </el-table-column>
       </el-table>
     </template>
@@ -74,7 +59,6 @@
 
 <script>
 import pf from '@/layout/mixin/publicFunc';
-import { setTableFilters } from "@/utils/table";
 import { getToken } from '@/utils/auth';
 import { getAuthData, formatOrder } from "@/utils/validate";
 import { throttledExportToExcel } from '@/utils/table';
@@ -86,11 +70,6 @@ export default {
   mixins: [pf, tableColsMixin],
   components: { Dialog, TableHeaderCell },
   props: {
-    // 是否显示合计行
-    showSummary: {
-      type: Boolean,
-      default: false,
-    },
     // 不换行，溢出隐藏
     showOverflowTooltip: {
       type: Boolean,
@@ -140,20 +119,34 @@ export default {
       authBtnColName: [],
       tableArrs: [], //重组table-表头下拉
       tableOptions: {}, //弹框-下来数据缓存
+      showSummary: false, //是否显示统计
+      tableDataSortRules: {},
     }
   },
   computed: {
     //设置表头-下拉-选中数据
-    filteredTableData () {
-      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])
     },
     tableHeight () {
       return 100
@@ -191,6 +184,10 @@ export default {
               this.$store.dispatch('auth/changeAuthMsg', returnData)
             }
             const msgDatas = returnData.filter((item) => item.needShow);
+            const msgCounts = msgDatas.filter((item) => item.needCount);
+            if (msgCounts.length) {
+              this.showSummary = true
+            }
             const msgDatasShows = formatOrder(msgDatas);
             if (this.istableChild) {
               const datas = _.cloneDeep(msgDatasShows)
@@ -315,9 +312,31 @@ export default {
         //   }
         // }
       });
-      setTableFilters(this.tableData, this.tableDataFilters);
+      const dats = this.setTableFilters(this.tableData, this.tableDataFilters);
+      this.tableDataFilters = _.cloneDeep(dats);
       this.tableGroup(this.tableData);
     },
+    setTableFilters (tableData, filters) {
+      const tempSets = {}
+      Object.keys(filters).forEach(key => {
+        tempSets[key] = new Set()
+      })
+      tableData.forEach(item => {
+        Object.keys(tempSets).forEach(key => {
+          (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
+        })
+      })
+      Object.keys(tempSets).forEach(key => {
+        filters[key] = _.orderBy(
+          [...tempSets[key]].map(value => ({
+            text: value,
+            value
+          })),
+          o => o.value
+        )
+      })
+      return filters
+    },
     //分组
     tableGroup (tableData) {
       const spanArr = [];
@@ -378,6 +397,9 @@ export default {
       const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计：' + this.tableData.length
+        }
         this.tableColsCopy.forEach((p) => {
           if (column.property == p.columnName && p.needCount) {
             const values = data.map((item) => Number(item[column.property]));

src/views/newQuery/mix/tableCols.js

@@ -39,7 +39,6 @@ export default {
     initTableCols () {
       const that = this
       function setTableCols (cols) {
-        console.log(cols)
         for (const col of cols) {
           col.index = that.checkedKeys.length
           that.checkedKeys.push(that.checkedKeys.length)
@@ -69,6 +68,7 @@ export default {
       const datas = this.colsFilter(this._.cloneDeep(this.tableCols))
       const newTableColsCopy = datas.filter((item) => item.needShow)
       this.tableColsCopy = _.cloneDeep(newTableColsCopy)
+      console.log(newTableColsCopy)
       setTimeout(() => {
         if (!this[tableDataName].length) {
           this[tableDataName] = tableDataTemp