1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*
* @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;