Order.jsx 2.84 KB
Newer Older
1 2 3 4 5 6 7
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 17:26:13
 * @LastEditTime: 2022-03-31 17:37:35
 * @LastEditors: leizhe
 */
邓超's avatar
邓超 committed
8
import React, { useState, useEffect } from 'react';
邓超's avatar
邓超 committed
9
import { flowReOrder } from '@/services/flow/flow';
邓超's avatar
邓超 committed
10
import { Modal, notification } from 'antd';
11
import DragTable from '@/components/DragTable/DragTable';
邓超's avatar
邓超 committed
12
const Order = props => {
皮倩雯's avatar
皮倩雯 committed
13
  const { visible, handleCancel, tableData, submitCallBack, processData } = props;
邓超's avatar
邓超 committed
14 15
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState('');
16
  // 页面弹出的时候初始化拖拽数据
邓超's avatar
邓超 committed
17 18
  useEffect(() => {
    if (visible) {
皮倩雯's avatar
皮倩雯 committed
19 20 21 22 23 24 25
      console.log(tableData);
      console.log(processData);
      let aa = [];
      processData.map(i => {
        i.root.map(j => {
          aa.push(j);
        });
邓超's avatar
邓超 committed
26
      });
皮倩雯's avatar
皮倩雯 committed
27 28 29 30 31 32
      setOrderTable(aa);
      // setOrderTable(() => {
      //   let table;
      //   table = tableData.filter(item => item.extendID !== -1);
      //   return table;
      // });
邓超's avatar
邓超 committed
33 34
    }
  }, [visible]);
35
  // 根据orderTable值改变flowIDs
邓超's avatar
邓超 committed
36
  useEffect(() => {
37
    let ids = '';
邓超's avatar
邓超 committed
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
    orderTable.forEach((item, index) => {
      if (index === orderTable.length - 1) {
        ids += `${item.extendID}`;
      } else {
        ids += `${item.extendID},`;
      }
    });
    setFlowIDs(ids);
  }, [orderTable]);
  // 提交表单
  const onSubmit = () => {
    flowReOrder({ flowIDs }).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '保存成功',
        });
        submitCallBack();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
66 67 68 69 70 71 72
  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      setOrderTable(data);
    }
  };
  const columns = [
皮倩雯's avatar
皮倩雯 committed
73 74 75 76 77 78 79 80 81 82 83 84
    {
      title: '序号',
      dataIndex: 'order',
      width: 50,
      key: 'order',
    },
    {
      title: '分组名',
      dataIndex: 'group',
      width: 150,
      key: 'group',
    },
85 86 87 88 89 90 91
    {
      title: '字段名',
      dataIndex: 'name',
      width: 150,
      key: 'name',
    },
  ];
邓超's avatar
邓超 committed
92 93 94
  return (
    <Modal
      title="调整顺序"
皮倩雯's avatar
皮倩雯 committed
95
      width="600px"
邓超's avatar
邓超 committed
96 97 98 99 100 101
      visible={visible}
      onOk={onSubmit}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
皮倩雯's avatar
皮倩雯 committed
102
      <div style={{ minHeight: '200px' }}>
103 104 105 106 107 108
        <DragTable
          bordered
          style={{ marginBottom: '10px' }}
          rowKey={record => record.extendID}
          columns={columns}
          dataSource={orderTable}
皮倩雯's avatar
皮倩雯 committed
109
          // showHeader={false}
110 111 112 113
          pagination={false}
          size="small"
          dragCallBack={dragCallBack}
          ItemTypes="flowOrder"
皮倩雯's avatar
皮倩雯 committed
114 115 116
          scroll={{
            y: 500,
          }}
117 118
        />
      </div>
邓超's avatar
邓超 committed
119 120 121 122
    </Modal>
  );
};
export default Order;