催费管理，设置检验性质不隐藏，设备类型选值后才可选

yudao-ui-admin-vue3/src/views/pressure2/expenseReminderManagement/index.vue

@@ -23,7 +23,7 @@
     @on-page-no-change="() => getList()"
     @on-page-size-change="() => getList()"
     @on-search="getList"
-    @on-reset="getList"
+    @on-reset="handleReset"
     @refresh="getList"
     @row-dblclick="handleRowDetail"
   >
@@ -201,7 +201,12 @@
 </template>
 <script setup lang="tsx">
 import SmartTable from '@/components/SmartTable/SmartTable'
-import { SmartInstanceExpose, SmartTableButton, SmartTableColumn, SmartSearchFormOptionItem } from '@/types/table'
+import {
+  SmartInstanceExpose,
+  SmartTableButton,
+  SmartTableColumn,
+  SmartSearchFormOptionItem
+} from '@/types/table'
 import FetchApis from './index.api'
 import { usePageLoading } from '@/hooks/web/usePageLoading'
 import { cloneDeep } from 'lodash-es'
@@ -217,8 +222,8 @@ import { Decimal } from 'decimal.js'
 import { isEmpty } from '@/utils/is'
 import { useRoute, useRouter } from 'vue-router'
 import { getDeptList } from '@/api/laboratory/dept'
-import {useDictStore} from "@/store/modules/dict";
-import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
+import { useDictStore } from '@/store/modules/dict'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
 const route = useRoute()
 const router = useRouter()
@@ -234,8 +239,8 @@ const pipeCheckTypeOptions = getStrDictOptions(DICT_TYPE.PIPE_CHECK_TYPE)
 defineOptions({
   name: 'ExpenseReminderManagementIndex'
 })
