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"
   },

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      axios:
+        specifier: ^1.13.2
+        version: 1.13.2
       vant:
         specifier: ^4.9.21
         version: 4.9.21(vue@3.5.25(typescript@5.9.3))
@@ -395,6 +398,12 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
   baseline-browser-mapping@2.8.31:
     resolution: {integrity: sha512-a28v2eWrrRWPpJSzxc+mKwm0ZtVx/G8SepdQZDArnXYU/XS+IF6mp8aB/4E+hH1tyGCoDo3KlUCdlSxGDsRkAw==}
     hasBin: true
@@ -415,6 +424,10 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
   caniuse-lite@1.0.30001757:
     resolution: {integrity: sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==}
 
@@ -437,6 +450,10 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -465,6 +482,14 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   electron-to-chromium@1.5.260:
     resolution: {integrity: sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==}
 
@@ -476,9 +501,25 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -535,11 +576,35 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -547,6 +612,10 @@ packages:
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -554,6 +623,18 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -598,6 +679,10 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -654,6 +739,9 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -1246,6 +1334,16 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  asynckit@0.4.0: {}
+
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   baseline-browser-mapping@2.8.31: {}
 
   binary-extensions@2.3.0: {}
@@ -1264,6 +1362,11 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
   caniuse-lite@1.0.30001757: {}
 
   chalk@4.1.2:
@@ -1291,6 +1394,10 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@2.20.3: {}
 
   confbox@0.1.8: {}
@@ -1307,6 +1414,14 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
+  delayed-stream@1.0.0: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   electron-to-chromium@1.5.260: {}
 
   enhanced-resolve@5.18.3:
@@ -1316,8 +1431,23 @@ snapshots:
 
   entities@4.5.0: {}
 
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
   es-module-lexer@1.7.0: {}
 
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   escalade@3.2.0: {}
 
   escape-string-regexp@5.0.0: {}
@@ -1357,19 +1487,61 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
   fsevents@2.3.3:
     optional: true
 
+  function-bind@1.1.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
 
   glob-to-regexp@0.4.1: {}
 
+  gopd@1.2.0: {}
+
   graceful-fs@4.2.11: {}
 
   has-flag@4.0.0: {}
 
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -1408,6 +1580,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  math-intrinsics@1.1.0: {}
+
   merge-stream@2.0.0: {}
 
   mime-db@1.52.0: {}
@@ -1459,6 +1633,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  proxy-from-env@1.1.0: {}
+
   quansync@0.2.11: {}
 
   randombytes@2.1.0:

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,