From 0c84df247914f893ef5e41d57a422e10a2dc814c Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 12 十一月 2021 17:02:06 +0800
Subject: [PATCH] 2021-11-12
---
src/templates/modalconfig/settingform/index.jsx | 228 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 179 insertions(+), 49 deletions(-)
diff --git a/src/templates/modalconfig/settingform/index.jsx b/src/templates/modalconfig/settingform/index.jsx
index d1d0e58..d2eea85 100644
--- a/src/templates/modalconfig/settingform/index.jsx
+++ b/src/templates/modalconfig/settingform/index.jsx
@@ -1,41 +1,44 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Radio, InputNumber, Select } from 'antd'
+import { Form, Row, Col, Input, Radio, InputNumber, Select, Tooltip } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
import { formRule } from '@/utils/option.js'
-import './index.scss'
+import StyleInput from '@/menu/stylecontroller/styleInput'
+// import './index.scss'
class SettingForm extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
- config: PropTypes.object // 琛ㄥ崟閰嶇疆淇℃伅
+ config: PropTypes.object, // 琛ㄥ崟閰嶇疆淇℃伅
+ isSubTab: PropTypes.bool, // 鏄惁涓哄瓙鏍囩
+ inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢
}
state = {
- fields: null
+ fields: null,
+ display: this.props.config.setting.display,
+ appType: sessionStorage.getItem('appType')
}
UNSAFE_componentWillMount () {
const { config } = this.props
+ const { appType, display } = this.state
let fields = []
- if (config.groups.length > 0) {
- config.groups.forEach(group => {
- group.sublist.forEach(item => {
- if (item.field && (item.type === 'text' || item.type === 'number') && item.hidden !== 'true' && item.readonly !== 'true') {
- fields.push(item)
- }
- })
- })
- } else if (config.fields.length > 0) {
- config.fields.forEach(f => {
- if (f.field && (f.type === 'text' || f.type === 'number') && f.hidden !== 'true' && f.readonly !== 'true') {
- fields.push(f)
- }
- })
+ config.fields.forEach(f => {
+ if (f.field && ['select', 'link', 'text', 'number', 'textarea'].includes(f.type) && f.hidden !== 'true' && f.readonly !== 'true') {
+ fields.push(f)
+ }
+ })
+
+ let _display = display
+ if (appType === 'mob' && display !== 'prompt' && display !== 'drawer') {
+ _display = 'drawer'
}
this.setState({
- fields: fields
+ fields: fields,
+ display: _display
})
}
@@ -44,6 +47,7 @@
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
+ values.container = values.container || 'view'
resolve(values)
} else {
reject(err)
@@ -52,9 +56,17 @@
})
}
+ handleSubmit = (e) => {
+ e.preventDefault()
+
+ if (this.props.inputSubmit) {
+ this.props.inputSubmit()
+ }
+ }
+
render() {
- const { config, dict } = this.props
- const { fields } = this.state
+ const { config } = this.props
+ const { fields, appType, display } = this.state
const { getFieldDecorator } = this.props.form
const formItemLayout = {
@@ -69,7 +81,7 @@
}
return (
- <Form {...formItemLayout} className="ant-advanced-search-form modal-setting-form">
+ <Form {...formItemLayout}>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="鏍囬">
@@ -81,28 +93,38 @@
message: formRule.input.message
}
]
- })(<Input placeholder="" autoComplete="off"/>)}
+ })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
</Form.Item>
</Col>
- <Col span={12}>
- <Form.Item label="瀹藉害">
+ {appType !== 'mob' ? <Col span={12}>
+ <Form.Item label="瀹藉害锛�%锛�">
{getFieldDecorator('width', {
initialValue: config.setting.width
- })(<InputNumber min={10} max={90} precision={0} />)}
+ })(<InputNumber min={10} max={90} precision={0} onPressEnter={this.handleSubmit}/>)}
</Form.Item>
- </Col>
+ </Col> : null}
+ {appType === 'mob' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="瀹藉害灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 瀹藉害
+ </Tooltip>
+ }>
+ {getFieldDecorator('width', {
+ initialValue: config.setting.width
+ })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
+ </Form.Item>
+ </Col> : null}
<Col span={12}>
- <Form.Item label="鐒︾偣">
+ <Form.Item label="鍒濆鐒︾偣">
{getFieldDecorator('focus', {
initialValue: config.setting.focus || ''
})(
<Select
showSearch
+ allowClear
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
- <Select.Option value="">
- {dict['header.form.empty']}
- </Select.Option>
{fields.map(option =>
<Select.Option id={option.uuid} title={option.label} key={option.uuid} value={option.field}>
{option.label}
@@ -113,18 +135,41 @@
</Form.Item>
</Col>
<Col span={12}>
- <Form.Item label="鍒楁暟">
- {getFieldDecorator('cols', {
- initialValue: config.setting.cols || '2'
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鎵ц澶辫触鏃堕渶瑕佽仛鐒︾殑琛ㄥ崟銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 澶辫触鐒︾偣
+ </Tooltip>
+ }>
+ {getFieldDecorator('errFocus', {
+ initialValue: config.setting.errFocus || ''
})(
- <Select>
- <Select.Option value="1">1鍒�</Select.Option>
- <Select.Option value="2">2鍒�</Select.Option>
- <Select.Option value="3">3鍒�</Select.Option>
+ <Select
+ showSearch
+ allowClear
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ >
+ {fields.map(option =>
+ <Select.Option key={option.uuid} value={option.uuid}>
+ {option.label}
+ </Select.Option>
+ )}
</Select>
)}
</Form.Item>
</Col>
+ {appType !== 'mob' ? <Col span={12}>
+ <Form.Item label="琛ㄥ崟鎺掑垪">
+ {getFieldDecorator('align', {
+ initialValue: config.setting.align || 'left_right'
+ })(
+ <Radio.Group>
+ <Radio value="left_right">宸﹀彸</Radio>
+ <Radio value="up_down">涓婁笅</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
<Col span={12}>
<Form.Item label="瀹屾垚鍚�">
{getFieldDecorator('finish', {
@@ -137,7 +182,7 @@
)}
</Form.Item>
</Col>
- <Col span={12}>
+ {appType !== 'mob' ? <Col span={12}>
<Form.Item label="鐐瑰嚮绌虹櫧澶�">
{getFieldDecorator('clickouter', {
initialValue: config.setting.clickouter || 'unclose'
@@ -148,8 +193,43 @@
</Radio.Group>
)}
</Form.Item>
+ </Col> : null}
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="闇�瑕侀�氳繃鏁版嵁婧愭煡璇㈢殑閫夐」锛屾槸鍚︿娇鐢ㄧ紦瀛樸��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 閫夐」鏌ヨ
+ </Tooltip>
+ }>
+ {getFieldDecorator('cache', {
+ initialValue: config.setting.cache || 'true'
+ })(
+ <Radio.Group>
+ <Radio value="true">缂撳瓨</Radio>
+ <Radio value="false">瀹炴椂</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
</Col>
<Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鎵撳嵃鎸夐挳涓棤鏁堛��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鏄剧ず鏂瑰紡
+ </Tooltip>
+ }>
+ {getFieldDecorator('display', {
+ initialValue: display || 'modal'
+ })(
+ <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({display: e.target.value})}>
+ {appType !== 'mob' ? <Radio value="modal">妯℃�佹</Radio> : null}
+ <Radio value="prompt">鏄惁妗�</Radio>
+ <Radio value="drawer">鎶藉眽</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ {!this.props.isSubTab && !appType && display === 'modal' ? <Col span={12}>
<Form.Item label="鎸傝浇瀵硅薄">
{getFieldDecorator('container', {
initialValue: config.setting.container || 'tab'
@@ -160,19 +240,69 @@
</Radio.Group>
)}
</Form.Item>
- </Col>
- <Col span={12}>
- <Form.Item label="鏄剧ず鏂瑰紡">
- {getFieldDecorator('display', {
- initialValue: config.setting.display || 'modal'
+ </Col> : null}
+ {display === 'drawer' ? <Col span={12}>
+ <Form.Item label="鎶藉眽鏂瑰悜">
+ {getFieldDecorator('placement', {
+ initialValue: config.setting.placement || 'right'
})(
- <Radio.Group>
- <Radio value="modal">妯℃�佹</Radio>
- <Radio value="prompt">鏄惁妗�</Radio>
+ <Radio.Group style={{whiteSpace: 'nowrap'}}>
+ <Radio value="right">鍙充晶</Radio>
+ <Radio value="left">宸︿晶</Radio>
+ <Radio value="top">涓婁晶</Radio>
+ <Radio value="bottom">涓嬩晶</Radio>
</Radio.Group>
)}
</Form.Item>
- </Col>
+ </Col> : null}
+ {display === 'drawer' && appType !== 'mob' ? <Col span={12}>
+ <Form.Item label="琛ㄥ崟绫诲瀷">
+ {getFieldDecorator('formType', {
+ initialValue: config.setting.formType || 'edit'
+ })(
+ <Radio.Group style={{whiteSpace: 'nowrap'}}>
+ <Radio value="edit">缂栬緫</Radio>
+ <Radio value="check">鏌ョ湅</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' ? <Col span={12}>
+ <Form.Item label="宸﹁竟璺�">
+ {getFieldDecorator('paddingLeft', {
+ initialValue: config.setting.paddingLeft || '10px'
+ })(
+ <StyleInput options={['px', '%']} />
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' ? <Col span={12}>
+ <Form.Item label="鍙宠竟璺�">
+ {getFieldDecorator('paddingRight', {
+ initialValue: config.setting.paddingRight || '10px'
+ })(
+ <StyleInput options={['px', '%']} />
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' ? <Col span={12}>
+ <Form.Item label="鎸夐挳鍚嶇О">
+ {getFieldDecorator('btnName', {
+ initialValue: config.setting.btnName || '纭畾'
+ })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' ? <Col span={12}>
+ <Form.Item label="鎸夐挳浣嶇疆">
+ {getFieldDecorator('btnPosition', {
+ initialValue: config.setting.btnPosition || 'bottom'
+ })(
+ <Radio.Group style={{whiteSpace: 'nowrap'}}>
+ <Radio value="bottom">涓嬩晶</Radio>
+ <Radio value="top">涓婁晶</Radio>
+ </Radio.Group>)}
+ </Form.Item>
+ </Col> : null}
</Row>
</Form>
)
--
Gitblit v1.8.0