From 934fc76a10bb9652ce6052f7ea4a0b574cefa933 Mon Sep 17 00:00:00 2001 From: ky_yusj <2655568377@qq.com> Date: Fri, 25 Jun 2021 17:36:15 +0800 Subject: [PATCH] =?UTF-8?q?update=20=20=E4=BA=BA=E5=91=98=E7=AE=A1?= =?UTF-8?q?=E7=90=86/=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/business/house/member/data.jsx | 115 ++++++++++ .../src/pages/business/house/member/index.jsx | 16 ++ web-react/src/pages/system/role/data.jsx | 57 +++-- web-react/src/pages/system/user/data.jsx | 115 ++++++++++ web-react/src/pages/system/user/index.jsx | 206 +++++++++++------- web-react/src/pages/system/user/role.jsx | 99 +++++++++ 6 files changed, 504 insertions(+), 104 deletions(-) create mode 100644 web-react/src/pages/business/house/member/data.jsx create mode 100644 web-react/src/pages/system/user/data.jsx create mode 100644 web-react/src/pages/system/user/role.jsx diff --git a/web-react/src/pages/business/house/member/data.jsx b/web-react/src/pages/business/house/member/data.jsx new file mode 100644 index 0000000..7e6db71 --- /dev/null +++ b/web-react/src/pages/business/house/member/data.jsx @@ -0,0 +1,115 @@ +import React, { Component } from 'react' +import { Form, Spin, TreeSelect } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep } from 'lodash' +import { api } from 'common/api' + +export default class dataForm extends Component { + state = { + // 加载状态 + loading: true, + + options: { + orgData: [], + areaData: [], + orgCheckedKeys: [], + }, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * mount后回调 + */ + componentDidMount() { + this.props.created && this.props.created(this) + } + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const orgData = await this.loadOrgData() + const areaData = await this.loadAreaData() + const orgCheckedKeys = await this.loadMemberOwn(this.record.id) + this.setState({ + options: { + orgData, + areaData, + orgCheckedKeys, + }, + }) + this.form.current.setFieldsValue({ + id: this.record.id, + grantOrgIdList: orgCheckedKeys, + grantAreaCodeList: [], + }) + + this.setState({ + loading: false, + }) + } + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + if (this.record) { + postData.id = this.record.id + } + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + async loadOrgData() { + const { data } = await api.getOrgTree() + return data + } + + async loadAreaData() { + const { data } = await api.getAreaTree() + return data + } + async loadMemberOwn(id) { + const { data } = await api.houseMemberOwnData({ id }) + return data + } + render() { + return ( +
+ }> +
+ + + + + + +
+ +
+ ) + } +} diff --git a/web-react/src/pages/business/house/member/index.jsx b/web-react/src/pages/business/house/member/index.jsx index 3780bdc..b0d03f9 100644 --- a/web-react/src/pages/business/house/member/index.jsx +++ b/web-react/src/pages/business/house/member/index.jsx @@ -20,6 +20,7 @@ import { isEqual } from 'lodash' import getDictData from 'util/dic' import FormBody from './form' import Selector from './selector' +import DataForm from './data' // 配置页面所需接口函数 const apiAction = { @@ -31,6 +32,8 @@ const apiAction = { changeStatus: api.houseMemberChangeStatus, resetPwd: api.sysUserResetPwd, + + grantData: api.houseMemberGrantData, } // 用于弹窗标题 @@ -52,6 +55,7 @@ export default class index extends Component { // 编辑窗口实例 editForm = React.createRef() + dataForm = React.createRef() // 树选中节点 selectId = undefined @@ -200,6 +204,9 @@ export default class index extends Component { this.onResetPassword(record)}>重置密码 , + + this.onOpen(this.dataForm, record)}>授权额外数据 + , ]} > + this.list.current.onReloadData()} + > + + + +
}>
- this.onChange(value)} + > + {this.state.dataScopeType.map(item => { + return ( + + {item.value} + + ) + })} - { - this.state.isDefine && + {this.state.isDefine && ( <> - + - } + )}
diff --git a/web-react/src/pages/system/user/data.jsx b/web-react/src/pages/system/user/data.jsx new file mode 100644 index 0000000..88f6a0d --- /dev/null +++ b/web-react/src/pages/system/user/data.jsx @@ -0,0 +1,115 @@ +import React, { Component } from 'react' +import { Form, Spin, TreeSelect } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep } from 'lodash' +import { api } from 'common/api' + +export default class data extends Component { + state = { + // 加载状态 + loading: true, + + options: { + orgData: [], + areaData: [], + orgCheckedKeys: [], + }, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * mount后回调 + */ + componentDidMount() { + this.props.created && this.props.created(this) + } + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const orgData = await this.loadOrgData() + const areaData = await this.loadAreaData() + const orgCheckedKeys = await this.loadMemberOwn(this.record.id) + this.setState({ + options: { + orgData, + areaData, + orgCheckedKeys, + }, + }) + this.form.current.setFieldsValue({ + id: this.record.id, + grantOrgIdList: orgCheckedKeys, + grantAreaCodeList: [], + }) + + this.setState({ + loading: false, + }) + } + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + if (this.record) { + postData.id = this.record.id + } + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + async loadOrgData() { + const { data } = await api.getOrgTree() + return data + } + + async loadAreaData() { + const { data } = await api.getAreaTree() + return data + } + async loadMemberOwn(id) { + const { data } = await api.sysUserOwnData({ id }) + return data + } + render() { + return ( +
+ }> +
+ + + + + + +
+ +
+ ) + } +} diff --git a/web-react/src/pages/system/user/index.jsx b/web-react/src/pages/system/user/index.jsx index 24dd2c7..7418764 100644 --- a/web-react/src/pages/system/user/index.jsx +++ b/web-react/src/pages/system/user/index.jsx @@ -1,11 +1,26 @@ import React, { Component } from 'react' -import { Button, Card, Descriptions, Form, Input, List, message as Message, Popconfirm, Select, Switch } from 'antd' +import { + Button, + Card, + Descriptions, + Form, + Input, + List, + message as Message, + Popconfirm, + Select, + Switch, + Dropdown, + Menu, +} from 'antd' import { AntIcon, Auth, Container, Image, ModalForm, QueryList, QueryTreeLayout } from 'components' import { api } from 'common/api' import { toCamelCase } from 'util/format' import { isEqual } from 'lodash' import getDictData from 'util/dic' import FormBody from './form' +import RoleForm from './role' +import DataForm from './data' // 配置页面所需接口函数 const apiAction = { @@ -16,19 +31,21 @@ const apiAction = { delete: api.sysUserDelete, changeStatus: api.sysUserChangeStatus, - resetPwd: api.sysUserResetPwd + resetPwd: api.sysUserResetPwd, + + grantRole: api.sysUserGrantRole, + grantData: api.sysUserGrantData, } // 用于弹窗标题 const name = '用户' export default class index extends Component { - state = { codes: { sex: [], - commonStatus: [] - } + commonStatus: [], + }, } // 表格实例 @@ -39,6 +56,8 @@ export default class index extends Component { // 编辑窗口实例 editForm = React.createRef() + roleForm = React.createRef() + dataForm = React.createRef() // 树选中节点 selectId = undefined @@ -46,9 +65,9 @@ export default class index extends Component { * 阻止外部组件引发的渲染,提升性能 * 可自行添加渲染条件 * [必要] - * @param {*} props - * @param {*} state - * @returns + * @param {*} props + * @param {*} state + * @returns */ shouldComponentUpdate(props, state) { return !isEqual(this.state, state) @@ -61,28 +80,30 @@ export default class index extends Component { componentDidMount() { this.list.current.onLoading() getDictData('sex', 'common_status').then(res => { - this.setState({ - codes: res - }, () => { - this.list.current.onLoadData() - }) + this.setState( + { + codes: res, + }, + () => { + this.list.current.onLoadData() + } + ) }) } /** * 调用加载数据接口,可在调用前对query进行处理 * [异步,必要] - * @param {*} params - * @param {*} query - * @returns + * @param {*} params + * @param {*} query + * @returns */ loadData = async (params, query) => { - query = { ...query, sysEmpParam: { - orgId: this.selectId - } + orgId: this.selectId, + }, } const { data } = await apiAction.page({ @@ -105,7 +126,7 @@ export default class index extends Component { /** * 树节点选中事件 * [必要] - * @param {*} id + * @param {*} id */ onSelectTree(id) { this.selectId = id @@ -114,15 +135,15 @@ export default class index extends Component { /** * 绑定字典数据 - * @param {*} code - * @param {*} name - * @returns + * @param {*} code + * @param {*} name + * @returns */ bindCodeValue(code, name) { name = toCamelCase(name) const codes = this.state.codes[name] if (codes) { - const c = codes.find((p) => p.code == code) + const c = codes.find(p => p.code == code) if (c) { return c.value } @@ -132,21 +153,21 @@ export default class index extends Component { /** * 打开新增/编辑弹窗 - * @param {*} modal - * @param {*} record + * @param {*} modal + * @param {*} record */ onOpen(modal, record) { modal.current.open({ orgId: this.selectId, - record + record, }) } /** * 对表格上的操作进行统一处理 * [异步] - * @param {*} action - * @param {*} successMessage + * @param {*} action + * @param {*} successMessage */ async onAction(action, successMessage) { this.list.current.onLoading() @@ -161,13 +182,10 @@ export default class index extends Component { /** * 删除 - * @param {*} record + * @param {*} record */ onDelete(record) { - this.onAction( - apiAction.delete(record), - '删除成功' - ) + this.onAction(apiAction.delete(record), '删除成功') } //#region 自定义方法 @@ -175,25 +193,51 @@ export default class index extends Component { return ( - this.onOpen(this.editForm, record)}>编辑 - , - - this.onDelete(record)} - > - 删除 - - , - - this.onResetPassword(record)}>重置密码 - - ] - } + actions={[ + + this.onOpen(this.editForm, record)}>编辑 + , + + this.onDelete(record)} + > + 删除 + + , + + this.onResetPassword(record)}>重置密码 + , + + + + + this.onOpen(this.roleForm, record)}> + 授权角色 + + + + + + this.onOpen(this.dataForm, record)}> + 授权额外数据 + + + + + } + > + + 授权 + + + + , + ]} > - {this.bindCodeValue(record.sex, 'sex')} + + {this.bindCodeValue(record.sex, 'sex')} + {record.phone || '未设置'} {record.email || '未设置'} @@ -228,21 +274,14 @@ export default class index extends Component { ) - } onSetUserStatus(record, checked) { - this.onAction( - apiAction.changeStatus({ id: record.id, status: +!checked }), - '设置成功' - ) + this.onAction(apiAction.changeStatus({ id: record.id, status: +!checked }), '设置成功') } onResetPassword(record) { - this.onAction( - apiAction.resetPwd(record), - '重置成功' - ) + this.onAction(apiAction.resetPwd(record), '重置成功') } //#endregion @@ -251,7 +290,7 @@ export default class index extends Component { this.onSelectTree(key)} + onSelect={key => this.onSelectTree(key)} > @@ -273,14 +312,13 @@ export default class index extends Component { placeholder="请选择状态" className="w-200" > - { - this.state.codes.commonStatus.map(item => { - return {item.value} - }) - } + {this.state.codes.commonStatus.map(item => { + return ( + + {item.value} + + ) + })} @@ -289,9 +327,11 @@ export default class index extends Component { + > + 新增{name} + } - renderItem={(record) => this.renderItem(record)} + renderItem={record => this.renderItem(record)} /> @@ -313,6 +353,24 @@ export default class index extends Component { > + + this.list.current.onReloadData()} + > + + + + this.list.current.onReloadData()} + > + + ) } diff --git a/web-react/src/pages/system/user/role.jsx b/web-react/src/pages/system/user/role.jsx new file mode 100644 index 0000000..beb472b --- /dev/null +++ b/web-react/src/pages/system/user/role.jsx @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import { Form, Spin, Select } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep } from 'lodash' +import { api } from 'common/api' + +export default class role extends Component { + state = { + // 加载状态 + loading: true, + + options: { + roleData: [], + }, + roles: [], + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * mount后回调 + */ + componentDidMount() { + this.props.created && this.props.created(this) + } + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const roleData = await this.loadRoleData() + const roles = await this.loadRole(this.record.id) + this.setState({ + options: { + roleData, + }, + roles, + }) + this.form.current.setFieldsValue({ + id: this.record.id, + grantRoleIdList: roles, + }) + + this.setState({ + loading: false, + }) + } + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + if (this.record) { + postData.id = this.record.id + } + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + async loadRoleData() { + const { data } = await api.getRolePage() + return data.items + } + async loadRole(id) { + const { data } = await api.sysUserOwnRole({ id }) + return data + } + render() { + return ( +
+ }> +
+ + + +
+ +
+ ) + } +}