update 人员管理/用户管理

2021-06-25 17:36:15 +08:00
parent f6b9a81314
commit 934fc76a10
6 changed files with 504 additions and 104 deletions
--- a/web-react/src/pages/system/user/data.jsx
+++ 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 (
+            <Form ref={this.form} className="yo-form">
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <Form.Item label="选择机构" name="grantOrgIdList">
+                            <TreeSelect
+                                showCheckedStrategy="SHOW_PARENT"
+                                treeData={this.state.options.orgData}
+                                placeholder="请选择机构"
+                                treeCheckable
+                            />
+                        </Form.Item>
+                        <Form.Item label="选择区域" name="grantAreaCodeList">
+                            <TreeSelect
+                                showCheckedStrategy="SHOW_PARENT"
+                                treeData={this.state.options.areaData}
+                                placeholder="请选择所属区域"
+                                treeCheckable
+                            />
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}