antdCheckBox联动组件

本文详细解析了一个基于React实现的设备故障添加模态框组件代码,阐述了如何使用Ant Design UI库构建复杂表单,以及如何通过状态管理和自定义函数实现动态表单字段的更新和数据绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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进行两次刷新

/*** 必要文件 jquery.js jquery.AxInputChecked.js 点击联动 input checkbox *************************************模板格式*********************************************** <div id='ViewSetS'> <table cellspacing=0 cellpadding=0 border=0 class="yidong"> <!--1--> <tr><td class="qx qx2 wid1"><input name="" type="checkbox" value="1" id='s1' class="yd_dx" />一级响应</td> <td class="qx qx1"> <label id='v1'> <table border=0 cellspacing=0 cellpadding=0> <!--2--> <tr> <td class="qx qx2 wid1"><input name="" id='s1-1' value='1-1' type="checkbox" class="yd_dx" />车贷业务</td> <td class="qx"> <label id='v1-1'> <table border=0 cellspacing=0 cellpadding=0> <tr> <td class="qx qx1 wid3"> <ul> <li><input name="" type="checkbox" id='s1-1-1' value="1-1-1" class="yd_dx"/><font class="l">担保费范围</font> <input name="" type="text" class="yd_input"/><font class="l" name="" type="text" class="yd_input" /></li> <li><input name="" type="checkbox" id='s1-1-2' value="1-1-2" class="yd_dx"/>担保费范围</li> <li><input name="" type="checkbox" id='s1-1-3' value="1-1-3" class="yd_dx" />删除</li> <li><input name="" type="checkbox" id='s1-1-4' value="1-1-4" class="yd_dx" />添加</li> <li><input name="" type="checkbox" id='s1-1-5' value="1-1-5" class="yd_dx"/>编辑</li> <li><input name="" type="checkbox" id='s1-1-6' value="1-1-6" class="yd_dx"/>删除</li> </ul> </td> </tr> </table> </label> </td> </tr> </table> </div> ************************************************************************************************* @param value input[type='checkbox'] 的值 多个用',' 分开 程序会找到值自动选中 @param inputIdString input[type='checkbox']前缀 格式如 s1-1-1 组合为 inputIdString+当前input['type=checkbox']值 @param LableIdString label 表标前缀 这个用于多个分级 如 当前为第一级中有 input[type='checkbox'] value = 1 如果下面有级 则在此inpu 下应该加入 <label id='v1'> 以此类推 调用方式 $("#ViewSetS").AxInputChecked(value:'',inputIdString:'s',LableIdString:'v'); **/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值