open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2026-07-17 17:54:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

支持多语言英文

Browse Source
This commit is contained in:
whyour
2023-07-29 18:26:30 +08:00
parent 39bfd39559
commit e7d023a7e0
68 changed files with 2186 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/crontab/detail.tsx
+59 -32
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useEffect, useRef, useState } from 'react';
import {
Modal,
@@ -38,11 +39,11 @@ const { Text } = Typography;
const tabList = [
{
key: 'log',
tab: '日志',
tab: intl.get('日志'),
},
{
key: 'script',
tab: '脚本',
tab: intl.get('脚本'),
},
];
const LangMap: any = {
@@ -181,11 +182,11 @@ const CronDetailModal = ({
title: `确认保存`,
content: (
<>
确认保存文件
{intl.get('确认保存文件')}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{scriptInfo.filename}
</Text>{' '}
，保存后不可恢复
{intl.get('，保存后不可恢复')}
</>
),
onOk() {
@@ -217,14 +218,14 @@ const CronDetailModal = ({
const runCron = () => {
Modal.confirm({
title: '确认运行',
title: intl.get('确认运行'),
content: (
<>
确认运行定时任务{' '}
{intl.get('确认运行定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{currentCron.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -247,14 +248,14 @@ const CronDetailModal = ({
const stopCron = () => {
Modal.confirm({
title: '确认停止',
title: intl.get('确认停止'),
content: (
<>
确认停止定时任务{' '}
{intl.get('确认停止定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{currentCron.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -274,15 +275,18 @@ const CronDetailModal = ({
const enabledOrDisabledCron = () => {
Modal.confirm({
title: `确认${currentCron.isDisabled === 1 ? '启用' : '禁用'}`,
title: `确认${
currentCron.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')
}`,
content: (
<>
确认{currentCron.isDisabled === 1 ? '启用' : '禁用'}
定时任务{' '}
{intl.get('确认')}
{currentCron.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')}
{intl.get('定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{currentCron.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -310,15 +314,18 @@ const CronDetailModal = ({
const pinOrUnPinCron = () => {
Modal.confirm({
title: `确认${currentCron.isPinned === 1 ? '取消置顶' : '置顶'}`,
title: `确认${
currentCron.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')
}`,
content: (
<>
确认{currentCron.isPinned === 1 ? '取消置顶' : '置顶'}
定时任务{' '}
{intl.get('确认')}
{currentCron.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')}
{intl.get('定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{currentCron.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -378,7 +385,9 @@ const CronDetailModal = ({
<div className="operations">
<Tooltip
title={
currentCron.status === CrontabStatus.idle ? '运行' : '停止'
currentCron.status === CrontabStatus.idle
? intl.get('运行')
: intl.get('停止')
}
>
<Button
@@ -396,7 +405,13 @@ const CronDetailModal = ({
}
/>
</Tooltip>
<Tooltip title={currentCron.isDisabled === 1 ? '启用' : '禁用'}>
<Tooltip
title={
currentCron.isDisabled === 1
? intl.get('启用')
: intl.get('禁用')
}
>
<Button
type="link"
icon={
@@ -412,7 +427,13 @@ const CronDetailModal = ({
onClick={enabledOrDisabledCron}
/>
</Tooltip>
<Tooltip title={currentCron.isPinned === 1 ? '取消置顶' : '置顶'}>
<Tooltip
title={
currentCron.isPinned === 1
? intl.get('取消置顶')
: intl.get('置顶')
}
>
<Button
type="link"
icon={
@@ -442,20 +463,20 @@ const CronDetailModal = ({
<div className="card-wrapper">
<Card>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">任务</div>
<div className="cron-detail-info-title">{intl.get('任务')}</div>
<div className="cron-detail-info-value">{currentCron.command}</div>
</div>
</Card>
<Card style={{ marginTop: 10 }}>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">状态</div>
<div className="cron-detail-info-title">{intl.get('状态')}</div>
<div className="cron-detail-info-value">
{(!currentCron.isDisabled ||
currentCron.status !== CrontabStatus.idle) && (
<>
{currentCron.status === CrontabStatus.idle && (
<Tag icon={<ClockCircleOutlined />} color="default">
空闲中
{intl.get('空闲中')}
</Tag>
)}
{currentCron.status === CrontabStatus.running && (
@@ -463,12 +484,12 @@ const CronDetailModal = ({
icon={<Loading3QuartersOutlined spin />}
color="processing"
>
运行中
{intl.get('运行中')}
</Tag>
)}
{currentCron.status === CrontabStatus.queued && (
<Tag icon={<FieldTimeOutlined />} color="default">
队列中
{intl.get('队列中')}
</Tag>
)}
</>
@@ -476,17 +497,19 @@ const CronDetailModal = ({
{currentCron.isDisabled === 1 &&
currentCron.status === CrontabStatus.idle && (
<Tag icon={<CloseCircleOutlined />} color="error">
已禁用
{intl.get('已禁用')}
</Tag>
)}
</div>
</div>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">定时</div>
<div className="cron-detail-info-title">{intl.get('定时')}</div>
<div className="cron-detail-info-value">{currentCron.schedule}</div>
</div>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">最后运行时间</div>
<div className="cron-detail-info-title">
{intl.get('最后运行时间')}
</div>
<div className="cron-detail-info-value">
{currentCron.last_execution_time
? new Date(currentCron.last_execution_time * 1000)
@@ -498,7 +521,9 @@ const CronDetailModal = ({
</div>
</div>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">最后运行时长</div>
<div className="cron-detail-info-title">
{intl.get('最后运行时长')}
</div>
<div className="cron-detail-info-value">
{currentCron.last_running_time
? diffTime(currentCron.last_running_time)
@@ -506,7 +531,9 @@ const CronDetailModal = ({
</div>
</div>
<div className="cron-detail-info-item">
<div className="cron-detail-info-title">下次运行时间</div>
<div className="cron-detail-info-title">
{intl.get('下次运行时间')}
</div>
<div className="cron-detail-info-value">
{currentCron.nextRunTime &&
currentCron.nextRunTime
@@ -532,7 +559,7 @@ const CronDetailModal = ({
style={{ marginRight: 8 }}
onClick={saveFile}
>
保存
{intl.get('保存')}
</Button>
<Button
type="primary"
src/pages/crontab/index.tsx
+98 -79
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
Button,
@@ -63,10 +64,10 @@ const Crontab = () => {
const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
const columns: ColumnProps<ICrontab>[] = [
{
title: '名称',
title: intl.get('名称'),
dataIndex: 'name',
key: 'name',
width: 150,
width: 120,
render: (text: string, record: any) => (
<>
<a
@@ -118,10 +119,10 @@ const Crontab = () => {
},
},
{
title: '命令/脚本',
title: intl.get('命令/脚本'),
dataIndex: 'command',
key: 'command',
width: 300,
width: 240,
render: (text, record) => {
return (
<Paragraph
@@ -146,19 +147,35 @@ const Crontab = () => {
},
},
{
title: '定时规则',
title: intl.get('定时规则'),
dataIndex: 'schedule',
key: 'schedule',
width: 110,
width: 140,
sorter: {
compare: (a, b) => a.schedule.localeCompare(b.schedule),
},
},
{
title: '最后运行时间',
title: intl.get('最后运行时长'),
width: 150,
dataIndex: 'last_running_time',
key: 'last_running_time',
sorter: {
compare: (a: any, b: any) => {
return a.last_running_time - b.last_running_time;
},
},
render: (text, record) => {
return record.last_running_time
? diffTime(record.last_running_time)
: '-';
},
},
{
title: intl.get('最后运行时间'),
dataIndex: 'last_execution_time',
key: 'last_execution_time',
width: 150,
width: 120,
sorter: {
compare: (a, b) => {
return (a.last_execution_time || 0) - (b.last_execution_time || 0);
@@ -184,24 +201,8 @@ const Crontab = () => {
},
},
{
title: '最后运行时长',
title: intl.get('下次运行时间'),
width: 120,
dataIndex: 'last_running_time',
key: 'last_running_time',
sorter: {
compare: (a: any, b: any) => {
return a.last_running_time - b.last_running_time;
},
},
render: (text, record) => {
return record.last_running_time
? diffTime(record.last_running_time)
: '-';
},
},
{
title: '下次运行时间',
width: 150,
sorter: {
compare: (a: any, b: any) => {
return a.nextRunTime - b.nextRunTime;
@@ -217,25 +218,25 @@ const Crontab = () => {
},
},
{
title: '状态',
title: intl.get('状态'),
key: 'status',
dataIndex: 'status',
width: 88,
filters: [
{
text: '运行中',
text: intl.get('运行中'),
value: CrontabStatus.running,
},
{
text: '空闲中',
text: intl.get('空闲中'),
value: CrontabStatus.idle,
},
{
text: '已禁用',
text: intl.get('已禁用'),
value: CrontabStatus.disabled,
},
{
text: '队列中',
text: intl.get('队列中'),
value: CrontabStatus.queued,
},
],
@@ -245,7 +246,7 @@ const Crontab = () => {
<>
{record.status === CrontabStatus.idle && (
<Tag icon={<ClockCircleOutlined />} color="default">
空闲中
{intl.get('空闲中')}
</Tag>
)}
{record.status === CrontabStatus.running && (
@@ -253,26 +254,26 @@ const Crontab = () => {
icon={<Loading3QuartersOutlined spin />}
color="processing"
>
运行中
{intl.get('运行中')}
</Tag>
)}
{record.status === CrontabStatus.queued && (
<Tag icon={<FieldTimeOutlined />} color="default">
队列中
{intl.get('队列中')}
</Tag>
)}
</>
)}
{record.isDisabled === 1 && record.status === CrontabStatus.idle && (
<Tag icon={<CloseCircleOutlined />} color="error">
已禁用
{intl.get('已禁用')}
</Tag>
)}
</>
),
},
{
title: '操作',
title: intl.get('操作'),
key: 'action',
width: 130,
render: (text, record, index) => {
@@ -280,7 +281,7 @@ const Crontab = () => {
return (
<Space size="middle">
{record.status === CrontabStatus.idle && (
<Tooltip title={isPc ? '运行' : ''}>
<Tooltip title={isPc ? intl.get('运行') : ''}>
<a
onClick={(e) => {
e.stopPropagation();
@@ -292,7 +293,7 @@ const Crontab = () => {
</Tooltip>
)}
{record.status !== CrontabStatus.idle && (
<Tooltip title={isPc ? '停止' : ''}>
<Tooltip title={isPc ? intl.get('停止') : ''}>
<a
onClick={(e) => {
e.stopPropagation();
@@ -303,7 +304,7 @@ const Crontab = () => {
</a>
</Tooltip>
)}
<Tooltip title={isPc ? '日志' : ''}>
<Tooltip title={isPc ? intl.get('日志') : ''}>
<a
onClick={(e) => {
e.stopPropagation();
@@ -412,14 +413,14 @@ const Crontab = () => {
const delCron = (record: any, index: number) => {
Modal.confirm({
title: '确认删除',
title: intl.get('确认删除'),
content: (
<>
确认删除定时任务{' '}
{intl.get('确认删除定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -445,14 +446,14 @@ const Crontab = () => {
const runCron = (record: any, index: number) => {
Modal.confirm({
title: '确认运行',
title: intl.get('确认运行'),
content: (
<>
确认运行定时任务{' '}
{intl.get('确认运行定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -480,14 +481,14 @@ const Crontab = () => {
const stopCron = (record: any, index: number) => {
Modal.confirm({
title: '确认停止',
title: intl.get('确认停止'),
content: (
<>
确认停止定时任务{' '}
{intl.get('确认停止定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -516,15 +517,18 @@ const Crontab = () => {
const enabledOrDisabledCron = (record: any, index: number) => {
Modal.confirm({
title: `确认${record.isDisabled === 1 ? '启用' : '禁用'}`,
title: `确认${
record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')
}`,
content: (
<>
确认{record.isDisabled === 1 ? '启用' : '禁用'}
定时任务{' '}
{intl.get('确认')}
{record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')}
{intl.get('定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -558,15 +562,18 @@ const Crontab = () => {
const pinOrUnPinCron = (record: any, index: number) => {
Modal.confirm({
title: `确认${record.isPinned === 1 ? '取消置顶' : '置顶'}`,
title: `确认${
record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')
}`,
content: (
<>
确认{record.isPinned === 1 ? '取消置顶' : '置顶'}
定时任务{' '}
{intl.get('确认')}
{record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')}
{intl.get('定时任务')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -600,16 +607,16 @@ const Crontab = () => {
const getMenuItems = (record: any) => {
return [
{ label: '编辑', key: 'edit', icon: <EditOutlined /> },
{ label: intl.get('编辑'), key: 'edit', icon: <EditOutlined /> },
{
label: record.isDisabled === 1 ? '启用' : '禁用',
label: record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用'),
key: 'enableOrDisable',
icon:
record.isDisabled === 1 ? <CheckCircleOutlined /> : <StopOutlined />,
},
{ label: '删除', key: 'delete', icon: <DeleteOutlined /> },
{ label: intl.get('删除'), key: 'delete', icon: <DeleteOutlined /> },
{
label: record.isPinned === 1 ? '取消置顶' : '置顶',
label: record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶'),
key: 'pinOrUnPin',
icon: record.isPinned === 1 ? <StopOutlined /> : <PushpinOutlined />,
},
@@ -696,8 +703,8 @@ const Crontab = () => {
const delCrons = () => {
Modal.confirm({
title: '确认删除',
content: <>确认删除选中的定时任务吗</>,
title: intl.get('确认删除'),
content: <>{intl.get('确认删除选中的定时任务吗')}</>,
onOk() {
request
.delete(`${config.apiPrefix}crons`, { data: selectedRowIds })
@@ -718,7 +725,13 @@ const Crontab = () => {
const operateCrons = (operationStatus: number) => {
Modal.confirm({
title: `确认${OperationName[operationStatus]}`,
content: <>确认{OperationName[operationStatus]}选中的定时任务吗</>,
content: (
<>
{intl.get('确认')}
{OperationName[operationStatus]}
{intl.get('选中的定时任务吗')}
</>
),
onOk() {
request
.put(
@@ -821,12 +834,12 @@ const Crontab = () => {
type: 'divider' as 'group',
},
{
label: '新建视图',
label: intl.get('创建视图'),
key: 'new',
icon: <PlusOutlined />,
},
{
label: '视图管理',
label: intl.get('视图管理'),
key: 'manage',
icon: <SettingOutlined />,
},
@@ -840,7 +853,12 @@ const Crontab = () => {
.then(({ code, data }) => {
if (code === 200) {
setCronViews(data);
const firstEnableView = data.filter((x) => !x.isDisabled);
const firstEnableView = data
.filter((x) => !x.isDisabled)
.map((x) => ({
...x,
name: x.name === '全部任务' ? intl.get('全部任务') : x.name,
}));
setEnabledCronViews(firstEnableView);
setPageConf({
page: 1,
@@ -873,10 +891,10 @@ const Crontab = () => {
return (
<PageContainer
className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
title="定时任务"
title={intl.get('定时任务')}
extra={[
<Search
placeholder="请输入名称或者关键词"
placeholder={intl.get('请输入名称或者关键词')}
style={{ width: 'auto' }}
enterButton
allowClear
@@ -886,7 +904,7 @@ const Crontab = () => {
onSearch={onSearch}
/>,
<Button key="2" type="primary" onClick={() => addCron()}>
新建任务
{intl.get('创建任务')}
</Button>,
]}
header={{
@@ -906,7 +924,7 @@ const Crontab = () => {
>
<div className={`view-more ${moreMenuActive ? 'active' : ''}`}>
<Space>
更多
{intl.get('更多')}
<DownOutlined />
</Space>
<div className="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
@@ -929,56 +947,57 @@ const Crontab = () => {
style={{ marginBottom: 5 }}
onClick={delCrons}
>
批量删除
{intl.get('批量删除')}
</Button>
<Button
type="primary"
onClick={() => operateCrons(0)}
style={{ marginLeft: 8, marginBottom: 5 }}
>
批量启用
{intl.get('批量启用')}
</Button>
<Button
type="primary"
onClick={() => operateCrons(1)}
style={{ marginLeft: 8, marginRight: 8 }}
>
批量禁用
{intl.get('批量禁用')}
</Button>
<Button
type="primary"
style={{ marginRight: 8 }}
onClick={() => operateCrons(2)}
>
批量运行
{intl.get('批量运行')}
</Button>
<Button type="primary" onClick={() => operateCrons(3)}>
批量停止
{intl.get('批量停止')}
</Button>
<Button
type="primary"
onClick={() => operateCrons(4)}
style={{ marginLeft: 8, marginRight: 8 }}
>
批量置顶
{intl.get('批量置顶')}
</Button>
<Button
type="primary"
onClick={() => operateCrons(5)}
style={{ marginLeft: 8, marginRight: 8 }}
>
批量取消置顶
{intl.get('批量取消置顶')}
</Button>
<Button
type="primary"
onClick={() => setIsLabelModalVisible(true)}
style={{ marginLeft: 8, marginRight: 8 }}
>
批量修改标签
{intl.get('批量修改标签')}
</Button>
<span style={{ marginLeft: 8 }}>
已选择
<a>{selectedRowIds?.length}</a>项
{intl.get('已选择')}
<a>{selectedRowIds?.length}</a>
{intl.get('项')}
</span>
</div>
)}
src/pages/crontab/logModal.tsx
+3 -2
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useEffect, useRef, useState } from 'react';
import { Modal, message, Input, Form, Statistic, Button } from 'antd';
import { request } from '@/utils/http';
@@ -44,7 +45,7 @@ const CronLogModal = ({
data !== value
) {
const log = data as string;
setValue(log || '暂无日志');
setValue(log || intl.get('暂无日志'));
const hasNext = Boolean(
log && !logEnded(log) && !log.includes('任务未运行'),
);
@@ -131,7 +132,7 @@ const CronLogModal = ({
onCancel={() => cancel()}
footer={[
<Button type="primary" onClick={() => cancel()}>
知道了
{intl.get('知道了')}
</Button>,
]}
>
src/pages/crontab/modal.tsx
+22 -15
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useEffect, useState } from 'react';
import { Modal, message, Input, Form, Button } from 'antd';
import { request } from '@/utils/http';
@@ -31,7 +32,9 @@ const CronModal = ({
);
if (code === 200) {
message.success(cron ? '更新任务成功' : '新建任务成功');
message.success(
cron ? intl.get('更新任务成功') : intl.get('创建任务成功'),
);
handleCancel(data);
}
setLoading(false);
@@ -46,7 +49,7 @@ const CronModal = ({
return (
<Modal
title={cron ? '编辑任务' : '新建任务'}
title={cron ? intl.get('编辑任务') : intl.get('创建任务')}
open={visible}
forceRender
centered
@@ -70,23 +73,25 @@ const CronModal = ({
name="form_in_modal"
initialValues={cron}
>
<Form.Item name="name" label="名称">
<Input placeholder="请输入任务名称" />
<Form.Item name="name" label={intl.get('名称')}>
<Input placeholder={intl.get('请输入任务名称')} />
</Form.Item>
<Form.Item
name="command"
label="命令/脚本"
label={intl.get('命令/脚本')}
rules={[{ required: true, whitespace: true }]}
>
<Input.TextArea
rows={4}
autoSize={true}
placeholder="支持输入脚本路径/任意系统可执行命令/task 脚本路径"
placeholder={intl.get(
'支持输入脚本路径/任意系统可执行命令/task 脚本路径',
)}
/>
</Form.Item>
<Form.Item
name="schedule"
label="定时规则"
label={intl.get('定时规则')}
rules={[
{ required: true },
{
@@ -100,9 +105,9 @@ const CronModal = ({
},
]}
>
<Input placeholder="秒(可选) 分 时 天 月 周" />
<Input placeholder={intl.get('秒(可选) 分 时 天 月 周')} />
</Form.Item>
<Form.Item name="labels" label="标签">
<Form.Item name="labels" label={intl.get('标签')}>
<EditableTagGroup />
</Form.Item>
</Form>
@@ -136,7 +141,9 @@ const CronLabelModal = ({
if (code === 200) {
message.success(
action === 'post' ? '添加Labels成功' : '删除Labels成功',
action === 'post'
? intl.get('添加Labels成功')
: intl.get('删除Labels成功'),
);
handleCancel(true);
}
@@ -155,18 +162,18 @@ const CronLabelModal = ({
}, [ids, visible]);
const buttons = [
<Button onClick={() => handleCancel(false)}>取消</Button>,
<Button onClick={() => handleCancel(false)}>{intl.get('取消')}</Button>,
<Button type="primary" danger onClick={() => update('delete')}>
删除
{intl.get('删除')}
</Button>,
<Button type="primary" onClick={() => update('post')}>
添加
{intl.get('添加')}
</Button>,
];
return (
<Modal
title="批量修改标签"
title={intl.get('批量修改标签')}
open={visible}
footer={buttons}
centered
@@ -176,7 +183,7 @@ const CronLabelModal = ({
confirmLoading={loading}
>
<Form form={form} layout="vertical" name="form_in_label_modal">
<Form.Item name="labels" label="标签">
<Form.Item name="labels" label={intl.get('标签')}>
<EditableTagGroup />
</Form.Item>
</Form>
src/pages/crontab/viewCreateModal.tsx
+32 -25
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useEffect, useState } from 'react';
import {
Modal,
@@ -17,11 +18,11 @@ import get from 'lodash/get';
import { CrontabStatus } from './type';
const PROPERTIES = [
{ name: '命令', value: 'command' },
{ name: '名称', value: 'name' },
{ name: '定时规则', value: 'schedule' },
{ name: '状态', value: 'status' },
{ name: '标签', value: 'labels' },
{ name: intl.get('命令'), value: 'command' },
{ name: intl.get('名称'), value: 'name' },
{ name: intl.get('定时规则'), value: 'schedule' },
{ name: intl.get('状态'), value: 'status' },
{ name: intl.get('标签'), value: 'labels' },
];
const EOperation: any = {
@@ -31,10 +32,10 @@ const EOperation: any = {
Nin: 'select',
};
const OPERATIONS = [
{ name: '包含', value: 'Reg' },
{ name: '不包含', value: 'NotReg' },
{ name: '属于', value: 'In', type: 'select' },
{ name: '不属于', value: 'Nin', type: 'select' },
{ name: intl.get('包含'), value: 'Reg' },
{ name: intl.get('不包含'), value: 'NotReg' },
{ name: intl.get('属于'), value: 'In', type: 'select' },
{ name: intl.get('不属于'), value: 'Nin', type: 'select' },
// { name: '等于', value: 'Eq' },
// { name: '不等于', value: 'Ne' },
// { name: '为空', value: 'IsNull' },
@@ -42,15 +43,15 @@ const OPERATIONS = [
];
const SORTTYPES = [
{ name: '顺序', value: 'ASC' },
{ name: '倒序', value: 'DESC' },
{ name: intl.get('顺序'), value: 'ASC' },
{ name: intl.get('倒序'), value: 'DESC' },
];
const STATUS_MAP = {
status: [
{ name: '运行中', value: CrontabStatus.running },
{ name: '空闲中', value: CrontabStatus.idle },
{ name: '已禁用', value: CrontabStatus.disabled },
{ name: intl.get('运行中'), value: CrontabStatus.running },
{ name: intl.get('空闲中'), value: CrontabStatus.idle },
{ name: intl.get('已禁用'), value: CrontabStatus.disabled },
],
};
@@ -137,7 +138,11 @@ const ViewCreateModal = ({
const statusElement = (property: keyof typeof STATUS_MAP) => {
return (
<Select mode="tags" allowClear placeholder="输入后回车增加自定义选项">
<Select
mode="tags"
allowClear
placeholder={intl.get('输入后回车增加自定义选项')}
>
{STATUS_MAP[property]?.map((x) => (
<Select.Option key={x.name} value={x.value}>
{x.name}
@@ -149,7 +154,7 @@ const ViewCreateModal = ({
return (
<Modal
title={view ? '编辑视图' : '新建视图'}
title={view ? intl.get('编辑视图') : intl.get('创建视图')}
open={visible}
forceRender
width={580}
@@ -171,10 +176,10 @@ const ViewCreateModal = ({
<Form form={form} layout="vertical" name="env_modal">
<Form.Item
name="name"
label="视图名称"
rules={[{ required: true, message: '请输入视图名称' }]}
label={intl.get('视图名称')}
rules={[{ required: true, message: intl.get('请输入视图名称') }]}
>
<Input placeholder="请输入视图名称" />
<Input placeholder={intl.get('请输入视图名称')} />
</Form.Item>
<Form.List name="filters">
{(fields, { add, remove }) => (
@@ -223,7 +228,7 @@ const ViewCreateModal = ({
<div>
{fields.map(({ key, name, ...restField }) => (
<Form.Item
label={name === 0 ? '筛选条件' : ''}
label={name === 0 ? intl.get('筛选条件') : ''}
key={key}
style={{ marginBottom: 0 }}
required
@@ -250,13 +255,15 @@ const ViewCreateModal = ({
<Form.Item
{...restField}
name={[name, 'value']}
rules={[{ required: true, message: '请输入内容' }]}
rules={[
{ required: true, message: intl.get('请输入内容') },
]}
>
{EOperation[filtersValue?.[name]['operation']] ===
'select' ? (
statusElement(filtersValue?.[name]['property'])
) : (
<Input placeholder="请输入内容" />
<Input placeholder={intl.get('请输入内容')} />
)}
</Form.Item>
{name !== 0 && (
@@ -272,7 +279,7 @@ const ViewCreateModal = ({
}
>
<PlusOutlined />
新增筛选条件
{intl.get('新增筛选条件')}
</a>
</Form.Item>
</div>
@@ -320,7 +327,7 @@ const ViewCreateModal = ({
<div>
{fields.map(({ key, name, ...restField }) => (
<Form.Item
label={name === 0 ? '排序方式' : ''}
label={name === 0 ? intl.get('排序方式') : ''}
key={key}
style={{ marginBottom: 0 }}
className="filter-item"
@@ -347,7 +354,7 @@ const ViewCreateModal = ({
<Form.Item>
<a onClick={() => add({ property: 'command', type: 'ASC' })}>
<PlusOutlined />
新增排序方式
{intl.get('新增排序方式')}
</a>
</Form.Item>
</div>
src/pages/crontab/viewManageModal.tsx
+11 -10
View File
@@ -1,3 +1,4 @@
import intl from 'react-intl-universal';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
Modal,
@@ -81,18 +82,18 @@ const ViewManageModal = ({
const columns: any = [
{
title: '名称',
title: intl.get('名称'),
dataIndex: 'name',
key: 'name',
},
{
title: '类型',
title: intl.get('类型'),
dataIndex: 'type',
key: 'type',
render: (v) => (v === 1 ? '系统' : '个人'),
render: (v) => (v === 1 ? intl.get('系统') : intl.get('个人')),
},
{
title: '显示',
title: intl.get('显示'),
key: 'isDisabled',
dataIndex: 'isDisabled',
width: 100,
@@ -107,7 +108,7 @@ const ViewManageModal = ({
},
},
{
title: '操作',
title: intl.get('操作'),
key: 'action',
width: 100,
render: (text: string, record: any, index: number) => {
@@ -140,14 +141,14 @@ const ViewManageModal = ({
const deleteView = (record: any, index: number) => {
Modal.confirm({
title: '确认删除',
title: intl.get('确认删除'),
content: (
<>
确认删除视图{' '}
{intl.get('确认删除视图')}{' '}
<Text style={{ wordBreak: 'break-all' }} type="warning">
{record.name}
</Text>{' '}
吗
{intl.get('吗')}
</>
),
onOk() {
@@ -218,7 +219,7 @@ const ViewManageModal = ({
return (
<Modal
title="视图管理"
title={intl.get('视图管理')}
open={visible}
centered
width={620}
@@ -243,7 +244,7 @@ const ViewManageModal = ({
setIsCreateViewModalVisible(true);
}}
>
新建视图
{intl.get('创建视图')}
</Button>
</Space>
<DndProvider backend={HTML5Backend}>