611 lines
15 KiB
Java
611 lines
15 KiB
Java
/* eslint-disable */
|
||
|
||
import React, { PureComponent, Fragment } from 'react';
|
||
import { connect } from 'dva';
|
||
import {
|
||
Card,
|
||
Form,
|
||
Input,
|
||
Button,
|
||
Modal,
|
||
message,
|
||
Table,
|
||
Divider,
|
||
Tree,
|
||
Spin,
|
||
Row,
|
||
Col,
|
||
Select,
|
||
Icon,
|
||
TreeSelect,
|
||
} from 'antd';
|
||
import { checkTypeWithEnglishAndNumbers } from '../../../helpers/validator';
|
||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||
|
||
import styles from './AdminList.less';
|
||
import moment from 'moment';
|
||
import PaginationHelper from '../../../helpers/PaginationHelper';
|
||
|
||
const FormItem = Form.Item;
|
||
const { TreeNode } = Tree;
|
||
const status = ['未知', '正常', '禁用'];
|
||
|
||
// 列表
|
||
function List({
|
||
dataSource,
|
||
loading,
|
||
pagination,
|
||
searchParams,
|
||
dispatch,
|
||
handleModalVisible,
|
||
handleRoleAssignModalVisible,
|
||
}) {
|
||
function handleRoleAssign(record) {
|
||
// 显示 Modal
|
||
handleRoleAssignModalVisible(true, record);
|
||
// 查询角色列表
|
||
dispatch({
|
||
type: 'adminList/queryRoleList',
|
||
payload: {
|
||
id: record.id,
|
||
},
|
||
});
|
||
}
|
||
|
||
function handleStatus(record) {
|
||
Modal.confirm({
|
||
title: record.status === 1 ? '确认禁用' : '取消禁用',
|
||
content: `${record.username}`,
|
||
onOk() {
|
||
dispatch({
|
||
type: 'adminList/updateStatus',
|
||
payload: {
|
||
id: record.id,
|
||
status: record.status === 1 ? 2 : 1,
|
||
},
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}
|
||
|
||
function handleDelete(record) {
|
||
Modal.confirm({
|
||
title: `确认删除?`,
|
||
content: `${record.username}`,
|
||
onOk() {
|
||
dispatch({
|
||
type: 'adminList/delete',
|
||
payload: {
|
||
id: record.id,
|
||
},
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}
|
||
|
||
const columns = [
|
||
{
|
||
title: '账号',
|
||
dataIndex: 'username',
|
||
},
|
||
{
|
||
title: '员工姓名',
|
||
dataIndex: 'nickname',
|
||
},
|
||
{
|
||
title: '部门',
|
||
dataIndex: 'deptment.name',
|
||
},
|
||
{
|
||
title: '角色',
|
||
dataIndex: 'roles',
|
||
render(roles) {
|
||
let text = '';
|
||
if (roles) {
|
||
for (let i in roles) {
|
||
if (i > 0) {
|
||
text += ' ';
|
||
}
|
||
text += roles[i].name;
|
||
}
|
||
}
|
||
return <span>{text}</span>;
|
||
},
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
render(val) {
|
||
return <span>{status[val]}</span>; // TODO 芋艿，此处要改
|
||
},
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createTime',
|
||
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: 360,
|
||
render: (text, record) => {
|
||
const statusText = record.status === 1 ? '禁用' : '开启'; // TODO 芋艿，此处要改
|
||
return (
|
||
<Fragment>
|
||
<a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
|
||
<Divider type="vertical" />
|
||
<a onClick={() => handleRoleAssign(record)}>角色分配</a>
|
||
<Divider type="vertical" />
|
||
<a className={styles.tableDelete} onClick={() => handleStatus(record)}>
|
||
{statusText}
|
||
</a>
|
||
{record.status === 2 ? (
|
||
<span>
|
||
<Divider type="vertical" />
|
||
<a className={styles.tableDelete} onClick={() => handleDelete(record)}>
|
||
删除
|
||
</a>
|
||
</span>
|
||
) : null}
|
||
</Fragment>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
function onPageChange(page) {
|
||
// 翻页
|
||
dispatch({
|
||
type: 'adminList/query',
|
||
payload: {
|
||
pageNo: page.current,
|
||
pageSize: page.pageSize,
|
||
...searchParams,
|
||
},
|
||
});
|
||
}
|
||
|
||
return (
|
||
<Table
|
||
columns={columns}
|
||
dataSource={dataSource}
|
||
loading={loading}
|
||
rowKey="id"
|
||
pagination={pagination}
|
||
onChange={onPageChange}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// 搜索表单
|
||
const SearchForm = Form.create()(props => {
|
||
const {
|
||
form,
|
||
form: { getFieldDecorator },
|
||
dispatch,
|
||
deptSelectTree,
|
||
} = props;
|
||
|
||
function search() {
|
||
const fields = form.getFieldsValue();
|
||
if (fields.deptmentId) {
|
||
const deptmentId = fields.deptmentId.split('-')[1];
|
||
fields.deptmentId = deptmentId;
|
||
}
|
||
dispatch({
|
||
type: 'adminList/query',
|
||
payload: {
|
||
...PaginationHelper.defaultPayload,
|
||
...fields,
|
||
},
|
||
});
|
||
}
|
||
|
||
// 提交搜索
|
||
function handleSubmit(e) {
|
||
// 阻止默认事件
|
||
e.preventDefault();
|
||
// 提交搜索
|
||
search();
|
||
}
|
||
|
||
// 重置搜索
|
||
function handleReset() {
|
||
// 重置表单
|
||
form.resetFields();
|
||
// 执行搜索
|
||
search();
|
||
}
|
||
|
||
return (
|
||
<Form onSubmit={handleSubmit} layout="inline">
|
||
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||
<Col md={6} sm={24}>
|
||
<FormItem label="员工姓名">
|
||
{getFieldDecorator('nickname')(<Input style={{ width: 250 }} placeholder="请输入" />)}
|
||
</FormItem>
|
||
</Col>
|
||
<Col md={6} sm={24}>
|
||
<FormItem label="归属部门">
|
||
{getFieldDecorator('deptmentId', {
|
||
rules: [{ required: true, message: '请选择部门' }],
|
||
})(
|
||
<TreeSelect
|
||
showSearch
|
||
style={{ width: 250 }}
|
||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||
treeData={deptSelectTree}
|
||
placeholder="选择部门"
|
||
/>
|
||
)}
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col md={12} sm={24}>
|
||
<span className={styles.submitButtons}>
|
||
<Button type="primary" htmlType="submit">
|
||
查询
|
||
</Button>
|
||
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
|
||
重置
|
||
</Button>
|
||
</span>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
);
|
||
});
|
||
|
||
// 添加 or 修改 Form 表单
|
||
const AddOrUpdateForm = Form.create()(props => {
|
||
const {
|
||
dispatch,
|
||
modalVisible,
|
||
form,
|
||
handleModalVisible,
|
||
modalType,
|
||
formVals,
|
||
deptSelectTree,
|
||
} = props;
|
||
|
||
const okHandle = () => {
|
||
form.validateFields((err, fields) => {
|
||
if (err) return;
|
||
// 添加表单
|
||
if (fields.deptmentId) {
|
||
const deptmentId = fields.deptmentId.split('-')[1];
|
||
fields.deptmentId = deptmentId;
|
||
}
|
||
if (modalType === 'add') {
|
||
dispatch({
|
||
type: 'adminList/add',
|
||
payload: {
|
||
body: {
|
||
...fields,
|
||
},
|
||
callback: () => {
|
||
// 清空表单
|
||
form.resetFields();
|
||
// 提示
|
||
message.success('新建成功');
|
||
// 关闭弹窗
|
||
handleModalVisible();
|
||
},
|
||
},
|
||
});
|
||
// 修改表单
|
||
} else {
|
||
dispatch({
|
||
type: 'adminList/update',
|
||
payload: {
|
||
body: {
|
||
id: formVals.id,
|
||
...fields,
|
||
},
|
||
callback: () => {
|
||
// 清空表单
|
||
form.resetFields();
|
||
// 提示
|
||
message.success('编辑成功');
|
||
// 关闭弹窗
|
||
handleModalVisible();
|
||
},
|
||
},
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const title = modalType === 'add' ? '新建员工' : '更新员工';
|
||
return (
|
||
<Modal
|
||
destroyOnClose
|
||
title={title}
|
||
visible={modalVisible}
|
||
onOk={okHandle}
|
||
okText="保存"
|
||
onCancel={() => handleModalVisible()}
|
||
>
|
||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="账号">
|
||
{form.getFieldDecorator('username', {
|
||
rules: [
|
||
{ required: true, message: '请输入账号！' },
|
||
{ max: 16, min: 6, message: '长度为 6-16 位' },
|
||
{
|
||
validator: (rule, value, callback) =>
|
||
checkTypeWithEnglishAndNumbers(rule, value, callback, '数字以及字母'),
|
||
},
|
||
],
|
||
initialValue: formVals.username,
|
||
})(<Input placeholder="请输入" />)}
|
||
</FormItem>
|
||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="员工姓名">
|
||
{form.getFieldDecorator('nickname', {
|
||
rules: [
|
||
{ required: true, message: '请输入员工姓名！' },
|
||
{ max: 10, message: '姓名最大长度为 10' },
|
||
],
|
||
initialValue: formVals.nickname,
|
||
})(<Input placeholder="请输入" />)}
|
||
</FormItem>
|
||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="归属部门">
|
||
{form.getFieldDecorator('deptmentId', {
|
||
rules: [{ required: true, message: '请选择部门' }],
|
||
initialValue:
|
||
formVals.deptmentId && formVals.deptmentId !== 0 ? formVals.deptmentId : null,
|
||
})(
|
||
<TreeSelect
|
||
showSearch
|
||
style={{ width: 280 }}
|
||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||
treeData={deptSelectTree}
|
||
placeholder="选择部门"
|
||
/>
|
||
)}
|
||
</FormItem>
|
||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="密码">
|
||
{form.getFieldDecorator('password', {
|
||
rules: [
|
||
{ required: modalType === 'add', message: '请填写密码' }, // 添加时，必须输入密码
|
||
{ max: 16, min: 6, message: '长度为 6-18 位' },
|
||
],
|
||
initialValue: formVals.password,
|
||
})(<Input placeholder="请输入" type="password" />)}
|
||
</FormItem>
|
||
</Modal>
|
||
);
|
||
});
|
||
|
||
// 角色分配 Modal
|
||
const RoleAssignModal = Form.create()(props => {
|
||
const {
|
||
modalVisible,
|
||
form,
|
||
handleModalVisible,
|
||
treeData,
|
||
checkedKeys,
|
||
loading,
|
||
formVals,
|
||
dispatch,
|
||
} = props;
|
||
|
||
const handleCheckBoxClick = checkedKeys => {
|
||
// 获得新选择
|
||
const newCheckedKeys = checkedKeys.map(item => {
|
||
return parseInt(item);
|
||
});
|
||
// 设置到 model 中
|
||
dispatch({
|
||
type: 'adminList/changeRoleCheckedKeys',
|
||
payload: newCheckedKeys,
|
||
});
|
||
};
|
||
|
||
const renderTreeNodes = data => {
|
||
return data.map(item => {
|
||
if (item.children) {
|
||
// 递归拼接节点
|
||
return (
|
||
<TreeNode title={item.title} key={item.key} dataRef={item}>
|
||
{renderTreeNodes(item.children)}
|
||
</TreeNode>
|
||
);
|
||
}
|
||
return <TreeNode title={item.title} key={item.key} dataRef={item} />;
|
||
});
|
||
};
|
||
|
||
const renderModalContent = treeData => {
|
||
const RenderTreeNodes = renderTreeNodes(treeData);
|
||
if (RenderTreeNodes) {
|
||
return (
|
||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色">
|
||
{form.getFieldDecorator('name', {})(
|
||
<Tree
|
||
defaultExpandAll={true}
|
||
checkable={true}
|
||
multiple={true}
|
||
checkedKeys={checkedKeys}
|
||
onCheck={handleCheckBoxClick}
|
||
>
|
||
{renderTreeNodes(treeData)}
|
||
</Tree>
|
||
)}
|
||
</FormItem>
|
||
);
|
||
} else {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const okHandle = () => {
|
||
form.validateFields((err, fieldsValue) => {
|
||
if (err) return;
|
||
// debugger;
|
||
dispatch({
|
||
type: 'adminList/roleAssign',
|
||
payload: {
|
||
body: {
|
||
id: formVals.id,
|
||
roleIds: checkedKeys,
|
||
},
|
||
callback: () => {
|
||
// 清空表单
|
||
form.resetFields();
|
||
// 提示
|
||
message.success('分配角色成功');
|
||
// 关闭弹窗
|
||
handleModalVisible(false);
|
||
},
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
destroyOnClose
|
||
title="分配角色"
|
||
visible={modalVisible}
|
||
onOk={okHandle}
|
||
onCancel={() => handleModalVisible()}
|
||
>
|
||
<Spin spinning={loading}>{renderModalContent(treeData)}</Spin>
|
||
</Modal>
|
||
);
|
||
});
|
||
|
||
@connect(({ adminList }) => ({
|
||
// list: adminList.list,
|
||
// pagination: adminList.pagination,
|
||
...adminList,
|
||
}))
|
||
// 主界面
|
||
@Form.create()
|
||
class AdminList extends PureComponent {
|
||
componentDidMount() {
|
||
const { dispatch } = this.props;
|
||
dispatch({
|
||
type: 'adminList/query',
|
||
payload: {
|
||
...PaginationHelper.defaultPayload,
|
||
},
|
||
});
|
||
dispatch({
|
||
type: 'adminList/getDeptmentTree',
|
||
payload: {},
|
||
});
|
||
}
|
||
|
||
handleModalVisible = (modalVisible, modalType, record) => {
|
||
const { dispatch } = this.props;
|
||
dispatch({
|
||
type: 'adminList/setAll',
|
||
payload: {
|
||
modalVisible,
|
||
modalType,
|
||
formVals: record || {},
|
||
},
|
||
});
|
||
};
|
||
|
||
handleRoleAssignModalVisible = (roleModalVisible, record) => {
|
||
const { dispatch } = this.props;
|
||
dispatch({
|
||
type: 'adminList/setAll',
|
||
payload: {
|
||
roleModalVisible: roleModalVisible,
|
||
formVals: record || {},
|
||
},
|
||
});
|
||
};
|
||
|
||
render() {
|
||
// let that = this;
|
||
const {
|
||
dispatch,
|
||
list,
|
||
listLoading,
|
||
searchParams,
|
||
pagination,
|
||
modalVisible,
|
||
modalType,
|
||
formVals,
|
||
confirmLoading,
|
||
roleList,
|
||
roleModalVisible,
|
||
roleAssignLoading,
|
||
roleCheckedKeys,
|
||
deptSelectTree,
|
||
} = this.props;
|
||
|
||
// 列表属性
|
||
const listProps = {
|
||
dataSource: list,
|
||
pagination,
|
||
searchParams,
|
||
dispatch,
|
||
loading: listLoading,
|
||
confirmLoading,
|
||
handleModalVisible: this.handleModalVisible, // Function
|
||
handleRoleAssignModalVisible: this.handleRoleAssignModalVisible, // Function
|
||
};
|
||
|
||
// 搜索表单属性
|
||
const searchFormProps = {
|
||
dispatch,
|
||
deptSelectTree,
|
||
};
|
||
|
||
// 添加 or 更新表单属性
|
||
const addOrUpdateFormProps = {
|
||
modalVisible,
|
||
modalType,
|
||
formVals,
|
||
dispatch,
|
||
deptSelectTree,
|
||
handleModalVisible: this.handleModalVisible, // Function
|
||
};
|
||
|
||
// 分配角色 Modal 属性
|
||
const roleAssignModal = {
|
||
loading: roleAssignLoading,
|
||
treeData: roleList,
|
||
formVals,
|
||
checkedKeys: roleCheckedKeys,
|
||
modalVisible: roleModalVisible,
|
||
dispatch,
|
||
handleModalVisible: this.handleRoleAssignModalVisible, // Function
|
||
};
|
||
|
||
return (
|
||
<PageHeaderWrapper>
|
||
<Card bordered={false}>
|
||
<div className={styles.tableList}>
|
||
<div className={styles.tableListForm}>
|
||
<SearchForm {...searchFormProps} />
|
||
</div>
|
||
<div className={styles.tableListOperator}>
|
||
<Button
|
||
icon="plus"
|
||
type="primary"
|
||
onClick={() => this.handleModalVisible(true, 'add', {})}
|
||
>
|
||
新建员工
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<List {...listProps} />
|
||
</Card>
|
||
|
||
<AddOrUpdateForm {...addOrUpdateFormProps} />
|
||
|
||
<RoleAssignModal {...roleAssignModal} />
|
||
</PageHeaderWrapper>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default AdminList;
|