feat: 添加文本溢出提示组件并调整表格列宽
This commit is contained in:
@ -20,7 +20,7 @@ export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
|
||||
@ -4,6 +4,8 @@ import { Button, Checkbox, Input, Table, Pagination, message, notification } fro
|
||||
|
||||
import SvgIcon from '@/components/svg-icon/index.vue';
|
||||
import NoData from '@/components/no-data';
|
||||
import TextOverTips from '@/components/text-over-tips/index.vue';
|
||||
|
||||
import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
@ -308,8 +310,10 @@ export default {
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'name') {
|
||||
return <TextOverTips context={record.name} />;
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
@ -320,7 +324,7 @@ export default {
|
||||
))}
|
||||
<Table.Column
|
||||
dataIndex="operation"
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 80}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
customRender={({ record }) => (
|
||||
|
||||
@ -83,4 +83,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-table) {
|
||||
.ant-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ant-table-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ant-table-body {
|
||||
// flex: 1;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
|
||||
import { Button, Table, Pagination } from 'ant-design-vue';
|
||||
import NoData from '@/components/no-data';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import TextOverTips from '@/components/text-over-tips/index.vue';
|
||||
|
||||
import { getTask } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
@ -156,6 +157,8 @@ export default {
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'name') {
|
||||
return <TextOverTips context={record.name} />;
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
@ -168,7 +171,7 @@ export default {
|
||||
))}
|
||||
<Table.Column
|
||||
dataIndex="operation"
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 80}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
customRender={({ record }) => (
|
||||
|
||||
@ -83,4 +83,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-table) {
|
||||
.ant-table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ant-table-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ant-table-body {
|
||||
// flex: 1;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<SvgIcon name="xt-question-circle" class="tooltip-icon color-#737478" size="16" />
|
||||
<SvgIcon name="xt-question-circle" class="tooltip-icon color-#737478 relative top-3px" size="16" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
<template #title>
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<SvgIcon name="xt-question-circle" class="tooltip-icon color-#737478" size="14" />
|
||||
<SvgIcon name="xt-question-circle" class="tooltip-icon color-#737478 relative top-2px" size="14" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px bold">作品数据</span>
|
||||
<Tooltip title="展示作品的曝光量、点赞量等数据指标">
|
||||
<SvgIcon name="xt-question-circle" class="color-#737478" size="14" />
|
||||
<SvgIcon name="xt-question-circle" class="color-#737478 relative top-2px" size="14" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user