ai-admin/src/components/OrgManager/index.js

import {useEffect,useState} from 'react';
import { useSelector } from 'react-redux'
import { Table,Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
import { DownOutlined,PlusOutlined } from '@ant-design/icons';
import AddSubOrg from './AddSubOrg';
import './index.less';
import apiObj from '@api/index';
import OrgContext from './org-context';

const {post,api,xPost} = apiObj;
const { Option } = Select;
function OrgManager(){
    useEffect(() => {
        //监听resize事件
        setTableHt(window.innerHeight-260);
        window.addEventListener('resize',()=>{
            setTableHt(window.innerHeight-260);
        });
        //刷新列表
        getTableData();
        //解绑事件
        return function clear(){
            window.removeEventListener("resize");
        }
    },[]);

    const [dataSource, setDataSource] = useState([]);   //列表数据
    const [orgDetail, setOrgDetail] = useState([]);   //组织详情数据
    const [tableHt, setTableHt] = useState(300);   //表格滚动高度
    const [visible,setVisible] = useState(false);   //删除禁用确认弹窗显示
    const [addVisible,setAddVisible] = useState(false);         //新增页面显示
    const [confirmLoading, setConfirmLoading] = useState(false);
    //弹窗类型：1删除 2有子组织、用户删除 3禁用 4有子组织、用户禁用 5重置密码
    const [modalType,setModalType] = useState(1);
    const [operId,setOperId] = useState('');    //当前操作的组织id
    const [orgId,setOrgId] = useState('');      //上级组织id
    const [orgName,setOrgName] = useState('');      //上级组织名称，新增修改用
    //从state中取出状态、类型列表
    const staticInfo =useSelector(state => {
        return state.staticInfo;
    });
    const {hisTypeList,statusList} = staticInfo;

    const tipText={
        1:'确定要删除该组织？',
        2:'当前组织内可能包含子组织或其相关用户，删除后所包含信息将一并被删除',
        3:'确定要禁用该组织？',
        4:'当前组织内可能包含子组织或其相关用户，禁用后所包含信息将一并被禁用',
        5:'确定要重置该组织密码？',
    };

    //获取表格数据
    function getTableData(param={}){
        post(api.getHospitalListInfo,param).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                setOrgId(data[0]?data[0].hospitalId:'');
                setOrgName(data[0]?data[0].hospitalName:'')
                setDataSource(data);
            }

        })
    }
    //启用/禁用
    function enable(flag,id) {
        const param = {HospitalId:id||operId,status:flag};
        xPost(api.disableHospital,param).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setVisible(false);
                message.success((flag?'启用':'禁用')+"成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    //重置密码
    function onResetPsd(){
        const param = {HospitalId:operId};
        xPost(api.resetPassword,param).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setVisible(false)
                message.success("重置成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    //删除
    function onDelete(){
        const param = {HospitalId:operId};
        xPost(api.deleteHospital,param).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setVisible(false);
                message.success("删除成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    //显示弹窗
    function showModal(type,id){
        setModalType(type);
        setOperId(id);
        setVisible(true);
    }
    //弹窗确认事件
    function handleOk(){
        if("1,2".indexOf(modalType)>-1){
            onDelete();
        }else if("3,4".indexOf(modalType)>-1){
            enable(0);
        }else if(modalType===5){
            onResetPsd();
        }

    }
    //弹窗取消
    function handleCancel(){
        setVisible(false);
        setAddVisible(false);
    }
    //新增子组织弹窗
    function showAddOrg(){
        setAddVisible(true);
    }
    function getOrgDetail(id,type){
        xPost(api.getHospitalById,{HospitalId:id,type}).then((res)=>{
            const {data,code}=res.data;
            if(code===200){
                console.log(data)
                structDetail(data);
                //setOrgDetail(res.data.data);
            }else{
                message.warning(res.data.msg||'获取详情失败')
            }
        });
    }
    function structDetail(data){
        let obj = Object.assign({},data);
        //obj.addHospitalUserVO=Object.assign({},data.getHospitalUserDTO);
        //obj.softwares=Object.assign({},data.loginUserMenuResourceTree);
    }
    //修改子组织
    function editSubOrg(id,type){
        getOrgDetail(id,type);
        setAddVisible(true);
    }
    //保存
    function addSubOrg(formData){
        console.log('保存参数：',formData);
        const param = formData;
        post(api.addHospital,param).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setAddVisible(false);
                message.success("添加成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    function goBack(){
        setAddVisible(false);
    }
    //表格渲染
    function RenderTable(){
        const columns = [
            { title: '组织机构层级', dataIndex: 'hospitalName', key: 'hospitalName' },
            { title: '类型',width:150,  key: 'type',render:(row)=>{
                    if(row.children){
                        return '-'
                    }else{
                        return row.typeName;
                    }
                } },
            { title: '状态',width:120,  key: 'status',render:(row)=>{
                    if(row.children){
                        return '-'
                    }else{
                        return (<span className={ (row.status==='1')?'Enable':'Disable' }>{row.statusName}</span>);
                    }
                } },
            { title: '创建时间',width:240, dataIndex: 'gmtCreate', key: 'gmtCreate' },
            { title: '操作',width:240, key: 'operation', render: (row) => {
                    //console.log(21,row)
                    if(row.rootFlag){
                        return '-'
                    }
                    const menu = (
                        <Menu>
                            <Menu.Item key="0" onClick={()=>showModal(5,row.hospitalId)}>重置密码</Menu.Item>
                            <Menu.Item key="1" onClick={()=>showModal((row.hasUserFlag||row.hasHospitalFlag?2:1),row.hospitalId)}>删除</Menu.Item>
                        </Menu>
                    );
                    return (<Space size="middle">
                        <a onClick={()=>editSubOrg(row.hospitalId,row.type)}>修改</a>
                        {row.status==='1'?(<a onClick={()=>showModal(row.hasUserFlag||row.hasHospitalFlag?4:3,row.hospitalId)}>禁用</a>):(<a onClick={()=>enable(1,row.hospitalId)}>启用</a>)}
                        <Dropdown overlay={menu} trigger={['click']}>
                            <a className="ant-dropdown-link">
                                更多 <DownOutlined />
                            </a>
                        </Dropdown>
                    </Space>) }},
        ];
        return (
            <Table
                scroll={{ y: tableHt }}
                pagination={false}
                className="components-table-demo-nested"
                rowKey={record => record.hospitalId}
                expandable={{defaultExpandAllRows:true}}
                columns={columns}
                dataSource={dataSource}
            />
        )
    }
    //筛选项渲染
    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        getTableData(values);
        console.log('筛选项:',values);
    };
    const onReset = () => {
        form.resetFields();
        getTableData();
    };
    if(addVisible){
        return (
                <OrgContext.Provider value={{orgId,orgName,hisTypeList,save:addSubOrg}}>
                    <AddSubOrg back={goBack}/>
                </OrgContext.Provider>
        )
    }
    return (
        <div className='wrapper'>
            <div className="filter-box">
                <Form form={form} name="control-hooks" onFinish={onFinish}>
                    <Row gutter={24}>
                        <Col span={5} key={0}>
                            <Form.Item name="hospitalName" label="组织名称">
                                <Input placeholder='组织名称'/>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={1}>
                            <Form.Item name="type" label="类型">
                                <Select
                                    allowClear
                                >
                                    {hisTypeList.map((item)=>{
                                        return (
                                            <Option value={item.name}  key={item.name}>{item.val}</Option>
                                        )
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item name="status" label="当前状态">
                                <Select
                                    allowClear
                                >
                                    {statusList.map((item)=>{
                                        return (
                                            <Option value={item.name}  key={item.name}>{item.val}</Option>
                                        )
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={9} key={3}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className="table">
                <div className="table-header">
                    <h2 className="table-title">组织管理</h2>
                    <Button type="primary" icon={<PlusOutlined />} onClick={()=> showAddOrg()}>新增子组织</Button>
                </div>
                <RenderTable />
            </div>
            <Modal
                title="提示"
                okText='确定'
                cancelText='取消'
                width={400}
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <p>{tipText[modalType]}</p>
            </Modal>
        </div>
    )
}

export default OrgManager;