1.0航站视图-筛选方式2

src/components/TableHeaderCell/index.vue

@@ -15,7 +15,21 @@
       <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 v-if="newFilters" inline label-position="top">
+          <el-form-item label="比较符" style="width: 60px;">
+            <el-select v-model="newFilters[0]" size="small" @change="$emit('update:new-filters', newFilters)">
+              <el-option label="<" value="<" />
+              <el-option label="=" value="=" />
+              <el-option label=">" value=">" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="label">
+            <el-select v-model="newFilters[1]" size="small" placeholder="筛选" filterable allow-create default-first-option collapse-tags clearable @change="$emit('update:new-filters', newFilters)">
+              <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-form v-else>
           <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" />
@@ -51,6 +65,9 @@ export default {
     filterValues: {
       type: Array
     },
+    newFilters: {
+      type: Array
+    },
     sortable: {
       type: [Boolean, Number],
     },
@@ -67,7 +84,7 @@ export default {
   },
   computed: {
     active () {
-      return this.filterValues?.length
+      return this.filterValues?.length || this.newFilters?.[1]
     },
     filterable () {
       return !!this.filterOptions
@@ -128,4 +145,7 @@ export default {
 .el-select-dropdown__item.hover {
   background: #d2d6df;
 }
+::v-deep .el-input--small .el-input__icon {
+  line-height: 40px;
+}
 </style>

src/views/baggageManagementTemp/components/departure/index.vue

@@ -104,7 +104,7 @@
         <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
           <template #header>
             <el-tooltip :content="col.desc || childCol.label" placement="top">
-              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
+              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :new-filters.sync="newFilters[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
             </el-tooltip>
           </template>
         </el-table-column>
@@ -215,7 +215,8 @@ export default {
         {
           prop: 'checkInNumber',
           label: '值机数',
-          desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活'
+          desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活',
+          filterable: 2,
         },
         {
           prop: 'unActive',

src/views/baggageManagementTemp/mixins/terminal.js

@@ -17,6 +17,7 @@ export default {
       tableData: [],
       tableDataFilters: {},
       filterValues: {},
+      newFilters: {},
       tableDataSortRules: {},
       spanArr: [],
       pos: 0,
@@ -49,6 +50,29 @@ export default {
             flag = false
           }
         })
+        Object.entries(this.newFilters).forEach(([key, [comparisonOperator, value]]) => {
+          if ((value ?? '') !== '') {
+            switch (comparisonOperator) {
+              case '<':
+                if (Number(item[key]) >= Number(value)) {
+                  flag = false
+                }
+                break
+              case '=':
+                if (Number(item[key]) !== Number(value)) {
+                  flag = false
+                }
+                break
+              case '>':
+                if (Number(item[key]) <= Number(value)) {
+                  flag = false
+                }
+                break
+              default:
+                break
+            }
+          }
+        })
         return flag
       })
       const sortRules = Object.entries(this.tableDataSortRules).reduce(
@@ -115,9 +139,12 @@ export default {
         if (children) {
           self.setFilterAndSort(children)
         } else {
-          if (filterable) {
+          if (Number(filterable) === 1) {
             self.$set(self.tableDataFilters, prop, [])
             self.$set(self.filterValues, prop, filterValues?.[prop] ?? [])
+          } else if (Number(filterable) === 2) {
+            self.$set(self.tableDataFilters, prop, [])
+            self.$set(self.newFilters, prop, ['=', null])
           }
           if (sortable) {
             self.$set(self.tableDataSortRules, prop, '')