Order.jsx 2.36 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 13 14 15
const Order = props => {
  const { visible, handleCancel, tableData, submitCallBack } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [flowIDs, setFlowIDs] = useState('');
16
  // 页面弹出的时候初始化拖拽数据
邓超's avatar
邓超 committed
17 18 19 20 21 22 23 24 25
  useEffect(() => {
    if (visible) {
      setOrderTable(() => {
        let table;
        table = tableData.filter(item => item.extendID !== -1);
        return table;
      });
    }
  }, [visible]);
26
  // 根据orderTable值改变flowIDs
邓超's avatar
邓超 committed
27
  useEffect(() => {
28
    let ids = '';
邓超's avatar
邓超 committed
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
    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,
        });
      }
    });
  };
57 58 59 60 61 62 63 64 65 66 67 68 69 70
  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      setOrderTable(data);
    }
  };
  const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      width: 150,
      key: 'name',
    },
  ];
邓超's avatar
邓超 committed
71 72 73 74 75 76 77 78 79
  return (
    <Modal
      title="调整顺序"
      visible={visible}
      onOk={onSubmit}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
80 81 82 83 84 85 86 87 88 89 90 91 92 93
      <div style={{ maxHeight: '400px', overflow: 'auto' }}>
        <DragTable
          bordered
          style={{ marginBottom: '10px' }}
          rowKey={record => record.extendID}
          columns={columns}
          dataSource={orderTable}
          showHeader={false}
          pagination={false}
          size="small"
          dragCallBack={dragCallBack}
          ItemTypes="flowOrder"
        />
      </div>
邓超's avatar
邓超 committed
94 95 96 97
    </Modal>
  );
};
export default Order;