fix: 增加axios

components.d.ts

@@ -18,6 +18,8 @@ declare module 'vue' {
     VanForm: typeof import('vant/es')['Form']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRadio: typeof import('vant/es')['Radio']
+    VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanUploader: typeof import('vant/es')['Uploader']
   }
 }

package.json

@@ -11,6 +11,7 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "vant": "^4.9.21",
     "vue": "^3.5.24"
   },

rsbuild.config.ts

@@ -22,4 +22,11 @@ export default defineConfig({
       ],
     },
   },
+  server: {
+    proxy: {
+      // http://localhost:3000/api -> http://localhost:3000/api
+      // http://localhost:3000/api/foo -> http://localhost:3000/api/foo
+      '/api': 'http://localhost:9000/api',
+    },
+  },
 });

src/App.vue

@@ -10,15 +10,18 @@
           :rules="[{ required: true, message: '请填写姓名' }]"
         />
         <van-field
-          v-model="form.genderText"
+          v-model="form.gender"
           name="gender"
           label="性别"
-          placeholder="请选择性别"
-          readonly
-          is-link
           :rules="[{ required: true, message: '请选择性别' }]"
-          @click="showGenderPicker = true"
-        />
+        >
+          <template #input>
+            <van-radio-group v-model="form.gender" direction="horizontal">
+              <van-radio name="0">男</van-radio>
+              <van-radio name="1">女</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
         <van-field
           v-model="form.birthDate"
           name="birthDate"
@@ -38,8 +41,8 @@
           :rules="ageRules"
         />
         <van-field
-          v-model="form.nation"
-          name="nation"
+          v-model="form.ethnicity"
+          name="ethnicity"
           label="民族"
           placeholder="请输入民族"
         />
@@ -50,14 +53,19 @@
           placeholder="请输入籍贯"
         />
         <van-field
-          v-model="form.maritalText"
+          v-model="form.maritalStatus"
           name="maritalStatus"
           label="婚姻状况"
-          placeholder="请选择婚姻状况"
-          readonly
-          is-link
-          @click="showMaritalPicker = true"
-        />
+          :rules="[{ required: true, message: '请选择婚姻状况' }]"
+        >
+          <template #input>
+            <van-radio-group v-model="form.maritalStatus" direction="horizontal">
+              <van-radio name="1">未婚</van-radio>
+              <van-radio name="2">已婚</van-radio>
+              <van-radio name="3">离异</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
         <van-field
           v-model="form.politicalText"
           name="politicalStatus"
@@ -73,8 +81,8 @@
           </template>
         </van-field>
         <van-field
-          v-model="form.idNumber"
-          name="idNumber"
+          v-model="form.idCardNumber"
+          name="idCardNumber"
           label="身份证号码"
           placeholder="请输入身份证号码"
           :rules="idRules"
@@ -83,8 +91,8 @@
 
       <van-cell-group inset title="联系信息">
         <van-field
-          v-model="form.phone"
-          name="phone"
+          v-model="form.phoneNumber"
+          name="phoneNumber"
           type="tel"
           label="手机号码"
           placeholder="请输入手机号码"
@@ -97,8 +105,8 @@
           placeholder="请输入紧急联系人"
         />
         <van-field
-          v-model="form.emergencyPhone"
-          name="emergencyPhone"
+          v-model="form.emergencyContactPhone"
+          name="emergencyContactPhone"
           type="tel"
           label="紧急联系人电话"
           placeholder="请输入紧急联系人电话"
@@ -108,8 +116,8 @@
 
       <van-cell-group inset title="地址信息">
         <van-field
-          v-model="form.address"
-          name="address"
+          v-model="form.homeAddress"
+          name="homeAddress"
           label="家庭地址"
           type="textarea"
           rows="2"
@@ -117,8 +125,8 @@
           placeholder="请输入家庭地址"
         />
         <van-field
-          v-model="form.householdRegister"
-          name="householdRegister"
+          v-model="form.householdRegistrationAddress"
+          name="householdRegistrationAddress"
           label="户口所在地"
           type="textarea"
           rows="2"
@@ -128,19 +136,13 @@
       </van-cell-group>
 
       <div class="actions">
-        <van-button round block type="primary" native-type="submit">提交</van-button>
+        <van-button round block type="primary" :loading="submitting" native-type="submit">提交</van-button>
       </div>
     </van-form>
-    <van-popup v-model:show="showGenderPicker" position="bottom">
-      <van-picker :columns="genderColumns" @confirm="onGenderConfirm" @cancel="showGenderPicker = false" />
-    </van-popup>
-
-    <van-popup v-model:show="showMaritalPicker" position="bottom">
-      <van-picker :columns="maritalColumns" @confirm="onMaritalConfirm" @cancel="showMaritalPicker = false" />
-    </van-popup>
+    
 
     <van-popup v-model:show="showPoliticalPicker" position="bottom">
-      <van-picker :columns="politicalColumns" @confirm="onPoliticalConfirm" @cancel="showPoliticalPicker = false" />
+      <van-picker :columns="politicalOptions" @confirm="onPoliticalConfirm" @cancel="showPoliticalPicker = false" />
     </van-popup>
 
     <van-popup v-model:show="showBirthPicker" position="bottom">
