ren

src/views/professional/teacherbase/relation-dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog v-model="visible" title="社会关系" width="600px" @close="handleClose">
-    <el-form :model="form" label-width="120px" ref="formRef">
-      <el-form-item label="称谓" required>
+    <el-form :model="form" :rules="rules" label-width="130px" ref="formRef">
+      <el-form-item label="称谓" prop="title" required>
         <el-select v-model="form.title" placeholder="请选择称谓" style="width: 100%">
           <el-option
             v-for="item in titleOptions"
@@ -11,20 +11,20 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="姓名" required>
+      <el-form-item label="姓名" prop="realName" required>
         <el-input v-model="form.realName" placeholder="请输入姓名" />
       </el-form-item>
-      <el-form-item label="出生年月" required>
+      <el-form-item label="出生年月" prop="birthday" required>
         <el-date-picker
           v-model="form.birthday"
           type="date"
           placeholder="选择日期"
-          format="yyyy-MM-dd"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD HH:mm:ss"
           style="width: 100%"
         />
       </el-form-item>
-      <el-form-item label="政治面貌">
+      <el-form-item label="政治面貌" prop="politicsStatusId" required>
         <el-select v-model="form.politicsStatusId" placeholder="请选择政治面貌" style="width: 100%">
           <el-option
             v-for="item in politicsStatusList"
@@ -34,7 +34,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="工作单位及职务">
+      <el-form-item label="工作单位及职务" prop="workStation" required>
         <el-input 
           v-model="form.workStation" 
           type="textarea"
@@ -104,7 +104,30 @@ const handleClose = () => {
 }
 
 const handleSubmit = () => {
-  emit('submit', { ...form.value })
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      emit('submit', { ...form.value })
+    }
+  })
+}
+
+// 表单验证规则
+const rules = {
+  title: [
+    { required: true, message: '请选择称谓', trigger: 'change' }
+  ],
+  realName: [
+    { required: true, message: '请输入姓名', trigger: 'blur' }
+  ],
+  birthday: [
+    { required: true, message: '请选择出生年月', trigger: 'change' }
+  ],
+  politicsStatusId: [
+    { required: true, message: '请选择政治面貌', trigger: 'change' }
+  ],
+  workStation: [
+    { required: true, message: '请输入工作单位及职务', trigger: 'blur' }
+  ]
 }
 </script>