Merge branch 'master' of http://120.26.64.82:10880/BFFE/SMAirports

src/views/newQuery/components/table.vue

@@ -1,17 +1,12 @@
 <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="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 ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" :show-summary="showSummary" :header-cell-class-name="headerCellClass" :cell-class-name="cellClass" height="100%" class="table infinite-list" stripe border @cell-click="cellClick">
         <el-table-column v-for="col in tableColsCopy" :key="col.columnName" :prop="col.columnName" :label="col.groupName" align="center">
-          <el-table-column v-for="childCol in col.children" :key="childCol.columnName" :sortable="childCol.needSort ? true : false" :prop="childCol.columnName" :label="childCol.columnLabel" :formatter="formatter">
+          <el-table-column v-for="childCol in col.children" :key="childCol.columnName" :prop="childCol.columnName" :label="childCol.columnLabel" :formatter="formatter">
             <template #header>
               <el-tooltip :content="childCol.columnDescribe || childCol.columnLabel" placement="top">
-                <template v-if="childCol.needFilters">
-                  <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" />
-                </template>
-                <template v-else>
-                  <div>{{ childCol.columnLabel }}</div>
-                </template>
+                <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" :sortable="childCol.needSort" :sort-rule.sync="tableDataSortRules[childCol.columnName]" />
               </el-tooltip>
             </template>
           </el-table-column>
@@ -19,16 +14,11 @@
       </el-table>
     </template>
     <template v-else>
-      <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">
+      <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" :show-summary="showSummary" :header-cell-class-name="headerCellClass" :cell-class-name="cellClass" height="100%" class="table infinite-list" border stripe @cell-click="cellClick">
+        <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>
             <el-tooltip :content="item.columnDescribe || item.columnLabel" placement="top">
-              <template v-if="item.needFilters">
-                <TableHeaderCell :label="item.columnLabel" :filter-options="tableDataFilters[item.columnName]" :filter-values.sync="filterValues[item.columnName]" />
-              </template>
-              <template v-else>
-                <div>{{ item.columnLabel }}</div>
-              </template>
+              <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>
@@ -36,17 +26,17 @@
     </template>
     <template v-if="istableCol">
       <div :style="btnStyle" class="btns">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
+        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
       </div>
       <Dialog :flag="dialogFlag" width="600px" class="dialog-check-group">
         <div class="dialog-wrapper">
           <div class="title">列设置</div>
-          <div style="height: 600px;" class="content">
+          <div style="height: 600px" class="content">
             <el-scrollbar style="height: 100%">
               <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
-              label: 'columnLabel',
-              children: 'children',
-            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+                  label: 'columnLabel',
+                  children: 'children',
+                }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
             </el-scrollbar>
           </div>
           <div class="foot right t30">
@@ -60,17 +50,17 @@
 </template>
 
 <script>
