/* * @Description: * @Author: leizhe * @Date: 2022-01-13 10:47:32 * @LastEditTime: 2022-03-31 17:37:04 * @LastEditors: leizhe */ /* eslint-disable array-callback-return */ /* eslint-disable no-plusplus */ import React, { useState, useEffect } from 'react'; import { Modal, Tooltip } from 'antd'; import styles from './sortModal.less'; import DragTable from '@/components/DragTable/DragTable'; const SortModal = props => { const { callBackSubmit = () => {}, visible, onCancel, webs } = props; const [orderTable, setOrderTable] = useState([]); const [flowIDs, setFlowIDs] = useState([]); const onSumbit = () => { callBackSubmit({ str: flowIDs }); }; // 根据orderTable值改变flowIDs useEffect(() => { let ids = []; orderTable.map(item => { ids.push(item.subSystemValue); }); console.log(ids); setFlowIDs(ids); }, [orderTable]); useEffect(() => { if (visible) { console.log(webs); let aa = [...webs]; aa.map(i => { delete i.children; }); setOrderTable(aa); } }, [visible]); // 拖拽回调函数 const dragCallBack = data => { if (data) { setOrderTable(data); } }; const columns = [ { title: '网站名', dataIndex: 'text', width: 50, key: 'text', render: record => ( <Tooltip placement="topLeft" title={record}> {record} </Tooltip> ), }, ]; return ( <Modal title="网站调序" width="600px" visible={visible} onCancel={onCancel} onOk={onSumbit} okText="确认" cancelText="取消" > <div className={styles.cardContent} style={{ width: '90%', marginLeft: '24px' }}> <div style={{ height: '500px' }}> <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: 450, }} /> </div> </div> </Modal> ); }; export default SortModal;