SortModal.jsx 2.34 KB
Newer Older
1 2 3 4 5 6 7
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 10:47:32
 * @LastEditTime: 2022-03-31 17:37:04
 * @LastEditors: leizhe
 */
皮倩雯's avatar
皮倩雯 committed
8
/* eslint-disable array-callback-return */
9
/* eslint-disable no-plusplus */
皮倩雯's avatar
皮倩雯 committed
10 11 12 13
import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';

import Sortable from 'sortablejs';
14
import styles from './incident.less';
皮倩雯's avatar
皮倩雯 committed
15
import DragTable from '@/components/DragTable/DragTable';
皮倩雯's avatar
皮倩雯 committed
16
const SortModal = props => {
皮倩雯's avatar
皮倩雯 committed
17
  const { callBackSubmit = () => {}, title, visible, onCancel, sortData1, keepIdValue } = props;
皮倩雯's avatar
皮倩雯 committed
18 19
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState([]);
皮倩雯's avatar
皮倩雯 committed
20

21
  const onSumbit = () => {
皮倩雯's avatar
皮倩雯 committed
22
    callBackSubmit({ str: flowIDs });
23
  };
皮倩雯's avatar
皮倩雯 committed
24

皮倩雯's avatar
皮倩雯 committed
25 26 27 28 29 30 31 32 33 34 35
  // 根据orderTable值改变flowIDs
  useEffect(() => {
    let ids = [];
    orderTable.map(item => {
      ids.push(item.ID);
    });
    setFlowIDs(ids);
  }, [orderTable]);

  useEffect(() => {
    if (visible) {
皮倩雯's avatar
皮倩雯 committed
36 37 38 39 40 41 42
      let aa = [];
      keepIdValue.map(i => {
        i.root.map(j => {
          aa.push(j);
        });
      });
      setOrderTable(aa);
皮倩雯's avatar
皮倩雯 committed
43 44 45 46 47 48 49
    }
  }, [visible]);

  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      setOrderTable(data);
50 51
    }
  };
皮倩雯's avatar
皮倩雯 committed
52

皮倩雯's avatar
皮倩雯 committed
53
  const columns = [
皮倩雯's avatar
皮倩雯 committed
54 55 56 57 58 59 60 61 62 63 64 65
    {
      title: '序号',
      dataIndex: 'order',
      width: 50,
      key: 'order',
    },
    {
      title: '业务类型',
      dataIndex: 'businessType',
      width: 150,
      key: 'businessType',
    },
皮倩雯's avatar
皮倩雯 committed
66
    {
67
      title: '事件类型',
皮倩雯's avatar
皮倩雯 committed
68 69 70 71 72
      dataIndex: 'name',
      width: 150,
      key: 'name',
    },
  ];
皮倩雯's avatar
皮倩雯 committed
73

74 75 76
  return (
    <Modal
      title={title}
皮倩雯's avatar
皮倩雯 committed
77
      width="600px"
78 79 80 81 82 83
      visible={visible}
      onCancel={onCancel}
      onOk={onSumbit}
      okText="确认"
      cancelText="取消"
    >
皮倩雯's avatar
皮倩雯 committed
84 85
      <div className={styles.cardContent} style={{ width: '90%', marginLeft: '24px' }}>
        <div style={{ minHeight: '200px' }}>
皮倩雯's avatar
皮倩雯 committed
86 87 88 89 90 91
          <DragTable
            bordered
            style={{ marginBottom: '10px' }}
            rowKey={record => record.extendID}
            columns={columns}
            dataSource={orderTable}
皮倩雯's avatar
皮倩雯 committed
92
            // showHeader={false}
皮倩雯's avatar
皮倩雯 committed
93 94 95 96
            pagination={false}
            size="small"
            dragCallBack={dragCallBack}
            ItemTypes="flowOrder"
皮倩雯's avatar
皮倩雯 committed
97 98 99
            scroll={{
              y: 500,
            }}
皮倩雯's avatar
皮倩雯 committed
100
          />
101 102 103 104 105 106
        </div>
      </div>
    </Modal>
  );
};
export default SortModal;