/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-25 14:40:57
|
* @LastEditTime: 2022-11-03 11:35:05
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 人员信息列表页面
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Tooltip, Popconfirm, Form, Space, Typography } from 'antd';
|
import { DeleteOutlined, PlusOutlined, EyeOutlined, EyeInvisibleOutlined, ApartmentOutlined } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import TableView from '../../TableView';
|
import TableSearch from '../../TableSearch';
|
|
const { Link, Text } = Typography;
|
|
/*
|
* isAddOrEditPerson, // 是否显示该页面
|
* searchData, // 查询参数
|
* tableData, // 人员信息数据
|
* selectedRowKeys, // 选择的table行id
|
* selectData, // 角色，组织部门下拉框数据
|
* handleSearch, // 查询 or 重置 or 页查询
|
* handleEditPerson, // 跳转新增or修改页面
|
* handleDelPerson, // 删除人员
|
* handleSelectRow, // 勾选table行
|
* handleTableIconClick,
|
*/
|
const PersonnelPage = ({
|
isAddOrEditPerson,
|
searchData,
|
tableData,
|
editData,
|
selectedRowKeys,
|
selectData,
|
handleSearch,
|
handleEditPerson,
|
handleDelPerson,
|
handleSelectRow,
|
handleTableIconClick,
|
}) => {
|
const [form] = Form.useForm();
|
|
// 密码显示or隐藏
|
const [psdOpenId, setPsdOpenId] = useState([]);
|
|
// 部门数据
|
const [deptData, setDeptData] = useState({ data: [], disabled: true });
|
|
let userId = $$.getLocal('customerSystemUser')?.userId;
|
|
let ctUseroleList = $$.getLocal('customerSystemUser')?.ctUseroleList;
|
|
const personnelColumns = [
|
{ title: '账号', dataIndex: 'acc' },
|
{
|
title: '密码',
|
dataIndex: 'cipher',
|
width: 150,
|
render: (text, record) => {
|
return (
|
<div className="personnel-table-psd">
|
{psdOpenId.includes(record.id) ? (
|
<>
|
<Text style={{ width: 100 }} ellipsis={{ tooltip: text }}>
|
{text}
|
</Text>
|
<EyeOutlined
|
onClick={() => {
|
let index = psdOpenId.indexOf(record.id);
|
psdOpenId.splice(index, 1);
|
setPsdOpenId([...psdOpenId]);
|
}}
|
/>
|
</>
|
) : (
|
<>
|
<span>********</span>
|
<EyeInvisibleOutlined onClick={() => setPsdOpenId([record.id, ...psdOpenId])} />
|
</>
|
)}
|
</div>
|
);
|
},
|
},
|
{
|
title: '角色',
|
dataIndex: 'ctUseroleList',
|
render: (text) => {
|
let value = !text ? '-' : text.map((x) => x.roleName);
|
return (
|
<Tooltip placement="topLeft" title={value.toString()}>
|
{value.toString()}
|
</Tooltip>
|
);
|
},
|
},
|
{ title: '调解专长', dataIndex: 'goodFieldName' },
|
{ title: '调解范围', dataIndex: 'canFieldName' },
|
{ title: '姓名', dataIndex: 'trueName', width: 80 },
|
{ title: '手机号码', dataIndex: 'mobile' },
|
{ title: '所属组织', dataIndex: 'unitName' },
|
{ title: '所属部门', dataIndex: 'deptName' },
|
{
|
title: '岗位',
|
dataIndex: 'ctUsepostList',
|
width: 100,
|
render: (text) => {
|
let value = !text ? '-' : text.map((x) => x.postName);
|
return (
|
<Tooltip placement="topLeft" title={value.toString()}>
|
{value.toString()}
|
</Tooltip>
|
);
|
},
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 50,
|
render: (text) => <span style={{ color: text === '1' ? '#52C41A' : '#BFBFBF' }}>{text === '1' ? '正常' : '停用'}</span>,
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 140,
|
render: (_, record) => {
|
return (
|
<Space size="middle">
|
{/* 登录用户不是超级管理员角色不可以修改包含超级管理员角色的人员 */}
|
{record.ctUseroleList?.filter((item) => item.roleCode === '22_00024-2').length &&
|
!ctUseroleList?.filter((item) => item.roleCode === '22_00024-2').length ? null : (
|
<Link onClick={() => handleEditPerson('change', record)}>修改</Link>
|
)}
|
{/* 22_00024-2超级管理员不可操作 */}
|
{!record.ctUseroleList?.filter((item) => item.roleCode === '22_00024-2').length && (
|
<>
|
{record.status === '1' ? (
|
<Popconfirm title="是否确认停用该账号?" onConfirm={() => handleEditPerson('stop', record)}>
|
<Link disabled={userId === record.id}>停用</Link>
|
</Popconfirm>
|
) : (
|
<Link disabled={userId === record.id} style={{ color: '#20c318' }} onClick={() => handleEditPerson('open', record)}>
|
启用
|
</Link>
|
)}
|
<Popconfirm title="是否确认删除该账号?" placement="topRight" onConfirm={() => handleDelPerson(record.id)}>
|
<Link disabled={userId === record.id}>删除</Link>
|
</Popconfirm>
|
</>
|
)}
|
</Space>
|
);
|
},
|
},
|
];
|
|
// 选择组织时
|
function handleValuesChange(value, label, extra) {
|
if (value) {
|
let deptData = extra.triggerNode.props.chainList || [];
|
setDeptData({ data: deptData, disabled: false });
|
} else {
|
form.setFieldsValue({ deptId: undefined });
|
setDeptData({ data: [], disabled: true });
|
}
|
}
|
|
return (
|
<div className="personnel" style={{ display: !isAddOrEditPerson ? '' : 'none' }}>
|
<div className="pageSearch">
|
<TableSearch
|
form={form}
|
labelLength={2}
|
itemData={[
|
{ type: 'Input', name: 'acc', label: '账号' },
|
{ type: 'Input', name: 'trueName', label: '姓名' },
|
{
|
type: 'Select',
|
name: 'roleCode',
|
label: '角色',
|
selectdata: selectData.roles,
|
showSearch: true,
|
filterOption: (inputValue, option) => (option.children.indexOf(inputValue) !== -1 ? true : false),
|
},
|
{
|
type: 'TreeSelect',
|
name: 'unitId',
|
label: '组织',
|
treedata: selectData.units,
|
onChange: handleValuesChange,
|
},
|
{
|
type: 'TreeSelect',
|
name: 'deptId',
|
label: '部门',
|
treedata: deptData.data,
|
placeholder: '请选择(请先选组织)',
|
disabled: deptData.disabled,
|
},
|
{
|
type: 'Select',
|
name: 'status',
|
label: '状态',
|
selectdata: [
|
{ value: '1', label: '正常' },
|
{ value: '2', label: '停用' },
|
],
|
},
|
]}
|
handleReset={() => {
|
form.resetFields();
|
setDeptData({ data: [], disabled: true });
|
handleSearch('reset');
|
}}
|
handleSearch={() => {
|
let values = form.getFieldsValue();
|
handleSearch('search', values);
|
}}
|
/>
|
</div>
|
<div className="pageTable personnel-table">
|
<TableView
|
showHeader
|
title="人员信息列表"
|
buttonAction={[
|
<Button
|
icon={<DeleteOutlined />}
|
disabled={selectedRowKeys.length > 0 ? false : true}
|
onClick={() => {
|
$$.modalInfo({
|
content: `确认批量删除${selectedRowKeys.length}个账号吗？`,
|
onOk: () => handleDelPerson(),
|
});
|
}}
|
>
|
批量删除
|
</Button>,
|
<Button icon={<PlusOutlined />} type="primary" onClick={() => handleEditPerson('add')}>
|
新增
|
</Button>,
|
]}
|
iconAction={[{ title: '岗位列表', dom: <ApartmentOutlined onClick={handleTableIconClick} /> }]}
|
onReload={() => handleSearch('reload')}
|
columns={personnelColumns}
|
dataSource={tableData.data}
|
bordered
|
rowSelection={{
|
selectedRowKeys,
|
getCheckboxProps: (record) => ({
|
disabled:
|
record.ctUseroleList?.filter((item) => item.roleCode === '22_00024-2').length !== 0 ||
|
record.id === $$.getLocal('customerSystemUser')?.userId,
|
}),
|
onChange: handleSelectRow,
|
}}
|
pagination={{
|
total: tableData.total,
|
showTotal: (total) => `生效账号${tableData.countZzStatus} / 总账号${total}`,
|
pageSize: searchData.size,
|
current: searchData.page,
|
onChange: (page, pagesize) => handleSearch('page', { page, size: pagesize }),
|
}}
|
rowClassName={(record) => (record.id === editData.data?.id ? 'tableRowActive' : '')}
|
/>
|
</div>
|
</div>
|
);
|
};
|
|
PersonnelPage.propTypes = {
|
isAddOrEditPerson: PropTypes.bool,
|
searchData: PropTypes.object,
|
tableData: PropTypes.object,
|
editData: PropTypes.object,
|
selectedRowKeys: PropTypes.array,
|
selectData: PropTypes.object,
|
handleSearch: PropTypes.func,
|
handleEditPerson: PropTypes.func,
|
handleDelPerson: PropTypes.func,
|
handleSelectRow: PropTypes.func,
|
handleTableIconClick: PropTypes.func,
|
};
|
|
export default PersonnelPage;
|
