From 7769c3b8bd9d03b73128f2ee3f7fd752115aa10d Mon Sep 17 00:00:00 2001
From: rd <>
Date: Thu, 26 Jun 2025 18:31:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |   7 +-
 src/assets/img/media-account/icon-close.png   | Bin 0 -> 403 bytes
 .../account-table/delete-account.vue          |  70 ++++++++
 .../components/account-table/index.vue        |  37 ++++-
 .../components/add-account-modal/index.vue    |   2 +-
 .../components/tags-manage-modal/index.vue    |  11 +-
 .../media-account/account-manage/index.vue    | 157 ++++++++++++++----
 .../media-account/account-manage/style.scss   |  16 ++
 8 files changed, 252 insertions(+), 48 deletions(-)
 create mode 100644 src/assets/img/media-account/icon-close.png
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 63c8d43..cc01d23 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -40,7 +40,7 @@ export const putMediaAccounts = (id: string) => {
 };
 
 // 媒体账号-删除
-export const deleteMediaAccounts = (id: string) => {
+export const deleteMediaAccount = (id: string) => {
   return Http.delete(`/v1/media-accounts/${id}`);
 };
 
@@ -90,3 +90,8 @@ export const putTag = (params = {}) => {
 export const deleteTag = (id: string) => {
   return Http.delete(`/v1/media-account-tags/${id}`);
 };
+
+// 媒体账号-批量删除
+export const batchDeleteMediaAccounts = (params = {}) => {
+  return Http.delete(`/v1/media-accounts/batch`, params);
+};
diff --git a/src/assets/img/media-account/icon-close.png b/src/assets/img/media-account/icon-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fa3c1dec509d8d44d4c1e2b46493477b15b327e
GIT binary patch
literal 403
zcmV;E0c`$>P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0VqjCK~#7F?Uum}
z!Y~X)?Q|hn10lo)h$}*f4G0?`ggOTY#2PRVCB!PU5G85s7Q~_N*3|j`H%cu7^z{5Q
z>ya5iOBU0(h6=q{P0XxN=CT@_4G5vV+0ANLtxyg67AZAttcy_ZPq+o9xdEeJ&)FS^
zyE9(hI`0YON4(n2l_3dnPQo=OEuT4oF`?zS(Dv&$b#e1a_{<NdOo!^D0k|Q!=A~W&
zDIp~0rB))b5K{9}hk-A|(@;yyOARJ&h<CW=q5z=~5_3X<00qjVtfjy{0r$dvit#%p
zD}e8|KaE+<N)#aWt4TU$UE9+9g)~HC08W#Ugut%Mr6I6Ob4iG#fke_|+z^EwNOI0V
x0*G^|IYE1>p$6~sJTQ<%X&NYhrP0&#RUXE!|0H51m$?7{002ovPDHLkV1l7OpqKyv

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000..ccc91bf
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
@@ -0,0 +1,70 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:44:16
+-->
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:23:52
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除账号' : '删除账号'"
+    width="400px"
+    :footer="false"
+    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>确认删除 {{ accountName }} 这个账号吗？</span>
+    </div>
+    <div class="text-right">
+      <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>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const accountId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(accountId.value));
+
+function onClose() {
+  visible.value = false;
+  accountId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  accountId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
+  const { code } = await _fn(accountId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
index 7b89186..f929af4 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="card-container">
     <div v-for="(item, index) in dataSource" :key="index" class="card-item">
-      <a-checkbox></a-checkbox>
+      <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
         <p class="name">{{ item.name }}</p>
         <div class="field-row">
@@ -43,14 +43,14 @@
           </div>
         </div>
         <div class="operate-row">
-          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" />
+          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
           <a-button class="w-64px search-btn mr-8px" size="mini">
             <template #default>暂停同步</template>
           </a-button>
           <a-button class="w-64px search-btn mr-8px" size="mini">
             <template #default>重新授权</template>
           </a-button>
-          <a-button class="w-40px search-btn" size="mini">
+          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
             <template #default>编辑</template>
           </a-button>
         </div>
@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, ref, computed } from 'vue';
 import { STATUS_LIST } from '../../constants';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
@@ -72,7 +72,36 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  selectedItems: {
+    type: Array,
+    default: () => [],
+  },
 });
+
+const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+
+// 判断当前 item 是否被选中
+const isSelected = (item) => {
+  return props.selectedItems.some((i) => i.id === item.id);
+};
+
+const toggleSelect = (item) => {
+  let newSelected;
+  if (isSelected(item)) {
+    newSelected = props.selectedItems.filter((i) => i.id !== item.id);
+  } else {
+    newSelected = [...props.selectedItems, item];
+  }
+  emits('selectionChange', newSelected);
+};
+
+const openEdit = (item) => {
+  emits('openEdit', item.id);
+};
+
+const openDelete = (item) => {
+  emits('delete', item);
+};
 </script>
 
 <style scoped lang="scss">
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 c51e628..2a9edef 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
@@ -5,7 +5,7 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    title="添加账号"
+    :title="isEdit ? '编辑账号' : '添加账号'"
     modal-class="add-account-modal"
     :footer="false"
     width="500px"
diff --git 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
index 2f8d10a..1e2ef50 100644
--- 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
@@ -34,12 +34,11 @@
         <template #default>添加新标签</template>
       </a-button>
       <div class="tag-list">
-        <a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
-          <div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
-            <span>{{ tag.name }}</span>
-            <img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
-          </div>
-        </a-tooltip>
+        <div v-for="tag in list" :key="tag.id" class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
+          <a-checkbox v-model="selectedTags" :value="tag.id" style="margin-right: 6px" @click.stop />
+          <span>{{ tag.name }}</span>
+          <img :src="iconDelete" class="delete-icon" @click.stop="openDelete(tag)" />
+        </div>
       </div>
     </template>
     <AddTag ref="addTagRef" @success="getData" />
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 14cfc0e..dc376ca 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -33,24 +33,44 @@
 
     <div
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="{
-        normal: isNormalStatus,
-        abnormal: isAbnormalStatus,
-      }"
+      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
     >
       <div class="flex items-center">
