import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
|
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
|
import { PageContainer, ProFormText, ProTable, QueryFilter } from '@ant-design/pro-components';
|
import { Button, Col, Menu, Row, Space } from 'antd';
|
import { useEffect, useRef, useState } from 'react';
|
import { Access, useAccess } from 'umi';
|
import AddAndEdit from './components/addAndEdit';
|
import { add, del, edit, getList, getUnitList } from './service';
|
|
const Role = () => {
|
const actionRef = useRef();
|
const addViewRef = useRef();
|
const [modalVisible, handleModalVisibles] = useState(true);
|
const access = useAccess();
|
useEffect(() => {
|
getUnitList().then((res) => {
|
console.log(res);
|
});
|
}, []);
|
const items = [
|
{
|
key: '1',
|
icon: (
|
<div
|
style={{
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'space-between',
|
width: '100%',
|
}}
|
>
|
<span>组织部</span>
|
<div>
|
<PlusOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
console.log(e);
|
}}
|
/>
|
<EditOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
console.log(e);
|
}}
|
/>
|
<DeleteOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
console.log(e);
|
}}
|
/>
|
</div>
|
</div>
|
),
|
children: [
|
{
|
key: '11',
|
label: 'Option 1',
|
},
|
{
|
key: '12',
|
label: 'Option 2',
|
},
|
{
|
key: '13',
|
label: 'Option 3',
|
},
|
{
|
key: '14',
|
label: 'Option 4',
|
},
|
],
|
},
|
];
|
const columns = [
|
{
|
title: '角色名称',
|
dataIndex: 'name',
|
},
|
{
|
title: '操作',
|
hideInSearch: true,
|
render: (text, record) => {
|
return (
|
<Space>
|
{record.roleId != 1 && (
|
<Access accessible={access['/system_setting/role_management/edit']}>
|
<Button
|
type="link"
|
onClick={() => {
|
addViewRef.current.refreshData(record);
|
handleModalVisibles(true);
|
}}
|
>
|
编辑
|
</Button>
|
</Access>
|
)}
|
{record.roleId != 1 && (
|
<Access accessible={access['/system_setting/role_management/del']}>
|
<Button
|
type="link"
|
onClick={() => {
|
showDelConfirm(async () => {
|
let status = await sendRequest(del, record.id);
|
if (status) {
|
actionRef.current.reload();
|
}
|
}, '确认删除所选信息吗？');
|
}}
|
>
|
删除
|
</Button>
|
</Access>
|
)}
|
<Access accessible={access['/system_setting/role_management/detail'] || false}>
|
<Button
|
type="link"
|
onClick={() => {
|
addViewRef.current.refreshData(record, true);
|
handleModalVisibles(true);
|
}}
|
>
|
查看详情
|
</Button>
|
</Access>
|
</Space>
|
);
|
},
|
},
|
];
|
|
return (
|
<PageContainer
|
header={{
|
breadcrumb: {},
|
}}
|
>
|
<div style={{ background: '#fff' }}>
|
<QueryFilter>
|
<ProFormText name="name" label="单位名称" />
|
</QueryFilter>
|
</div>
|
<Row style={{ marginTop: 20, background: '#fff' }}>
|
<Col span={4}>
|
<Menu
|
mode="inline"
|
defaultSelectedKeys={['231']}
|
style={{
|
// width: 256,
|
height: '100%',
|
}}
|
items={items}
|
/>
|
</Col>
|
<Col span={20} style={{ minHeight: 650 }}>
|
<ProTable
|
rowKey="id"
|
actionRef={actionRef}
|
columns={columns}
|
pagination={{
|
showSizeChanger: true,
|
showQuickJumper: true,
|
defaultPageSize: 10,
|
}}
|
// request={(params) => buildProTableDataSource(getList, params)}
|
toolBarRender={(action, selectRows) => [
|
<Access accessible={access['/system_setting/role_management/add']}>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
addViewRef.current.refreshData({});
|
handleModalVisibles(true);
|
}}
|
>
|
添加
|
</Button>
|
</Space>
|
</Access>,
|
]}
|
/>
|
</Col>
|
</Row>
|
|
<AddAndEdit
|
ref={addViewRef}
|
visible={modalVisible}
|
onSave={async (fileds) => {
|
let success = await sendRequest(add, fileds);
|
if (success) {
|
handleModalVisibles(false);
|
actionRef.current.reload();
|
}
|
addViewRef.current.clean();
|
}}
|
onUpdate={async (fileds) => {
|
let success = await sendRequest(edit, fileds);
|
if (success) {
|
handleModalVisibles(false);
|
actionRef.current.reload();
|
}
|
addViewRef.current.clean();
|
}}
|
onCancel={() => handleModalVisibles(false)}
|
/>
|
</PageContainer>
|
);
|
};
|
|
export default Role;
|
