From c62724a2cdbafa3c660538955acbedafa5a01871 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 01 六月 2024 15:25:21 +0800
Subject: [PATCH] Merge branch 'master' into positec
---
src/templates/modalconfig/settingform/index.jsx | 322 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 214 insertions(+), 108 deletions(-)
diff --git a/src/templates/modalconfig/settingform/index.jsx b/src/templates/modalconfig/settingform/index.jsx
index d2eea85..9d141c3 100644
--- a/src/templates/modalconfig/settingform/index.jsx
+++ b/src/templates/modalconfig/settingform/index.jsx
@@ -3,9 +3,13 @@
import { Form, Row, Col, Input, Radio, InputNumber, Select, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
-import { formRule } from '@/utils/option.js'
+// import { formRule } from '@/utils/option.js'
import StyleInput from '@/menu/stylecontroller/styleInput'
-// import './index.scss'
+import asyncComponent from '@/utils/asyncComponent'
+import './index.scss'
+
+const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
class SettingForm extends Component {
static propTpyes = {
@@ -16,8 +20,11 @@
state = {
fields: null,
- display: this.props.config.setting.display,
- appType: sessionStorage.getItem('appType')
+ display: this.props.config.setting.display || 'modal',
+ placement: this.props.config.setting.placement || 'right',
+ icon: this.props.config.setting.icon || '',
+ appType: sessionStorage.getItem('appType'),
+ viewType: sessionStorage.getItem('editMenuType') || '',
}
UNSAFE_componentWillMount () {
@@ -31,9 +38,11 @@
}
})
- let _display = display
- if (appType === 'mob' && display !== 'prompt' && display !== 'drawer') {
+ let _display = display
+ if (appType === 'mob' && display === 'modal') {
_display = 'drawer'
+ } else if (appType !== 'mob' && display === 'dialog') {
+ _display = 'modal'
}
this.setState({
@@ -66,7 +75,7 @@
render() {
const { config } = this.props
- const { fields, appType, display } = this.state
+ const { fields, appType, display, placement, icon } = this.state
const { getFieldDecorator } = this.props.form
const formItemLayout = {
@@ -81,9 +90,9 @@
}
return (
- <Form {...formItemLayout}>
+ <Form {...formItemLayout} className="form-setting-wrap">
<Row gutter={24}>
- <Col span={12}>
+ {/* <Col span={12}>
<Form.Item label="鏍囬">
{getFieldDecorator('title', {
initialValue: config.setting.title,
@@ -95,27 +104,52 @@
]
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
</Form.Item>
+ </Col> */}
+ <Col span={24}>
+ <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="drawer">鎶藉眽</Radio>
+ <Radio value="prompt">鏄惁妗�</Radio>
+ <Radio value="exec">鐩存帴鎵ц</Radio>
+ {appType !== 'mob' ? null : <Radio value="dialog">寮圭獥</Radio>}
+ </Radio.Group>
+ )}
+ </Form.Item>
</Col>
- {appType !== 'mob' ? <Col span={12}>
- <Form.Item label="瀹藉害锛�%锛�">
+ {display === 'drawer' || display === 'modal' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {display === 'drawer' && (placement === 'top' || placement === 'bottom') ? '楂樺害' : '瀹藉害'}
+ </Tooltip>
+ }>
{getFieldDecorator('width', {
- initialValue: config.setting.width
- })(<InputNumber min={10} max={90} precision={0} onPressEnter={this.handleSubmit}/>)}
+ initialValue: config.setting.width || (appType !== 'mob' ? 60 : 100)
+ })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
</Form.Item>
</Col> : null}
- {appType === 'mob' ? <Col span={12}>
+ {display === 'dialog' && appType === 'mob' ? <Col span={12}>
<Form.Item label={
- <Tooltip placement="topLeft" title="瀹藉害灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺��">
+ <Tooltip placement="topLeft" title="灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺�傜┖鍊兼椂瀹藉害鑷�傚簲銆�">
<QuestionCircleOutlined className="mk-form-tip" />
瀹藉害
</Tooltip>
}>
{getFieldDecorator('width', {
- initialValue: config.setting.width
+ initialValue: config.setting.width || ''
})(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)}
</Form.Item>
</Col> : null}
- <Col span={12}>
+ {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}>
<Form.Item label="鍒濆鐒︾偣">
{getFieldDecorator('focus', {
initialValue: config.setting.focus || ''
@@ -133,8 +167,8 @@
</Select>
)}
</Form.Item>
- </Col>
- <Col span={12}>
+ </Col> : null}
+ {['drawer', 'modal'].includes(display) ? <Col span={12}>
<Form.Item label={
<Tooltip placement="topLeft" title="鎵ц澶辫触鏃堕渶瑕佽仛鐒︾殑琛ㄥ崟銆�">
<QuestionCircleOutlined className="mk-form-tip" />
@@ -157,20 +191,80 @@
</Select>
)}
</Form.Item>
- </Col>
- {appType !== 'mob' ? <Col span={12}>
- <Form.Item label="琛ㄥ崟鎺掑垪">
- {getFieldDecorator('align', {
- initialValue: config.setting.align || 'left_right'
+ </Col> : null}
+ {appType !== 'mob' && display === 'modal' ? <Col span={12}>
+ <Form.Item label="鍥炬爣">
+ {getFieldDecorator('icon', {
+ initialValue: icon
+ })(<MkEditIcon onChange={(value) => this.setState({icon: value})} allowClear={true}/>)}
+ </Form.Item>
+ </Col> : null}
+ {appType !== 'mob' && display === 'modal' && icon ? <Col span={12}>
+ <Form.Item label="鍥炬爣鏍峰紡">
+ {getFieldDecorator('iconType', {
+ initialValue: config.setting.iconType || 'def'
})(
<Radio.Group>
- <Radio value="left_right">宸﹀彸</Radio>
- <Radio value="up_down">涓婁笅</Radio>
+ <Radio value="def">榛樿</Radio>
+ <Radio value="circle">鍦嗗舰</Radio>
</Radio.Group>
)}
</Form.Item>
</Col> : null}
- <Col span={12}>
+ {appType !== 'mob' && display === 'modal' && icon ? <Col span={12}>
+ <Form.Item label="鍥炬爣棰滆壊">
+ {getFieldDecorator('iconColor', {
+ initialValue: config.setting.iconColor || ''
+ })(<ColorSketch allowClear={true}/>)}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' && display === 'drawer' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="琛ㄥ崟鍏冪礌涓庡乏渚ц竟鐣岀殑璺濈銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 宸﹁竟璺�
+ </Tooltip>
+ }>
+ {getFieldDecorator('paddingLeft', {
+ initialValue: config.setting.paddingLeft || '10px'
+ })(
+ <StyleInput options={['px', '%']} />
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' && display === 'drawer' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="琛ㄥ崟鍏冪礌涓庡彸渚ц竟鐣岀殑璺濈銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鍙宠竟璺�
+ </Tooltip>
+ }>
+ {getFieldDecorator('paddingRight', {
+ initialValue: config.setting.paddingRight || '10px'
+ })(
+ <StyleInput options={['px', '%']} />
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'mob' && display === 'drawer' ? <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' && display === 'drawer' ? <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}
+ {['drawer', 'modal'].includes(display) ? <Col span={12}>
<Form.Item label="瀹屾垚鍚�">
{getFieldDecorator('finish', {
initialValue: config.setting.finish || 'close'
@@ -181,20 +275,8 @@
</Radio.Group>
)}
</Form.Item>
- </Col>
- {appType !== 'mob' ? <Col span={12}>
- <Form.Item label="鐐瑰嚮绌虹櫧澶�">
- {getFieldDecorator('clickouter', {
- initialValue: config.setting.clickouter || 'unclose'
- })(
- <Radio.Group>
- <Radio value="close">鍏抽棴</Radio>
- <Radio value="unclose">涓嶅叧闂�</Radio>
- </Radio.Group>
- )}
- </Form.Item>
</Col> : null}
- <Col span={12}>
+ {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}>
<Form.Item label={
<Tooltip placement="topLeft" title="闇�瑕侀�氳繃鏁版嵁婧愭煡璇㈢殑閫夐」锛屾槸鍚︿娇鐢ㄧ紦瀛樸��">
<QuestionCircleOutlined className="mk-form-tip" />
@@ -210,26 +292,83 @@
</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'
+ </Col> : null}
+ {display === 'drawer' ? <Col span={12}>
+ <Form.Item label="寮瑰嚭鏂瑰悜">
+ {getFieldDecorator('placement', {
+ initialValue: placement
})(
- <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 style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({placement: e.target.value})}>
+ <Radio value="right">鍙充晶</Radio>
+ <Radio value="left">宸︿晶</Radio>
+ <Radio value="top">涓婁晶</Radio>
+ <Radio value="bottom">涓嬩晶</Radio>
</Radio.Group>
)}
</Form.Item>
- </Col>
- {!this.props.isSubTab && !appType && display === 'modal' ? <Col span={12}>
+ </Col> : null}
+ {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <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}
+ {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="姝ｅ父闂撮殭浼氶鐣欏嚭鎶ラ敊淇℃伅鐨勪綅缃紝闃叉琛ㄥ崟浣嶇疆鍙戠敓鍙樺寲銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 绔栧悜闂撮殭
+ </Tooltip>
+ }>
+ {getFieldDecorator('verticalSpace', {
+ initialValue: config.setting.verticalSpace || 'normal'
+ })(
+ <Radio.Group>
+ <Radio value="normal">姝ｅ父</Radio>
+ <Radio value="middle">涓�</Radio>
+ <Radio value="small">灏�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="閫夋嫨鏌ョ湅鏃惰〃鍗曞潎涓哄彧璇伙紝浠呯敤浜庢暟鎹睍绀恒��">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 琛ㄥ崟绫诲瀷
+ </Tooltip>
+ }>
+ {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}
+ {display === 'prompt' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鎻愮ず妗嗙殑纭鎻愮ず淇℃伅銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 纭鎻愮ず
+ </Tooltip>
+ }>
+ {getFieldDecorator('tipTitle', {
+ initialValue: config.setting.tipTitle || ''
+ })(
+ <Input autoComplete="off" onPressEnter={this.handleSubmit} />
+ )}
+ </Form.Item>
+ </Col> : null}
+ {!this.props.isSubTab && !appType && this.state.viewType !== 'popview' && display === 'modal' ? <Col span={12}>
<Form.Item label="鎸傝浇瀵硅薄">
{getFieldDecorator('container', {
initialValue: config.setting.container || 'tab'
@@ -241,66 +380,33 @@
)}
</Form.Item>
</Col> : null}
- {display === 'drawer' ? <Col span={12}>
- <Form.Item label="鎶藉眽鏂瑰悜">
- {getFieldDecorator('placement', {
- initialValue: config.setting.placement || 'right'
+ {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}>
+ <Form.Item label="鐐瑰嚮钂欏眰">
+ {getFieldDecorator('clickouter', {
+ initialValue: config.setting.clickouter || 'unclose'
})(
- <Radio.Group style={{whiteSpace: 'nowrap'}}>
- <Radio value="right">鍙充晶</Radio>
- <Radio value="left">宸︿晶</Radio>
- <Radio value="top">涓婁晶</Radio>
- <Radio value="bottom">涓嬩晶</Radio>
+ <Radio.Group>
+ <Radio value="unclose">涓嶅叧闂�</Radio>
+ <Radio value="close">鍏抽棴</Radio>
</Radio.Group>
)}
</Form.Item>
</Col> : null}
- {display === 'drawer' && appType !== 'mob' ? <Col span={12}>
- <Form.Item label="琛ㄥ崟绫诲瀷">
- {getFieldDecorator('formType', {
- initialValue: config.setting.formType || 'edit'
+ {!appType && display === 'modal' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鏄惁鍙嫋鎷界Щ鍔ㄦā鎬佹銆�">
+ <QuestionCircleOutlined className="mk-form-tip" />
+ 鍙Щ鍔�
+ </Tooltip>
+ }>
+ {getFieldDecorator('moveable', {
+ initialValue: config.setting.moveable || 'false'
})(
- <Radio.Group style={{whiteSpace: 'nowrap'}}>
- <Radio value="edit">缂栬緫</Radio>
- <Radio value="check">鏌ョ湅</Radio>
+ <Radio.Group>
+ <Radio value="false">鍚�</Radio>
+ <Radio value="true">鏄�</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>
--
Gitblit v1.8.0