From e321613af1c27e40ba5ac489796984232dc2360c Mon Sep 17 00:00:00 2001
From: rd <>
Date: Fri, 27 Jun 2025 11:56:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=B9=E9=87=8F=E6=A0=87=E7=AD=BE/?=
 =?UTF-8?q?=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |  10 +
 src/assets/img/icon-question.png              | Bin 0 -> 903 bytes
 src/views/property-marketing/component.scss   |  30 ++-
 .../account-table/delete-account.vue          |   7 +-
 .../components/add-account-modal/index.vue    |  14 +-
 .../components/batch-group-modal/index.vue    | 142 +++++++++++++++
 .../components/batch-group-modal/style.scss   |  16 ++
 .../components/batch-tag-modal/index.vue      | 171 ++++++++++++++++++
 .../components/batch-tag-modal/style.scss     |  16 ++
 .../group-manage-modal/add-group.vue          |   9 +-
 .../group-manage-modal/delete-group.vue       |  13 +-
 .../components/import-prompt-modal/index.vue  |  10 +-
 .../media-account/account-manage/index.vue    |  13 ++
 13 files changed, 408 insertions(+), 43 deletions(-)
 create mode 100644 src/assets/img/icon-question.png
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index cc01d23..fe8d6cd 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -95,3 +95,13 @@ export const deleteTag = (id: string) => {
 export const batchDeleteMediaAccounts = (params = {}) => {
   return Http.delete(`/v1/media-accounts/batch`, params);
 };
+
+// 媒体账号-批量标签
+export const batchPutTag = (params = {}) => {
+  return Http.put(`/v1/media-accounts/batch-tag`, params);
+};
+
+// 媒体账号-批量分组
+export const batchPutGroup = (params = {}) => {
+  return Http.put(`/v1/media-accounts/batch-group`, params);
+};
diff --git a/src/assets/img/icon-question.png b/src/assets/img/icon-question.png
new file mode 100644
index 0000000000000000000000000000000000000000..a10d6ad8212450e5de0b59e0ff058d3fd04a5a66
GIT binary patch
literal 903
zcmV;219<$2P)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0~|?2K~#7F-B#~y
z+E5U`v!Owas<<1Z6O?Y?Y|u`SFhNK{B+@T6UmBzka3%=dARELRlx)BTbwpD^!Cdd2
z|L}O&81-XLda~trcfb3826*j+yD~PL?ZavnTtfUv5jjfO#&AjW^u~su+wG2b(NhZ8
zYPDSg_{Ohp32Q(IKl(S_A^Z=Z=XuWLWp)olpEdT71;#`)0t+1^a>z6UVOX`HQ{-_j
zV7uKuoJa5o1cwPzKo;IbZ}$S<^FovV{IY$55`~1H1;z||ln09CV0hN+UHh;DarnI?
z{0j8le(jTI7+5id7%a1tme9EEUk?qXE@FId8^zM=bv^cWj0E?hL!|`Z3lw>%LL<xq
z2GHrV0?<8Qs5=+dH4NF4Gu@N()>RXM1_{6s8xo{<mM&`%9H-&X!4l6OS6~>%M_G1~
zc#=_{Qy_Vduagj)fZ{<~apIlMBw^HZdfU5xF9%aTu4L&`U4{tnl2=#1%K-mIt5BJ}
zv_LClz@Z$yfEJ5d_Fk#L8ekOd1!)vyU}Svh3ofCaWHbPS{G0D1el*PQc6B<Ca47H!
zjMrp*FKo50#(Z60^4S1nFg322;TcLuhQjZc*&`2tdLq;Db9#<|o<P8saFBkpOeU_<
zUr<7mm+3$UGYf2`3=hmtmS&EMH(FSSE!1p!j#MU;fhptTA<rn!8-SJtBc+6^Q9@Rv
z1Zq=9+D49z)&p!It?EbVw=9Qqo*MQ-T|1LMGhxhCmgMRKl#mROw4j#ust_x>BJQ_9
zS+%6oBETm1s~rykh~{wQ`-NK}ZTLVhD6?qNhIeH=K@rIip!L4fi49-PW8RVa-5Q{p
zd590Og*3RhxH{g@Hm!vgLPL(@)HYU?$Z(WAh?NY@A+oWaqzbvAe`Xf4Fjry+cA$&P
zucy3X{6zCO;+<&rXYK;d@}w<P)dD%c59-fg!bOHE@9s9RLck1kp+aMZRl*)}VTIDO
zq>Q3f8*xga{k=xspTSnZl%%|6ZBfZjRI-jb`tB>>+l|Cyi#H1DvymqVSKVkn=hF9g
d`%QfP^bdA5e98e<lga=9002ovPDHLkV1m~Bnh5{^

literal 0
HcmV?d00001

diff --git a/src/views/property-marketing/component.scss b/src/views/property-marketing/component.scss
index 6fcacb8..6595010 100644
--- a/src/views/property-marketing/component.scss
+++ b/src/views/property-marketing/component.scss
@@ -12,19 +12,30 @@
   }
 }
 .arco-modal {
+  .cancel-btn {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+    &:hover {
+      border: 1px solid var(--BG-500, #b1b2b5);
+    }
+  }
   .arco-modal-header {
-    border-bottom: none;
+    border-bottom: 1px solid var(--Border-1, #d7d7d9);
     height: 56px;
-    padding: 22px 24px 16px 24px;
+    padding: 0 20px;
     .arco-modal-title {
       justify-content: flex-start;
     }
   }
 
   .arco-modal-body {
-    padding: 24px 24px 20px;
+    padding: 24px 20px;
     .arco-form-item {
       margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
       .arco-form-item-label {
         color: var(--Text-1, #211f24);
         font-family: 'Alibaba PuHuiTi';
@@ -34,15 +45,14 @@
         line-height: 22px; /* 157.143% */
       }
     }
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-    }
   }
 
   .arco-modal-footer {
-    border-top: none;
-    padding: 0;
+    display: flex;
+    height: 64px;
+    padding: 0px 20px;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid var(--Border-1, #d7d7d9);
   }
 }
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
index ccc91bf..f1752be 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
@@ -11,20 +11,19 @@
     v-model:visible="visible"
     :title="isBatch ? '批量删除账号' : '删除账号'"
     width="400px"
-    :footer="false"
     modal-class="account-manage-modal"
     @close="onClose"
   >
-    <div class="flex items-center mb-24px">
+    <div class="flex items-center">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
       <span>确认删除 {{ accountName }} 这个账号吗？</span>
     </div>
-    <div class="text-right">
+    <template #footer>
       <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
-    </div>
+    </template>
   </a-modal>
 </template>
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
index 2a9edef..6ff4a14 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@@ -7,7 +7,6 @@
     v-model:visible="visible"
     :title="isEdit ? '编辑账号' : '添加账号'"
     modal-class="add-account-modal"
-    :footer="false"
     width="500px"
     :mask-closable="false"
   >
@@ -82,14 +81,13 @@
           <TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
         </a-form-item>
       </template>
-
-      <div class="mt-24px text-right">
-        <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
-        <a-button type="primary" size="large" @click="onSubmit">
-          {{ isBatchImport ? '确定导入' : '生成授权码' }}
-        </a-button>
-      </div>
     </a-form>
+    <template #footer>
+      <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+      <a-button type="primary" size="large" @click="onSubmit">
+        {{ isBatchImport ? '确定导入' : '生成授权码' }}
+      </a-button>
+    </template>
 
     <QrCodeModal ref="qrCodeModalRef" />
     <ImportPromptModal ref="importPromptModalRef" />
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
new file mode 100644
index 0000000..21f7de8
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
@@ -0,0 +1,142 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 09:35:49
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="批量分组"
+    modal-class="batch-group-modal"
+    width="800px"
+    :mask-closable="false"
+  >
+    <div class="mb-16px t1">
+      {{ `已选${accountGroupList.length}个账号` }}
+    </div>
+    <a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
+      <a-form-item label="编辑方式" required>
+        <a-radio-group v-model="editType">
+          <a-radio value="all">
+            <div class="flex items-center">
+              <span>统一编辑</span>
+              <a-tooltip content="原分组将被清除，统一加入新分组。">
+                <img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
+              </a-tooltip>
+            </div>
+          </a-radio>
+          <a-radio value="each">分别编辑</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="选择分组" required>
+        <template v-if="editType === 'all'">
+          <div class="flex items-center w-100%">
+            <a-select v-model="form.group_id" :options="groupOptions" placeholder="请选择..." class="flex-1" />
+          </div>
+        </template>
+      </a-form-item>
+
+      <!-- 分别编辑 -->
+      <template v-if="editType === 'each'">
+        <a-table :data="accountGroupList" :pagination="false" row-key="id" class="w-100%">
+          <template #columns>
+            <a-table-column title="账号名称" data-index="name" width="200" />
+            <a-table-column title="选择分组" data-index="group_id">
+              <template #cell="{ record }">
+                <div class="flex items-center w-100%">
+                  <a-select v-model="record.group_id" :options="groupOptions" placeholder="请选择..." />
+                </div>
+              </template>
+            </a-table-column>
+          </template>
+        </a-table>
+      </template>
+    </a-form>
+    <template #footer>
+      <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+      <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/icon-question.png';
+
+// [{id, name, group_id: null}]
+
+const emits = defineEmits(['update']);
+const visible = ref(false);
+const groupOptions = ref([]);
+const formRef = ref();
+const editType = ref('all');
+const form = reactive({
+  group_id: null,
+});
+
+const accounts = ref([]); // [{id, name}]
+const accountGroupList = ref([]); // [{id, name, group_id: null}]
+
+const open = (accountList = []) => {
+  editType.value = 'all';
+  groupOptions.value = [];
+  form.group_id = null;
+  accounts.value = accountList;
+  accountGroupList.value = accountList.map((acc) => ({
+    ...acc,
+    group_id: null,
+  }));
+
+  visible.value = true;
+  getTags();
+};
+
+const getTags = async () => {
+  groupOptions.value = [
+    {
+      label: '测试',
+      value: '1',
+    },
+    {
+      label: 'ceshi2',
+      value: 2,
+    },
+  ];
+  const { code, data } = await fetchAccountGroups();
+  if (code === 200) {
+    groupOptions.value = data.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+  }
+};
+
+const onClose = () => {
+  visible.value = false;
+  form.tag_ids = [];
+};
+
+const onSubmit = async () => {
+  // 这里处理批量标签的提交逻辑
+  const _params =
+    editType.value === 'all'
+      ? { id: -1, group_id: form.group_id }
+      : accountGroupList.value.map((item) => ({
+          id: item.id,
+          group_id: item.group_id,
+        }));
+  const { code } = await batchPutGroup({ media_accounts: _params });
+  if (code === 200) {
+    AMessage.success('批量分组成功');
+    emits('update');
+    visible.value = false;
+  }
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
new file mode 100644
index 0000000..acb2b4c
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
@@ -0,0 +1,16 @@
+@import '@/views/property-marketing/component.scss';
+
+.batch-group-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    // min-height: 200px;
+    .t1 {
+      color: var(--Text-3, #737478);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+}
diff --git 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
new file mode 100644
index 0000000..99cfceb
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
@@ -0,0 +1,171 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 09:35:49
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="批量标签"
+    modal-class="batch-tag-modal"
+    width="800px"
+    :mask-closable="false"
+  >
+    <div class="mb-16px t1">
+      {{ `已选${accountTagList.length}个账号` }}
+    </div>
+    <a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
+      <a-form-item label="编辑方式" required>
+        <a-radio-group v-model="editType">
+          <a-radio value="all">
+            <div class="flex items-center">
+              <span>统一编辑</span>
+              <a-tooltip content="原标签将被清除，统一为新标签。">
+                <img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
+              </a-tooltip>
+            </div>
+          </a-radio>
+          <a-radio value="each">分别编辑</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="选择标签" required>
+        <template v-if="editType === 'all'">
+          <div class="flex items-center w-100%">
+            <a-select
+              v-model="form.tag_ids"
+              :options="tagOptions"
+              multiple
+              allow-create
+              placeholder="请输入标签，回车键可直接添加..."
+              :limit="5"
+              class="flex-1"
+              @create="handleCreateTag"
+            />
+            <span class="ml-12px">{{ `${form.tag_ids.length}/5` }}</span>
+          </div>
+        </template>
+      </a-form-item>
+
+      <!-- 分别编辑 -->
+      <template v-if="editType === 'each'">
+        <a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%">
+          <template #columns>
+            <a-table-column title="账号名称" data-index="name" width="200" />
+            <a-table-column title="选择标签" data-index="tags">
+              <template #cell="{ record, rowIndex }">
+                <div class="flex items-center w-100%">
+                  <a-select
+                    v-model="record.tags"
+                    :options="tagOptions"
+                    multiple
+                    allow-create
+                    placeholder="请输入标签，回车键可直接添加..."
+                    :limit="5"
+                    style="width: 90%"
+                    @create="(val) => handleCreateTag(val, rowIndex)"
+                  />
+                  <span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
+                </div>
+              </template>
+            </a-table-column>
+          </template>
+        </a-table>
+      </template>
+    </a-form>
+    <template #footer>
+      <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+      <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/icon-question.png';
+
+const emits = defineEmits(['update']);
+const visible = ref(false);
+const tagOptions = ref([]);
+const formRef = ref();
+const editType = ref('all');
+const form = reactive({
+  tag_ids: [],
+});
+
+const accounts = ref([]); // [{id, name}]
+const accountTagList = ref([]); // [{id, name, tags: []}]
+
+// 打开弹窗时请求标签数据
+const open = (accountList = []) => {
+  editType.value = 'all';
+  tagOptions.value = [];
+  form.tag_ids = [];
+  accounts.value = accountList;
+  accountTagList.value = accountList.map((acc) => ({
+    ...acc,
+    tags: [],
+  }));
+
+  visible.value = true;
+  getTags();
+};
+
+const getTags = async () => {
+  tagOptions.value = [
+    {
+      label: '测试',
+      value: '1',
+    },
+    {
+      label: 'ceshi2',
+      value: 2,
+    },
+  ];
+  const { code, data } = await fetchAccountTags();
+  if (code === 200) {
+    tagOptions.value = data.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+  }
+};
+
+// 允许回车创建新标签
+const handleCreateTag = (inputValue, idx) => {
+  const newTag = { label: inputValue, value: inputValue };
+  tagOptions.value.push(newTag);
+  if (typeof idx === 'number') {
+    accountTagList.value[idx].tags.push(inputValue);
+  } else {
+    form.tag_ids.push(inputValue);
+  }
+};
+
+const onClose = () => {
+  visible.value = false;
+  form.tag_ids = [];
+};
+
+const onSubmit = async () => {
+  const _params =
+    editType.value === 'all'
+      ? { tag_ids: form.tag_ids }
+      : accountTagList.value.map((item) => ({
+          id: item.id,
+          tag_ids: item.tags,
+        }));
+  const { code } = await batchPutTag({ media_accounts: _params });
+  if (code === 200) {
+    AMessage.success('批量标签成功');
+    emits('update');
+    visible.value = false;
+  }
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
new file mode 100644
index 0000000..156b9c4
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
@@ -0,0 +1,16 @@
+@import '@/views/property-marketing/component.scss';
+
+.batch-tag-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    // min-height: 200px;
+    .t1 {
+      color: var(--Text-3, #737478);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+}
diff --git 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
index 9781d48..d208936 100644
--- 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
@@ -8,18 +8,17 @@
     :title="isEdit ? '编辑分组' : '添加新分组'"
     modal-class="account-manage-modal"
     width="400px"
-    :footer="false"
     @close="onClose"
   >
     <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
       <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
         <a-input v-model="form.name" placeholder="请输入…" />
       </a-form-item>
-      <div class="text-right">
-        <a-button class="cancel-btn" @click="onClose">取消</a-button>
-        <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
-      </div>
     </a-form>
+    <template #footer>
+      <a-button class="cancel-btn" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+    </template>
   </a-modal>
 </template>
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
index 30a3270..8d19023 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
@@ -3,24 +3,17 @@
  * @Date: 2025-06-26 11:45:05
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
-    title="删除分组"
-    width="400px"
-    :footer="false"
-    modal-class="account-manage-modal"
-    @close="onClose"
-  >
+  <a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
     <div class="flex items-center mb-24px">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
       <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
     </div>
-    <div class="text-right">
+    <template #footer>
       <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
-    </div>
+    </template>
   </a-modal>
 </template>
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
index 7b67178..5fd6c1e 100644
--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
@@ -8,7 +8,6 @@
     width="480px"
     title="导入提示"
     modal-class="import-prompt-modal"
-    :footer="false"
     :mask-closable="false"
     @close="close"
   >
@@ -17,12 +16,11 @@
         <img :src="icon1" width="20" height="20" class="mr-12px" />
         <span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
       </div>
-
-      <div class="mt-24px text-right w-100%">
-        <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
-        <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
-      </div>
     </div>
+    <template #footer>
+      <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+      <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
+    </template>
   </a-modal>
 </template>
 
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index dc376ca..bc6fe2f 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -104,6 +104,8 @@
     <TagsManageModal ref="tagsManageModalRef" />
     <AddAccountModal ref="addAccountModalRef" />
     <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
+    <BatchTagModal ref="batchTagModalRef" @update="getData" />
+    <BatchGroupModal ref="batchGroupModalRef" @update="getData" />
   </div>
 </template>
 
@@ -116,6 +118,8 @@ import GroupManageModal from './components/group-manage-modal';
 import TagsManageModal from './components/tags-manage-modal';
 import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
+import BatchTagModal from './components/batch-tag-modal';
+import BatchGroupModal from './components/batch-group-modal';
 
 import { INITIAL_QUERY } from './constants';
 import { getMediaAccounts } from '@/api/all/propertyMarketing';
@@ -131,6 +135,8 @@ const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
+const batchTagModalRef = ref(null);
+const batchGroupModalRef = ref(null);
 
 const tipStatus = ref(2);
 const pageInfo = reactive({
@@ -266,6 +272,13 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
+
+const handleBatchTag = () => {
+  batchTagModalRef.value?.open(selectedItems.value);
+};
+const handleBatchGroup = () => {
+  batchGroupModalRef.value?.open(selectedItems.value);
+};
 </script>
 
 <style scoped lang="scss">