修复定时任务页面样式

This commit is contained in:
whyour 2023-08-17 08:26:48 +08:00
parent b40673e9ac
commit 2d936f1341
4 changed files with 81 additions and 73 deletions

View File

@ -20,7 +20,7 @@ src/.umi
src/.umi-production src/.umi-production
src/.umi-test src/.umi-test
.env.local .env.local
env .env
history history
version.ts version.ts
config config

View File

@ -69,7 +69,7 @@ const Crontab = () => {
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
fixed: 'left', fixed: 'left',
width: 120, width: 140,
render: (text: string, record: any) => ( render: (text: string, record: any) => (
<> <>
<a <a
@ -124,7 +124,7 @@ const Crontab = () => {
title: intl.get('命令/脚本'), title: intl.get('命令/脚本'),
dataIndex: 'command', dataIndex: 'command',
key: 'command', key: 'command',
width: 200, width: 220,
render: (text, record) => { render: (text, record) => {
return ( return (
<Paragraph <Paragraph
@ -214,7 +214,7 @@ const Crontab = () => {
}, },
{ {
title: intl.get('最后运行时长'), title: intl.get('最后运行时长'),
width: 180, width: 167,
dataIndex: 'last_running_time', dataIndex: 'last_running_time',
key: 'last_running_time', key: 'last_running_time',
sorter: { sorter: {
@ -232,7 +232,7 @@ const Crontab = () => {
title: intl.get('最后运行时间'), title: intl.get('最后运行时间'),
dataIndex: 'last_execution_time', dataIndex: 'last_execution_time',
key: 'last_execution_time', key: 'last_execution_time',
width: 150, width: 141,
sorter: { sorter: {
compare: (a, b) => { compare: (a, b) => {
return (a.last_execution_time || 0) - (b.last_execution_time || 0); return (a.last_execution_time || 0) - (b.last_execution_time || 0);
@ -259,7 +259,7 @@ const Crontab = () => {
}, },
{ {
title: intl.get('下次运行时间'), title: intl.get('下次运行时间'),
width: 150, width: 144,
sorter: { sorter: {
compare: (a: any, b: any) => { compare: (a: any, b: any) => {
return a.nextRunTime - b.nextRunTime; return a.nextRunTime - b.nextRunTime;
@ -276,7 +276,7 @@ const Crontab = () => {
}, },
{ {
title: intl.get('关联订阅'), title: intl.get('关联订阅'),
width: 190, width: 185,
render: (text, record: any) => render: (text, record: any) =>
record.sub_id ? ( record.sub_id ? (
<Name <Name
@ -292,46 +292,40 @@ const Crontab = () => {
{ {
title: intl.get('操作'), title: intl.get('操作'),
key: 'action', key: 'action',
width: 130, width: 140,
fixed: isPhone ? undefined : 'right', fixed: isPhone ? undefined : 'right',
render: (text, record, index) => { render: (text, record, index) => {
const isPc = !isPhone; const isPc = !isPhone;
return ( return (
<Space size="middle"> <Space size="middle">
{record.status === CrontabStatus.idle && ( {record.status === CrontabStatus.idle && (
<Tooltip title={isPc ? intl.get('运行') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
runCron(record, index); runCron(record, index);
}} }}
> >
<PlayCircleOutlined /> {intl.get('运行')}
</a> </a>
</Tooltip>
)} )}
{record.status !== CrontabStatus.idle && ( {record.status !== CrontabStatus.idle && (
<Tooltip title={isPc ? intl.get('停止') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
stopCron(record, index); stopCron(record, index);
}} }}
> >
<PauseCircleOutlined /> {intl.get('停止')}
</a> </a>
</Tooltip>
)} )}
<Tooltip title={isPc ? intl.get('日志') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogCron({ ...record, timestamp: Date.now() }); setLogCron({ ...record, timestamp: Date.now() });
}} }}
> >
<FileTextOutlined /> {intl.get('日志')}
</a> </a>
</Tooltip>
<MoreBtn key="more" record={record} index={index} /> <MoreBtn key="more" record={record} index={index} />
</Space> </Space>
); );
@ -1041,7 +1035,7 @@ const Crontab = () => {
dataSource={value} dataSource={value}
rowKey="id" rowKey="id"
size="middle" size="middle"
scroll={{ x: 1000, y: tableScrollHeight }} scroll={{ x: 1200, y: tableScrollHeight }}
loading={loading} loading={loading}
rowSelection={rowSelection} rowSelection={rowSelection}
rowClassName={getRowClassName} rowClassName={getRowClassName}

View File

@ -1,4 +1,4 @@
import intl from 'react-intl-universal' import intl from 'react-intl-universal';
import React, { import React, {
useCallback, useCallback,
useRef, useRef,
@ -149,7 +149,7 @@ const Env = () => {
title: intl.get('状态'), title: intl.get('状态'),
key: 'status', key: 'status',
dataIndex: 'status', dataIndex: 'status',
width: 80, width: 100,
filters: [ filters: [
{ {
text: intl.get('已启用'), text: intl.get('已启用'),
@ -186,7 +186,11 @@ const Env = () => {
</Tooltip> </Tooltip>
<Tooltip <Tooltip
title={ title={
isPc ? (record.status === Status. ? intl.get('启用') : intl.get('禁用')) : '' isPc
? record.status === Status.
? intl.get('启用')
: intl.get('禁用')
: ''
} }
> >
<a onClick={() => enabledOrDisabledEnv(record, index)}> <a onClick={() => enabledOrDisabledEnv(record, index)}>
@ -232,10 +236,15 @@ const Env = () => {
const enabledOrDisabledEnv = (record: any, index: number) => { const enabledOrDisabledEnv = (record: any, index: number) => {
Modal.confirm({ Modal.confirm({
title: `确认${record.status === Status. ? intl.get('启用') : intl.get('禁用')}`, title: `确认${
record.status === Status. ? intl.get('启用') : intl.get('禁用')
}`,
content: ( content: (
<> <>
{intl.get('确认')}{record.status === Status. ? intl.get('启用') : intl.get('禁用')} {intl.get('确认')}
{record.status === Status.
? intl.get('启用')
: intl.get('禁用')}
Env{' '} Env{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning"> <Text style={{ wordBreak: 'break-all' }} type="warning">
{record.value} {record.value}
@ -254,7 +263,11 @@ const Env = () => {
.then(({ code, data }) => { .then(({ code, data }) => {
if (code === 200) { if (code === 200) {
message.success( message.success(
`${record.status === Status. ? intl.get('启用') : intl.get('禁用')}${intl.get('成功')}`, `${
record.status === Status.
? intl.get('启用')
: intl.get('禁用')
}${intl.get('成功')}`,
); );
const newStatus = const newStatus =
record.status === Status. ? Status.已启用 : Status.已禁用; record.status === Status. ? Status.已启用 : Status.已禁用;
@ -435,7 +448,13 @@ const Env = () => {
const operateEnvs = (operationStatus: number) => { const operateEnvs = (operationStatus: number) => {
Modal.confirm({ Modal.confirm({
title: `确认${OperationName[operationStatus]}`, title: `确认${OperationName[operationStatus]}`,
content: <>{intl.get('确认')}{OperationName[operationStatus]}{intl.get('选中的变量吗')}</>, content: (
<>
{intl.get('确认')}
{OperationName[operationStatus]}
{intl.get('选中的变量吗')}
</>
),
onOk() { onOk() {
request request
.put( .put(
@ -567,7 +586,8 @@ const Env = () => {
</Button> </Button>
<span style={{ marginLeft: 8 }}> <span style={{ marginLeft: 8 }}>
{intl.get('已选择')} {intl.get('已选择')}
<a>{selectedRowIds?.length}</a>{intl.get('项')} <a>{selectedRowIds?.length}</a>
{intl.get('项')}
</span> </span>
</div> </div>
)} )}
@ -579,7 +599,7 @@ const Env = () => {
dataSource={value} dataSource={value}
rowKey="id" rowKey="id"
size="middle" size="middle"
scroll={{ x: 1000, y: tableScrollHeight }} scroll={{ x: 1200, y: tableScrollHeight }}
components={vt} components={vt}
loading={loading} loading={loading}
onRow={(record: any, index: number | undefined) => { onRow={(record: any, index: number | undefined) => {

View File

@ -184,45 +184,39 @@ const Subscription = () => {
{ {
title: intl.get('操作'), title: intl.get('操作'),
key: 'action', key: 'action',
width: 130, width: 140,
render: (text: string, record: any, index: number) => { render: (text: string, record: any, index: number) => {
const isPc = !isPhone; const isPc = !isPhone;
return ( return (
<Space size="middle"> <Space size="middle">
{record.status === SubscriptionStatus.idle && ( {record.status === SubscriptionStatus.idle && (
<Tooltip title={isPc ? intl.get('运行') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
runSubscription(record, index); runSubscription(record, index);
}} }}
> >
<PlayCircleOutlined /> {intl.get('运行')}
</a> </a>
</Tooltip>
)} )}
{record.status !== SubscriptionStatus.idle && ( {record.status !== SubscriptionStatus.idle && (
<Tooltip title={isPc ? intl.get('停止') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
stopSubsciption(record, index); stopSubsciption(record, index);
}} }}
> >
<PauseCircleOutlined /> {intl.get('停止')}
</a> </a>
</Tooltip>
)} )}
<Tooltip title={isPc ? intl.get('日志') : ''}>
<a <a
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogSubscription({ ...record, timestamp: Date.now() }); setLogSubscription({ ...record, timestamp: Date.now() });
}} }}
> >
<FileTextOutlined /> {intl.get('日志')}
</a> </a>
</Tooltip>
<MoreBtn key="more" record={record} index={index} /> <MoreBtn key="more" record={record} index={index} />
</Space> </Space>
); );