open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-23 14:56:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化定时任务表格渲染

Browse Source
This commit is contained in:
whyour 2023-01-08 18:15:18 +08:00
parent 659dddace7
commit 2864845d5b
1 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/crontab/index.tsx
View File

@ -51,6 +51,8 @@ import { FilterValue, SorterResult } from 'antd/lib/table/interface';
import { SharedContext } from '@/layouts';
import useTableScrollHeight from '@/hooks/useTableScrollHeight';
import { getCommandScript } from '@/utils';
import { isEqual } from 'lodash';
import { ColumnProps } from 'antd/lib/table';
const { Text, Paragraph } = Typography;
const { Search } = Input;
@ -82,15 +84,30 @@ enum OperationPath {
'unpin',
}
export interface ICrontab {
name: string;
command: string;
schedule: string;
id: number;
status: number;
isDisabled?: 1 | 0;
isPinned?: 1 | 0;
labels?: string[];
last_running_time?: number;
last_execution_time?: number;
nextRunTime: Date;
}
const Crontab = () => {
const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
const columns: any = [
const columns: ColumnProps<ICrontab>[] = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
width: 150,
align: 'center' as const,
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text: string, record: any) => (
<>
<a
@ -137,7 +154,7 @@ const Crontab = () => {
</>
),
sorter: {
compare: (a: any, b: any) => a?.name?.localeCompare(b?.name),
compare: (a, b) => a?.name?.localeCompare(b?.name),
},
},
{
@ -146,7 +163,8 @@ const Crontab = () => {
key: 'command',
width: 300,
align: 'center' as const,
render: (text: string, record: any) => {
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record) => {
return (
<Paragraph
style={{
@ -176,8 +194,9 @@ const Crontab = () => {
key: 'schedule',
width: 110,
align: 'center' as const,
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
sorter: {
compare: (a: any, b: any) => a.schedule.localeCompare(b.schedule),
compare: (a, b) => a.schedule.localeCompare(b.schedule),
},
},
{
@ -187,11 +206,12 @@ const Crontab = () => {
key: 'last_execution_time',
width: 150,
sorter: {
compare: (a: any, b: any) => {
return a.last_execution_time - b.last_execution_time;
compare: (a, b) => {
return (a.last_execution_time || 0) - (b.last_execution_time || 0);
},
},
render: (text: string, record: any) => {
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record) => {
const language = navigator.language || navigator.languages[0];
return (
<span
@ -221,7 +241,8 @@ const Crontab = () => {
return a.last_running_time - b.last_running_time;
},
},
render: (text: string, record: any) => {
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record) => {
return record.last_running_time
? diffTime(record.last_running_time)
: '-';
@ -236,7 +257,8 @@ const Crontab = () => {
return a.nextRunTime - b.nextRunTime;
},
},
render: (text: string, record: any) => {
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record) => {
const language = navigator.language || navigator.languages[0];
return record.nextRunTime
.toLocaleString(language, {
@ -270,14 +292,15 @@ const Crontab = () => {
value: 3,
},
],
onFilter: (value: number, record: any) => {
onFilter: (value, record) => {
if (record.isDisabled && record.status !== 0) {
return value === 2;
} else {
return record.status === value;
}
},
render: (text: string, record: any) => (
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record) => (
<>
{(!record.isDisabled || record.status !== CrontabStatus.idle) && (
<>
@ -314,7 +337,8 @@ const Crontab = () => {
key: 'action',
align: 'center' as const,
width: 100,
render: (text: string, record: any, index: number) => {
shouldCellUpdate: (record, prevRecord) => isEqual(record, prevRecord),
render: (text, record, index) => {
const isPc = !isPhone;
return (
<Space size="middle">