ModalList.js
2.92 KB
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
/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Table } from 'antd-v4';
import * as utils from '../../../utils/utils';
import * as comFunc from '../ComFunc';
import AntdDraggableModal from '../AntdDraggableModal';
class ModalList extends Component {
constructor(props) {
super(props);
this.state = {
modalListVisible: props.modalListVisible,
scrollX: 1000,
columns: [],
data: [],
selectedRowKeys: [], /* 选中行 */
sMenuName: '', /* 弹窗标题 */
copyFromConfig: {}, /* 复制从按钮配置 */
slaveAssignData: [],
};
}
componentWillReceiveProps(nextProps) {
let { columns } = this.state;
const { modalListData, modalListVisible } = nextProps;
if (utils.isNotEmptyObject(modalListData) && modalListVisible) {
const { formData, data, sMenuName, copyFromConfig } = modalListData;
if (utils.isNotEmptyArr(formData)) {
columns = comFunc.getListHeader(formData[0], columns);
const scrollX = comFunc.getScrollX(columns);
this.setState({
scrollX,
modalListVisible,
columns,
data,
sMenuName,
copyFromConfig,
});
}
} else {
this.setState({ modalListVisible });
}
}
onSelectChange = (selectedRowKeys) => {
const { data, copyFromConfig } = this.state;
const slaveData = data.filter(item => selectedRowKeys.includes(item.key));
const slaveAssign = [utils.returnObjValue(copyFromConfig.sAssignField)];
const slaveAssignData = comFunc.getCopyToSlaveAssign(slaveData, slaveAssign, {});
this.setState({ selectedRowKeys, slaveAssignData });
};
handleCancel = () => {
this.setState({
selectedRowKeys: [],
modalListVisible: false,
});
};
handleOk = () => {
const { slaveAssignData } = this.state;
this.setState({ selectedRowKeys: [] });
this.props.onModalListData(slaveAssignData);
};
render() {
const { modalListVisible, columns, data, scrollX, selectedRowKeys, sMenuName } = this.state;
const rowSelection = {
type: 'checkbox',
selectedRowKeys,
onChange: this.onSelectChange,
};
return (
<div>
{
modalListVisible ?
<AntdDraggableModal
visible={modalListVisible}
width={1000}
title={sMenuName}
onCancel={this.handleCancel}
onOk={this.handleOk}
>
<div id="mergeTable">
<Table
bordered
size="middle"
pagination={false}
columns={columns}
dataSource={data}
rowSelection={rowSelection}
scroll={{ x: scrollX, y: 'calc(40vh)' }}
/>
</div>
</AntdDraggableModal>
: ''
}
</div>
);
}
}
export default ModalList;