高级查询2

public/config.js

@@ -13,7 +13,8 @@ window.DATACONTENT_ID = {
 
   /***-----高级查询------***/
   baggageTypeId: 86, //高级查询-特殊行李类型下拉选项查询-id
-  advacedQueryId: 30, //高级查询-数据查询-id
+  advancedQueryId: 30, //高级查询-数据查询-id
+  advancedQueryNew: 99999, //高级查询-数据查询-id
 
   /***-----账号管理------***/
   accountTableId: 78, //账号管理-首页-列表

src/components/SimpleTable/index.vue

@@ -11,15 +11,16 @@
       v-el-table-infinite-scroll="load"
       :data="dealedTableData"
       :header-cell-class-name="headerCellClass"
+      :row-class-name="rowClass"
+      :cell-class-name="cellClass"
       :span-method="tableSpanMethod"
-      :tree-props="treeProps"
-      :row-key="rowKeyTree"
       :show-summary="showSummary"
-      :summary-method="getSummaries"
+      :summary-method="summaryMethod"
       height="100%"
       stripe
       fit
       border
+      @cell-click="cellClickHandler"
     >
       <el-table-column
         v-for="col in filteredTableCols"
@@ -28,6 +29,7 @@
         :label="col.columnLabel"
         :width="col.width"
         :show-overflow-tooltip="showOverflowTooltip"
+        :formatter="formatter"
       >
         <template #header>
           <el-tooltip
@@ -52,55 +54,109 @@
 <script>
 import TableHeaderCell from '../TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
-import { Query } from '@/api/dataIntegration'
 
 export default {
   name: 'SimpleTable',
   components: { TableHeaderCell },
   props: {
-    queryId: {
-      type: [String, Number],
-      required: true
-    },
-    queryString: {
-      type: String,
-      default: ''
-    },
-    // 是否显示树形表格
-    isTree: {
+    loading: {
       type: Boolean,
       default: false
     },
-    // 树形props
-    treeProps: {
-      type: Object,
+    tableCols: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    headerCellClass: {
+      type: Function,
+      default: function ({ row, column, rowIndex, columnIndex }) {
+        const classes = []
+        const rule = this.tableDataSortRules[column.property]
+        if (rule) {
+          classes.push(rule)
+        }
+        return classes.join(' ')
+      }
+    },
+    rowClass: {
+      type: Function,
       default: function () {
-        return { children: 'children', hasChildren: 'hasChildren' }
+        return ''
       }
     },
-    // 树形标识id
-    rowKeyTree: {
-      type: String,
-      default: 'companyID'
+    cellClass: {
+      type: Function,
+      default: function () {
+        return ''
+      }
+    },
+    tableSpanMethod: {
+      type: Function,
+      default: function ({ row, column, rowIndex, columnIndex }) {
+        if (this.tableGroups.includes(column.property)) {
+          const _row = this.spanArr[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      }
     },
     // 是否显示合计行
     showSummary: {
       type: Boolean,
       default: false
     },
+    summaryMethod: {
+      type: Function,
+      default: function (param) {
+        const { columns, data } = param
+        const sums = []
+        columns.forEach((column, index) => {
+          this.tableCols.forEach(p => {
+            if (column.property === p.columnName && p.needCount) {
+              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)
+                  if (!isNaN(value)) {
+                    return prev + curr
+                  } else {
+                    return prev
+                  }
+                }, 0)
+                sums[index] += ''
+              }
+            }
+          })
+        })
+        return sums
+      }
+    },
     // 不换行，溢出隐藏
     showOverflowTooltip: {
       type: Boolean,
       default: false
+    },
+    formmater: {
+      type: Function,
+      default: function (cellValue) {
+        return cellValue
+      }
+    },
+    cellClickHandler: {
+      type: Function,
+      default: function () {}
     }
   },
   data() {
     return {
-      loading: false,
-      page: 0,
-      noMore: false,
-      tableCols: [], // 表头数据
-      tableData: [], // 表格数据
+      tableData: [],
       tableDataFilters: {}, // 表头-下拉数据
       filterValues: {}, // 表头-下拉-选中数据
       tableDataSortRules: {}, // 表头-排序
@@ -137,12 +193,23 @@ export default {
     }
   },
   watch: {
-    queryString: {
+    data: {
+      handler(arr) {
+        this.tableData = arr
+      },
+      deep: true
+    },
+    tableData: {
       handler() {
-        this.resetTable()
-        this.queryTableData()
+        this.setTableFilters()
       },
-      immediate: true
+      deep: true
+    },
+    tableCols: {
+      handler() {
+        this.setTableFilters()
+      },
+      deep: true
     },
     dealedTableData: {
       handler(arr) {
@@ -171,19 +238,9 @@ export default {
   },
   methods: {
     load() {
-      if (!this.isTree) {
-        if (this.noMore || this.loading) {
-          return
-        }
-        this.queryTableData()
-      }
+      this.$emit('load')
     },
-    resetTable() {
-      this.page = 0
-      this.noMore = false
-      this.tableData = []
-    },
-    initTableData() {
+    setTableFilters() {
       this.tableDataFilters = {}
       this.filteredTableCols.forEach(col => {
         this.tableDataFilters[col.columnName] = []
@@ -192,79 +249,6 @@ export default {
         }
       })
       setTableFilters(this.tableData, this.tableDataFilters)
-    },
-    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
-      const classes = []
-      const rule = this.tableDataSortRules[column.property]
-      if (rule) {
-        classes.push(rule)
-      }
-      return classes.join(' ')
-    },
-    // 分组
-    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (this.tableGroups.includes(column.property)) {
-        const _row = this.spanArr[rowIndex]
-        const _col = _row > 0 ? 1 : 0
-        return {
-          rowspan: _row,
-          colspan: _col
-        }
-      }
-    },
-    // 合计
-    getSummaries(param) {
-      const { columns, data } = param
-      const sums = []
-      columns.forEach((column, index) => {
-        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))) {
-              sums[index] = values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!isNaN(value)) {
-                  return prev + curr
-                } else {
-                  return prev
-                }
-              }, 0)
-              sums[index] += ''
-            }
-          }
-        })
-      })
-      return sums
-    },
-    async queryTableData() {
-      this.loading = true
-      try {
-        const {
-          code,
-          returnData: { columnSet, listValues }
-        } = await Query({
-          id: this.queryId,
-          needPage: ++this.page,
-          dataContent: this.queryString ? { whereString: this.queryString } : []
-        })
-        if (Number(code) === 0) {
-          if (listValues.length === 0) {
-            this.page--
-            this.noMore = true
-          }
-          this.tableCols = columnSet
-          this.$emit('get-column-set', columnSet)
-          this.tableData.push(...listValues)
-          this.initTableData()
-        } else {
-          this.page--
-          this.$message.error('获取表格数据失败')
-        }
-      } catch (error) {
-        console.log('出错了', error.message || error)
-      }
-      this.loading = false
     }
   }
 }
