部门更新和新增modal框
This commit is contained in:
parent
f3abed3a72
commit
7f4d070e22
@ -1,5 +1,20 @@
|
|||||||
import { message } from 'antd';
|
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 {
|
export default {
|
||||||
namespace: 'deptmentList',
|
namespace: 'deptmentList',
|
||||||
@ -13,6 +28,27 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
effects: {
|
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 }) {
|
*getDeptmentList({ payload }, { call, put }) {
|
||||||
const result = yield call(deptTreePage, payload);
|
const result = yield call(deptTreePage, payload);
|
||||||
let deptmentData = {};
|
let deptmentData = {};
|
||||||
|
@ -1,10 +1,95 @@
|
|||||||
import React, { PureComponent, Fragment } from 'react';
|
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 PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
import { connect } from 'dva';
|
import { connect } from 'dva';
|
||||||
import styles from './DeptmentList.less';
|
import styles from './DeptmentList.less';
|
||||||
import PaginationHelper from '../../../helpers/PaginationHelper';
|
import PaginationHelper from '../../../helpers/PaginationHelper';
|
||||||
import moment from 'moment';
|
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 }) => ({
|
@connect(({ deptmentList, loading }) => ({
|
||||||
deptmentList,
|
deptmentList,
|
||||||
@ -13,6 +98,12 @@ import moment from 'moment';
|
|||||||
}))
|
}))
|
||||||
@Form.create()
|
@Form.create()
|
||||||
export default class DepetmentList extends PureComponent {
|
export default class DepetmentList extends PureComponent {
|
||||||
|
state = {
|
||||||
|
modalVisible: false,
|
||||||
|
modalType: 'add', //add or update
|
||||||
|
initValues: {},
|
||||||
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { dispatch } = this.props;
|
const { dispatch } = this.props;
|
||||||
dispatch({
|
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() {
|
render() {
|
||||||
const { deptmentData, deptmentList } = this.props;
|
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 = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: '部门名称',
|
title: '部门名称',
|
||||||
@ -80,6 +233,7 @@ export default class DepetmentList extends PureComponent {
|
|||||||
rowKey="id"
|
rowKey="id"
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
<CreateForm {...parentMethods} selectTree={selectTree} modalVisible={modalVisible} />
|
||||||
</PageHeaderWrapper>
|
</PageHeaderWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -56,12 +56,36 @@ export async function adminRoleAssign(params) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// deptment
|
// 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) {
|
export async function deptTreePage(params) {
|
||||||
return request(`/admin-api/admins/dept/tree/page?${stringify(params)}`, {
|
return request(`/admin-api/admins/dept/tree/page?${stringify(params)}`, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function deptTreeAll() {
|
||||||
|
return request('/admin-api/admins/dept/tree/all', {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// resource
|
// resource
|
||||||
|
|
||||||
export async function addResource(params) {
|
export async function addResource(params) {
|
||||||
|
Loading…
Reference in New Issue
Block a user