部门更新和新增modal框

This commit is contained in:
zhenxianyimeng 2019-07-10 23:17:59 +08:00
parent f3abed3a72
commit 7f4d070e22
3 changed files with 216 additions and 2 deletions

View File

@ -1,5 +1,20 @@
import { message } from 'antd';
import { deptTreePage } from '../../services/admin';
import { deptTreePage, deptTreeAll, addDeptment, updateDeptment } from '../../services/admin';
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: 'deptmentList',
@ -13,6 +28,27 @@ export default {
},
effects: {
*add({ payload }, { call, put }) {
const { onSuccess, body } = payload;
const response = yield call(addDeptment, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
}
},
*update({ payload }, { call, put }) {
const { onSuccess, body } = payload;
const response = yield call(updateDeptment, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
}
},
*getDeptmentAll({ payload }, { call, put }) {
const result = yield call(deptTreeAll, payload);
yield put({
type: 'treeSuccess',
payload: result.data,
});
},
*getDeptmentList({ payload }, { call, put }) {
const result = yield call(deptTreePage, payload);
let deptmentData = {};

View File

@ -1,10 +1,95 @@
import React, { PureComponent, Fragment } from 'react';
import { Button, Card, Table, Form, Divider } from 'antd';
import { Button, Card, Table, Form, Divider, Modal, Input, TreeSelect, message } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import styles from './DeptmentList.less';
import PaginationHelper from '../../../helpers/PaginationHelper';
import moment from 'moment';
const FormItem = Form.Item;
// 添加 form 表单
const CreateForm = Form.create()(props => {
const {
modalVisible,
form,
handleAdd,
handleModalVisible,
modalType,
initValues,
selectTree,
} = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
let pid = fieldsValue.pid;
if (fieldsValue.pid) {
pid = pid.split('-')[1];
fieldsValue.pid = pid;
}
form.resetFields();
handleAdd({
fields: fieldsValue,
modalType,
initValues,
});
});
};
const selectStyle = {
width: 200,
};
function onTypeChange(event) {
initValues.type = parseInt(event.target.value);
}
// type 赋予初始值
initValues.type = initValues.type || 1;
const title = modalType === 'add' ? '添加部门' : '编辑部门';
const okText = modalType === 'add' ? '添加' : '编辑';
return (
<Modal
destroyOnClose
title={title}
visible={modalVisible}
onOk={okHandle}
okText={okText}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="部门名称">
{form.getFieldDecorator('name', {
initialValue: initValues.name,
rules: [{ required: true, message: '请输入部门名称', min: 2 }],
})(<Input placeholder="部门名称" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="部门排序">
{form.getFieldDecorator('sort', {
initialValue: initValues.sort,
})(<Input placeholder="部门排序" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级部门">
{form.getFieldDecorator('pid', {
rules: [{ required: true, message: '请选择父级编号' }],
initialValue:
initValues.pid === 0
? `根节点-${initValues.pid}`
: initValues.pid
? `${initValues.name}-${initValues.pid}`
: undefined,
})(
<TreeSelect
showSearch
style={{ width: 300 }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={selectTree}
placeholder="选择父级部门"
/>
)}
</FormItem>
</Modal>
);
});
@connect(({ deptmentList, loading }) => ({
deptmentList,
@ -13,6 +98,12 @@ import moment from 'moment';
}))
@Form.create()
export default class DepetmentList extends PureComponent {
state = {
modalVisible: false,
modalType: 'add', //add or update
initValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
@ -23,8 +114,70 @@ export default class DepetmentList extends PureComponent {
});
}
handleModalVisible = (flag, modalType, initValues) => {
this.setState({
modalVisible: !!flag,
initValues: initValues || {},
modalType: modalType || 'add',
});
if (flag) {
//query treeSelect
const { dispatch } = this.props;
dispatch({
type: 'deptmentList/getDeptmentAll',
payload: {},
});
}
};
handleAdd = ({ fields, modalType, initValues }) => {
const { dispatch } = this.props;
if (modalType === 'add') {
dispatch({
type: 'deptmentList/add',
payload: {
body: {
...fields,
},
onSuccess: () => {
message.success('添加成功');
this.handleModalVisible();
},
onFail: response => {
message.warn('添加失败' + response.message);
},
},
});
} else {
dispatch({
type: 'deptmentList/update',
payload: {
body: {
...initValues,
...fields,
},
onSuccess: () => {
message.success('更新成功成功');
this.handleModalVisible();
},
onFail: response => {
message.warn('更新失败' + response.message);
},
},
});
}
};
render() {
const { deptmentData, deptmentList } = this.props;
const { selectTree } = deptmentList;
const { modalVisible, modalType, initValues } = this.state;
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
modalType,
initValues,
};
const columns = [
{
title: '部门名称',
@ -80,6 +233,7 @@ export default class DepetmentList extends PureComponent {
rowKey="id"
/>
</Card>
<CreateForm {...parentMethods} selectTree={selectTree} modalVisible={modalVisible} />
</PageHeaderWrapper>
);
}

View File

@ -56,12 +56,36 @@ export async function adminRoleAssign(params) {
}
// deptment
export async function addDeptment(params) {
return request('/admin-api/admins/dept/add', {
method: 'POST',
body: {
...params,
},
});
}
export async function updateDeptment(params) {
return request('/admin-api/admins/dept/update', {
method: 'POST',
body: {
...params,
},
});
}
export async function deptTreePage(params) {
return request(`/admin-api/admins/dept/tree/page?${stringify(params)}`, {
method: 'GET',
});
}
export async function deptTreeAll() {
return request('/admin-api/admins/dept/tree/all', {
method: 'GET',
});
}
// resource
export async function addResource(params) {