feat: 投放账户数据
This commit is contained in:
rd
@ -21,7 +21,7 @@ export function configAutoImport() {
|
||||
'@vueuse/core',
|
||||
{
|
||||
dayjs: [['default', 'dayjs']],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union'],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'isNumber'],
|
||||
'@/hooks': ['useModal'],
|
||||
},
|
||||
],
|
||||
|
||||
@ -234,3 +234,28 @@ export const putPlacementAccountProjectGroups = (params = {}) => {
|
||||
export const deletePlacementAccountProjectGroups = (id: string) => {
|
||||
return Http.delete(`/v1/placement-account-project-groups/${id}`);
|
||||
};
|
||||
|
||||
// 账号笔记-分页
|
||||
export const getMediaAccountBoardWorks = (id: string, params = {}) => {
|
||||
return Http.get(`/v1/media-account-boards/${id}/works`, params);
|
||||
};
|
||||
|
||||
// 投放账号数据-分页
|
||||
export const getPlacementAccountData = (params = {}) => {
|
||||
return Http.get('/v1/placement-account-boards', params);
|
||||
};
|
||||
|
||||
// 投放账号数据-导出
|
||||
export const postPlacementAccountDataExport = (params = {}) => {
|
||||
return Http.post('/v1/placement-account-boards/export', params);
|
||||
};
|
||||
|
||||
// 投放账户项目数据-分页
|
||||
export const getPlacementAccountDataList = (params = {}) => {
|
||||
return Http.get('/v1/placement-account-projects', params);
|
||||
};
|
||||
|
||||
// 投放账户项目数据-导出
|
||||
export const postPlacementAccountDataListExport = (params = {}) => {
|
||||
return Http.post('/v1/placement-account-projects/export', params);
|
||||
};
|
||||
|
||||
@ -1,389 +0,0 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-30 13:51:40
|
||||
-->
|
||||
<template>
|
||||
<el-drawer v-model:visible="visible" direction="rtl" :wrapperClosable="false" class="com-custom-table-field">
|
||||
<div slot="title" class="drawer-header flex align-items-center">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="range">指标最少选择{{ min }}个字段，最多选择{{ max }}个，已选择{{ checkLength }}个</span>
|
||||
<slot></slot>
|
||||
<!-- <div
|
||||
class="font-weight-400 font-size-12 color-primary cursor-pointer"
|
||||
@click="onFieldDescClick"
|
||||
>
|
||||
<span>数据字段说明</span>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="panel-wrapper">
|
||||
<div class="custom-panel left ui-card-block">
|
||||
<!-- <div class="flex justify-content-space-between">
|
||||
<div class="hd">
|
||||
全部字段【{{ columnLength }}个】
|
||||
<span>请至少选择{{ min }}个字段</span
|
||||
><span v-if="max">至多{{ max }}个字段</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div> -->
|
||||
|
||||
<div class="bd">
|
||||
<template v-for="column in columns">
|
||||
<div v-if="column.children.length" :key="column.prop" class="bd-item">
|
||||
<div class="flex">
|
||||
<p class="title width-fit-content">{{ column.label }}</p>
|
||||
<svg-icon v-if="column.icon" :icon-class="column.icon.name" :style="column.icon.style" class="icon" />
|
||||
</div>
|
||||
<el-checkbox
|
||||
v-for="item in column.children"
|
||||
:key="`${item.prop}${Math.random()}`"
|
||||
:label="item"
|
||||
:disabled="
|
||||
!column.editable ||
|
||||
!item.editable ||
|
||||
(isMax && !getItemChecked(item)) ||
|
||||
(isMin && getItemChecked(item))
|
||||
"
|
||||
:data-checked="getItemChecked(item)"
|
||||
:checked="getItemChecked(item) || item.selectDisabled"
|
||||
@change="onCheckColumns(item, column.prop, column)"
|
||||
>
|
||||
<div class="flex align-item-center">
|
||||
<FieldTooltip
|
||||
v-if="showNewTooltip"
|
||||
:openDelay="300"
|
||||
:fieldTooltip="item.fieldTooltip"
|
||||
:fieldTooltip2="item.fieldTooltip2"
|
||||
:title="item.label"
|
||||
:fieldCase="item.fieldCase"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</FieldTooltip>
|
||||
<el-tooltip
|
||||
v-else
|
||||
popper-class="ui-overflow-tooltip"
|
||||
effect="dark"
|
||||
:content="item.fieldTooltip"
|
||||
placement="top-start"
|
||||
:open-delay="300"
|
||||
:disabled="!item.fieldTooltip"
|
||||
>
|
||||
<div slot="content">
|
||||
<div v-html="item.fieldTooltip"></div>
|
||||
</div>
|
||||
<span>{{ item.label }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
<svg-icon v-if="item.icon" :icon-class="item.icon.name" :style="item.icon.style" class="icon" />
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-panel right ui-card-block">
|
||||
<div class="hd flex justify-content-space-between align-items-center mr14">
|
||||
<span class="hd-check-num">已选({{ `${checkLength}` }})</span>
|
||||
|
||||
<span class="label">长按可拖动调整展示排序</span>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<div class="column-row">
|
||||
<draggable v-model="checkColumns">
|
||||
<transition-group>
|
||||
<div v-for="checkColumn in checkColumns" :key="checkColumn.prop" class="column-item mb16">
|
||||
<p class="title">{{ checkColumn.label }}</p>
|
||||
<draggable v-model="checkColumn.children">
|
||||
<transition-group>
|
||||
<div v-for="item in checkColumn.children" :key="item.prop" class="column-children-item">
|
||||
<i class="el-icon-more"></i>
|
||||
<i class="el-icon-more"></i>
|
||||
<span class="label">{{ item.label }}</span>
|
||||
|
||||
<i class="el-icon-close" @click="onDelete(item, checkColumn.prop)"></i>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit-row">
|
||||
<el-button @click="visible = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmit"> 确定 </el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cloneDeep } from 'lodash';
|
||||
import draggable from 'vuedraggable';
|
||||
import { setCustomTableFields } from '@/api/common';
|
||||
import { includes } from '@/utils/tools';
|
||||
import FieldTooltip from '@/components/CommonTooltip/FieldTooltip';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
FieldTooltip,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '自定义表格字段',
|
||||
},
|
||||
// 表格类型
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 默认字段
|
||||
defaultColumns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 至少字段
|
||||
min: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// 至多字段
|
||||
max: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
showNewTooltip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
other_setting: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkColumns: [], // 选中字段
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 选择区，显示字段
|
||||
columns() {
|
||||
const list = cloneDeep(this.defaultColumns);
|
||||
list.forEach((item) => {
|
||||
item.children = item.children.sort((a, b) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
});
|
||||
return list.sort((a, b) => {
|
||||
return a.order - b.order;
|
||||
});
|
||||
},
|
||||
columnLength() {
|
||||
return this.columns.length || 0;
|
||||
},
|
||||
checkLength() {
|
||||
return this.getFlatColumns().length || 0;
|
||||
},
|
||||
isMin() {
|
||||
return this.min && this.checkLength - 1 < this.min;
|
||||
},
|
||||
// 勾选数量达到最大值
|
||||
isMax() {
|
||||
return this.max && this.checkLength + 1 > this.max;
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
includes,
|
||||
init() {
|
||||
this.initCheckColumns();
|
||||
},
|
||||
// 初始化选中字段
|
||||
initCheckColumns() {
|
||||
const list = cloneDeep(this.defaultColumns);
|
||||
this.checkColumns = this.getCheckColumns(list);
|
||||
},
|
||||
getFlatColumns() {
|
||||
const fields = cloneDeep(this.checkColumns);
|
||||
let _flatColumns = [];
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const { children, ...props } = fields[i];
|
||||
_flatColumns = [..._flatColumns, ...children];
|
||||
}
|
||||
return _flatColumns;
|
||||
},
|
||||
getItemChecked(item) {
|
||||
return !!this.getFlatColumns().some((column) => column.prop === item.prop);
|
||||
},
|
||||
|
||||
onCheckColumns(data, parentProp, column) {
|
||||
const _target = this.checkColumns.find((v) => v.prop === parentProp);
|
||||
const isChecked = this.getItemChecked(data);
|
||||
const fn = () => {
|
||||
if (this.checkLength === this.max) {
|
||||
this.$message.warning(`指标最多选择${this.max}个`);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增一组
|
||||
if (!_target) {
|
||||
const { children, ...props } = column;
|
||||
this.checkColumns.push({
|
||||
...props,
|
||||
children: [
|
||||
{
|
||||
...data,
|
||||
is_show: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
fn();
|
||||
return;
|
||||
}
|
||||
if (isChecked) {
|
||||
if (_target.children.length === 1) {
|
||||
const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
|
||||
this.checkColumns.splice(_index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
_target.children.forEach((item, index) => {
|
||||
if (item.prop == data.prop) {
|
||||
_target.children.splice(index, 1);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
_target.children.push({
|
||||
...data,
|
||||
is_show: true,
|
||||
});
|
||||
|
||||
fn();
|
||||
}
|
||||
},
|
||||
onDelete(data, parentProp) {
|
||||
if (this.isMin) {
|
||||
return this.$message.warning(`最少选择${this.min}个指标`);
|
||||
}
|
||||
|
||||
const _target = this.checkColumns.find((v) => v.prop === parentProp);
|
||||
// 该组最后一项，直接删除整组
|
||||
if (_target.children.length === 1) {
|
||||
const _index = this.checkColumns.findIndex((v) => v.prop === parentProp);
|
||||
this.checkColumns.splice(_index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
_target.children.forEach((item, index) => {
|
||||
if (item.prop == data.prop) {
|
||||
_target.children.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
// this.$forceUpdate();
|
||||
},
|
||||
// 获取重新排序后数组
|
||||
getSortedColumns() {
|
||||
let columns = cloneDeep(this.columns); // 复制原数据列
|
||||
const checkColumns = cloneDeep(this.checkColumns); // 复制已选数据列
|
||||
|
||||
// 全部置为false
|
||||
columns.forEach((column) => {
|
||||
if (column.editable) {
|
||||
column.is_show = false;
|
||||
column.children.forEach((item) => item.editable && (item.is_show = false));
|
||||
}
|
||||
});
|
||||
|
||||
// 对父级分组排序
|
||||
checkColumns.forEach((checkColumn) => {
|
||||
const _index = columns.findIndex((column) => column.prop === checkColumn.prop);
|
||||
if (_index > -1) {
|
||||
const item = columns.splice(_index, 1)[0];
|
||||
columns.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
// 对子级元素分组排序
|
||||
for (let i = 0; i < checkColumns.length; i++) {
|
||||
const { prop, children } = checkColumns[i];
|
||||
const _target = columns.find((v) => v.prop === prop);
|
||||
const _allIndex = children.map((item) => item.prop);
|
||||
|
||||
// if (_allIndex === 0) {
|
||||
// _target.is_show = false;
|
||||
// break;
|
||||
// }
|
||||
|
||||
_target.is_show = true;
|
||||
// 删除已勾选的数据，再把这些数据插入到数组最后面
|
||||
_target.children = _target.children.filter((item) => !_allIndex.includes(item.prop));
|
||||
|
||||
_target.children = [..._target.children, ...children];
|
||||
}
|
||||
return columns;
|
||||
},
|
||||
async onSubmit() {
|
||||
if (this.max && this.checkLength > this.max) {
|
||||
this.$message.error(`你已经选择${this.checkLength}个,最多不能超过${this.max}个`);
|
||||
return;
|
||||
}
|
||||
if (this.min && this.checkLength < this.min) {
|
||||
this.$message.error(`你已经选择${this.checkLength}个,至少不能少于${this.min}个`);
|
||||
return;
|
||||
}
|
||||
const fields = this.getSortedColumns();
|
||||
|
||||
try {
|
||||
const { code } = await setCustomTableFields({
|
||||
custom_type: this.type,
|
||||
fields,
|
||||
other_setting: this.other_setting,
|
||||
});
|
||||
if (code === 0) this.$message.success('保存成功');
|
||||
this.visible = false;
|
||||
this.$emit('submit', fields);
|
||||
} catch (err) {
|
||||
this.$message.error(err);
|
||||
}
|
||||
},
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
this.init();
|
||||
},
|
||||
onFieldDescClick() {
|
||||
this.$emit('onFieldDescClick');
|
||||
},
|
||||
getCheckColumns(list) {
|
||||
let arr = [];
|
||||
for (let i = 0, j = list.length; i < j; i++) {
|
||||
if (list[i].editable) {
|
||||
let obj = { ...list[i], children: [] };
|
||||
for (let l = 0, k = list[i].children.length; l < k; l++) {
|
||||
if (list[i].children[l].is_show && list[i].children[l].editable) {
|
||||
obj.children.push(list[i].children[l]);
|
||||
}
|
||||
}
|
||||
if (obj.children.length) {
|
||||
arr.push(obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -11,8 +11,6 @@ const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
console.log({ appStore });
|
||||
|
||||
useResponsive(true);
|
||||
const navbarHeight = `72px`;
|
||||
const navbar = computed(() => appStore.navbar);
|
||||
|
||||
@ -74,7 +74,7 @@ export function formatTableField(fieldItem: any, rowValue: any, showExactValue =
|
||||
};
|
||||
|
||||
const _getValue = (value: any) => {
|
||||
if (isNaN(value)) return value;
|
||||
if (!isNumber(value)) return value || '-';
|
||||
return formatNumberShow({ value, showExactValue });
|
||||
};
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export const TABLE_COLUMNS = [
|
||||
},
|
||||
{
|
||||
title: '总赞藏数',
|
||||
dataIndex: 'like_number',
|
||||
dataIndex: 'like_collect_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的点赞和收藏总数',
|
||||
align: 'right',
|
||||
|
||||
@ -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"
|
||||
<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) => {
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -39,7 +39,7 @@ export const INITIAL_QUERY = {
|
||||
status: '',
|
||||
operator_id: '',
|
||||
group_ids: [],
|
||||
date_range: '',
|
||||
// date_range: '',
|
||||
column: '',
|
||||
order: '',
|
||||
};
|
||||
|
||||
@ -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');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
@ -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' },
|
||||
|
||||
@ -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"
|
||||
<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 = () => {
|
||||
@ -100,6 +100,7 @@ const handleReset = () => {
|
||||
};
|
||||
|
||||
const getGroups = async () => {
|
||||
console.log('getGroups');
|
||||
const { code, data } = await getPlacementAccountProjectGroupsList();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user