feat: 增加新字段

rsbuild.config.ts

@@ -7,6 +7,9 @@ import Components from 'unplugin-vue-components/rspack';
 
 // Docs: https://rsbuild.rs/config/
 export default defineConfig({
+  html: {
+    title: '安泰新员工',
+  },
   output: {
     assetPrefix: '/mobile/',
   },

src/App.vue

 <template>
   <div class="page">
-    <van-form @submit="onSubmit">
+    <van-form @submit="onSubmit" required="auto">
       <van-cell-group inset title="基本信息">
         <van-field
           v-model="form.name"
@@ -53,7 +53,11 @@
           label="籍贯"
           placeholder="请输入籍贯"
           :rules="[{ required: true, message: '请输入籍贯' }]"
-        />
+        >
+          <template #extra>
+            <div class="extra">如：**省**市</div>
+          </template>
+        </van-field>
         <van-field
           v-model="form.maritalStatus"
           name="maritalStatus"
@@ -113,7 +117,11 @@
           label="紧急联系人"
           placeholder="请输入紧急联系人"
           :rules="[{ required: true, message: '请输入紧急联系人' }]"
-        />
+        >
+          <template #extra>
+            <div class="extra">填写姓名</div>
+          </template>
+        </van-field>
         <van-field
           v-model="form.emergencyContactPhone"
           name="emergencyContactPhone"
@@ -134,7 +142,11 @@
           autosize
           placeholder="请输入家庭地址"
           :rules="[{ required: true, message: '请输入家庭地址' }]"
-        />
+        >
+          <template #extra>
+            <div class="extra">例如：**市**区**街道**小区*号楼*单位*0*（具体到门牌号，写现居住地址)</div>
+          </template>
+        </van-field>
         <van-field
           v-model="form.householdRegistrationAddress"
           name="householdRegistrationAddress"
@@ -144,7 +156,111 @@
           autosize
           placeholder="请输入户口所在地"
           :rules="[{ required: true, message: '请输入户口所在地' }]"
+        >
+          <template #extra>
+            <div class="extra">填写户口所在地派出所</div>
+          </template>
+        </van-field>
+      </van-cell-group>
+    
+      <van-cell-group inset title="工作与资质">
+        <van-field
+          v-model="form.workStartDisplay"
+          name="workStartDate"
+          label="参加工作时间"
+          placeholder="请选择"
+          readonly
+          is-link
+          @click="showWorkStartPicker = true"
+        />
+        <van-field
+          v-model="form.professionalTitle"
+          name="professionalTitle"
+          label="职称情况"
+          placeholder="请输入职称情况"
+        />
+        <van-field
+          v-model="form.certificateStatus"
+          name="certificateStatus"
+          label="证书情况"
+          placeholder="请输入证书情况"
+        />
+      </van-cell-group>
+
+      <van-cell-group inset title="教育经历（全日制）">
+        <van-field
+          v-model="form.fulltimeSchool"
+          name="fulltimeSchool"
+          label="毕业院校"
+          placeholder="请输入毕业院校"
+        />
+        <van-field
+          v-model="form.fulltimeMajor"
+          name="fulltimeMajor"
+          label="专业"
+          placeholder="请输入专业"
+        />
+        <van-field
+          v-model="form.fulltimeGraduationDate"
+          name="fulltimeGraduationDate"
+          label="毕业时间"
+          placeholder="请选择毕业时间"
+          readonly
+          is-link
+          @click="showFullGraduatePicker = true"
+        />
+        <van-field
+          v-model="form.fulltimeDegree"
+          name="fulltimeDegree"
+          label="学位"
+          placeholder="请输入学位"
+        />
+      </van-cell-group>
+
+      <van-cell-group inset title="教育经历（非全日制）">
+        <van-field
+          v-model="form.nonFulltimeSchool"
+          name="nonFulltimeSchool"
+          label="毕业院校"
+          placeholder="请输入毕业院校"
+        />
+        <van-field
+          v-model="form.nonFulltimeMajor"
+          name="nonFulltimeMajor"
+          label="专业"
+          placeholder="请输入专业"
+        />
+        <van-field
+          v-model="form.nonFulltimeGraduationDate"
+          name="nonFulltimeGraduationDate"
+          label="毕业时间"
+          placeholder="请选择毕业时间"
+          readonly
+          is-link
+          @click="showPartGraduatePicker = true"
         />
+        <van-field
+          v-model="form.nonFulltimeDegree"
+          name="nonFulltimeDegree"
+          label="学位"
+          placeholder="请输入学位"
+        />
+      </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>
 
       <div class="actions">
@@ -167,6 +283,41 @@
         @cancel="showBirthPicker = false"
       />
     </van-popup>
+    <van-popup v-model:show="showWorkStartPicker" position="bottom">
+      <van-date-picker
+        v-model="workStartValues"
+        title="选择年月"
+        :min-date="workStartMinDate"
+        :max-date="workStartMaxDate"
+        :columns-type="['year','month']"
+        @confirm="onWorkStartConfirm"
+        @cancel="showWorkStartPicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showFullGraduatePicker" position="bottom">
+      <van-date-picker
+        v-model="fullGraduateValues"
+        title="选择年月"
+        :min-date="graduationMinDate"
+        :max-date="graduationMaxDate"
+        :columns-type="['year','month']"
+        @confirm="onFullGraduateConfirm"
+        @cancel="showFullGraduatePicker = false"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showPartGraduatePicker" position="bottom">
+      <van-date-picker
+        v-model="partGraduateValues"
+        title="选择年月"
+        :min-date="graduationMinDate"
+        :max-date="graduationMaxDate"
+        :columns-type="['year','month']"
+        @confirm="onPartGraduateConfirm"
+        @cancel="showPartGraduatePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -195,10 +346,34 @@ const form = reactive({
   emergencyContact: '',
   emergencyContactPhone: '',
   householdRegistrationAddress: '',
+  workStartDisplay: '',
+  professionalTitle: '',
+  certificateStatus: '',
+  fulltimeSchool: '',
+  fulltimeMajor: '',
+  fulltimeGraduationDate: '',
+  fulltimeDegree: '',
+  nonFulltimeSchool: '',
+  nonFulltimeMajor: '',
+  nonFulltimeGraduationDate: '',
+  nonFulltimeDegree: '',
+  externalResume: '',
   tid: '',
 });
