部门更新和新增modal框
This commit is contained in:
parent
f3abed3a72
commit
7f4d070e22
@ -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 = {};
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user