import React, { useEffect, useState } 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 => { 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 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) : '', 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) => { setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss')) let obj = form.getFieldValue() if (obj.loop_mode === 'ByOnce') setLoop_unit('Second') form.setFieldsValue({ end_time: moment(e).format('YYYY-MM-DD HH:mm:ss') }) } 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 VisibleIISAgentConfig;