/* * @Description: * @Author: leizhe * @Date: 2022-01-13 17:26:13 * @LastEditTime: 2022-03-31 17:37:35 * @LastEditors: leizhe */ import React, { useState, useEffect } from 'react'; import { flowReOrder } from '@/services/flow/flow'; import { Modal, notification } from 'antd'; import DragTable from '@/components/DragTable/DragTable'; const Order = props => { const { visible, handleCancel, tableData, submitCallBack, processData } = props; const [orderTable, setOrderTable] = useState([]); const [flowIDs, setFlowIDs] = useState(''); // 页面弹出的时候初始化拖拽数据 useEffect(() => { if (visible) { console.log(tableData); console.log(processData); let aa = []; processData.map(i => { i.root.map(j => { aa.push(j); }); }); setOrderTable(aa); // setOrderTable(() => { // let table; // table = tableData.filter(item => item.extendID !== -1); // return table; // }); } }, [visible]); // 根据orderTable值改变flowIDs useEffect(() => { let ids = ''; 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, }); } }); }; // 拖拽回调函数 const dragCallBack = data => { if (data) { setOrderTable(data); } }; const columns = [ { title: '序号', dataIndex: 'order', width: 50, key: 'order', }, { title: '分组名', dataIndex: 'group', width: 150, key: 'group', }, { title: '字段名', dataIndex: 'name', width: 150, key: 'name', }, ]; return ( <Modal title="调整顺序" width="600px" visible={visible} onOk={onSubmit} onCancel={handleCancel} maskClosable={false} destroyOnClose > <div style={{ minHeight: '200px' }}> <DragTable bordered style={{ marginBottom: '10px' }} rowKey={record => record.extendID} columns={columns} dataSource={orderTable} // showHeader={false} pagination={false} size="small" dragCallBack={dragCallBack} ItemTypes="flowOrder" scroll={{ y: 500, }} /> </div> </Modal> ); }; export default Order;