274 lines
8.0 KiB
Vue
274 lines
8.0 KiB
Vue
<!--
|
||
* @Author: RenXiaoDong
|
||
* @Date: 2025-06-25 10:00:50
|
||
-->
|
||
<template>
|
||
<div class="account-manage-wrap">
|
||
<div class="filter-wrap bg-#fff border-radius-8px">
|
||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
|
||
<div class="flex items-center">
|
||
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
|
||
<template #icon>
|
||
<img :src="icon3" width="16" height="16" />
|
||
</template>
|
||
<template #default>标签管理</template>
|
||
</a-button>
|
||
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
|
||
<template #icon>
|
||
<img :src="icon2" width="16" height="16" />
|
||
</template>
|
||
<template #default>分组管理</template>
|
||
</a-button>
|
||
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
|
||
<template #icon>
|
||
<img :src="icon1" width="16" height="16" />
|
||
</template>
|
||
<template #default>添加账号</template>
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
<FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
|
||
</div>
|
||
|
||
<div
|
||
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
|
||
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
|
||
>
|
||
<div class="flex items-center">
|
||
<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>
|
||
|
||
<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>
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
</div>
|
||
<div class="card-wrap">
|
||
<AccountTable
|
||
:dataSource="dataSource"
|
||
:selectedItems="selectedItems"
|
||
@selectionChange="handleSelectionChange"
|
||
@delete="handleDelete"
|
||
/>
|
||
<div class="pagination-box">
|
||
<a-pagination
|
||
:total="pageInfo.total"
|
||
size="mini"
|
||
show-total
|
||
show-jumper
|
||
show-page-size
|
||
:current="pageInfo.page"
|
||
:page-size="pageInfo.pageSize"
|
||
@change="onPageChange"
|
||
@page-size-change="onPageSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<GroupManageModal ref="groupManageModalRef" />
|
||
<TagsManageModal ref="tagsManageModalRef" />
|
||
<AddAccountModal ref="addAccountModalRef" />
|
||
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
import FilterBlock from './components/filter-block';
|
||
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';
|
||
|
||
import icon1 from '@/assets/img/media-account/icon-add.png';
|
||
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({
|
||
page: 1,
|
||
pageSize: 20,
|
||
total: 100,
|
||
});
|
||
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();
|
||
});
|
||
|
||
const getData = async () => {
|
||
// const { page, pageSize } = pageInfo;
|
||
// const { code, data, total } = await getMediaAccounts({
|
||
// page,
|
||
// page_size: pageSize,
|
||
// ...query.value,
|
||
// });
|
||
// if (code === 200) {
|
||
// dataSource.value = data.data;
|
||
// pageInfo.total = total;
|
||
// }
|
||
dataSource.value = [
|
||
{
|
||
id: 1,
|
||
name: '全球',
|
||
account_id: 1,
|
||
mobile: 1777777,
|
||
status: 1,
|
||
platform: 0,
|
||
operator: {
|
||
name: '小周',
|
||
},
|
||
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 };
|
||
getData();
|
||
};
|
||
const handleReset = () => {
|
||
query.value = cloneDeep(INITIAL_QUERY);
|
||
getData();
|
||
};
|
||
|
||
const onPageChange = (current) => {
|
||
pageInfo.page = current;
|
||
getData();
|
||
};
|
||
const onPageSizeChange = (pageSize) => {
|
||
pageInfo.pageSize = pageSize;
|
||
pageInfo.page = 1;
|
||
getData();
|
||
};
|
||
|
||
const handleOpenGroupModal = () => {
|
||
groupManageModalRef.value?.open();
|
||
};
|
||
const handleOpenTagsModal = () => {
|
||
tagsManageModalRef.value?.open();
|
||
};
|
||
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">
|
||
@import './style.scss';
|
||
</style>
|