-const minDate = new Date(1960, 0, 1);
-const maxDate = new Date(2025, 0, 1);
+const _today = new Date();
+const _todayYear = _today.getFullYear();
+
+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 workStartMinDate = new Date(_todayYear - 50, 1);
+const workStartMaxDate = _today;
 
 const phoneRules = [
   { required: true, message: '请填写手机号码' },
@@ -217,6 +392,9 @@ const showPoliticalPicker = ref(false);
 const showBirthPicker = ref(false);
 const submitting = ref(false);
 const submitSuccess = ref(false);
+const showWorkStartPicker = ref(false);
+const showFullGraduatePicker = ref(false);
+const showPartGraduatePicker = ref(false);
 // function beforeRead(file: File | File[]) {
 //   const files = Array.isArray(file) ? file : [file];
 //   const limit = 20 * 1024 * 1024;
@@ -226,8 +404,8 @@ const submitSuccess = ref(false);
 //   }
 //   return ok;
 // }
-async function afterRead(item: UploaderFileListItem) {
-  // const items = Array.isArray(file) ? file : [file];
+async function afterRead(items: UploaderFileListItem | UploaderFileListItem[]) {
+  const item = Array.isArray(items) ? items[0] : items;
   // for (const item of items) {
   try {
     const fd = new FormData();
@@ -276,6 +454,7 @@ const politicalOptions = [
   { value: '2', text: '预备党员' },
   { value: '3', text: '群众' },
   { value: '4', text: '团员' },
+  { value: '5', text: '入党积极分子' },
 ];
 
 // const genderColumns = genderOptions.map((o) => ({
@@ -291,7 +470,10 @@ const politicalOptions = [
 //   value: o.key,
 // }));
 
-const birthValues = ref<string[]>(['2000', '01', '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']);
 
 void [ageRules, politicalOptions, birthValues];
 
@@ -311,6 +493,21 @@ function onBirthConfirm(payload: { selectedValues: string[] }) {
   form.birthDate = `${y}-${m}-${d}`;
   showBirthPicker.value = false;
 }
+function onWorkStartConfirm(payload: { selectedValues: string[] }) {
+  const [y, m] = payload.selectedValues;
+  form.workStartDisplay = `${y}-${m}`;
+  showWorkStartPicker.value = false;
+}
+function onFullGraduateConfirm(payload: { selectedValues: string[] }) {
+  const [y, m] = payload.selectedValues;
+  form.fulltimeGraduationDate = `${y}-${m}`;
+  showFullGraduatePicker.value = false;
+}
+function onPartGraduateConfirm(payload: { selectedValues: string[] }) {
+  const [y, m] = payload.selectedValues;
+  form.nonFulltimeGraduationDate = `${y}-${m}`;
+  showPartGraduatePicker.value = false;
+}
 
 watch(
   () => form.birthDate,
@@ -352,6 +549,18 @@ async function onSubmit() {
       emergencyContact: form.emergencyContact,
       emergencyContactPhone: form.emergencyContactPhone,
       householdRegistrationAddress: form.householdRegistrationAddress,
+      workStartDate: form.workStartDisplay + '-01',
+      professionalTitle: form.professionalTitle,
+      certificateStatus: form.certificateStatus,
+      fulltimeSchool: form.fulltimeSchool,
+      fulltimeMajor: form.fulltimeMajor,
+      fulltimeGraduationDate: form.fulltimeGraduationDate+ '-01',
+      fulltimeDegree: form.fulltimeDegree,
+      nonFulltimeSchool: form.nonFulltimeSchool,
+      nonFulltimeMajor: form.nonFulltimeMajor,
+      nonFulltimeGraduationDate: form.nonFulltimeGraduationDate+ '-01',
+      nonFulltimeDegree: form.nonFulltimeDegree,
+      externalResume: form.externalResume,
       ossId: form.ossId,
       tenantId: form.tid,
       // photo:
@@ -404,6 +613,20 @@ void [phoneRules, idRules];
   box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
 }
 
+.extra {
+  clear: both;
+  color: rgba(0, 0, 0, 0.45);
+  margin-left: var(--van-field-label-width);
+  font-size: 14px;
+  line-height: 1.57;
+  width: 100%;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--van-border-color);
+}
+
+:deep(.van-field__body) { flex-wrap: wrap; }
+
 :deep(.van-cell-group__title) {
   font-size: 14px;
   color: var(--van-text-color-2);