import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'; import SiteModal from '@/components/Modal/SiteModa'; import { Checkbox, Input, Button, Card, InputNumber, Form, Radio, DatePicker, Switch, Select, message, } from 'antd'; import HourOfDaySelect from './HourOfDaySelect'; import DayOfWeekSelect from './DayOfWeekSelect'; import styles from './VisibleIISAgentConfig.less'; import moment from 'moment'; import { tr } from 'voca'; import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons'; const { Item } = Form; const { TextArea } = Input; let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' }; const hours = { '1': '星期一', '2': '星期二', '3': '星期三', '4': '星期四', '5': '星期五', '6': '星期六', '7': '星期天', }; const VisibleIISAgentConfig = (props, ref) => { const [loading, setLoading] = useState(false); const [previewVisible, setPreviewVisible] = useState(false); const [selectRole, setSelectRole] = useState([]); const [isReentrant, setIsReentrant] = useState(false); const [postCheck, setPostCheck] = useState(false); const [reenCheck, setReenCheck] = useState(false); const [logCheck, setLogCheck] = useState(false); const [isEndTimeShow, setIsEndTimeShow] = useState(false); const [isLoopShow, setIsLoopShow] = useState(false); const [isDayLoopShow, setIsDayLoopShow] = useState(false); const [isWeekLoopShow, setIsWeekLoopShow] = useState(false); const [waitCheck, setWaitCheck] = useState(false); const [isUse, setIsUse] = useState(true); const [interval, setInterval] = useState(1); const [loop_unit, setLoop_unit] = useState('Hour'); const [exeType, setExeType] = useState(true); const [isType, setIsType] = useState('重复执行'); const [isTypeValue, setIsTypeValue] = useState('ByLoop'); const [time_out, setTime_out] = useState(30); const [weekData, setWeekData] = useState([]); const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00')); const [selectValues, setSelectValues] = useState([]); const [form] = Form.useForm(); const dateFormat = 'YYYY-MM-DD HH:mm:ss'; const { agentConfig, value, onIISAgentSubmit } = props; useImperativeHandle(ref, () => ({ setPreviewVisible, })); useEffect(() => { if (agentConfig) { let startTime = agentConfig.LoopMode === 'ByOnce' ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days') : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'); form.setFieldsValue({ is_enable: agentConfig.Enabled, url_type: agentConfig.Absolute ? true : false, url_path: agentConfig.Url, request_header: agentConfig.CustomHeader, plan_type: agentConfig.LoopMode, start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime, end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : null, loop_mode: agentConfig.LoopMode, interval: agentConfig.Interval, loop_unit: agentConfig.LoopUnit, hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(','), day_of_week: agentConfig.DayOfWeek, time_out: agentConfig.Timeout || 30, post_state: agentConfig.UsePostState, reentrant: agentConfig.AllowReentrant, enable_log: agentConfig.AllowLog, }); let startTimeValue = agentConfig.LoopMode === 'ByOnce' ? moment() .add(1, 'days') .format('YYYY-MM-DD 00:00:00') : moment().format('YYYY-MM-DD 00:00:00'); setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue); setIsUse(agentConfig.Enabled); changeLoopMode(agentConfig.LoopMode); setReenCheck(agentConfig.AllowReentrant); setPostCheck(agentConfig.UsePostState); setLogCheck(agentConfig.AllowLog); setInterval(agentConfig.Interval); setLoop_unit(agentConfig.LoopUnit); setWaitCheck(agentConfig.UseTimeout || false); setTime_out(agentConfig.Timeout); if (agentConfig.LoopMode === 'ByOnce') { setIsType('执行一次'); form.setFieldsValue({ type: '执行一次', }); setExeType(false); } else { setIsType('重复执行'); form.setFieldsValue({ type: '重复执行', }); if (agentConfig.LoopMode === 'ByDay') { setSelectValues(agentConfig.HourOfDay.split(',')); } else if (agentConfig.LoopMode === 'ByWeek') { setWeekData(agentConfig.DayOfWeek.split(',')); } setExeType(true); } } else { form.setFieldsValue({ type: '重复执行', url_type: false, loop_mode: 'ByLoop', start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'), }); setExeTime(moment().format('YYYY-MM-DD 00:00:00')); setIsType('重复执行'); changeLoopMode('ByLoop'); setIsUse(true); setInterval(1); setLoop_unit('Hour'); } }, [agentConfig]); useEffect(() => { if (value) { form.setFieldsValue({ name: value, }); setSelectRole(props.value); } }, [props]); const handleCancel = () => { setPreviewVisible(false); }; const handleOk = async () => { let fv = form.getFieldValue(); if ( (fv.loop_mode === 'ByDay' && !selectValues.length) || (fv.loop_mode === 'ByWeek' && !weekData.length) ) { message.warning('请选择计划执行日'); return false; } let data = { Url: fv.url_path, CustomHeader: fv.request_header || '', StartFrom: fv.start_time && fv.start_time.format(dateFormat), EndAt: fv.end_time && fv.end_time.format(dateFormat), LoopMode: fv.loop_mode === 'ByOnce' ? 'ByLoop' : fv.loop_mode, LoopUnit: loop_unit, MonthOfYear: null, WeekOfMonth: null, DayOfWeek: fv.day_of_week ? fv.day_of_week.toString() : '', DayOfMonth: null, HourOfDay: fv.hour_of_day && fv.hour_of_day.toString(), Interval: interval.toString(), UsePostState: fv.post_state, AllowReentrant: fv.reentrant, AllowLog: fv.enable_log, Enabled: isUse, Timeout: fv.time_out ? parseInt(fv.time_out) : 30, Absolute: fv.url_type, SiteInfo: null, Name: fv.name, Tolerate: null, UseTimeout: waitCheck, }; fv.time_out ? (data.MillisecondsTimeout = parseInt(fv.time_out)) : ''; setPreviewVisible(false); (await onIISAgentSubmit) && onIISAgentSubmit(data); }; const handleClick = () => { if (value) { setPreviewVisible(true); } else { message.error('请先输入方案名称!'); } }; const onPostChange = value => { setIsReentrant(value); setPostCheck(value); form.setFieldsValue({ post_state: value, }); }; const onReenChange = value => { setReenCheck(value); form.setFieldsValue({ reentrant: value, }); }; const onLogChange = value => { setLogCheck(value); form.setFieldsValue({ enable_log: value, }); }; const changeLoopMode = value => { setIsTypeValue(value); switch (value) { case 'ByOnce': setIsEndTimeShow(false); setIsLoopShow(true); setIsWeekLoopShow(false); setIsDayLoopShow(false); break; case 'ByLoop': setIsEndTimeShow(true); setIsLoopShow(true); setIsWeekLoopShow(false); setIsDayLoopShow(false); break; case 'ByDay': setIsEndTimeShow(true); setIsLoopShow(false); setIsWeekLoopShow(false); setIsDayLoopShow(true); break; case 'ByWeek': setIsEndTimeShow(true); setIsLoopShow(false); setIsWeekLoopShow(true); setIsDayLoopShow(true); break; } }; const onLoopModeChange = e => { changeLoopMode(e.target.value); if (e.target.value === 'ByLoop') { form.setFieldsValue({ hour_of_day: '', day_of_week: '', }); } }; const onChange = value => { setIsUse(value); }; const handleExe = e => { let obj = form.getFieldValue(); let value = e.target.value; setIsType(value); if (value === '执行一次') { changeLoopMode('ByOnce'); setLoop_unit('Second'); form.setFieldsValue({ loop_mode: 'ByOnce', hour_of_day: '', day_of_week: '', end_time: obj.start_time, }); if (!agentConfig) { form.setFieldsValue({ start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add( 1, 'days', ), end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add( 1, 'days', ), }); setExeTime( moment() .add(1, 'days') .format('YYYY-MM-DD 00:00:00'), ); } setExeType(false); } else { changeLoopMode('ByLoop'); setExeType(true); form.setFieldsValue({ loop_mode: 'ByLoop', end_time: '', }); if (!agentConfig) { form.setFieldsValue({ start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'), hour_of_day: '', day_of_week: '', }); setExeTime(moment().format('YYYY-MM-DD 00:00:00')); } } }; const onWait = e => { setWaitCheck(e); }; const changeUnit = e => { setLoop_unit(e); }; const changeInterval = e => { setInterval(e); }; const InputTimeOut = e => { setTime_out(e); }; const changeStartTime = e => { const time = moment(e).format('YYYY-MM-DD HH:mm:ss'); setExeTime(time); let obj = form.getFieldValue(); if (obj.loop_mode === 'ByOnce') setLoop_unit('Second'); console.log(time, 'time'); // form.setFieldsValue({ // end_time: time, // }); }; const changeDay = data => { console.log('data', data); if (data) setSelectValues(data); }; const changeWeek = data => { if (data) setWeekData(data); }; return ( <div className={styles.agent_container}> {/* <Input value={selectRole} disabled={true} /> <div className={styles.select_btn} onClick={handleClick}> <EditOutlined style={{ fontSize: '18px' }} /> </div> */} <SiteModal {...props} title="编辑定时任务" bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: 100, borderRadius: '20px' }} width="800px" destroyOnClose cancelText="取消" okText="确认" forceRender visible={previewVisible} onOk={() => handleOk()} confirmLoading={loading} onCancel={handleCancel} > <div className={styles.IISAgent_container}> <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}> <Item label="计划名称" name="name"> <Input placeholder="请输入计划名称" disabled={true} /> </Item> <Item label="URL路径"> <Item label="" name="url_type" style={{ marginBottom: '0.2rem' }}> <Radio.Group> <Radio value={false}>相对路径(便于配置迁移)</Radio> <Radio value={true}>绝对路径(用于外链)</Radio> </Radio.Group> </Item> <Item label="" name="url_path" style={{ marginBottom: '0' }}> <TextArea rows={3} placeholder="请输入URL名称" /> </Item> </Item> <Item label="请求头" name="request_header"> <Input placeholder="请求头,选填" /> </Item> <Item label="计划类型" name="type"> <Radio.Group onChange={handleExe}> <Radio.Button value="重复执行">重复执行</Radio.Button> <Radio.Button value="执行一次">执行一次</Radio.Button> </Radio.Group> </Item> {exeType && ( <Item label="执行方式" name="loop_mode"> <Radio.Group onChange={onLoopModeChange}> <Radio value={'ByLoop'}>循环</Radio> <Radio value={'ByDay'}>每天</Radio> <Radio value={'ByWeek'}>每周</Radio> </Radio.Group> </Item> )} <Item label="开始时间" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}> <div style={{ display: 'flex' }}> <Item label="" name="start_time" style={{ marginRight: '1rem' }}> <DatePicker showTime onChange={changeStartTime} /> </Item> {isEndTimeShow && ( <Item label="结束时间" name="end_time"> <DatePicker showTime /> </Item> )} </div> </Item> {isLoopShow && isType === '重复执行' && ( <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}> <div className={styles.loopShow}> <span> 每</span> <InputNumber min={0} value={interval} style={{ margin: '0 0.5rem' }} onChange={changeInterval} placeholder="请输入循环周期" /> <Select value={loop_unit} onChange={changeUnit} style={{ width: '8rem', margin: '0 0.5rem' }} > <Select.Option value="Hour">小时</Select.Option> <Select.Option value="Minute">分钟</Select.Option> <Select.Option value="Second">秒</Select.Option> </Select> <span> 执行一次</span> </div> </Card> )} {isDayLoopShow && ( <Item label="日循环" name="hour_of_day"> <HourOfDaySelect changeDay={changeDay} /> </Item> )} {isWeekLoopShow && ( <Item label="周循环" name="day_of_week"> <DayOfWeekSelect changeWeek={changeWeek} /> </Item> )} {isTypeValue === 'ByDay' ? !selectValues.length && ( <span style={{ color: '#f00' }} className={styles.exeTime}> <InfoCircleOutlined style={{ marginRight: '0.2rem' }} /> 必须选择计划执行时刻 </span> ) : ''} {isTypeValue === 'ByWeek' ? !weekData.length && ( <span style={{ color: '#f00' }} className={styles.exeTime}> <InfoCircleOutlined style={{ marginRight: '0.2rem' }} /> 必须选择计划执行时刻 </span> ) : ''} <Item label="说明"> <div style={{ color: '#909EB6FF', fontSize: '12px' }}> {isType === '执行一次' && <span>在{exeTime}执行一次</span>} {isType === '重复执行' && isTypeValue === 'ByDay' && ( <span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}> 从{exeTime}开始{selectValues.length ? ',在每天' : ''} {selectValues.length ? selectValues.map((item, index) => { return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : ','}` : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`; }) : ''} {selectValues.length ? '执行' : ''} </span> )} {isType === '重复执行' && isTypeValue === 'ByWeek' && ( <span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}> 从{exeTime}开始{weekData.length ? ',在每周' : ''} {weekData.length ? weekData.map((item, index) => { return `${hours[item]}${index == weekData.length - 1 ? '' : ','}`; }) : ''} {weekData.length && selectValues.length ? selectValues.map((item, index) => { return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : ','}` : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`; }) : ''}{' '} {weekData.length ? '执行' : ''} </span> )} {isType === '重复执行' && isTypeValue === 'ByLoop' && ( <span style={{ color: '#909EB6FF' }}> 从{exeTime}开始,每{interval} {unitType[loop_unit]}执行一次。 </span> )} </div> </Item> <Item label="其他设置" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}> {' '} <div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}> <Item name="wait" style={{ marginRight: '0.5rem' }}> <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onWait} checked={waitCheck} /> </Item> <div style={{ paddingTop: '0.3rem' }}>请求等待时间(单位:秒)</div> </div> {waitCheck && ( <Item name="time_out"> <div> <InputNumber value={time_out} onChange={InputTimeOut} /> </div> </Item> )} </div> </Item> <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}> {' '} <div style={{ display: 'flex' }}> <Item name="post_state" style={{ marginRight: '0.5rem' }}> <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onPostChange} checked={postCheck} /> </Item> <div style={{ paddingTop: '0.3rem' }}> 使用POST维持状态(上一次返回结果传入下一次请求) </div> </div> </Item> <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}> <div style={{ display: 'flex' }}> <Item style={{ marginRight: '0.5rem' }} name="reentrant"> <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onReenChange} disabled={isReentrant} checked={reenCheck} /> </Item> <div style={{ paddingTop: '0.3rem' }}> 允许重入(上一次未执行完,也会执行下一次请求) </div> </div> </Item> <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}> <div style={{ display: 'flex' }}> <Item name="enable_log" style={{ marginRight: '0.5rem' }}> <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onLogChange} checked={logCheck} /> </Item> <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div> </div> </Item> <Item label="禁用计划" style={{ color: '#f00' }} name="is_enable"> <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={isUse} onChange={onChange} /> </Item> </Form> </div> </SiteModal> </div> ); }; export default forwardRef(VisibleIISAgentConfig);