修改价格变更校验问题

src/views/elderly/elder/price-change/ProcessForm.vue

@@ -3,7 +3,7 @@
     ref="formRef"
     :model="dataForm"
     label-width="110px"
-    :rules="dataRule"
+    :rules="formRules"
     class="price-change-form"
     :toggleType="isDetail"
   >
@@ -62,7 +62,7 @@
           :lg="processType == 2 ? 24 : 12"
           v-show="dataForm.isHysteresis == 1"
         >
-          <el-form-item label="差额滞后至" prop="hysteresisMonth" required>
+          <el-form-item label="差额滞后至" prop="hysteresisMonth" :required="dataForm.isHysteresis == 1">
             <TgDatePicker
               v-model="dataForm.hysteresisMonth"
               type="month"
@@ -190,6 +190,7 @@ import { getPriceDetail } from '@/api/elderly/elder/price-change'
 import { priceChangeFormType } from '../types'
 import { tableHeaderColor } from '@/utils/table'
 import { View } from '@element-plus/icons-vue'
+import type { FormRules } from 'element-plus'
 defineOptions({ name: 'PriceChangeProcessForm' })
 
 const formRef = ref() // 表单 Ref
@@ -210,26 +211,22 @@ const state = reactive<priceChangeFormType>({
   },
   dataRule: {
     elderlyId: [{ required: true, message: '长者不能为空', trigger: 'blur' }],
-    changeDate: [{ required: true, message: '变更日期不能为空', trigger: 'blur' }],
-    hysteresisMonth: [
-      {
-        validator: (_rule, value, callback) => {
-          if (state.dataForm.isHysteresis == 1) {
-            if (value === '' || value == null) {
-              callback(new Error('请选择差额滞后月份'))
-            } else {
-              callback()
-            }
-          } else {
-            callback()
-          }
-        },
-        trigger: 'change'
-      }
-    ]
+    changeDate: [{ required: true, message: '变更日期不能为空', trigger: 'blur' }]
   }
 })
-const { dataForm, dataRule } = toRefs(state)
+const { dataForm } = toRefs(state)
+
+/** 仅在选择滞后时校验「差额滞后至」必填 */
+const formRules = computed<FormRules>(() => ({
+  ...state.dataRule,
+  ...(state.dataForm.isHysteresis == 1
+    ? {
+        hysteresisMonth: [
+          { required: true, message: '请选择差额滞后月份', trigger: ['change', 'blur'] }
+        ]
+      }
+    : {})
+}))
 const resetFormField = reactive({ ...dataForm.value })
 const loading = ref(false)