feat: 批量操作账号

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);
+};

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>

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">

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"

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)">
+        <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="openDelete(tag)" />
+          <img :src="iconDelete" class="delete-icon" @click.stop="openDelete(tag)" />
         </div>
-        </a-tooltip>
       </div>
     </template>
     <AddTag ref="addTagRef" @success="getData" />

src/views/property-marketing/media-account/account-manage/index.vue

@@ -33,13 +33,28 @@
 
     <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">
+        <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">
               {{
@@ -50,7 +65,12 @@
             </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,7 +164,8 @@ const getData = async () => {
   //   dataSource.value = data.data;
   //   pageInfo.total = total;
   // }
-  dataSource.value = new Array(8).fill({
+  dataSource.value = [
+    {
       id: 1,
       name: '全球',
       account_id: 1,
@@ -151,7 +186,30 @@ const getData = async () => {
           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">

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;