perf: 修改状态标签样式
This commit is contained in:
@ -5,7 +5,7 @@ import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask, postRedoTask } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
@ -234,7 +234,11 @@ export default {
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return <span>{TASK_STATUS.find((v) => v.value === record.status)?.label}</span>;
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
|
||||
@ -50,4 +50,37 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { IMPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
@ -225,9 +225,13 @@ export default {
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return <span>{TASK_STATUS.find((v) => v.value === record.status)?.label}</span>;
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>
|
||||
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 {
|
||||
|
||||
@ -50,4 +50,37 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
export enum enumTaskStatus {
|
||||
Exporting = 0, // 导出中
|
||||
Finished = 1, // 已完成
|
||||
Failed = 2 // 导出失败
|
||||
Exporting = 0, // 导出中
|
||||
Finished = 1, // 已完成
|
||||
Failed = 2, // 导出失败
|
||||
}
|
||||
|
||||
export const TASK_STATUS = [
|
||||
export const EXPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导出中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
@ -18,3 +18,17 @@ export const TASK_STATUS = [
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
export const IMPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导入中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: enumTaskStatus.Finished,
|
||||
},
|
||||
{
|
||||
label: '导入失败',
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user