feat: table组件替换
This commit is contained in:
rd
@ -1,73 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<a-table class="account-table" :columns="columns" :data="listData" :pagination="false">
|
||||
<template #platform="{ record }">
|
||||
<span class="mr-8px" v-if="record.platform.length > 0" v-for="(item, index) in record.platform">
|
||||
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
|
||||
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template #operation="{ record }">
|
||||
<Space size="medium">
|
||||
<Table class="account-table" :dataSource="listData" :pagination="false" :showSorterTooltip="false" @change="(pagination, filters, sorter) => {}">
|
||||
<Table.Column
|
||||
title="生成日期"
|
||||
dataIndex="created_at"
|
||||
:width="60"
|
||||
:minWidth="60"
|
||||
/>
|
||||
<Table.Column
|
||||
title="账号"
|
||||
dataIndex="account"
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
/>
|
||||
<Table.Column
|
||||
:width="180"
|
||||
:minWidth="180"
|
||||
title="计划"
|
||||
dataIndex="plan"
|
||||
/>
|
||||
<Table.Column
|
||||
title="平台"
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
>
|
||||
<template #customRender="{ record }">
|
||||
<template v-if="record.platform.length > 0">
|
||||
<span class="mr-8px" v-for="(item, index) in record.platform" :key="index">
|
||||
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
|
||||
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
title="操作"
|
||||
dataIndex="operation"
|
||||
:width="60"
|
||||
:minWidth="60"
|
||||
>
|
||||
<template #customRender="{ record }">
|
||||
<Space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteData(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
<Space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteData(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
|
||||
<Button type="primary" ghost @click="goDetail(record.id)" class="operation-btn">详情</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
|
||||
<Button type="primary" ghost @click="goDetail(record.id)" class="operation-btn">详情</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Space } from 'ant-design-vue';
|
||||
import { Button, Space, Table } from 'ant-design-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '生成日期',
|
||||
dataIndex: 'created_at',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'account',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '计划',
|
||||
dataIndex: 'plan',
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'platform',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
slotName: 'operation',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
];
|
||||
|
||||
// hotTranslation.vue
|
||||
import { useRouter } from 'vue-router';
|
||||
import { deleteHistorylog } from '@/api/all/propertyMarketing';
|
||||
|
||||
@ -1,98 +1,144 @@
|
||||
<template>
|
||||
<view class="table-data">
|
||||
<a-table
|
||||
<Table
|
||||
class="account-table"
|
||||
:columns="columns"
|
||||
:data="listData"
|
||||
:dataSource="listData"
|
||||
:pagination="false"
|
||||
@sorter-change="handleSorterChange"
|
||||
:showSorterTooltip="false"
|
||||
@change="(pagination, filters, sorter) => {
|
||||
if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
|
||||
handleSorterChange(sorter.columnKey, sorter.order);
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #total_use_amount_label>
|
||||
<Space>
|
||||
<span>本周总消耗</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>当前周内所有投流账户的累计广告花费，反映整体投放规模。</p>
|
||||
<Table.Column
|
||||
title="账户名称"
|
||||
dataIndex="account_name"
|
||||
:width="60"
|
||||
:minWidth="60"
|
||||
/>
|
||||
<Table.Column
|
||||
:width="180"
|
||||
:minWidth="180"
|
||||
title="计划名称"
|
||||
dataIndex="name"
|
||||
/>
|
||||
<Table.Column
|
||||
title="平台"
|
||||
dataIndex="platform"
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
>
|
||||
<template #customRender="{ record }">
|
||||
<div class="field-row">
|
||||
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
|
||||
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
key="total_use_amount"
|
||||
:sorter="true"
|
||||
dataIndex="total_use_amount"
|
||||
>
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>本周总消耗</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>当前周内所有投流账户的累计广告花费，反映整体投放规模。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<Space>￥{{ record.total_use_amount }}</Space>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
key="pre_total_use_amount_chain"
|
||||
:sorter="true"
|
||||
dataIndex="pre_total_use_amount_chain"
|
||||
>
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>本周总消耗环比</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周消耗金额与上周对比的变化百分比，用于衡量预算投放趋势。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<a-statistic
|
||||
:value="record.pre_total_use_amount_chain * 100"
|
||||
:value-style="{
|
||||
color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
|
||||
fontStyle: 'normal',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-rise v-if="record.pre_total_use_amount_chain > 0" />
|
||||
<icon-arrow-down v-else />
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #pre_total_use_amount_chain_title>
|
||||
<Space>
|
||||
<span>本周总消耗环比</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周消耗金额与上周对比的变化百分比，用于衡量预算投放趋势。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #roi>
|
||||
<Space>
|
||||
<span>ROI</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>投资回报率（ROI）= 收益 ÷ 投入成本，反映整体投流账户的收益效率。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #ctr>
|
||||
<Space>
|
||||
<span>CTR</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>点击率（CTR）= 点击量 ÷ 展示量，是衡量广告素材吸引力的关键指标。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
|
||||
<template #platform="{ record }">
|
||||
<div class="field-row">
|
||||
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
|
||||
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #total_use_amount="{ record }">
|
||||
<Space>￥{{ record.total_use_amount }}</Space>
|
||||
</template>
|
||||
|
||||
<template #total_use_amoun2="{ record }">
|
||||
<div class="field-row">
|
||||
<img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
|
||||
<span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #pre_total_use_amount_chain="{ record }">
|
||||
<a-statistic
|
||||
:value="record.pre_total_use_amount_chain * 100"
|
||||
:value-style="{
|
||||
color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
|
||||
fontStyle: 'normal',
|
||||
fontSize: '14px',
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-rise v-if="record.pre_total_use_amount_chain > 0" />
|
||||
<icon-arrow-down v-else />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
|
||||
<template #clickRate="{ record }">
|
||||
<span>{{ `${record.click_rate}%` }}</span>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
dataIndex="roi"
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
key="roi"
|
||||
:sorter="true"
|
||||
>
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>ROI</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>投资回报率（ROI）= 收益 ÷ 投入成本，反映整体投流账户的收益效率。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
dataIndex="click_rate"
|
||||
:width="120"
|
||||
:minWidth="120"
|
||||
key="click_rate"
|
||||
:sorter="true"
|
||||
>
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>CTR</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>点击率（CTR）= 点击量 ÷ 展示量，是衡量广告素材吸引力的关键指标。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<span>{{ `${record.click_rate}%` }}</span>
|
||||
</template>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Space } from "ant-design-vue"
|
||||
import { Space, Table } from "ant-design-vue"
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
|
||||
const props = defineProps({
|
||||
@ -109,69 +155,6 @@ const emit = defineEmits(['updateQuery']);
|
||||
const handleSorterChange = (column, order) => {
|
||||
emit('updateQuery', { column, order });
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '账户名称',
|
||||
dataIndex: 'account_name',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '计划名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'platform',
|
||||
},
|
||||
{
|
||||
title: '本周总消耗',
|
||||
titleSlotName: 'total_use_amount_label',
|
||||
dataIndex: 'total_use_amount',
|
||||
slotName: 'total_use_amount',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '本周总消耗环比',
|
||||
titleSlotName: 'pre_total_use_amount_chain_title',
|
||||
dataIndex: 'pre_total_use_amount_chain',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'pre_total_use_amount_chain',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
titleSlotName: 'roi',
|
||||
dataIndex: 'roi',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
titleSlotName: 'ctr',
|
||||
dataIndex: 'click_rate',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
slotName: 'clickRate',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
Reference in New Issue
Block a user