feat: table组件替换
This commit is contained in:
rd
@ -33,6 +33,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
const select = selectedKeys.includes(rowKeyValue);
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
|
||||
console.log('handleSelect', selectedKeys, rowKeyValue, record);
|
||||
if (select) {
|
||||
if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
|
||||
selectedRows.value.push(record);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Checkbox, Input, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue';
|
||||
import { Button, Checkbox, Input, Tooltip, Table, Pagination } from 'ant-design-vue';
|
||||
import { Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
import NoData from '@/components/no-data';
|
||||
@ -15,6 +15,8 @@ import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
@ -77,10 +79,12 @@ export default {
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
const handleSorterChange = (pagination, filters, sorter) => {
|
||||
if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
|
||||
query.value.sort_column = sorter.columnKey;
|
||||
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
@ -273,110 +277,103 @@ export default {
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
row-selection={rowSelection.value}
|
||||
selected-keys={selectedRowKeys.value}
|
||||
dataSource={dataSource.value}
|
||||
rowKey="id"
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys, rows) => handleSelect(keys, rows),
|
||||
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
|
||||
}}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
showSorterTooltip={false}
|
||||
onChange={handleSorterChange}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
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
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status !== enumTaskStatus.Exporting && (
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
class="search-btn"
|
||||
onClick={() => handleDownload(record)}
|
||||
>
|
||||
{record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
emptyText: () => <NoData />,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<Table.Column
|
||||
key={column.dataIndex}
|
||||
dataIndex={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
minWidth={column.minWidth}
|
||||
sorter={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
title={() => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
customRender={({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<Table.Column
|
||||
dataIndex="operation"
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
customRender={({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status !== enumTaskStatus.Exporting && (
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
class="search-btn"
|
||||
onClick={() => handleDownload(record)}
|
||||
>
|
||||
{record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
showTotal={(total, range) => `共 ${total} 条记录`}
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
pageSize={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onShowSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue';
|
||||
import { Button, Tooltip, Table, Pagination } from 'ant-design-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
@ -73,10 +72,12 @@ export default {
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
const handleSorterChange = (pagination, filters, sorter) => {
|
||||
if (sorter && sorter.columnKey) {
|
||||
query.value.sort_column = sorter.columnKey;
|
||||
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
@ -121,103 +122,97 @@ export default {
|
||||
<div class="import-task-wrap">
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
selected-keys={selectedRowKeys.value}
|
||||
dataSource={dataSource.value}
|
||||
rowKey="id"
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys, rows) => handleSelect(keys, rows),
|
||||
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
|
||||
}}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
showSorterTooltip={false}
|
||||
onChange={handleSorterChange}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
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
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status === enumTaskStatus.Failed && (
|
||||
<Button type="primary" ghost size="small" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
下载问题表格
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<Table.Column
|
||||
key={column.dataIndex}
|
||||
dataIndex={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
minWidth={column.minWidth}
|
||||
sorter={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
title={() => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
customRender={({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<Table.Column
|
||||
dataIndex="operation"
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
customRender={({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status === enumTaskStatus.Failed && (
|
||||
<Button type="primary" ghost size="small" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
下载问题表格
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
showTotal={(total, range) => `共 ${total} 条记录`}
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
pageSize={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onShowSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -13,39 +13,37 @@
|
||||
.ant-table-container {
|
||||
border: none !important;
|
||||
height: 100%;
|
||||
.ant-table-content {
|
||||
.ant-table-thead {
|
||||
> tr {
|
||||
.ant-table-cell {
|
||||
padding: 13px 16px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
border-start-start-radius: 0 !important;
|
||||
border-start-end-radius: 0 !important;
|
||||
@include table-cell-text;
|
||||
font-family: 'PingFangSC-Medium';
|
||||
.ant-table-column-sorters {
|
||||
justify-content: normal;
|
||||
.ant-table-column-title {
|
||||
flex: none;
|
||||
}
|
||||
.ant-table-column-sorter {
|
||||
margin-left: 8px;
|
||||
color: #939499;
|
||||
line-height: normal;
|
||||
.anticon.active {
|
||||
color: $color-primary;
|
||||
}
|
||||
.ant-table-thead {
|
||||
> tr {
|
||||
.ant-table-cell {
|
||||
padding: 13px 16px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
border-start-start-radius: 0 !important;
|
||||
border-start-end-radius: 0 !important;
|
||||
@include table-cell-text;
|
||||
font-family: 'PingFangSC-Medium';
|
||||
.ant-table-column-sorters {
|
||||
justify-content: normal;
|
||||
.ant-table-column-title {
|
||||
flex: none;
|
||||
}
|
||||
.ant-table-column-sorter {
|
||||
margin-left: 8px;
|
||||
color: #939499;
|
||||
line-height: normal;
|
||||
.anticon.active {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
padding: 11px 16px;
|
||||
@include table-cell-text;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
.ant-table-row {
|
||||
.ant-table-cell {
|
||||
padding: 11px 16px;
|
||||
@include table-cell-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,70 +10,77 @@
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
<Table
|
||||
:dataSource="dataList"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column
|
||||
v-for="column in columns"
|
||||
:key="column.dataIndex"
|
||||
:title="column.title"
|
||||
:dataIndex="column.dataIndex"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-if="column.slotName === 'rank'" #customRender="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'hot'" #customRender="{ record }">
|
||||
<img
|
||||
v-for="i in record.hot"
|
||||
:key="i"
|
||||
:src="starImages[i - 1]"
|
||||
style="width: 16px; height: 16px"
|
||||
class="mr-2px"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'sentiment'" #customRender="{ record }">
|
||||
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'hotTitle'" #title>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'sentimentTitle'" #title>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">情感倾向</span>
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||
>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #hotTitle>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #sentimentTitle>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-8px">情感倾向</span>
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||
>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template #keywords="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template #hot="{ record }">
|
||||
<img
|
||||
v-for="i in record.hot"
|
||||
:key="i"
|
||||
:src="starImages[i - 1]"
|
||||
style="width: 16px; height: 16px"
|
||||
class="mr-2px"
|
||||
/>
|
||||
</template>
|
||||
<template #sentiment="{ record }">
|
||||
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||
</template>
|
||||
|
||||
<template #optional="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</div>
|
||||
<Modal
|
||||
v-model:open="visible"
|
||||
@ -146,7 +153,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button, Tooltip,Space } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
@ -256,7 +263,7 @@ onMounted(() => {
|
||||
const getIndustriesTree = async () => {
|
||||
const res = await fetchIndustriesTree();
|
||||
industriesTree.value = res;
|
||||
selectedIndustry.value = res[0].id;
|
||||
selectedIndustry.value = res[0]?.id;
|
||||
getIndustryTopics();
|
||||
};
|
||||
|
||||
|
||||
@ -16,62 +16,72 @@
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
<Table
|
||||
:dataSource="dataList"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column
|
||||
v-for="column in columns"
|
||||
:key="column.dataIndex"
|
||||
:title="column.title"
|
||||
:dataIndex="column.dataIndex"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-if="column.slotName === 'rank'" #customRender="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'hot'" #customRender="{ record }">
|
||||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'trend'" #customRender="{ record }">
|
||||
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
|
||||
<icon-arrow-up v-if="record.trend > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ `${(record.trend * 100).toFixed(2)}%` }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'volumeRate'" #customRender="{ record }">
|
||||
<a-statistic :value="record.volume_rate * 100" />%
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'hotTitle'" #title>
|
||||
<Space>
|
||||
<span>热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'trendTitle'" #title>
|
||||
<Space>
|
||||
<span>变化幅度</span>
|
||||
<Tooltip>
|
||||
<template #title>仅基于品牌出现频次。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'volume_rateTitle'" #title>
|
||||
<Space>
|
||||
<span>占总声量比例</span>
|
||||
<Tooltip>
|
||||
<template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #hotTitle>
|
||||
<Space>
|
||||
<span>热度指数</span>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #trendTitle>
|
||||
<Space>
|
||||
<span>变化幅度</span>
|
||||
<Tooltip>
|
||||
<template #title>仅基于品牌出现频次。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #volume_rateTitle>
|
||||
<Space>
|
||||
<span>占总声量比例</span>
|
||||
<Tooltip>
|
||||
<template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template #hot="{ record }">
|
||||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||||
</template>
|
||||
<template #trend="{ record }">
|
||||
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
|
||||
<icon-arrow-up v-if="record.trend > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ `${(record.trend * 100).toFixed(2)}%` }}
|
||||
</div>
|
||||
</template>
|
||||
<template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
<!-- 舆情 & 敏感动态-->
|
||||
<Space
|
||||
@ -88,18 +98,27 @@
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
|
||||
<template #empty>
|
||||
<Table :dataSource="otherList" :pagination="false" :showSorterTooltip="false" style="font-size: 12px">
|
||||
<Table.Column
|
||||
v-for="column in columns2"
|
||||
:key="column.dataIndex"
|
||||
:title="column.title"
|
||||
:dataIndex="column.dataIndex"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
/>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Tooltip, Space } from 'ant-design-vue';
|
||||
import { Tooltip, Space, Table } from 'ant-design-vue';
|
||||
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
|
||||
@ -15,15 +15,15 @@
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
:dataSource="dataList"
|
||||
:scroll="{ x: true }"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #heatLevel>
|
||||
@ -69,7 +69,7 @@
|
||||
{{ `${(record.trend * 100).toFixed(2)}%` }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
<!-- 行业情绪 -->
|
||||
<Space
|
||||
@ -103,17 +103,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
<Table
|
||||
class="flex-1"
|
||||
:columns="columns2"
|
||||
:data="sortedRowData"
|
||||
:span-method="spanMethod"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
:dataSource="sortedRowData"
|
||||
:scroll="{ x: true }"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #felling="{ record }">
|
||||
@ -122,7 +121,7 @@
|
||||
<span>{{ fellingStatus[record.felling].label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</div>
|
||||
</Space>
|
||||
<!-- 新兴关键词 -->
|
||||
@ -140,15 +139,15 @@
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
<Table
|
||||
:columns="columns3"
|
||||
:data="keywordList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
:dataSource="keywordList"
|
||||
:scroll="{ x: true }"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
@ -209,7 +208,7 @@
|
||||
<template #optional="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
<!-- modal -->
|
||||
<Modal
|
||||
|
||||
@ -17,44 +17,51 @@
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
:scroll="true"
|
||||
<Table
|
||||
:dataSource="dataList"
|
||||
:pagination="false"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column
|
||||
v-for="column in columns"
|
||||
:key="column.dataIndex"
|
||||
:title="column.title"
|
||||
:dataIndex="column.dataIndex"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-if="column.slotName === 'rank'" #customRender="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
|
||||
<a-tag
|
||||
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
|
||||
frequencyStatus[record.frequency].color
|
||||
}`"
|
||||
>{{ frequencyStatus[record.frequency].label }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||||
<span v-else>{{ record.rank }}</span>
|
||||
</template>
|
||||
<template #keywords="{ record }">
|
||||
<a-tag
|
||||
v-for="item in record.keywords"
|
||||
:key="item"
|
||||
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
<template #frequency="{ record }">
|
||||
<a-tag
|
||||
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
|
||||
frequencyStatus[record.frequency].color
|
||||
}`"
|
||||
>{{ frequencyStatus[record.frequency].label }}</a-tag
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #optional="{ record }">
|
||||
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
</Space>
|
||||
|
||||
<Modal
|
||||
@ -120,7 +127,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button, Tooltip, Space } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
|
||||
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
|
||||
@ -92,36 +92,30 @@
|
||||
<div class="flex flex-col h-486px">
|
||||
<Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large">
|
||||
<TabPane key="1" tab="省份">
|
||||
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
|
||||
<template #empty>
|
||||
<Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank" />
|
||||
<a-table-column title="省份" data-index="geo" />
|
||||
<a-table-column title="分布占比" data-index="rate" />
|
||||
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
<Column title="排名" dataIndex="rank" />
|
||||
<Column title="省份" dataIndex="geo" />
|
||||
<Column title="分布占比" dataIndex="rate" />
|
||||
<Column title="TGI指数" dataIndex="tgi" />
|
||||
</Table>
|
||||
</TabPane>
|
||||
<TabPane key="2" tab="城市">
|
||||
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
|
||||
<template #empty>
|
||||
<Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank" />
|
||||
<a-table-column title="城市" data-index="geo" />
|
||||
<a-table-column title="分布占比" data-index="rate">
|
||||
<template #cell="{ record }">
|
||||
<span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
<Column title="排名" dataIndex="rank" />
|
||||
<Column title="城市" dataIndex="geo" />
|
||||
<Column title="分布占比" dataIndex="rate">
|
||||
<template #customRender="{ record }">
|
||||
<span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column title="TGI指数" dataIndex="tgi" />
|
||||
</Table>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
@ -138,8 +132,9 @@ import * as echarts from 'echarts';
|
||||
import chinaJson from '@/assets/maps/china.json';
|
||||
|
||||
echarts.registerMap('china', chinaJson);
|
||||
import { Tabs, Tooltip, Space } from 'ant-design-vue';
|
||||
import { Tabs, Tooltip, Space, Table } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
const { Column } = Table;
|
||||
|
||||
const scope = ref(1); // 地域范围，1-省，2-市
|
||||
const chartInstance = (ref < echarts.ECharts) | (null > null);
|
||||
|
||||
@ -4,38 +4,41 @@
|
||||
<span class="title">账号管理</span>
|
||||
<Button type="primary" ghost class="add-account-button" @click="handleAddAccount">添加子账号</Button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataSource"
|
||||
<Table
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:showSorterTooltip="false"
|
||||
class="mt-8px"
|
||||
@page-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<Table.Column title="手机号" dataIndex="mobile">
|
||||
<template #customRender="{ record }">
|
||||
<div class="flex item-center pt-13px pb-13px">
|
||||
<span class="mr-4px">{{ record.mobile }}</span>
|
||||
<a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
|
||||
<a-tag v-else class="sub-account">子账号</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="操作" dataIndex="action" width="120">
|
||||
<template #customRender="{ record }">
|
||||
<Button
|
||||
v-if="record.type !== 0"
|
||||
class="delete-button"
|
||||
size="small"
|
||||
type="primary"
|
||||
ghost
|
||||
danger
|
||||
@click="openDeleteModal(record)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #mobile="{ record }">
|
||||
<div class="flex item-center pt-13px pb-13px">
|
||||
<span class="mr-4px">{{ record.mobile }}</span>
|
||||
<a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
|
||||
<a-tag v-else class="sub-account">子账号</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<Button
|
||||
v-if="record.type !== 0"
|
||||
class="delete-button"
|
||||
size="small"
|
||||
type="primary"
|
||||
ghost
|
||||
danger
|
||||
@click="openDeleteModal(record)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
<Modal v-model:open="addAccountVisible" centered width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
|
||||
<div v-if="canAddAccount" class="add-account-container">
|
||||
<h2 class="add-account-title">生成企业专属链接，成员通过访问即可注册并加入企业账号。</h2>
|
||||
@ -59,9 +62,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Container from '@/components/container.vue';
|
||||
import { ref, onMounted, reactive, computed } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Table } from 'ant-design-vue';
|
||||
|
||||
import { fetchSubAccountPage, removeEnterpriseAccount, getEnterpriseInviteCode } from '@/api/all';
|
||||
import Modal from '@/components/modal.vue';
|
||||
@ -84,10 +86,10 @@ const columns = [
|
||||
const dataSource = ref([]);
|
||||
const pagination = reactive({
|
||||
total: 0,
|
||||
showPageSize: true,
|
||||
showTotal: true,
|
||||
defaultCurrent: 1,
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number, range: [number, number]) => `共 ${total} 条记录`,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const params = reactive({
|
||||
@ -122,13 +124,12 @@ const currentSelectAccount = ref();
|
||||
|
||||
const { copy, copied, isSupported } = useClipboard({ source: inviteUrl });
|
||||
|
||||
function handlePageChange(current: number) {
|
||||
params.page = current;
|
||||
getSubAccount();
|
||||
}
|
||||
|
||||
function handlePageSizeChange(pageSize: number) {
|
||||
params.page_size = pageSize;
|
||||
function handleTableChange(paginationInfo: any, filters: any, sorter: any) {
|
||||
params.page = paginationInfo.current;
|
||||
params.page_size = paginationInfo.pageSize;
|
||||
// 更新分页状态
|
||||
pagination.current = paginationInfo.current;
|
||||
pagination.pageSize = paginationInfo.pageSize;
|
||||
getSubAccount();
|
||||
}
|
||||
|
||||
|
||||
@ -3,17 +3,21 @@
|
||||
<div class="title-row">
|
||||
<span class="title">企业信息</span>
|
||||
</div>
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
|
||||
<template #empty>
|
||||
<Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
|
||||
<Table.Column title="企业信息" dataIndex="info">
|
||||
<template #customRender="{ record }">
|
||||
{{ record.name }}
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="操作" dataIndex="action" width="120">
|
||||
<template #customRender>
|
||||
<Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #info="{ record }">
|
||||
{{ record.name }}
|
||||
</template>
|
||||
<template #action>
|
||||
<Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
<Modal
|
||||
v-model:open="infoVisible"
|
||||
width="480px"
|
||||
@ -45,7 +49,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
|
||||
import Container from '@/components/container.vue';
|
||||
import Modal from '@/components/modal.vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
|
||||
@ -3,22 +3,26 @@
|
||||
<div class="title-row">
|
||||
<span class="title">个人信息</span>
|
||||
</div>
|
||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
|
||||
<template #empty>
|
||||
<Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
|
||||
<Table.Column title="用户信息" dataIndex="info">
|
||||
<template #customRender="{ record }">
|
||||
<div class="pt-3px pb-3px">
|
||||
<a-avatar :image-url="record.head_image" :size="32" />
|
||||
{{ record.name || '-' }}
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
||||
</div>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column title="手机号" dataIndex="mobile">
|
||||
<template #customRender="{ record }">
|
||||
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
|
||||
</template>
|
||||
</Table.Column>
|
||||
<template #emptyText>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #info="{ record }">
|
||||
<div class="pt-3px pb-3px">
|
||||
<a-avatar :image-url="record.head_image" :size="32" />
|
||||
{{ record.name || '-' }}
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #mobile="{ record }">
|
||||
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
|
||||
</template>
|
||||
</a-table>
|
||||
</Table>
|
||||
<Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
|
||||
<Form
|
||||
class="form"
|
||||
@ -81,7 +85,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
|
||||
import Container from '@/components/container.vue';
|
||||
import Modal from '@/components/modal.vue';
|
||||
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';
|
||||
|
||||
@ -152,7 +152,7 @@ const props = defineProps({
|
||||
},
|
||||
rowSelection: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
default: () => {},
|
||||
},
|
||||
selectedRowKeys: {
|
||||
type: Array,
|
||||
@ -175,6 +175,7 @@ const handleTableChange = (pagination, filters, sorter) => {
|
||||
const rowSelection = {
|
||||
selectedRowKeys: computed(() => props.selectedRowKeys),
|
||||
onSelect: (record, selected, selectedRows, nativeEvent) => {
|
||||
console.log(selectedRows, record);
|
||||
emits(
|
||||
'select',
|
||||
selectedRows.map((row) => row.id),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const INITIAL_FORM = {
|
||||
audit_status: '',
|
||||
audit_status: undefined,
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Button, Modal, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination } from '@arco-design/web-vue';
|
||||
import { Button, Modal, Tooltip, Table, Pagination } from 'ant-design-vue';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
|
||||
@ -112,10 +111,12 @@ export default {
|
||||
const onShare = () => {
|
||||
shareModalRef.value?.open(selectedRowKeys.value);
|
||||
};
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
const handleSorterChange = (pagination, filters, sorter) => {
|
||||
if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
|
||||
query.value.sort_column = sorter.columnKey;
|
||||
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
}
|
||||
};
|
||||
const getStatusInfo = (audit_status) => {
|
||||
return CHECK_STATUS.find((v) => v.id === audit_status) ?? {};
|
||||
@ -163,109 +164,100 @@ export default {
|
||||
</div>
|
||||
<Table
|
||||
ref={tableRef}
|
||||
data={dataSource.value}
|
||||
row-key="id"
|
||||
column-resizable
|
||||
row-selection={rowSelection.value}
|
||||
selected-keys={selectedRowKeys.value}
|
||||
dataSource={dataSource.value}
|
||||
rowKey="id"
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys, rows) => handleSelect(keys, rows),
|
||||
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows),
|
||||
}}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
showSorterTooltip={false}
|
||||
onChange={handleSorterChange}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
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
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px bold color-#211F24">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'audit_status') {
|
||||
return (
|
||||
<div
|
||||
class="flex items-center w-fit h-24px px-8px rounded-2px"
|
||||
style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
|
||||
>
|
||||
<span class="cts s1 bold" style={{ color: getStatusInfo(record.audit_status).color }}>
|
||||
{getStatusInfo(record.audit_status).name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'title') {
|
||||
return <TextOverTips context={record.title} />;
|
||||
} else if (column.dataIndex === 'type') {
|
||||
return (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={record.type === EnumManuscriptType.Image ? icon2 : icon3}
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span
|
||||
class={`cts !text-14px !lh-22px ${
|
||||
record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
|
||||
}`}
|
||||
>
|
||||
{record.type === EnumManuscriptType.Image ? '图文' : '视频'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'last_modified_at') {
|
||||
return (
|
||||
<span class="cts num">
|
||||
{exactFormatTime(
|
||||
record.last_modified_at,
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
),
|
||||
emptyText: () => <NoData />,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<Table.Column
|
||||
key={column.dataIndex}
|
||||
dataIndex={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
minWidth={column.minWidth}
|
||||
sorter={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
title={() => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px bold color-#211F24">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
customRender={({ record }) => {
|
||||
if (column.dataIndex === 'audit_status') {
|
||||
return (
|
||||
<div
|
||||
class="flex items-center w-fit h-24px px-8px rounded-2px"
|
||||
style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
|
||||
>
|
||||
<span class="cts s1 bold" style={{ color: getStatusInfo(record.audit_status).color }}>
|
||||
{getStatusInfo(record.audit_status).name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'title') {
|
||||
return <TextOverTips context={record.title} class="!text-12px" />;
|
||||
} else if (column.dataIndex === 'type') {
|
||||
return (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={record.type === EnumManuscriptType.Image ? icon2 : icon3}
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span
|
||||
class={`cts !text-14px !lh-22px ${
|
||||
record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
|
||||
}`}
|
||||
>
|
||||
{record.type === EnumManuscriptType.Image ? '图文' : '视频'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'last_modified_at') {
|
||||
return (
|
||||
<span class="cts num">
|
||||
{exactFormatTime(record.last_modified_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Table>
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end mt-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
size="small"
|
||||
showTotal={(total, range) => `共 ${total} 条记录`}
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
pageSize={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onShowSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -23,44 +23,31 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.arco-scrollbar-track {
|
||||
.ant-scrollbar-track {
|
||||
display: none !important;
|
||||
}
|
||||
.arco-table {
|
||||
.arco-table-container {
|
||||
.arco-table-element {
|
||||
thead {
|
||||
.arco-table-tr {
|
||||
.arco-table-th {
|
||||
.arco-table-cell {
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
.arco-table-tr {
|
||||
.arco-table-td {
|
||||
.arco-table-cell {
|
||||
padding: 6px 16px;
|
||||
.arco-table-cell-content,
|
||||
.arco-table-td-content {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table {
|
||||
.ant-table-thead {
|
||||
.ant-table-cell {
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
}
|
||||
.ant-table-body {
|
||||
.ant-table-cell {
|
||||
padding: 6px 16px;
|
||||
.ant-table-cell-content {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-pagination {
|
||||
.arco-pagination-total,
|
||||
.arco-pagination-jumper-prepend {
|
||||
.ant-pagination {
|
||||
.ant-pagination-total-text,
|
||||
.ant-pagination-options-quick-jumper {
|
||||
font-size: 14px;
|
||||
}
|
||||
.arco-pagination-jumper-prepend {
|
||||
.ant-pagination-options-quick-jumper {
|
||||
font-family: $font-family-regular;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ export const INITIAL_QUERY = {
|
||||
title: '',
|
||||
// project_ids: [],
|
||||
uid: '',
|
||||
audit_status: '',
|
||||
audit_status: undefined,
|
||||
created_at: [],
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
@ -25,19 +25,19 @@ export const CHECK_STATUS = [
|
||||
name: '待审核',
|
||||
id: EnumCheckStatus.Wait,
|
||||
backgroundColor: '#F2F3F5',
|
||||
color: '#3C4043'
|
||||
color: '#3C4043',
|
||||
},
|
||||
{
|
||||
name: '审核中',
|
||||
id: EnumCheckStatus.Checking,
|
||||
backgroundColor: '#FFF7E5',
|
||||
color: '#FFAE00'
|
||||
color: '#FFAE00',
|
||||
},
|
||||
{
|
||||
name: '已通过',
|
||||
id: EnumCheckStatus.Passed,
|
||||
backgroundColor: '#EBF7F2',
|
||||
color: '#25C883'
|
||||
color: '#25C883',
|
||||
},
|
||||
];
|
||||
export const MANUSCRIPT_TYPE = [
|
||||
@ -53,4 +53,4 @@ export const MANUSCRIPT_TYPE = [
|
||||
label: '视频',
|
||||
value: EnumManuscriptType.Video,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<script lang="jsx" setup>
|
||||
import { defineComponent } from 'vue';
|
||||
import { Button } from '@arco-design/web-vue';
|
||||
import { Button, Pagination } from '@arco-design/web-vue';
|
||||
import FilterBlock from './components/filter-block';
|
||||
import ManuscriptTable from './components/manuscript-table';
|
||||
import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue';
|
||||
|
||||
@ -1,90 +1,85 @@
|
||||
<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 manuscript-table w-100%"
|
||||
bordered
|
||||
:row-selection="rowSelection"
|
||||
:selected-row-keys="selectedRowKeys"
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
|
||||
@select-all="(check) => emits('selectAll', check)"
|
||||
:rowSelection="rowSelection"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无文件" />
|
||||
</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">
|
||||
<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>
|
||||
<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">
|
||||
<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 === 'name'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<Image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" :preview="false">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</Image>
|
||||
</HoverImagePreview>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
|
||||
<TextOverTips :context="`序号：${record.uid}`" :line="1" class="cts !color-#737478 regular" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'name'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
|
||||
<TextOverTips :context="`序号：${record.uid}`" :line="1" class="cts !color-#737478 regular" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
{{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'size'" #cell="{ record }">
|
||||
<span class="cts num">{{ formatFileSize(record.size) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'origin'" #cell="{ record }">
|
||||
{{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template #cell="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</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="onDownload(record)">下载</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
|
||||
{{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'size'" #customRender="{ record }">
|
||||
<span class="cts num">{{ formatFileSize(record.size) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'origin'" #customRender="{ record }">
|
||||
{{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template #customRender="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</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="onDownload(record)">下载</Button>
|
||||
</div>
|
||||
</template>
|
||||
<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 { ref, computed } from 'vue';
|
||||
import { Button, Tooltip, Table, Image } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
|
||||
import { slsWithCatch } from '@/utils/stroage.ts';
|
||||
import { TABS_LIST, ORIGIN_LIST } from '../../constants';
|
||||
@ -122,8 +117,20 @@ 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 rowSelection = {
|
||||
selectedRowKeys: computed(() => props.selectedRowKeys),
|
||||
onSelect: (record, selected, selectedRows, nativeEvent) => {
|
||||
emits('select', selectedRows.map(row => row.id), record.id, record);
|
||||
},
|
||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
emits('selectAll', selected);
|
||||
},
|
||||
};
|
||||
const onDelete = (item) => {
|
||||
emits('delete', item);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: '生成日期',
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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');
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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');
|
||||
};
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,135 +1,130 @@
|
||||
<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 manuscript-table w-100%"
|
||||
bordered
|
||||
:row-selection="rowSelection"
|
||||
:selected-row-keys="selectedRowKeys"
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
|
||||
@select-all="(check) => emits('selectAll', check)"
|
||||
:rowSelection="rowSelection"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无稿件" />
|
||||
</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">
|
||||
<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 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">
|
||||
<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 === 'customer_opinion'" #cell="{ record }">
|
||||
<p
|
||||
class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
|
||||
>
|
||||
<span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
|
||||
getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
|
||||
}}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
<template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
|
||||
<img
|
||||
v-else
|
||||
width="24"
|
||||
height="24"
|
||||
class="rounded-4px"
|
||||
:src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }">
|
||||
<span class="cts num !color-#6D4CFE">{{
|
||||
record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
#cell="{ record }"
|
||||
v-else-if="
|
||||
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
|
||||
"
|
||||
<template v-if="column.dataIndex === 'customer_opinion'" #customRender="{ record }">
|
||||
<p
|
||||
class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
|
||||
>
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
</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="onCheck(record)"
|
||||
v-if="audit_status === AuditStatus.Pending"
|
||||
>审核</Button
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onScan(record)"
|
||||
v-else-if="audit_status === AuditStatus.Auditing"
|
||||
>查看</Button
|
||||
>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
|
||||
getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
|
||||
}}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'platform'" #customRender="{ record }">
|
||||
<template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
|
||||
<img
|
||||
v-else
|
||||
width="24"
|
||||
height="24"
|
||||
class="rounded-4px"
|
||||
:src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'compliance_level'" #customRender="{ record }">
|
||||
<span class="cts num !color-#6D4CFE">{{
|
||||
record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
#customRender="{ record }"
|
||||
v-else-if="
|
||||
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
|
||||
"
|
||||
>
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</Image>
|
||||
</HoverImagePreview>
|
||||
</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="onCheck(record)"
|
||||
v-if="audit_status === AuditStatus.Pending"
|
||||
>审核</Button
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onScan(record)"
|
||||
v-else-if="audit_status === AuditStatus.Auditing"
|
||||
>查看</Button
|
||||
>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #customRender="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</Column>
|
||||
</Table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Tooltip, Table, Image } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
|
||||
import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';
|
||||
@ -179,8 +174,20 @@ const tableRef = ref(null);
|
||||
|
||||
const writerCode = computed(() => route.params.writerCode);
|
||||
|
||||
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 rowSelection = {
|
||||
selectedRowKeys: computed(() => props.selectedRowKeys),
|
||||
onSelect: (record, selected, selectedRows, nativeEvent) => {
|
||||
emits('select', selectedRows.map(row => row.id), record.id, record);
|
||||
},
|
||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
emits('selectAll', selected);
|
||||
},
|
||||
};
|
||||
const onDelete = (item) => {
|
||||
emits('delete', item);
|
||||
|
||||
@ -334,6 +334,7 @@ export default {
|
||||
maskClosable={false}
|
||||
unmount-on-close
|
||||
onCancel={onClose}
|
||||
centered
|
||||
footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
|
||||
>
|
||||
<Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>
|
||||
|
||||
@ -52,16 +52,3 @@ async function onDelete() {
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal v-model:open="visible" title="删除稿件" width="480px" @cancel="onClose" centered>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ projectName }} 这个稿件吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button size="large" @click="onClose">取消</Button>
|
||||
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -1,102 +1,100 @@
|
||||
<template>
|
||||
<a-table
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:dataSource="dataSource"
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="manuscript-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 === 'title'" #cell="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
|
||||
>
|
||||
<span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
|
||||
getStatusInfo(record.audit_status).name
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ exactFormatTime(record[column.dataIndex]) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
</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" class="mr-8px" @click="onEdit(record)">编辑</Button>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<template v-if="column.dataIndex === 'create_at'" #customRender="{ record }">
|
||||
{{ exactFormatTime(record.create_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'audit_status'" #customRender="{ record }">
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
|
||||
>
|
||||
<span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
|
||||
getStatusInfo(record.audit_status).name
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #customRender="{ record }">
|
||||
{{ exactFormatTime(record[column.dataIndex]) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</Image>
|
||||
</HoverImagePreview>
|
||||
</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" class="mr-8px" @click="onEdit(record)">编辑</Button>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<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, Image } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import {
|
||||
@ -125,8 +123,10 @@ const props = defineProps({
|
||||
const tableRef = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user