feat: table组件替换
This commit is contained in:
rd
@ -1,135 +1,130 @@
|
||||
<template>
|
||||
<a-table
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:dataSource="dataSource"
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="flex-1 manuscript-table w-100%"
|
||||
bordered
|
||||
:row-selection="rowSelection"
|
||||
:selected-row-keys="selectedRowKeys"
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
|
||||
@select-all="(check) => emits('selectAll', check)"
|
||||
:rowSelection="rowSelection"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无稿件" />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<Column
|
||||
v-for="column in tableColumns"
|
||||
:key="column.dataIndex"
|
||||
:dataIndex="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sorter="column.sortable"
|
||||
:align="column.align"
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
|
||||
<p
|
||||
class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
|
||||
>
|
||||
<span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
|
||||
getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
|
||||
}}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
<template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
|
||||
<img
|
||||
v-else
|
||||
width="24"
|
||||
height="24"
|
||||
class="rounded-4px"
|
||||
:src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }">
|
||||
<span class="cts num !color-#6D4CFE">{{
|
||||
record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
#cell="{ record }"
|
||||
v-else-if="
|
||||
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
|
||||
"
|
||||
<template v-if="column.dataIndex === 'customer_opinion'" #customRender="{ record }">
|
||||
<p
|
||||
class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
|
||||
>
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onCheck(record)"
|
||||
v-if="audit_status === AuditStatus.Pending"
|
||||
>审核</Button
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onScan(record)"
|
||||
v-else-if="audit_status === AuditStatus.Auditing"
|
||||
>查看</Button
|
||||
>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
|
||||
getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
|
||||
}}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'platform'" #customRender="{ record }">
|
||||
<template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
|
||||
<img
|
||||
v-else
|
||||
width="24"
|
||||
height="24"
|
||||
class="rounded-4px"
|
||||
:src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'compliance_level'" #customRender="{ record }">
|
||||
<span class="cts num !color-#6D4CFE">{{
|
||||
record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
#customRender="{ record }"
|
||||
v-else-if="
|
||||
['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
|
||||
"
|
||||
>
|
||||
<span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</Image>
|
||||
</HoverImagePreview>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onCheck(record)"
|
||||
v-if="audit_status === AuditStatus.Pending"
|
||||
>审核</Button
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="onScan(record)"
|
||||
v-else-if="audit_status === AuditStatus.Auditing"
|
||||
>查看</Button
|
||||
>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #customRender="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</Column>
|
||||
</Table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Tooltip, Table, Image } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
|
||||
import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';
|
||||
@ -179,8 +174,20 @@ const tableRef = ref(null);
|
||||
|
||||
const writerCode = computed(() => route.params.writerCode);
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
if (sorter && sorter.field) {
|
||||
emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
|
||||
}
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
selectedRowKeys: computed(() => props.selectedRowKeys),
|
||||
onSelect: (record, selected, selectedRows, nativeEvent) => {
|
||||
emits('select', selectedRows.map(row => row.id), record.id, record);
|
||||
},
|
||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
emits('selectAll', selected);
|
||||
},
|
||||
};
|
||||
const onDelete = (item) => {
|
||||
emits('delete', item);
|
||||
|
||||
@ -334,6 +334,7 @@ export default {
|
||||
maskClosable={false}
|
||||
unmount-on-close
|
||||
onCancel={onClose}
|
||||
centered
|
||||
footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
|
||||
>
|
||||
<Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>
|
||||
|
||||
@ -52,16 +52,3 @@ async function onDelete() {
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal v-model:open="visible" title="删除稿件" width="480px" @cancel="onClose" centered>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ projectName }} 这个稿件吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button size="large" @click="onClose">取消</Button>
|
||||
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -1,102 +1,100 @@
|
||||
<template>
|
||||
<a-table
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:dataSource="dataSource"
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="manuscript-table w-100%"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
:showSorterTooltip="false"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #empty>
|
||||
<template #emptyText>
|
||||
<NoData text="暂无稿件" />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<Column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:dataIndex="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:minWidth="column.minWidth"
|
||||
:sorter="column.sortable"
|
||||
:align="column.align"
|
||||
:ellipsis="true"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'create_at'" #cell="{ record }">
|
||||
{{ exactFormatTime(record.create_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
|
||||
>
|
||||
<span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
|
||||
getStatusInfo(record.audit_status).name
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #cell="{ record }">
|
||||
{{ exactFormatTime(record[column.dataIndex]) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</a-image>
|
||||
</HoverImagePreview>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
|
||||
<Button type="primary" ghost size="small" class="mr-8px" @click="onEdit(record)">编辑</Button>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<template v-if="column.dataIndex === 'create_at'" #customRender="{ record }">
|
||||
{{ exactFormatTime(record.create_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'audit_status'" #customRender="{ record }">
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
|
||||
>
|
||||
<span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
|
||||
getStatusInfo(record.audit_status).name
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
|
||||
{{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
|
||||
</template>
|
||||
<template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #customRender="{ record }">
|
||||
{{ exactFormatTime(record[column.dataIndex]) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
|
||||
<HoverImagePreview :src="record.cover">
|
||||
<Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
|
||||
<template #error>
|
||||
<img :src="icon4" class="w-full h-full" />
|
||||
</template>
|
||||
</Image>
|
||||
</HoverImagePreview>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
|
||||
<Button type="primary" ghost size="small" class="mr-8px" @click="onEdit(record)">编辑</Button>
|
||||
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else #customRender="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</Column>
|
||||
</Table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { Button, Tooltip, Table, Image } from 'ant-design-vue';
|
||||
const { Column } = Table;
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import {
|
||||
@ -125,8 +123,10 @@ const props = defineProps({
|
||||
const tableRef = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
if (sorter && sorter.field) {
|
||||
emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
|
||||
}
|
||||
};
|
||||
const onDelete = (item) => {
|
||||
emits('delete', item);
|
||||
|
||||
Reference in New Issue
Block a user