From 7f4d070e223eeeffc1b5554fff1aa478040c1cdc Mon Sep 17 00:00:00 2001 From: zhenxianyimeng <1920405993@qq.com> Date: Wed, 10 Jul 2019 23:17:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=9B=B4=E6=96=B0=E5=92=8C?= =?UTF-8?q?=E6=96=B0=E5=A2=9Emodal=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/src/models/admin/deptmentList.js | 38 ++++- admin-web/src/pages/Admin/DeptmentList.js | 156 ++++++++++++++++++++- admin-web/src/services/admin.js | 24 ++++ 3 files changed, 216 insertions(+), 2 deletions(-) diff --git a/admin-web/src/models/admin/deptmentList.js b/admin-web/src/models/admin/deptmentList.js index 5b393718c..ab44614ea 100644 --- a/admin-web/src/models/admin/deptmentList.js +++ b/admin-web/src/models/admin/deptmentList.js @@ -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 = {}; diff --git a/admin-web/src/pages/Admin/DeptmentList.js b/admin-web/src/pages/Admin/DeptmentList.js index ad38eea3c..a741a72c8 100644 --- a/admin-web/src/pages/Admin/DeptmentList.js +++ b/admin-web/src/pages/Admin/DeptmentList.js @@ -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 ( + handleModalVisible()} + > + + {form.getFieldDecorator('name', { + initialValue: initValues.name, + rules: [{ required: true, message: '请输入部门名称！', min: 2 }], + })()} + + + {form.getFieldDecorator('sort', { + initialValue: initValues.sort, + })()} + + + {form.getFieldDecorator('pid', { + rules: [{ required: true, message: '请选择父级编号！' }], + initialValue: + initValues.pid === 0 + ? `根节点-${initValues.pid}` + : initValues.pid + ? `${initValues.name}-${initValues.pid}` + : undefined, + })( + + )} + + + ); +}); @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" /> + ); } diff --git a/admin-web/src/services/admin.js b/admin-web/src/services/admin.js index 913773f17..d39953d0e 100644 --- a/admin-web/src/services/admin.js +++ b/admin-web/src/services/admin.js @@ -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) {