-import pf from '@/layout/mixin/publicFunc';
-import { getToken } from '@/utils/auth';
-import { getAuthData, formatOrder } from "@/utils/validate";
-import { throttledExportToExcel } from '@/utils/table';
-import tableColsMixin from '../mix/tableCols';
-import Dialog from '@/layout/components/Dialog/index.vue';
-import TableHeaderCell from "@/components/TableHeaderCell";
+import pf from '@/layout/mixin/publicFunc'
+import { getToken } from '@/utils/auth'
+import { getAuthData, formatOrder } from '@/utils/validate'
+import { throttledExportToExcel } from '@/utils/table'
+import tableColsMixin from '../mix/tableCols'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
 export default {
   name: 'NewQueryTable',
-  mixins: [pf, tableColsMixin],
   components: { Dialog, TableHeaderCell },
+  mixins: [pf, tableColsMixin],
   props: {
     // 不换行，溢出隐藏
     showOverflowTooltip: {
@@ -79,11 +69,11 @@ export default {
     },
     tableTag: {
       type: Object,
-      default: () => { }
+      default: () => { },
     },
     tableName: {
       type: String,
-      default: ''
+      default: '',
     },
     istableCol: {
       type: Boolean,
@@ -95,12 +85,12 @@ export default {
     },
     btnStyle: {
       type: Object,
-      default: () => { }
+      default: () => { },
     },
     pageSize: {
       type: Number,
-      default: 20
-    }
+      default: 20,
+    },
   },
   data () {
     return {
@@ -108,28 +98,28 @@ export default {
       queryId: '',
       noMore: false,
       loading: false,
-      tableCols: [], //表头数据
-      tableData: [], //表格数据
-      tableColsCopy: [], //表头数据缓存
-      tableDataFilters: {}, //表头-下拉数据
-      filterValues: {}, //表头-下拉-选中数据
-      tableDataCopy: [], //缓存table数据
-      tableGroups: [], //表格分组数据
-      colShowFilter: "", //表头-下拉-箭头
-      spanArr: [], //表格分组数据缓存
-      pos: 0, //表格分组计数
+      tableCols: [], // 表头数据
+      tableData: [], // 表格数据
+      tableColsCopy: [], // 表头数据缓存
+      tableDataFilters: {}, // 表头-下拉数据
+      filterValues: {}, // 表头-下拉-选中数据
+      tableDataCopy: [], // 缓存table数据
+      tableGroups: [], // 表格分组数据
+      colShowFilter: '', // 表头-下拉-箭头
+      spanArr: [], // 表格分组数据缓存
+      pos: 0, // 表格分组计数
       dataContent: [],
       authBtns: [],
       authBtnCol: [],
       authBtnColName: [],
-      tableArrs: [], //重组table-表头下拉
-      tableOptions: {}, //弹框-下来数据缓存
-      showSummary: false, //是否显示统计
+      tableArrs: [], // 重组table-表头下拉
+      tableOptions: {}, // 弹框-下来数据缓存
+      showSummary: false, // 是否显示统计
       tableDataSortRules: {},
     }
   },
   computed: {
-    //设置表头-下拉-选中数据
+    // 设置表头-下拉-选中数据
     dealedTableData () {
       const filtered = this.tableData.filter(item => {
         let flag = true
@@ -159,7 +149,7 @@ export default {
     fromDataType () {
       return function (type) {
         if (type) {
-          return type.replace(/\([^\)]*\)/g, "");
+          return type.replace(/\([^\)]*\)/g, '')
         }
       }
     },
@@ -171,8 +161,8 @@ export default {
         this.restTable()
         this.load()
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created () {
     if (this.AauthTable && this.AauthTable.length) {
@@ -190,31 +180,36 @@ export default {
     this.$refs['table']?.doLayout()
   },
   methods: {
-    //获取表头数据
+    // 获取表头数据
     async getColumnData () {
       try {
-        const { code, returnData } = await this.getQueryList(SERVICE_ID.sysUserAuthId, [{
-          user_id: getToken('userid'),
-          auth_id: this.AauthId
-        }]);
+        const { code, returnData } = await this.getQueryList(
+          SERVICE_ID.sysUserAuthId,
+          [
+            {
+              user_id: getToken('userid'),
+              auth_id: this.AauthId,
+            },
+          ]
+        )
         if (code == 0) {
           if (returnData && returnData.length) {
             if (!this.istableCol) {
               sessionStorage.setItem('tableColumns', JSON.stringify(returnData))
               this.$store.dispatch('auth/changeAuthMsg', returnData)
             }
-            const msgDatas = returnData.filter((item) => item.needShow);
-            const msgCounts = msgDatas.filter((item) => item.needCount);
+            const msgDatas = returnData.filter(item => item.needShow)
+            const msgCounts = msgDatas.filter(item => item.needCount)
             if (msgCounts.length) {
               this.showSummary = true
             }
-            const msgDatasShows = formatOrder(msgDatas);
+            const msgDatasShows = formatOrder(msgDatas)
             if (this.istableChild) {
               const datas = _.cloneDeep(msgDatasShows)
-              const cache = {};
-              const indices = [];
+              const cache = {}
+              const indices = []
               const others = []
-              datas.forEach((item) => {
+              datas.forEach(item => {
                 if (!cache[item.groupName] && item.groupName) {
                   cache[item.groupName] = item.groupName
                   indices.push(item)
@@ -233,57 +228,77 @@ export default {
                   }
                 })
               })
-              indices.forEach((item) => {
-                item.children = [_.cloneDeep(item), ...this.formatCaps(item.tabIndex, others)]
+              indices.forEach(item => {
+                item.children = [
+                  _.cloneDeep(item),
+                  ...this.formatCaps(item.tabIndex, others),
+                ]
               })
-              this.tableCols = _.cloneDeep(indices);
+              this.tableCols = _.cloneDeep(indices)
             } else {
-              this.tableCols = _.cloneDeep(msgDatasShows);
+              this.tableCols = _.cloneDeep(msgDatasShows)
             }
-            this.tableColsCopy = _.cloneDeep(this.tableCols);
-            this.initTableCols();
+            this.tableColsCopy = _.cloneDeep(this.tableCols)
+            this.initTableCols()
+            this.setTableCols()
           }
         } else {
-          this.$message.error("获取表头数据失败");
+          this.$message.error('获取表头数据失败')
         }
       } catch (error) {
         console.log(error)
       }
     },
+    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, '')
+        }
+      })
+    },
     formatCaps (order, arr) {
       const datas = []
       for (let i = 0; i < arr.length; i++) {
-        const element = arr[i];
+        const element = arr[i]
         if (element['tabIndex'] == order) {
           datas.push(element)
         }
       }
       return datas
     },
-    //获取表格数据
+    // 获取表格数据
     async getQuery (id, dataContent = this.dataContent, page, pageSize) {
       try {
-        this.loading = true;
-        const { code, returnData } = await this.getQueryListAuth(id, dataContent, page, pageSize);
+        this.loading = true
+        const { code, returnData } = await this.getQueryListAuth(
+          id,
+          dataContent,
+          page,
+          pageSize
+        )
         if (code == 0) {
           if (returnData.length === 0) {
-            this.page--;
-            this.noMore = true;
-            this.loading = false;
+            this.page--
+            this.noMore = true
+            this.loading = false
           }
-          this.tableData.push(...returnData);
+          this.tableData.push(...returnData)
           setTimeout(() => {
-            this.initTableData();
-            this.loading = false;
-          }, 100);
+            this.initTableData()
+            this.loading = false
+          }, 100)
         } else {
-          this.page--;
-          this.loading = false;
-          this.$message.error("获取表格数据失败");
+          this.page--
+          this.loading = false
+          this.$message.error('获取表格数据失败')
         }
       } catch (error) {
-        this.page--;
-        this.loading = false;
+        this.page--
+        this.loading = false
       }
     },
     restTable () {
@@ -295,9 +310,14 @@ export default {
     load () {
       if (this.tableTag && Object.keys(this.tableTag).length) {
         if (this.noMore || this.loading) {
-          return;
+          return
         }
-        this.getQuery(this.AqueryId, this.dataContent, ++this.page, this.pageSize);
+        this.getQuery(
+          this.AqueryId,
+          this.dataContent,
+          ++this.page,
+          this.pageSize
+        )
       }
     },
     setCellClick () {
@@ -315,15 +335,14 @@ export default {
         }
       }
     },
-    //初始化表格
+    // 初始化表格
     initTableData () {
-      this.tableDataCopy = _.cloneDeep(this.tableData);
-      const datas = _.cloneDeep(this.tableColsCopy);
+      this.tableDataCopy = _.cloneDeep(this.tableData)
+      const datas = _.cloneDeep(this.tableColsCopy)
       // const reqUts = [];
-      datas.forEach(async (item) => {
-        this.tableDataFilters[item.columnName] = [];
+      datas.forEach(async item => {
         if (item.needGroup) {
-          this.tableGroups.push(item.columnName);
+          this.tableGroups.push(item.columnName)
         }
         // if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
         //   this.tableArrs.push(item.columnName);
@@ -331,10 +350,10 @@ export default {
         //     this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID);
         //   }
         // }
-      });
-      const dats = this.setTableFilters(this.tableData, this.tableDataFilters);
-      this.tableDataFilters = _.cloneDeep(dats);
-      this.tableGroup(this.tableData);
+      })
+      const dats = this.setTableFilters(this.tableData, this.tableDataFilters)
+      this.tableDataFilters = _.cloneDeep(dats)
+      this.tableGroup(this.tableData)
     },
     setTableFilters (tableData, filters) {
       const tempSets = {}
@@ -343,124 +362,135 @@ export default {
       })
       tableData.forEach(item => {
         Object.keys(tempSets).forEach(key => {
-          (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
+          ; (item[key] ?? '') !== '' && tempSets[key].add(String(item[key]))
         })
       })
       Object.keys(tempSets).forEach(key => {
         filters[key] = _.orderBy(
           [...tempSets[key]].map(value => ({
             text: value,
-            value
+            value,
           })),
           o => o.value
         )
       })
       return filters
     },
-    //分组
+    // 分组
     tableGroup (tableData) {
-      const spanArr = [];
-      let pos = 0;
-      let ifYj = this.tableGroups[0];
+      const spanArr = []
+      let pos = 0
+      let ifYj = this.tableGroups[0]
       for (let i = 0; i < tableData.length; i++) {
         if (i === 0) {
-          spanArr.push(1);
+          spanArr.push(1)
         } else {
           if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
-            spanArr[pos] += 1;
-            spanArr.push(0);
+            spanArr[pos] += 1
+            spanArr.push(0)
           } else {
-            spanArr.push(1);
-            pos = i;
+            spanArr.push(1)
+            pos = i
           }
         }
       }
-      this.spanArr = spanArr;
-      this.pos = pos;
+      this.spanArr = spanArr
+      this.pos = pos
     },
     popoverShowHandler (prop) {
-      this.colShowFilter = prop;
+      this.colShowFilter = prop
     },
     popoverHideHandler () {
-      this.colShowFilter = "";
+      this.colShowFilter = ''
     },
-    //获取弹框-下拉数据
+    // 获取弹框-下拉数据
     async getSelectData (id) {
       // name ? [name] : name === null ? [null]: [],
-      const { code, returnData } = await this.getQueryList(id, {});
+      const { code, returnData } = await this.getQueryList(id, {})
       console.log(returnData)
       if (code == 0) {
-        return returnData;
+        return returnData
       } else {
-        return [];
+        return []
       }
     },
-    //设置表头-下拉-箭头样式
+    // 设置表头-下拉-箭头样式
     arrowClass () {
       return function (prop) {
-        let classString = "";
+        const classes = []
         if (this.colShowFilter === prop) {
-          return "arrow-active";
+          classes.push('arrow-active')
         }
         if (
           Object.entries(this.tableDataFilters).find(
             ([key, arr]) => this.filterValues[prop]
           )
         ) {
-          classString += "arrow-blue";
+          classes.push('arrow-blue')
         }
-        return classString;
-      };
+        return classes.join(' ')
+      }
     },
-    //合计
+    // 合计
     getSummaries (param) {
-      const { columns, data } = param;
-      const sums = [];
+      const { columns, data } = param
+      const sums = []
       columns.forEach((column, index) => {
         if (index === 0) {
           sums[index] = '合计：' + this.tableData.length
         }
-        this.tableColsCopy.forEach((p) => {
+        this.tableColsCopy.forEach(p => {
           if (column.property == p.columnName && p.needCount) {
-            const values = data.map((item) => Number(item[column.property]));
-            if (!values.every((value) => isNaN(value))) {
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {
-                const value = Number(curr);
+                const value = Number(curr)
                 if (!isNaN(value)) {
-                  return prev + curr;
+                  return prev + curr
                 } else {
-                  return prev;
+                  return prev
                 }
-              }, 0);
-              sums[index] += "";
+              }, 0)
+              sums[index] += ''
             }
           }
-        });
-      });
-      return sums;
+        })
+      })
+      return sums
     },
-    //分组
+    // 分组
     tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
-      if (this.tableGroups.includes(column["property"])) {
-        const _row = this.spanArr[rowIndex];
-        const _col = _row > 0 ? 1 : 0;
+      if (this.tableGroups.includes(column['property'])) {
+        const _row = this.spanArr[rowIndex]
+        const _col = _row > 0 ? 1 : 0
         return {
           rowspan: _row,
           colspan: _col,
-        };
+        }
+      }
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
       }
