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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
* @Description:
* @Author: leizhe
* @Date: 2022-01-13 17:26:13
* @LastEditTime: 2023-02-08 15:43:35
* @LastEditors: dengchao 754083046@qq.com
*/
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 list = [];
processData.map(i => {
i.children.map(j => {
list.push(j);
});
});
console.log(list, 'list');
setOrderTable(list);
}
}, [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: 'Type',
width: 150,
key: 'Type',
},
{
title: '流程名称',
dataIndex: 'FlowName',
width: 150,
key: 'FlowName',
},
];
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.Code}
columns={columns}
dataSource={orderTable}
// showHeader={false}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="flowOrder"
scroll={{
y: 500,
}}
/>
</div>
</Modal>
);
};
export default Order;