flowNode.jsx 12 KB
Newer Older
邓超's avatar
邓超 committed
1 2
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
邓超's avatar
邓超 committed
3
import { reloadFlowNodes, removeFlowNodeExtend } from '@/services/flow/flow';
4 5
import { Space, Table, Popconfirm, Tooltip, notification, message, Button, Spin } from 'antd';
import { RollbackOutlined, EditTwoTone, ControlOutlined, DeleteOutlined } from '@ant-design/icons';
6
import PageContainer from '@/components/BasePageContainer';
邓超's avatar
邓超 committed
7
import NodeEdit from './flowNodeComponents/NodeEdit';
邓超's avatar
邓超 committed
8
import AuxiliaryView from './flowNodeComponents/AuxiliaryView';
邓超's avatar
邓超 committed
9 10 11 12 13 14 15
import styles from './flowNode.less';

const FlowNode = () => {
  const history = useHistory();
  const { flowName, pickItemIndex } = history.location.state;
  const [visible, setVisible] = useState({
    nodeEdit: false,
邓超's avatar
邓超 committed
16
    auxiliaryView: false,
邓超's avatar
邓超 committed
17 18
  }); // 弹窗显示
  const [tableData, setTableData] = useState([]); // 流程对应的回显的表格
邓超's avatar
邓超 committed
19
  const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 展开的表格的key
邓超's avatar
邓超 committed
20
  const [nodeMsg, setNodeMsg] = useState(); // 保存节点信息
邓超's avatar
邓超 committed
21
  const [loading, setLoading] = useState(false);
邓超's avatar
邓超 committed
22 23 24 25 26 27 28 29 30
  useEffect(() => {
    getData();
  }, []);
  // 弹窗显示控制
  const showModal = (key, value) => {
    setVisible({ ...visible, [key]: value });
  };
  // 获取数据
  const getData = () => {
邓超's avatar
邓超 committed
31
    setLoading(true);
邓超's avatar
邓超 committed
32
    reloadFlowNodes({ flowName }).then(res => {
邓超's avatar
邓超 committed
33
      setLoading(false);
邓超's avatar
邓超 committed
34 35 36 37 38 39 40 41 42
      if (res.code === 0) {
        setTableData(res.data);
        // 存入需要展开得节点
        setExpandedRowKeys(res.data.map(item => item.GroupName));
      }
    });
  };
  // 清除节点
  const delNode = record => {
邓超's avatar
邓超 committed
43
    removeFlowNodeExtend({ flowNodeExtendID: record.extendID })
邓超's avatar
邓超 committed
44 45
      .then(res => {
        if (res.code === 0) {
邓超's avatar
邓超 committed
46
          getData();
邓超's avatar
邓超 committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
          notification.success({
            message: '提示',
            duration: 3,
            description: '清除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(() => {
        notification.error({
          message: '提示',
          duration: 3,
          description: '网络异常',
        });
      });
  };
  // 控制表格的展开跟收起
  const onUnfold = (expanded, record) => {
    const data = [...expandedRowKeys];
71
    let index = data.indexOf(record.GroupName);
邓超's avatar
邓超 committed
72 73 74 75 76 77 78
    if (expanded) {
      data.push(record.GroupName);
    } else {
      data.splice(index, 1);
    }
    setExpandedRowKeys(data);
  };
皮倩雯's avatar
皮倩雯 committed
79 80 81 82 83 84 85 86 87 88 89
  // 表格内文案样式
  const textStyleOne = (text, record) => {
    if (record.colorType === 2) {
      return 'red';
    }
    if (text === '(未配置)') {
      return 'grey';
    }
    return '000000D9';
  };

邓超's avatar
邓超 committed
90 91 92 93 94 95 96 97
  // 定义展开的表格
  const createUnfoldTable = itemTable => {
    const columns = [
      {
        title: '节点名称',
        dataIndex: 'name',
        width: 149,
        align: 'left',
98 99 100
        ellipsis: {
          showTitle: true,
        },
皮倩雯's avatar
皮倩雯 committed
101
        render: (text, record) => (
邓超's avatar
邓超 committed
102
          <div
皮倩雯's avatar
皮倩雯 committed
103
            style={{
104
              textAlign: 'center',
皮倩雯's avatar
皮倩雯 committed
105 106 107 108 109
              color: record.colorType === 2 ? 'red' : '#000000D9',
            }}
          >
            {text}
          </div>
邓超's avatar
邓超 committed
110 111 112 113
        ),
      },
      {
        title: '节点别名',
邓超's avatar
邓超 committed
114
        dataIndex: 'aliasName',
邓超's avatar
邓超 committed
115 116
        align: 'center',
        width: 80,
117 118 119 120 121 122 123 124
        ellipsis: {
          showTitle: true,
        },
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text}>
            <span style={{ color: textStyleOne(text, record) }}>{text}</span>
          </Tooltip>
        ),
邓超's avatar
邓超 committed
125 126 127 128 129
      },
      {
        title: '移交方式',
        dataIndex: 'extendHandover',
        align: 'center',
130
        width: 100,
131
        render: (text, record) => <span style={{ color: textStyleOne(text, record) }}>{text}</span>,
邓超's avatar
邓超 committed
132 133 134 135 136 137
      },
      {
        title: '节点类型',
        dataIndex: 'extendNodeType',
        align: 'center',
        width: 80,
138
        render: (text, record) => <span style={{ color: textStyleOne(text, record) }}>{text}</span>,
邓超's avatar
邓超 committed
139 140 141 142 143 144
      },
      {
        title: '工单主表',
        dataIndex: 'extendTableName',
        width: 150,
        align: 'center',
145 146 147
        ellipsis: {
          showTitle: true,
        },
皮倩雯's avatar
皮倩雯 committed
148
        render: (text, record) => (
149
          <Tooltip placement="topLeft" title={text}>
皮倩雯's avatar
皮倩雯 committed
150
            <span style={{ color: textStyleOne(text, record) }}>{text}</span>
151
          </Tooltip>
邓超's avatar
邓超 committed
152 153
        ),
      },
154 155 156 157 158 159 160 161 162
      // {
      //   title: '查看字段',
      //   dataIndex: 'extendSeeFields',
      //   align: 'center',
      //   width: 80,
      //   render: (text, record) => (
      //     <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
      //   ),
      // },
邓超's avatar
邓超 committed
163 164 165 166 167
      {
        title: '字段',
        dataIndex: 'extendFields',
        align: 'center',
        width: 80,
皮倩雯's avatar
皮倩雯 committed
168
        render: (text, record) => (
169
          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
邓超's avatar
邓超 committed
170 171
        ),
      },
172 173 174 175 176 177
      {
        title: '外部字段',
        dataIndex: 'outFields',
        key: 'outFields',
        align: 'center',
        width: 100,
178 179 180 181 182 183 184 185 186 187 188 189
        render: text => (
          <span
            style={{
              display: 'inline-block',
              width: '80px',
              color: Number(text) > 0 ? 'red' : '',
              backgroundColor: Number(text) > 0 ? 'yellow' : '',
            }}
          >
            {text}
          </span>
        ),
190
      },
邓超's avatar
邓超 committed
191 192 193 194 195 196

      {
        title: '补正',
        dataIndex: 'extendEditableLater',
        align: 'center',
        width: 80,
皮倩雯's avatar
皮倩雯 committed
197
        render: (text, record) => (
198
          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
邓超's avatar
邓超 committed
199 200 201 202 203 204 205
        ),
      },
      {
        title: '可退',
        dataIndex: 'extendRollbackable',
        align: 'center',
        width: 80,
皮倩雯's avatar
皮倩雯 committed
206
        render: (text, record) => (
207
          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
邓超's avatar
邓超 committed
208 209
        ),
      },
210 211 212 213 214 215 216 217 218 219 220 221 222 223
      // {
      //   title: '退至',
      //   dataIndex: 'extendRollbackNode',
      //   align: 'center',
      //   width: 80,
      //   ellipsis: {
      //     showTitle: true,
      //   },
      //   render: (text, record) => (
      //     <Tooltip placement="topLeft" title={text}>
      //       <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
      //     </Tooltip>
      //   ),
      // },
邓超's avatar
邓超 committed
224
      {
225
        title: '平级移交',
邓超's avatar
邓超 committed
226 227 228
        dataIndex: 'tranferable',
        align: 'center',
        width: 80,
皮倩雯's avatar
皮倩雯 committed
229
        render: (text, record) => (
230
          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
邓超's avatar
邓超 committed
231 232
        ),
      },
233 234 235 236 237 238 239 240 241
      // {
      //   title: '显示事件信息',
      //   dataIndex: 'eventInformation',
      //   align: 'center',
      //   width: 80,
      //   render: (text, record) => (
      //     <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>{text}</span>
      //   ),
      // },
邓超's avatar
邓超 committed
242 243 244 245 246 247 248 249
      {
        title: '操作',
        align: 'center',
        ellipsis: true,
        width: 150,
        render: record => (
          <>
            <Space>
邓超's avatar
邓超 committed
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
              {record.ID !== 0 && (
                <>
                  <Tooltip title="修改节点">
                    <EditTwoTone
                      onClick={() => {
                        showModal('nodeEdit', true);
                        setNodeMsg(record);
                      }}
                      style={{ fontSize: '16px', color: '#1890FF' }}
                    />
                  </Tooltip>
                  <Tooltip title="节点辅助视图">
                    <ControlOutlined
                      onClick={() => {
                        showModal('auxiliaryView', true);
                        setNodeMsg(record);
                      }}
                      style={{ fontSize: '16px', color: '#1890FF' }}
                    />
                  </Tooltip>
                </>
              )}
邓超's avatar
邓超 committed
272 273 274 275 276 277 278 279
              <Tooltip title="清除节点配置">
                <Popconfirm
                  title="是否清除该节点配置?"
                  onConfirm={() => delNode(record)}
                  onCancel={() => message.error('取消清除')}
                  okText="是"
                  cancelText="否"
                >
280
                  <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
邓超's avatar
邓超 committed
281 282 283 284 285 286 287 288 289 290
                </Popconfirm>
              </Tooltip>
            </Space>
          </>
        ),
      },
    ];
    return (
      <Table
        className={styles.unfoldTable}
邓超's avatar
邓超 committed
291
        rowKey={record => record.name}
邓超's avatar
邓超 committed
292 293 294 295 296 297 298 299
        columns={columns}
        bordered
        size="small"
        showHeader={false}
        dataSource={itemTable}
        pagination={false}
        onRow={record => ({
          onDoubleClick: () => {
邓超's avatar
邓超 committed
300 301 302 303
            if (record.ID !== 0) {
              showModal('nodeEdit', true);
              setNodeMsg(record);
            }
邓超's avatar
邓超 committed
304 305 306 307 308 309 310 311
          },
        })}
      />
    );
  };
  // 返回
  const backFlow = () => {
    history.push({
312
      pathname: '/biz/workflow/case',
邓超's avatar
邓超 committed
313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336
      state: { pickItemIndex },
    });
  };
  // 定义表格
  const columns = [
    {
      title: '节点名称',
      dataIndex: 'GroupName',
      width: 100,
      align: 'left',
      render: (text, record) => (
        <a style={{ fontWeight: 'bold' }}>
          {text}({record.Items.length ? record.Items.length : 0}个)
        </a>
      ),
    },
    {
      title: '节点别名',
      align: 'center',
      width: 80,
    },
    {
      title: '移交方式',
      align: 'center',
337
      width: 100,
邓超's avatar
邓超 committed
338 339 340 341 342 343 344 345 346 347 348
    },
    {
      title: '节点类型',
      align: 'center',
      width: 80,
    },
    {
      title: '工单主表',
      align: 'center',
      width: 150,
    },
349 350 351 352 353
    // {
    //   title: '查看字段',
    //   width: 80,
    //   align: 'center',
    // },
邓超's avatar
邓超 committed
354 355 356 357 358
    {
      title: '字段',
      align: 'center',
      width: 80,
    },
359 360 361 362 363 364 365
    {
      title: '外部字段',
      dataIndex: 'outFields',
      key: 'outFields',
      align: 'center',
      width: 100,
    },
邓超's avatar
邓超 committed
366 367 368 369 370 371 372 373 374 375
    {
      title: '补正',
      align: 'center',
      width: 80,
    },
    {
      title: '可退',
      align: 'center',
      width: 80,
    },
376 377 378 379 380
    // {
    //   title: '退至',
    //   align: 'center',
    //   width: 80,
    // },
邓超's avatar
邓超 committed
381
    {
382
      title: '平级移交',
邓超's avatar
邓超 committed
383 384 385
      align: 'center',
      width: 80,
    },
386 387 388 389 390
    // {
    //   title: '显示事件信息',
    //   align: 'center',
    //   width: 80,
    // },
邓超's avatar
邓超 committed
391 392 393 394 395 396 397 398
    {
      title: '操作',
      align: 'center',
      width: 150,
    },
  ];

  return (
399 400 401 402 403 404 405 406 407 408
    <PageContainer>
      <div className={styles.NodeContent}>
        <div className={styles.header}>
          <div className={styles.nodeTitle}>{flowName}-流程节点配置</div>
          <div className={styles.buttonBox}>
            <Button type="primary" onClick={() => backFlow()}>
              <RollbackOutlined />
              返回
            </Button>
          </div>
邓超's avatar
邓超 committed
409
        </div>
410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426
        <div style={{ height: 'calc(100% - 50px)', overflowY: 'scroll' }}>
          <Spin spinning={loading} tip="loading...">
            <Table
              dataSource={tableData}
              columns={columns}
              rowKey={record => record.GroupName}
              size="small"
              showHeader
              expandable={{
                expandedRowRender: record => createUnfoldTable(record.Items),
              }}
              expandedRowKeys={expandedRowKeys}
              onExpand={onUnfold}
              pagination={false}
            />
          </Spin>
        </div>
427 428 429 430 431 432 433 434

        <NodeEdit
          visible={visible.nodeEdit}
          msg={nodeMsg}
          handleCancel={() => showModal('nodeEdit', false)}
          onSubumit={() => {
            showModal('nodeEdit', false);
            getData();
邓超's avatar
邓超 committed
435 436
          }}
        />
437 438 439 440 441 442 443
        <AuxiliaryView
          visible={visible.auxiliaryView}
          msg={nodeMsg}
          handleCancel={() => showModal('auxiliaryView', false)}
        />
      </div>
    </PageContainer>
邓超's avatar
邓超 committed
444 445 446 447
  );
};

export default FlowNode;