feat: 初始化投放账户管理页面
This commit is contained in:
rd
@ -4,50 +4,74 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-manage-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<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 type="primary" class="w-139px search-btn" size="medium">
|
||||
<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>
|
||||
<template #default>添加账户</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
|
||||
<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 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">
|
||||
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
|
||||
<template #default>查看异常账号</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<AccountTable :dataSource="dataSource" />
|
||||
<AccountTable
|
||||
:dataSource="dataSource"
|
||||
:selectedItems="selectedItems"
|
||||
@selectionChange="handleSelectionChange"
|
||||
@delete="handleDelete"
|
||||
@openEdit="handleOpenEdit"
|
||||
/>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
@ -62,6 +86,9 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddAccountModal ref="addAccountModalRef" />
|
||||
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -70,11 +97,21 @@ import { ref } from 'vue';
|
||||
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
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 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({
|
||||
@ -82,49 +119,103 @@ const pageInfo = reactive({
|
||||
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 = () => {
|
||||
console.log('getData', query.value, pageInfo);
|
||||
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',
|
||||
const getData = async () => {
|
||||
console.log('getData');
|
||||
// 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: 0,
|
||||
platform: 0,
|
||||
operator: {
|
||||
name: '小周',
|
||||
},
|
||||
{
|
||||
name: '标签2',
|
||||
group: {
|
||||
name: '美团组',
|
||||
},
|
||||
],
|
||||
});
|
||||
tags: [
|
||||
{
|
||||
name: '标签1',
|
||||
},
|
||||
{
|
||||
name: '标签2',
|
||||
},
|
||||
{
|
||||
name: '标签3',
|
||||
},
|
||||
{
|
||||
name: '标签4',
|
||||
},
|
||||
{
|
||||
name: '标签5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '全球2',
|
||||
account_id: 1,
|
||||
mobile: 1777777,
|
||||
status: 4,
|
||||
platform: 0,
|
||||
operator: {
|
||||
name: '小周',
|
||||
},
|
||||
group: {
|
||||
name: '美团组',
|
||||
},
|
||||
tags: [
|
||||
{
|
||||
name: '标签1',
|
||||
},
|
||||
{
|
||||
name: '标签2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
const handleSearch = (newQuery) => {
|
||||
query.value = { ...newQuery };
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
selectedItems.value = [];
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
getData();
|
||||
reload();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
@ -133,8 +224,45 @@ const onPageChange = (current) => {
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleOpenGroupModal = () => {
|
||||
groupManageModalRef.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 = [];
|
||||
};
|
||||
const handleOpenAbnormalAccount = () => {
|
||||
query.value.status = 2;
|
||||
reload();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user