import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Tooltip, InputNumber, Select, Radio, Cascader } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable'))
|
const StyleInput = asyncComponent(() => import('@/components/normalform/modalform/styleInput'))
|
|
class SettingForm extends Component {
|
static propTpyes = {
|
formlist: PropTypes.array, // 表单
|
inputSubmit: PropTypes.func // 回车事件
|
}
|
|
state = {
|
formlist: [],
|
}
|
|
UNSAFE_componentWillMount() {
|
const { formlist } = this.props
|
|
this.setState({formlist: fromJS(formlist).toJS()})
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
handleSubmit = (e) => {
|
e.preventDefault()
|
|
if (this.props.inputSubmit) {
|
this.props.inputSubmit()
|
}
|
}
|
|
optionChange = (item, val) => {
|
if (item.key === 'click') {
|
this.setState({formlist: fromJS(this.state.formlist).toJS().map(cell => {
|
if (!['menu', 'menuType', 'open', 'joint', 'menus'].includes(cell.key)) return cell
|
|
if (val === 'menu') {
|
cell.hidden = !['menu', 'open', 'joint'].includes(cell.key)
|
} else if (val === 'menus') {
|
cell.hidden = !['menuType', 'open', 'joint', 'menus'].includes(cell.key)
|
} else {
|
cell.hidden = true
|
}
|
|
return cell
|
})})
|
}
|
}
|
|
getFields() {
|
const { formlist } = this.state
|
const { getFieldDecorator } = this.props.form
|
|
const fields = []
|
|
formlist.forEach((item, index) => {
|
if (item.hidden || item.forbid) return
|
|
let content = null
|
let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> : item.label
|
|
if (item.type === 'text') {
|
content = (<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)
|
} else if (item.type === 'number') {
|
content = (<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)
|
} else if (item.type === 'styleInput') {
|
content = (<StyleInput config={item}/>)
|
} else if (item.type === 'select') {
|
content = (<Select mode={item.multi ? 'multiple' : ''}>
|
{item.options.map((option, index) =>
|
<Select.Option key={index} value={option.field || option.value}>
|
{option.label || option.text}
|
</Select.Option>
|
)}
|
</Select>)
|
} else if (item.type === 'radio') {
|
content = (<Radio.Group onChange={(e) => this.optionChange(item, e.target.value)}>
|
{item.options.map(option => {
|
return (
|
<Radio key={option.value} value={option.field || option.value}>{option.label || option.text}</Radio>
|
)
|
})}
|
</Radio.Group>)
|
} else if (item.type === 'cascader') {
|
content = (<Cascader options={item.options} placeholder=""/>)
|
} else if (item.type === 'table') {
|
content = (<MKTable columns={item.columns || []} actions={item.actions || []}/>)
|
}
|
|
if (!content) return
|
|
fields.push(
|
<Col span={item.span || 12} key={index}>
|
<Form.Item label={label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: item.required,
|
message: (item.type === 'select' || item.type === 'cascader' ? '请选择' : '请输入') + item.label + '!'
|
}
|
]
|
})(content)}
|
</Form.Item>
|
</Col>
|
)
|
})
|
|
return fields
|
}
|
|
render() {
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div className="plot-base-wrap">
|
<Form {...formItemLayout}><Row gutter={16}>{this.getFields()}</Row></Form>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
