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

perf: 表格自定义字段调整

Browse Source
This commit is contained in:
rd
2025-07-07 10:01:59 +08:00
parent 1dae78f770
commit 5d237ec618
7 changed files with 140 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
View File

@ -28,7 +28,7 @@
:disabled="option.is_require === ENUM_STATUS.NO" :disabled="option.is_require === ENUM_STATUS.NO"
@change="(checked) => onCheckChange(checked, option)" @change="(checked) => onCheckChange(checked, option)"
> >
{{ option.label }} {{ localFields.find((item) => item.prop === option.value)?.title }}
</a-checkbox> </a-checkbox>
</div> </div>
</div> </div>
@ -77,7 +77,7 @@ import { ref, defineExpose } from 'vue';
import { VueDraggable } from 'vue-draggable-plus'; import { VueDraggable } from 'vue-draggable-plus';
import { getCustomColumns, updateCustomColumns } from '@/api/all/common'; import { getCustomColumns, updateCustomColumns } from '@/api/all/common';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants'; import { getPropPrefix, getDefaultColumns } from '@/views/property-marketing/media-account/account-dashboard/constants';
import icon1 from './img/icon-lock.png'; import icon1 from './img/icon-lock.png';
@ -106,9 +106,13 @@ const dataSource = ref([]);
const checkColumns = ref([]); // 选中字段 const checkColumns = ref([]); // 选中字段
const allColumns = ref([]); // 所有字段 const allColumns = ref([]); // 所有字段
const requiredGroupNames = ref([]); // 必选分组名称 const requiredGroupNames = ref([]); // 必选分组名称
const localFields = ref([]);
const open = () => { const open = () => {
initData(); initData();
localFields.value = getDefaultColumns(props.dateType);
visible.value = true; visible.value = true;
}; };
@ -118,6 +122,7 @@ const close = () => {
dataSource.value = []; dataSource.value = [];
checkColumns.value = []; checkColumns.value = [];
allColumns.value = []; allColumns.value = [];
localFields.value = [];
requiredGroupNames.value = []; requiredGroupNames.value = [];
}; };
@ -150,8 +155,8 @@ const isCheck = (option) => {
return checkColumns.value.includes(option.value); return checkColumns.value.includes(option.value);
}; };
const getCheckColumnLabel = (value) => { const getCheckColumnLabel = (value) => {
const column = allColumns.value.find((column) => column.value === value); const column = localFields.value.find((column) => column.prop === value);
return column?.label; return column?.title;
}; };
const isRequiredColumn = (value) => { const isRequiredColumn = (value) => {
const column = allColumns.value.find((column) => column.value === value); const column = allColumns.value.find((column) => column.value === value);

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

@ -72,7 +72,7 @@ export const getDefaultColumns = (type = 'week') => {
fixed: 'left', fixed: 'left',
}, },
{ {
title: '项目分组', title: '账号分组',
dataIndex: 'group.name', dataIndex: 'group.name',
prop: 'group', prop: 'group',
width: 180, width: 180,
@ -111,7 +111,7 @@ export const getDefaultColumns = (type = 'week') => {
{ {
title: '总赞藏数', title: '总赞藏数',
dataIndex: 'like_collect_number', dataIndex: 'like_collect_number',
prop: 'like_collect_number', prop: 'like_number',
width: 180, width: 180,
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。', tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
align: 'right', align: 'right',
@ -222,6 +222,17 @@ export const getDefaultColumns = (type = 'week') => {
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
}, },
{
title: '次新作品收藏数',
dataIndex: 'second_new_work_collect_number',
prop: 'second_new_work_collect_number',
width: 180,
tooltip: '次新作品内容的收藏数',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ {
title: '次新作品评论数', title: '次新作品评论数',
dataIndex: 'second_new_work_comment_number', dataIndex: 'second_new_work_comment_number',

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

@ -20,7 +20,7 @@ export const TABLE_COLUMNS = [
{ {
title: '运营人员', title: '运营人员',
dataIndex: 'operator_ame', dataIndex: 'operator_ame',
prop: 'operator_ame', prop: 'operator',
width: 180, width: 180,
}, },
{ {
@ -73,8 +73,8 @@ export const TABLE_COLUMNS = [
}, },
// { // {
// title: '账户余额', // title: '账户余额',
// dataIndex: 'balance', // dataIndex: 'balance_amount',
// prop: 'balance', // prop: 'balance_amount',
// width: 180, // width: 180,
// tooltip: '当前账户剩余的可用余额，用于后续广告投放。', // tooltip: '当前账户剩余的可用余额，用于后续广告投放。',
// prefix: '¥', // prefix: '¥',
@ -83,23 +83,23 @@ export const TABLE_COLUMNS = [
// sortDirections: ['ascend', 'descend'], // sortDirections: ['ascend', 'descend'],
// }, // },
// }, // },
// { {
// title: 'AI评价', title: 'AI评价',
// dataIndex: 'ai_evaluate', dataIndex: 'ai_evaluate',
// prop: 'ai_evaluate', prop: 'ai_evaluate',
// width: 260, width: 260,
// }, },
// { {
// title: '投资回报率', title: '投资回报率',
// dataIndex: 'roi', dataIndex: 'roi',
// prop: 'roi', prop: 'roi',
// width: 180, width: 180,
// tooltip: '投入产出比（ROI），等于收益 ÷ 投入，反映投放带来的商业价值。', tooltip: '投入产出比（ROI），等于收益 ÷ 投入，反映投放带来的商业价值。',
// align: 'right', align: 'right',
// sortable: { sortable: {
// sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
// }, },
// }, },
// { // {
// title: '投资回报率环比', // title: '投资回报率环比',
// dataIndex: 'roi_chain', // dataIndex: 'roi_chain',
@ -114,7 +114,7 @@ export const TABLE_COLUMNS = [
// }, // },
// }, // },
{ {
title: '展示量', title: '展示数',
dataIndex: 'show_number', dataIndex: 'show_number',
prop: 'show_number', prop: 'show_number',
width: 180, width: 180,
@ -124,21 +124,21 @@ export const TABLE_COLUMNS = [
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
}, },
// {
// title: '展示量环比',
// dataIndex: 'view_number_chain',
// prop: 'view_number_chain',
// width: 180,
// tooltip: '展示量与上一周期的变化百分比，反映广告曝光趋势。',
// align: 'right',
// suffix: '%',
// isRateField: true,
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{ {
title: '点击量', title: '展示数环比',
dataIndex: 'show_number_chain',
prop: 'show_number_chain',
width: 180,
tooltip: '展示数与上一周期的变化百分比，反映广告曝光趋势。',
align: 'right',
suffix: '%',
isRateField: true,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '点击数',
dataIndex: 'click_number', dataIndex: 'click_number',
prop: 'click_number', prop: 'click_number',
width: 180, width: 180,
@ -148,19 +148,19 @@ export const TABLE_COLUMNS = [
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
}, },
// { {
// title: '点击量环比', title: '点击数环比',
// dataIndex: 'click_number_chain', dataIndex: 'click_number_chain',
// prop: 'click_number_chain', prop: 'click_number_chain',
// width: 180, width: 180,
// tooltip: '当前周期点击量相较上一周期的变化百分比。', tooltip: '当前周期点击数相较上一周期的变化百分比。',
// align: 'right', align: 'right',
// suffix: '%', suffix: '%',
// isRateField: true, isRateField: true,
// sortable: { sortable: {
// sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
// }, },
// }, },
{ {
title: '点击率', title: '点击率',
dataIndex: 'click_rate', dataIndex: 'click_rate',
@ -172,19 +172,19 @@ export const TABLE_COLUMNS = [
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
}, },
// { {
// title: '点击率环比', title: '点击率环比',
// dataIndex: 'click_rate_chain', dataIndex: 'click_rate_chain',
// prop: 'click_rate_chain', prop: 'click_rate_chain',
// width: 180, width: 180,
// tooltip: '当前 CTR 相较上一周期的变化百分比，评估广告表现是否优化。', tooltip: '当前 CTR 相较上一周期的变化百分比，评估广告表现是否优化。',
// align: 'right', align: 'right',
// suffix: '%', suffix: '%',
// isRateField: true, isRateField: true,
// sortable: { sortable: {
// sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
// }, },
// }, },
{ {
title: '平均点击成本', title: '平均点击成本',
dataIndex: 'avg_click_cost', dataIndex: 'avg_click_cost',
@ -197,7 +197,7 @@ export const TABLE_COLUMNS = [
}, },
}, },
{ {
title: '千次展现费用', title: '千次展示费用',
dataIndex: 'thousand_show_cost', dataIndex: 'thousand_show_cost',
prop: 'thousand_show_cost', prop: 'thousand_show_cost',
width: 180, width: 180,
@ -296,14 +296,4 @@ export const TABLE_COLUMNS = [
// prop: 'newest_work_title', // prop: 'newest_work_title',
// width: 260, // width: 260,
// }, // },
// {
// title: '投放回报率',
// dataIndex: 'roi_chain1',
// prop: 'roi_chain1',
// width: 180,
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
]; ];

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

@ -48,7 +48,7 @@
<a-range-picker <a-range-picker
v-model="query.data_time" v-model="query.data_time"
size="medium" size="medium"
allow-clear :allow-clear="false"
format="YYYY-MM-DD" format="YYYY-MM-DD"
class="w-100%" class="w-100%"
@change="handleSearch" @change="handleSearch"

72
src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts
View File

@ -34,7 +34,7 @@ export const TABLE_COLUMNS = [
{ {
title: '运营人员', title: '运营人员',
dataIndex: 'operator_name', dataIndex: 'operator_name',
prop: 'operator_name', prop: 'operator',
width: 180, width: 180,
}, },
{ {
@ -51,8 +51,8 @@ export const TABLE_COLUMNS = [
}, },
// { // {
// title: '账户余额', // title: '账户余额',
// dataIndex: 'balance', // dataIndex: 'balance_amount',
// prop: 'balance', // prop: 'balance_amount',
// width: 180, // width: 180,
// tooltip: '当前投流计划剩余可用预算，用于后续广告持续投放。', // tooltip: '当前投流计划剩余可用预算，用于后续广告持续投放。',
// prefix: '¥', // prefix: '¥',
@ -61,25 +61,25 @@ export const TABLE_COLUMNS = [
// sortDirections: ['ascend', 'descend'], // sortDirections: ['ascend', 'descend'],
// }, // },
// }, // },
// {
// title: 'AI评价',
// dataIndex: 'ai_evaluate',
// prop: 'ai_evaluate',
// width: 260,
// },
// {
// title: '投资回报率',
// dataIndex: 'roi',
// prop: 'roi',
// width: 180,
// tooltip: '投入产出比（ROI），= 收益 ÷ 投入，用于衡量该计划的经济效益。',
// align: 'right',
// sortable: {
// sortDirections: ['ascend', 'descend'],
// },
// },
{ {
title: '展示量', title: 'AI评价',
dataIndex: 'ai_evaluate',
prop: 'ai_evaluate',
width: 260,
},
{
title: '投资回报率',
dataIndex: 'roi',
prop: 'roi',
width: 180,
tooltip: '投入产出比（ROI），= 收益 ÷ 投入，用于衡量该计划的经济效益。',
align: 'right',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '展示数',
dataIndex: 'show_number', dataIndex: 'show_number',
prop: 'show_number', prop: 'show_number',
width: 180, width: 180,
@ -90,7 +90,7 @@ export const TABLE_COLUMNS = [
}, },
}, },
{ {
title: '点击量', title: '点击数',
dataIndex: 'click_number', dataIndex: 'click_number',
prop: 'click_number', prop: 'click_number',
width: 180, width: 180,
@ -111,19 +111,19 @@ export const TABLE_COLUMNS = [
sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
}, },
}, },
// { {
// title: '点击率环比', title: '点击率环比',
// dataIndex: 'click_rate_chain', dataIndex: 'click_rate_chain',
// prop: 'click_rate_chain', prop: 'click_rate_chain',
// width: 180, width: 180,
// tooltip: '当前 CTR 与上一周期对比的变化百分比，用于追踪广告吸引力趋势。', tooltip: '当前 CTR 与上一周期对比的变化百分比，用于追踪广告吸引力趋势。',
// align: 'right', align: 'right',
// suffix: '%', suffix: '%',
// isRateField: true, isRateField: true,
// sortable: { sortable: {
// sortDirections: ['ascend', 'descend'], sortDirections: ['ascend', 'descend'],
// }, },
// }, },
{ {
title: '平均点击成本', title: '平均点击成本',
dataIndex: 'avg_click_cost', dataIndex: 'avg_click_cost',
@ -136,7 +136,7 @@ export const TABLE_COLUMNS = [
}, },
}, },
{ {
title: '千次展现费用', title: '千次展示费用',
dataIndex: 'thousand_show_cost', dataIndex: 'thousand_show_cost',
prop: 'thousand_show_cost', prop: 'thousand_show_cost',
width: 180, width: 180,

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

@ -22,7 +22,7 @@
v-model:query="query" v-model:query="query"
:isAccountTab="isAccountTab" :isAccountTab="isAccountTab"
@onSearch="getData" @onSearch="getData"
@onReset="handleReset" @onReset="init"
/> />
</div> </div>
<div <div
@ -84,6 +84,19 @@ const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const isAccountTab = computed(() => activeTab.value === '1'); const isAccountTab = computed(() => activeTab.value === '1');
const init = () => {
query.value = cloneDeep(INITIAL_QUERY);
dataSource.value = [];
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
selectedRowKeys.value = [];
accountTableRef.value?.resetTable();
const data_time = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
query.value.data_time = data_time;
getData();
};
const getData = async () => { const getData = async () => {
const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList; const _fn = isAccountTab.value ? getPlacementAccountData : getPlacementAccountDataList;
const { page, page_size } = pageInfo.value; const { page, page_size } = pageInfo.value;
@ -113,14 +126,6 @@ const reload = () => {
getData(); getData();
}; };
const handleReset = () => {
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
selectedRowKeys.value = [];
accountTableRef.value?.resetTable();
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
const handleSorterChange = (column, order) => { const handleSorterChange = (column, order) => {
query.value.column = column; query.value.column = column;
query.value.order = order; query.value.order = order;
@ -132,8 +137,7 @@ const handleSelectionChange = (selectedRows) => {
const handleTabClick = (key) => { const handleTabClick = (key) => {
activeTab.value = key; activeTab.value = key;
dataSource.value = []; init();
handleReset();
}; };
const handleExport = () => { const handleExport = () => {
@ -153,7 +157,7 @@ const handleOpenGroupModal = () => {
}; };
onMounted(() => { onMounted(() => {
getData(); init();
}); });
</script> </script>

6
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -119,14 +119,14 @@
<a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled /> <a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
</a-form-item> </a-form-item>
</template> </template>
<a-form-item label="同步项目数据" field="is_sync"> <a-form-item label="同步项目数据" field="is_sync_project">
<template #label> <template #label>
<span class="label">同步项目数据</span> <span class="label">同步项目数据</span>
<a-tooltip content="同步项目数据后，账户数据将同步到项目中"> <a-tooltip content="同步项目数据后，账户数据将同步到项目中">
<icon-question-circle size="14" class="ml-4px color-#737478" /> <icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip> </a-tooltip>
</template> </template>
<a-switch v-model="form.is_sync" size="medium" :checked-value="1" :un-checked-value="0" /> <a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :un-checked-value="0" />
</a-form-item> </a-form-item>
</template> </template>
</a-form> </a-form>
@ -173,7 +173,7 @@ const INITIAL_FORM = {
operator_name: '', operator_name: '',
holder_name: '', holder_name: '',
platform: 0, platform: 0,
is_sync: 0, is_sync_project: 0,
}; };
const visible = ref(false); const visible = ref(false);