@@ -283,6 +267,13 @@ export default {
       font-family: Helvetica, 'Microsoft YaHei';
       letter-spacing: 0;
     }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
     .el-table__header-wrapper {
       .cell {
         font-weight: bold;

src/router/routes/routes-file-five.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zk
  * @Date: 2022-01-17 10:40:48
- * @LastEditTime: 2022-05-18 09:38:55
+ * @LastEditTime: 2022-09-13 16:35:22
  * @LastEditors: your name
  * @Description: 离港路由
  */
@@ -259,6 +259,12 @@ const advanceRoutes = {
               component: () => import('@/views/advancedQuery/views/advancedHome.vue'),
               meta: { keepAlive: true }
             },
+            {
+              path: 'advanceNew',
+              name: 'AdvancedNew',
+              component: () => import('@/views/advancedQuery/views/advancedNew.vue'),
+              meta: { keepAlive: true }
+            },
             {
               path: 'flightView',
               name: 'AdvancedFlight',
@@ -276,7 +282,7 @@ const advanceRoutes = {
               name: 'AdvancedContainer',
               component: () => import('@/views/advancedQuery/views/advancedContainer.vue'),
               meta: { title: '容器视图', keepAlive: true }
-            },
+            }
           ]
         }
       ]

src/views/advancedQuery/views/advancedHome.vue

@@ -50,6 +50,10 @@
             class="btnAn"
             @click="dialogShow"
           >高级查询</button>
+          <button
+            class="btnAn"
+            @click="toNewAdvance"
+          >切换</button>
           <!-- <div
             class="setting"
             @click="show"
@@ -794,6 +798,9 @@ export default {
         this.dialogFocus()
       })
     },
+    toNewAdvance() {
+      this.$router.push('/advance/advanceNew')
+    },
     dialogFocus() {
       this.$refs['dialog'].focus()
     },
@@ -1122,7 +1129,7 @@ export default {
           code,
           returnData: { listValues: result, needPage }
         } = await Query({
-          id: DATACONTENT_ID.advacedQueryId,
+          id: DATACONTENT_ID.advancedQueryId,
           needPage: ++this.page,
           dataContent
         })
