oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

员工列表 增加部门

Browse Source
This commit is contained in:
zhenxianyimeng
2019-07-21 17:23:26 +08:00
parent e01179605b
commit 9b7ca47ae4
12 changed files with 295 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
admin-web/src/models/admin/adminList.js
View File

@@ -1,5 +1,5 @@
import {message} from 'antd';
import {buildTreeNode, findCheckedKeys} from '../../utils/tree.utils';
import { message } from 'antd';
import { buildTreeNode, findCheckedKeys } from '../../utils/tree.utils';
import {
addAdmin,
adminRoleAssign,
@@ -8,14 +8,30 @@ import {
queryAdminRoleList,
updateAdmin,
updateAdminStatus,
deptTreeAll,
} from '../../services/admin';
import {arrayToStringParams} from '../../utils/request.qs';
import { arrayToStringParams } from '../../utils/request.qs';
import PaginationHelper from '../../../helpers/PaginationHelper';
const SEARCH_PARAMS_DEFAULT = {
nickname: '',
};
const buildSelectTree = list => {
return list.map(item => {
let children = [];
if (item.children) {
children = buildSelectTree(item.children);
}
return {
title: item.name,
value: `${item.name}-${item.id}`,
key: item.id,
children,
};
});
};
export default {
namespace: 'adminList',
@@ -37,11 +53,22 @@ export default {
roleModalVisible: false,
roleCheckedKeys: [], // 此处的 Key ，就是角色编号
roleAssignLoading: false,
//部门相关
deptSelectTree: [],
},
effects: {
*getDeptmentTree({ payload }, { call, put }) {
const result = yield call(deptTreeAll, payload);
yield put({
type: 'treeSuccess',
payload: result.data,
});
},
// 查询列表
* query({ payload }, { call, put }) {
*query({ payload }, { call, put }) {
// 显示加载中
yield put({
type: 'changeListLoading',
@@ -57,8 +84,8 @@ export default {
list: response.data.list,
pagination: PaginationHelper.formatPagination(response.data, payload),
searchParams: {
nickname: payload.nickname || ''
}
nickname: payload.nickname || '',
},
},
});
@@ -68,7 +95,7 @@ export default {
payload: false,
});
},
* add({ payload }, { call, put }) {
*add({ payload }, { call, put }) {
// 显示加载中
yield put({
type: 'changeModalLoading',
@@ -87,7 +114,7 @@ export default {
yield put({
type: 'query',
payload: {
...PaginationHelper.defaultPayload
...PaginationHelper.defaultPayload,
},
});
}
@@ -98,7 +125,7 @@ export default {
payload: false,
});
},
* update({ payload }, { call, put }) {
*update({ payload }, { call, put }) {
const { callback, body } = payload;
// 显示加载中
yield put({
@@ -117,7 +144,7 @@ export default {
yield put({
type: 'query',
payload: {
...PaginationHelper.defaultPayload
...PaginationHelper.defaultPayload,
},
});
}
@@ -129,7 +156,7 @@ export default {
});
},
* updateStatus({ payload }, { call, put }) {
*updateStatus({ payload }, { call, put }) {
// 请求
const response = yield call(updateAdminStatus, payload);
// 响应
@@ -139,13 +166,13 @@ export default {
yield put({
type: 'query',
payload: {
...PaginationHelper.defaultPayload
...PaginationHelper.defaultPayload,
},
});
}
},
* delete({ payload }, { call, put }) {
*delete({ payload }, { call, put }) {
// 请求
const response = yield call(deleteAdmin, payload);
// 响应
@@ -155,13 +182,13 @@ export default {
yield put({
type: 'query',
payload: {
...PaginationHelper.defaultPayload
...PaginationHelper.defaultPayload,
},
});
}
},
* queryRoleList({ payload }, { call, put }) {
*queryRoleList({ payload }, { call, put }) {
// 显示加载中
yield put({
type: 'changeRoleAssignLoading',
@@ -191,7 +218,7 @@ export default {
});
},
* roleAssign({ payload }, { call, put }) {
*roleAssign({ payload }, { call, put }) {
const { callback, body } = payload;
// 显示加载中
yield put({
@@ -220,6 +247,27 @@ export default {
},
reducers: {
treeSuccess(state, { payload }) {
const resultData = payload;
const treeData = buildSelectTree(resultData);
// // value 要保护 displayName 不然，搜索会失效
// const rootNode = [
// {
// title: '根节点',
// value: `根节点-0`,
// key: 0,
// children: [],
// },
// ];
// const deptSelectTree = rootNode.concat(treeData);
return {
...state,
// list: resultData,
deptSelectTree: treeData,
};
},
changeRoleCheckedKeys(state, { payload }) {
return {
...state,
@@ -251,6 +299,6 @@ export default {
...state,
...payload,
};
}
},
},
};

220
admin-web/src/pages/Admin/AdminList.js
View File

@@ -2,22 +2,44 @@
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} from 'antd';
import { checkTypeWithEnglishAndNumbers } from '../../../helpers/validator'
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";
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 List({
dataSource,
loading,
pagination,
searchParams,
dispatch,
handleModalVisible,
handleRoleAssignModalVisible,
}) {
function handleRoleAssign(record) {
// 显示 Modal
handleRoleAssignModalVisible(true, record);
@@ -66,12 +88,16 @@ function List ({ dataSource, loading, pagination, searchParams, dispatch,
const columns = [
{
title: '账号',
dataIndex: 'username'
dataIndex: 'username',
},
{
title: '员工姓名',
dataIndex: 'nickname',
},
{
title: '部门',
dataIndex: 'deptment.name',
},
{
title: '角色',
dataIndex: 'roles',
@@ -85,8 +111,8 @@ function List ({ dataSource, loading, pagination, searchParams, dispatch,
text += roles[i].name;
}
}
return (<span>{text}</span>);
}
return <span>{text}</span>;
},
},
{
title: '状态',
@@ -114,30 +140,30 @@ function List ({ dataSource, loading, pagination, searchParams, dispatch,
<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
}
{record.status === 2 ? (
<span>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => handleDelete(record)}>
删除
</a>
</span>
) : null}
</Fragment>
);
},
},
];
function onPageChange(page) { // 翻页
function onPageChange(page) {
// 翻页
dispatch({
type: 'adminList/query',
payload: {
pageNo: page.current,
pageSize: page.pageSize,
...searchParams
}
})
...searchParams,
},
});
}
return (
@@ -149,7 +175,7 @@ function List ({ dataSource, loading, pagination, searchParams, dispatch,
pagination={pagination}
onChange={onPageChange}
/>
)
);
}
// 搜索表单
@@ -157,17 +183,23 @@ const SearchForm = Form.create()(props => {
const {
form,
form: { getFieldDecorator },
dispatch
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,
...form.getFieldsValue()
}
})
...fields,
},
});
}
// 提交搜索
@@ -189,20 +221,36 @@ const SearchForm = Form.create()(props => {
return (
<Form onSubmit={handleSubmit} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<Col md={6} sm={24}>
<FormItem label="员工姓名">
{getFieldDecorator('nickname')(<Input placeholder="请输入" />)}
{getFieldDecorator('nickname')(<Input style={{ width: 250 }} placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
重置
</Button>
</span>
<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>
@@ -211,12 +259,24 @@ const SearchForm = Form.create()(props => {
// 添加 or 修改 Form 表单
const AddOrUpdateForm = Form.create()(props => {
const { dispatch, modalVisible, form, handleModalVisible, modalType, formVals } = 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',
@@ -264,29 +324,52 @@ const AddOrUpdateForm = Form.create()(props => {
title={title}
visible={modalVisible}
onOk={okHandle}
okText='保存'
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, '数字以及字母')}
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'}],
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 位'}],
rules: [
{ required: modalType === 'add', message: '请填写密码' }, // 添加时，必须输入密码
{ max: 16, min: 6, message: '长度为 6-18 位' },
],
initialValue: formVals.password,
})(<Input placeholder="请输入" type="password" />)}
</FormItem>
@@ -321,7 +404,8 @@ const RoleAssignModal = Form.create()(props => {
const renderTreeNodes = data => {
return data.map(item => {
if (item.children) { // 递归拼接节点
if (item.children) {
// 递归拼接节点
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{renderTreeNodes(item.children)}
@@ -387,32 +471,31 @@ const RoleAssignModal = Form.create()(props => {
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Spin spinning={loading}>
{renderModalContent(treeData)}
</Spin>
<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
...PaginationHelper.defaultPayload,
},
});
dispatch({
type: 'adminList/getDeptmentTree',
payload: {},
});
}
handleModalVisible = (modalVisible, modalType, record) => {
@@ -422,7 +505,7 @@ class AdminList extends PureComponent {
payload: {
modalVisible,
modalType,
formVals: record || {}
formVals: record || {},
},
});
};
@@ -433,18 +516,29 @@ class AdminList extends PureComponent {
type: 'adminList/setAll',
payload: {
roleModalVisible: roleModalVisible,
formVals: record || {}
formVals: record || {},
},
});
};
render() {
// let that = this;
const { dispatch,
list, listLoading, searchParams, pagination,
modalVisible, modalType, formVals,
const {
dispatch,
list,
listLoading,
searchParams,
pagination,
modalVisible,
modalType,
formVals,
confirmLoading,
roleList, roleModalVisible, roleAssignLoading, roleCheckedKeys } = this.props;
roleList,
roleModalVisible,
roleAssignLoading,
roleCheckedKeys,
deptSelectTree,
} = this.props;
// 列表属性
const listProps = {
@@ -461,6 +555,7 @@ class AdminList extends PureComponent {
// 搜索表单属性
const searchFormProps = {
dispatch,
deptSelectTree,
};
// 添加 or 更新表单属性
@@ -469,6 +564,7 @@ class AdminList extends PureComponent {
modalType,
formVals,
dispatch,
deptSelectTree,
handleModalVisible: this.handleModalVisible, // Function
};