/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-24 09:48:22
|
* @LastEditTime: 2024-08-26 14:58:09
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 查看部门人员的modal
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Input, Button, Row, Col, Modal, Form } from 'antd';
|
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
|
import TableView from '../../TableView';
|
|
/*
|
* modalData, // modal数据，人员数据
|
* handlePersonnelModal, // modal事件
|
* handleSearch, // 查询人员
|
*/
|
const PersonnelModal = ({ modalData, handlePersonnelModal, handleSearch }) => {
|
const [form] = Form.useForm();
|
|
// 密码显示or隐藏
|
const [psdOpenId, setPsdOpenId] = useState([]);
|
|
const personnelColumns = [
|
{ title: '账号', dataIndex: 'acc' },
|
{
|
title: '密码',
|
dataIndex: 'cipher',
|
width: 150,
|
render: (text, record) => {
|
return (
|
<div className="personnel-table-psd">
|
{psdOpenId.includes(record.id) ? (
|
<>
|
<span>{text}</span>
|
<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) => {
|
return text?.length > 0
|
? text.map((x, t) => {
|
return (
|
<span key={x.id}>
|
{x.roleName}
|
{t !== text.length - 1 && <span>，</span>}
|
</span>
|
);
|
})
|
: '-';
|
},
|
},
|
{ title: '姓名', dataIndex: 'trueName', width: 80 },
|
{ title: '手机号码', dataIndex: 'mobile' },
|
{
|
title: '岗位',
|
dataIndex: 'ctUsepostList',
|
width: 100,
|
render: (text) => {
|
return text?.length > 0
|
? text.map((x, t) => {
|
return (
|
<span key={x.id}>
|
{x.postName}
|
{t !== text.length - 1 && <span>，</span>}
|
</span>
|
);
|
})
|
: '-';
|
},
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 50,
|
render: (text) => <span style={{ color: text === 1 ? '#52C41A' : '#BFBFBF' }}>{text === 1 ? '正常' : '停用'}</span>,
|
},
|
];
|
|
// 查询
|
function handleSearchPerson(type, values) {
|
if (type === 'search') {
|
handleSearch({ ...modalData.search, ...values, page: 1, size: 10 });
|
} else if (type === 'reset') {
|
form.resetFields();
|
handleSearch({ ...modalData.search, page: 1, size: 10 });
|
} else {
|
handleSearch({ ...modalData.search, page: values.page, size: values.pageSize });
|
}
|
}
|
|
return (
|
<Modal
|
title={`${modalData.title}人员信息列表`}
|
visible={modalData.visible}
|
width={1000}
|
onCancel={() => handlePersonnelModal({}, false)}
|
footer={false}
|
>
|
<Form form={form} onFinish={(values) => handleSearchPerson('search', values)}>
|
<Row gutter={[16, 24]}>
|
<Col span={8}>
|
<Form.Item name="acc" label="账号">
|
<Input placeholder="请输入" style={{ width: '220px' }} allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item name="trueName" label="姓名">
|
<Input placeholder="请输入" style={{ width: '220px' }} allowClear />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Button className="public-buttonMargin" onClick={() => handleSearchPerson('reset')}>
|
重置
|
</Button>
|
<Button type="primary" htmlType="submit">
|
搜索
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
<TableView
|
style={{ marginTop: '16px' }}
|
columns={personnelColumns}
|
dataSource={modalData.data}
|
bordered
|
pagination={{
|
total: modalData.total,
|
pageSize: modalData.size,
|
current: modalData.page,
|
onChange: (page, pageSize) => handleSearchPerson('page', { page, pageSize }),
|
}}
|
/>
|
</Modal>
|
);
|
};
|
|
PersonnelModal.propTypes = {
|
modalData: PropTypes.object,
|
handlePersonnelModal: PropTypes.func,
|
handleSearch: PropTypes.func,
|
};
|
|
export default PersonnelModal;
|
