import { buildProTableDataSource, sendRequest, showDelConfirm, showConfirm } from '@/utils/antdUtils';
|
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
|
import { PageContainer, ProFormText, ProTable, QueryFilter, ProFormSelect } from '@ant-design/pro-components';
|
import { Button, Cascader, Col, Menu, Row, Select, Space, Form } from 'antd';
|
import { useEffect, useRef, useState } from 'react';
|
import { Access, useAccess } from 'umi';
|
import AddAndEdit from './components/addAndEdit';
|
import AddUnit from './components/addUnit';
|
import {
|
addSystemUserInfo,
|
addUnit,
|
del,
|
delUnit,
|
editSystemUserInfo,
|
editUnit,
|
getList,
|
getUnitList,
|
systemRoleList,
|
unfreezeApi,
|
freezeApi,
|
} from './service';
|
|
const Role = () => {
|
const [form] = Form.useForm();
|
const actionRef = useRef();
|
const addViewRef = useRef();
|
const addViewRef1 = useRef();
|
const [modalVisible, handleModalVisibles] = useState(false);
|
const [modalVisible1, handleModalVisibles1] = useState(false);
|
const [roleList, setRoleList] = useState([]);
|
const [unitId, setUnitId] = useState('');
|
const access = useAccess();
|
const [items, setItems] = useState([]);
|
const { SubMenu } = Menu;
|
useEffect(() => {
|
fetchUnit();
|
systemRoleList({ pageNum: 1, pageSize: 10000 }).then((res) => {
|
setRoleList(() => res.data.records);
|
});
|
}, []);
|
const node = (item) => {
|
return (
|
<div
|
style={{
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'space-between',
|
width: '100%',
|
}}
|
>
|
<span>{item.name}</span>
|
{/* <div>
|
{item.tier < 4 && (
|
<Access accessible={access['/system_setting/unit_management/add']}>
|
<PlusOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
addViewRef1.current.refreshData({ ...item, type: 'add' });
|
handleModalVisibles1(true);
|
}}
|
/>
|
</Access>
|
)}
|
<Access accessible={access['/system_setting/unit_management/edit']}>
|
<EditOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
addViewRef1.current.refreshData({ ...item, type: 'edit' });
|
handleModalVisibles1(true);
|
}}
|
/>
|
</Access>
|
<Access accessible={access['/system_setting/unit_management/del']}>
|
<DeleteOutlined
|
onClick={(e) => {
|
e.stopPropagation();
|
showDelConfirm(async () => {
|
let status = await sendRequest(delUnit, item.id);
|
if (status) {
|
fetchUnit();
|
}
|
}, '确认删除该单位吗？');
|
}}
|
/>
|
</Access>
|
</div> */}
|
</div >
|
);
|
};
|
const renderMenuItems = (items, level = 0) => {
|
return items.map((item) => {
|
if (item.children && item.children.length > 0) {
|
return (
|
<SubMenu
|
key={item.key}
|
title={node(item)}
|
onTitleClick={(e) => {
|
if (e && e.domEvent) {
|
e.domEvent.stopPropagation();
|
}
|
setUnitId(item.id);
|
const values = form.getFieldsValue();
|
actionRef.current.reload(values);
|
}}
|
>
|
{renderMenuItems(item.children, level + 1)}
|
</SubMenu>
|
);
|
}
|
return (
|
<Menu.Item
|
onClick={(e) => {
|
if (e && e.domEvent) {
|
e.domEvent.stopPropagation();
|
}
|
const itemId = item.id || item.key;
|
setUnitId(itemId);
|
const values = form.getFieldsValue();
|
actionRef.current.reload(values);
|
}}
|
key={item.key}
|
>
|
{node(item)}
|
</Menu.Item>
|
);
|
});
|
};
|
const fetchUnit = (params) => {
|
getUnitList(params).then((res) => {
|
if (res.code == 200 && res.data) {
|
const traverseItems = (items) => {
|
return items.map((item) => {
|
if (!item.id) {
|
}
|
item.key = item.id;
|
item.title = '1';
|
if (item.child && item.child.length > 0) {
|
item.children = traverseItems(item.child);
|
}
|
return item;
|
});
|
};
|
const processedItems = traverseItems(res.data);
|
setItems(processedItems);
|
}
|
});
|
};
|
const columns = [
|
{
|
title: '姓名',
|
dataIndex: 'name',
|
},
|
{
|
title: '联系方式',
|
dataIndex: 'phone',
|
},
|
// {
|
// title: '所在单位',
|
// dataIndex: 'departmentName',
|
// hideInSearch: true,
|
// renderFormItem: () => {
|
// return (
|
// <Cascader
|
// options={items}
|
// fieldNames={{ value: 'key', label: 'name' }}
|
// placeholder="请选择"
|
// displayRender={(label) => label[label.length - 1]}
|
// changeOnSelect={true}
|
// />
|
// );
|
// },
|
// },
|
// {
|
// hideInTable: true,
|
// title: '所属权限',
|
// dataIndex: 'departmentId',
|
// renderFormItem: () => {
|
// return (
|
// <Cascader
|
// options={items}
|
// fieldNames={{ value: 'key', label: 'name' }}
|
// placeholder="请选择"
|
// displayRender={(label) => label[label.length - 1]}
|
// changeOnSelect={true}
|
// />
|
// );
|
// },
|
// },
|
{
|
title: '所属职位',
|
dataIndex: 'systemPostName',
|
hideInSearch: true,
|
},
|
{
|
title: '后台权限',
|
dataIndex: 'systemRoleName',
|
hideInSearch: true,
|
},
|
{
|
title: '所属权限',
|
dataIndex: 'systemRoleId',
|
hideInTable: true,
|
renderFormItem: () => {
|
return (
|
<Select
|
key="searchSelect"
|
allowClear
|
placeholder="请选择"
|
options={roleList}
|
fieldNames={{ label: 'name', value: 'id' }}
|
filterOption={false}
|
></Select>
|
);
|
},
|
},
|
{
|
title: '账号所属层级',
|
dataIndex: 'accountLevel',
|
// （1=市级账号，2=区县账号，3=街道账号，4=社区账号）
|
render: (text, record) => {
|
record.list.length>0&&record.list.map(item=>{
|
item.str = ''
|
if(item.level==1){
|
item.str = '市'
|
}else if(item.level==2){
|
item.str = '区县' + '/' + item.districts
|
}else if(item.level==3){
|
item.str = '街道' + '/' + item.districts + '/' + item.street
|
}else{
|
item.str = '社区' + '/' + item.districts + '/' + item.street + '/' + item.community
|
}
|
return item.str;
|
})
|
return record.list.map(item=>item.str).join('、');
|
},
|
valueEnum: {
|
1: '市',
|
2: '区县',
|
3: '街道',
|
4: '社区',
|
5: '党员',
|
},
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
// （1=使用中，2=已冻结）
|
hideInSearch: true,
|
render: (text, record) => {
|
let status = '';
|
switch (record.status) {
|
case 1:
|
status = '使用中';
|
break;
|
case 2:
|
status = '已冻结';
|
break;
|
default:
|
status = '';
|
}
|
return status;
|
},
|
},
|
{
|
title: '操作',
|
hideInSearch: true,
|
render: (text, record) => {
|
return (
|
<Space>
|
{record.roleId != 1 && (
|
<Access accessible={access['/system_setting/people_management/edit']}>
|
<a
|
onClick={() => {
|
addViewRef.current.refreshData({ ...record, type: 'edit' }, items);
|
handleModalVisibles(true);
|
}}
|
>
|
编辑
|
</a>
|
</Access>
|
)}
|
{record.roleId != 1 && (
|
<Access accessible={access['/system_setting/people_management/del']}>
|
<a
|
onClick={() => {
|
showDelConfirm(async () => {
|
let status = await sendRequest(del, record.id);
|
if (status) {
|
actionRef.current.reload();
|
}
|
}, '确认删除所选信息吗？');
|
}}
|
>
|
删除
|
</a>
|
</Access>
|
)}
|
<Access accessible={access['/system_setting/people_management/detail']}>
|
<a
|
onClick={() => {
|
addViewRef.current.refreshData({ ...record, type: 'detail' }, items);
|
handleModalVisibles(true);
|
}}
|
>
|
查看详情
|
</a>
|
</Access>
|
<Access accessible={access['/system_setting/people_management/freeze']}>
|
<a
|
onClick={() => {
|
showConfirm(`确认${record.status === 1 ? '冻结' : '解冻'}该人员吗？`, '', async () => {
|
let status = await sendRequest(
|
record.status === 1 ? freezeApi : unfreezeApi,
|
record.id,
|
);
|
if (status) {
|
actionRef.current.reload();
|
}
|
});
|
}}
|
>
|
{record.status === 1 ? '冻结' : '解冻'}
|
</a>
|
</Access>
|
</Space>
|
);
|
},
|
},
|
];
|
|
return (
|
<PageContainer
|
header={{
|
breadcrumb: {},
|
title: '人员管理',
|
}}
|
>
|
<div style={{ background: '#fff' }}>
|
<QueryFilter
|
form={form}
|
labelWidth={100}
|
onReset={(values) => {
|
fetchUnit(values);
|
setUnitId('');
|
actionRef.current.reload();
|
}}
|
onFinish={(values) => {
|
fetchUnit(values);
|
setUnitId('');
|
actionRef.current.reload();
|
}}
|
>
|
<ProFormText name="name" label="组织结构名称" />
|
<ProFormSelect name="type" label="筛选维度" options={[{
|
label: '当前组织结构',
|
value: 1,
|
}, {
|
label: '当前及下级组织结构',
|
value: 2,
|
}]} />
|
</QueryFilter>
|
</div>
|
<Row style={{ marginTop: 20, background: '#fff' }}>
|
<Col span={4}>
|
<Space style={{ margin: '10px 0' }}>
|
<span style={{ margin: '0 27px' }}>组织结构</span>
|
{/* <Button
|
type="primary"
|
onClick={() => {
|
addViewRef1.current.refreshData({});
|
handleModalVisibles1(true);
|
}}
|
>
|
添加
|
</Button> */}
|
</Space>
|
|
<Menu
|
mode="inline"
|
onClick={({ key, domEvent }) => {
|
domEvent.stopPropagation();
|
}}
|
>
|
{renderMenuItems(items)}
|
</Menu>
|
</Col>
|
<Col span={20} style={{ minHeight: 650 }}>
|
<ProTable
|
rowKey="id"
|
actionRef={actionRef}
|
columns={columns}
|
pagination={{
|
showSizeChanger: true,
|
showQuickJumper: true,
|
defaultPageSize: 10,
|
}}
|
search={{
|
labelWidth: 'auto',
|
span: 6,
|
defaultCollapsed: false, // 默认是否收起
|
}}
|
request={(params) => {
|
let obj = { ...params };
|
if (unitId) {
|
obj.departmentId = unitId;
|
}
|
if (params.departmentId) {
|
obj.departmentId = params.departmentId[params.departmentId.length - 1];
|
}
|
if (form.getFieldValue('type')) {
|
obj.type = form.getFieldValue('type');
|
}
|
return buildProTableDataSource(getList, obj);
|
}}
|
toolBarRender={(action, selectRows) => [
|
<Access accessible={access['/system_setting/people_management/add']}>
|
<Space>
|
<Button
|
type="primary"
|
onClick={() => {
|
addViewRef.current.refreshData({ type: 'add', unitId: unitId }, items);
|
handleModalVisibles(true);
|
}}
|
>
|
添加
|
</Button>
|
</Space>
|
</Access>,
|
]}
|
/>
|
</Col>
|
</Row>
|
|
<AddAndEdit
|
ref={addViewRef}
|
visible={modalVisible}
|
onSave={async (fileds) => {
|
let success = await sendRequest(addSystemUserInfo, fileds);
|
if (success) {
|
handleModalVisibles(false);
|
actionRef.current.reload();
|
}
|
addViewRef.current.clean();
|
}}
|
onUpdate={async (fileds) => {
|
let success = await sendRequest(editSystemUserInfo, fileds);
|
if (success) {
|
handleModalVisibles(false);
|
actionRef.current.reload();
|
}
|
addViewRef.current.clean();
|
}}
|
onCancel={() => handleModalVisibles(false)}
|
/>
|
<AddUnit
|
ref={addViewRef1}
|
visible={modalVisible1}
|
onSave={async (fileds) => {
|
let success = await sendRequest(addUnit, fileds);
|
if (success) {
|
handleModalVisibles1(false);
|
fetchUnit();
|
}
|
}}
|
onUpdate={async (fileds) => {
|
let success = await sendRequest(editUnit, fileds);
|
if (success) {
|
handleModalVisibles1(false);
|
fetchUnit();
|
}
|
}}
|
onCancel={() => handleModalVisibles1(false)}
|
/>
|
</PageContainer>
|
);
|
};
|
|
export default Role;
|
