feat: modal组件替换

2025-09-03 12:04:15 +08:00
parent db67274583
commit 64a5b41a4e
54 changed files with 358 additions and 278 deletions
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 11:44:17
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑分组' : '添加新分组'"
-    modal-class="account-manage-modal"
+    wrapClassName="account-manage-modal"
    width="400px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
@ -19,12 +20,12 @@
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

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

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
@ -3,7 +3,7 @@
 * @Date: 2025-06-26 11:45:05
 -->
 <template>
-  <a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <Modal v-model:open="visible" centered title="删除分组" width="400px" wrapClassName="account-manage-modal" @cancel="onClose">
    <div class="flex items-center mb-24px">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
@ -12,12 +12,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px danger-btn" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deletePlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="900px"
-    modal-class="put-account-group-manage-modal"
+    wrapClassName="put-account-group-manage-modal"
    :footer="false"
    title="分组管理"
-    :mask-closable="false"
-    @close="close"
+    centered
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex items-center justify-between mb-16px">
      <div class="filter-row-item flex items-center">
@ -75,12 +76,12 @@

    <AddGroup ref="addGroupRef" @success="update" />
    <DeleteGroup ref="deleteGroupRef" @success="update" />
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';

--- a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 17:44:16
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isBatch ? '批量删除账户' : '删除账户'"
    width="480px"
-    modal-class="account-manage-modal"
-    @close="onClose"
+    centered
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
@ -18,10 +19,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import { ref } from 'vue';
 import { Button } from 'ant-design-vue';
 import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
@ -3,7 +3,14 @@
 * @Date: 2025-06-27 14:41:20
 -->
 <template>
-  <a-modal v-model:visible="visible" title="暂停同步" width="480px" modal-class="account-manage-modal" @close="onClose">
+  <Modal
+    v-model:open="visible"
+    title="暂停同步"
+    width="480px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+    centered
+  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
@ -12,7 +19,7 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑账户' : '添加账户'"
-    modal-class="add-put-account-modal"
+    wrapClassName="add-put-account-modal"
    width="500px"
-    :mask-closable="false"
+    :maskClosable="false"
    unmount-on-close
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item v-if="!isEdit" label="上传方式" required>
@ -142,10 +143,12 @@

    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
    <!-- <ImportPromptModal ref="importPromptModalRef" /> -->
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import { ref, defineEmits } from 'vue';
 import { Button } from 'ant-design-vue';

--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="获取凭证"
-    modal-class="authorized-account-modal"
-    :mask-closable="false"
+    wrapClassName="authorized-account-modal"
+    :maskClosable="false"
    :footer="!isLoading"
-    @close="close"
+    centered
+    @cancel="close"
  >
    <!-- <div v-if="showSyncTip">
      <div class="flex items-center mb-20px">
@ -58,12 +59,14 @@
      <Button size="large" @click="close">取消</Button>
      <Button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </Button>
    </template>
-  </a-modal>
+  </Modal>

  <SelectSubAccountModal ref="selectSubAccountModalRef" />
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import { Button } from 'ant-design-vue';
 import { defineExpose, ref, computed, defineEmits } from 'vue';
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
@ -3,13 +3,13 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="导入提示"
-    modal-class="import-prompt-modal"
-    :mask-closable="false"
-    @close="close"
+    wrapClassName="import-prompt-modal"
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <div class="flex items-center">
@ -21,12 +21,12 @@
      <Button size="large" @click="close">取消</Button>
      <Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { defineExpose } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
@ -1,10 +1,12 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
+    @cancel="onClose"
+    centered
    title="选择子账户"
    modal-class="select-sub-account-modal"
    width="720px"
-    :mask-closable="false"
+    :maskClosable="false"
    @close="onClose"
  >
    <div class="filter-row flex mb-16px">
@ -109,7 +111,7 @@
        >
      </div>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
@ -118,6 +120,7 @@ import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
 import { formatTableField } from '@/utils/tools';
 import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { Modal } from 'ant-design-vue';

 const emits = defineEmits('confirm');
 const update = inject('update');
@ -207,3 +210,4 @@ defineExpose({ open });
 <style lang="scss">
@import './style.scss';
 </style>
+