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

import {useEffect,useState} from 'react';
import { useDispatch,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 utils from '@utils/index';

const {post,api,xPost} = apiObj;
const { handleResponse } = utils;
const { Option } = Select;
function OrgManager(){
    useEffect(() => {
        getFilterList();
        getTableData();
    },[]);

    const [dataSource, setDataSource] = useState([]);
    const [typeList,setTypeList] = useState([]);
    const [visible,setVisible] = useState(false);
    const [addVisible,setAddVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    //弹窗类型：1删除 2有子组织删除 3有用户删除 4禁用 5有子组织禁用 6有用户禁用 7重置密码
    const [modalType,setModalType] = useState(1);
    const [operId,setOperId] = useState('');
    const tipText={
        1:'确定要删除该组织？',
        2:'当前组织存在子组织，删除后子组织将一并被删除',
        3:'当前组织或子组织存在用户，删除后用户将一并被删除',
        4:'确定要禁用该组织？',
        5:'当前组织存在子组织，禁用后子组织将一并被禁用',
        6:'当前组织或子组织存在用户，禁用后用户将一并被禁用',
        7:'确定要重置该组织密码？',
    };

    //获取筛选下拉数据
    function getFilterList(){
        post(api.getManagerBoxInfo).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                setTypeList(data["类型"]);
            }
        })
    }
    //获取表格数据
    function getTableData(param={}){
        post(api.getHospitalListInfo,param).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                setDataSource(data);
            }

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

    }
    //弹窗取消
    function handleCancel(){
        setVisible(false);
    }
    //新增子组织弹窗
    function showAddModal(){
        setAddVisible(true);
    }
    //表格渲染
    function RenderTable(){
        const columns = [
            { title: '组织机构层级', dataIndex: 'hospitalName', key: 'hospitalName' },
            { title: '类型',  key: 'type',render:(row)=>{
                    if(row.children){
                        return '-'
                    }else{
                        return row.type;
                    }
                } },
            { title: '状态',  key: 'status',render:(row)=>{
                    if(row.children){
                        return '-'
                    }else{
                        return row.status;
                    }
                } },
            { title: '创建时间', dataIndex: 'gmtCreate', key: 'gmtCreate' },
            { title: '操作', key: 'operation', render: (row) => {
                //console.log(21,row)
                if(row.children){
                    return '-'
                }
                const menu = (
                    <Menu>
                        <Menu.Item key="0" onClick={(row)=>showModal(7,row.hospitalId)}>重置密码</Menu.Item>
                        <Menu.Item key="1" onClick={(row)=>showModal(1,row.hospitalId)}>删除</Menu.Item>
                    </Menu>
                );
                return (<Space size="middle">
                    <a>修改</a>
                    {row.status==='1'?(<a onClick={()=>showModal(4,row.hospitalId)}>禁用</a>):(<a onClick={()=>enable(row,1)}>启用</a>)}
                    <Dropdown overlay={menu} trigger={['click']}>
                        <a className="ant-dropdown-link">
                            更多 <DownOutlined />
                        </a>
                    </Dropdown>
                </Space>) }},
        ];
        return (
            <Table
                className="components-table-demo-nested"
                rowKey={record => record.hospitalId}
                columns={columns}
                dataSource={dataSource}
            />
        )
    }
    //筛选项渲染
    const [form] = Form.useForm();
    const onFinish = (values: any) => {
        getTableData(values);
        console.log('筛选项:',values);
    };
    const onReset = () => {
        form.resetFields();
        getTableData();
    };

    return (
        <div className='container'>
            <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
                                >
                                    <Option value="">全部</Option>
                                    {/*{typeList.map((item)=>{
                                        return (
                                            <Option value={item.value}>{item.name}</Option>
                                        )
                                    })}*/}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={5} key={2}>
                            <Form.Item name="status" label="当前状态">
                                <Select
                                    allowClear
                                >
                                    <Option value="">全部</Option>
                                    <Option value="1">启用</Option>
                                    <Option value="0">禁用</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">
                    <Breadcrumb>
                        <Breadcrumb.Item>组织管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <Button type="primary" icon={<PlusOutlined />} onClick={e => showAddModal('新增子组织', true)}>新增子组织</Button>
                </div>
                <RenderTable />
            </div>
            <Modal
                title="提示"
                okText='确定'
                cancelText='取消'
                width={400}
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <p>{tipText[modalType]}</p>
            </Modal>
            <Modal
                title="提示"
                okText='确定'
                cancelText='取消'
                width={690}
                visible={addVisible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <AddSubOrg />
            </Modal>
        </div>
    )
}

export default OrgManager;