fix: 新增筛选类型

src/components/common/y-table.vue

@@ -10,15 +10,19 @@
         class="filter-item"
       >
         <span>{{ item.label }}：</span>
+        <!-- 选择框 -->
         <a-select
           v-if="item.type === 'select'"
           class="input-item"
           placeholder="请选择"
           :options="item.options"
           allow-clear
+          show-search
+          :filter-option="filterOption"
           v-model:value="filterData[item.name]"
           @change="toFilt"
         ></a-select>
+        <!-- 输入框 -->
         <a-input
           v-else-if="item.type === 'text'"
           class="input-item"
@@ -27,7 +31,16 @@
           v-model:value="filterData[item.name]"
           @change="toFilt"
         />
+        <!-- 日期范围 -->
         <a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
+        <!-- 带时分的日期范围 -->
+        <a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
+        <!-- 数值区间 -->
+        <div v-else-if="item.type === 'number_range' && filterData[item.name]" class="number_range_box">
+          <a-input-number placeholder="最小值" style="width: 140px" v-model:value="filterData[item.name].min" @change="toFilt" />
+          <span class="divider"> - </span>
+          <a-input-number placeholder="最大值" style="width: 140px" v-model:value="filterData[item.name].max" @change="toFilt" />
+        </div>
       </div>
       <div v-if="isExport" class="filter-item"><a :href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`" target="_blank"><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a></div>
     </div>
@@ -63,7 +76,7 @@
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import _ from "lodash";
 import { CloudDownloadOutlined } from "@ant-design/icons-vue";
@@ -109,13 +122,21 @@ const pageState = reactive({
   perPage: 20,
 });
 
-// watch(() => props.previewId, () => {
+watch(() => props.filterConfig, (newVal) => {
-//   props.filterConfig.forEach(item => {
+  newVal.forEach((item) => {
-//     if (item.type === 'time') {
+    // 给数值区间类型赋初始值，防止报错
-//       filterData.value[item.name] = [dayjs().startOf('month'), dayjs().endOf('month')];
+    if (item.type === 'number_range') {
-//     }
+      filterData.value[item.name] = {
-//   })
+        min: undefined,
-// }, { immediate: true })
+        max: undefined,
+      };
+    }
+  });
+}, { immediate: true });
+
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
 
 const getFilter = () => {
   const cloneFilter = _.cloneDeep(props.filterConfig);
@@ -124,16 +145,37 @@ const getFilter = () => {
       return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
     })
     .map((item) => {
-      return item.type === 'time' && filterData.value[item.name] ?  {
+      if (item.type === 'time' && filterData.value[item.name]) {
+        // 日期类型的参数
+        return {
           name: item.name,
           type: item.type,
           start_time: filterData.value[item.name][0].format('YYYY-MM-DD'),
           end_time: filterData.value[item.name][1].format('YYYY-MM-DD'),
-      } : {
+        };
+      } else if (item.type === 'date_time' && filterData.value[item.name]) {
+        // 带时分的日期类型参数
+        return {
+          name: item.name,
+          type: item.type,
+          start_time: filterData.value[item.name][0].format('YYYY-MM-DD HH:mm') + ':00',
+          end_time: filterData.value[item.name][1].format('YYYY-MM-DD HH:mm') + ':59',
+        };
+      } else if (item.type === 'number_range') {
+        // 数值区间
+        return {
+          name: item.name,
+          type: item.type,
+          min: filterData.value[item.name].min ? String(filterData.value[item.name].min) : '',
+          max: filterData.value[item.name].max ? String(filterData.value[item.name].max) : '',
+        };
+      } else {
+        return {
           name: item.name,
           type: item.type,
           value: filterData.value[item.name],
         };
+      }
     });
   return filter
 };
@@ -181,6 +223,17 @@ const pageChange = () => {
 .date-item {
   width: 240px;
 }
+.date-time-item {
+  width: 300px;
+}
+.number_range_box {
+  display: inline-flex;
+  align-items: center;
+
+  .divider {
+    margin: 0 4px;
+  }
+}
 .y-table-content {
   margin-top: 10px;
 }