feat: 增加家庭成员

src/App.vue

@@ -9,6 +9,14 @@
           placeholder="请输入姓名"
           :rules="[{ required: true, message: '请填写姓名' }]"
         />
+        <van-field
+          v-model="form.phoneNumber"
+          name="phoneNumber"
+          type="tel"
+          label="手机号码"
+          placeholder="请输入手机号码"
+          :rules="phoneRules"
+        />
         <van-field
           v-model="form.gender"
           name="gender"
@@ -102,16 +110,9 @@
         />
       </van-cell-group>
 
-      <van-cell-group inset title="联系信息">
-        <van-field
-          v-model="form.phoneNumber"
-          name="phoneNumber"
-          type="tel"
-          label="手机号码"
-          placeholder="请输入手机号码"
-          :rules="phoneRules"
-        />
-        <van-field
+      <!-- <van-cell-group inset title="联系信息"> -->
+        
+        <!-- <van-field
           v-model="form.emergencyContact"
           name="emergencyContact"
           label="紧急联系人"
@@ -129,8 +130,8 @@
           label="紧急联系人电话"
           placeholder="请输入紧急联系人电话"
           :rules="phoneRules"
-        />
-      </van-cell-group>
+        /> -->
+      <!-- </van-cell-group> -->
 
       <van-cell-group inset title="地址信息">
         <van-field
@@ -275,6 +276,65 @@
         </van-field>
       </van-cell-group>
 
+      <van-cell-group  inset title="家庭主要成员">
+        <div class="family-table" v-if="form.familyMembers.length">
+          <div class="family-row family-header">
+            <div>关系</div>
+            <div>姓名</div>
+            <div>出生年月</div>
+            <div>工作单位职务</div>
+            <div>联系方式</div>
+            <div>紧急联系人</div>
+            <div>操作</div>
+          </div>
+          <div
+            class="family-row"
+            v-for="(fm, i) in form.familyMembers"
+            :key="i"
+          >
+          <div>
+            <van-field
+              v-model="fm.relation"
+              placeholder="请选择关系"
+              readonly
+              is-link
+              @click="onFamilyRelationClick(i)"
+            />
+          </div>
+            <div>
+              <van-field v-model="fm.name" placeholder="姓名" />
+            </div>
+            <div>
+              <van-field
+                v-model="fm.birthDate"
+                placeholder="请选择"
+                is-link
+                readonly
+                @click="onFamilyBirthClick(i)"
+              />
+            </div>
+            <div>
+              <van-field v-model="fm.companyAndJob" placeholder="单位与职务" />
+            </div>
+            <div>
+              <van-field v-model="fm.contact" type="tel" placeholder="手机号" />
+            </div>
+            <div>
+              <van-radio-group v-model="form.familyEmergencyIndex">
+                <van-radio :name="i">是</van-radio>
+              </van-radio-group>
+            </div>
+            <div>
+              <van-button size="small" type="danger" plain @click="removeFamilyMember(i)">删除</van-button>
+            </div>
+          </div>
+        </div>
+      </van-cell-group>
+
+      <div class="family-actions">
+        <van-button block type="primary" size="small" plain @click="addFamilyMember">新增家庭成员</van-button>
+      </div>
+
       <div class="actions">
         <van-button round block type="primary" :loading="submitting" native-type="submit">提交</van-button>
       </div>
@@ -330,13 +390,34 @@
         @cancel="showPartGraduatePicker = false"
       />
     </van-popup>
