feat: form组件替换

src/views/components/login/index.vue

@@ -17,8 +17,8 @@
         >
           <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" class="mb-8px" />
           <span class="text-4 color-#737478">AI营销工具</span>
-          <a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
-            <a-form-item field="mobile" hide-label>
+          <Form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
+            <FormItem name="mobile">
               <a-input
                 v-model="loginForm.mobile"
                 placeholder="输入手机号"
@@ -28,8 +28,8 @@
                 @blur="validateField('mobile')"
                 @input="clearError('mobile')"
               />
-            </a-form-item>
-            <a-form-item field="captcha" hide-label>
+            </FormItem>
+            <FormItem name="captcha">
               <div
                 class="form-input border border-solid border-#d7d7d9 w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center"
               >
@@ -52,19 +52,19 @@
                   >{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
                 >
               </div>
-            </a-form-item>
-            <a-form-item hide-label class="mt-68px mb-16px">
+            </FormItem>
+            <FormItem class="mt-68px mb-16px">
               <Button
                 type="primary"
-                class="w-480 h-48 !text-16px !rounded-8px"
+                class="w-full h-48 !text-16px !rounded-8px"
                 :class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
                 :disabled="disabledSubmitBtn"
                 @click="handleSubmit"
               >
                 {{ isLogin ? '登录' : '注册并开通企业账号' }}
               </Button>
-            </a-form-item>
-          </a-form>
+            </FormItem>
+          </Form>
           <a-space class="text-12px color-#737478 justify-start items-center">
             <Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
             <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import { Checkbox, Modal, Button } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Form, FormItem } from 'ant-design-vue';
 import PuzzleVerification from './components/PuzzleVerification.vue';
 import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
 import { joinEnterpriseByInviteCode } from '@/api/all';
@@ -165,15 +165,14 @@ const formRules = {
   mobile: [
     {
       required: true,
-      message: '请填写手机号',
-      trigger: ['blur', 'change'],
-    },
-    {
-      validator: (value: string, callback: (error?: string) => void) => {
+      validator: (_rule: any, value: string) => {
+        if (!value) {
+          return Promise.reject('请填写手机号');
+        }
         if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
+          return Promise.reject('手机号格式不正确');
         } else {
-          callback();
+          return Promise.resolve();
         }
       },
       trigger: ['blur', 'change'],
@@ -182,15 +181,14 @@ const formRules = {
   captcha: [
     {
       required: true,
-      message: '请填写验证码',
-      trigger: ['blur', 'change'],
-    },
-    {
-      validator: (value: string, callback: (error?: string) => void) => {
+      validator: (_rule: any, value: string) => {
+        if (!value) {
+          return Promise.reject('请填写验证码');
+        }
         if (!/^\d{6}$/.test(value)) {
-          callback('验证码必须是6位数字');
+          return Promise.reject('验证码必须是6位数字');
         } else {
-          callback();
+          return Promise.resolve();
         }
       },
       trigger: ['blur', 'change'],
@@ -222,7 +220,7 @@ const selectAccount = (account: any, index: any) => {
 };
 
 const validateField = (field: string) => {
-  formRef.value.validateField(field);
+  formRef.value.validateFields(field);
 };
 
 const clearError = (field: string) => {
@@ -245,11 +243,9 @@ const getCode = async () => {
   // 先重置验证状态
   formRef.value.clearValidate('mobile');
 
-  const result = await formRef.value.validateField('mobile');
-  // 只有当验证通过时才会显示滑块验证
-  if (result === true || result === undefined) {
+  formRef.value.validateFields('mobile').then(() => {
     isVerificationVisible.value = true;
-  }
+  });
 };
 
 // 验证码验证通过后
@@ -258,8 +254,10 @@ const handleVerificationSubmit = async () => {
   startCountdown();
 
   try {
-    await fetchLoginCaptCha({ mobile: loginForm.mobile });
-    AMessage.success('验证码发送成功');
+    const { code, message } = await fetchLoginCaptCha({ mobile: loginForm.mobile });
+    if (code === 200) {
+      AMessage.success(message);
+    }
   } catch (error) {
     // 重置倒计时
     countdown.value = 0;

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

@@ -14,29 +14,37 @@
         <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
       </template>
     </a-table>
-    <Modal v-model:open="infoVisible" width="480px" centered title="修改企业名称" :okText="okText" @ok="handleOk">
+    <Modal
+      v-model:open="infoVisible"
+      width="480px"
+      centered
+      title="修改企业名称"
+      :okText="okText"
+      @ok="handleOk"
+      cancelText="取消"
+    >
       <p class="tips">
         企业名称只能修改2次，请谨慎操作。<span
           >（剩余{{ enterpriseInfo!.update_name_quota - enterpriseInfo!.used_update_name_count }}次）
         </span>
       </p>
-      <a-form
+      <Form
         :model="form"
         class="form"
         :label-col-props="{ span: 6, offset: 0 }"
         :wrapper-col-props="{ span: 18, offset: 0 }"
         label-align="left"
       >
-        <a-form-item required field="name" label="新企业名称">
+        <FormItem required name="name" label="新企业名称">
           <a-input v-model.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
-        </a-form-item>
-      </a-form>
+        </FormItem>
+      </Form>
     </Modal>
     <CustomerServiceModal v-model:open="customerServiceVisible" centered />
   </div>
 </template>
 <script setup lang="ts">
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import { ref, reactive, computed } from 'vue';

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

@@ -20,13 +20,13 @@
       </template>
     </a-table>
     <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
-      <a-form
+      <Form
         class="form"
         :model="userInfoForm"
         :label-col-props="{ span: 3, offset: 0 }"
         :wrapper-col-props="{ span: 21, offset: 0 }"
       >
-        <a-form-item field="head_image" label="头像">
+        <FormItem name="head_image" label="头像">
           <div class="flex items-center">
             <a-avatar :image-url="userInfoForm.file_url" :size="48" />
             <span class="upload-button" @click="triggerFileInput">
@@ -40,17 +40,17 @@
               <Button><icon-upload />上传新头像</Button>
             </span>
           </div>
-        </a-form-item>
-        <a-form-item field="name" label="昵称">
+        </FormItem>
+        <FormItem name="name" label="昵称">
           <a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
-        </a-form-item>
-      </a-form>
+        </FormItem>
+      </Form>
     </Modal>
     <Modal v-model:open="imageVisible" centered title="头像裁剪">
       <VueCropper></VueCropper>
     </Modal>
     <Modal v-model:open="mobileVisible" centered title="修改手机号" @ok="handleUpdateMobile">
-      <a-form
+      <Form
         ref="formRef"
         :model="form"
         class="form"
@@ -59,18 +59,18 @@
         :wrapper-col-props="{ span: 19, offset: 0 }"
         label-align="left"
       >
-        <a-form-item required field="mobile" label="新手机号">
+        <FormItem required name="mobile" label="新手机号">
           <a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
-        </a-form-item>
-        <a-form-item required field="captcha" label="获取验证码">
+        </FormItem>
+        <FormItem required name="captcha" label="获取验证码">
           <a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
             <template #suffix>
               <span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
               <span v-else>{{ countdown }}s</span>
             </template>
           </a-input>
-        </a-form-item>
-      </a-form>
+        </FormItem>
+      </Form>
       <PuzzleVerification
         :show="verificationVisible"
         @submit="handleVerificationSubmit"
@@ -80,7 +80,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } 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';