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

import {useEffect,useState} from 'react';
import { useSelector } from 'react-redux'
/*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 AddRole from './AddRole';
import './index.less';
import apiObj from '@api/index';
import RoleContext from './role-context';
import utils from '@utils/index'

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

    const [dataSource, setDataSource] = useState([]);   //列表数据
    const [roleDetail, setRoleDetail] = useState(null);   //角色详情数据
    const [visible,setVisible] = useState(false);   //删除禁用确认弹窗显示
    const [addVisible,setAddVisible] = useState(false);         //新增页面显示
    const [confirmLoading, setConfirmLoading] = useState(false);
    //弹窗类型：1删除 2有用户删除 3禁用 4有用户禁用
    const [modalType,setModalType] = useState(1);
    const [operId,setOperId] = useState('');    //当前操作的角色id
    const [total, setTotal] = useState(0);
    //从state中取出状态、类型列表
    const staticInfo =useSelector(state => {
        return state.staticInfo;
    });
    const {statusList} = staticInfo;
    const tipText={
        1:'确定要删除该角色？',
        2:'当前角色存在用户，删除后用户将一并被删除',
        3:'确定要禁用该角色？',
        4:'当前角色存在用户，禁用后用户将一并被禁用',
    };
    let params = {
        pages: 1,
        current: 1,
        size: 15
    }
    //获取表格数据
    function getTableData(){
        post(api.getRolePage, params).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                setDataSource(data.records);
                setTotal(data.total)
            }

        })
    }
    //启用/禁用
    function enable(flag,id) {
        const param = {roleId:id||operId,status:flag};
        xPost(api.disableRole,param).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setVisible(false);
                message.success((flag?'启用':'禁用')+"成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    //删除
    function onDelete(){
        const param = {roleId:operId};
        xPost(api.deleteRole,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);
        }
    }
    //弹窗取消
    function handleCancel(){
        setVisible(false);
        setAddVisible(false);
    }
    //新增角色弹窗
    function showAddRole(){
        setAddVisible(true);
    }
    function getRoleDetail(id){
        return xPost(api.getRoleById,{roleId:id});
    }
    //修改角色
    async function editRole(id){
        const data = await getRoleDetail(id);
        const detail = data.data;
        if(detail.code===200){
            const content= detail.data;
            const menuData = content.loginUserMenuResourceTree;
            const loginSoftwares = content.loginSoftwares;
            let softwares=[],sids=[];
            for(let i=0;i<menuData.length;i++){
                const obj = pickCheckedTreeIds(menuData[i]);
                softwares.push(obj);
            }
            for (let j = 0; j < loginSoftwares.length; j++) {
                const obj = loginSoftwares[j];
                if (obj.relation == '1') {
                    sids.push(obj.id);
                }
            }
            const fData = Object.assign({},content,{sids,softwares});
            setRoleDetail(fData);
        }
        setAddVisible(true);
    }

    //保存
    function addRole(formData){
        let url = api.addRole;
        const arr = formData.softwares.filter((it)=>{
            if(Object.keys(it).length&&it.softwareMenuIds&&it.softwareMenuIds.length){
                return it;
            }
        });
        if(roleDetail){     //修改角色
            formData.id=roleDetail.id;
            url=api.updateRole;
        }
        formData.softwares=arr;
        post(url,formData).then((res)=>{
            if(res.data.code===200){
                getTableData();
                setAddVisible(false);
                setRoleDetail(null)
                message.success("添加成功");
            }else{
                message.warning(res.data.msg||'操作失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    function goBack(){
        setAddVisible(false);
        setRoleDetail(null)
    } 
    function onSizeChange(current, pageSize) {
        params.current = current
        params.size = pageSize
        getTableData()
    }
    function changePage(page, pageSize) {
        params.current = page
        params.size = pageSize
        getTableData()
    }
    //表格渲染
    function RenderTable(){
        const columns = [
            { title: '角色名称', dataIndex: 'name', key: 'name' },
            { title: '角色描述', dataIndex: 'remark', key: 'remark' },
            { title: '状态', key: 'statusName',render:(row) => {
                    return (<span className={ (row.status==='1')?'Enable':'Disable' }>{row.statusName}</span>)
                        }},
            /*{ title: '创建时间', dataIndex: 'gmtCreate', key: 'gmtCreate' },*/
            { title: '操作', key: 'operation', render: (row,i) => {
                    //console.log(21,row)
                    if(row.rootFlag){
                        return '-'
                    }
                    return (<Space size="middle">
                        <a onClick={()=>editRole(row.id)}>修改</a>
                        {row.status === '1' ? (<a className="disable" onClick={()=>showModal(row.hasUserFlag?4:3,row.id)}>禁用</a>):(<a onClick={()=>enable(1,row.id)}>启用</a>)}
                        <a className="delete" onClick={()=>showModal(row.hasUserFlag?2:1,row.id)}>删除</a>
                    </Space>) }},
        ];
        return (
            <Table
                className="components-table-demo-nested"
                rowKey={record => record.id}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    pageNo: 1,
                    pageSize: params.size,
                    pageSizeOptions: ['15', '30', '60', '120'],
                    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
                    onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
                    onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
                    total: total
                }}
            />
        )
    }
    //筛选项渲染
    const [form] = Form.useForm();
    const onFinish = (values) => {
        params = {
            ...values,
            ...params
        }
        getTableData();
    };
    const onReset = () => {
        form.resetFields();
        getTableData();
    };
    if(addVisible){
        return (
            <RoleContext.Provider value={{save:addRole,detail:roleDetail}}>
                <AddRole back={goBack}/>
            </RoleContext.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="name" label="角色名称">
                                <Input placeholder='角色名称' autoComplete='off'/>
                            </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={()=> showAddRole()}>新增角色</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 RoleManager;