167 lines
5.3 KiB
JavaScript
167 lines
5.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Form, Input, Radio, InputNumber, TreeSelect, Spin } 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'
|
|
|
|
const initialValues = {
|
|
type: 1,
|
|
sort: 100
|
|
}
|
|
export default class form extends Component {
|
|
|
|
state = {
|
|
// 加载状态
|
|
loading: true,
|
|
options: {
|
|
dicTreeData: []
|
|
}
|
|
}
|
|
|
|
// 表单实例
|
|
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)
|
|
const treeData = await this.loadDicTreeData()
|
|
this.setState({
|
|
options: {
|
|
dicTreeData: treeData
|
|
}
|
|
})
|
|
|
|
this.record = {
|
|
pid: params.pid,
|
|
...this.record
|
|
}
|
|
|
|
if (this.record.code) {
|
|
this.record.type = 2;
|
|
this.setState({
|
|
type: 2
|
|
})
|
|
}
|
|
|
|
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 从前段转换后端所需格式
|
|
//#endregion
|
|
return postData
|
|
}
|
|
}
|
|
//#region 自定义方法
|
|
async loadDicTreeData() {
|
|
const { data } = await api.sysDictTypeTree()
|
|
return [{
|
|
id: EMPTY_ID,
|
|
parentId: undefined,
|
|
title: '顶级',
|
|
value: EMPTY_ID,
|
|
pid: undefined,
|
|
children: data,
|
|
}]
|
|
}
|
|
|
|
//#endregion
|
|
|
|
render() {
|
|
return (
|
|
<Form
|
|
initialValues={initialValues}
|
|
ref={this.form}
|
|
className="yo-form"
|
|
onValuesChange={(changeValues) => {
|
|
if (changeValues.hasOwnProperty('type')) {
|
|
this.setState({
|
|
type: changeValues.type
|
|
})
|
|
}
|
|
}}
|
|
>
|
|
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
|
<div className="yo-form-group">
|
|
{/* 表单控件 */}
|
|
<Form.Item label="类型名称" name="name" rules={[{ required: true, message: '请输入类型名称' }]}>
|
|
<Input autoComplete="off" placeholder="请输入类型名称" />
|
|
</Form.Item>
|
|
<Form.Item label="类型" name="type" rules={[{ required: true, message: '请选择需要添加的数据类型' }]}>
|
|
<Radio.Group>
|
|
<Radio.Button value={1}>
|
|
目录
|
|
</Radio.Button>
|
|
<Radio.Button value={2}>
|
|
字典类型
|
|
</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
<Form.Item label="父结点" name="pid" rules={[{ required: true, message: '请选择父结点' }]}>
|
|
<TreeSelect
|
|
treeData={this.state.options.dicTreeData}
|
|
dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
|
|
treeDefaultExpandAll
|
|
placeholder="请选择父结点"
|
|
/>
|
|
</Form.Item>
|
|
{this.state.type == 2 &&
|
|
<>
|
|
<Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码' }]}>
|
|
<Input autoComplete="off" placeholder="请输入唯一编码" />
|
|
</Form.Item>
|
|
</>
|
|
}
|
|
<Form.Item label="排序" name="sort">
|
|
<InputNumber
|
|
min={0}
|
|
placeholder="请输入排序"
|
|
className="w-100-p"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label="备注" name="remark">
|
|
<Input.TextArea placeholder="请输入备注" />
|
|
</Form.Item>
|
|
{/* ... */}
|
|
</div>
|
|
</Spin>
|
|
</Form>
|
|
)
|
|
}
|
|
}
|