VisibleIISAgentConfig.jsx 11.9 KB
import React, { useEffect, useState } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
import { Checkbox, Input, Button, Modal, 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';
const { Item } = Form;


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 [form] = Form.useForm();
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const { agentConfig, value, onIISAgentSubmit } = props

    useEffect(() => {
        if (agentConfig) {
            form.setFieldsValue({
                is_enable: agentConfig.Enabled,
                url_type: agentConfig.Absolute ? false : true,
                url_path: agentConfig.Url,
                request_header: agentConfig.CustomHeader,
                plan_type: agentConfig.LoopMode,
                start_time: moment(agentConfig.StartFrom, dateFormat),
                end_time: 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,
                post_state: agentConfig.UsePostState,
                reentrant: agentConfig.AllowReentrant,
                enable_log: agentConfig.AllowLog,
            })
            changeLoopMode(agentConfig.LoopMode)
            setReenCheck(agentConfig.AllowReentrant)
            setPostCheck(agentConfig.UsePostState)
            setLogCheck(agentConfig.AllowLog)
        }



        form.setFieldsValue({
            name: value
        })
        setSelectRole(props.value)
    }, [props])


    const handleCancel = () => {
        setPreviewVisible(false)

    }
    const handleOk = () => {

        let fv = form.getFieldValue()
        onIISAgentSubmit && onIISAgentSubmit(
            {
                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),
                MillisecondsTimeout: parseInt(fv.time_out) ,
                LoopMode: fv.loop_mode,
                LoopUnit: fv.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: fv.interval,
                UsePostState: fv.post_state,
                AllowReentrant: fv.reentrant,
                AllowLog: fv.enable_log,
                Enabled: fv.is_enable,
                Timeout: parseInt(fv.time_out),
                Absolute: true,
                SiteInfo:null,
                Name:fv.name,
                Tolerate:null
            }
        )
        setPreviewVisible(false)
    }
    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) => {
        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)
    }

    return (
        <div className={styles.agent_container}>
            <Input value={selectRole} disabled={true} />
            <div className={styles.select_btn} onClick={handleClick}>推送计划</div>

            <SiteModal
                {...props}
                title="编辑定时任务"
                bodyStyle={{ width: '100%', minHeight: '100px' }}
                style={{ top: 200, borderRadius: '20px' }}
                width="800px"
                destroyOnClose
                cancelText="取消"
                okText="确认"
                visible={previewVisible}
                onOk={() => handleOk()}
                confirmLoading={loading}
                visible={previewVisible}
                onCancel={handleCancel}

            >
                <div className={styles.IISAgent_container}>
                    <Form form={form} labelCol={{ span: 4 }}>
                        <Item
                            label="计划名称"
                            name="name"
                        >
                            <Input placeholder="请输入计划名称" disabled={true} />
                        </Item>
                        <Item
                            label="是否开启"
                            name="is_enable"
                        >
                            <Select >
                                <Option value={true}>开启</Option>
                                <Option value={false}>关闭</Option>
                            </Select>
                        </Item>
                        <Item
                            label="路径类型"
                            name="url_type"
                        >
                            <Radio.Group >
                                <Radio value={false}>相对路径</Radio>
                                <Radio value={true}>绝对路径</Radio>
                            </Radio.Group>
                        </Item>
                        <Item
                            label="URL路径"
                            name="url_path"
                        >
                            <Input placeholder="请输入URL名称" />
                        </Item>
                        <Item
                            label="请求头"
                            name="request_header"
                        >
                            <Input placeholder="请输入URL名称" />
                        </Item>
                        <Item
                            label="执行方式"
                            name="loop_mode"
                        >
                            <Radio.Group onChange={onLoopModeChange}>
                                <Radio value={"ByOnce"}>一次</Radio>
                                <Radio value={"BYLOOP"}>循环</Radio>
                                <Radio value={"ByDay"}>每天</Radio>
                                <Radio value={"ByWeek"}>每周</Radio>
                            </Radio.Group>
                        </Item>
                        <Item
                            label="开始时间"
                            name="start_time"
                        >
                            <DatePicker showTime />
                        </Item>
                        {
                            isEndTimeShow && (
                                <Item
                                    label="结束时间"
                                    name="end_time"
                                >
                                    <DatePicker showTime />
                                </Item>
                            )
                        }

                        {
                            isLoopShow && (
                                <div>
                                    <Item
                                        label="循环周期"
                                        name="interval"
                                    >
                                        <Input placeholder="请输入循环周期" />
                                    </Item>
                                    <Item
                                        label="循环单位"
                                        name="loop_unit"
                                    >
                                        <Input placeholder="请输入循环单位" />
                                    </Item>
                                </div>
                            )
                        }
                        {
                            isDayLoopShow && (
                                <Item
                                    label="日循环"
                                    name="hour_of_day"
                                >
                                    <HourOfDaySelect />
                                </Item>
                            )
                        }
                        {
                            isWeekLoopShow && (
                                <Item
                                    label="周循环"
                                    name="day_of_week"
                                >
                                    <DayOfWeekSelect />
                                </Item>
                            )
                        }
                        <Item
                            label="超时时间"
                            name="time_out"
                        >
                            <Input />
                        </Item>
                        <Item
                            label="POST状态"
                            name="post_state"
                        >
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onPostChange} checked={postCheck} />
                        </Item>
                        <Item
                            label="允许重入"
                            name="reentrant"
                        >
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onReenChange} disabled={isReentrant} checked={reenCheck} />
                        </Item>
                        <Item
                            label="开启日志"
                            name="enable_log"
                        >
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onLogChange} checked={logCheck} />
                        </Item>

                    </Form>
                </div>
            </SiteModal>
        </div>
    )
}
export default VisibleIISAgentConfig;