422 lines
15 KiB
JavaScript
422 lines
15 KiB
JavaScript
import React, { Component } from 'react'
|
|
import {
|
|
Button,
|
|
Row,
|
|
Col,
|
|
Form,
|
|
Input,
|
|
DatePicker,
|
|
Radio,
|
|
Table,
|
|
Select,
|
|
Spin,
|
|
TreeSelect,
|
|
} from 'antd'
|
|
import { AntIcon } from 'components'
|
|
import { cloneDeep } from 'lodash'
|
|
import getDictData from 'util/dic'
|
|
import { EMPTY_ID } from 'util/global'
|
|
import { api } from 'common/api'
|
|
import moment from 'moment'
|
|
|
|
const initialValues = {
|
|
sex: 0,
|
|
sysEmpParam: {},
|
|
}
|
|
|
|
export default class form extends Component {
|
|
state = {
|
|
// 加载状态
|
|
loading: true,
|
|
codes: {
|
|
orgType: [],
|
|
},
|
|
|
|
options: {
|
|
orgData: [],
|
|
posData: [],
|
|
},
|
|
sysEmpParam: {
|
|
extIds: [],
|
|
},
|
|
}
|
|
extColumns = [
|
|
{
|
|
title: '附属机构',
|
|
dataIndex: 'orgId',
|
|
width: '45%',
|
|
render: (text, record, index) => (
|
|
<Form.Item name={['sysEmpParam', 'extIds', index, 'orgId']}>
|
|
<TreeSelect
|
|
defaultValue={text}
|
|
treeData={this.state.options.orgData}
|
|
className="w-100-p"
|
|
dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
|
|
treeDefaultExpandAll
|
|
placeholder="请选择附加组织机构"
|
|
/>
|
|
</Form.Item>
|
|
),
|
|
},
|
|
{
|
|
title: '附属岗位',
|
|
dataIndex: 'posId',
|
|
width: '45%',
|
|
render: (text, record, index) => (
|
|
<Form.Item name={['sysEmpParam', 'extIds', index, 'posId']}>
|
|
<Select
|
|
defaultValue={text}
|
|
className="w-100-p"
|
|
placeholder="请选择附加职位信息"
|
|
>
|
|
{this.state.options.posData.map(item => {
|
|
return (
|
|
<Select.Option key={item.id} value={item.id}>
|
|
{item.name}
|
|
</Select.Option>
|
|
)
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
),
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: '70px',
|
|
render: (text, record) => (
|
|
<Button onClick={() => this.onRemoveExtData(record)} size="small" danger>
|
|
删除
|
|
</Button>
|
|
),
|
|
},
|
|
]
|
|
// 表单实例
|
|
form = React.createRef()
|
|
|
|
// 初始化数据
|
|
record = {}
|
|
|
|
/**
|
|
* mount后回调
|
|
*/
|
|
componentDidMount() {
|
|
this.props.created && this.props.created(this)
|
|
}
|
|
|
|
/**
|
|
* 填充数据
|
|
* 可以在设置this.record之后对其作出数据结构调整
|
|
* [异步,必要]
|
|
* @param {*} params
|
|
*/
|
|
async fillData(params) {
|
|
//#region 从后端转换成前段所需格式
|
|
if (params.id) {
|
|
this.record = (await api.sysUserDetail({ id: params.id })).data
|
|
}
|
|
const orgData = await this.loadOrgData()
|
|
const posData = await this.loadPosData()
|
|
const codes = await getDictData('org_type')
|
|
|
|
// 日期特殊处理
|
|
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 (this.record.sysEmpParam.positions) {
|
|
this.record.sysEmpParam.posIdList = this.record.sysEmpParam.positions.map(p => p.posId)
|
|
}
|
|
|
|
// 附加信息
|
|
if (this.record.sysEmpParam.extOrgPos) {
|
|
this.record.sysEmpParam.extIds = this.record.sysEmpParam.extOrgPos.map((p, i) => {
|
|
return {
|
|
key: i,
|
|
orgId: p.orgId,
|
|
posId: p.posId,
|
|
}
|
|
})
|
|
}
|
|
|
|
if (params.orgId) {
|
|
this.record.sysEmpParam.orgId = params.orgId
|
|
}
|
|
|
|
this.setState({
|
|
codes,
|
|
options: {
|
|
...this.state.options,
|
|
orgData,
|
|
posData,
|
|
},
|
|
sysEmpParam: {
|
|
...this.record.sysEmpParam,
|
|
},
|
|
})
|
|
|
|
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 loadPosData() {
|
|
const { data } = await api.sysPosList()
|
|
return data
|
|
}
|
|
onAddExtData() {
|
|
const { extIds } = this.state.sysEmpParam
|
|
|
|
const record = {
|
|
key: extIds.length > 0 ? extIds[extIds.length - 1].key + 1 : 0,
|
|
orgId: undefined,
|
|
posId: undefined,
|
|
}
|
|
|
|
this.setState(
|
|
{
|
|
sysEmpParam: {
|
|
extIds: [...extIds, record],
|
|
},
|
|
},
|
|
() => {
|
|
console.log(this.form.current.getFieldsValue())
|
|
}
|
|
)
|
|
}
|
|
onRemoveExtData(record) {
|
|
const ext = this.state.sysEmpParam.extIds,
|
|
remove = ext.find(p => p.key === record.key),
|
|
index = ext.indexOf(remove)
|
|
|
|
ext.splice(index, 1)
|
|
console.log(ext)
|
|
|
|
// this.form.current.setFieldsValue({
|
|
// sysEmpParam: {
|
|
// extIds: {}
|
|
// }
|
|
// })
|
|
|
|
this.setState(
|
|
{
|
|
sysEmpParam: {
|
|
extIds: ext,
|
|
},
|
|
},
|
|
() => {
|
|
//console.log(this.form.current.getFieldsValue())
|
|
}
|
|
)
|
|
}
|
|
//#endregion
|
|
renderExtInfoTable() {
|
|
//console.log(this.state.sysEmpParam.extIds)
|
|
return (
|
|
<Table
|
|
dataSource={this.state.sysEmpParam.extIds}
|
|
columns={this.extColumns}
|
|
pagination={false}
|
|
size="small"
|
|
bordered
|
|
rowKey={record => record.key}
|
|
footer={() => (
|
|
<Button
|
|
block
|
|
icon={<AntIcon type="plus" />}
|
|
type="dashed"
|
|
onClick={() => this.onAddExtData()}
|
|
>
|
|
新增一项
|
|
</Button>
|
|
)}
|
|
></Table>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Form initialValues={initialValues} ref={this.form} className="yo-form">
|
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
|
<h3 className="h3">基本信息</h3>
|
|
<div className="yo-form-group">
|
|
<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"
|
|
rules={[
|
|
{
|
|
pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
|
|
message: '邮箱格式不正确',
|
|
trigger: 'blur',
|
|
},
|
|
]}
|
|
>
|
|
<Input autoComplete="off" placeholder="请输入邮箱" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="手机号"
|
|
name="phone"
|
|
rules={[
|
|
{
|
|
pattern:
|
|
/^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/,
|
|
message: '手机号格式不正确',
|
|
trigger: 'blur',
|
|
},
|
|
]}
|
|
>
|
|
<Input autoComplete="off" placeholder="请输入手机号" />
|
|
</Form.Item>
|
|
<Form.Item label="电话" name="tel">
|
|
<Input autoComplete="off" placeholder="请输入电话" />
|
|
</Form.Item>
|
|
</div>
|
|
<h3 className="h3">员工信息</h3>
|
|
<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={['sysEmpParam', 'jobNum']}>
|
|
<Input autoComplete="off" placeholder="请输入工号" />
|
|
</Form.Item>
|
|
<Form.Item label="职位信息" name={['sysEmpParam', 'posIdList']}>
|
|
<Select mode="multiple" placeholder="请选择职位信息">
|
|
{this.state.options.posData.map(item => {
|
|
return (
|
|
<Select.Option key={item.id} value={item.id}>
|
|
{item.name}
|
|
</Select.Option>
|
|
)
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
</div>
|
|
{/* <h4 className="h4">附加信息</h4>
|
|
<div className="pl-md pr-md">
|
|
{this.renderExtInfoTable()}
|
|
</div> */}
|
|
</Spin>
|
|
</Form>
|
|
)
|
|
}
|
|
}
|