fix: 个人履历改为表格填写

src/App.vue

@@ -260,23 +260,63 @@
         />
       </van-cell-group>
 
-      <van-cell-group inset title="外部个人履历">
-        <van-field
-          v-model="form.externalResume"
-          name="externalResume"
-          label="履历"
-          type="textarea"
-          rows="3"
-          autosize
-          placeholder="例如：**年**月-**年**月 在何单位担任什么职务"
-        >
-          <template #extra>
-            <div class="extra">如：**年**月-**年**月 在何单位担任什么职务</div>
-          </template>
-        </van-field>
+      <van-cell-group inset>
+        <template #title>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span>外部个人履历</span>
+            <span style="font-size: 12px; color: #969799; font-weight: normal;">向右滑动填写更多<van-icon name="arrow-double-right" /></span>
+          </div>
+        </template>
+        <div class="resume-table" v-if="form.externalResumeItems.length">
+          <div class="resume-row resume-header">
+            <div>开始年月</div>
+            <div>结束年月</div>
+            <div>单位名称</div>
+            <div>职务</div>
+            <div>操作</div>
+          </div>
+          <div class="resume-row" v-for="(item, i) in form.externalResumeItems" :key="i">
+            <div>
+              <van-field
+                v-model="item.startDate"
+                placeholder="开始年月"
+                readonly
+                is-link
+                @click="onResumeStartClick(i)"
+              />
+            </div>
+            <div>
+              <van-field
+                v-model="item.endDate"
+                placeholder="结束年月"
+                readonly
+                is-link
+                @click="onResumeEndClick(i)"
+              />
+            </div>
+            <div>
+              <van-field v-model="item.company" placeholder="单位名称" />
+            </div>
+            <div>
+              <van-field v-model="item.position" placeholder="职务" />
+            </div>
+            <div>
+              <van-button size="small" type="danger" plain @click="removeResumeItem(i)">删除</van-button>
+            </div>
+          </div>
+        </div>
+        <div class="resume-actions">
+          <van-button block type="success" icon="newspaper" @click="addResumeItem">新增履历</van-button>
+        </div>
       </van-cell-group>
 
-      <van-cell-group  inset title="家庭主要成员">
+      <van-cell-group inset>
+        <template #title>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span>家庭主要成员</span>
+            <span style="font-size: 12px; color: #969799; font-weight: normal;">向右滑动填写更多<van-icon name="arrow-double-right" /></span>
+          </div>
+        </template>
         <div class="family-table" v-if="form.familyMembers.length">
           <div class="family-row family-header">
             <div>关系</div>
@@ -329,12 +369,11 @@
             </div>
           </div>
         </div>
+        <div class="family-actions">
+          <van-button block type="success" icon="friends" @click="addFamilyMember">新增家庭成员</van-button>
+        </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>
@@ -403,6 +442,29 @@
     <van-popup v-model:show="showFamilyRelationPicker" position="bottom">
       <van-picker :columns="relationOptions" @confirm="onFamilyRelationConfirm" @cancel="showFamilyRelationPicker = false" />
     </van-popup>
+
+    <van-popup v-model:show="showResumeStartPicker" position="bottom">
+      <van-date-picker
+        v-model="resumeStartValues"
+        title="选择开始年月"
+        :min-date="workStartMinDate"
+        :max-date="workStartMaxDate"
+        :columns-type="['year','month']"
+        @confirm="onResumeStartConfirm"
+        @cancel="showResumeStartPicker = false"
+      />
+    </van-popup>
+    <van-popup v-model:show="showResumeEndPicker" position="bottom">
+      <van-date-picker
+        v-model="resumeEndValues"
+        title="选择结束年月"
+        :min-date="workStartMinDate"
+        :max-date="workStartMaxDate"
+        :columns-type="['year','month']"
+        @confirm="onResumeEndConfirm"
+        @cancel="showResumeEndPicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -419,6 +481,13 @@ interface FamilyMemberModel {
   contact: string;
 }
 