+    <van-popup v-model:show="showFamilyBirthPicker" position="bottom">
+      <van-date-picker
+        v-model="familyBirthValues"
+        title="选择日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="onFamilyBirthConfirm"
+        @cancel="showFamilyBirthPicker = false"
+      />
+    </van-popup>
+    <van-popup v-model:show="showFamilyRelationPicker" position="bottom">
+      <van-picker :columns="relationOptions" @confirm="onFamilyRelationConfirm" @cancel="showFamilyRelationPicker = false" />
+    </van-popup>
   </div>
 </template>
 
 <script setup lang="ts">
 import axios from 'axios';
 import type { UploaderFileListItem } from 'vant';
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, watch, nextTick } from 'vue';
+
+interface FamilyMemberModel {
+  relation: string;
+  name: string;
+  birthDate: string;
+  companyAndJob: string;
+  contact: string;
+}
 
 const form = reactive({
   name: '',
@@ -372,6 +453,8 @@ const form = reactive({
   nonFulltimeGraduationDate: '',
   nonFulltimeDegree: '',
   externalResume: '',
+  familyMembers: [] as Array<FamilyMemberModel>,
+  familyEmergencyIndex: -1,
   tid: '',
 });
 const _today = new Date();
@@ -381,10 +464,7 @@ const minDate = new Date(_todayYear - 75, 0, 1);
 const maxDate = new Date(_todayYear - 10, 0, 1);
 
 const graduationMinDate = new Date(_todayYear - 50, 1);
-const graduationMaxDate = new Date(
-  _todayYear + 3,
-  12
-);
+const graduationMaxDate = new Date(_todayYear + 3, 12);
 
 const workStartMinDate = new Date(_todayYear - 50, 1);
 const workStartMaxDate = _today;
@@ -409,6 +489,8 @@ const submitSuccess = ref(false);
 const showWorkStartPicker = ref(false);
 const showFullGraduatePicker = ref(false);
 const showPartGraduatePicker = ref(false);
+const showFamilyBirthPicker = ref(false);
+const showFamilyRelationPicker = ref(false);
 // function beforeRead(file: File | File[]) {
 //   const files = Array.isArray(file) ? file : [file];
 //   const limit = 20 * 1024 * 1024;
@@ -484,12 +566,25 @@ const politicalOptions = [
 //   value: o.key,
 // }));
 
-const birthValues = ref<string[]>([(_todayYear - 25) + '', '01', '01']);
-const workStartValues = ref<string[]>([(_todayYear - 10) + '', '01']);
-const fullGraduateValues = ref<string[]>([(_todayYear - 10) + '', '01']);
-const partGraduateValues = ref<string[]>([(_todayYear - 10) + '', '01']);
+const birthValues = ref<string[]>([_todayYear - 25 + '', '01', '01']);
+const workStartValues = ref<string[]>([_todayYear - 10 + '', '01']);
+const fullGraduateValues = ref<string[]>([_todayYear - 10 + '', '01']);
+const partGraduateValues = ref<string[]>([_todayYear - 10 + '', '01']);
+const familyBirthValues = ref<string[]>([_todayYear - 30 + '', '01', '01']);
+const activeFamilyIndex = ref<number>(-1);
+const relationOptions = [
+  { value: '父亲', text: '父亲' },
+  { value: '母亲', text: '母亲' },
+  { value: '夫妻', text: '夫妻' },
+  { value: '儿子', text: '儿子' },
+  { value: '女儿', text: '女儿' },
+  { value: '哥哥', text: '哥哥' },
+  { value: '弟弟', text: '弟弟' },
+  { value: '姐姐', text: '姐姐' },
+  { value: '妹妹', text: '妹妹' },
+];
 
-void [ageRules, politicalOptions, birthValues];
+void [ageRules, politicalOptions, relationOptions, birthValues];
 
 // 性别与婚姻状况改为单选，不再需要确认回调
 
@@ -522,6 +617,58 @@ function onPartGraduateConfirm(payload: { selectedValues: string[] }) {
   form.nonFulltimeGraduationDate = `${y}-${m}`;
   showPartGraduatePicker.value = false;
 }
+function onFamilyBirthClick(i: number) {
+  activeFamilyIndex.value = i;
+  showFamilyBirthPicker.value = true;
+}
+function onFamilyBirthConfirm(payload: { selectedValues: string[] }) {
+  const [y, m, d] = payload.selectedValues;
+  const idx = activeFamilyIndex.value;
+  if (idx >= 0 && form.familyMembers[idx]) {
+    form.familyMembers[idx].birthDate = `${y}-${m}-${d}`;
+  }
+  showFamilyBirthPicker.value = false;
+}
+
+function addFamilyMember() {
+  form.familyMembers.push({
+    relation: '',
+    name: '',
+    birthDate: '',
+    companyAndJob: '',
+    contact: '',
+  });
+  nextTick(() => {
+    const el = document.scrollingElement || document.documentElement;
+    window.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+  });
+}
+function removeFamilyMember(i: number) {
+  if (i < 0 || i >= form.familyMembers.length) return;
+  form.familyMembers.splice(i, 1);
+  if (form.familyEmergencyIndex === i) {
+    form.familyEmergencyIndex = -1;
+  } else if (form.familyEmergencyIndex > i) {
+    form.familyEmergencyIndex--;
+  }
+}
+
+function onFamilyRelationClick(i: number) {
+  activeFamilyIndex.value = i;
+  showFamilyRelationPicker.value = true;
+}
+function onFamilyRelationConfirm(payload: {
+  selectedOptions?: { text: string }[];
+  selectedValues?: string[];
+}) {
+  const idx = activeFamilyIndex.value;
+  const val =
+    payload?.selectedOptions?.[0]?.text ?? payload?.selectedValues?.[0] ?? '';
+  if (idx >= 0 && form.familyMembers[idx]) {
+    form.familyMembers[idx].relation = val;
+  }
+  showFamilyRelationPicker.value = false;
+}
 
 watch(
   () => form.birthDate,
@@ -563,20 +710,28 @@ async function onSubmit() {
       emergencyContact: form.emergencyContact,
       emergencyContactPhone: form.emergencyContactPhone,
       householdRegistrationAddress: form.householdRegistrationAddress,
-      workStartDate: form.workStartDisplay + '-01',
+      workStartDate: form.workStartDisplay ? form.workStartDisplay + '-01' : form.workStartDisplay,
       professionalTitle: form.professionalTitle,
       certificateStatus: form.certificateStatus,
       fulltimeEducation: form.fulltimeEducation,
       fulltimeSchool: form.fulltimeSchool,
       fulltimeMajor: form.fulltimeMajor,
-      fulltimeGraduationDate: form.fulltimeGraduationDate+ '-01',
+      fulltimeGraduationDate: form.fulltimeGraduationDate ? form.fulltimeGraduationDate + '-01' : form.fulltimeGraduationDate,
       fulltimeDegree: form.fulltimeDegree,
       nonFulltimeEducation: form.nonFulltimeEducation,
       nonFulltimeSchool: form.nonFulltimeSchool,
       nonFulltimeMajor: form.nonFulltimeMajor,
-      nonFulltimeGraduationDate: form.nonFulltimeGraduationDate+ '-01',
+      nonFulltimeGraduationDate: form.nonFulltimeGraduationDate ? form.nonFulltimeGraduationDate + '-01' : form.nonFulltimeGraduationDate,
       nonFulltimeDegree: form.nonFulltimeDegree,
       externalResume: form.externalResume,
+      familyMembers: form.familyMembers.map((fm, i) => ({
+        relation: fm.relation,
+        name: fm.name,
+        birthDate: fm.birthDate,
+        companyAndJob: fm.companyAndJob,
+        contact: fm.contact,
+        emergencyFlag: i === form.familyEmergencyIndex ? 'Y' : 'N',
+      })),
       ossId: form.ossId,
       tenantId: form.tid,
       // photo:
@@ -648,4 +803,17 @@ void [phoneRules, idRules];
   color: var(--van-text-color-2);
   padding-left: 4px;
 }
+
+.family-table { 
+  overflow-x: auto;
+  margin-bottom: 8px;
+}
+.family-row {
+  display: grid;
+  grid-template-columns: 88px 90px 128px 160px 110px 100px 50px;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 0;
+}
+.family-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
 </style>