OperationalService/web/client/src/sections/service/components/pushModal.jsx

import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Form } from "@douyinfe/semi-ui";
import { IconAlertCircle } from '@douyinfe/semi-icons';


function pushModal (props) {
    const {
        close,
        cancel,
        visible,
        dispatch,
        pepList,
        actions,
        adminEdit,//是否是编辑
        editObj,
    } = props;
    const { install } = actions;
    const form = useRef();//表单
    const [disablePeople, setDisablePeople] = useState(true); //页码信息
    const [peopleList, setPeopleList] = useState([]); //人员List
    const [departmentId, setDepartmentId] = useState(); //部门id
    const [peopleId, setPeopleId] = useState(); //人员id
    //初始化
    useEffect(() => {
        if (editObj.id) {
            let departmentList = []
            for (let i = 0; i < pepList.length; i++) {
                if (pepList[i].id == editObj.departments[0].id) {
                    departmentList = pepList[i].users
                }
            }
            setPeopleList(departmentList)
            setDepartmentId(editObj.departments[0].id)
            setPeopleId(editObj.pepUserId)
            setDisablePeople(false)
        }
    }, []);

    function handleOk () {
        //点击弹框确定  右边按钮
        form.current
            .validate()
            .then((values) => {
                if (adminEdit) {
                    dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then(
                        dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                            if (res.success) {
                                close();
                            }
                        })
                    )
                }
                else {
                    dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                        if (res.success) {
                            close();
                        }
                    })
                }
            })
    }
    function handleCancel () {
        cancel();
        //点击弹框取消  左边按钮
    }
    return (
        <>
            <Modal
                title="管理员设置"
                okText="确定"
                cancelText="取消"
                visible={visible}
                onOk={handleOk}
                width={607}
                onCancel={handleCancel}
            >
                <div style={{ margin: "0px 25px" }}>
                    <div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
                        <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div>
                    </div>
                    <Form
                        allowEmpty
                        labelPosition="left"
                        labelAlign="right"
                        labelWidth="90px"
                        onValueChange={(values, field) => {
                            for (var key in field) {
                                if (key == 'department') {
                                    if (values.department >= 0) {
                                        let departmentList = []
                                        for (let i = 0; i < pepList.length; i++) {
                                            if (pepList[i].id == values.department) {
                                                departmentList = pepList[i].users
                                            }
                                        }
                                        setPeopleList(departmentList)
                                        setDisablePeople(false)
                                        form.current.setValue('pepUserId', undefined);
                                    }
                                    else {
                                        setPeopleList([])
                                        setDisablePeople(true)
                                        form.current.setValue('pepUserId', undefined);
                                    }
                                }
                            }
                        }}
                        getFormApi={(formApi) => (form.current = formApi)}
                    >
                        <div>
                            <Form.Select
                                label="选择部门:"
                                field="department"
                                placeholder="请选择部门"
                                style={{ width: 417 }}
                                rules={[{ required: true, message: "请选择部门" }]}
                                initValue={departmentId || ""}
                                showClear
                            >
                                {
                                    pepList.map((item, index) => {
                                        return (
                                            <Form.Select.Option key={index} value={item.id}>
                                                {item.name}
                                            </Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </div>
                        <div>
                            <Form.Select
                                label="选择人员:"
                                field="pepUserId"
                                placeholder="请选择人员"
                                style={{ width: 417 }}
                                rules={[{ required: true, message: "请选择人员" }]}
                                initValue={peopleId || ""}
                                showClear
                                disabled={disablePeople}
                            >
                                {
                                    peopleList.map((item, index) => {
                                        return (
                                            <Form.Select.Option key={item.id} value={item.id}>
                                                {item.name}
                                            </Form.Select.Option>
                                        )
                                    })
                                }
                            </Form.Select>
                        </div>
                    </Form>
                </div>
            </Modal>
        </>
    );
}
function mapStateToProps (state) {
    const { auth, global, members } = state;
    return {
        //   loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        //   members: members.data,
    };
}

export default connect(mapStateToProps)(pushModal);