fix(CustromFilter组件): 修复自定义查询错误

修复自定义查询组件，在输入值后取消，原先输入值不显示的BUG;
修复点击重置后，查询时仍然使用重置前的数据的BUG;

src/components/form/CustomFilter.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
   customFilterList: Array<FilterItem> // 过滤条件的值列表
 }>()
 
+const emits = defineEmits(['resetFilterList'])
+
 // 筛选条件
 const conditionOptions: Array<{
   label: string
@@ -48,7 +50,7 @@ const filterList = reactive<
  */
 const initFilterList = () => {
   console.log(props.customFilterList)
-  filterList.splice(0, filterList.length, ...props.customFilterList)
+  filterList.splice(0, filterList.length, ...JSON.parse(JSON.stringify(props.customFilterList)))
 }
 
 /**
@@ -127,6 +129,21 @@ const addFilter = () => {
 }
 
 /**
+ * 单独重置弹出框的条件
+ *
+ * 需要先清空，后触发事件
+ * 因为后续更新表单数据的时候，是依据filterList的，顺序不能反
+ *
+ */
+const resetFilter = () => {
+  filterList.splice(0, filterList.length, {
+    value: '',
+    filterCondition: 'gt'
+  })
+  emits('resetFilterList')
+}
+
+/**
  * 删除筛选条件
  * @param index 删除的条件索引
  */
@@ -145,6 +162,7 @@ defineExpose({
   <div class="customFilter">
     <div class="filterHeader">
       <div class="filterTool">
+        <el-button plain class="filterToolResetBtn" @click="resetFilter">重置</el-button>
         <el-button
           type="primary"
           style="width: 100px; height: 30px; font-size: 12px"
@@ -236,6 +254,10 @@ defineExpose({
   justify-content: flex-end;
 }
 
+.filterToolResetBtn {
+  margin-right: 20px;
+}
+
 .filterContainer {
   display: flex;
   flex-direction: column;

src/components/table/CustomTable.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-28
+ * @LastEditTime: 2024-11-29
  * @Description: 
  * 
 -->
@@ -33,14 +33,18 @@ type CustomFilterRef = InstanceType<typeof CustomFilter>
 const customFilterRef = ref<CustomFilterRef>()
 
 const { analysisResCode } = useRequest()
-
+/**
+ *  自定义筛选重置有问题!!!!!!!!!!!!!!!
+ *  */
 const {
   customFilterDialog,
   customFilterInfo,
   customFilterList,
   activeCustomFilterKey,
   initCustomFilterInfo,
+  resetCustomFilterList,
   openCustomFilter,
+  openedInit,
   confirmCustomFilter
 } = useCustomFilter(customFilterRef)
 // 节流的延迟时间
@@ -256,13 +260,11 @@ const resetTableData = () => {
  * @description 按条件查询，如果开启了分页查询，那么会直接重新查询数据，否则，会根据现有数据进行查询
  */
 const queryTableData = () => {
-  console.log(props.openRemoteQuery, props.requestConfig)
   if (props.openRemoteQuery && props.requestConfig) {
     reqConfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
     // 需要在查询前清除掉目前的数据，不然会导致之前缓存的数据混入
     //  比如第一页已经缓存了，在第二页重新查询，在切回第一页，还是显示查询前的数据，因为缓存没被清除
     tableData.splice(0, tableData.length)
-    console.log('执行')
     getData()
   } else {
     let filteredTable: any[]
@@ -301,7 +303,8 @@ const resetQueryFormData = () => {
  * @description: 重置整个查询表单，重置后，再请求一次全部表格
  */
 const resetQueryForm = () => {
-  resetQueryFormData()
+  resetQueryFormData() // 重置查询表单
+  initCustomFilterInfo(customFieldsList) // 重置自定义表单数据
   throttleQueryTableData()
 }
 
@@ -314,7 +317,6 @@ const throttleResetQueryForm = throttleFunc(resetQueryForm, throttleTime)
  * @param  rowData 插入的数据
  */
 const insertRow = (start: number, rowData: any) => {
-  console.log(tableData)
   if (props.openRemoteQuery) {
     tableData[start].splice(0, 0, rowData)
   } else {
@@ -562,6 +564,13 @@ const numberInput = (key: string) => {
   queryFormData[key] = val
 }
 
+/**
+ * 接收重置表单命令
+ */
+const resetCustomFilterData = () => {
+  resetCustomFilterList(FormData)
+}
+
 // 定义暴露出去的方法
 defineExpose({
   getData,
@@ -707,10 +716,16 @@ onMounted(() => {
             </el-button>
           </div>
         </div>
-        <el-dialog v-model="customFilterDialog" title="自定义筛选条件" width="800">
+        <el-dialog
+          v-model="customFilterDialog"
+          title="自定义筛选条件"
+          width="800"
+          @open="openedInit"
+        >
           <CustomFilter
             :custom-filter-list="customFilterList[activeCustomFilterKey]"
             :filter="customFilterInfo[activeCustomFilterKey]"
+            @reset-filter-list="resetCustomFilterData"
             ref="customFilterRef"
           ></CustomFilter>
           <template #footer>

src/hooks/useCustomFilter.ts

@@ -94,6 +94,16 @@ export function useCustomFilter(customFilterRef: Ref<CustomFilterRef | undefined
     activeCustomFilterKey.value = item.name
     customFilterDialog.value = true
     // 这里一定要在下一个tick中执行，因为组件还没渲染出来，所以无法获取到dom元素
+    // void nextTick(() => {
+    //   if (customFilterRef.value) {
+    //     customFilterRef.value.initFilterList()
+    //   }
+    // })
+  }
+
+  const openedInit = () => {
+    // activeCustomFilterKey.value = item.name
+    // 这里一定要在下一个tick中执行，因为组件还没渲染出来，所以无法获取到dom元素
     void nextTick(() => {
       if (customFilterRef.value) {
         customFilterRef.value.initFilterList()
@@ -118,21 +128,44 @@ export function useCustomFilter(customFilterRef: Ref<CustomFilterRef | undefined
     return result
   }
 
-  /**
-   * 提交筛选条件
-   *
-   * 提交前需要验证数据是否符合格式，不符合则不提交。
-   *
-   */
-  const confirmCustomFilter = (queryFormData: Reactive<Record<string, any>>) => {
+  const customDataToFormData = (queryFormData: Reactive<Record<string, any>>): boolean => {
     if (customFilterRef.value && customFilterRef.value.verifySub()) {
-      customFilterDialog.value = false
       const result = customFilterRef.value.getSubCondition()
       // 拿到数据后，需要转为查询参数
       queryFormData[activeCustomFilterKey.value] = conversionCustomFilter(result)
       // 保存筛选值
       customFilterList[activeCustomFilterKey.value] = result
+      return true
     }
+    return false
+  }
+
+  /**
+   * 提交筛选条件
+   *
+   * 提交前需要验证数据是否符合格式，不符合则不提交。
+   *
+   */
+  const confirmCustomFilter = (queryFormData: Reactive<Record<string, any>>) => {
+    if (customDataToFormData(queryFormData)) customFilterDialog.value = false
+  }
+
+  /**
+   * 重置自定义筛选列表
+   *
+   * 重置后需要同步重置表单数据
+   *
+   * @param queryFormData  表单数据
+   */
+  const resetCustomFilterList = (queryFormData: Reactive<Record<string, any>>) => {
+    customFilterList[activeCustomFilterKey.value] = [
+      {
+        value: '',
+        filterCondition: 'gt'
+      }
+    ]
+
+    customDataToFormData(queryFormData)
   }
 
   return {
@@ -140,10 +173,10 @@ export function useCustomFilter(customFilterRef: Ref<CustomFilterRef | undefined
     customFilterInfo,
     customFilterList,
     activeCustomFilterKey,
-
+    resetCustomFilterList,
     initCustomFilterInfo,
     openCustomFilter,
-
+    openedInit,
     confirmCustomFilter
   }
 }

src/hooks/useTable.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:15:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-28
+ * @LastEditTime: 2024-11-29
  * @Description:
  *
  */
@@ -57,7 +57,6 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
       const result = await axiosInstance.post<any, ResponseInfo>(url, option)
       let data = result.data
 
-      console.log(result)
       // 没有数据则直接置为空
       if (!data) {
         tableData.length = 0