角色管理查询

src/components/RoleManager/index.js

@@ -1,29 +1,29 @@
-import {useEffect,useState} from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux'
 /*import { useDispatch,useSelector } from 'react-redux'*/
-import { Table,Modal, message,Space, Form, Input, Button, Row, Col, Select } from 'antd';
+import { Table, Modal, message, Space, Form, Input, Button, Row, Col, Select } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import AddRole from './AddRole';
 import './index.less';
 import apiObj from '@api/index';
 import RoleContext from './role-context';
 import { pickCheckedTreeIds, getValueFromEvent } from '@utils/index'
-const {post,api,xPost} = apiObj;
+const { post, api, xPost } = apiObj;
 
 const { Option } = Select;
-function RoleManager(){
+function RoleManager() {
     useEffect(() => {
         getTableData();
-    },[]);
+    }, []);
 
     const [dataSource, setDataSource] = useState([]);   //列表数据
     const [roleDetail, setRoleDetail] = useState(null);   //角色详情数据
-    const [visible,setVisible] = useState(false);   //删除禁用确认弹窗显示
-    const [addVisible,setAddVisible] = useState(false);         //新增页面显示
+    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 [modalType, setModalType] = useState(1);
+    const [operId, setOperId] = useState('');    //当前操作的角色id
     const [total, setTotal] = useState(0);
     const [size, setSize] = useState(15);
     const [current, setCurrent] = useState(1);
@@ -33,15 +33,15 @@ function RoleManager(){
         size: 15
     });
     //从state中取出状态、类型列表
