feat: 批量操作账号

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