AddModal.jsx

import React, { useState, useEffect } from 'react';
import { Col, Form, Select, Input, Modal, Button, InputNumber, Space,Row,Spin} from 'antd';
import useFormTable from '@/useHooks/useFormTable';
import { dispatchHandle } from '@/utils/publicHandle';
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import { connect,useRequest } from 'umi';
import styles from '../index.less';
import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { DictBizType } from '@/utils/utils';
import AddVarModal from './AddVarModal';
import {fetchStandFilterIds} from "@/services/dict";

const { TextArea } = Input;
const { Option } = Select;

const AddModal = props => {
    const [form] = Form.useForm();
    const [changeOption, setChangeOption] = useState(null);
    const [varModalVisible, setVarModalVisible] = useState(false);
    const [datas, setDatas] = useState([]);
    const [paramsList, setParamsList] = useState([]);//参数列表
    const [currentMac, setCurrentMac] = useState(null);
    const [filterIds,setFilterIds] = useState([]);//过滤的ids
    const [isChangeMeter,setIsChangeMeter] = useState(false);
    const {
        dispatch,
        addVisible,
        modalType,
        dict: { dicProjectTypeList, dicParamsTypeList, dicUnitTypeList },
        opsInspection: { inspectionTermDetails, inspectionDetails },
        commonDevice: { meterTree },
        submitLoading,
        standardId,
        deviceTypeId,
        loadingDetail,
        typeIdLike,
    } = props;

      //peter new add
    const fetchStandFilterIdsRequest = useRequest(fetchStandFilterIds,{
        manual:true,
        onSuccess:(data) => {
            // console.log(`fetchStandFilterIdsRequest ids is:`,data);
            setFilterIds(data);
        }
    }); 

       //查过滤ids
    useEffect(() => {
        console.log(`standardId is:`,standardId);
        standardId && fetchStandFilterIdsRequest.run(standardId);
    }, [ standardId,props.opsInspection.inspectionRelationList ]);


    const getDetail = (inspectionTermDetails) => {
        console.log(`getDetail inspectionTermDetails is:`,inspectionTermDetails);
        if (modalType === 'edit') {
            console.log(`edit detail is:=======>`, {
                ...inspectionTermDetails
            });
            return {
                ...inspectionTermDetails
            }
        } else {
            return {}
        }
    };

    const handleSubmit = e => {
        e.preventDefault();
        form.validateFields().then((values) => {
            let newValues = {
                ...values,
                inspectionStandardId: inspectionDetails.id,//巡检标准id
                instrumentType: datas.id//仪表id(3.视频扫表；4.手工填报)类型才有
            };
            if (changeOption && (changeOption === 3 || changeOption === 4)) {
                let mspList = values.mspList;
            console.log(`modalType`, modalType,`isChangeMeter is:`,isChangeMeter);
                mspList = mspList && mspList.map(item => {
                    return {
                        parameterLower: item?.parameterLower,
                        parameterUpper:item?.parameterUpper,
                        parameterName: item?.parameterName || item?.name,//属性参数名
                        parameterUnit: item?.parameterUnit || item?.unitName,//属性单位
                        parmId:(( modalType === 'add' && isChangeMeter) || ( modalType === 'edit' && isChangeMeter)) ? item?.id : item?.parmId
                       // parmId: (modalType === 'edit' && !isChangeMeter ) ? item?.parmId : item?.id,//编辑状态拿动动返的 parmId 参数,新增为弹框里面选的，原设备属性ID 2.换了一个新的油仪表,则要拿新的油仪表ID,没换则用动动返的[edit状态下]
                    }
                })
                newValues = {
                     ...newValues,
                     mspList: mspList,
                     //表的属性ID
                     instrumentType: currentMac?.id, //仪表id(3.视频扫表；4.手工填报)类型才有,//如果是弹框里选的，则当前的id为油表id
                     instrumentTypeName:currentMac?.name,//仪表名称(3.视频扫表；4.手工填报)类型才有
                     //设备ID
                     equipmentId: currentMac?.parentDeviceId,//设备id(3.视频扫表；4.手工填报)类型才有,则当前的equipmentId为油表的父设备parentDeviceId
                }
            } else {
                delete newValues.instrumentTypeName;
            }
            //参数转换
            newValues = {
                ...newValues,
                mstpList: newValues.mspList
            };
            delete newValues.mspList;
            
            const payload = modalType === 'edit' ? { id: inspectionTermDetails.id, ...newValues } : newValues;
            console.log(`payload is`, payload)
            dispatchHandle(
                dispatch,
                'opsInspection/operation_service_m_standard_term_addEdit_patch',
                payload,
                () => {
                    props.handleClose();
                    props.onFinish();
                }
            )
        }).catch(() => {
        });
    };
    useEffect(() => {
        setTimeout(() => {
            form.resetFields();
        });
        let details = props.opsInspection.inspectionTermDetails;
        let mspList = details?.mspList || [];
        setCurrentMac({
            id: details?.instrumentType,//当前的油仪表ID，动动返回的
            parentDeviceId: details?.equipmentId,//父设备ID
            name:details?.instrumentTypeName,//仪表名称
        });
        //重设参数列表内容
        setDatas(mspList);
    }, [props.opsInspection.inspectionTermDetails?.id]);

    useUpdateEffect(() => {
        setIsChangeMeter(false);//重置，这个地方对于传msplist非常重要，因为之前没有状态更改过来
        if ( props.addVisible && modalType !== 'edit' || props.addVisible === false ) {
            dispatchHandle(dispatch, 'opsInspection/setModelsState', { inspectionTermDetails: {} });
        };
        setTimeout(() => {
            form.resetFields();
        });
    }, [addVisible]);

    useEffect(() => {
          console.log(`useUpdateEffect inspectionTermDetails changeOption is:`, changeOption);
        setChangeOption(inspectionTermDetails?.projectType);
        setTimeout(() => {
            form.resetFields(); 
        });
    }, [props.opsInspection.inspectionTermDetails?.id]);

 



    const getDictProject = (bizType) => {
        dispatchHandle(
            dispatch,
            'dict/common_service_t_dictionary_post_dicProjectTypeList',
            {
                bizType
            }
        )
    }
    const getDictParams = (bizType) => {
        dispatchHandle(
            dispatch,
            'dict/common_service_t_dictionary_post_dicParamsTypeList',
            {
                bizType
            }
        )
    }
    const getDictUnit = (bizType) => {
        dispatchHandle(
            dispatch,
            'dict/common_service_t_dictionary_post_dicUnitTypeList',
            {
                bizType
            }
        )
    }
    useEffect((payload = {}) => {
        if(addVisible){
            getDictProject(DictBizType.projectsType) // 项目类型
            getDictParams(DictBizType.paramsType)//参数项
            getDictUnit(DictBizType.unit)//单位
            dispatchHandle(dispatch, 'commonDevice/device_service_system_node_tree_meter_post', payload)
        };      
    }, [addVisible]);

    const ChangeOptions = (value) => {
        setChangeOption(value);
        //切换的时候清空仪表，切换时候，重置其表单项
        setCurrentMac({});
        form.setFieldsValue({
            instrumentTypeName: null,
            mspList: []
        });
        
    }
    const handleClose = () => {
        //清空reset
         dispatchHandle(dispatch, 'opsInspection/setModelsState', { inspectionTermDetails: {} });
        form.resetFields();
        props.handleClose();
    };
    const handleVar = () => {
        setVarModalVisible(true);
    }
    const handleCancel = () => {
        setVarModalVisible(false);
    }

//添加仪表的取值
    const getDatas = (datasValue,selectIdItem) => {
        console.log(`selectIdItem1111 is`, datasValue, `selectIdItem is:`, selectIdItem);
        const bigDatasValue = datasValue?.map(dataV => ({
            ...dataV,
            doesExist:true
        }));
        //根据动动的要求设置当前属性
        setDatas(bigDatasValue);//设置dataList内容
        setIsChangeMeter(true);//换了一个新的油仪表,则要拿新的油仪表ID
        

        form.setFieldsValue({
            instrumentTypeName: selectIdItem?.name,
            mspList: bigDatasValue
        });
    }
    const [inputValue, setInputValue] = useState();
    const onChangeValue = () => {
        setInputValue(datas[0].name);
    }

    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
    };

    const formTailLayoutInput = {
        labelCol: { span: 4 },
        wrapperCol: { span: 24 },
    };
    console.log(`datas1111 is`, datas, `modalType is:`, modalType);
    // console.log(`setCurrentMac is:`, currentMac, `currentMac is:`, currentMac);
    console.log(`loadingDetail is:`,loadingDetail);

    return (
        <div>
            <Modal
                width={990}
                getContainer={false}
                visible={addVisible}
                footer={null}
                closable={false}
                title={modalType === 'edit' ? '编辑点检项' : '添加点检项'}

            >
                    <Spin spinning={!!loadingDetail}>
                            <Form form={form} onFinish={handleSubmit} initialValues={ getDetail(inspectionTermDetails) }>
                                {/* <Col>
                                    <Form.Item style={{ display: 'none' }} label='id' {...formTailLayout}>
                                        {inspectionDetails.id}
                                    </Form.Item>
                                </Col> */}
                                <Col>
                                    <Form.Item name='checkProjectName' label='点检项目' {...formTailLayout} rules={[{ required: 'true', message: '请输入点检项目' }]}>
                                        <Input placeholder='请输入' />
                                    </Form.Item>
                                </Col>
                                <Col>
                                    <Form.Item name='projectType' label='项目类型' {...formTailLayout} rules={[{ required: 'true', message: '请选择项目类型' }]}>
                                        {/* <Select style={{ width: '100%' }} placeholder='请选择' onChange={val => { ChangeOptions(val) }}>
                                            {
                                                dicProjectTypeList.length !== 0 && dicProjectTypeList.map(item =>
                                                    <Option key={item.id} value={item.dicKey}>{item.dicValue}</Option>)
                                            }
                                        </Select> */}
                                        <Select style={{ width: '100%' }} placeholder='请选择' onChange={val => { ChangeOptions(val) }} allowClear>
                                                <Option key={1} value={1}>检查</Option>
                                                <Option key={2} value={2}>操作</Option>
                                                <Option key={3} value={3}>视频扫表</Option>
                                                <Option key={4} value={4}>手工填报</Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                                <Col>
                                    {
                                        ((changeOption === 1)
                                            && <Form.Item name='operationItem' label='检查内容' {...formTailLayout} >
                                                <TextArea rows='3' placeholder='请输入' />
                                            </Form.Item>) ||
                                        ((changeOption === 2)
                                            && <Form.Item name='operationItem' label='操作步骤' {...formTailLayout} >
                                                <TextArea rows='3' placeholder='请输入' />
                                            </Form.Item>) ||
                                        (
                                            (changeOption === 3 || changeOption === 4) && <Form.Item name='instrumentTypeName' label='选择仪表' {...formTailLayout} className={ styles.meterSelect } rules={[{ required: 'true', message: '请选择项目类型' }]}>
                                                <Input placeholder='请选择' readOnly addonAfter={ <Button type='primary' onClick={ handleVar } >选择仪表</Button>}   />
                                            </Form.Item>
                                        )
                                    }
                                
                                </Col>
                                <Col style={{ maxHeight:window.innerWidth > 1400 ? 550 : 450 ,overflowY:'auto'}}>
                                    {
                                        (((changeOption === 3) || (changeOption === 4 )) &&
                                            <Form.List name="mspList" key = { Math.random().toFixed(2) } >
                                                {(fields, { add, remove }) => (
                                                    <>
                                                        <Row style={{ marginBottom: '10px' }}>
                                                            <Col span = { 6 } style={{paddingLeft:40,paddingRight:16,textAlign:'right'}}>点检参考值(参数项)：</Col>
                                                            <Col span = { 6 }>上限：</Col>
                                                            <Col span = { 6 }>下限：</Col>
                                                            <Col span = { 6 }>单位</Col>
                                                        </Row>
                                                    {
                                                        fields.map(field => (
                                                            <div key={field.key}>
                                                                <Row key={field.key} align="baseline" style={{display: 'flex' }}>
                                                                    <Col span={6} style={{paddingLeft:40,paddingRight:16,textAlign:'right'}}>
                                                                        {
                                                                        <span>
                                                                            { datas && datas[field.key]?.name ||  datas && datas[field.key]?.unitName || datas && datas[field.key]?.parameterName || '暂无参数' }
                                                                        </span> || <Form.Item
                                                                        {...field}
                                                                            name={[field.name, 'parameterName']}
                                                                            fieldKey={[field.fieldKey, 'parameterName']}
                                                                        
                                                                        style={{ marginBottom: '15px' }}
                                                                        rules={[{ required: true, message: '输入项不能为空' }]}
                                                                        >
                                                                            <Select placeholder="参数">
                                                                                {
                                                                                    dicParamsTypeList.length !== 0 && dicParamsTypeList.map(item =>
                                                                                        <Option key={item.id} value={item.dicValue}>{item.dicValue}</Option>)
                                                                                }
                                                                            </Select>
                                                                    </Form.Item>
                                                                    }
                                                                    </Col>
                                                                    <Col span={6}>
                                                                        <Form.Item
                                                                        {...field}
                                                                        name={[field.name, 'parameterUpper']}
                                                                        fieldKey={[field.fieldKey, 'parameterUpper']}
                                                                        style={{ marginBottom: '15px' }}
                                                                        // rules={[{ required: true, message: '输入项不能为空' }]}
                                                                    >
                                                                        <InputNumber min={0} step={0.01} style={{ width: '90%' }} placeholder='请输入' />
                                                                    </Form.Item>
                                                                    </Col>
                                                                    <Col span={6}>
                                                                        <Form.Item
                                                                        {...field}
                                                                        name={[field.name, 'parameterLower']}
                                                                        fieldKey={[field.fieldKey, 'parameterLower']}
                                                                            style={{ marginBottom: '15px' }}
                                                                            // rules={[{ required: true, message: '输入项不能为空' }]}
                                                                    >
                                                                        <InputNumber min={0}  step={0.01} style={{ width: '90%' }} placeholder='请输入' />
                                                                    </Form.Item>
                                                                    </Col>
                                                                    <Col span={6}>
                                                                            {
                                                                        <span> { datas && datas[field.key]?.unitName || datas && datas[field.key]?.parameterUnit || '暂无单位' } </span> || <Form.Item
                                                                            {...field}
                                                                            name={[field.name, 'parameterUnit']}
                                                                            fieldKey={[field.fieldKey, 'parameterUnit']}
                                                                                style={{ marginBottom: '15px' }}
                                                                            >
                                                                                <Select placeholder="单位">
                                                                                    {
                                                                                        dicUnitTypeList.length !== 0 && dicUnitTypeList.map(item =>
                                                                                            <Option key={item.id} value={item.id}>{item.dicValue}</Option>)
                                                                                    }
                                                                                </Select>
                                                                            </Form.Item>
                                                                    }
                                                                      <CloseCircleOutlined style={{ fontSize: '20px', color: 'red',margin:'2px 0 0 10px',verticalAlign:'middle' }} onClick={() => remove(field.name)} />
                                                                      <span style={{marginLeft:20}}>
                                                                        {/* {JSON.stringify(datas && datas[field.key])} */}
                                                                      { datas && datas[field.key]?.doesExist === true ? '' : <span style={{ color:'#ff3300',display:'inline-block',marginTop:5,verticalAlign:'middle'}}>该属性不存在</span> }</span>
                                                                    </Col>
                                                                </Row>
                                                            </div>
                                                        ))}
                                                        {/* {
                                                            changeOption === 3 && <Form.Item style={{ textAlign: 'center' }} >
                                                                <Button style={{ width: '85%' }} type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                                    添加
                                                                </Button>
                                                            </Form.Item>
                                                        } */}
                                                    </>
                                                )}
                                            </Form.List>
                                        )
                                    }
                                </Col>
                            </Form>
                            <div style={{ textAlign: 'end' }}>
                                <Button onClick={handleClose} style={{ marginRight: '20px' }}>取消</Button>
                                <Button type='primary' onClick={handleSubmit} loading ={submitLoading}>确定</Button>
                            </div>
                    </Spin>
                <AddVarModal
                    addVarVisible={varModalVisible}
                    handleCancel={handleCancel}
                    getDatas={getDatas}
                    setCurrentMac = { setCurrentMac }
                    filterIds = {filterIds}
                    deviceTypeId={deviceTypeId}
                    loadingDetail = { loadingDetail }
                    typeIdLike = { typeIdLike }
                    changeOption = { changeOption }
                />
            </Modal>
        </div>
    )
}

export default connect(({ opsInspection, dict, commonDevice, loading }) => ({
    opsInspection, dict, commonDevice,
    loading: loading.models.opsInspection,
    submitLoading:loading.effects['opsInspection/operation_service_m_standard_term_addEdit_patch']
}))(AddModal);