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 NoData from '@/components/no-data';
|
||||||
import { getTask, postRedoTask } from '@/api/all/common';
|
import { getTask, postRedoTask } from '@/api/all/common';
|
||||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
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 { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||||
import { downloadByUrl } from '@/utils/tools';
|
import { downloadByUrl } from '@/utils/tools';
|
||||||
@ -234,7 +234,11 @@ export default {
|
|||||||
),
|
),
|
||||||
cell: ({ record }) => {
|
cell: ({ record }) => {
|
||||||
if (column.dataIndex === 'status') {
|
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') {
|
} else if (column.dataIndex === 'operator.name') {
|
||||||
return record.operator?.name || record.operator?.mobile;
|
return record.operator?.name || record.operator?.mobile;
|
||||||
} else if (column.dataIndex === 'created_at') {
|
} else if (column.dataIndex === 'created_at') {
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
.operation-btn {
|
.operation-btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -41,7 +41,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
@ -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 NoData from '@/components/no-data';
|
||||||
import { getTask } from '@/api/all/common';
|
import { getTask } from '@/api/all/common';
|
||||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
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 { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||||
import { downloadByUrl } from '@/utils/tools';
|
import { downloadByUrl } from '@/utils/tools';
|
||||||
@ -225,9 +225,13 @@ export default {
|
|||||||
),
|
),
|
||||||
cell: ({ record }) => {
|
cell: ({ record }) => {
|
||||||
if (column.dataIndex === 'status') {
|
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') {
|
} 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') {
|
} else if (column.dataIndex === 'created_at') {
|
||||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||||
} else {
|
} 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 {
|
export enum enumTaskStatus {
|
||||||
Exporting = 0, // 导出中
|
Exporting = 0, // 导出中
|
||||||
Finished = 1, // 已完成
|
Finished = 1, // 已完成
|
||||||
Failed = 2 // 导出失败
|
Failed = 2, // 导出失败
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TASK_STATUS = [
|
export const EXPORT_TASK_STATUS = [
|
||||||
{
|
{
|
||||||
label: '导出中',
|
label: '导出中',
|
||||||
value: enumTaskStatus.Exporting,
|
value: enumTaskStatus.Exporting,
|
||||||
@ -18,3 +18,17 @@ export const TASK_STATUS = [
|
|||||||
value: enumTaskStatus.Failed,
|
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