员工入职填写优化

src/views/onboarding/fill/index.vue

@@ -115,6 +115,23 @@
                       <el-input v-model="form.employeeName" placeholder="请输入真实姓名" :disabled="!canEdit" clearable />
                     </el-form-item>
                   </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="身份证号码" prop="idCardNumber">
+                      <el-input v-model="form.idCardNumber" placeholder="请输入18位身份证号" :disabled="!canEdit" maxlength="18"
+                        clearable />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :xs="24" :sm="8">
+                    <el-form-item label="出生年月日" prop="birthday">
+                      <el-input v-model="form.birthday" placeholder="根据身份证号自动生成" readonly :disabled="!canEdit"
+                        class="full-width readonly-derived-input">
+                        <template #prefix>
+                          <el-icon><Calendar /></el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                  </el-col>
+
                   <el-col :xs="12" :sm="8">
                     <el-form-item label="性别" prop="gender">
                       <el-select v-model="form.gender" placeholder="请选择性别" :disabled="!canEdit" class="full-width">
@@ -128,19 +145,13 @@
                       <el-input v-model="form.nation" placeholder="如 汉族" :disabled="!canEdit" clearable />
                     </el-form-item>
                   </el-col>
-
-                  <el-col :xs="24" :sm="8">
-                    <el-form-item label="出生年月日" prop="birthday">
-                      <el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" placeholder="选择出生日期"
-                        :disabled="!canEdit" class="full-width" />
-                    </el-form-item>
-                  </el-col>
                   <el-col :xs="24" :sm="8">
                     <el-form-item label="户籍所在地" prop="registeredResidence">
                       <el-input v-model="form.registeredResidence" placeholder="如 某省某市某区/县" :disabled="!canEdit"
                         clearable />
                     </el-form-item>
                   </el-col>
+
                   <el-col :xs="12" :sm="4">
                     <el-form-item label="身高 (cm)" prop="height">
                       <el-input v-model="form.height" placeholder="如 175" :disabled="!canEdit" />
@@ -151,7 +162,6 @@
                       <el-input v-model="form.weight" placeholder="如 65" :disabled="!canEdit" />
                     </el-form-item>
                   </el-col>
-
                   <el-col :xs="12" :sm="8">
                     <el-form-item label="健康状况" prop="healthCondition">
                       <el-input v-model="form.healthCondition" placeholder="如 良好 / 无既往病史" :disabled="!canEdit" />
@@ -167,12 +177,6 @@
                       </el-select>
                     </el-form-item>
                   </el-col>
-                  <el-col :xs="24" :sm="8">
-                    <el-form-item label="身份证号码" prop="idCardNumber">
-                      <el-input v-model="form.idCardNumber" placeholder="请输入18位身份证号" :disabled="!canEdit" maxlength="18"
-                        clearable />
-                    </el-form-item>
-                  </el-col>
                 </el-row>
               </div>
 
@@ -683,6 +687,7 @@ import {
 } from "@/api/modules/biz/onboarding";
 import {
   getIdCardBirthday,
+  getIdCardGender,
   getIdCardValidationMessage,
   isBankCardNumber,
   isContactPhone,
@@ -878,6 +883,33 @@ function validateBirthday(_rule: any, value: unknown, callback: (error?: Error)
   callback();
 }
 
+// 监听身份证号码输入，自动提取出生年月日并联动推导性别
+watch(
+  () => form.idCardNumber,
+  (newVal) => {
+    const rawIdCard = normalizeIdCardNumber(newVal);
+    if (!rawIdCard) {
+      form.birthday = "";
+      return;
+    }
+    const birthday = getIdCardBirthday(rawIdCard);
+    if (birthday) {
+      form.birthday = birthday;
+      // 联动推导性别（若尚未手动选择过）
+      const gender = getIdCardGender(rawIdCard);
+      if (gender && (!form.gender || form.gender === "男" || form.gender === "女")) {
+        form.gender = gender;
+      }
+      nextTick(() => {
+        regFormRef.value?.clearValidate(["birthday", "gender"]);
+      });
+    } else if (rawIdCard.length < 18) {
+      form.birthday = "";
+    }
+  },
+  { immediate: true }
+);
+
 function validateBankCardNumber(_rule: any, value: unknown, callback: (error?: Error) => void) {
   if (value && !isBankCardNumber(value)) {
     return callback(new Error("请输入12至19位银行卡号"));
@@ -963,9 +995,12 @@ const regRules = computed<FormRules>(() => {
     }
 
     const useChangeTrigger = changeTriggerFields.has(fieldKey);
+    const message = fieldKey === "birthday"
+      ? "请先输入正确的身份证号码以生成出生日期"
+      : `${useChangeTrigger ? "请选择" : "请填写"}${requirement.fieldName || fieldKey}`;
     rules[fieldKey] = [{
       required: true,
-      message: `${useChangeTrigger ? "请选择" : "请填写"}${requirement.fieldName || fieldKey}`,
+      message,
       trigger: useChangeTrigger ? "change" : "blur"
     }];
   });
@@ -2570,6 +2605,21 @@ onBeforeUnmount(() => {
   border-color: #059669 !important;
 }
 
+.readonly-derived-input :deep(.el-input__wrapper) {
+  background-color: #f9fafb !important;
+  cursor: default;
+}
+
+.readonly-derived-input :deep(.el-input__inner) {
+  color: #374151 !important;
+  -webkit-text-fill-color: #374151 !important;
+  font-weight: 500;
+}
+
+.readonly-derived-input :deep(.el-input__prefix) {
+  color: #059669;
+}
+
 @media (max-width: 640px) {
 
   .fill-page :deep(.el-input__inner),