ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 实现部分表单使用detail获取详细数据

Browse Source
This commit is contained in:
自带大佬气场
2021-06-28 20:45:33 +08:00
parent 54955e26e5
commit e8dd6f4eca
13 changed files with 328 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
web-react/src/pages/system/user/form.jsx
View File

@@ -1,5 +1,17 @@
import React, { Component } from 'react'
import { Button, Row, Col, Form, Input, DatePicker, Radio, Table, Select, Spin, TreeSelect } from 'antd'
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'
@@ -9,25 +21,24 @@ import moment from 'moment'
const initialValues = {
sex: 0,
sysEmpParam: {}
sysEmpParam: {},
}
export default class form extends Component {
state = {
// 加载状态
loading: true,
codes: {
orgType: []
orgType: [],
},
options: {
orgData: [],
posData: []
posData: [],
},
sysEmpParam: {
extIds: []
}
extIds: [],
},
}
extColumns = [
{
@@ -45,7 +56,7 @@ export default class form extends Component {
placeholder="请选择附加组织机构"
/>
</Form.Item>
)
),
},
{
title: '附属岗位',
@@ -56,33 +67,28 @@ export default class form extends Component {
<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>
})
}
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 onClick={() => this.onRemoveExtData(record)} size="small" danger>
删除
</Button>
)
),
},
]
// 表单实例
@@ -102,11 +108,13 @@ export default class form extends Component {
* 填充数据
* 可以在设置this.record之后对其作出数据结构调整
* [异步,必要]
* @param {*} params
* @param {*} params
*/
async fillData(params) {
this.record = cloneDeep(params.record || {})
//#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')
@@ -118,17 +126,17 @@ export default class form extends Component {
// 提交的时候是"param",而获取下来却是"info",在这里转换一下
if (this.record.sysEmpInfo) {
this.record.sysEmpParam = this.record.sysEmpInfo;
delete 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);
this.record.sysEmpParam.posIdList = this.record.sysEmpParam.positions.map(p => p.posId)
}
// 附加信息
@@ -138,12 +146,12 @@ export default class form extends Component {
key: i,
orgId: p.orgId,
posId: p.posId,
};
});
}
})
}
if (params.orgId) {
this.record.sysEmpParam.orgId = params.orgId;
this.record.sysEmpParam.orgId = params.orgId
}
this.setState({
@@ -154,18 +162,18 @@ export default class form extends Component {
posData,
},
sysEmpParam: {
...this.record.sysEmpParam
}
...this.record.sysEmpParam,
},
})
this.record = {
...this.record
...this.record,
}
//#endregion
this.form.current.setFieldsValue(this.record)
this.setState({
loading: false
loading: false,
})
}
@@ -173,7 +181,7 @@ export default class form extends Component {
* 获取数据
* 可以对postData进行数据结构调整
* [异步,必要]
* @returns
* @returns
*/
async getData() {
const form = this.form.current
@@ -206,24 +214,26 @@ export default class form extends Component {
const record = {
key: extIds.length > 0 ? extIds[extIds.length - 1].key + 1 : 0,
orgId: undefined,
posId: undefined
posId: undefined,
}
this.setState({
sysEmpParam: {
extIds: [...extIds, record]
this.setState(
{
sysEmpParam: {
extIds: [...extIds, record],
},
},
() => {
console.log(this.form.current.getFieldsValue())
}
}, () => {
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);
remove = ext.find(p => p.key === record.key),
index = ext.indexOf(remove)
ext.splice(index, 1);
ext.splice(index, 1)
console.log(ext)
// this.form.current.setFieldsValue({
@@ -232,14 +242,16 @@ export default class form extends Component {
// }
// })
this.setState({
sysEmpParam: {
extIds: ext
this.setState(
{
sysEmpParam: {
extIds: ext,
},
},
() => {
//console.log(this.form.current.getFieldsValue())
}
}, () => {
//console.log(this.form.current.getFieldsValue())
})
)
}
//#endregion
renderExtInfoTable() {
@@ -251,79 +263,100 @@ export default class form extends Component {
pagination={false}
size="small"
bordered
rowKey={(record) => record.key}
footer={
() =>
<Button
block
icon={
<AntIcon type="plus" />
}
type="dashed"
onClick={() => this.onAddExtData()}>
新增一项</Button>
}
>
</Table>
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" />}>
<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' }]}>
<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' }]}>
<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" >
{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" >
<Form.Item label="生日" name="birthday">
<DatePicker className="w-100-p" />
</Form.Item>
<Form.Item label="性别" name="sex" >
<Radio.Group >
<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" />
<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" />
<AntIcon
style={{ color: '#eb2f96' }}
className="mr-xxs"
type="woman"
/>
<span>女</span>
</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="邮箱" name="email" >
<Form.Item label="邮箱" name="email">
<Input autoComplete="off" placeholder="请输入邮箱" />
</Form.Item>
<Form.Item label="手机号" name="phone" >
<Form.Item label="手机号" name="phone">
<Input autoComplete="off" placeholder="请输入手机号" />
</Form.Item>
<Form.Item label="电话" name="tel" >
<Form.Item label="电话" name="tel">
<Input autoComplete="off" placeholder="请输入电话" />
</Form.Item>
</div>
@@ -332,7 +365,8 @@ export default class form extends Component {
<Form.Item
label="所属组织机构"
name={['sysEmpParam', 'orgId']}
rules={[{ required: true, message: '所属组织机构' }]}>
rules={[{ required: true, message: '所属组织机构' }]}
>
<TreeSelect
treeData={this.state.options.orgData}
dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
@@ -340,26 +374,18 @@ export default class form extends Component {
placeholder="请选择所属组织机构"
/>
</Form.Item>
<Form.Item
label="工号"
name={['sysEmpParam', 'jobNum']} >
<Input
autoComplete="off"
placeholder="请输入工号" />
<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 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>