ViewModal.jsx

import React, { useState,useEffect } from 'react';
import { TreeSelect, Modal, Form, Input, Button, Select, Row, Col } from 'antd';
import { connect } from 'umi';
import { dispatchHandle } from "@/utils/publicHandle";
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import { getChildById } from '@/utils/common';
import { dicFindUtils,DictBizType,ApproveType,convertFieldToNum, } from '@/utils/utils';
const { Option } = Select;
const { TreeNode } = TreeSelect;

const ViewModal = (props) => {
    const [form] = Form.useForm();
    const [have, setHave] = useState(undefined);
    const [initDetail, setInitDetail] = useState({});
    const {
        viewVisible,
        modalType,
        dispatch,
        InfoModel: { infoRuleDetail },
        user: { userTree },
        dict: {
            dicTotalsList
        }
    } = props;
   const  postTypeArr = dicTotalsList && dicFindUtils(dicTotalsList, DictBizType.postType) || []; // 岗位数据

    useUpdateEffect(() => {
        form.resetFields();

    }, [props.InfoModel.infoRuleDetail.id]);

    const handleClose = () => {
        props.handleClose();
    }
    const selectTree = value => {
        setHave({ value });
    };
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
    };
    const formItemLayout2 = {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
    };
    let allUser = [];
     const initTreeData = (tree) => {
        if (!tree || tree?.length === 0) return;
        return tree && tree.length && tree.map(item => {
            const users = item?.userList || []
            let children = initTreeData(item.subList);
            if (users.length > 0) {
                const userList = users.map(user => ({
                    title: user?.name,
                    key: `user-${user?.id}`,
                    id: user?.id,
                    avatarUrl: user?.avatarUrl,
                    selectable: true
                }))
                children = children?.length > 0 ? children.concat(userList) : userList
                allUser = allUser.concat(item.userList)
            }
            return {
                title: item?.name,
                key: item?.id,
                id: item?.id,
                children,
                //selectable: false
            }
        })
    }
    console.log(`infoRuleDetail is`, infoRuleDetail);
    useEffect(() => {
        const {
            user: {
                userTree
            },
            
        } = props;
        const newTree = initTreeData(userTree);

        let allNodes = [];
        const areaIdAndSub = infoRuleDetail?.areaIdAndSub || [];
        const users = infoRuleDetail?.users || [];
        const roleIds = infoRuleDetail?.roleIds || [];
        allNodes = [
            ...areaIdAndSub,
            ...users
        ];
        const areaIdAndSubArr = [], roleNameArr = [];
        console.log(`newTree is:`, newTree);
        allNodes && allNodes.forEach(item => {
            let nodeResult = getChildById(newTree, item);
            areaIdAndSubArr.push(nodeResult?.title);
        });
        roleIds && roleIds.forEach(item => {
            let nodeResult = getChildById(postTypeArr, item);
            roleNameArr.push(nodeResult?.dicValue);
        });

        let detail = {
            ...infoRuleDetail,
            areaIdAndSubArr,
            roleNameArr
        };
        console.log(`after detail is:`, detail);
        setInitDetail(detail);
    }, [infoRuleDetail]);
    return (
        <Modal
            title='查看'
            visible={viewVisible}
            footer={null}
            onCancel={handleClose}
        >
            <Form form={form}>
                <Row>
                    <Col span={24}>
                        <Form.Item  label='通知规则名称' {...formItemLayout} rules={[{ required: true, message: `请选择通知规则` }]}>
                            {initDetail?.ruleName}
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <Form.Item label='选择发布平台' {...formItemLayout} rules={[{ required: true, message: `请选择发布平台` }]}>
                            {initDetail?.publishPlatformStr }
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <Form.Item label='信息通知对象' {...formItemLayout} rules={[{ required: true, message: `请选择信息通知对象` }]}>
                            {initDetail?.areaIdAndSubArr?.join(',') || '暂无'}
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <Form.Item label='信息通知岗位' {...formItemLayout} rules={[{ required: true, message: `请选择信息通知岗位` }]}>
                            {initDetail?.roleNameArr?.join(',') || '暂无'}
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}
export default connect(({ InfoModel,user,dict }) => ({
    InfoModel,user,dict
}))(ViewModal);