@@ -156,26 +158,28 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
+import axios from 'axios';
+import { showSuccessToast, showFailToast } from 'vant';
 
 const form = reactive({
   name: '',
-  phone: '',
-  gender: '',
-  genderText: '',
+  phoneNumber: '',
+  gender: '0',
+  genderText: '男',
   photoList: [] as unknown[],
-  idNumber: '',
+  idCardNumber: '',
   birthDate: '',
   age: '' as number | '',
-  address: '',
-  nation: '',
+  homeAddress: '',
+  ethnicity: '',
   nativePlace: '',
-  maritalStatus: '',
-  maritalText: '',
+  maritalStatus: '1',
+  maritalText: '未婚',
   politicalStatus: '',
   politicalText: '',
   emergencyContact: '',
-  emergencyPhone: '',
-  householdRegister: '',
+  emergencyContactPhone: '',
+  householdRegistrationAddress: '',
 });
 
 const phoneRules = [
@@ -190,61 +194,36 @@ const idRules = [
 
 const ageRules = [{ pattern: /^\d{1,3}$/, message: '年龄格式错误' }];
 
-const showGenderPicker = ref(false);
-const showMaritalPicker = ref(false);
+// 性别与婚姻状况改为单选，不再使用选择器弹窗
 const showPoliticalPicker = ref(false);
 const showBirthPicker = ref(false);
+const submitting = ref(false);
 
-const genderOptions = [
-  { key: '0', value: '男' },
-  { key: '1', value: '女' },
-];
-const maritalOptions = [
-  { key: '1', value: '未婚' },
-  { key: '2', value: '已婚' },
-  { key: '3', value: '离异' },
-];
 const politicalOptions = [
-  { key: '1', value: '党员' },
-  { key: '2', value: '预备党员' },
-  { key: '3', value: '群众' },
-  { key: '4', value: '团员' },
+  { value: '1', text: '党员' },
+  { value: '2', text: '预备党员' },
+  { value: '3', text: '群众' },
+  { value: '4', text: '团员' },
 ];
 
-const genderColumns = genderOptions.map((o) => ({
-  text: o.value,
-  value: o.key,
-}));
-const maritalColumns = maritalOptions.map((o) => ({
-  text: o.value,
-  value: o.key,
-}));
-const politicalColumns = politicalOptions.map((o) => ({
-  text: o.value,
-  value: o.key,
-}));
+// const genderColumns = genderOptions.map((o) => ({
+//   text: o.value,
+//   value: o.key,
+// }));
+// const maritalColumns = maritalOptions.map((o) => ({
+//   text: o.value,
+//   value: o.key,
+// }));
+// const politicalColumns = politicalOptions.map((o) => ({
+//   text: o.value,
+//   value: o.key,
+// }));
 
 const birthValues = ref<string[]>([]);
 
-void [ageRules, genderColumns, maritalColumns, politicalColumns, birthValues];
+void [ageRules, politicalOptions, birthValues];
 
-function onGenderConfirm(payload: {
-  selectedOptions: { text: string; value: string }[];
-}) {
-  const opt = payload.selectedOptions[0];
-  form.gender = opt.value;
-  form.genderText = opt.text;
-  showGenderPicker.value = false;
-}
-
-function onMaritalConfirm(payload: {
-  selectedOptions: { text: string; value: string }[];
-}) {
-  const opt = payload.selectedOptions[0];
-  form.maritalStatus = opt.value;
-  form.maritalText = opt.text;
-  showMaritalPicker.value = false;
-}
+// 性别与婚姻状况改为单选，不再需要确认回调
 
 function onPoliticalConfirm(payload: {
   selectedOptions: { text: string; value: string }[];
@@ -278,13 +257,47 @@ watch(
   },
 );
 
-function onSubmit() {
-  return;
+async function onSubmit() {
+  if (submitting.value) return;
+  submitting.value = true;
+  try {
+    const payload = {
+      name: form.name,
+      phoneNumber: form.phoneNumber,
+      gender: form.gender,
+      birthDate: form.birthDate,
+      age: form.age,
+      ethnicity: form.ethnicity,
+      nativePlace: form.nativePlace,
+      maritalStatus: form.maritalStatus,
+      politicalStatus: form.politicalStatus,
+      idCardNumber: form.idCardNumber,
+      homeAddress: form.homeAddress,
+      emergencyContact: form.emergencyContact,
+      emergencyContactPhone: form.emergencyContactPhone,
+      householdRegistrationAddress: form.householdRegistrationAddress,
+      photo: Array.isArray(form.photoList)
+        ? form.photoList.map((i: any) => i.url || i.content || '')
+        : [],
+    };
+    const { data: responseData, status } = await axios.post('/api/employee/baseInfo', payload);
+    if (status >= 200 && status < 300) {
+      if (responseData.success) {
+        showSuccessToast('提交成功');
+      } else {
+        showFailToast('提交失败');
+      }
+    } else {
+      showFailToast('提交失败');
+    }
+  } catch (e) {
+    showFailToast('提交失败');
+  } finally {
+    submitting.value = false;
+  }
 }
 
 void [
-  onGenderConfirm,
-  onMaritalConfirm,
   onPoliticalConfirm,
   onBirthConfirm,
   onSubmit,