feat: input、textare组件替换

src/views/components/management/person/index.vue

@@ -22,6 +22,7 @@
     <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
       <Form
         class="form"
+        :rules="rules"
         :model="userInfoForm"
         :label-col-props="{ span: 3, offset: 0 }"
         :wrapper-col-props="{ span: 21, offset: 0 }"
@@ -42,7 +43,7 @@
           </div>
         </FormItem>
         <FormItem name="name" label="昵称">
-          <a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
+          <Input v-model:value="userInfoForm.name" placeholder="请输入昵称" />
         </FormItem>
       </Form>
     </Modal>
@@ -55,20 +56,20 @@
         :model="form"
         class="form"
         :rules="formRules"
-        :label-col-props="{ span: 5, offset: 0 }"
-        :wrapper-col-props="{ span: 19, offset: 0 }"
-        label-align="left"
+        labelAlign="right"
+        :labelCol="{ span: 4 }"
+        :wrapperCol="{ span: 20 }"
       >
         <FormItem required name="mobile" label="新手机号">
-          <a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
+          <Input v-model:value="form.mobile" size="small" placeholder="请输入新的手机号" />
         </FormItem>
         <FormItem required name="captcha" label="获取验证码">
-          <a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
+          <Input v-model:value="form.captcha" size="small" placeholder="请输入验证码">
             <template #suffix>
               <span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
               <span v-else>{{ countdown }}s</span>
             </template>
-          </a-input>
+          </Input>
         </FormItem>
       </Form>
       <PuzzleVerification
@@ -80,7 +81,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button, Form, FormItem } from 'ant-design-vue';
+import { Button, Form, FormItem, Input } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';
@@ -125,35 +126,32 @@ const dataSource = computed(() => {
 const formRules = {
   mobile: [
     {
-      required: true,
-      message: '请填写手机号',
-      trigger: ['blur', 'change'],
-    },
-    {
-      validator: (value: string, callback: (error?: string) => void) => {
-        if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
-        } else {
-          callback();
+      validator: (_rule: any, value: string) => {
+        if (!value) {
+          return Promise.reject('请填写手机号');
         }
+        if (!/^1[3-9]\d{9}$/.test(value)) {
+          return Promise.reject('手机号格式不正确');
+        }
+        return Promise.resolve();
       },
+      required: true,
       trigger: ['blur', 'change'],
     },
   ],
   captcha: [
     {
       required: true,
-      message: '请填写验证码',
-      trigger: ['blur', 'change'],
-    },
-    {
-      validator: (value: string, callback: (error?: string) => void) => {
-        if (!/^\d{6}$/.test(value)) {
-          callback('验证码必须是6位数字');
-        } else {
-          callback();
+      validator: (rule, value) => {
+        if (!value) {
+          return Promise.reject('请填写验证码');
         }
+        if (!/^\d{6}$/.test(value)) {
+          return Promise.reject('验证码必须是6位数字');
+        }
+        return Promise.resolve();
       },
+
       trigger: ['blur', 'change'],
     },
   ],