+interface ResumeItemModel {
+  startDate: string;
+  endDate: string;
+  company: string;
+  position: string;
+}
+
 const form = reactive({
   name: '',
   phoneNumber: '',
@@ -452,7 +521,7 @@ const form = reactive({
   nonFulltimeMajor: '',
   nonFulltimeGraduationDate: '',
   nonFulltimeDegree: '',
-  externalResume: '',
+  externalResumeItems: [] as Array<ResumeItemModel>,
   familyMembers: [] as Array<FamilyMemberModel>,
   familyEmergencyIndex: -1,
   tid: '',
@@ -491,6 +560,13 @@ const showFullGraduatePicker = ref(false);
 const showPartGraduatePicker = ref(false);
 const showFamilyBirthPicker = ref(false);
 const showFamilyRelationPicker = ref(false);
+
+const showResumeStartPicker = ref(false);
+const showResumeEndPicker = ref(false);
+const activeResumeIndex = ref(-1);
+const resumeStartValues = ref<string[]>([_todayYear - 5 + '', '01']);
+const resumeEndValues = ref<string[]>([_todayYear + '', '01']);
+
 // function beforeRead(file: File | File[]) {
 //   const files = Array.isArray(file) ? file : [file];
 //   const limit = 20 * 1024 * 1024;
@@ -670,6 +746,47 @@ function onFamilyRelationConfirm(payload: {
   showFamilyRelationPicker.value = false;
 }
 
+function addResumeItem() {
+  form.externalResumeItems.push({ startDate: '', endDate: '', company: '', position: '' });
+  nextTick(() => {
+    const el = document.scrollingElement || document.documentElement;
+    window.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+  });
+}
+
+function removeResumeItem(i: number) {
+  if (i < 0 || i >= form.externalResumeItems.length) return;
+  form.externalResumeItems.splice(i, 1);
+}
+
+function onResumeStartClick(i: number) {
+  activeResumeIndex.value = i;
+  showResumeStartPicker.value = true;
+}
+
+function onResumeStartConfirm(payload: { selectedValues: string[] }) {
+  const [y, m] = payload.selectedValues;
+  const idx = activeResumeIndex.value;
+  if (idx >= 0 && form.externalResumeItems[idx]) {
+    form.externalResumeItems[idx].startDate = `${y}年${m}月`;
+  }
+  showResumeStartPicker.value = false;
+}
+
+function onResumeEndClick(i: number) {
+  activeResumeIndex.value = i;
+  showResumeEndPicker.value = true;
+}
+
+function onResumeEndConfirm(payload: { selectedValues: string[] }) {
+  const [y, m] = payload.selectedValues;
+  const idx = activeResumeIndex.value;
+  if (idx >= 0 && form.externalResumeItems[idx]) {
+    form.externalResumeItems[idx].endDate = `${y}年${m}月`;
+  }
+  showResumeEndPicker.value = false;
+}
+
 watch(
   () => form.birthDate,
   (v) => {
@@ -695,6 +812,17 @@ async function onSubmit() {
   if (submitting.value) return;
   submitting.value = true;
   try {
+    let externalResumeValue = '';
+    if (form.externalResumeItems && form.externalResumeItems.length > 0) {
+      for (const item of form.externalResumeItems) {
+        if (!item.startDate || !item.endDate || !item.company || !item.position) {
+          showFailToast('个人履历填写不全，请检查！');
+          submitting.value = false;
+          return;
+        }
+        externalResumeValue += `${item.startDate}-${item.endDate} 在${item.company}担任${item.position}职务；\n`;
+      }
+    }
     const payload = {
       name: form.name,
       phoneNumber: form.phoneNumber,
@@ -723,7 +851,7 @@ async function onSubmit() {
       nonFulltimeMajor: form.nonFulltimeMajor,
       nonFulltimeGraduationDate: form.nonFulltimeGraduationDate ? form.nonFulltimeGraduationDate + '-01' : form.nonFulltimeGraduationDate,
       nonFulltimeDegree: form.nonFulltimeDegree,
-      externalResume: form.externalResume,
+      externalResume: externalResumeValue,
       familyMembers: form.familyMembers.map((fm, i) => ({
         relation: fm.relation,
         name: fm.name,
@@ -816,4 +944,17 @@ void [phoneRules, idRules];
   padding: 6px 0;
 }
 .family-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
+
+.resume-table {
+  overflow-x: auto;
+  margin-bottom: 8px;
+}
+.resume-row {
+  display: grid;
+  grid-template-columns: 110px 110px 160px 120px 60px;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 0;
+}
+.resume-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
 </style>