renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 投放账户数据

Browse Source
This commit is contained in:
rd
2025-07-02 17:55:20 +08:00
parent b8d88cd6cb
commit 2b4e691f4e
21 changed files with 222 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
View File

@ -43,7 +43,7 @@ export const TABLE_COLUMNS = [
},
{
title: '总赞藏数',
dataIndex: 'like_number',
dataIndex: 'like_collect_number',
width: 180,
tooltip: '账号所有内容的点赞和收藏总数',
align: 'right',

29
src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
View File

@ -4,9 +4,16 @@
-->
<template>
<div class="action-row mb-12px flex justify-between">
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
>全选</a-checkbox
>
<div>
<a-checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
>
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
@ -35,6 +42,9 @@
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
@ -84,6 +94,9 @@
</div>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
{{ formatNumberShow({ value: record.like_number + record.collect_number, showExactValue: true }) }}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
</template>
@ -107,7 +120,7 @@
</template>
</a-table>
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
<CustomTableColumnModal ref="customTableColumnModalRef" type="media_account" @success="onCustomColumnSuccess" />
</template>
<script setup>
@ -115,7 +128,7 @@ import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { STATUS_LIST } from '../../constants';
import { formatTableField } from '@/utils/tools';
import { formatTableField, formatNumberShow } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
@ -138,7 +151,7 @@ const router = useRouter();
const selectedItems = ref([]);
const tableRef = ref(null);
const modalRef = ref(null);
const customTableColumnModalRef = ref(null);
const checkedAll = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@ -167,6 +180,7 @@ const handleDetail = (record) => {
// 处理排序变化
const handleSorterChange = (column, order) => {
console.log(column, order);
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
@ -181,11 +195,10 @@ const handleExport = () => {
const resetTable = () => {
selectedItems.value = [];
tableRef.value?.clearSorters();
};
const openCustomColumn = () => {
modalRef.value.open();
customTableColumnModalRef.value.open();
};
const onCustomColumnSuccess = (selectedColumns) => {

23
src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<div class="container">
<div class="filter-row flex mb-20px">
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<a-space size="medium" class="w-240px">
@ -42,26 +42,7 @@
</a-select>
</a-space>
</div>
</div>
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<a-select
v-model="query.date_range"
size="medium"
placeholder="全部"
class="w-120px"
allow-clear
@change="handleSearch"
>
<template #arrow-icon> <icon-calendar size="16" /> </template>
<a-option :value="7" label="近7天">近7天</a-option>
<a-option :value="14" label="近14天">近14天</a-option>
<a-option :value="30" label="近30天">近30天</a-option>
</a-select>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />

2
src/views/property-marketing/media-account/account-dashboard/constants.ts
View File

@ -39,7 +39,7 @@ export const INITIAL_QUERY = {
status: '',
operator_id: '',
group_ids: [],
date_range: '',
// date_range: '',
column: '',
order: '',
};

212
src/views/property-marketing/media-account/account-dashboard/index.vue
View File

@ -6,10 +6,12 @@
<template>
<div class="account-dashboard-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
<div class="top flex h-64px py-10px justify-between items-center mb-19px">
<div class="top flex h-64px py-10px justify-between items-center">
<div class="flex items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
<a-tooltip content="数据纵览">
<img :src="icon1" width="14" height="14" class="ml-4px" />
</a-tooltip>
</div>
</div>
<div class="overview-row flex">
@ -42,7 +44,7 @@
@export="handleExport"
@sorterChange="handleSorterChange"
/>
<div class="pagination-box">
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
@ -74,201 +76,34 @@ const dataSource = ref([]);
const overviewData = ref({});
const selectedRowKeys = ref([]);
const accountTableRef = ref(null);
const pageInfo = reactive({
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 100,
total: 0,
});
// 测试数据
const mockData = [
{
id: 1,
name: '抖音官方账号',
mobile: '13800138001',
account_id: 'douyin_001',
holder_name: '张三',
operator_id: 1,
platform: 0,
group_id: 1,
status: 1,
is_pause: 0,
fans_number: 1250000,
like_number: 890000,
collect_number: 45000,
view_number: 5600000,
view_chain: 12.5,
like_chain: 8.3,
ai_evaluation: {
status: 1,
text: '表现优质 | 建议保持',
look_chain: 12.5,
like_chain: 8.3,
},
operator: {
id: 1,
name: '李运营',
},
group: {
id: 1,
name: '抖音组',
},
},
{
id: 2,
name: '小红书美妆号',
mobile: '13800138002',
account_id: 'xhs_001',
holder_name: '李四',
operator_id: 2,
platform: 1,
group_id: 2,
status: 1,
is_pause: 1,
fans_number: 890000,
like_number: 670000,
collect_number: 89000,
view_number: 3200000,
view_chain: -5.2,
like_chain: 15.7,
ai_evaluation: {
status: 2,
text: '表现中等 | 建议优化',
look_chain: -12.5,
like_chain: 8.3,
},
operator: {
id: 2,
name: '王运营',
},
group: {
id: 2,
name: '小红书组',
},
},
{
id: 3,
name: '抖音美食号',
mobile: '13800138003',
account_id: 'douyin_002',
holder_name: '王五',
operator_id: 1,
platform: 0,
group_id: 1,
status: 0,
is_pause: 0,
fans_number: 0,
like_number: 0,
collect_number: 0,
view_number: 0,
view_chain: 0,
like_chain: 0,
ai_evaluation: {
status: 3,
text: '表现较差 | 建议整改',
look_chain: -12.5,
like_chain: -8.3,
},
operator: {
id: 1,
name: '李运营',
},
group: {
id: 1,
name: '抖音组',
},
},
{
id: 4,
name: '小红书穿搭号',
mobile: '13800138004',
account_id: 'xhs_002',
holder_name: '赵六',
operator_id: 2,
platform: 1,
group_id: 2,
status: 2,
is_pause: 0,
fans_number: 450000,
like_number: 320000,
collect_number: 23000,
view_number: 1800000,
view_chain: -12.8,
like_chain: -8.5,
operator: {
id: 2,
name: '王运营',
},
group: {
id: 2,
name: '小红书组',
},
},
{
id: 5,
name: '抖音科技号',
mobile: '13800138005',
account_id: 'douyin_003',
holder_name: '钱七',
operator_id: 3,
platform: 0,
group_id: 3,
status: 1,
is_pause: 0,
fans_number: 2100000,
like_number: 1500000,
collect_number: 120000,
view_number: 8900000,
view_chain: 25.6,
like_chain: 18.9,
operator: {
id: 3,
name: '陈运营',
},
group: {
id: 3,
name: '科技组',
},
},
];
const getOverviewData = async () => {
// 使用模拟数据
overviewData.value = {
total_number: 5,
total_fans_number: 4690000,
total_like_number: 3380000,
total_collect_number: 1230000,
in_the_past_seven_days_view_number: 19500000,
};
// 如果有真实接口，可以这样调用：
// const { code, data } = await getAccountBoardOverview();
// if (code === 200) {
// overviewData.value = data;
// }
const { code, data } = await getAccountBoardOverview();
if (code === 200) {
overviewData.value = data;
}
};
const getData = async () => {
// 使用模拟数据
dataSource.value = mockData;
pageInfo.total = mockData.length;
// 如果有真实接口，可以这样调用：
// const { code, data } = await getAccountBoardList(query.value);
// if (code === 200) {
// dataSource.value = data.data;
// pageInfo.total = data.total;
// }
const { code, data } = await getAccountBoardList(query.value);
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
}
};
const onPageChange = (current) => {
pageInfo.page = current;
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.value.pageSize = pageSize;
reload();
};
@ -277,15 +112,15 @@ const handleSearch = () => {
};
const reload = () => {
pageInfo.page = 1;
pageInfo.value.page = 1;
getData();
};
const handleReset = () => {
selectedRowKeys.value = [];
pageInfo.page = 1;
pageInfo.pageSize = 20;
pageInfo.total = 0;
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value = cloneDeep(INITIAL_QUERY);
accountTableRef.value?.resetTable();
reload();
@ -293,7 +128,6 @@ const handleReset = () => {
const handleSelectionChange = (selectedRows) => {
selectedRowKeys.value = selectedRows;
console.log('选中的账号:', selectedRowKeys.value);
};
const handleExport = () => {
@ -302,7 +136,7 @@ const handleExport = () => {
}).then((res) => {
const { code, data } = res;
if (code === 200) {
console.log(data.download_url);
window.open(data.download_url, '_blank');
}
});
};

68
src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
View File

@ -41,7 +41,6 @@
</span>
</div>
</template>
<!-- 其他项占1/4宽度 -->
<template v-else>
<div class="flex items-center mb-4px">
<p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
@ -50,7 +49,6 @@
</a-tooltip>
</div>
<p class="cts">
<!-- 状态特殊渲染 -->
<template v-if="field.type === 'status'">
<span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
<span v-else style="color: #ff4d4f">异常</span>
@ -63,7 +61,6 @@
{{ detailData[field.dataIndex] }}%
</span>
</template>
<!-- 普通字段，支持多层key -->
<template v-else>
{{ formatTableField(field, detailData, true) }}
</template>
@ -89,38 +86,39 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
const route = useRoute();
const id = route.params.id;
const detailData = ref({
id: 1,
name: '抖音官方账号',
mobile: '13800138001',
account_id: 'douyin_001',
holder_name: '张三',
operator_id: 1,
platform: 0,
group_id: 1,
status: 1,
is_pause: 0,
fans_number: 1250000,
like_number: 890000,
collect_number: 45000,
view_number: 5600000,
view_chain: -12.5,
like_chain: 8.3,
ai_evaluation: {
status: 1,
text: '表现优质 | 建议保持',
look_chain: 12.5,
like_chain: 8.3,
},
operator: {
id: 1,
name: '李运营',
},
group: {
id: 1,
name: '抖音组',
},
});
const detailData = ref({});
// const detailData = ref({
// id: 1,
// name: '抖音官方账号',
// mobile: '13800138001',
// account_id: 'douyin_001',
// holder_name: '张三',
// operator_id: 1,
// platform: 0,
// group_id: 1,
// status: 1,
// is_pause: 0,
// fans_number: 1250000,
// like_number: 890000,
// collect_number: 45000,
// view_number: 5600000,
// view_chain: -12.5,
// like_chain: 8.3,
// ai_evaluation: {
// status: 1,
// text: '表现优质 | 建议保持',
// look_chain: 12.5,
// like_chain: 8.3,
// },
// operator: {
// id: 1,
// name: '李运营',
// },
// group: {
// id: 1,
// name: '抖音组',
// },
// });
const getDetail = async () => {
const { code, data } = await getAccountBoardDetail(id);

16
src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
View File

@ -5,19 +5,21 @@
export const INITIAL_QUERY = {
name: '',
publish_date: [],
published_at: [],
};
export const TABLE_COLUMNS = [
{
title: '笔记标题',
dataIndex: 'name',
dataIndex: 'title',
width: 240,
fixed: 'left',
},
{
title: '发布日期',
dataIndex: 'publish_date',
dataIndex: 'published_at',
width: 160,
fixed: 'left',
},
{
title: '曝光量',
@ -35,28 +37,28 @@ export const TABLE_COLUMNS = [
},
{
title: '点赞量',
dataIndex: 'like_count',
dataIndex: 'like_number',
width: 180,
tooltip: '账号所有内容的总点赞数',
align: 'right',
},
{
title: '收藏量',
dataIndex: 'collect_count',
dataIndex: 'collect_number',
width: 180,
tooltip: '账号所有内容的总收藏数',
align: 'right',
},
{
title: '评论数',
dataIndex: 'comment_count',
dataIndex: 'comment_number',
width: 180,
tooltip: '账号所有内容的总评论数',
align: 'right',
},
{
title: '分享量',
dataIndex: 'share_count',
dataIndex: 'share_number',
width: 180,
tooltip: '账号所有内容的总转发数',
align: 'right',

39
src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
View File

@ -25,7 +25,7 @@
<span class="label">发布日期</span>
<a-space size="medium" class="w-240px">
<a-range-picker
v-model="query.publish_date"
v-model="query.published_at"
size="medium"
allow-clear
format="YYYY-MM-DD HH:mm"
@ -47,6 +47,9 @@
</a-button>
</div>
<a-table :data="dataSource" row-key="id" :pagination="false" :scroll="{ x: '100%' }" class="w-100%" bordered>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
@ -62,7 +65,6 @@
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
@ -71,8 +73,8 @@
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'publish_date'">
{{ exactFormatTime(record.publish_date) }}
<template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
@ -81,7 +83,7 @@
</a-table-column>
</template>
</a-table>
<div class="pagination-box">
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
@ -101,14 +103,15 @@
import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
const route = useRoute();
const id = route.params.id;
const dataSource = ref([]);
const pageInfo = reactive({
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 100,
total: 0,
});
const query = ref(cloneDeep(INITIAL_QUERY));
@ -118,34 +121,34 @@ const handleSearch = () => {
};
const handleReset = () => {
pageInfo.page = 1;
pageInfo.pageSize = 20;
pageInfo.total = 0;
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
const onPageChange = (current) => {
pageInfo.page = current;
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.value.pageSize = pageSize;
reload();
};
const reload = () => {
pageInfo.page = 1;
pageInfo.value.page = 1;
getData();
};
const getData = async () => {
// const { code, data } = await getAccountBoardList(query.value);
// if (code === 200) {
// dataSource.value = data?.list || [];
// pageInfo.total = data.total;
// }
const { code, data } = await getMediaAccountBoardWorks(query.value);
if (code === 200) {
dataSource.value = data?.data || [];
pageInfo.value.total = data.total;
}
};
onMounted(() => {

2
src/views/property-marketing/media-account/account-detail/constants.ts
View File

@ -7,7 +7,7 @@ export const accountInfoFields = [
{ label: '账号名称', dataIndex: 'name' },
{ label: '项目分组', dataIndex: 'group.name' },
{ label: '状态', dataIndex: 'status', type: 'status' },
{ label: '运营人员', dataIndex: 'operator.name' },
{ label: '运营人员', dataIndex: 'operator_name' },
],
[
{ label: 'AI评价', dataIndex: 'ai_evaluation' },

0
src/views/property-marketing/put-account/account-data/components/account-table/constants.ts → src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
View File

31
src/views/property-marketing/put-account/account-data/components/account-table/index.vue → src/views/property-marketing/put-account/account-data/components/board-table/index.vue
View File

@ -4,9 +4,17 @@
-->
<template>
<div class="action-row mb-12px flex justify-between">
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
>全选</a-checkbox
>
<div>
<a-checkbox
v-if="dataSource.length > 0"
:model-value="checkedAll"
:indeterminate="indeterminate"
class="!pl-13px"
@change="handleSelectAll"
>全选</a-checkbox
>
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
@ -35,6 +43,9 @@
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in getColumns()"
@ -77,7 +88,7 @@
class="mr-8px icon"
/>
<div>
<p class="cts">{{ record.ai_evaluation?.text }}</p>
<p class="cts">{{ record.ai_evaluation?.text || '-' }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.ai_evaluation?.look_chain}% CVR: ${record.ai_evaluation?.like_chain}%` }}
</p>
@ -119,7 +130,7 @@
</template>
</a-table>
<CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
<CustomTableColumnModal ref="modalRef" type="placement_account" @success="onCustomColumnSuccess" />
</template>
<script setup>
@ -141,10 +152,6 @@ const props = defineProps({
type: Array,
default: () => [],
},
isAccountTab: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
@ -195,16 +202,12 @@ const handleExport = () => {
};
const getColumns = () => {
const columns = cloneDeep(TABLE_COLUMNS);
// if (!props.isAccountTab) {
// const _target = columns.find((item) => item.dataIndex === 'name');
// _target.title = '项目名称';
// }
return columns;
};
const resetTable = () => {
selectedItems.value = [];
tableRef.value?.clearSorters();
// tableRef.value?.clearSorters();
};
const openCustomColumn = () => {

0
src/views/property-marketing/put-account/account-data/components/account-table/style.scss → src/views/property-marketing/put-account/account-data/components/board-table/style.scss
View File

1
src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
View File

@ -100,6 +100,7 @@ const handleReset = () => {
};
const getGroups = async () => {
console.log('getGroups');
const { code, data } = await getPlacementAccountProjectGroupsList();
if (code === 200) {
groups.value = data;

10
src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
View File

@ -81,8 +81,8 @@
</div>
</template>
<AddGroup ref="addGroupRef" @success="getData" />
<DeleteGroup ref="deleteGroupRef" @success="getData" />
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
</a-modal>
</template>
@ -98,6 +98,7 @@ import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/media-account/icon-empty.png';
import icon3 from '@/assets/img/media-account/icon-add.png';
const emit = defineEmits(['update']);
const visible = ref(false);
const addGroupRef = ref(null);
const deleteGroupRef = ref(null);
@ -133,7 +134,10 @@ const columns = [
},
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
];
const update = () => {
getData();
emit('update');
};
function open() {
visible.value = true;
getData();

209
src/views/property-marketing/put-account/account-data/index.vue
View File

@ -6,8 +6,8 @@
<div class="account-data-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
<a-tab-pane :key="1" title="账户"></a-tab-pane>
<a-tab-pane :key="2" title="项目"></a-tab-pane>
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="项目"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
<template #icon>
@ -17,20 +17,19 @@
</a-button>
</template>
</a-tabs>
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="getData" @onReset="handleReset" />
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
>
<AccountTable
<BoardTable
ref="accountTableRef"
:isAccountTab="isAccountTab"
:dataSource="dataSource"
@export="handleExport"
@sorterChange="handleSorterChange"
@selectionChange="handleSelectionChange"
/>
<div class="pagination-box">
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
@ -45,190 +44,69 @@
</div>
</div>
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups()" />
<GroupManageModal ref="groupManageModalRef" @update="() => filterBlockRef?.getGroups()" />
</div>
</template>
<script setup>
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import BoardTable from './components/board-table';
import GroupManageModal from './components/group-manage-modal';
import {
getPlacementAccountData,
postPlacementAccountDataExport,
getPlacementAccountDataList,
postPlacementAccountDataListExport,
} from '@/api/all/propertyMarketing';
import { INITIAL_QUERY } from './constants';
import icon2 from '@/assets/img/media-account/icon-group.png';
const selectedRowKeys = ref([]);
const activeTab = ref('1');
const accountTableRef = ref(null);
const groupManageModalRef = ref(null);
const filterBlockRef = ref(null);
const query = ref({});
const dataSource = ref([]);
const pageInfo = reactive({
const pageInfo = ref({
page: 1,
pageSize: 20,
total: 100,
});
const selectedRowKeys = ref([]);
const activeTab = ref(1);
const accountTableRef = ref(null);
const groupManageModalRef = ref(null);
const filterBlockRef = ref(null);
const isAccountTab = computed(() => activeTab.value === 1);
const isAccountTab = computed(() => activeTab.value === '1');
const mockData = [
{
id: 1,
name: '抖音官方账号',
mobile: '13800138001',
account_id: 'douyin_001',
holder_name: '张三',
operator_id: 1,
platform: 0,
group_id: 1,
status: 1,
is_pause: 0,
fans_number: 1250000,
like_number: 890000,
collect_number: 45000,
view_number: 5600000,
view_chain: 12.5,
like_chain: 8.3,
total_consumption: 1000000,
balance: 1000000,
roi: 1.2,
roi_chain: -32.5,
cpa: 1.2,
cpa_chain: -32.5,
conversion_number: 10000,
conversion_chain: 12.5,
conversion_rate: 1.2,
conversion_rate_chain: -2.5,
ai_evaluation: {
status: 1,
text: '表现优质 | 建议保持',
look_chain: 12.5,
like_chain: 8.3,
},
operator: {
id: 1,
name: '李运营',
},
group: {
id: 1,
name: '抖音组',
},
},
{
id: 2,
name: '小红书美妆号',
mobile: '13800138002',
account_id: 'xhs_001',
holder_name: '李四',
operator_id: 2,
platform: 1,
group_id: 2,
status: 1,
is_pause: 1,
fans_number: 890000,
like_number: 670000,
collect_number: 89000,
view_number: 3200000,
view_chain: -5.2,
like_chain: 15.7,
total_consumption: 1000000,
balance: 1000000,
roi: 1.2,
roi_chain: 12.5,
cpa: 1.2,
cpa_chain: 22.5,
conversion_number: 10000,
conversion_chain: 12.5,
conversion_rate: 1.2,
conversion_rate_chain: -2.5,
ai_evaluation: {
status: 2,
text: '表现中等 | 建议优化',
look_chain: -12.5,
like_chain: 8.3,
},
operator: {
id: 2,
name: '王运营',
},
group: {
id: 2,
name: '小红书组',
},
},
{
id: 3,
name: '抖音美食号',
mobile: '13800138003',
account_id: 'douyin_002',
holder_name: '王五',
operator_id: 1,
platform: 0,
group_id: 1,
status: 0,
is_pause: 0,
fans_number: 0,
like_number: 0,
collect_number: 0,
view_number: 0,
view_chain: 0,
like_chain: 0,
total_consumption: 1000000,
balance: 1000000,
roi: 32898,
roi_chain: 12.5,
cpa: 1.2,
cpa_chain: -32.5,
conversion_number: 10000,
conversion_chain: 12.5,
conversion_rate: 1.2,
conversion_rate_chain: -2.5,
ai_evaluation: {
status: 3,
text: '表现较差 | 建议整改',
look_chain: -12.5,
like_chain: -8.3,
},
operator: {
id: 1,
name: '李运营',
},
group: {
id: 1,
name: '抖音组',
},
},
];
const getData = () => {
dataSource.value = mockData;
pageInfo.total = mockData.length;
const getData = async () => {
const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList;
const { code, data } = await _fn(query.value);
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data.total;
}
};
const onPageChange = (current) => {
pageInfo.page = current;
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.value.pageSize = pageSize;
reload();
};
const handleSearch = () => {
getData();
};
const reload = () => {
pageInfo.page = 1;
pageInfo.value.page = 1;
getData();
};
const handleReset = () => {
pageInfo.page = 1;
pageInfo.pageSize = 20;
pageInfo.total = 0;
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
selectedRowKeys.value = [];
accountTableRef.value?.resetTable();
query.value = cloneDeep(INITIAL_QUERY);
@ -242,14 +120,25 @@ const handleSorterChange = (column, order) => {
};
const handleSelectionChange = (selectedRows) => {
selectedRowKeys.value = selectedRows;
console.log('选中的账号:', selectedRowKeys.value);
};
const handleTabClick = (tab) => {
activeTab.value = tab.key;
const handleTabClick = (key) => {
activeTab.value = key;
handleReset();
};
const handleExport = () => {
const _fn = isAccountTab.value ? postPlacementAccountDataExport : postPlacementAccountDataListExport;
_fn({
...query.value,
}).then((res) => {
const { code, data } = res;
if (code === 200) {
window.open(data.download_url, '_blank');
}
});
};
const handleOpenGroupModal = () => {
groupManageModalRef.value?.open();
};

18
src/views/property-marketing/put-account/account-manage/index.vue
View File

@ -105,7 +105,7 @@ const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
const deleteAccountRef = ref(null);
const pageInfo = reactive({
const pageInfo = ref({
page: 1,
pageSize: 8,
total: 0,
@ -124,7 +124,7 @@ onMounted(() => {
});
const getData = async () => {
const { page, pageSize } = pageInfo;
const { page, pageSize } = pageInfo.value;
const { code, data, total } = await getPlacementAccounts({
page,
page_size: pageSize,
@ -132,31 +132,31 @@ const getData = async () => {
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.total = data?.total ?? 0;
pageInfo.value.total = data?.total ?? 0;
}
};
const reload = () => {
pageInfo.page = 1;
pageInfo.value.page = 1;
getData();
};
const handleSearch = () => {
getData();
};
const handleReset = () => {
pageInfo.page = 1;
pageInfo.pageSize = 20;
pageInfo.total = 0;
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
selectedItems.value = [];
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
const onPageChange = (current) => {
pageInfo.page = current;
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.value.pageSize = pageSize;
reload();
};