From f6b9a813148daefad13d3c3fcd9dcc86afe96298 Mon Sep 17 00:00:00 2001
From: ky_yusj <2655568377@qq.com>
Date: Fri, 25 Jun 2021 11:37:43 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E9=80=89=E6=88=BF=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=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/form.jsx  | 252 +++++++++++++++++-
 .../src/pages/business/house/member/index.jsx |   2 +-
 2 files changed, 250 insertions(+), 4 deletions(-)

diff --git a/web-react/src/pages/business/house/member/form.jsx b/web-react/src/pages/business/house/member/form.jsx
index 70ee907..1857200 100644
--- a/web-react/src/pages/business/house/member/form.jsx
+++ b/web-react/src/pages/business/house/member/form.jsx
@@ -1,11 +1,257 @@
 import React, { Component } from 'react'
+import { Form, Input, DatePicker, Select, Radio, Spin, TreeSelect } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+import { api } from 'common/api'
+import moment from 'moment'
+
+const initialValues = {
+    sex: 0,
+    sysEmpParam: {},
+}
 
 export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+        lockRole: false,
+        options: {
+            orgData: [],
+            roleData: [],
+        },
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record || {})
+        //#region 从后端转换成前段所需格式
+        const orgData = await this.loadOrgData()
+        const roleData = await this.LoadRoleData()
+
+        // 日期特殊处理
+        if (this.record.birthday) {
+            this.record.birthday = moment(this.record.birthday)
+        }
+
+        // 提交的时候是"param",而获取下来却是"info",在这里转换一下
+        if (this.record.sysEmpInfo) {
+            this.record.sysEmpParam = this.record.sysEmpInfo
+            delete this.record.sysEmpInfo
+        } else if (!this.record.sysEmpParam) {
+            this.record.sysEmpParam = {
+                extIds: [],
+            }
+        }
+
+        if (params.orgId) {
+            this.record.sysEmpParam.orgId = params.orgId
+        }
+        const defaultRole = params.record
+            ? await this.loadOwnRole(params.record.id)
+            : params.orgId
+            ? await this.loadDefaultRole(params.orgId)
+            : []
+
+        if (defaultRole.constructor === Array) {
+            this.record.roleId = defaultRole.length > 0 ? defaultRole[0] : ''
+            this.setState({
+                lockRole: true,
+            })
+        } else {
+            this.record.roleId = defaultRole.id
+            this.setState({
+                lockRole: defaultRole.code === 'zone_manager',
+            })
+        }
+
+        this.setState({
+            options: {
+                ...this.state.options,
+                orgData,
+                roleData,
+            },
+        })
+
+        this.record = {
+            ...this.record,
+        }
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        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 从前段转换后端所需格式
+            //console.log(postData)
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    async loadOrgData() {
+        const { data } = await api.getOrgTree()
+        return data
+    }
+
+    async LoadRoleData() {
+        const { data } = await api.houseMemberDefaultRoleList()
+        return data
+    }
+    async loadOwnRole(id) {
+        const { data } = await api.houseMemberOwnRole({ id })
+        return data
+    }
+    async loadDefaultRole(orgId) {
+        const { data } = await api.houseMemberDefaultRole({ orgId })
+        return data
+    }
     render() {
         return (
-            <div>
-                1
-            </div>
+            <Form initialValues={initialValues} ref={this.form} className="yo-form">
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <Form.Item
+                            label="所属组织机构"
+                            name={['sysEmpParam', 'orgId']}
+                            rules={[{ required: true, message: '所属组织机构' }]}
+                        >
+                            <TreeSelect
+                                treeData={this.state.options.orgData}
+                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                treeDefaultExpandAll
+                                placeholder="请选择所属组织机构"
+                            />
+                        </Form.Item>
+                        <Form.Item
+                            label="角色"
+                            name="roleId"
+                            rules={[{ required: true, message: '请选择角色' }]}
+                            tooltip="片区内第一个用户必定为片区监管员，创建后不可更改角色"
+                        >
+                            <Select placeholder="请选择角色" disabled={this.state.lockRole}>
+                                {this.state.options.roleData.map(item => {
+                                    return (
+                                        <Select.Option key={item.id} value={item.id}>
+                                            {item.name}
+                                        </Select.Option>
+                                    )
+                                })}
+                            </Select>
+                        </Form.Item>
+                        <Form.Item
+                            label="账号"
+                            name="account"
+                            rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入账号" />
+                        </Form.Item>
+                        <Form.Item
+                            label="姓名"
+                            name="name"
+                            rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入姓名" />
+                        </Form.Item>
+                        {this.props.mode == 'add' && (
+                            <>
+                                <Form.Item
+                                    label="密码"
+                                    name="password"
+                                    rules={[
+                                        { required: true, message: '请输入密码', trigger: 'blur' },
+                                    ]}
+                                >
+                                    <Input.Password autoComplete="off" placeholder="请输入密码" />
+                                </Form.Item>
+                                <Form.Item
+                                    label="确认密码"
+                                    name="confirm"
+                                    rules={[
+                                        { required: true, message: '请确认密码', trigger: 'blur' },
+                                    ]}
+                                >
+                                    <Input.Password autoComplete="off" placeholder="请确认密码" />
+                                </Form.Item>
+                            </>
+                        )}
+                        <Form.Item label="昵称" name="nickName">
+                            <Input autoComplete="off" placeholder="请输入昵称" />
+                        </Form.Item>
+                        <Form.Item label="生日" name="birthday">
+                            <DatePicker className="w-100-p" />
+                        </Form.Item>
+                        <Form.Item label="性别" name="sex">
+                            <Radio.Group>
+                                <Radio.Button value={0}>
+                                    <AntIcon className="mr-xxs" type="stop" />
+                                    <span>保密</span>
+                                </Radio.Button>
+                                <Radio.Button value={1}>
+                                    <AntIcon
+                                        style={{ color: '#1890ff' }}
+                                        className="mr-xxs"
+                                        type="man"
+                                    />
+                                    <span>男</span>
+                                </Radio.Button>
+                                <Radio.Button value={2}>
+                                    <AntIcon
+                                        style={{ color: '#eb2f96' }}
+                                        className="mr-xxs"
+                                        type="woman"
+                                    />
+                                    <span>女</span>
+                                </Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item label="邮箱" name="email">
+                            <Input autoComplete="off" placeholder="请输入邮箱" />
+                        </Form.Item>
+                        <Form.Item label="手机号" name="phone">
+                            <Input autoComplete="off" placeholder="请输入手机号" />
+                        </Form.Item>
+                        <Form.Item label="电话" name="tel">
+                            <Input autoComplete="off" placeholder="请输入电话" />
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
         )
     }
 }
diff --git a/web-react/src/pages/business/house/member/index.jsx b/web-react/src/pages/business/house/member/index.jsx
index 1b67dae..3780bdc 100644
--- a/web-react/src/pages/business/house/member/index.jsx
+++ b/web-react/src/pages/business/house/member/index.jsx
@@ -34,7 +34,7 @@ const apiAction = {
 }
 
 // 用于弹窗标题
-const name = '用户'
+const name = '人员'
 
 export default class index extends Component {
     state = {