Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

增加自定义cron表达式输入框,便于用户自行拓展 #12

Merged
merged 1 commit into from
Mar 4, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions insight-front-end/src/components/TaskForm/Timing.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Select, Switch } from 'antd';
import { Select, Switch, Input, Icon, Tooltip } from 'antd';

const { Option } = Select;

Expand Down Expand Up @@ -42,7 +42,7 @@ class Timing extends React.Component {


const {
hourValue, minuteValue, secondValue, weekList, publishCronText, publishIsWorkday,
hourValue, minuteValue, secondValue, weekList, publishCronText, publishIsWorkday, publishIsCustomizeCron, publishCustomizeCron,
} = this.props.TaskStore;

return (
Expand Down Expand Up @@ -88,7 +88,6 @@ class Timing extends React.Component {
secondOption.map((item, index) => { return (<Option value={item.value} key={index}>{item.label}</Option>); })
}
</Select>

</div>
<div className="d-flex justify-content-center align-items-center mt-20">
{weekOption.map((item, index) => {
Expand All @@ -100,6 +99,14 @@ class Timing extends React.Component {
<Switch size="small" checked={publishIsWorkday} onChange={(e) => { return this.props.TaskStore.handleSwitchChange('publishIsWorkday', e); }} />
<span className="ml-8">工作日(智能跳过节假日)</span>
</div>
<div className="d-flex justify-content-center align-items-center mt-20">
<Switch size="small" checked={publishIsCustomizeCron} onChange={(e) => { return this.props.TaskStore.handleSwitchChange('publishIsCustomizeCron', e); }} />
<span className="ml-8">自定义cron表达式</span>
<a href="https://github.com/node-schedule/node-schedule" target="_blank">
<Tooltip><Icon type="question-circle" theme="twoTone" twoToneColor="#ff9900" title="点击查看cron表达式说明"/></Tooltip>
</a>
<span className="ml-8"><Input placeholder="输入自定义cron表达式" value={publishCustomizeCron} onChange={(e) => { return this.props.TaskStore.handleTextChange('publishCustomizeCron', e); }}></Input></span>
</div>
<div className="text-center f-20 mt-20">{publishCronText}</div>
</div>
</>
Expand Down
18 changes: 17 additions & 1 deletion insight-front-end/src/stores/TaskStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ class TaskStore {

@observable publishIsWorkday = false // 发布是否是工作日

@observable publishIsCustomizeCron = false // 发布是否自定义cron表达式

@observable publishCustomizeCron = '' // 发布自定义cron表达式

@observable publishModel = 0 // 发布模式 0: 即时消息 1:定时消息

@observable publishMentionValue = '' // 发布提醒列表字段
Expand Down Expand Up @@ -111,6 +115,11 @@ class TaskStore {
publishCronText = `每个工作日 ${time} 执行`;
}

// 开启自定义cron表达式模式(前端输入自定义cron表达式)
if (this.publishIsCustomizeCron) {
publishCron = this.publishCustomizeCron;
publishCronText = `按自定义cron表达式${publishCron}执行`;
}

this.publishCron = publishCron;
this.publishCronText = publishCronText;
Expand All @@ -132,6 +141,8 @@ class TaskStore {
this.publishCron = '';
this.publishCronText = '';
this.publishIsWorkday = false;
this.publishIsCustomizeCron = false;
this.publishCustomizeCron = '';

this.publishMentionValue = '';
this.publishTextContent = '';
Expand Down Expand Up @@ -172,6 +183,11 @@ class TaskStore {
@action handleTextChange = (name, e) => {
const content = (e.target.value).trim();
this[name] = content;

if (name === 'publishCustomizeCron') {
this[name] = e.target.value;
this.getCron();
}
}

// 处理通用下拉类数据变化
Expand All @@ -190,8 +206,8 @@ class TaskStore {
// 更新工作日 则重置星期
if (name === 'publishIsWorkday') {
this.weekList = [];
this.getCron();
}
this.getCron();
}
}

Expand Down