feat: 批量操作账号

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