-    const staticInfo =useSelector(state => {
+    const staticInfo = useSelector(state => {
         return state.staticInfo;
     });
-    const {statusList} = staticInfo;
-    const tipText={
-        1:'确定要删除该角色？',
-        2:'当前角色存在用户，删除后用户将一并被删除',
-        3:'确定要禁用该角色？',
-        4:'当前角色存在用户，禁用后用户将一并被禁用',
+    const { statusList } = staticInfo;
+    const tipText = {
+        1: '确定要删除该角色？',
+        2: '当前角色存在用户，删除后用户将一并被删除',
+        3: '确定要禁用该角色？',
+        4: '当前角色存在用户，禁用后用户将一并被禁用',
     };
     let data = {
         pages: 1,
@@ -49,9 +49,9 @@ function RoleManager(){
         size: size
     }
     //获取表格数据
-    function getTableData(param){
-        post(api.getRolePage, param || params).then((res)=>{
-            if(res.data.code===200){
+    function getTableData(param) {
+        post(api.getRolePage, param || params).then((res) => {
+            if (res.data.code === 200) {
                 const data = res.data.data;
                 setDataSource(data.records);
                 setTotal(data.total)
@@ -60,71 +60,71 @@ function RoleManager(){
         })
     }
     //启用/禁用
-    function enable(flag,id) {
-        const param = {roleId:id||operId,status:flag};
-        xPost(api.disableRole,param).then((res)=>{
-            if(res.data.code===200){
+    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||'操作失败');
+                message.success((flag ? '启用' : '禁用') + "成功");
+            } else {
+                message.warning(res.data.msg || '操作失败');
             }
-        }).catch(()=>{
+        }).catch(() => {
             message.error("接口出错");
         });
     }
     //删除
-    function onDelete(){
-        const param = {roleId:operId};
-        xPost(api.deleteRole,param).then((res)=>{
-            if(res.data.code===200){
+    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||'操作失败');
+            } else {
+                message.warning(res.data.msg || '操作失败');
             }
-        }).catch(()=>{
+        }).catch(() => {
             message.error("接口出错");
         });
     }
     //显示弹窗
-    function showModal(type,id){
+    function showModal(type, id) {
         setModalType(type);
         setOperId(id);
         setVisible(true);
     }
     //弹窗确认事件
-    function handleOk(){
-        if("1,2".indexOf(modalType)>-1){
+    function handleOk() {
+        if ("1,2".indexOf(modalType) > -1) {
             onDelete();
-        }else if("3,4".indexOf(modalType)>-1){
+        } else if ("3,4".indexOf(modalType) > -1) {
             enable(0);
         }
     }
     //弹窗取消
-    function handleCancel(){
+    function handleCancel() {
         setVisible(false);
         setAddVisible(false);
     }
     //新增角色弹窗
-    function showAddRole(){
+    function showAddRole() {
         setAddVisible(true);
     }
-    function getRoleDetail(id){
-        return xPost(api.getRoleById,{roleId:id});
+    function getRoleDetail(id) {
+        return xPost(api.getRoleById, { roleId: id });
     }
     //修改角色
-    async function editRole(id){
+    async function editRole(id) {
         const data = await getRoleDetail(id);
         const detail = data.data;
-        if(detail.code===200){
-            const content= detail.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++){
+            let softwares = [], sids = [];
+            for (let i = 0; i < menuData.length; i++) {
                 const obj = pickCheckedTreeIds(menuData[i]);
                 softwares.push(obj);
             }
@@ -134,43 +134,43 @@ function RoleManager(){
                     sids.push(obj.id);
                 }
             }
-            const fData = Object.assign({},content,{sids,softwares});
+            const fData = Object.assign({}, content, { sids, softwares });
             setRoleDetail(fData);
         }
         setAddVisible(true);
     }
 
     //保存
-    function addRole(formData){
+    function addRole(formData) {
         let url = api.addRole;
-        const arr = formData.softwares.filter((it)=>{
-            if(Object.keys(it).length&&it.softwareMenuIds&&it.softwareMenuIds.length){
+        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;
+        if (roleDetail) {     //修改角色
+            formData.id = roleDetail.id;
+            url = api.updateRole;
         }
-        formData.softwares=arr;
-        post(url,formData).then((res)=>{
-            if(res.data.code===200){
+        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||'操作失败');
+            } else {
+                message.warning(res.data.msg || '操作失败');
             }
-        }).catch(()=>{
+        }).catch(() => {
             message.error("接口出错");
         });
     }
-    function goBack(){
+    function goBack() {
         setAddVisible(false);
         setRoleDetail(null)
         getTableData();
-    } 
+    }
     function onSizeChange(current, pageSize) {
         params.current = current
         params.size = pageSize
@@ -187,24 +187,29 @@ function RoleManager(){
         getTableData()
     }
     //表格渲染
-    function RenderTable(){
+    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: '状态', 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) => {
+            {
+                title: '操作', key: 'operation', render: (row, i) => {
                     //console.log(21,row)
-                    if(row.rootFlag){
+                    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>) }},
+                        <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
@@ -232,7 +237,7 @@ function RoleManager(){
     const onFinish = (values) => {
         const param = {
             ...data,
-            ...params
+            ...values
         }
         setCurrent(1)
         setParams(param)
@@ -244,10 +249,10 @@ function RoleManager(){
         form.resetFields();
         getTableData(data);
     };
-    if(addVisible){
+    if (addVisible) {
         return (
-            <RoleContext.Provider value={{save:addRole,detail:roleDetail}}>
-                <AddRole back={goBack}/>
+            <RoleContext.Provider value={{ save: addRole, detail: roleDetail }}>
+                <AddRole back={goBack} />
             </RoleContext.Provider>
         )
     }
@@ -258,7 +263,7 @@ function RoleManager(){
                     <Row gutter={24}>
                         <Col span={5} key={0}>
                             <Form.Item name="name" label="角色名称" getValueFromEvent={getValueFromEvent}>
-                                <Input placeholder='角色名称' autoComplete='off'/>
+                                <Input placeholder='角色名称' autoComplete='off' />
                             </Form.Item>
                         </Col>
                         <Col span={5} key={2}>
@@ -266,7 +271,7 @@ function RoleManager(){
                                 <Select
                                     allowClear
                                 >
-                                    {statusList.map((item)=>{
+                                    {statusList.map((item) => {
                                         return (
                                             <Option value={item.name} key={item.name}>{item.val}</Option>
                                         )
@@ -290,7 +295,7 @@ function RoleManager(){
             <div className="table">
                 <div className="table-header">
                     <h2 className="table-title">组织管理</h2>
-                    <Button type="primary" icon={<PlusOutlined />} onClick={()=> showAddRole()}>新增角色</Button>
+                    <Button type="primary" icon={<PlusOutlined />} onClick={() => showAddRole()}>新增角色</Button>
                 </div>
                 <RenderTable />
             </div>