update 选房人员管理
This commit is contained in:
@@ -1,11 +1,257 @@
|
|||||||
import React, { Component } from 'react'
|
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 {
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Form initialValues={initialValues} ref={this.form} className="yo-form">
|
||||||
1
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||||
</div>
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ const apiAction = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 用于弹窗标题
|
// 用于弹窗标题
|
||||||
const name = '用户'
|
const name = '人员'
|
||||||
|
|
||||||
export default class index extends Component {
|
export default class index extends Component {
|
||||||
state = {
|
state = {
|
||||||
|
|||||||
Reference in New Issue
Block a user