AddModal.jsx 6.06 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Form, Modal, Input, Select, notification, DatePicker, Spin } from 'antd';
shaoan123's avatar
shaoan123 committed
3
import styles from './taskScheduling.less'
4 5 6
// import moment from 'moment';
// import locale from 'antd/es/date-picker/locale/zh_CN';
// import 'moment/locale/zh-cn';
7

8 9 10 11 12
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
import {
13
  addTaskOptions, getPredictInfo, getStrategyInfo, updateTaskOptions
14
} from '@/services/intelligence/api';
15

shaoan123's avatar
shaoan123 committed
16
const { TextArea } = Input;
17
const AddModal = props => {
18
  const { callBackSubmit = () => { }, type, formObj, visible, deviceType } = props;
19
  const [loading, setLoading] = useState(false);
20
  const [isloading, setIsLoading] = useState(false);
21 22 23
  const [urlType, setUrlType] = useState('');
  const [scenarioList, setScenarioList] = useState([]);
  const [Intervals, setIntervals] = useState('')
24
  const [StrategyId, setStrategyId] = useState(0)
25
  const [form] = Form.useForm();
26

27 28 29 30 31 32
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
33
        let apiUrl = type === 'add' ? addTaskOptions : updateTaskOptions
34
        setLoading(true);
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
        apiUrl([{
          ...obj, StrategyId
        }]).then(res => {
          setLoading(false);
          if (res.errMsg === '') {
            form.resetFields();
            callBackSubmit();
            prompt('success', `${type === 'add' ? "增加成功" : "编辑成功"}`)
          }
          else {
            prompt('fail', res.errMsg)
          }
        }).catch(err => {
          setLoading(false);
        })
50 51 52
      }
    });
  };
53
  //提示框
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
    else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  }
70 71 72 73 74 75


  const onFinish = value => { };
  useEffect(() => {
    switch (type) {
      case 'add':
76 77
        setIntervals()
        form.resetFields();
78 79
        break;
      case 'edit':
80 81 82 83 84
        setUrlType(formObj.TaskType)
        setStrategyId(formObj.AlgorithmId)
        handleTaskType(formObj.TaskType)
        setIntervals(formObj.Interval)
        form.setFieldsValue({ ...formObj, AlgorithmName: formObj.Name });
85 86 87 88 89 90
        break;
      default:
        break;
    }
  }, [visible]);

shaoan123's avatar
shaoan123 committed
91

92
  //选择任务类型
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
  const handleTaskType = (value) => {
    switch (value) {
      case '预测':
        setUrlType('predict')
        getPredictInfo().then(res => {
          res.getMe.length && setScenarioList(res.getMe)
        })
        break;
      case '控制':
        setUrlType('control')
        getStrategyInfo().then(res => {
          res.getMe.length && setScenarioList(res.getMe)
        })
        break;
      case 'http':
        setUrlType('url')
        break;
      default:
        setUrlType('predict')
    }

  }
  const inputInterval = (e) => {
    setIntervals(e.target.value)
117
  }
118 119 120
  const layout = {
    layout: 'horizontal',
    labelCol: {
121
      span: 5,
122 123 124 125 126
    },
    wrapperCol: {
      span: 16,
    },
  };
127

128 129 130
  const handleChange = (value, option) => {
    setStrategyId(option.id)
  }
131 132

  return (
133

134
    <Modal
135
      title={`${type === 'add' ? '任务新增' : '编辑'}`}
136 137 138 139 140 141 142 143 144 145 146 147 148
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
149 150 151 152 153 154 155 156 157 158 159
      <Spin spinning={isloading} delay={300}>
        {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
            <Item
              label="任务名称"
              name="TaskName"
              rules={[{ required: true, message: '请输入任务名称' }]}
            >
              <Input placeholder="请输入任务名称" allowClear />
            </Item>
            <Item
160 161
              label="任务类型"
              name="TaskType"
162 163
              rules={[{ required: true, message: '请选择类型' }]}
            >
164 165 166 167
              <Select onChange={handleTaskType}>
                <Select.Option value='预测'>预测</Select.Option>
                <Select.Option value='控制'>控制</Select.Option>
                <Select.Option value='http'>http</Select.Option>
168 169
              </Select>
            </Item>
170
            {urlType === 'predict' || urlType === 'control' || urlType === '' ? <Item
171
              label="方案名称"
172
              name="AlgorithmName"
173
            >
174 175
              <Select onChange={(value, option) => handleChange(value, option)}>
                {scenarioList.length ? scenarioList.map((item, index) => { return <Select.Option key={index} id={item.ID} value={urlType === 'predict' ? item.PredictName : item.StrategyName}>{urlType === 'predict' ? item.PredictName : item.StrategyName}</Select.Option> }) : ''}
176
              </Select>
177
            </Item> : <Item
178 179
              label="ApiUrl"
              name="ApiUrl"
180 181 182
            >
              <Input placeholder="请输入URL" allowClear />
            </Item>}
183
            <Item
184
              label="调度间隔(Cron)"
185 186 187 188
              name="Interval"
              rules={[{ required: true, message: '请输入间隔' }]}
            >
              <div className={styles.predict}>
189
                <Input placeholder="请输入间隔" allowClear onChange={(value) => inputInterval(value)} value={Intervals} />
190 191
                <a className={styles.corn} target="view_window" href="https://cron.qqe2.com/">cron在线生成</a>
              </div>
192
            </Item>
193 194
            <Item
              label="描述"
195
              name="Describe"
196 197 198 199 200 201 202
            >
              <TextArea placeholder="可输入描述信息" rows={4} allowClear />
            </Item>
          </Form>
        )}
      </Spin>

203 204 205 206
    </Modal>
  );
};
export default AddModal;