动态校验

src/views/system/user/UserForm.vue

@@ -28,18 +28,19 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item  label="用户名称" prop="username">
-            <el-input  :disabled="formData.id" v-model="formData.username" placeholder="请输入用户名称"/>
+          <el-form-item label="用户名称" prop="username">
+            <el-input v-model="formData.username" :disabled="formData.id"
+                      placeholder="请输入用户名称"/>
           </el-form-item>
         </el-col>
 
 
         <el-col :span="8">
-          <el-form-item  label="用户密码" prop="password">
+          <el-form-item label="用户密码" prop="password">
             <el-input
-              :disabled="formData.id"
-
               v-model="formData.password"
+
+              :disabled="formData.id"
               placeholder="请输入用户密码"
               show-password
               type="password"
@@ -68,18 +69,18 @@
             </el-select>
           </el-form-item>
         </el-col>
-<!--        <el-col :span="8">-->
-<!--          <el-form-item label="岗位" prop="postIds">-->
-<!--            <el-select v-model="formData.postIds" multiple placeholder="请选择">-->
-<!--              <el-option-->
-<!--                v-for="item in postList"-->
-<!--                :key="item.id"-->
-<!--                :label="item.name"-->
-<!--                :value="item.id!"-->
-<!--              />-->
-<!--            </el-select>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
+        <!--        <el-col :span="8">-->
+        <!--          <el-form-item label="岗位" prop="postIds">-->
+        <!--            <el-select v-model="formData.postIds" multiple placeholder="请选择">-->
+        <!--              <el-option-->
+        <!--                v-for="item in postList"-->
+        <!--                :key="item.id"-->
+        <!--                :label="item.name"-->
+        <!--                :value="item.id!"-->
+        <!--              />-->
+        <!--            </el-select>-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
         <el-col :span="8">
           <el-form-item label="角色" prop="roleIds">
             <el-select v-model="formData.roleIds" multiple placeholder="请选择">
@@ -95,7 +96,7 @@
 
 
         <el-col :span="8">
-          <el-form-item  label="省" prop="shengCode">
+          <el-form-item label="省" prop="shengCode">
             <el-select v-model="formData.shengCode"
                        clearable
                        placeholder="所属省份">
@@ -106,7 +107,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item  label="市" prop="shiCode">
+          <el-form-item label="市" prop="shiCode">
             <el-select v-model="formData.shiCode"
                        clearable
                        placeholder="所属省份">
@@ -116,7 +117,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item  label="县" prop="xianCode">
+          <el-form-item label="县" prop="xianCode">
             <el-select v-model="formData.xianCode"
                        clearable
                        placeholder="所属省份">
@@ -171,7 +172,10 @@ const formData = ref({
   postIds: [],
   remark: '',
   status: CommonStatusEnum.ENABLE,
-  roleIds: []
+  roleIds: [],
+  shengCode: '',
+  shiCode: '',
+  xianCode: '',
 })
 const formRules = reactive<FormRules>({
   username: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
@@ -248,15 +252,13 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as UserApi.UserVO
-    if(data.xianCode){
+    if (data.xianCode) {
       data.areaLevel = 3
       data.areaCode = data.xianCode
-    }
-    else if(data.shiCode){
+    } else if (data.shiCode) {
       data.areaLevel = 2
       data.areaCode = data.shiCode
-    }
-    else if(data.shengCode){
+    } else if (data.shengCode) {
       data.areaLevel = 1
       data.areaCode = data.shengCode
     }
@@ -325,6 +327,24 @@ watch(() => formData.value.shiCode, async (newValue) => {
     xianList.value = []
   }
 });
+watch(
+  () => formData.value.deptId,
+  async (newValue) => {
+    if (newValue == '112') {
+      // 当 deptId 为 '112' 时，shengCode 不是必填
+      formRules.shengCode[0].required = false;
+      // 清除 shengCode 的校验状态
+      await formRef.value?.clearValidate('shengCode');
+
+    } else {
+      // 否则，shengCode 是必填的
+      formRules.shengCode[0].required = true;
+      // 重新校验 shengCode 字段
+      await formRef.value?.validateField('shengCode');
+    }
+  },
+  { deep: true }
+);
 onMounted(async () => {
 
 })