AddModal.jsx 9.61 KB
Newer Older
邓超's avatar
邓超 committed
1 2 3 4 5
import React, { useEffect, useState } from 'react';
import {
  flowReloadFlowNodes,
  reloadTimeLimitadFlowNodes,
  operateFlowTimer,
6
  reloadFlowNodes,
邓超's avatar
邓超 committed
7
} from '@/services/flow/flow';
邓超's avatar
邓超 committed
8 9 10 11
import { Form, Modal, Input, notification, Select } from 'antd';
const { Option } = Select;

const AddModal = props => {
12
  const { onSubumit, handleCancel, visible, msg, flowId, modalType, title, finishNodes } = props;
邓超's avatar
邓超 committed
13 14
  const [flowNodes, setFlowNodes] = useState([]);
  const [timeLimitFlowNodes, setTimeLimitFlowNodes] = useState([]);
15
  const [timeLimitFlowNodesEnd, setTimeLimitFlowNodesEnd] = useState([]);
邓超's avatar
邓超 committed
16 17
  const [startNodeIndex, setStartNodeIndex] = useState(null);
  const [endNodeIndex, setEndNodeIndex] = useState(null);
18

邓超's avatar
邓超 committed
19 20 21 22 23 24 25 26
  const [form] = Form.useForm();
  useEffect(() => {
    form.resetFields();
    setStartNodeIndex(null);
    setEndNodeIndex(null);
    if (visible) {
      getFlowNodes();
      if (modalType === 'edit') {
27 28 29 30 31 32 33 34 35 36
        console.log(msg, 'aa ');
        reloadFlowNodes({ flowName: title }).then(res => {
          if (res.code === 0) {
            let aa = res.data[0].Items.find(i => i.name == msg.StartNode);
            getLimitadFlowNodes(aa.extendTableName);
            let bb = res.data[0].Items.find(i => i.name == msg.EndNode);
            getLimitadFlowNodesEnd(bb.extendTableName);
            // 存入需要展开得节点
          }
        });
邓超's avatar
邓超 committed
37 38
        getFormData();
      } else {
39 40 41 42 43 44 45
        form.setFieldsValue({
          FlowName: title,
          TimeLimit: 0,
          TimeUnit: '小时',
          TimeLimitField: '(未配置)',
          TimeoutField: '(未配置)',
        });
邓超's avatar
邓超 committed
46
      }
47 48 49
    } else {
      setTimeLimitFlowNodes([]);
      setTimeLimitFlowNodesEnd([]);
邓超's avatar
邓超 committed
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
    }
  }, [visible]);
  // 获取到节点后存入当前选中对应的索引用于限制选择节点
  useEffect(() => {
    if (flowNodes.length > 0) {
      flowNodes.forEach((item, index) => {
        if (item.Name === msg.StartNode && modalType === 'edit') {
          setStartNodeIndex(index);
        }
        if (item.Name === msg.EndNode && modalType === 'edit') {
          setEndNodeIndex(index);
        }
      });
    }
  }, [flowNodes]);
  // 根据下拉框选择的流程节点关联的表名加载指派字段
66 67
  const getLimitadFlowNodes = e => {
    reloadTimeLimitadFlowNodes({ flowNodeTableName: e }).then(res => {
邓超's avatar
邓超 committed
68 69 70 71 72
      if (res.code === 0) {
        setTimeLimitFlowNodes(res.data);
      }
    });
  };
73 74 75 76 77 78 79 80

  const getLimitadFlowNodesEnd = e => {
    reloadTimeLimitadFlowNodes({ flowNodeTableName: e }).then(res => {
      if (res.code === 0) {
        setTimeLimitFlowNodesEnd(res.data);
      }
    });
  };
邓超's avatar
邓超 committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
  // 根据流程ID加载起止节点和终止节点
  const getFlowNodes = () => {
    flowReloadFlowNodes({ flowId }).then(res => {
      if (res.code === 0) {
        setFlowNodes(res.data);
      }
    });
  };
  // 获取表单回显
  const getFormData = () => {
    form.setFieldsValue({ ...msg, FlowName: title });
  };
  // 表单监听
  const onValuesChange = val => {
    if (Object.keys(val)[0] === 'StartNode') {
96 97 98 99 100 101 102
      reloadFlowNodes({ flowName: title }).then(res => {
        if (res.code === 0) {
          let aa = res.data[0].Items.find(i => i.name == val.StartNode);
          getLimitadFlowNodes(aa.extendTableName);
          // 存入需要展开得节点
        }
      });
邓超's avatar
邓超 committed
103 104 105 106 107 108 109
      flowNodes.forEach((item, index) => {
        if (item.Name === val.StartNode) {
          setStartNodeIndex(index);
        }
      });
    }
    if (Object.keys(val)[0] === 'EndNode') {
110 111 112 113 114 115 116
      reloadFlowNodes({ flowName: title }).then(res => {
        if (res.code === 0) {
          let aa = res.data[0].Items.find(i => i.name == val.EndNode);
          getLimitadFlowNodesEnd(aa.extendTableName);
          // 存入需要展开得节点
        }
      });
邓超's avatar
邓超 committed
117 118 119 120 121 122 123 124 125 126 127
      flowNodes.forEach((item, index) => {
        if (item.Name === val.EndNode) {
          setEndNodeIndex(index);
        }
      });
    }
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
128 129 130
        validate.TimeLimitField =
          validate.TimeLimitField === '(未配置)' ? '' : validate.TimeLimitField;
        validate.TimeoutField = validate.TimeoutField === '(未配置)' ? '' : validate.TimeoutField;
邓超's avatar
邓超 committed
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
        let obj = {};
        if (modalType === 'add') {
          obj = { ...validate, ID: 0 };
        } else {
          obj = { ...validate, ID: msg.ID };
        }
        operateFlowTimer(obj)
          .then(res => {
            if (res.code === 0) {
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
              onSubumit();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          })
          .catch(() => {
            notification.error({
              message: '提示',
              duration: 3,
              description: '网络异常',
            });
          });
      }
    });
  };
  return (
    <Modal
166
      title="流程时限规则配置"
邓超's avatar
邓超 committed
167 168 169 170 171
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
172
      width={550}
邓超's avatar
邓超 committed
173 174 175
    >
      <Form
        form={form}
176 177
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
邓超's avatar
邓超 committed
178 179 180 181 182 183 184 185 186
        initialValues={{ remember: true }}
        onValuesChange={onValuesChange}
      >
        <Form.Item label="流程名称" name="FlowName">
          <Input disabled />
        </Form.Item>
        <Form.Item label="规则名称" name="Name" rules={[{ required: true }]}>
          <Input placeholder="请输入规则名称" />
        </Form.Item>
187
        <Form.Item label="起止节点" style={{ marginBottom: 0, message: '请选择节点' }} required>
邓超's avatar
邓超 committed
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
          <div style={{ display: 'flex' }}>
            <Form.Item
              name="StartNode"
              style={{ width: '100%' }}
              rules={[{ required: true, message: '请选择节点' }]}
            >
              <Select>
                {flowNodes.map((item, index) => (
                  <Option
                    value={item.Name}
                    key={item.ID}
                    disabled={endNodeIndex !== null && index >= endNodeIndex}
                  >
                    {item.Name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <span style={{ width: '40px', textAlign: 'center' }}>--</span>
            <Form.Item
              name="EndNode"
              style={{ width: '100%' }}
              rules={[{ required: true, message: '请选择节点' }]}
            >
              <Select>
                {flowNodes.map((item, index) => (
                  <Option
                    value={item.Name}
                    key={item.ID}
217 218 219 220
                    disabled={
                      finishNodes.some(ele => item.Name === ele) ||
                      (startNodeIndex !== null && index <= startNodeIndex)
                    }
邓超's avatar
邓超 committed
221 222 223 224 225 226 227 228 229 230 231
                  >
                    {item.Name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </div>
        </Form.Item>
        <Form.Item label="默认时限" style={{ marginBottom: 0 }} required>
          <div style={{ display: 'flex' }}>
            <Form.Item
232
              name="TimeLimit"
邓超's avatar
邓超 committed
233 234 235 236 237
              style={{ marginRight: '18px', width: '100%' }}
              rules={[
                { required: true, message: '请选填写时限' },
                {
                  validator: (_, value) =>
238
                    value < 0 ? Promise.reject(new Error('默认时限需要大于零')) : Promise.resolve(),
邓超's avatar
邓超 committed
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
                },
              ]}
            >
              <Input placeholder="请输入默认时限" />
            </Form.Item>
            <Form.Item
              name="TimeUnit"
              style={{ width: '100%' }}
              rules={[{ required: true, message: '请选择时限单位' }]}
            >
              <Select>
                <Option value="小时">小时</Option>
                <Option value="自然日">自然日</Option>
                <Option value="工作日">工作日</Option>
              </Select>
            </Form.Item>
          </div>
        </Form.Item>
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
        <Form.Item label="时限指派字段" required>
          <Form.Item
            name="TimeLimitField"
            rules={[{ required: true, message: '请选择时限指派字段' }]}
          >
            <Select>
              {timeLimitFlowNodes.map(item => (
                <Option value={item.Name} key={item.ID}>
                  <span>{item.Name}</span>
                </Option>
              ))}
            </Select>
          </Form.Item>
          <div style={{ marginTop: '-15px' }}>
            ● 来自起始节点工单表,可以为选择器,配置读取字典表;可以为日期/时间控件,用户自行选择。
          </div>
邓超's avatar
邓超 committed
273
        </Form.Item>
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
        <Form.Item label="超时记录字段" required>
          <Form.Item
            name="TimeoutField"
            rules={[{ required: true, message: '请选择超时记录字段' }]}
          >
            <Select>
              {timeLimitFlowNodesEnd.map(item => (
                <Option value={item.Name} key={item.ID}>
                  <span>{item.Name}</span>
                </Option>
              ))}
            </Select>
          </Form.Item>
          <div style={{ marginTop: '-15px' }}>
            ● 来自终止节点工单表,由系统自动填写该工单是否超时。
          </div>
邓超's avatar
邓超 committed
290 291 292 293 294 295
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default AddModal;