import React, {Component} from "react";
import {Button, Card, Row, Form, Col, Input, Modal, Select, DatePicker, Radio, Checkbox, Tag} from "antd";
import Context from "../../../../../../app/context";
import {connect} from "alt-react";
import {brotliDecompress} from "zlib";
import FaultEventStore from "../../../../../../store/FaultEventStore";
import FaultEventAction from "../../../../../../actions/FaultEventAction";
import {getDataItemAsOption, getDataItemAsList, getStationAsOption} from "../../../../../../app/utils";
const Option = Select.Option;
import moment from "moment";
import DataDictStore from "../../../../../../store/DataDictStore";
const FormItem = Form.Item;
const {TextArea} = Input;
class FaultAddModal extends Component {
constructor(props) {
super(props);
this.state = {
subListMap: new Map()
};
}
//所属中心 对应子专业
selectCheck = (center, subProjectList) => {
let {subListMap} = this.state;
const {form} = this.props;
let centerList = [];
subListMap.forEach((value, key) => {
centerList.push(key);
})
if (centerList.indexOf(center) != -1) {
subListMap.delete(center);
} else {
if (subProjectList.length > 0) {
let subs = [];
centerList.push(center);
subs.push(subProjectList[0]);
subListMap.set(center, subs);
}
}
let centList = [];
subListMap.forEach((value, key) => {
centList.push(key);
})
setTimeout(()=>{
form.setFieldsValue({
"center": centList,
["subject[" + (() => center)() + "]"]: subListMap.get(center)
})
},0);
this.setState({
subListMap
})
}
//所属专业
selectSubCheck = ( center, sub) => {
const {form} = this.props;
let {subListMap} = this.state;
let centerList = [];
subListMap.forEach((value, key) => {
centerList.push(key);
})
if (centerList.length > 0 && centerList.indexOf(center) != -1) {//有值
if (subListMap.get(center).length > 0 && subListMap.get(center).indexOf(sub) != -1) {
let subList = subListMap.get(center);
let keys = subList.filter(e => e != sub);
if (keys.length > 0) {
subListMap.set(center, keys);
} else {
subListMap.delete(center);
}
} else if (subListMap.get(center).length > 0 && subListMap.get(center).indexOf(sub) == -1) {
let subList = subListMap.get(center);
subList.push(sub);
subListMap.set(center, subList);
} else {
//新加入
let subList = [];
subList.push(sub);
subListMap.set(center, subList);
}
} else {
let subs = [];
subs.push(sub);
subListMap.set(center, subs);
}
let centList = [];
subListMap.forEach((value, key) => {
centList.push(key);
})
setTimeout(()=>{
form.setFieldsValue({
"center": centList,
["subject[" + (() => center)() + "]"]: subListMap.get(center)
})
},0);
this.setState({
subListMap
})
}
render() {
let divStyle = {
paddingLeft: "2px",
paddingRight: "2px",
width: "100%",
textAlign: "center",
lineHeight: "50px",
height: '50px',
};
let rowStyle = {
paddingLeft: "2px",
paddingRight: "2px",
width: "100%",
borderTop: "1px solid #ccc",
borderLeft: "1px solid #ccc",
borderRight: "1px solid #ccc"
};
let rowTopStyle = {
paddingLeft: "2px",
paddingRight: "2px",
width: "100%",
borderTop: "1px solid #ccc",
borderLeft: "1px solid #ccc",
borderRight: "1px solid #ccc"
};
let rowBottomStyle = {
paddingLeft: "2px",
paddingRight: "2px",
width: "100%",
border: "1px solid #ccc"
};
let radiusStyle = {
verticalAlign: "middle",
textAlign: "center",
borderRadius: "0",
width: "99%",
};
let formItemStyle = {
textAlign: "center",
marginBottom: "0px"
};
let colStyle = {
borderRight: "1px solid #ccc",
lineHeight: "50px",
height: "50px"
};
let colRightStyle = {
lineHeight: "50px",
height: "50px"
}
const componentWidth = {
width: "95%"
};
const unShowFormItemStyle = {
textAlign: "center",
marginBottom: "0px",
display: "none"
};
const radioStyle = {
display: "inline",
height: "30px",
lineHeight: "30px"
};
let textAreaStyle = {
verticalAlign: "middle",
textAlign: "left",
borderRadius: "0",
width: "99%",
};
const unShowDiv = {
paddingLeft: "2px",
paddingRight: "2px",
width: "100%",
textAlign: "center",
lineHeight: "36px",
display: "none"
};
let {onCancel} = this.props;
let {isNotFault, initFaultCategory, isShowHappenPlace,subListMap} = this.state;
const {getFieldDecorator} = this.props.form;
let centList = [];
subListMap.forEach((value, key) => {
centList.push(key);
})
let subCenterList = DataDictStore.getState().recordDetail.get("data").toArray();
let subCenter = [];
for (let i = 0; i < subCenterList.length; i++) {
if (!subCenterList[i].isParent) {
//无子选项
continue;
}
let style = rowTopStyle;
if (i == subCenterList.length - 1) {
style = rowBottomStyle;
}
let subProjectList = subCenterList[i].subType == null ? [] : subCenterList[i].subType.split(",");
subCenter.push(
<Row style={style}>
<Col span={5} style={colStyle}>
<Checkbox key={i} value={subCenterList[i].paramName}
onChange={() => this.selectCheck(subCenterList[i].paramName, subProjectList)}>
{subCenterList[i].paramName}
</Checkbox>
</Col>
<Col span={19} style={{
textAlign: "left",
padding: "2px",
marginBottom: "0px",
lineHeight: "50px",
height: "50px"
}}>
{getFieldDecorator(`subject[${subCenterList[i].paramName}]`, {
initialValue: subListMap.get(subCenterList[i].paramName),
rules: [
{
required: fieldMapping.subject == "true",
message: "不能为空"
}
]
})
(
<Checkbox.Group style={{width: "100%"}}
>
{
subCenterList[i].subType == null ? '' : subCenterList[i].subType.split(",").map((item, index) => {
return (
<Col span={4}>
<Checkbox key={item} value={item}
onChange={() => this.selectSubCheck( subCenterList[i].paramName, item)}
>
{item}
</Checkbox>
</Col>
);
})
}
</Checkbox.Group>
)}
</Col>
</Row>
);
}
return (
<Modal
visible={true}
title="添加设备故障/事件"
onCancel={onCancel}
footer={null}
width={1000}
>
<Form>
<Card style={{backgroundColor: "#FAFAFA"}}>
<Row style={rowStyle}>
<Col span={5} style={colStyle}>
<div style={divStyle}> 所属中心</div>
</Col>
<Col span={19} style={colRightStyle}>
<div style={divStyle}> 所属专业</div>
</Col>
</Row>
<Row style={rowStyle}>
<Col span={24}>
<FormItem style={{
padding: "2px",
textAlign: "center",
marginBottom: "0px"
}}>
{getFieldDecorator("center", {
initialValue: centList,
rules: [
{
required: fieldMapping.center == "true",
message: "不能为空"
}
]
})(
<Checkbox.Group style={{width: "100%"}}>
{subCenter}
</Checkbox.Group>
)}
</FormItem>
<FormItem
style={{
textAlign: "left",
padding: "2px",
marginBottom: "0px",
lineHeight: "50px",
height: "50px"
}}
>
</FormItem>
</Col>
</Row>
</Card>
</Form>
</Modal>
);
}
}
const FaultAddModalForm = Form.create()(FaultAddModal);
export default FaultAddModalForm;
记录一下,非常坑的setFieldsValue,setFieldsValue设置值无法强制刷新页面值,需要加setTimeOut进行两次刷新