feat: 投放账户数据
This commit is contained in:
rd
@ -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();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user