- const deptList = ref<SmartSearchFormOptionItem[]>([])
-  const fetchDeptList = async () => {
+const deptList = ref<SmartSearchFormOptionItem[]>([])
+const fetchDeptList = async () => {
   return new Promise<SmartSearchFormOptionItem[]>((resolve, reject) => {
     getDeptList({})
       .then((res) => {
@@ -271,49 +276,108 @@ const statusMap = ref([
   }
 ])
 
+// // 处理设备类型变化
+// const handleEquipMainTypeChange = (value: any) => {
+//   const searchForm = smartTableRef.value?.getSearchForm() || {}
+//   const checkTypeColumn = columns.value.find(col => col.prop === 'checkType')
+//
+//   if (!value) {
+//     // 设备类型清空时，隐藏检验性质并清空其值
+//     showCheckTypeSearch.value = false
+//     searchForm.checkType = undefined
+//     // 移除 search 属性来隐藏筛选项
+//     if (checkTypeColumn) {
+//       checkTypeColumn.search = undefined
+//     }
+//   } else {
+//     // 设备类型有值时，显示检验性质并更新选项
+//     showCheckTypeSearch.value = true
+//     // 恢复 search 属性
+//     if (checkTypeColumn && !checkTypeColumn.search) {
+//       checkTypeColumn.search = {
+//         type: 'select',
+//         options: value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions,
+//         fieldProps: {
+//           placeholder: '请选择检验性质',
+//           clearable: true
+//         },
+//         sort: 4
+//       }
+//     } else if (checkTypeColumn && checkTypeColumn.search) {
+//       // 更新选项
+//       checkTypeColumn.search.options = value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions
+//     }
+//   }
+//
+//   // 更新搜索表单
+//   smartTableRef.value?.setSearchForm(searchForm)
+// }
 
 // 处理设备类型变化
 const handleEquipMainTypeChange = (value: any) => {
   const searchForm = smartTableRef.value?.getSearchForm() || {}
-  const checkTypeColumn = columns.value.find(col => col.prop === 'checkType')
-  
+  const checkTypeColumn = columns.value.find((col) => col.prop === 'checkType')
+
   if (!value) {
-    // 设备类型清空时，隐藏检验性质并清空其值
-    showCheckTypeSearch.value = false
+    // 设备类型清空时，检验性质设为只读（disabled），不清空值
+
     searchForm.checkType = undefined
-    // 移除 search 属性来隐藏筛选项
+    // 恢复 search 属性（如果之前被移除）
     if (checkTypeColumn) {
-      checkTypeColumn.search = undefined
+      if (!checkTypeColumn.search) {
+        checkTypeColumn.search = {
+          type: 'select',
+          options: boilerCheckTypeOptions,
+          fieldProps: {
+            placeholder: '请先选择设备类型',
+            clearable: true,
+            disabled: true
+          },
+          sort: 4
+        }
+      } else {
+        checkTypeColumn.search.fieldProps = {
+          ...checkTypeColumn.search.fieldProps,
+          disabled: true,
+          placeholder: '请先选择设备类型'
+        }
+      }
     }
   } else {
-    // 设备类型有值时，显示检验性质并更新选项
-    showCheckTypeSearch.value = true
-    // 恢复 search 属性
-    if (checkTypeColumn && !checkTypeColumn.search) {
-      checkTypeColumn.search = {
-        type: 'select',
-        options: value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions,
-        fieldProps: {
-          placeholder: '请选择检验性质',
-          clearable: true
-        },
-        sort: 4
+    // 设备类型有值时，显示检验性质并更新选项，启用
+    if (checkTypeColumn) {
+      if (!checkTypeColumn.search) {
+        checkTypeColumn.search = {
+          type: 'select',
+          options: value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions,
+          fieldProps: {
+            placeholder: '请选择检验性质',
+            clearable: true,
+            disabled: false
+          },
+          sort: 4
+        }
+      } else {
+        // 更新选项并启用
+        checkTypeColumn.search.options =
+          value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions
+        checkTypeColumn.search.fieldProps = {
+          ...checkTypeColumn.search.fieldProps,
+          disabled: false,
+          placeholder: '请选择检验性质'
+        }
       }
-    } else if (checkTypeColumn && checkTypeColumn.search) {
-      // 更新选项
-      checkTypeColumn.search.options = value === '200' ? boilerCheckTypeOptions : pipeCheckTypeOptions
     }
   }
-  
+
   // 更新搜索表单
   smartTableRef.value?.setSearchForm(searchForm)
 }
 
-
 const equipMainType = ref('boiler')
 const smartTableRef = ref<SmartInstanceExpose>()
 // 检验性质筛选是否显示
-const showCheckTypeSearch = ref(false)
+// const showCheckTypeSearch = ref(false)
 const pagerConfig = reactive({
   pageNo: 1,
   pageSize: 10
@@ -598,7 +662,9 @@ const columns = ref<SmartTableColumn[]>([
             <el-button
               type="primary"
               link
-              onClick={() => handleToRoute('FinancialFeesIndexPressure2', { unitName: value, autoSearch: true })}
+              onClick={() =>
+                handleToRoute('FinancialFeesIndexPressure2', { unitName: value, autoSearch: true })
+              }
             >
               {value}
             </el-button>
@@ -628,14 +694,12 @@ const columns = ref<SmartTableColumn[]>([
     render: (_row, value) => {
       return (
         <el-tag>
-          {value && (
-            value ?  equipTypeMap.find((x) => x.value == value)?.label : '-'
-          )}
+          {value && (value ? equipTypeMap.find((x) => x.value == value)?.label : '-')}
         </el-tag>
       )
     }
   },
-    {
+  {
     prop: 'deptId',
     label: '检验部门',
     width: 120,
@@ -688,8 +752,9 @@ const columns = ref<SmartTableColumn[]>([
       sort: 4
     },
     render(_row, value) {
-      return _row.equipMainType == '200' ? (boilerCheckTypeOptions.find((x) => x.value == value)?.label || '')
-        : (pipeCheckTypeOptions.find((x) => x.value == value)?.label || '')
+      return _row.equipMainType == '200'
+        ? boilerCheckTypeOptions.find((x) => x.value == value)?.label || ''
+        : pipeCheckTypeOptions.find((x) => x.value == value)?.label || ''
     }
   },
   {
@@ -710,10 +775,10 @@ const columns = ref<SmartTableColumn[]>([
       showOverflowTooltip: true
     },
     search: {
-        type: 'daterange', // 改为日期范围选择器
-        fieldProps: {
-          style: { width: '100%' } // 确保日期选择器占满可用空间
-        }
+      type: 'daterange', // 改为日期范围选择器
+      fieldProps: {
+        style: { width: '100%' } // 确保日期选择器占满可用空间
+      }
     },
     render(_row, value) {
       return formatArrayDate(value)
@@ -762,6 +827,32 @@ const getNotPaymentStatus = () => {
     notPaymentStatusCount.value = res.total || 0
   })
 }
+// 重置事件处理：同时恢复检验性质为只读状态
+const handleReset = () => {
+  // SmartTable 内部会清空搜索表单，但不会触发 onChange，需手动恢复检验性质状态
+  const checkTypeColumn = columns.value.find(col => col.prop === 'checkType')
+  if (checkTypeColumn) {
+    if (!checkTypeColumn.search) {
+      checkTypeColumn.search = {
+        type: 'select',
+        options: boilerCheckTypeOptions,
+        fieldProps: {
+          placeholder: '请先选择设备类型',
+          clearable: true,
+          disabled: true
+        },
+        sort: 4
+      }
+    } else {
+      checkTypeColumn.search.fieldProps = {
+        ...checkTypeColumn.search.fieldProps,
+        disabled: true,
+        placeholder: '请先选择设备类型'
+      }
+    }
+  }
+  getList()
+}
 const getList = async () => {
   await getNotPaymentStatus()
   selectedRows.value = []
@@ -1106,12 +1197,23 @@ onMounted(() => {
   // 初始化时隐藏检验性质筛选项
   const checkTypeColumn = columns.value.find(col => col.prop === 'checkType')
   if (checkTypeColumn) {
-    checkTypeColumn.search = undefined
+    // checkTypeColumn.search = undefined
+
+    checkTypeColumn.search = {
+      type: 'select',
+      options: boilerCheckTypeOptions,
+      fieldProps: {
+        placeholder: '请先选择设备类型',
+        clearable: true,
+        disabled: true
+      },
+      sort: 4
+    }
   }
-  
+
   smartTableRef.value?.setSearchForm(searchFormData.value)
   const routerQuery = route.query || {}
-  if(Object.entries(routerQuery).length){
+  if (Object.entries(routerQuery).length) {
     smartTableRef.value?.setSearchForm({ noTaxPaymentStatus: 0, ...routerQuery })
   }
   getList()