123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 |
- import React, { useState, useEffect, useRef } from 'react';
- import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message, Row, Col } from 'antd';
- import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
- import AddUser from './addUser'
- import '@common/common.less';
- import { useSelector } from 'react-redux'
- import apiObj from '@api/index';
- import UserContext from './user-context';
- const { post, api, xPost } = apiObj;
- const { Option } = Select;
- function UserManager() {
- useEffect(() => {
- getUserPage();
- }, []);
- const [userList, setUserList] = useState([]);
- const [title, setTitle] = useState("");
- const [visible, setVisible] = useState(false);
- const [userId, setUserId] = useState("");
- const [msvisible, setMsvisible] = useState(false);
- const [modalType, setModalType] = useState("");
- const [type, setType] = useState("");
- const [formData, setFormData] = useState(null);
- const [username, setUsername] = useState(null);
- const [roleList, setRoleList] = useState([]);
- const [total, setTotal] = useState(0);
- const [form] = Form.useForm();
- const tipText = {
- 1: '确定要删除该用户?',
- 2: '禁用后该用户将无法登录,确定要禁用该用户?',
- 3: '确定要重置该用户密码?',
- };
- const staticInfo = useSelector(state => {
- return state.staticInfo;
- });
- let list = []
- let params = {
- pages: 1,
- current: 1,
- size: 15
- }
- const { statusList } = staticInfo;
- //新增弹窗
- const showModal = (name, type, flag, userId) => {
- setVisible(type);
- setTitle(name);
- setType(flag)
- setUserId(userId)
- if (flag == 1) {
- setFormData({
- status: '1'
- })
- }
- if (flag == 3 || flag == 2) {
- getUserById(userId)
- }
- }
- //表格数据
- function getUserPage() {
- post(api.getUserPage, params).then((res) => {
- if (res.data.code === 200) {
- const data = res.data.data;
- setUserList(data.records);
- setTotal(data.total)
- }
- })
- }
- //查看用户
- function getUserById(userId) {
- xPost(api.getUserById, { userId: userId }).then((res) => {
- if (res.data.code === 200) {
- const data = res.data.data;
- let roles = []
- data.roles.forEach(item => {
- roles.push(item.roleId)
- })
- const arr = {
- username: data.username,
- mobilePhone: data.mobilePhone,
- password: data.password,
- againpassword: data.password,
- name: data.name,
- idcard: data.idcard,
- addHospitalTreeVO: getHospitals(data.hospitals),
- titleId: data.titleId,
- jobNo: data.jobNo,
- roles: roles,
- orderNo: data.orderNo,
- status: data.status,
- }
- setRoleList(data.roles)
- setFormData(arr)
- }
- })
- }
- // 处理组织结构数据回显
- function getHospitals(arr) {
- arr.forEach((item, i, array) => {
- item.value = item.hospitalId
- item.title = item.hospitalName
- if (!item.children && item.depts) {
- item.depts.forEach(it => {
- it.value = item.parentId + '-' + it.deptId
- if (it.relation == 1) {
- list.push(it.value)
- }
- })
- }
- if (item.type != 0 && item.relation == 1) {
- list.push(item.value)
- console.log(list)
- }
- if (item.children) {
- getHospitals(item.children)
- }
- })
- return list
- }
- // 禁用/启用接口
- function disableUser(userId, status) {
- const param = { userId: userId, status: status };
- xPost(api.disableUser, param).then((res) => {
- if (res.data.code === 200) {
- getUserPage();
- setMsvisible(false);
- message.success((status ? '启用' : '禁用') + "成功");
- } else {
- message.warning(res.data.msg || '操作失败');
- }
- }).catch(() => {
- message.error("接口出错");
- });
- }
- //重置密码
- function onResetPsd() {
- // const param = { HospitalId: operId };
- // xPost(api.disableHospital, param).then((res) => {
- // if (res.data.code === 200) {
- // getUserPage();
- // message.success("重置成功");
- // } else {
- // message.warning(res.data.msg || '操作失败');
- // }
- // }).catch(() => {
- // message.error("接口出错");
- // });
- }
- //删除
- function deleteUser() {
- const param = { userId: userId };
- xPost(api.deleteUser, param).then((res) => {
- if (res.data.code === 200) {
- getUserPage();
- setMsvisible(false);
- message.success("删除成功");
- } else {
- message.warning(res.data.msg || '操作失败');
- }
- }).catch(() => {
- message.error("接口出错");
- });
- }
- function onSizeChange(current, pageSize) {
- params.current = current
- params.size = pageSize
- getUserPage()
- }
- function changePage(page, pageSize) {
- params.current = page
- params.size = pageSize
- getUserPage()
- }
- const onFinish = (value) => {
- params = {
- ...params,
- ...value
- }
- getUserPage();
- };
- const onReset = () => {
- form.resetFields();
- getUserPage();
- };
- const messageBox = (type, id) => {
- setMsvisible(true)
- setUserId(id)
- setModalType(type)
- }
- //提示框确认事件
- function handleOk() {
- if (modalType == 1) {
- deleteUser(userId)
- } else if (modalType == 2) {
- disableUser(userId, 0)
- } else if (modalType == 3) {
- onResetPsd();
- }
- }
- //提示框取消
- function handleCancel() {
- setMsvisible(false);
- }
- function cancel() {
- setVisible(false)
- setFormData(null)
- }
- function userChange() {
- setVisible(false)
- }
- const columns = [
- { title: '用户名', dataIndex: 'username', key: 'index' },
- { title: '姓名', dataIndex: 'name', key: 'index' },
- { title: '所属组织', dataIndex: 'hospitalName', key: 'index' },
- { title: '工号', dataIndex: 'jobNo', key: 'index' },
- {
- title: '状态', dataIndex: 'status', key: 'status', render: (text, record) => (
- <Space size="middle">
- {record.status == 1 ?
- <span className="Enable">启用</span>
- :
- <span className="Disable">禁用</span>
- }
- </Space>
- )
- },
- {
- title: '操作', dataIndex: 'key', render: (text, record) => (
- <Space size="middle">
- <a onClick={e => showModal('查看用户', true, 3, record.userId)}>查看</a>
- <a onClick={e => showModal('修改用户', true, 2, record.userId)} >修改</a>
- <Dropdown overlay={menu.bind(this, record)} record={record}>
- <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
- 更多 <DownOutlined />
- </a>
- </Dropdown>
- </Space>
- )
- }
- ]
- const menu = (record) => {
- return (
- <Menu>
- <Menu.Item key="0">
- <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
- 重置密码
- </a>
- </Menu.Item>
- <Menu.Item key="1">
- {record.status === '1' ? (<a onClick={() => messageBox(2, record.userId)}>禁用</a>) : (<a onClick={() => disableUser(record.userId, 1)}>启用</a>)}
- </Menu.Item>
- <Menu.Item key="2">
- <a target="_blank" onClick={() => messageBox(1, record.userId)}>
- 删除
- </a>
- </Menu.Item>
- </Menu>
- )
- }
- return (
- <div className="wrapper">
- <div className="filter-box">
- <Form
- form={form}
- name="normal_login"
- onFinish={onFinish}
- initialValues={{ status: '' }}
- >
- <Row gutter={24}>
- <Col span={5} key={0}>
- <Form.Item label="用户名" name="username">
- <Input placeholder="用户名" />
- </Form.Item>
- </Col>
- <Col span={5} key={1}>
- <Form.Item label="姓名" name="name">
- <Input placeholder="姓名" />
- </Form.Item>
- </Col>
- <Col span={5} key={2}>
- <Form.Item name="status" label="当前状态">
- <Select
- allowClear
- >
- {statusList.map((item) => {
- return (
- <Option value={item.name} key={item.name}>{item.val}</Option>
- )
- })}
- </Select>
- </Form.Item>
- </Col>
- <Col span={6} key={3}>
- <Form.Item>
- <Button type="primary" htmlType="submit">
- 查询
- </Button>
- <Button onClick={onReset}>
- 重置
- </Button>
- </Form.Item>
- </Col>
- </Row>
- </Form>
- </div>
- <div className="table">
- <div className="table-header">
- <h2 className="table-title">用户管理</h2>
- <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增用户', true, 1)}>新增用户</Button>
- </div>
- <Table
- columns={columns}
- dataSource={userList}
- rowKey={record => record.userId + record.hospitalName}
- pagination={{
- pageNo: 1,
- pageSize: params.size,
- pageSizeOptions: ['15', '30', '60', '120'],
- showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
- onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
- onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
- total: total
- }} />
- </div>
- {visible && formData ?
- <Modal
- title={title}
- okText='确定'
- cancelText='取消'
- width={'45%'}
- visible={visible}
- onCancel={cancel}
- footer={null}
- forceRender={true}
- >
- <UserContext.Provider value={{ userId, type, formData, roleList }}>
- <AddUser userChange={userChange} />
- </UserContext.Provider>
- </Modal>
- : ''}
- <Modal
- title="提示"
- okText='确定'
- cancelText='取消'
- width={400}
- visible={msvisible}
- onOk={handleOk}
- onCancel={handleCancel}
- >
- <p>{tipText[modalType]}</p>
- </Modal>
- </div >
- )
- }
- export default UserManager;
|