feat: form组件替换

2025-09-03 16:28:19 +08:00
parent 64a5b41a4e
commit a29580ff1e
42 changed files with 394 additions and 453 deletions
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@ -10,7 +10,7 @@
    centered
    wrapClassName="authorized-account-modal"
    :maskClosable="false"
-    :footer="modalState !== MODAL_STATE.LOADING"
+    :footer="modalState === MODAL_STATE.LOADING ? null : footer"
    @cancel="close"
  >
    <div class="flex flex-col items-center">
--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
@ -14,8 +14,8 @@
    <div class="mb-16px t1">
      {{ `已选${accountTagList.length}个账号` }}
    </div>
-    <a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
-      <a-form-item label="编辑方式" required>
+    <Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
+      <FormItem label="编辑方式" required>
        <a-radio-group v-model="editType">
          <a-radio value="all">
            <div class="flex items-center">
@ -27,8 +27,8 @@
          </a-radio>
          <a-radio value="each">分别编辑</a-radio>
        </a-radio-group>
-      </a-form-item>
-      <a-form-item label="选择标签" required>
+      </FormItem>
+      <FormItem label="选择标签" required>
        <template v-if="editType === 'all'">
          <div class="flex items-center w-100%">
            <a-select
@ -44,7 +44,7 @@
            <span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
          </div>
        </template>
-      </a-form-item>
+      </FormItem>

      <!-- 分别编辑 -->
      <template v-if="editType === 'each'">
@ -75,7 +75,7 @@
          </template>
        </a-table>
      </template>
-    </a-form>
+    </Form>
    <template #footer>
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" size="large" @click="onSubmit">确定</Button>
@ -85,7 +85,7 @@

 <script setup>
 import { ref, reactive } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';

 import icon1 from '@/assets/img/icon-question.png';
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
@ -11,11 +11,11 @@
    centered
    @cancel="onClose"
  >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
+    <Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
        <a-input v-model="form.name" placeholder="请输入…" />
-      </a-form-item>
-    </a-form>
+      </FormItem>
+    </Form>
    <template #footer>
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@ -25,7 +25,7 @@

 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
@ -63,16 +63,14 @@ const open = (record = {}) => {
 };

 async function onSubmit() {
-  formRef.value.validate(async (errors) => {
-    if (!errors) {
-      const _fn = isEdit.value ? putGroup : postAccountGroups;
-      const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
-      const { code } = await _fn(_params);
-      if (code === 200) {
-        AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
-        emits('success');
-        onClose();
-      }
+  formRef.value.validate().then(async () => {
+    const _fn = isEdit.value ? putGroup : postAccountGroups;
+    const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
+    const { code } = await _fn(_params);
+    if (code === 200) {
+      AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
+      emits('success');
+      onClose();
    }
  });
 }
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -7,7 +7,7 @@
    v-model:open="visible"
    width="900px"
    wrapClassName="account-manage-modal"
-    :footer="false"
+    :footer="null"
    centered
    title="分组管理"
    :maskClosable="false"
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@ -10,7 +10,7 @@
    title="重新授权"
    wrapClassName="reauthorize-account-modal"
    :maskClosable="false"
-    :footer="modalState !== MODAL_STATE.LOADING"
+    :footer="modalState === MODAL_STATE.LOADING ? null : footer"
    @cancel="close"
  >
    <div class="flex flex-col items-center">
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
@ -7,11 +7,11 @@
    centered
    @cancel="onClose"
  >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
+    <Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
        <a-input v-model="form.name" placeholder="请输入…" />
-      </a-form-item>
-    </a-form>
+      </FormItem>
+    </Form>
    <template #footer>
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@ -21,7 +21,7 @@

 <script setup>
 import { ref, nextTick } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { postAccountTags, putTag } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
@ -59,8 +59,8 @@ const open = (record = {}) => {
 };

 async function onSubmit() {
-  formRef.value.validate(async (errors) => {
-    if (!errors) {
+  formRef.value.validate()
+    .then(async () => {
      const _fn = isEdit.value ? putTag : postAccountTags;
      const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
      const { code } = await _fn(_params);
@ -69,8 +69,7 @@ async function onSubmit() {
        emits('success');
        onClose();
      }
-    }
-  });
+    })
 }

 defineExpose({ open });
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
@ -7,7 +7,7 @@
    v-model:open="visible"
    width="800px"
    wrapClassName="tags-manage-modal"
-    :footer="false"
+    :footer="null"
    centered
    title="标签管理"
    :maskClosable="false"
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
@ -3,14 +3,14 @@
 .tags-manage-modal {
  border-radius: 8px;

-  .arco-modal-body {
+  .ant-modal-body {
    // padding: 24px 24px 44px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
-    .arco-btn {
+    .arcanto-btn {
      width: fit-content;
-      .arco-btn-icon {
+      .ant-btn-icon {
        line-height: 16px;
      }
    }