+      return classes.join(' ')
     },
-    //表格-设置单元格样式
+    // 表格-设置单元格样式
     cellClass ({ row, column, rowIndex, columnIndex }) {
       if (this.authBtnColName.includes(column.property)) {
         return 'is-click-btn'
       }
     },
-    //表格-单元格点击
+    // 表格-单元格点击
     cellClick (row, column) {
       const dataBtns = this.authBtnCol
       if (dataBtns && dataBtns.length) {
-        const clickBtn = dataBtns.filter(item => item.relation_data == column.property)[0]
+        const clickBtn = dataBtns.filter(
+          item => item.relation_data == column.property
+        )[0]
         if (clickBtn) {
           const { open_method, route_info, pass_parameters } = clickBtn
           if (open_method == 2) {
@@ -472,14 +502,14 @@ export default {
               })
               this.$router.push({
                 path: route_info,
-                query: obj
+                query: obj,
               })
             }
           }
         }
       }
     },
-    //导出
+    // 导出
     exportHandler () {
       const table = this.$refs['table'].$el.cloneNode(true)
       // const { luggageNum, flightNo, flightDate } = this.query
@@ -487,13 +517,15 @@ export default {
       throttledExportToExcel(table, '高级查询', fileName)
     },
     formatter (row, column, cellValue, index) {
-      const sameColumn = this.tableCols.find(col => col.columnName === column.property)
+      const sameColumn = this.tableCols.find(
+        col => col.columnName === column.property
+      )
       if (sameColumn && this.fromDataType(sameColumn.dataType) === 'datetime') {
         return (cellValue ?? '').replace('T', ' ')
       }
       return cellValue
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -513,9 +545,7 @@ export default {
       color: #000;
       text-align: center;
       white-space: nowrap;
-      display: flex;
-      justify-content: center;
-      // display: flex;
+      padding: 0;
       .el-tooltip {
         white-space: nowrap;
         text-overflow: ellipsis;