@@ -1210,6 +1217,9 @@ export default {
     line-height: 32px;
     margin-top: 8px;
     margin-bottom: 16px;
+    .btnAn:not(:last-child) {
+      margin-right: 12px;
+    }
     .setting {
       height: 32px;
       width: 32px;

src/views/advancedQuery/views/advancedNew.vue

@@ -0,0 +1,855 @@
+<template>
+  <div class="advance">
+    <div class="advance__head flex">
+      <div class="flex-wrap interfaceLog_head_time">
+        <div class="manageTitle">高级查询</div>
+        <el-date-picker
+          v-model="flightDate"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="dateRangePickerOptions"
+          :clearable="false"
+        />
+      </div>
+      <Search
+        ref="search"
+        class="advanced-search"
+        :is-title="false"
+        :is-slot="true"
+        :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'"
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+      >
+        <div class="flex-wrap">
+          <button
+            class="btnAn"
+            @click="dialogShow"
+          >高级查询</button>
+          <button
+            class="btnAn"
+            @click="toOldAdvance"
+          >切换</button>
+          <!-- <div
+            class="setting"
+            @click="show"
+          /> -->
+        </div>
+      </Search>
+    </div>
+    <!--表格-->
+    <div class="advance__table">
+      <SimpleTable
+        :loading="loading"
+        :table-cols="tableCols"
+        :data="tableData"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="rowClass"
+        :cell-class-name="cellClass"
+        :formatter="tableFormatter"
+        show-summary
+        @load="load"
+      />
+    </div>
+    <!--高级查询-->
+    <Dialog
+      :flag="dialogFlag"
+      width="852px"
+    >
+      <div
+        id="dialogSearch"
+        ref="dialog"
+        :tabindex="0"
+        @keyup.self.esc="dialogHide"
+      >
+        <div class="title">
+          <span>高级查询</span>
+          <i
+            class="el-icon-close"
+            @click="dialogHide"
+          />
+        </div>
+        <div class="content">
+          <div class="btns">
+            <el-button
+              type="primary"
+              size="small"
+              plain
+              @click="addParamsHandler"
+            >新增</el-button>
+            <el-button
+              type="primary"
+              size="small"
+              @click="advancedQueryHandler"
+            >查询</el-button>
+          </div>
+          <el-form
+            ref="paramsForm"
+            class="query-params"
+            :model="paramsForm"
+            :rules="paramsForm.validateRules"
+            :inline="true"
+          >
+            <el-table
+              :data="paramsForm.params"
+              height="370"
+              border
+              stripe
+            >
+              <el-table-column
+                type="index"
+                label="行号"
+                :index="index => index + 1"
+                align="center"
+                width="60"
+              />
+              <el-table-column
+                v-for="(col, index) in paramsTableCols"
+                :key="index"
+                :label="col.label"
+                :align="col.align || 'center'"
+              >
+                <template slot-scope="scope">
+                  <el-form-item :prop="'params.' + scope.$index + '.' + col.prop">
+                    <template v-if="col.prop === 'comparisonOperators' && col.inputType === 'select' || col.inputType[scope.$index] === 'select'">
+                      <el-select
+                        v-model="scope.row[col.prop]"
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="(option, index) in col.options[scope.$index]"
+                          :key="index"
+                          :value="option.value"
+                          :label="option.label"
+                        />
+                      </el-select>
+                    </template>
+                    <template v-else-if="col.inputType === 'select'">
+                      <el-select
+                        v-model="scope.row[col.prop]"
+                        placeholder="请选择"
+                        @change="value => { selectChangeHandler(value, scope.$index, index) }"
+                      >
+                        <el-option
+                          v-for="(option, index) in col.options"
+                          :key="index"
+                          :value="option.value"
+                          :label="option.label"
+                        />
+                      </el-select>
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'text'">
+                      <el-input
+                        v-model="scope.row[col.prop]"
+                        placeholder="请输入"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'number'">
+                      <el-input
+                        v-model="scope.row[col.prop]"
+                        placeholder="请输入"
+                        @keydown.native="inputHold(scope.row[col.prop])"
+                        @input="inputLimit(scope.row[col.prop], scope.$index)"
+                        @blur="inputFix(scope.row[col.prop], scope.$index)"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'date'">
+                      <el-date-picker
+                        v-model="scope.row[col.prop]"
+                        type="date"
+                        format="yyyy-MM-dd"
+                        value-format="yyyy-MM-dd"
+                        placeholder="请选择"
+                      />
+                    </template>
+                    <template v-else-if="col.inputType[scope.$index] === 'datetime'">
+                      <el-date-picker
+                        v-model="scope.row[col.prop]"
+                        type="datetime"
+                        format="yyyy-MM-dd HH:mm:ss"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        placeholder="请选择"
+                      />
+                    </template>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                width="80"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-popconfirm
+                    title="是否要删除这一行？"
+                    @confirm="deleteParam(scope.$index)"
+                  >
+                    <span
+                      slot="reference"
+                      class="clickable-delete"
+                    >删除</span>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/SearchWithTooltip'
+import SimpleTable from '@/components/SimpleTable'
+import Dialog from '@/layout/components/Dialog'
+import { mapGetters } from 'vuex'
+import { parseTime } from '@/utils/index'
+import { Query } from '@/api/dataIntegration'
+
+const comparisonOperatorOptions = [
+  {
+    label: '小于等于',
+    value: '<='
+  },
+  {
+    label: '大于等于',
+    value: '>='
+  },
+  {
+    label: '小于',
+    value: '<'
+  },
+  {
+    label: '大于',
+    value: '>'
+  },
+  {
+    label: '等于',
+    value: '='
+  },
+  {
+    label: '不等于',
+    value: '!='
+  },
+  {
+    label: '为空',
+    value: 'is Null'
+  },
+  {
+    label: '不为空',
+    value: 'is not Null'
+  },
+  {
+    label: '包含',
+    value: 'like'
+  }
+]
+
+export default {
+  name: 'AdvancedNew',
+  components: { Search, SimpleTable, Dialog },
+  data() {
+    return {
+      queryString: '',
+      flightDate: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
+      dateRangePickerOptions: {
+        onPick: this.dateRangePickHandler,
+        disabledDate: this.dateRangeDisabled
+      },
+      loading: false,
+      page: 0,
+      noMore: false,
+      tableCols: [],
+      tableData: [],
+      dialogFlag: false,
+      paramsForm: {
+        params: [
+          {
+            leftBrackets: '',
+            paramKey: '',
+            comparisonOperators: '',
+            paramValue: '',
+            rightBrackets: '',
+            connector: ''
+          }
+        ],
+        validateRules: {}
+      },
+      checkValue: '',
+      paramsTableCols: [
+        {
+          prop: 'leftBrackets',
+          label: '左括号',
+          inputType: 'select',
+          options: [
+            {
+              label: '(',
+              value: '('
+            },
+            {
+              label: '((',
+              value: '(('
+            },
+            {
+              label: '(((',
+              value: '((('
+            }
+          ]
+        },
+        {
+          prop: 'paramKey',
+          label: '项',
+          inputType: 'select',
+          options: []
+        },
+        {
+          prop: 'comparisonOperators',
+          label: '比较符',
+          inputType: 'select',
+          options: []
+        },
+        {
+          prop: 'paramValue',
+          label: '值',
+          inputType: ['text'],
+          options: []
+        },
+        {
+          prop: 'rightBrackets',
+          label: '右括号',
+          inputType: 'select',
+          options: [
+            {
+              label: ')',
+              value: ')'
+            },
+            {
+              label: '))',
+              value: '))'
+            },
+            {
+              label: ')))',
+              value: ')))'
+            }
+          ]
+        },
+        {
+          prop: 'connector',
+          label: '连接',
+          inputType: 'select',
+          options: [
+            {
+              label: '并且',
+              value: 'and'
+            },
+            {
+              label: '或者',
+              value: 'or'
+            }
+          ]
+        }
+      ],
+      columnSet: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['clickedCells'])
+  },
+  watch: {
+    flightDate: {
+      handler(val) {
+        if (val === null) {
+          this.flightDate = ['', '']
+        }
+      },
+      deep: true
+    },
+    queryString: {
+      handler() {
+        this.resetTable()
+        this.queryTableData()
+      }
+    },
+    tableCols: {
+      handler(arr) {
+        this.getColumnSet(arr)
+      },
+      deep: true
+    }
+  },
+  deactivated() {
+    this.loading = false
+  },
+  beforeDestroy() {
+    this.loading = false
+  },
+  methods: {
+    dateRangePickHandler({ maxDate, minDate }) {
+      if (!maxDate) {
+        this.pickedDate = minDate
+      } else {
+        this.pickedDate = null
+      }
+    },
+    dateRangeDisabled(date) {
+      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
+    },
+    toOldAdvance() {
+      this.$router.push('/advance')
+    },
+    dialogShow() {
+      this.dialogFlag = true
+      this.$nextTick(() => {
+        this.dialogFocus()
+      })
+    },
+    dialogFocus() {
+      this.$refs['dialog'].focus()
+    },
+    dialogHide() {
+      this.dialogFlag = false
+    },
+    addParamsHandler() {
+      this.paramsTableCols[3].inputType.push('text')
+      this.paramsForm.params.push({
+        leftBrackets: '',
+        paramKey: '',
+        comparisonOperators: '',
+        paramValue: '',
+        rightBrackets: '',
+        connector: ''
+      })
+    },
+    selectChangeHandler(value, rowIndex, colIndex) {
+      if (colIndex === 1) {
+        const { dataType, options } = this.columnSet[value]
+        if (dataType === 'date') {
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'date'
+        } else if (dataType === 'datetime') {
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'datetime'
+        } else if (options) {
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4, 5)
+          this.paramsTableCols[3].inputType[rowIndex] = 'select'
+          this.paramsTableCols[3].options[rowIndex] = options
+        } else if (dataType !== 'number') {
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'number'
+        } else {
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
+          this.paramsTableCols[3].inputType[rowIndex] = 'text'
+        }
+
+        this.paramsForm.params[rowIndex].comparisonOperators = this.paramsTableCols[2].options[rowIndex][0].value
+      }
+    },
+    inputHold(value) {
+      this.checkValue = value
+    },
+    inputLimit(value, rowIndex) {
+      if (!/^[\-|\+]?((([1-9][0-9]*)|0)(\.[0-9]{0,2})?)?$/.test(value)) {
+        this.paramsForm.params[rowIndex].paramValue = this.checkValue
+      }
+    },
+    inputFix(value, rowIndex) {
+      if (value?.at(-1) === '.') {
+        this.paramsForm.params[rowIndex].paramValue = value.slice(0, -1)
+      }
+    },
+    advancedQueryHandler() {
+      let bracketsDifference = 0
+      try {
+        const paramsRowNum = this.paramsForm.params.length
+        const queryString = this.paramsForm.params.reduce(
+          (preString, { leftBrackets, paramKey, comparisonOperators, paramValue, rightBrackets, connector }, index) => {
+            bracketsDifference += leftBrackets.length - rightBrackets.length
+            if (bracketsDifference < 0) {
+              throw new Error('左右括号不匹配！')
+            }
+            return (
+              preString +
+              leftBrackets +
+              paramKey +
+              ` ${comparisonOperators} ` +
+              (comparisonOperators === 'like' ? `%${paramValue}%` : paramValue) +
+              rightBrackets +
+              (index < paramsRowNum - 1 ? connector : '')
+            )
+          },
+          ''
+        )
+        if (bracketsDifference !== 0) {
+          throw new Error('左右括号不匹配！')
+        }
+        this.queryString = queryString
+        this.dialogHide()
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    deleteParam(index) {
+      this.paramsTableCols[3].inputType.splice(index, 1)
+      this.paramsForm.params.splice(index, 1)
+    },
+    clearForm() {
+      this.paramsTableCols[2].options = []
+      this.paramsTableCols[3].inputType = ['text']
+      this.paramsTableCols[3].options = []
+      this.$refs['paramsForm'].resetFields()
+    },
+    getColumnSet(columnSet) {
+      this.columnSet = {}
+      this.paramsTableCols[1].options = []
+      columnSet.forEach(async column => {
+        if (!this.columnSet[column.columnName]) {
+          this.columnSet[column.columnName] = column
+          if (column.listqueryTemplateID && !this.columnSet[column.columnName.options]) {
+            const options = await this.getSelectData(column.listqueryTemplateID)
+            this.columnSet[column.columnName].options = options.map(option => ({
+              label: option.k,
+              value: option.v
+            }))
+          }
+          this.paramsTableCols[1].options.push({
+            label: column.columnLabel,
+            value: column.columnName
+          })
+        }
+      })
+    },
+    load() {
+      if (this.noMore || this.loading) {
+        return
+      }
+      this.queryTableData()
+    },
+    resetTable() {
+      this.page = 0
+      this.noMore = false
+      this.tableData = []
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    rowClass({ row, rowIndex }) {
+      const classes = []
+      if (row.deleted === 'DEL') {
+        classes.push('bgl-deleted')
+      }
+      return classes.join(' ')
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        ['flightNO', 'bagSN', 'U_Device_ID', 'preFlightNO', 'transferFlightNO'].includes(column.property) &&
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === 'advance' &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        ['flightNO', 'bagSN', 'U_Device_ID', 'preFlightNO', 'transferFlightNO'].includes(column.property) &&
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: 'advance'
+        })
+        switch (column.property) {
+          case 'flightNO':
+            this.$router.push({
+              path: '/advance/flightView',
+              query: {
+                flightNO: row.flightNO,
+                flightDate: row.flightDate
+              }
+            })
+            break
+          case 'bagSN':
+            this.$router.push({
+              path: '/advance/baggageView',
+              query: {
+                flightNO: row.flightNO,
+                flightDate: row.flightDate,
+                bagSN: row.bagSN
+              }
+            })
+            break
+          case 'U_Device_ID':
+            this.$router.push({
+              path: '/advance/containerView',
+              query: {
+                containerID: row.U_Device_ID
+              }
+            })
+            break
+          case 'transferFlightNO':
+            this.$router.push({
+              path: '/advance/flightView',
+              query: {
+                flightNO: row.transferFlightNO,
+                flightDate: row.transferFlightDate
+              }
+            })
+            break
+          case 'preFlightNO':
+            this.$router.push({
+              path: '/advance/flightView',
+              query: {
+                flightNO: row.preFlightNO,
+                flightDate: row.preFlightDate
+              }
+            })
+            break
+          default:
+            break
+        }
+      }
+    },
+    tableFormatter(row, column, cellValue) {
+      switch (column.property) {
+        case 'departureTime':
+          return (cellValue ?? '').replace('T', ' ')
+        case 'deleted':
+          return cellValue === 'DEL' ? cellValue : ''
+        case 'activated':
+          return cellValue === 1 ? '激活' : '未激活'
+        default:
+          return cellValue ?? ''
+      }
+    },
+    // 清除查询
+    clearSearchData() {
+      this.clearForm()
+      this.resetTable()
+    },
+    // 统计行数
+    summaryRow(num) {
+      return function () {
+        return ['合计', `共${num}件`]
+      }
+    },
+    getSearchData(val) {
+      this.$message.info('开发中')
+      // this.clearForm()
+      // if (!val) {
+      //   this.$message.error('请先输入完整查询信息')
+      //   return
+      // }
+      // const az = /^[a-zA-Z]+$/
+      // const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
+      // const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
+      // const num = /^[0-9]+$/
+      // const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
+      // // 纯字母则为旅客姓名
+      // if (az.test(val)) {
+      //   console.log(1)
+      // } else if (azNum.test(val) && top2.test(val)) {
+      //   // 字母加数字且前两位为字母则为航班号
+      //   console.log(2)
+      // } else if ((num.test(val) && val.length === 10) || bagNo.test(val)) {
+      //   // 纯数字且位数等于10则为行李牌号
+      //   console.log(3)
+      // } else {
+      //   this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
+      // }
+    },
+    // 获取下拉数据
+    async getSelectData(id) {
+      try {
+        const { code, returnData } = await Query({
+          id,
+          dataContent: []
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues
+        } else {
+          return []
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async queryTableData() {
+      this.loading = true
+      try {
+        const {
+          code,
+          returnData: { columnSet, listValues }
+        } = await Query({
+          id: DATACONTENT_ID.advancedQueryNew,
+          needPage: ++this.page,
+          dataContent: { whereString: this.queryString }
+        })
+        if (Number(code) === 0) {
+          if (listValues.length === 0) {
+            this.page--
+            this.noMore = true
+          }
+          this.tableCols = columnSet
+          this.tableData.push(...listValues)
+        } else {
+          this.page--
+          this.$message.error('获取表格数据失败')
+        }
+      } catch (error) {
+        console.log('出错了', error.message || error)
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.advance {
+  padding: 8px;
+  &__head {
+    line-height: 32px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+    .btnAn:not(:last-child) {
+      margin-right: 12px;
+    }
+    .setting {
+      height: 32px;
+      width: 32px;
+      cursor: pointer;
+      background-size: 100% 100%;
+      background: url('../../../assets/baggage/ic_setting.png') no-repeat;
+      margin-left: 12px;
+      position: relative;
+      top: 2px;
+    }
+    ::v-deep .interfaceLog_head_time {
+      .el-input__prefix {
+        left: 10px;
+        color: #101116;
+      }
+      .el-input--prefix .el-input__inner {
+        padding-left: 50px;
+      }
+    }
+  }
+}
+.advance__table {
+  width: 100%;
+  height: calc(100vh - 158px);
+  ::v-deep .el-table {
+    .el-table__body-wrapper {
+      tr.bgl-deleted {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+          font-style: italic;
+        }
+      }
+    }
+  }
+}
+#dialogSearch {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    .el-icon-close {
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    margin: 0 0 20px;
+    padding: 0 24px;
+    .btns {
+      display: flex;
+      justify-content: flex-end;
+      padding: 20px 0;
+      .el-button {
+        width: 72px;
+        &:not(:first-child) {
+          margin-left: 16px;
+        }
+      }
+    }
+    ::v-deep .query-params {
+      padding: 0;
+      .el-table {
+        width: 100%;
+        .el-table__header {
+          .el-table__cell {
+            padding: 0;
+            .cell {
+              height: 40px;
+              line-height: 40px;
+              font-family: Helvetica, 'Microsoft YaHei';
+              font-weight: bold;
+              color: #303133;
+            }
+          }
+        }
+        .el-table__body {
+          .el-table__cell {
+            padding: 0;
+            .cell {
+              padding: 0;
+              .el-form-item {
+                margin: 0;
+                height: 40px;
+                .el-input__inner {
+                  background: transparent;
+                  border: none;
+                  color: #101116;
+                  font-family: Helvetica, 'Microsoft YaHei';
+                  &:hover {
+                    background-color: #ffffff;
+                  }
+                }
+                .el-select {
+                  .el-icon-arrow-up::before {
+                    content: '\e78f';
+                    color: #101116;
+                  }
+                  .el-icon-arrow-down::before {
+                    content: '\e790';
+                    color: #101116;
+                  }
+                }
+              }
+              .clickable-delete {
+                font-family: Microsoft YaHei;
+                color: #ed3c3c;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/statisticsCharts/components/commonPieStatisticsCharts.vue

@@ -45,6 +45,10 @@ export default {
     customFormItems: {
       type: Array,
       default: () => []
+    },
+    pieTitle: {
+      type: String,
+      default: '总件数'
     }
   },
   data() {
@@ -59,7 +63,7 @@ export default {
           trigger: 'item'
         },
         title: {
-          text: '总件数',
+          text: '',
           // 副标题
           subtext: '0',
           // 主副标题间距
@@ -207,6 +211,12 @@ export default {
     ...mapGetters(['sidebar'])
   },
   watch: {
+    pieTitle: {
+      handler(val) {
+        this.options.title.text = val
+      },
+      immediate: true
+    },
     // 监听数据变化 重绘图形
     options: {
       handler(obj) {

src/views/statisticsCharts/views/flightClassification/flightClassificationStatisticsCharts.vue

@@ -3,6 +3,7 @@
     charts-title="航班量"
     :query-settings="querySettings"
     :categories="categories"
+    pie-title="航班数"
   />
 </template>
 

src/views/statisticsCharts/views/flightClassification/passengerClassificationStatisticsCharts.vue

@@ -1,8 +1,9 @@
 <template>
   <CommonPieStatisticsCharts
-    charts-title="航班量"
+    charts-title="行李旅客量"
     :query-settings="querySettings"
     :categories="categories"
+    pie-title="旅客数"
   />
 </template>
 

src/views/statisticsCharts/views/special/compensationClassificationStatisticsCharts.vue

@@ -4,6 +4,7 @@
     :query-settings="querySettings"
     :custom-form-items="customFormItems"
     :categories="categories"
+    pie-title="总金额"
   />
 </template>
 

src/views/systemSettings/views/queryTemplate/queryTemplatePreview.vue

@@ -10,10 +10,11 @@
     </div>
     <div class="template-content">
       <SimpleTable
-        :query-id="queryTemplateID"
-        :query-string="queryString"
+        :loading="loading"
+        :table-cols="tableCols"
+        :data="tableData"
         show-overflow-tooltip
-        @get-column-set="getColumnSet"
+        @load="load"
       />
     </div>
     <Dialog
@@ -68,7 +69,7 @@
                 width="60"
               />
               <el-table-column
-                v-for="(col, index) in tableCols"
+                v-for="(col, index) in paramsTableCols"
                 :key="index"
                 :label="col.label"
                 :align="col.align || 'center'"
@@ -146,7 +147,7 @@
                 <template slot-scope="scope">
                   <el-popconfirm
                     title="是否要删除这一行？"
-                    @confirm="deleteRow(scope.$index)"
+                    @confirm="deleteParam(scope.$index)"
                   >
                     <span
                       slot="reference"
@@ -218,6 +219,11 @@ export default {
       queryTemplateID: null,
       queryTemplateName: '查询模板预览',
       queryString: '',
+      loading: false,
+      page: 0,
+      noMore: false,
+      tableCols: [],
+      tableData: [],
       dialogFlag: false,
       paramsForm: {
         params: [
@@ -233,7 +239,7 @@ export default {
         validateRules: {}
       },
       checkValue: '',
-      tableCols: [
+      paramsTableCols: [
         {
           prop: 'leftBrackets',
           label: '左括号',
@@ -309,6 +315,20 @@ export default {
       columnSet: {}
     }
   },
+  watch: {
+    queryString: {
+      handler() {
+        this.resetTable()
+        this.queryTableData()
+      }
+    },
+    tableCols: {
+      handler(arr) {
+        this.getColumnSet(arr)
+      },
+      deep: true
+    }
+  },
   created() {
     const { queryTemplateID, queryTemplateName } = this.$route.query
     if ((queryTemplateID ?? '') !== '') {
@@ -334,7 +354,7 @@ export default {
       this.dialogFlag = false
     },
     addParamsHandler() {
-      this.tableCols[3].inputType.push('text')
+      this.paramsTableCols[3].inputType.push('text')
       this.paramsForm.params.push({
         leftBrackets: '',
         paramKey: '',
@@ -344,29 +364,28 @@ export default {
         connector: ''
       })
     },
-
     selectChangeHandler(value, rowIndex, colIndex) {
       if (colIndex === 1) {
         const { dataType, options } = this.columnSet[value]
         if (dataType === 'date') {
-          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.tableCols[3].inputType[rowIndex] = 'date'
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'date'
         } else if (dataType === 'datetime') {
-          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.tableCols[3].inputType[rowIndex] = 'datetime'
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'datetime'
         } else if (options) {
-          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4, 5)
-          this.tableCols[3].inputType[rowIndex] = 'select'
-          this.tableCols[3].options[rowIndex] = options
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4, 5)
+          this.paramsTableCols[3].inputType[rowIndex] = 'select'
+          this.paramsTableCols[3].options[rowIndex] = options
         } else if (dataType !== 'number') {
-          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
-          this.tableCols[3].inputType[rowIndex] = 'number'
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(0, 5).reverse()
+          this.paramsTableCols[3].inputType[rowIndex] = 'number'
         } else {
-          this.tableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
-          this.tableCols[3].inputType[rowIndex] = 'text'
+          this.paramsTableCols[2].options[rowIndex] = comparisonOperatorOptions.slice(4)
+          this.paramsTableCols[3].inputType[rowIndex] = 'text'
         }
 
-        this.paramsForm.params[rowIndex].comparisonOperators = this.tableCols[2].options[rowIndex][0].value
+        this.paramsForm.params[rowIndex].comparisonOperators = this.paramsTableCols[2].options[rowIndex][0].value
       }
     },
     inputHold(value) {
@@ -407,16 +426,20 @@ export default {
         if (bracketsDifference !== 0) {
           throw new Error('左右括号不匹配！')
         }
-        console.log(queryString)
-        // this.queryString = queryString
+        // console.log(queryString)
+        this.queryString = queryString
         this.dialogHide()
       } catch (error) {
         this.$message.error(error.message)
       }
     },
+    deleteParam(index) {
+      this.paramsTableCols[3].inputType.splice(index, 1)
+      this.paramsForm.params.splice(index, 1)
+    },
     getColumnSet(columnSet) {
       this.columnSet = {}
-      this.tableCols[1].options = []
+      this.paramsTableCols[1].options = []
       columnSet.forEach(async column => {
         if (!this.columnSet[column.columnName]) {
           this.columnSet[column.columnName] = column
@@ -427,16 +450,23 @@ export default {
               value: option.v
             }))
           }
-          this.tableCols[1].options.push({
+          this.paramsTableCols[1].options.push({
             label: column.columnLabel,
             value: column.columnName
           })
         }
       })
     },
-    deleteRow(index) {
-      this.tableCols[3].inputType.splice(index, 1)
-      this.paramsForm.params.splice(index, 1)
+    load() {
+      if (this.noMore || this.loading) {
+        return
+      }
+      this.queryTableData()
+    },
+    resetTable() {
+      this.page = 0
+      this.noMore = false
+      this.tableData = []
     },
     // 获取下拉数据
     async getSelectData(id) {
@@ -453,6 +483,33 @@ export default {
       } catch (error) {
         console.log(error)
       }
+    },
+    async queryTableData() {
+      this.loading = true
+      try {
+        const {
+          code,
+          returnData: { columnSet, listValues }
+        } = await Query({
+          id: this.queryTemplateID,
+          needPage: ++this.page,
+          dataContent: this.queryString ? { whereString: this.queryString } : []
+        })
+        if (Number(code) === 0) {
+          if (listValues.length === 0) {
+            this.page--
+            this.noMore = true
+          }
+          this.tableCols = columnSet
+          this.tableData.push(...listValues)
+        } else {
+          this.page--
+          this.$message.error('获取表格数据失败')
+        }
+      } catch (error) {
+        console.log('出错了', error.message || error)
+      }
+      this.loading = false
     }
   }
 }