-        <template v-if="isNormalStatus || isAbnormalStatus">
-          <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
-          <span class="label">
-            {{
-              isNormalStatus
-                ? '太棒啦！所有账号都在正常运行。'
-                : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-            }}
-          </span>
-        </template>
+        <div class="flex items-center">
+          <template v-if="selectedItems.length > 0">
+            <a-checkbox
+              :model-value="checkedAll"
+              :indeterminate="indeterminate"
+              class="mr-8px"
+              @change="handleChangeAll"
+            />
+            <span class="label mr-24px">
+              已选
+              <span class="color-#6D4CFE">{{ selectedItems.length }}</span>
+              个账号
+            </span>
+
+            <span class="operation-btn" @click="handleBatchTag">批量标签</span>
+            <span class="operation-btn" @click="handleBatchGroup">批量分组</span>
+            <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
+          </template>
+          <template v-else>
+            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+            <span class="label">
+              {{
+                isNormalStatus
+                  ? '太棒啦！所有账号都在正常运行。'
+                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
+              }}
+            </span>
+          </template>
+        </div>
       </div>
-      <div>
+
+      <template v-if="selectedItems.length > 0">
+        <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
+      </template>
+      <div v-else>
         <a-space v-if="isAbnormalStatus" class="flex items-center">
           <a-button class="w-96px err-btn" size="mini">
             <template #default>查看异常账号</template>
@@ -59,7 +79,12 @@
       </div>
     </div>
     <div class="card-wrap">
-      <AccountTable :dataSource="dataSource" />
+      <AccountTable
+        :dataSource="dataSource"
+        :selectedItems="selectedItems"
+        @selectionChange="handleSelectionChange"
+        @delete="handleDelete"
+      />
       <div class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
@@ -78,6 +103,7 @@
     <GroupManageModal ref="groupManageModalRef" />
     <TagsManageModal ref="tagsManageModalRef" />
     <AddAccountModal ref="addAccountModalRef" />
+    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
   </div>
 </template>
 
@@ -89,6 +115,7 @@ import AccountTable from './components/account-table';
 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 { INITIAL_QUERY } from './constants';
 import { getMediaAccounts } from '@/api/all/propertyMarketing';
@@ -98,10 +125,12 @@ import icon2 from '@/assets/img/media-account/icon-group.png';
 import icon3 from '@/assets/img/media-account/icon-tag.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
 import icon5 from '@/assets/img/media-account/icon-warn.png';
+import icon6 from '@/assets/img/media-account/icon-close.png';
 
 const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
+const deleteAccountRef = ref(null);
 
 const tipStatus = ref(2);
 const pageInfo = reactive({
@@ -111,9 +140,14 @@ const pageInfo = reactive({
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
+const selectedItems = ref([]);
 
 const isNormalStatus = computed(() => tipStatus.value === 1);
 const isAbnormalStatus = computed(() => tipStatus.value === 2);
+const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
+);
 
 onMounted(() => {
   getData();
@@ -130,28 +164,52 @@ const getData = async () => {
   //   dataSource.value = data.data;
   //   pageInfo.total = total;
   // }
-  dataSource.value = new Array(8).fill({
-    id: 1,
-    name: '全球',
-    account_id: 1,
-    mobile: 1777777,
-    status: 1,
-    platform: 0,
-    operator: {
-      name: '小周',
-    },
-    group: {
-      name: '美团组',
-    },
-    tags: [
-      {
-        name: '标签1',
+  dataSource.value = [
+    {
+      id: 1,
+      name: '全球',
+      account_id: 1,
+      mobile: 1777777,
+      status: 1,
+      platform: 0,
+      operator: {
+        name: '小周',
       },
-      {
-        name: '标签2',
+      group: {
+        name: '美团组',
       },
-    ],
-  });
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: '全球2',
+      account_id: 1,
+      mobile: 1777777,
+      status: 1,
+      platform: 0,
+      operator: {
+        name: '小周',
+      },
+      group: {
+        name: '美团组',
+      },
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+      ],
+    },
+  ];
 };
 const handleSearch = (newQuery) => {
   query.value = { ...newQuery };
@@ -181,6 +239,33 @@ const handleOpenTagsModal = () => {
 const handleOpenAccountModal = () => {
   addAccountModalRef.value?.open();
 };
+
+const handleOpenEdit = (item) => {
+  addAccountModalRef.value?.open(item.id);
+};
+
+const handleSelectionChange = (val) => {
+  selectedItems.value = val;
+};
+const handleChangeAll = (val) => {
+  if (val) {
+    selectedItems.value = cloneDeep(dataSource.value);
+  } else {
+    selectedItems.value = [];
+  }
+};
+const handleBatchDelete = () => {
+  const ids = selectedItems.value.map((item) => item.id);
+  const names = selectedItems.value.map((item) => `“${item.name}”`).join(',');
+  deleteAccountRef.value?.open({ id: ids, name: names });
+};
+const handleDelete = (item) => {
+  const { id, name } = item;
+  deleteAccountRef.value?.open({ id, name: `“${name}”` });
+};
+const handleCloseTip = () => {
+  selectedItems.value = [];
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss
index 97d0462..1d9c9cb 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -58,6 +58,22 @@
       font-weight: 400;
       line-height: 20px; /* 166.667% */
     }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #F64B31;
+      }
+    }
   }
   .card-wrap {
     display: flex;