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

feat: table组件替换

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

1
src/hooks/useTableSelectionWithPagination.ts
View File

@ -33,6 +33,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
const select = selectedKeys.includes(rowKeyValue); const select = selectedKeys.includes(rowKeyValue);
selectedRowKeys.value = selectedKeys; selectedRowKeys.value = selectedKeys;
console.log('handleSelect', selectedKeys, rowKeyValue, record);
if (select) { if (select) {
if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) { if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
selectedRows.value.push(record); selectedRows.value.push(record);

81
src/layouts/components/navbar/components/task-center-modal/components/export-task/index.vue
View File

@ -1,7 +1,7 @@
<script lang="jsx"> <script lang="jsx">
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { Button, Checkbox, Input, Tooltip } from 'ant-design-vue'; import { Button, Checkbox, Input, Tooltip, Table, Pagination } from 'ant-design-vue';
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue'; import { Notification } from '@arco-design/web-vue';
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon'; import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
import NoData from '@/components/no-data'; 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 icon1 from '@/assets/img/media-account/icon-delete.png';
import { showExportNotification, showFailExportNotification } from '@/utils/arcoD'; import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
export default { export default {
setup(props, { emit, expose }) { setup(props, { emit, expose }) {
const { const {
@ -77,10 +79,12 @@ export default {
getData(); getData();
}; };
const handleSorterChange = (column, order) => { const handleSorterChange = (pagination, filters, sorter) => {
query.value.sort_column = column; if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc'; query.value.sort_column = sorter.columnKey;
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
reload(); reload();
}
}; };
const handleSearch = () => { const handleSearch = () => {
@ -273,35 +277,34 @@ export default {
{/* 表格 */} {/* 表格 */}
<Table <Table
ref="tableRef" ref="tableRef"
data={dataSource.value} dataSource={dataSource.value}
column-resizable rowKey="id"
row-key="id" rowSelection={{
row-selection={rowSelection.value} selectedRowKeys: selectedRowKeys.value,
selected-keys={selectedRowKeys.value} onChange: (keys, rows) => handleSelect(keys, rows),
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
}}
pagination={false} pagination={false}
scroll={{ x: '100%', y: '100%' }} scroll={{ x: '100%', y: '100%' }}
class="w-100% flex-1 overflow-hidden" class="w-100% flex-1 overflow-hidden"
bordered bordered
onSorterChange={handleSorterChange} showSorterTooltip={false}
onSelect={handleSelect} onChange={handleSorterChange}
onSelectAll={handleSelectAll}
v-slots={{ v-slots={{
empty: () => <NoData />, emptyText: () => <NoData />,
columns: () => ( }}
<> >
{TABLE_COLUMNS.map((column) => ( {TABLE_COLUMNS.map((column) => (
<TableColumn <Table.Column
key={column.dataIndex} key={column.dataIndex}
data-index={column.dataIndex} dataIndex={column.dataIndex}
fixed={column.fixed} fixed={column.fixed}
width={column.width} width={column.width}
min-width={column.minWidth} minWidth={column.minWidth}
sortable={column.sortable} sorter={column.sortable}
align={column.align} align={column.align}
ellipsis ellipsis
tooltip title={() => (
v-slots={{
title: () => (
<div class="flex items-center"> <div class="flex items-center">
<span class="cts mr-4px">{column.title}</span> <span class="cts mr-4px">{column.title}</span>
{column.tooltip && ( {column.tooltip && (
@ -310,8 +313,8 @@ export default {
</Tooltip> </Tooltip>
)} )}
</div> </div>
), )}
cell: ({ record }) => { customRender={({ record }) => {
if (column.dataIndex === 'status') { if (column.dataIndex === 'status') {
return ( return (
<div class={['status-box', `status-box-${record.status}`]}> <div class={['status-box', `status-box-${record.status}`]}>
@ -325,17 +328,15 @@ export default {
} else { } else {
return formatTableField(column, record, true); return formatTableField(column, record, true);
} }
},
}} }}
/> />
))} ))}
<TableColumn <Table.Column
data-index="operation" dataIndex="operation"
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60} width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
fixed="right" fixed="right"
title="操作" title="操作"
v-slots={{ customRender={({ record }) => (
cell: ({ record }) => (
<div class="flex items-center"> <div class="flex items-center">
<img <img
src={icon1} src={icon1}
@ -356,27 +357,23 @@ export default {
</Button> </Button>
)} )}
</div> </div>
), )}
}}
/>
</>
),
}}
/> />
</Table>
{/* 分页 */} {/* 分页 */}
{pageInfo.value.total > 0 && ( {pageInfo.value.total > 0 && (
<div class="flex justify-end my-16px"> <div class="flex justify-end my-16px">
<Pagination <Pagination
total={pageInfo.value.total} total={pageInfo.value.total}
size="mini" size="small"
show-total showTotal={(total, range) => `共 ${total} 条记录`}
show-jumper showQuickJumper
show-page-size showSizeChanger
current={pageInfo.value.page} current={pageInfo.value.page}
page-size={pageInfo.value.page_size} pageSize={pageInfo.value.page_size}
onChange={onPageChange} onChange={onPageChange}
onPageSizeChange={onPageSizeChange} onShowSizeChange={onPageSizeChange}
/> />
</div> </div>
)} )}

75
src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue
View File

@ -1,7 +1,6 @@
<script lang="jsx"> <script lang="jsx">
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { Button, Tooltip } from 'ant-design-vue'; import { Button, Tooltip, Table, Pagination } from 'ant-design-vue';
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue';
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon'; import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
import NoData from '@/components/no-data'; import NoData from '@/components/no-data';
import { getTask } from '@/api/all/common'; import { getTask } from '@/api/all/common';
@ -73,10 +72,12 @@ export default {
getData(); getData();
}; };
const handleSorterChange = (column, order) => { const handleSorterChange = (pagination, filters, sorter) => {
query.value.sort_column = column; if (sorter && sorter.columnKey) {
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc'; query.value.sort_column = sorter.columnKey;
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
reload(); reload();
}
}; };
const handleSearch = () => { const handleSearch = () => {
@ -121,34 +122,34 @@ export default {
<div class="import-task-wrap"> <div class="import-task-wrap">
<Table <Table
ref="tableRef" ref="tableRef"
data={dataSource.value} dataSource={dataSource.value}
column-resizable rowKey="id"
row-key="id" rowSelection={{
selected-keys={selectedRowKeys.value} selectedRowKeys: selectedRowKeys.value,
onChange: (keys, rows) => handleSelect(keys, rows),
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
}}
pagination={false} pagination={false}
scroll={{ x: '100%', y: '100%' }} scroll={{ x: '100%', y: '100%' }}
class="w-100% flex-1 overflow-hidden" class="w-100% flex-1 overflow-hidden"
bordered bordered
onSorterChange={handleSorterChange} showSorterTooltip={false}
onSelect={handleSelect} onChange={handleSorterChange}
onSelectAll={handleSelectAll}
v-slots={{ v-slots={{
empty: () => <NoData />, empty: () => <NoData />,
columns: () => ( }}
<> >
{TABLE_COLUMNS.map((column) => ( {TABLE_COLUMNS.map((column) => (
<TableColumn <Table.Column
key={column.dataIndex} key={column.dataIndex}
data-index={column.dataIndex} dataIndex={column.dataIndex}
fixed={column.fixed} fixed={column.fixed}
width={column.width} width={column.width}
min-width={column.minWidth} minWidth={column.minWidth}
sortable={column.sortable} sorter={column.sortable}
align={column.align} align={column.align}
ellipsis ellipsis
tooltip title={() => (
v-slots={{
title: () => (
<div class="flex items-center"> <div class="flex items-center">
<span class="cts mr-4px">{column.title}</span> <span class="cts mr-4px">{column.title}</span>
{column.tooltip && ( {column.tooltip && (
@ -157,8 +158,8 @@ export default {
</Tooltip> </Tooltip>
)} )}
</div> </div>
), )}
cell: ({ record }) => { customRender={({ record }) => {
if (column.dataIndex === 'status') { if (column.dataIndex === 'status') {
return ( return (
<div class={['status-box', `status-box-${record.status}`]}> <div class={['status-box', `status-box-${record.status}`]}>
@ -172,17 +173,15 @@ export default {
} else { } else {
return formatTableField(column, record, true); return formatTableField(column, record, true);
} }
},
}} }}
/> />
))} ))}
<TableColumn <Table.Column
data-index="operation" dataIndex="operation"
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60} width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
fixed="right" fixed="right"
title="操作" title="操作"
v-slots={{ customRender={({ record }) => (
cell: ({ record }) => (
<div class="flex items-center"> <div class="flex items-center">
<img <img
src={icon1} src={icon1}
@ -197,27 +196,23 @@ export default {
</Button> </Button>
)} )}
</div> </div>
), )}
}}
/>
</>
),
}}
/> />
</Table>
{/* 分页 */} {/* 分页 */}
{pageInfo.value.total > 0 && ( {pageInfo.value.total > 0 && (
<div class="flex justify-end my-16px"> <div class="flex justify-end my-16px">
<Pagination <Pagination
total={pageInfo.value.total} total={pageInfo.value.total}
size="mini" size="small"
show-total showTotal={(total, range) => `共 ${total} 条记录`}
show-jumper showQuickJumper
show-page-size showSizeChanger
current={pageInfo.value.page} current={pageInfo.value.page}
page-size={pageInfo.value.page_size} pageSize={pageInfo.value.page_size}
onChange={onPageChange} onChange={onPageChange}
onPageSizeChange={onPageSizeChange} onShowSizeChange={onPageSizeChange}
/> />
</div> </div>
)} )}

2
src/styles/components/ant-table.scss
View File

@ -13,7 +13,6 @@
.ant-table-container { .ant-table-container {
border: none !important; border: none !important;
height: 100%; height: 100%;
.ant-table-content {
.ant-table-thead { .ant-table-thead {
> tr { > tr {
.ant-table-cell { .ant-table-cell {
@ -50,7 +49,6 @@
} }
} }
} }
}
.ant-table-bordered { .ant-table-bordered {
.ant-table-container { .ant-table-container {
.ant-table-thead { .ant-table-thead {

93
src/views/components/dataEngine/hotTranslation.vue
View File

@ -10,18 +10,53 @@
<icon-question-circle size="16" class="!color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</Tooltip> </Tooltip>
</div> </div>
<a-table <Table
:columns="columns" :dataSource="dataList"
:data="dataList"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <Table.Column
<NoData /> 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>
<template #hotTitle> <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"> <div class="flex items-center">
<span class="mr-8px">热度指数</span> <span class="mr-8px">热度指数</span>
<Tooltip> <Tooltip>
@ -30,7 +65,7 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template #sentimentTitle> <template v-else-if="column.titleSlotName === 'sentimentTitle'" #title>
<div class="flex items-center"> <div class="flex items-center">
<span class="mr-8px">情感倾向</span> <span class="mr-8px">情感倾向</span>
<Tooltip> <Tooltip>
@ -41,39 +76,11 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template #rank="{ record }"> </Table.Column>
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" /> <template #emptyText>
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" /> <NoData />
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
<span v-else>{{ record.rank }}</span>
</template> </template>
<template #keywords="{ record }"> </Table>
<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>
</div> </div>
<Modal <Modal
v-model:open="visible" v-model:open="visible"
@ -146,7 +153,7 @@
<script setup> <script setup>
import topHeader from './topHeader.vue'; 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 { ref, computed } from 'vue';
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index'; import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
import star1 from '@/assets/img/hottranslation/star-fill1.png'; import star1 from '@/assets/img/hottranslation/star-fill1.png';
@ -256,7 +263,7 @@ onMounted(() => {
const getIndustriesTree = async () => { const getIndustriesTree = async () => {
const res = await fetchIndustriesTree(); const res = await fetchIndustriesTree();
industriesTree.value = res; industriesTree.value = res;
selectedIndustry.value = res[0].id; selectedIndustry.value = res[0]?.id;
getIndustryTopics(); getIndustryTopics();
}; };

81
src/views/components/dataEngine/keyBrandMovement.vue
View File

@ -16,18 +16,41 @@
<icon-question-circle size="16" class="!color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</Tooltip> </Tooltip>
</div> </div>
<a-table <Table
:columns="columns" :dataSource="dataList"
:data="dataList"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <Table.Column
<NoData /> 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>
<template #hotTitle> <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> <Space>
<span>热度指数</span> <span>热度指数</span>
<Tooltip> <Tooltip>
@ -36,7 +59,7 @@
</Tooltip> </Tooltip>
</Space> </Space>
</template> </template>
<template #trendTitle> <template v-else-if="column.titleSlotName === 'trendTitle'" #title>
<Space> <Space>
<span>变化幅度</span> <span>变化幅度</span>
<Tooltip> <Tooltip>
@ -45,7 +68,7 @@
</Tooltip> </Tooltip>
</Space> </Space>
</template> </template>
<template #volume_rateTitle> <template v-else-if="column.titleSlotName === 'volume_rateTitle'" #title>
<Space> <Space>
<span>占总声量比例</span> <span>占总声量比例</span>
<Tooltip> <Tooltip>
@ -54,24 +77,11 @@
</Tooltip> </Tooltip>
</Space> </Space>
</template> </template>
<template #rank="{ record }"> </Table.Column>
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" /> <template #emptyText>
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" /> <NoData />
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
<span v-else>{{ record.rank }}</span>
</template> </template>
<template #hot="{ record }"> </Table>
<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>
</Space> </Space>
<!-- 舆情 & 敏感动态--> <!-- 舆情 & 敏感动态-->
<Space <Space
@ -88,18 +98,27 @@
</Tooltip> </Tooltip>
</div> </div>
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px"> <Table :dataSource="otherList" :pagination="false" :showSorterTooltip="false" style="font-size: 12px">
<template #empty> <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 /> <NoData />
</template> </template>
</a-table> </Table>
</Space> </Space>
</view> </view>
</template> </template>
<script setup> <script setup>
import topHeader from './topHeader.vue'; 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 { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import star1 from '@/assets/img/hottranslation/star-fill1.png'; import star1 from '@/assets/img/hottranslation/star-fill1.png';

37
src/views/components/dataEngine/keyWord.vue
View File

@ -15,15 +15,15 @@
</Tooltip> </Tooltip>
</div> </div>
<a-table <Table
:columns="columns" :columns="columns"
:data="dataList" :dataSource="dataList"
:filter-icon-align-left="alignLeft" :scroll="{ x: true }"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <template #emptyText>
<NoData /> <NoData />
</template> </template>
<template #heatLevel> <template #heatLevel>
@ -69,7 +69,7 @@
{{ `${(record.trend * 100).toFixed(2)}%` }} {{ `${(record.trend * 100).toFixed(2)}%` }}
</div> </div>
</template> </template>
</a-table> </Table>
</Space> </Space>
<!-- 行业情绪 --> <!-- 行业情绪 -->
<Space <Space
@ -103,17 +103,16 @@
</div> </div>
</div> </div>
</div> </div>
<a-table <Table
class="flex-1" class="flex-1"
:columns="columns2" :columns="columns2"
:data="sortedRowData" :dataSource="sortedRowData"
:span-method="spanMethod" :scroll="{ x: true }"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <template #emptyText>
<NoData /> <NoData />
</template> </template>
<template #felling="{ record }"> <template #felling="{ record }">
@ -122,7 +121,7 @@
<span>{{ fellingStatus[record.felling].label }}</span> <span>{{ fellingStatus[record.felling].label }}</span>
</div> </div>
</template> </template>
</a-table> </Table>
</div> </div>
</Space> </Space>
<!-- 新兴关键词 --> <!-- 新兴关键词 -->
@ -140,15 +139,15 @@
</Tooltip> </Tooltip>
</div> </div>
<a-table <Table
:columns="columns3" :columns="columns3"
:data="keywordList" :dataSource="keywordList"
:filter-icon-align-left="alignLeft" :scroll="{ x: true }"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <template #emptyText>
<NoData /> <NoData />
</template> </template>
<template #rank="{ record }"> <template #rank="{ record }">
@ -209,7 +208,7 @@
<template #optional="{ record }"> <template #optional="{ record }">
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button> <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template> </template>
</a-table> </Table>
</Space> </Space>
<!-- modal --> <!-- modal -->
<Modal <Modal

37
src/views/components/dataEngine/userPainPoints.vue
View File

@ -17,24 +17,28 @@
<icon-question-circle size="16" class="!color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</Tooltip> </Tooltip>
</div> </div>
<a-table <Table
:columns="columns" :dataSource="dataList"
:data="dataList"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false" :pagination="false"
:showSorterTooltip="false"
@change="handleChange" @change="handleChange"
> >
<template #empty> <Table.Column
<NoData /> v-for="column in columns"
</template> :key="column.dataIndex"
<template #rank="{ record }"> :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-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 == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
<img v-else-if="record.rank == 3" :src="topImages[2]" 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> <span v-else>{{ record.rank }}</span>
</template> </template>
<template #keywords="{ record }"> <template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
<a-tag <a-tag
v-for="item in record.keywords" v-for="item in record.keywords"
:key="item" :key="item"
@ -42,7 +46,7 @@
>{{ item }}</a-tag >{{ item }}</a-tag
> >
</template> </template>
<template #frequency="{ record }"> <template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
<a-tag <a-tag
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${ :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
frequencyStatus[record.frequency].color frequencyStatus[record.frequency].color
@ -50,11 +54,14 @@
>{{ frequencyStatus[record.frequency].label }}</a-tag >{{ frequencyStatus[record.frequency].label }}</a-tag
> >
</template> </template>
<template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
<template #optional="{ record }">
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button> <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template> </template>
</a-table> </Table.Column>
<template #emptyText>
<NoData />
</template>
</Table>
</Space> </Space>
<Modal <Modal
@ -120,7 +127,7 @@
<script setup> <script setup>
import topHeader from './topHeader.vue'; 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 { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import top1 from '@/assets/img/captcha/top1.svg'; import top1 from '@/assets/img/captcha/top1.svg';

41
src/views/components/dataEngine/userPersona.vue
View File

@ -92,36 +92,30 @@
<div class="flex flex-col h-486px"> <div class="flex flex-col h-486px">
<Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large"> <Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large">
<TabPane key="1" tab="省份"> <TabPane key="1" tab="省份">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }"> <Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
<template #empty> <template #emptyText>
<NoData /> <NoData />
</template> </template>
<template #columns> <Column title="排名" dataIndex="rank" />
<a-table-column title="排名" data-index="rank" /> <Column title="省份" dataIndex="geo" />
<a-table-column title="省份" data-index="geo" /> <Column title="分布占比" dataIndex="rate" />
<a-table-column title="分布占比" data-index="rate" /> <Column title="TGI指数" dataIndex="tgi" />
</Table>
<a-table-column title="TGI指数" data-index="tgi" />
</template>
</a-table>
</TabPane> </TabPane>
<TabPane key="2" tab="城市"> <TabPane key="2" tab="城市">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }"> <Table :dataSource="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }" :showSorterTooltip="false">
<template #empty> <template #emptyText>
<NoData /> <NoData />
</template> </template>
<template #columns> <Column title="排名" dataIndex="rank" />
<a-table-column title="排名" data-index="rank" /> <Column title="城市" dataIndex="geo" />
<a-table-column title="城市" data-index="geo" /> <Column title="分布占比" dataIndex="rate">
<a-table-column title="分布占比" data-index="rate"> <template #customRender="{ record }">
<template #cell="{ record }">
<span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span> <span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
</template> </template>
</a-table-column> </Column>
<Column title="TGI指数" dataIndex="tgi" />
<a-table-column title="TGI指数" data-index="tgi" /> </Table>
</template>
</a-table>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
@ -138,8 +132,9 @@ import * as echarts from 'echarts';
import chinaJson from '@/assets/maps/china.json'; import chinaJson from '@/assets/maps/china.json';
echarts.registerMap('china', chinaJson); 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 { TabPane } = Tabs;
const { Column } = Table;
const scope = ref(1); // 地域范围，1-省，2-市 const scope = ref(1); // 地域范围，1-省，2-市
const chartInstance = (ref < echarts.ECharts) | (null > null); const chartInstance = (ref < echarts.ECharts) | (null > null);

49
src/views/components/management/account/index.vue
View File

@ -4,25 +4,24 @@
<span class="title">账号管理</span> <span class="title">账号管理</span>
<Button type="primary" ghost class="add-account-button" @click="handleAddAccount">添加子账号</Button> <Button type="primary" ghost class="add-account-button" @click="handleAddAccount">添加子账号</Button>
</div> </div>
<a-table <Table
:columns="columns" :dataSource="dataSource"
:data="dataSource"
:pagination="pagination" :pagination="pagination"
:showSorterTooltip="false"
class="mt-8px" class="mt-8px"
@page-change="handlePageChange" @change="handleTableChange"
@page-size-change="handlePageSizeChange"
> >
<template #empty> <Table.Column title="手机号" dataIndex="mobile">
<NoData /> <template #customRender="{ record }">
</template>
<template #mobile="{ record }">
<div class="flex item-center pt-13px pb-13px"> <div class="flex item-center pt-13px pb-13px">
<span class="mr-4px">{{ record.mobile }}</span> <span class="mr-4px">{{ record.mobile }}</span>
<a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag> <a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
<a-tag v-else class="sub-account">子账号</a-tag> <a-tag v-else class="sub-account">子账号</a-tag>
</div> </div>
</template> </template>
<template #action="{ record }"> </Table.Column>
<Table.Column title="操作" dataIndex="action" width="120">
<template #customRender="{ record }">
<Button <Button
v-if="record.type !== 0" v-if="record.type !== 0"
class="delete-button" class="delete-button"
@ -35,7 +34,11 @@
删除 删除
</Button> </Button>
</template> </template>
</a-table> </Table.Column>
<template #emptyText>
<NoData />
</template>
</Table>
<Modal v-model:open="addAccountVisible" centered width="480px" title="添加子账号" :okText="okText" @ok="handleOk" > <Modal v-model:open="addAccountVisible" centered width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
<div v-if="canAddAccount" class="add-account-container"> <div v-if="canAddAccount" class="add-account-container">
<h2 class="add-account-title">生成企业专属链接，成员通过访问即可注册并加入企业账号。</h2> <h2 class="add-account-title">生成企业专属链接，成员通过访问即可注册并加入企业账号。</h2>
@ -59,9 +62,8 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Container from '@/components/container.vue';
import { ref, onMounted, reactive, computed } from '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 { fetchSubAccountPage, removeEnterpriseAccount, getEnterpriseInviteCode } from '@/api/all';
import Modal from '@/components/modal.vue'; import Modal from '@/components/modal.vue';
@ -84,10 +86,10 @@ const columns = [
const dataSource = ref([]); const dataSource = ref([]);
const pagination = reactive({ const pagination = reactive({
total: 0, total: 0,
showPageSize: true, showSizeChanger: true,
showTotal: true, showTotal: (total: number, range: [number, number]) => `共 ${total} 条记录`,
defaultCurrent: 1, current: 1,
defaultPageSize: 10, pageSize: 10,
}); });
const params = reactive({ const params = reactive({
@ -122,13 +124,12 @@ const currentSelectAccount = ref();
const { copy, copied, isSupported } = useClipboard({ source: inviteUrl }); const { copy, copied, isSupported } = useClipboard({ source: inviteUrl });
function handlePageChange(current: number) { function handleTableChange(paginationInfo: any, filters: any, sorter: any) {
params.page = current; params.page = paginationInfo.current;
getSubAccount(); params.page_size = paginationInfo.pageSize;
} // 更新分页状态
pagination.current = paginationInfo.current;
function handlePageSizeChange(pageSize: number) { pagination.pageSize = paginationInfo.pageSize;
params.page_size = pageSize;
getSubAccount(); getSubAccount();
} }

20
src/views/components/management/enterprise/index.vue
View File

@ -3,17 +3,21 @@
<div class="title-row"> <div class="title-row">
<span class="title">企业信息</span> <span class="title">企业信息</span>
</div> </div>
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px"> <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
<template #empty> <Table.Column title="企业信息" dataIndex="info">
<NoData /> <template #customRender="{ record }">
</template>
<template #info="{ record }">
{{ record.name }} {{ record.name }}
</template> </template>
<template #action> </Table.Column>
<Table.Column title="操作" dataIndex="action" width="120">
<template #customRender>
<Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button> <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
</template> </template>
</a-table> </Table.Column>
<template #emptyText>
<NoData />
</template>
</Table>
<Modal <Modal
v-model:open="infoVisible" v-model:open="infoVisible"
width="480px" width="480px"
@ -45,7 +49,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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 Container from '@/components/container.vue';
import Modal from '@/components/modal.vue'; import Modal from '@/components/modal.vue';
import { ref, reactive, computed } from 'vue'; import { ref, reactive, computed } from 'vue';

20
src/views/components/management/person/index.vue
View File

@ -3,22 +3,26 @@
<div class="title-row"> <div class="title-row">
<span class="title">个人信息</span> <span class="title">个人信息</span>
</div> </div>
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px"> <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
<template #empty> <Table.Column title="用户信息" dataIndex="info">
<NoData /> <template #customRender="{ record }">
</template>
<template #info="{ record }">
<div class="pt-3px pb-3px"> <div class="pt-3px pb-3px">
<a-avatar :image-url="record.head_image" :size="32" /> <a-avatar :image-url="record.head_image" :size="32" />
{{ record.name || '-' }} {{ record.name || '-' }}
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" /> <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
</div> </div>
</template> </template>
<template #mobile="{ record }"> </Table.Column>
<Table.Column title="手机号" dataIndex="mobile">
<template #customRender="{ record }">
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }} {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
<icon-edit size="13" class="ml-8px" @click="openEditMobileModal" /> <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
</template> </template>
</a-table> </Table.Column>
<template #emptyText>
<NoData />
</template>
</Table>
<Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo"> <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
<Form <Form
class="form" class="form"
@ -81,7 +85,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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 Container from '@/components/container.vue';
import Modal from '@/components/modal.vue'; import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue'; import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';

3
src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
View File

@ -152,7 +152,7 @@ const props = defineProps({
}, },
rowSelection: { rowSelection: {
type: Array, type: Array,
default: () => [], default: () => {},
}, },
selectedRowKeys: { selectedRowKeys: {
type: Array, type: Array,
@ -175,6 +175,7 @@ const handleTableChange = (pagination, filters, sorter) => {
const rowSelection = { const rowSelection = {
selectedRowKeys: computed(() => props.selectedRowKeys), selectedRowKeys: computed(() => props.selectedRowKeys),
onSelect: (record, selected, selectedRows, nativeEvent) => { onSelect: (record, selected, selectedRows, nativeEvent) => {
console.log(selectedRows, record);
emits( emits(
'select', 'select',
selectedRows.map((row) => row.id), selectedRows.map((row) => row.id),

2
src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/constants.ts
View File

@ -1,5 +1,5 @@
export const INITIAL_FORM = { export const INITIAL_FORM = {
audit_status: '', audit_status: undefined,
sort_column: undefined, sort_column: undefined,
sort_order: undefined, sort_order: undefined,
}; };

76
src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
View File

@ -1,6 +1,5 @@
<script lang="jsx"> <script lang="jsx">
import { Button, Modal, Tooltip } from 'ant-design-vue'; import { Button, Modal, Tooltip, Table, Pagination } from 'ant-design-vue';
import { Table, TableColumn, Pagination } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select'; import CommonSelect from '@/components/common-select';
import TextOverTips from '@/components/text-over-tips'; import TextOverTips from '@/components/text-over-tips';
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal'; import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
@ -112,10 +111,12 @@ export default {
const onShare = () => { const onShare = () => {
shareModalRef.value?.open(selectedRowKeys.value); shareModalRef.value?.open(selectedRowKeys.value);
}; };
const handleSorterChange = (column, order) => { const handleSorterChange = (pagination, filters, sorter) => {
query.value.sort_column = column; if (sorter && !Array.isArray(sorter) && sorter.columnKey) {
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc'; query.value.sort_column = sorter.columnKey;
query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
reload(); reload();
}
}; };
const getStatusInfo = (audit_status) => { const getStatusInfo = (audit_status) => {
return CHECK_STATUS.find((v) => v.id === audit_status) ?? {}; return CHECK_STATUS.find((v) => v.id === audit_status) ?? {};
@ -163,35 +164,34 @@ export default {
</div> </div>
<Table <Table
ref={tableRef} ref={tableRef}
data={dataSource.value} dataSource={dataSource.value}
row-key="id" rowKey="id"
column-resizable rowSelection={{
row-selection={rowSelection.value} selectedRowKeys: selectedRowKeys.value,
selected-keys={selectedRowKeys.value} onChange: (keys, rows) => handleSelect(keys, rows),
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows),
}}
pagination={false} pagination={false}
scroll={{ x: '100%', y: '100%' }} scroll={{ x: '100%', y: '100%' }}
class="overflow-hidden" class="overflow-hidden"
bordered bordered
onSorterChange={handleSorterChange} showSorterTooltip={false}
onSelect={handleSelect} onChange={handleSorterChange}
onSelectAll={handleSelectAll}
v-slots={{ v-slots={{
empty: () => <NoData />, emptyText: () => <NoData />,
columns: () => ( }}
<> >
{TABLE_COLUMNS.map((column) => ( {TABLE_COLUMNS.map((column) => (
<TableColumn <Table.Column
key={column.dataIndex} key={column.dataIndex}
data-index={column.dataIndex} dataIndex={column.dataIndex}
fixed={column.fixed} fixed={column.fixed}
width={column.width} width={column.width}
min-width={column.minWidth} minWidth={column.minWidth}
sortable={column.sortable} sorter={column.sortable}
align={column.align} align={column.align}
ellipsis ellipsis
tooltip title={() => (
v-slots={{
title: () => (
<div class="flex items-center"> <div class="flex items-center">
<span class="cts mr-4px bold color-#211F24">{column.title}</span> <span class="cts mr-4px bold color-#211F24">{column.title}</span>
{column.tooltip && ( {column.tooltip && (
@ -200,8 +200,8 @@ export default {
</Tooltip> </Tooltip>
)} )}
</div> </div>
), )}
cell: ({ record }) => { customRender={({ record }) => {
if (column.dataIndex === 'audit_status') { if (column.dataIndex === 'audit_status') {
return ( return (
<div <div
@ -214,7 +214,7 @@ export default {
</div> </div>
); );
} else if (column.dataIndex === 'title') { } else if (column.dataIndex === 'title') {
return <TextOverTips context={record.title} />; return <TextOverTips context={record.title} class="!text-12px" />;
} else if (column.dataIndex === 'type') { } else if (column.dataIndex === 'type') {
return ( return (
<div class="flex items-center"> <div class="flex items-center">
@ -236,36 +236,28 @@ export default {
} else if (column.dataIndex === 'last_modified_at') { } else if (column.dataIndex === 'last_modified_at') {
return ( return (
<span class="cts num"> <span class="cts num">
{exactFormatTime( {exactFormatTime(record.last_modified_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')}
record.last_modified_at,
'YYYY-MM-DD HH:mm:ss',
'YYYY-MM-DD HH:mm:ss',
)}
</span> </span>
); );
} else { } else {
return formatTableField(column, record, true); return formatTableField(column, record, true);
} }
},
}} }}
/> />
))} ))}
</> </Table>
),
}}
/>
{pageInfo.value.total > 0 && ( {pageInfo.value.total > 0 && (
<div class="flex justify-end mt-16px"> <div class="flex justify-end mt-16px">
<Pagination <Pagination
total={pageInfo.value.total} total={pageInfo.value.total}
size="mini" size="small"
show-total showTotal={(total, range) => `共 ${total} 条记录`}
show-jumper showQuickJumper
show-page-size showSizeChanger
current={pageInfo.value.page} current={pageInfo.value.page}
page-size={pageInfo.value.page_size} pageSize={pageInfo.value.page_size}
onChange={onPageChange} onChange={onPageChange}
onPageSizeChange={onPageSizeChange} onShowSizeChange={onPageSizeChange}
/> />
</div> </div>
)} )}

35
src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
View File

@ -23,44 +23,31 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.arco-scrollbar-track { .ant-scrollbar-track {
display: none !important; display: none !important;
} }
.arco-table { .ant-table {
.arco-table-container { .ant-table-thead {
.arco-table-element { .ant-table-cell {
thead {
.arco-table-tr {
.arco-table-th {
.arco-table-cell {
padding: 10px 16px !important; padding: 10px 16px !important;
} }
} }
} .ant-table-body {
} .ant-table-cell {
tbody {
.arco-table-tr {
.arco-table-td {
.arco-table-cell {
padding: 6px 16px; padding: 6px 16px;
.arco-table-cell-content, .ant-table-cell-content {
.arco-table-td-content {
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
} }
} }
} }
} .ant-pagination {
} .ant-pagination-total-text,
} .ant-pagination-options-quick-jumper {
}
.arco-pagination {
.arco-pagination-total,
.arco-pagination-jumper-prepend {
font-size: 14px; font-size: 14px;
} }
.arco-pagination-jumper-prepend { .ant-pagination-options-quick-jumper {
font-family: $font-family-regular; font-family: $font-family-regular;
} }
} }

10
src/views/material-center/components/finished-products/manuscript/list/constants.ts
View File

@ -2,7 +2,7 @@ export const INITIAL_QUERY = {
title: '', title: '',
// project_ids: [], // project_ids: [],
uid: '', uid: '',
audit_status: '', audit_status: undefined,
created_at: [], created_at: [],
sort_column: undefined, sort_column: undefined,
sort_order: undefined, sort_order: undefined,
@ -25,19 +25,19 @@ export const CHECK_STATUS = [
name: '待审核', name: '待审核',
id: EnumCheckStatus.Wait, id: EnumCheckStatus.Wait,
backgroundColor: '#F2F3F5', backgroundColor: '#F2F3F5',
color: '#3C4043' color: '#3C4043',
}, },
{ {
name: '审核中', name: '审核中',
id: EnumCheckStatus.Checking, id: EnumCheckStatus.Checking,
backgroundColor: '#FFF7E5', backgroundColor: '#FFF7E5',
color: '#FFAE00' color: '#FFAE00',
}, },
{ {
name: '已通过', name: '已通过',
id: EnumCheckStatus.Passed, id: EnumCheckStatus.Passed,
backgroundColor: '#EBF7F2', backgroundColor: '#EBF7F2',
color: '#25C883' color: '#25C883',
}, },
]; ];
export const MANUSCRIPT_TYPE = [ export const MANUSCRIPT_TYPE = [
@ -53,4 +53,4 @@ export const MANUSCRIPT_TYPE = [
label: '视频', label: '视频',
value: EnumManuscriptType.Video, value: EnumManuscriptType.Video,
}, },
] ];

2
src/views/material-center/components/finished-products/manuscript/list/index.vue
View File

@ -27,7 +27,7 @@
</template> </template>
<script lang="jsx" setup> <script lang="jsx" setup>
import { defineComponent } from 'vue'; 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 FilterBlock from './components/filter-block';
import ManuscriptTable from './components/manuscript-table'; import ManuscriptTable from './components/manuscript-table';
import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue'; import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue';

75
src/views/material-center/components/raw-material/components/table/index.vue
View File

@ -1,34 +1,29 @@
<template> <template>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
row-key="id" rowKey="id"
column-resizable
:pagination="false" :pagination="false"
:scroll="{ x: '100%' }" :scroll="{ x: '100%' }"
class="flex-1 manuscript-table w-100%" class="flex-1 manuscript-table w-100%"
bordered bordered
:row-selection="rowSelection" :rowSelection="rowSelection"
:selected-row-keys="selectedRowKeys" :showSorterTooltip="false"
@sorter-change="handleSorterChange" @change="handleTableChange"
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
@select-all="(check) => emits('selectAll', check)"
> >
<template #empty> <template #emptyText>
<NoData text="暂无文件" /> <NoData text="暂无文件" />
</template> </template>
<template #columns> <Column
<a-table-column
v-for="column in tableColumns" v-for="column in tableColumns"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sorter="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -38,14 +33,14 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template v-if="column.dataIndex === 'name'" #cell="{ record }"> <template v-if="column.dataIndex === 'name'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<HoverImagePreview :src="record.cover"> <HoverImagePreview :src="record.cover">
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" fit="cover"> <Image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" :preview="false">
<template #error> <template #error>
<img :src="icon4" class="w-full h-full" /> <img :src="icon4" class="w-full h-full" />
</template> </template>
</a-image> </Image>
</HoverImagePreview> </HoverImagePreview>
<div class="flex-1 flex flex-col overflow-hidden"> <div class="flex-1 flex flex-col overflow-hidden">
<TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" /> <TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
@ -53,38 +48,38 @@
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
{{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }} {{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
</template> </template>
<template v-else-if="column.dataIndex === 'size'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'size'" #customRender="{ record }">
<span class="cts num">{{ formatFileSize(record.size) }}</span> <span class="cts num">{{ formatFileSize(record.size) }}</span>
</template> </template>
<template v-else-if="column.dataIndex === 'origin'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'origin'" #customRender="{ record }">
{{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }} {{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
</template> </template>
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }"> <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }} {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
</template> </template>
<template #cell="{ record }" v-else-if="['created_at'].includes(column.dataIndex)"> <template #customRender="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span> <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" /> <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> <Button type="primary" ghost size="small" @click="onDownload(record)">下载</Button>
</div> </div>
</template> </template>
<template v-else #cell="{ record }"> <template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</a-table-column> </Column>
</template> </Table>
</a-table>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref, computed } from 'vue';
import { Button, Tooltip } from 'ant-design-vue'; import { Button, Tooltip, Table, Image } from 'ant-design-vue';
const { Column } = Table;
import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools'; import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
import { slsWithCatch } from '@/utils/stroage.ts'; import { slsWithCatch } from '@/utils/stroage.ts';
import { TABS_LIST, ORIGIN_LIST } from '../../constants'; import { TABS_LIST, ORIGIN_LIST } from '../../constants';
@ -122,8 +117,20 @@ const props = defineProps({
const tableRef = ref(null); const tableRef = ref(null);
const handleSorterChange = (column, order) => { const handleTableChange = (pagination, filters, sorter) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc'); 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) => { const onDelete = (item) => {
emits('delete', item); emits('delete', item);

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="business-wrap"> <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"> <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> <p class="text-18px font-400 lh-26px color-#211F24 title">业务洞察报告</p>
</div> </div>
@ -40,9 +40,18 @@
</div> </div>
</div> </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"> <div class="pagination-row">
<a-pagination <a-pagination
:total="pageInfo.total" :total="pageInfo.total"
@ -62,7 +71,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue'; 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({ const pageInfo = reactive({
page: 1, page: 1,
@ -86,8 +95,8 @@ const columns = [
title: '服务/产品', title: '服务/产品',
dataIndex: 'service_name', dataIndex: 'service_name',
slotName: 'rank', slotName: 'rank',
width: 60, width: 100,
minWidth: 60, minWidth: 100,
}, },
{ {
title: '生成日期', title: '生成日期',

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

@ -1,6 +1,6 @@
<template> <template>
<div class="competitive-wrap"> <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"> <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> <p class="text-18px font-400 lh-26px color-#211F24 title">竞品对比报告</p>
</div> </div>
@ -9,8 +9,8 @@
<div class="filter-row flex mb-20px"> <div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center"> <div class="filter-row-item flex items-center">
<span class="label">服务/产品</span> <span class="label">服务/产品</span>
<Space size="medium"> <Space>
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear> <Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." allowClear>
<template #prefix> <template #prefix>
<icon-search /> <icon-search />
</template> </template>
@ -42,9 +42,46 @@
</div> </div>
</div> </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"> <div class="pagination-row">
<a-pagination <a-pagination
:total="pageInfo.total" :total="pageInfo.total"
@ -63,7 +100,7 @@
</template> </template>
<script setup lang="ts"> <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'; import { reactive, ref } from 'vue';
const pageInfo = reactive({ const pageInfo = reactive({
@ -80,50 +117,7 @@ const onPageChange = () => {};
const onPageSizeChange = () => {}; const onPageSizeChange = () => {};
const tableData = ref([]); 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">

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

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

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

@ -45,30 +45,25 @@
<template #default>重置</template> <template #default>重置</template>
</Button> </Button>
</div> </div>
<a-table <Table
:data="dataSource" :dataSource="dataSource"
row-key="id" rowKey="id"
:pagination="false" :pagination="false"
:scroll="{ x: '100%' }" :scroll="{ x: '100%' }"
class="w-100%" class="w-100%"
bordered bordered
column-resizable :showSorterTooltip="false"
> >
<template #empty> <Table.Column
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS" v-for="column in TABLE_COLUMNS"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sortable="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -78,8 +73,7 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template #customRender="{ record }">
<template #cell="{ record }">
<template v-if="column.dataIndex === 'published_at'"> <template v-if="column.dataIndex === 'published_at'">
{{ exactFormatTime(record.published_at) }} {{ exactFormatTime(record.published_at) }}
</template> </template>
@ -90,9 +84,11 @@
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</template> </template>
</a-table-column> </Table.Column>
<template #emptyText>
<NoData />
</template> </template>
</a-table> </Table>
<div v-if="pageInfo.total > 0" class="pagination-row mb-24px"> <div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
<a-pagination <a-pagination
:total="pageInfo.total" :total="pageInfo.total"
@ -110,7 +106,7 @@
</template> </template>
<script setup> <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 { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools'; import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';

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

@ -53,7 +53,7 @@
</template> </template>
<template v-else-if="column.dataIndex === 'group_id'"> <template v-else-if="column.dataIndex === 'group_id'">
<div class="flex items-center w-100%"> <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> </div>
</template> </template>
</template> </template>

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

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

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

@ -32,18 +32,46 @@
</Button> </Button>
</div> </div>
<a-table <Table
column-resizable :dataSource="list"
:columns="columns" rowKey="id"
:data="list"
row-key="id"
:loading="loading" :loading="loading"
:scroll="{ y: 500 }" :scroll="{ y: 500 }"
class="h-500px" class="h-500px"
:pagination="false" :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> <NoData>
<span class="s1 mb-16px">暂无分组</span> <span class="s1 mb-16px">暂无分组</span>
<Button type="primary" class="mb-16px" size="middle" @click="openAdd" <Button type="primary" class="mb-16px" size="middle" @click="openAdd"
@ -54,13 +82,7 @@
</Button> </Button>
</NoData> </NoData>
</template> </template>
<template #action="{ record }"> </Table>
<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>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end"> <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination <a-pagination
:total="pageInfo.total" :total="pageInfo.total"
@ -82,7 +104,7 @@
<script setup> <script setup>
import { ref, reactive, onMounted } from 'vue'; 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 { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools'; import { exactFormatTime } from '@/utils/tools';
@ -117,24 +139,7 @@ const loading = ref(false);
const query = ref(cloneDeep(INITIAL_QUERY)); const query = ref(cloneDeep(INITIAL_QUERY));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO)); 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() { function open() {
visible.value = true; visible.value = true;

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

@ -40,35 +40,28 @@
</Option> </Option>
</Select> </Select>
</div> </div>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
column-resizable rowKey="id"
row-key="id" :rowSelection="rowSelection"
:row-selection="rowSelection"
:pagination="false" :pagination="false"
:scroll="{ x: '100%', y: '100%' }" :scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden" class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered bordered
@select="handleSelect" :showSorterTooltip="false"
@select-all="handleSelectAll" @change="(pagination, filters, sorter) => {}"
> >
<template #empty> <Table.Column
<NoData text="暂无账户" />
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS" v-for="column in TABLE_COLUMNS"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sortable="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -79,7 +72,7 @@
</div> </div>
</template> </template>
<template #cell="{ record }"> <template #customRender="{ record }">
<template v-if="column.dataIndex === 'created_at'"> <template v-if="column.dataIndex === 'created_at'">
{{ exactFormatTime(record.created_at) }} {{ exactFormatTime(record.created_at) }}
</template> </template>
@ -87,9 +80,11 @@
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</template> </template>
</a-table-column> </Table.Column>
<template #emptyText>
<NoData text="暂无账户" />
</template> </template>
</a-table> </Table>
</div> </div>
<div class="right w-320px px-12px flex flex-col"> <div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between"> <div class="flex justify-between">
@ -113,7 +108,7 @@
<script setup> <script setup>
import { formatTableField, exactFormatTime } from '@/utils/tools'; 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; const { Option } = Select;
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing'; import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';

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

@ -43,35 +43,28 @@
</Option> </Option>
</Select> </Select>
</div> </div>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
column-resizable rowKey="id"
row-key="id" :rowSelection="rowSelection"
:row-selection="rowSelection"
:pagination="false" :pagination="false"
:scroll="{ x: '100%', y: '100%' }" :scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden" class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered bordered
@select="handleSelect" :showSorterTooltip="false"
@select-all="handleSelectAll" @change="(pagination, filters, sorter) => {}"
> >
<template #empty> <Table.Column
<NoData text="暂无账户"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS" v-for="column in TABLE_COLUMNS"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sortable="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -82,7 +75,7 @@
</div> </div>
</template> </template>
<template #cell="{ record }"> <template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'"> <template v-if="column.dataIndex === 'platform'">
<img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" /> <img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
</template> </template>
@ -90,9 +83,11 @@
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</template> </template>
</a-table-column> </Table.Column>
<template #emptyText>
<NoData text="暂无账户"/>
</template> </template>
</a-table> </Table>
</div> </div>
<div class="right w-320px px-12px flex flex-col"> <div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between"> <div class="flex justify-between">
@ -117,7 +112,7 @@
<script setup> <script setup>
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform'; import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools'; 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; const { Option } = Select;
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing'; import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';

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

@ -43,35 +43,32 @@
</Option> </Option>
</Select> </Select>
</div> </div>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
column-resizable rowKey="id"
row-key="id" :rowSelection="{
:row-selection="rowSelection" type: 'checkbox',
selectedRowKeys: selectedRowKeys,
onChange: handleSelect,
onSelectAll: handleSelectAll,
}"
:pagination="false" :pagination="false"
:scroll="{ x: '100%', y: '100%' }" :scroll="{ x: '100%', y: '100%' }"
class="flex-1 overflow-hidden" class="flex-1 overflow-hidden"
:selected-keys="selectedRowKeys"
bordered bordered
@select="handleSelect" :showSorterTooltip="false"
@select-all="handleSelectAll"
> >
<template #empty> <Table.Column
<NoData text="暂无账号"/>
</template>
<template #columns>
<a-table-column
v-for="column in TABLE_COLUMNS" v-for="column in TABLE_COLUMNS"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sortable="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -81,8 +78,7 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template #customRender="{ record }">
<template #cell="{ record }">
<template v-if="column.dataIndex === 'platform'"> <template v-if="column.dataIndex === 'platform'">
<img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" /> <img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
</template> </template>
@ -90,9 +86,11 @@
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</template> </template>
</a-table-column> </Table.Column>
<template #emptyText>
<NoData text="暂无账号"/>
</template> </template>
</a-table> </Table>
</div> </div>
<div class="right w-320px px-12px flex flex-col"> <div class="right w-320px px-12px flex flex-col">
<div class="flex justify-between"> <div class="flex justify-between">
@ -115,7 +113,7 @@
<script setup> <script setup>
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform'; import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
import { formatTableField } from '@/utils/tools'; 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; const { Option } = Select;
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing'; import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';

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

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

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

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

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

@ -31,18 +31,39 @@
<template #default>添加新分组</template> <template #default>添加新分组</template>
</Button> </Button>
</div> </div>
<a-table <Table
column-resizable :dataSource="list"
:columns="columns" rowKey="id"
:data="list"
row-key="id"
:loading="loading" :loading="loading"
:scroll="{ y: 500 }" :scroll="{ y: 500 }"
class="h-500px" class="h-500px"
:pagination="false" :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> <NoData>
<span class="s1 mb-16px">暂无分组</span> <span class="s1 mb-16px">暂无分组</span>
<Button type="primary" class="mb-16px" size="medium" @click="openAdd" <Button type="primary" class="mb-16px" size="medium" @click="openAdd"
@ -53,13 +74,7 @@
</Button> </Button>
</NoData> </NoData>
</template> </template>
<template #action="{ record }"> </Table>
<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>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end"> <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination <a-pagination
:total="pageInfo.total" :total="pageInfo.total"
@ -81,9 +96,10 @@
<script setup> <script setup>
import { ref, reactive, onMounted } from 'vue'; 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 { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools'; import { exactFormatTime } from '@/utils/tools';
const { Column } = Table;
import AddGroup from './add-group.vue'; import AddGroup from './add-group.vue';
import DeleteGroup from './delete-group.vue'; import DeleteGroup from './delete-group.vue';
@ -159,9 +175,9 @@ function openDelete(record) {
deleteGroupRef.value.open(record); deleteGroupRef.value.open(record);
} }
const handleSorterChange = (column, order) => { const handleTableChange = (pagination, filters, sorter) => {
query.value.sort_column = column; query.value.sort_column = sorter.field;
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc'; query.value.sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
getData(); getData();
}; };
async function getData() { async function getData() {

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

@ -29,40 +29,33 @@
</div> </div>
</div> </div>
<a-table <Table
ref="tableRef" ref="tableRef"
column-resizable :dataSource="dataSource"
:data="dataSource" rowKey="id"
row-key="id" :rowSelection="{
:row-selection="{
type: 'checkbox', type: 'checkbox',
showCheckedAll: true, selectedRowKeys: selectedItems,
width: 48, onChange: handleSelect,
onSelectAll: handleSelectAll,
}" }"
:selected-keys="selectedItems"
:pagination="false" :pagination="false"
:scroll="{ x: '100%' }" :scroll="{ x: '100%' }"
class="plan-table w-100%" class="plan-table w-100%"
bordered bordered
@sorter-change="handleSorterChange" :showSorterTooltip="false"
@select="handleSelect" @change="handleTableChange"
@select-all="handleSelectAll"
> >
<template #empty> <Table.Column
<NoData />
</template>
<template #columns>
<a-table-column
v-for="column in tableColumns" v-for="column in tableColumns"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sortable="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -73,18 +66,18 @@
</Tooltip> </Tooltip>
</div> </div>
</template> </template>
<template #customRender="{ record }">
<template v-if="column.dataIndex === 'platform'" #cell="{ record }"> <template v-if="column.dataIndex === 'platform'">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }} {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template> </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}`"> <div class="status-tag" :class="`status-tag-${record.status}`">
<span class="cts status-tag-text">{{ <span class="cts status-tag-text">{{
STATUS_LIST.find((item) => item.value === record.status)?.label STATUS_LIST.find((item) => item.value === record.status)?.label
}}</span> }}</span>
</div> </div>
</template> </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"> <div class="ai-evaluation-row flex">
<template v-if="record.ai_evaluate"> <template v-if="record.ai_evaluate">
<img <img
@ -105,41 +98,40 @@
</template> </template>
</div> </div>
</template> </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> <Button type="primary" ghost size="small" @click="handleDetail(record)">详情</Button>
</template> </template>
<template v-else-if="column.isRateField">
<template v-else-if="column.isRateField" #cell="{ record }">
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'"> <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-up v-if="record[column.dataIndex] > 0" size="16" />
<icon-arrow-down v-else size="16" /> <icon-arrow-down v-else size="16" />
{{ formatTableField(column, record) }} {{ formatTableField(column, record) }}
</div> </div>
</template> </template>
<!-- <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }"> <template v-else>
<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 }">
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</a-table-column>
</template> </template>
</a-table> </Table.Column>
<template #emptyText>
<NoData />
</template>
</Table>
<CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" /> <CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
</template> </template>
<script setup> <script setup>
import { Checkbox, Button } from 'ant-design-vue'; import { Checkbox, Button, Table } from 'ant-design-vue';
import { ref, computed } from '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 { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
import { formatTableField } from '@/utils/tools'; import { formatTableField } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants'; import { TABLE_COLUMNS } from './constants';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import CustomTableColumnModal from '@/components/custom-table-column-modal'; import CustomTableColumnModal from '@/components/custom-table-column-modal';
import { getCustomColumns } from '@/api/all/common'; import { getCustomColumns } from '@/api/all/common';
const { Column } = Table;
import icon1 from '@/assets/img/media-account/icon-custom.png'; import icon1 from '@/assets/img/media-account/icon-custom.png';
import icon2 from '@/assets/img/media-account/icon-warn.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, () => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
); );
const handleSelectAll = (checked) => { // 处理表格变化（排序、分页等）
if (checked) { const handleTableChange = (pagination, filters, sorter) => {
selectedItems.value = props.dataSource.map((item) => item.id); if (sorter && sorter.field) {
} else { emit('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
selectedItems.value = [];
} }
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) => { const handleSelect = (selectedRowKeys, selectedRows) => {
@ -195,6 +176,19 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
emit('selectionChange', 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 = () => { const handleExport = () => {
emit('export'); emit('export');
}; };

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

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

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

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

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

@ -1,14 +1,46 @@
<template> <template>
<view> <view>
<a-table class="account-table" :columns="columns" :data="listData" :pagination="false"> <Table class="account-table" :dataSource="listData" :pagination="false" :showSorterTooltip="false" @change="(pagination, filters, sorter) => {}">
<template #platform="{ record }"> <Table.Column
<span class="mr-8px" v-if="record.platform.length > 0" v-for="(item, index) in record.platform"> 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" /> <img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span> <span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span> </span>
</template> </template>
<template #operation="{ record }"> </template>
<Space size="medium"> </Table.Column>
<Table.Column
title="操作"
dataIndex="operation"
:width="60"
:minWidth="60"
>
<template #customRender="{ record }">
<Space>
<Space> <Space>
<a-popconfirm <a-popconfirm
content="确定删除吗?" content="确定删除吗?"
@ -26,48 +58,17 @@
</Space> </Space>
</Space> </Space>
</template> </template>
</a-table> </Table.Column>
</Table>
</view> </view>
</template> </template>
<script setup lang="ts"> <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 { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/utils/platform'; import { PLATFORM_LIST } from '@/utils/platform';
import { Message } from '@arco-design/web-vue'; 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 // hotTranslation.vue
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { deleteHistorylog } from '@/api/all/propertyMarketing'; import { deleteHistorylog } from '@/api/all/propertyMarketing';

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

@ -1,13 +1,49 @@
<template> <template>
<view class="table-data"> <view class="table-data">
<a-table <Table
class="account-table" class="account-table"
:columns="columns" :dataSource="listData"
:data="listData"
:pagination="false" :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> <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> <Space>
<span>本周总消耗</span> <span>本周总消耗</span>
<a-popover position="tl"> <a-popover position="tl">
@ -18,7 +54,18 @@
</a-popover> </a-popover>
</Space> </Space>
</template> </template>
<template #pre_total_use_amount_chain_title> <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> <Space>
<span>本周总消耗环比</span> <span>本周总消耗环比</span>
<a-popover position="tl"> <a-popover position="tl">
@ -29,46 +76,7 @@
</a-popover> </a-popover>
</Space> </Space>
</template> </template>
<template #roi> <template #customRender="{ record }">
<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 <a-statistic
:value="record.pre_total_use_amount_chain * 100" :value="record.pre_total_use_amount_chain * 100"
:value-style="{ :value-style="{
@ -84,15 +92,53 @@
<template #suffix>%</template> <template #suffix>%</template>
</a-statistic> </a-statistic>
</template> </template>
</Table.Column>
<template #clickRate="{ record }"> <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> <span>{{ `${record.click_rate}%` }}</span>
</template> </template>
</a-table> </Table.Column>
</Table>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Space } from "ant-design-vue" import { Space, Table } from "ant-design-vue"
import { PLATFORM_LIST } from '@/utils/platform'; import { PLATFORM_LIST } from '@/utils/platform';
const props = defineProps({ const props = defineProps({
@ -109,69 +155,6 @@ const emit = defineEmits(['updateQuery']);
const handleSorterChange = (column, order) => { const handleSorterChange = (column, order) => {
emit('updateQuery', { 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> </script>
<style lang="scss"></style> <style lang="scss"></style>

77
src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
View File

@ -1,34 +1,29 @@
<template> <template>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
row-key="id" rowKey="id"
column-resizable
:pagination="false" :pagination="false"
:scroll="{ x: '100%' }" :scroll="{ x: '100%' }"
class="flex-1 manuscript-table w-100%" class="flex-1 manuscript-table w-100%"
bordered bordered
:row-selection="rowSelection" :rowSelection="rowSelection"
:selected-row-keys="selectedRowKeys" :showSorterTooltip="false"
@sorter-change="handleSorterChange" @change="handleTableChange"
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
@select-all="(check) => emits('selectAll', check)"
> >
<template #empty> <template #emptyText>
<NoData text="暂无稿件" /> <NoData text="暂无稿件" />
</template> </template>
<template #columns> <Column
<a-table-column
v-for="column in tableColumns" v-for="column in tableColumns"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sorter="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -39,7 +34,7 @@
</div> </div>
</template> </template>
<template v-if="column.dataIndex === 'customer_opinion'" #cell="{ record }"> <template v-if="column.dataIndex === 'customer_opinion'" #customRender="{ record }">
<p <p
class="h-28px px-8px flex items-center rounded-2px w-fit" class="h-28px px-8px flex items-center rounded-2px w-fit"
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }" :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
@ -49,7 +44,7 @@
}}</span> }}</span>
</p> </p>
</template> </template>
<template v-else-if="column.dataIndex === 'platform'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'platform'" #customRender="{ record }">
<template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template> <template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
<img <img
v-else v-else
@ -59,15 +54,15 @@
:src="PLATFORMS.find((item) => item.value === record.platform)?.icon" :src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
/> />
</template> </template>
<template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'compliance_level'" #customRender="{ record }">
<span class="cts num !color-#6D4CFE">{{ <span class="cts num !color-#6D4CFE">{{
record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-' record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
}}</span> }}</span>
</template> </template>
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" /> <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
</template> </template>
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img <img
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3" :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
@ -81,23 +76,23 @@
</div> </div>
</template> </template>
<template <template
#cell="{ record }" #customRender="{ record }"
v-else-if=" v-else-if="
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex) ['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
" "
> >
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span> <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
</template> </template>
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover"> <HoverImagePreview :src="record.cover">
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover"> <Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error> <template #error>
<img :src="icon4" class="w-full h-full" /> <img :src="icon4" class="w-full h-full" />
</template> </template>
</a-image> </Image>
</HoverImagePreview> </HoverImagePreview>
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" /> <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<Button <Button
@ -119,17 +114,17 @@
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button> <Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
</div> </div>
</template> </template>
<template v-else #cell="{ record }"> <template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</a-table-column> </Column>
</template> </Table>
</a-table>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref, computed } from 'vue';
import { Button } from 'ant-design-vue'; import { Button, Tooltip, Table, Image } from 'ant-design-vue';
const { Column } = Table;
import { formatTableField, exactFormatTime } from '@/utils/tools'; import { formatTableField, exactFormatTime } from '@/utils/tools';
import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants'; import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts'; import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';
@ -179,8 +174,20 @@ const tableRef = ref(null);
const writerCode = computed(() => route.params.writerCode); const writerCode = computed(() => route.params.writerCode);
const handleSorterChange = (column, order) => { const handleTableChange = (pagination, filters, sorter) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc'); 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) => { const onDelete = (item) => {
emits('delete', item); emits('delete', item);

1
src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
View File

@ -334,6 +334,7 @@ export default {
maskClosable={false} maskClosable={false}
unmount-on-close unmount-on-close
onCancel={onClose} onCancel={onClose}
centered
footer={isDefault.value && isLocal.value ? null : renderFooterButtons()} footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
> >
<Form ref={formRef} model={form.value} layout="horizontal" auto-label-width> <Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>

13
src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
View File

@ -52,16 +52,3 @@ async function onDelete() {
defineExpose({ open }); defineExpose({ open });
</script> </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>

60
src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
View File

@ -1,30 +1,28 @@
<template> <template>
<a-table <Table
ref="tableRef" ref="tableRef"
:data="dataSource" :dataSource="dataSource"
row-key="id" rowKey="id"
column-resizable
:pagination="false" :pagination="false"
:scroll="{ x: '100%' }" :scroll="{ x: '100%' }"
class="manuscript-table w-100%" class="manuscript-table w-100%"
bordered bordered
@sorter-change="handleSorterChange" :showSorterTooltip="false"
@change="handleTableChange"
> >
<template #empty> <template #emptyText>
<NoData text="暂无稿件" /> <NoData text="暂无稿件" />
</template> </template>
<template #columns> <Column
<a-table-column
v-for="column in TABLE_COLUMNS" v-for="column in TABLE_COLUMNS"
:key="column.dataIndex" :key="column.dataIndex"
:data-index="column.dataIndex" :dataIndex="column.dataIndex"
:fixed="column.fixed" :fixed="column.fixed"
:width="column.width" :width="column.width"
:min-width="column.minWidth" :minWidth="column.minWidth"
:sortable="column.sortable" :sorter="column.sortable"
:align="column.align" :align="column.align"
ellipsis :ellipsis="true"
tooltip
> >
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
@ -35,13 +33,13 @@
</div> </div>
</template> </template>
<template v-if="column.dataIndex === 'create_at'" #cell="{ record }"> <template v-if="column.dataIndex === 'create_at'" #customRender="{ record }">
{{ exactFormatTime(record.create_at) }} {{ exactFormatTime(record.create_at) }}
</template> </template>
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" /> <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
</template> </template>
<template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'audit_status'" #customRender="{ record }">
<div <div
class="flex items-center w-fit h-28px px-8px rounded-2px" class="flex items-center w-fit h-28px px-8px rounded-2px"
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }" :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
@ -51,7 +49,7 @@
}}</span> }}</span>
</div> </div>
</template> </template>
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img <img
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3" :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
@ -64,39 +62,39 @@
}}</span> }}</span>
</div> </div>
</template> </template>
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }"> <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }} {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
</template> </template>
<template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #cell="{ record }"> <template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #customRender="{ record }">
{{ exactFormatTime(record[column.dataIndex]) }} {{ exactFormatTime(record[column.dataIndex]) }}
</template> </template>
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
<HoverImagePreview :src="record.cover"> <HoverImagePreview :src="record.cover">
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover"> <Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
<template #error> <template #error>
<img :src="icon4" class="w-full h-full" /> <img :src="icon4" class="w-full h-full" />
</template> </template>
</a-image> </Image>
</HoverImagePreview> </HoverImagePreview>
</template> </template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }"> <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
<div class="flex items-center"> <div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" /> <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" class="mr-8px" @click="onEdit(record)">编辑</Button>
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button> <Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
</div> </div>
</template> </template>
<template v-else #cell="{ record }"> <template v-else #customRender="{ record }">
{{ formatTableField(column, record, true) }} {{ formatTableField(column, record, true) }}
</template> </template>
</a-table-column> </Column>
</template> </Table>
</a-table>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; 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 { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants'; import { TABLE_COLUMNS } from './constants';
import { import {
@ -125,8 +123,10 @@ const props = defineProps({
const tableRef = ref(null); const tableRef = ref(null);
const route = useRoute(); const route = useRoute();
const handleSorterChange = (column, order) => { const handleTableChange = (pagination, filters, sorter) => {
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc'); if (sorter && sorter.field) {
emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
}
}; };
const onDelete = (item) => { const onDelete = (item) => {
emits('delete', item); emits('delete', item);