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

feat: table组件替换

Browse Source
This commit is contained in:
rd
2025-09-04 18:05:16 +08:00
parent aaa8a320c8
commit 3f5249c731
42 changed files with 1816 additions and 1833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/property-marketing/brands/brand-materials/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="brand-wrap">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
<div class="flex items-center">
@ -23,13 +23,13 @@
<div class="filter-row flex">
<Button type="outline" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search class="mr-8px"/>
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh class="mr-8px"/>
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</Button>
@ -46,7 +46,15 @@
<template #title>
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
</template>
<Form :model="form" :rules="formRule" ref="formRef" layout="horizontal" labelAlign="right" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
<Form
:model="form"
:rules="formRule"
ref="formRef"
layout="horizontal"
labelAlign="right"
:labelCol="{ span: 4 }"
:wrapperCol="{ span: 20 }"
>
<FormItem name="name" label="品牌名称">
<Input v-model:value="form.name" class="h-36px" placeholder="请输入..." />
</FormItem>
@ -72,40 +80,32 @@
</Modal>
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
>
<a-table :data="tableData" ref="tableRef" :pagination="false">
<template #columns>
<a-table-column title="品牌名称" data-index="name" />
<a-table-column title="品牌logo" data-index="logo">
<template #cell="{ record }">
<img :src="record.logo" style="width: 50px; height: 50px" />
</template>
</a-table-column>
<a-table-column title="Slogan" data-index="slogan" />
<a-table-column width="150" min-widht="150" title="操作" data-index="optional">
<template #cell="{ record }">
<Space size="medium">
<Space>
<a-popconfirm
content="确定删除吗?"
type="warning"
ok-text="确认删除"
cancel-text="取消"
@ok="deleteBrand(record.id)"
>
<icon-delete></icon-delete>
</a-popconfirm>
</Space>
<Space>
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
</Space>
</Space>
</template>
</a-table-column>
</template>
</a-table>
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
<Table :dataSource="tableData" ref="tableRef" :pagination="false" :showSorterTooltip="false">
<Table.Column title="品牌名称" dataIndex="name" />
<Table.Column title="品牌logo" dataIndex="logo">
<template #customRender="{ record }">
<img :src="record.logo" style="width: 50px; height: 50px" />
</template>
</Table.Column>
<Table.Column title="Slogan" dataIndex="slogan" />
<Table.Column :width="80" title="操作" dataIndex="optional">
<template #customRender="{ record }">
<Space>
<a-popconfirm
content="确定删除吗?"
type="warning"
ok-text="确认删除"
cancel-text="取消"
@ok="deleteBrand(record.id)"
>
<icon-delete></icon-delete>
</a-popconfirm>
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
</Space>
</template>
</Table.Column>
</Table>
<div class="pagination-row">
<a-pagination
@ -128,7 +128,7 @@
import { ref, computed, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { Button, Modal, Space, Form, FormItem, Input } from 'ant-design-vue';
import { Button, Modal, Space, Form, FormItem, Input, Table } from 'ant-design-vue';
const { TextArea } = Input;
import {

21
src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="business-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
</div>
@ -40,9 +40,18 @@
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false"> </a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
v-for="column in columns"
:key="column.dataIndex"
:title="column.title"
:dataIndex="column.dataIndex"
:width="column.width"
:minWidth="column.minWidth"
/>
</Table>
<div class="pagination-row">
<a-pagination
:total="pageInfo.total"
@ -62,7 +71,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Input, Space } from 'ant-design-vue';
import { Button, Input, Space, Table } from 'ant-design-vue';
const pageInfo = reactive({
page: 1,
@ -86,8 +95,8 @@ const columns = [
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
width: 100,
minWidth: 100,
},
{
title: '生成日期',

92
src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="competitive-wrap">
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
</div>
@ -9,8 +9,8 @@
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">服务/产品</span>
<Space size="medium">
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear>
<Space>
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." allowClear>
<template #prefix>
<icon-search />
</template>
@ -42,9 +42,46 @@
</div>
</div>
<div
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
>
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false"> </a-table>
<Table :dataSource="tableData" :pagination="false" :showSorterTooltip="false" @change="handleChange">
<Table.Column
title="服务/产品"
dataIndex="service_name"
:width="60"
:minWidth="60"
/>
<Table.Column
title="生成日期"
dataIndex="create_time"
:width="120"
:minWidth="120"
/>
<Table.Column
:width="180"
:minWidth="180"
title="竞争对手"
dataIndex="customer"
/>
<Table.Column
title="最后更新日期"
dataIndex="volumeRate"
:width="180"
:minWidth="180"
/>
<Table.Column
title="操作人"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
<Table.Column
title="操作"
dataIndex="operator"
:width="120"
:minWidth="120"
/>
</Table>
<div class="pagination-row">
<a-pagination
:total="pageInfo.total"
@ -63,7 +100,7 @@
</template>
<script setup lang="ts">
import { Button, Input, Space } from 'ant-design-vue';
import { Button, Input, Space, Table } from 'ant-design-vue';
import { reactive, ref } from 'vue';
const pageInfo = reactive({
@ -80,50 +117,7 @@ const onPageChange = () => {};
const onPageSizeChange = () => {};
const tableData = ref([]);
const columns = [
{
title: '服务/产品',
dataIndex: 'service_name',
slotName: 'rank',
width: 60,
minWidth: 60,
},
{
title: '生成日期',
dataIndex: 'create_time',
width: 120,
minWidth: 120,
},
{
titleSlotName: 'customer',
width: 180,
minWidth: 180,
title: '竞争对手',
dataIndex: 'customer',
slotName: 'hot',
},
{
titleSlotName: 'lasterUpdateTime',
title: '最后更新日期',
dataIndex: 'volumeRate',
width: 180,
minWidth: 180,
slotName: 'lasterUpdateTime',
},
{
title: '操作人',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
{
title: '操作',
dataIndex: 'operator',
width: 120,
minWidth: 120,
},
];
</script>
<style scoped lang="scss">

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

@ -28,127 +28,122 @@
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="account-table w-100% flex-1"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" position="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<StatusBox :item="record" class="w-fit h-28px" />
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
record[`${getPropPrefix(dateType)}like_rate`]
}%`
}}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
{{
formatNumberShow({
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="20" height="20" class="rounded-4px" />
</template>
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
<StatusBox :item="record" class="w-fit h-28px" />
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{
`观看: ${record[`${getPropPrefix(dateType)}view_rate`]}% 点赞: ${
record[`${getPropPrefix(dateType)}like_rate`]
}%`
}}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'like_collect_number'" #customRender="{ record }">
{{
formatNumberShow({
value: `${record[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
record[`${getPropPrefix(dateType)}collect_number`] ?? 0
}`,
showExactValue: true,
})
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_work_published_at) }}
</p>
</template>
<template v-else-if="column.dataIndex === 'second_new_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.second_new_work_published_at) }}
</p>
</template>
<template v-else-if="column.isRateField" #customRender="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_work_published_at) }}
</p>
</template>
<template v-else-if="column.dataIndex === 'second_new_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">{{ record.second_new_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.second_new_work_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
</a-table-column>
</template>
</a-table>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Column>
<Column dataIndex="operation" fixed="right" :width="100" title="操作">
<template #customRender="{ record }">
<Button type="outline" size="small" @click="handleDetail(record)">详情</Button>
</template>
</Column>
</Table>
<CustomTableColumnModal
ref="customTableColumnModalRef"
@ -161,7 +156,8 @@
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
import { Checkbox, Button, Tooltip, Table } from 'ant-design-vue';
const { Column } = Table;
import { getCustomColumns } from '@/api/all/common';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@ -220,30 +216,34 @@ const tableColumns = computed(() => {
return _result;
});
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}?type=${dateType.value}`);
};
// 处理排序变化
const handleSorterChange = (column, order) => {
console.log(column, order);
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
};
const handleSelect = (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
const handleSelect = (record, selected, selectedRows, nativeEvent) => {
selectedItems.value = selectedRows.map(row => row.id);
emit('selectionChange', selectedRows);
};
const handleSelectAll = (selected, selectedRows, changeRows) => {
if (selected) {
selectedItems.value = props.dataSource.map((item) => item.id);
emit('selectionChange', props.dataSource);
} else {
selectedItems.value = [];
emit('selectionChange', []);
}
};
const handleExport = () => {
emit('export');
};

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

@ -45,54 +45,50 @@
<template #default>重置</template>
</Button>
</div>
<a-table
:data="dataSource"
row-key="id"
<Table
:dataSource="dataSource"
rowKey="id"
:pagination="false"
:scroll="{ x: '100%' }"
class="w-100%"
bordered
column-resizable
:showSorterTooltip="false"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }}
</template>
<template v-else-if="column.dataIndex === 'exposure_number'">
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }}
</template>
<template v-else-if="column.dataIndex === 'exposure_number'">
{{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
<a-pagination
:total="pageInfo.total"
@ -110,7 +106,7 @@
</template>
<script setup>
import { Button, Input, Tooltip } from 'ant-design-vue';
import { Button, Input, Tooltip, Table } from 'ant-design-vue';
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';

2
src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
View File

@ -53,7 +53,7 @@
</template>
<template v-else-if="column.dataIndex === 'group_id'">
<div class="flex items-center w-100%">
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" class="w-full" />
</div>
</template>
</template>

50
src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
View File

@ -47,31 +47,29 @@
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
<a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%" column-resizable>
<template #columns>
<a-table-column title="账号名称" data-index="name" width="200">
<template #cell="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</a-table-column>
<a-table-column title="选择标签" data-index="tags">
<template #cell="{ record, rowIndex }">
<div class="flex items-center w-100%">
<Select
v-model:value="record.tags"
:options="tagOptions"
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:max-tag-count="5"
style="width: 90%"
@search="(val) => handleCreateTag(val, rowIndex)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</a-table-column>
</template>
</a-table>
<Table :dataSource="accountTagList" :pagination="false" rowKey="id" class="w-100%">
<Table.Column title="账号名称" dataIndex="name" :width="200">
<template #customRender="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</Table.Column>
<Table.Column title="选择标签" dataIndex="tags">
<template #customRender="{ record, index }">
<div class="flex items-center w-100%">
<Select
v-model:value="record.tags"
:options="tagOptions"
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:max-tag-count="5"
class="!w-full"
@search="(val) => handleCreateTag(val, index)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</Table.Column>
</Table>
</template>
</Form>
<template #footer>
@ -83,7 +81,7 @@
<script setup>
import { ref, reactive } from 'vue';
import { Button, Modal, Form, FormItem,Tooltip, RadioGroup, Radio, Select } from 'ant-design-vue';
import { Button, Form, FormItem, Modal, Radio, RadioGroup, Select, Table, Tooltip } from 'ant-design-vue';
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png';

71
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
View File

@ -32,18 +32,46 @@
</Button>
</div>
<a-table
column-resizable
:columns="columns"
:data="list"
row-key="id"
<Table
:dataSource="list"
rowKey="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {
if (sorter && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order);
}
}"
>
<template #empty>
<Table.Column title="分组名称" dataIndex="name" />
<Table.Column title="创建人" dataIndex="creator">
<template #customRender="{ record }">
{{ record.creator?.name || '-' }}
</template>
</Table.Column>
<Table.Column
title="创建日期"
dataIndex="created_at"
:width="160"
key="created_at"
:sorter="true"
>
<template #customRender="{ record }">
{{ exactFormatTime(record.created_at) }}
</template>
</Table.Column>
<Table.Column title="操作" :align="'center'" :width="120">
<template #customRender="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
</Table.Column>
<template #emptyText>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<Button type="primary" class="mb-16px" size="middle" @click="openAdd"
@ -54,13 +82,7 @@
</Button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination
:total="pageInfo.total"
@ -82,7 +104,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Modal, Input, Space } from 'ant-design-vue';
import { Button, Input, Modal, Space, Table } from 'ant-design-vue';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
@ -117,24 +139,7 @@ const loading = ref(false);
const query = ref(cloneDeep(INITIAL_QUERY));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const columns = [
{ title: '分组名称', dataIndex: 'name' },
{
title: '创建人',
dataIndex: 'creator',
render: ({ record }) => record.creator?.name || '-',
},
{
title: '创建日期',
dataIndex: 'created_at',
width: 160,
render: ({ record }) => exactFormatTime(record.created_at),
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
];
function open() {
visible.value = true;

81
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
View File

@ -40,56 +40,51 @@
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="rowSelection"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {}"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'created_at'">
{{ exactFormatTime(record.created_at) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<NoData text="暂无账户" />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'created_at'">
{{ exactFormatTime(record.created_at) }}
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</Table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
@ -113,7 +108,7 @@
<script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
import { Button, Input, Select, Table, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';

81
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
View File

@ -43,56 +43,51 @@
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="rowSelection"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {}"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<NoData text="暂无账户"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</Table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
@ -117,7 +112,7 @@
<script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
import { Button, Input, Select, Table, Tooltip } from 'ant-design-vue';
const { Option } = Select;
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';

84
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
View File

@ -43,56 +43,54 @@
</Option>
</Select>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="rowSelection"
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
selectedRowKeys: selectedRowKeys,
onChange: handleSelect,
onSelectAll: handleSelectAll,
}"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</Table.Column>
<template #emptyText>
<NoData text="暂无账号"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #cell="{ record }">
<template v-if="column.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
</template>
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</template>
</a-table-column>
</template>
</a-table>
</Table>
</div>
<div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between">
@ -115,7 +113,7 @@
<script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools';
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
import { Button, Input, Select, Tooltip, Table } from 'ant-design-vue';
const { Option } = Select;
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';

92
src/views/property-marketing/project-manage/project-list/components/project-table/index.vue
View File

@ -1,61 +1,59 @@
<template>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:dataSource="dataSource"
rowKey="id"
:pagination="false"
:scroll="{ x: '100%' }"
class="flex-1 project-table w-100%"
bordered
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<template #emptyText>
<NoData text="暂无项目"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'create_at'" #cell="{ record }">
{{ exactFormatTime(record.create_at) }}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<Button type="primary" ghost size="small" @click="onEdit(record)">编辑</Button>
</div>
</template>
<template v-if="column.dataIndex === 'create_at'" #customRender="{ record }">
{{ exactFormatTime(record.create_at) }}
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<Button type="primary" ghost size="small" @click="onEdit(record)">编辑</Button>
</div>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Column>
</Table>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Tooltip } from 'ant-design-vue';
import { Button, Tooltip, Table } from 'ant-design-vue';
const { Column } = Table;
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
@ -72,9 +70,11 @@ const props = defineProps({
const tableRef = ref(null);
// 处理排序变化
const handleSorterChange = (column, order) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
};
const onDelete = (item) => {
emits('delete', item);

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

@ -29,112 +29,110 @@
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
row-key="id"
column-resizable
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onChange: handleSelect,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="account-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {
if (sorter && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order === 'ascend' ? 'asc' : 'desc');
}
}"
>
<template #empty>
<Table.Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sorter="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #customRender="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #customRender="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #customRender="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #customRender="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #customRender="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFe">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_project_published_at) }}
</p>
</template>
<template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
width="16"
height="16"
:src="record.ai_evaluate?.status === 0 ? icon2 : record.ai_evaluate?.status === 1 ? icon3 : icon4"
class="mr-8px icon"
/>
<div>
<p class="cts">{{ `${record.ai_evaluate?.level} | ${record.ai_evaluate?.advise}` }}。</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ `ROI: ${record.roi}% CVR: ${record.conversion_rate}%` }}
</p>
</div>
</template>
<template v-else>
<p class="cts">-</p>
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<template v-else-if="column.dataIndex === 'newest_work_title'" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFe">{{ record.newest_work_title }}</p>
<p class="cts text-12px lh-20px !color-#939499">
{{ exactFormatTime(record.newest_project_published_at) }}
</p>
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</Table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { Checkbox, Button } from 'ant-design-vue';
import { Button, Checkbox, Table, Tooltip } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField, exactFormatTime } from '@/utils/tools';

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

@ -31,18 +31,39 @@
<template #default>添加新分组</template>
</Button>
</div>
<a-table
column-resizable
:columns="columns"
:data="list"
row-key="id"
<Table
:dataSource="list"
rowKey="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<Column
v-for="column in columns"
:key="column.dataIndex"
:title="column.title"
:dataIndex="column.dataIndex"
:width="column.width"
:align="column.align"
:sortable="column.sortable"
>
<template v-if="column.slotName === 'action'" #customRender="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
<template v-else-if="column.dataIndex === 'creator'" #customRender="{ record }">
{{ record.creator?.name || '-' }}
</template>
<template v-else-if="column.dataIndex === 'created_at'" #customRender="{ record }">
{{ exactFormatTime(record.created_at) }}
</template>
</Column>
<template #emptyText>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<Button type="primary" class="mb-16px" size="medium" @click="openAdd"
@ -53,13 +74,7 @@
</Button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" @click="openEdit(record)">编辑</Button>
</div>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination
:total="pageInfo.total"
@ -81,9 +96,10 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Modal, Input, Space } from 'ant-design-vue';
import { Button, Modal, Input, Space, Table } from 'ant-design-vue';
import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
const { Column } = Table;
import AddGroup from './add-group.vue';
import DeleteGroup from './delete-group.vue';
@ -159,9 +175,9 @@ function openDelete(record) {
deleteGroupRef.value.open(record);
}
const handleSorterChange = (column, order) => {
query.value.sort_column = column;
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
const handleTableChange = (pagination, filters, sorter) => {
query.value.sort_column = sorter.field;
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
getData();
};
async function getData() {

130
src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
View File

@ -29,62 +29,55 @@
</div>
</div>
<a-table
<Table
ref="tableRef"
column-resizable
:data="dataSource"
row-key="id"
:row-selection="{
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
selectedRowKeys: selectedItems,
onChange: handleSelect,
onSelectAll: handleSelectAll,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="plan-table w-100%"
bordered
@sorter-change="handleSorterChange"
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="handleTableChange"
>
<template #empty>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
<Table.Column
v-for="column in tableColumns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'status'">
<div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span>
</div>
</template>
<template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'ai_evaluate'">
<div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate">
<img
@ -105,41 +98,40 @@
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<template v-else-if="column.dataIndex === 'operation'">
<Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
<template v-else-if="column.isRateField">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }}
</div>
</template>
<!-- <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
</template> -->
<template v-else #cell="{ record }">
<template v-else>
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
</a-table>
</Table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template>
<script setup>
import { Checkbox, Button } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { Checkbox, Button, Table } from 'ant-design-vue';
import { ref, computed, onMounted } from 'vue';
import { cloneDeep, union } from 'lodash-es';
import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router';
import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common';
const { Column } = Table;
import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.png';
@ -172,22 +164,11 @@ const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
);
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
// 处理表格变化（排序、分页等）
const handleTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
emit('selectionChange', checked ? selectedItems.value : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
// 处理排序变化
const handleSorterChange = (column, order) => {
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
};
const handleSelect = (selectedRowKeys, selectedRows) => {
@ -195,6 +176,19 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
emit('selectionChange', selectedRows);
};
const handleSelectAll = (selected, selectedRows, changeRows) => {
if (selected) {
selectedItems.value = props.dataSource.map((item) => item.id);
} else {
selectedItems.value = [];
}
emit('selectionChange', selected ? selectedRows : []);
};
const handleDetail = (record) => {
router.push(`/media-account/detail/${record.id}`);
};
const handleExport = () => {
emit('export');
};

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

@ -7,17 +7,15 @@
<div class="filter-wrap bg-#fff rounded-8px mb-16px">
<Tabs v-model:activeKey="activeTab" @change="handleTabClick" size="large">
<TabPane key="1" tab="账户"></TabPane>
<TabPane key="2" tab="计划">
<template v-if="!isAccountTab" #tab>
计划
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</Button>
</template>
</TabPane>
<TabPane key="2" tab="计划"> </TabPane>
<template v-if="!isAccountTab" #rightExtra>
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</Button>
</template>
</Tabs>
<FilterBlock
ref="filterBlockRef"

72
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
View File

@ -42,51 +42,46 @@
</div>
</div>
<a-table
<Table
ref="tableRef"
:data="dataSource"
column-resizable
:row-selection="rowSelection"
:row-key="ROW_KEY"
:dataSource="dataSource"
:rowSelection="rowSelection"
:rowKey="ROW_KEY"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
class="w-100% flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
:showSorterTooltip="false"
@change="(pagination, filters, sorter) => {}"
>
<template #empty>
<Table.Column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:minWidth="column.minWidth"
:sortable="column.sortable"
:align="column.align"
:ellipsis="true"
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #customRender="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</Table.Column>
<template #emptyText>
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS"
:key="column.dataIndex"
:data-index="column.dataIndex"
:fixed="column.fixed"
:width="column.width"
:min-width="column.minWidth"
:sortable="column.sortable"
:align="column.align"
ellipsis
tooltip
>
<template #title>
<div class="flex items-center">
<span class="cts mr-4px">{{ column.title }}</span>
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</Tooltip>
</div>
</template>
<template #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
</Table>
<div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
<a-pagination
:total="pageInfo.total"
@ -115,12 +110,11 @@
</template>
<script setup>
import { Button, Input, Tooltip } from 'ant-design-vue';
import { Button, Input, Modal, Table, Tooltip } from 'ant-design-vue';
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
import { formatTableField } from '@/utils/tools';
import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { Modal } from 'ant-design-vue';
const emits = defineEmits('confirm');
const update = inject('update');

119
src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
View File

@ -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';

281
src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
View File

@ -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>