From e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 17 十月 2022 17:57:34 +0800
Subject: [PATCH] 2022-10-17
---
src/menu/components/share/normalform/index.jsx | 209 ++++++++++++++++++++--------------------------------
1 files changed, 81 insertions(+), 128 deletions(-)
diff --git a/src/menu/components/share/normalform/index.jsx b/src/menu/components/share/normalform/index.jsx
index 8fee07c..c8244d9 100644
--- a/src/menu/components/share/normalform/index.jsx
+++ b/src/menu/components/share/normalform/index.jsx
@@ -1,15 +1,28 @@
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 './index.scss'
+import asyncComponent from '@/utils/asyncComponent'
+import './index.scss'
+
+const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable'))
class SettingForm extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
formlist: PropTypes.array, // 琛ㄥ崟
inputSubmit: PropTypes.func // 鍥炶溅浜嬩欢
+ }
+
+ state = {
+ formlist: [],
+ }
+
+ UNSAFE_componentWillMount() {
+ const { formlist } = this.props
+
+ this.setState({formlist: fromJS(formlist).toJS()})
}
handleConfirm = () => {
@@ -33,141 +46,81 @@
}
}
- getFields() {
- const { formlist } = this.props
- const { getFieldDecorator } = this.props.form
- const fields = []
+ 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
+ }
- if (!formlist) return []
+ 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') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <QuestionCircleOutlined className="mk-form-tip" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit}/>)}
- </Form.Item>
- </Col>
- )
+ content = (<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)
} else if (item.type === 'number') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <QuestionCircleOutlined className="mk-form-tip" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'select') { // 涓嬫媺
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <QuestionCircleOutlined className="mk-form-tip" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <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>
- )}
- </Form.Item>
- </Col>
- )
+ content = (<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)
+ } 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') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <QuestionCircleOutlined className="mk-form-tip" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Radio.Group disabled={item.readonly}>
- {item.options.map(option => {
- return (
- <Radio key={option.value} value={option.value}>{option.text}</Radio>
- )
- })}
- </Radio.Group>
- )}
- </Form.Item>
- </Col>
- )
+ 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') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <QuestionCircleOutlined className="mk-form-tip" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || [],
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Cascader options={item.options} placeholder=""/>
- )}
- </Form.Item>
- </Col>
- )
+ 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
}
@@ -184,7 +137,7 @@
}
return (
- <div>
+ <div className="plot-base-wrap">
<Form {...formItemLayout}><Row gutter={16}>{this.getFields()}</Row></Form>
</div>
)
--
Gitblit v1.8.0