From cb8c83978177a8d3de769fca12d2aa3642eb0275 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 16 十一月 2021 12:42:32 +0800
Subject: [PATCH] 2021-11-16
---
src/menu/components/card/cardcellcomponent/elementform/index.jsx | 50 ++++++++++++++++++++++++++++++++++----------------
1 files changed, 34 insertions(+), 16 deletions(-)
diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
index 368a115..e44398f 100644
--- a/src/menu/components/card/cardcellcomponent/elementform/index.jsx
+++ b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
import { formRule } from '@/utils/option.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -19,7 +20,7 @@
picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'],
icon: ['eleType', 'icon', 'datatype', 'width'],
- slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
+ slider: ['eleType', 'datatype', 'width', 'color', 'maxValue', 'showInfo', 'showType', 'strokeWidth', 'strokeLinecap'],
splitline: ['eleType', 'color', 'width', 'borderWidth'],
barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'],
qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'],
@@ -40,17 +41,19 @@
formlist: null, // 琛ㄥ崟淇℃伅
eleType: '',
datatype: '',
+ showType: '',
link: ''
}
UNSAFE_componentWillMount () {
const { card, config } = this.props
- let _options = this.getOptions(card.eleType, card.datatype, card.link)
+ let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'))
this.setState({
link: card.link,
eleType: card.eleType,
datatype: card.datatype,
+ showType: card.showType || 'line',
formlist: this.props.formlist.map(item => {
item.hidden = !_options.includes(item.key)
@@ -90,7 +93,7 @@
})
}
- getOptions = (eleType, datatype, link) => {
+ getOptions = (eleType, datatype, link, showType) => {
let _options = fromJS(cardTypeOptions[eleType]).toJS() // 閫夐」鍒楄〃
if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) {
@@ -112,6 +115,8 @@
}
} else if (eleType === 'picture' && !link) {
_options.push('scale')
+ } else if (eleType === 'slider' && showType !== 'line') {
+ _options.push('outlineWidth', 'textAlign')
}
} else if (eleType === 'icon') {
if (datatype === 'dynamic') {
@@ -131,11 +136,11 @@
* 3銆佸垏鎹㈡爣绛剧被鍨嬶紝閲嶇疆鍙�夋爣绛�
*/
selectChange = (key, value, option) => {
- const { config } = this.props
- const { datatype, eleType } = this.state
+ const { card, config } = this.props
+ const { datatype, eleType, showType } = this.state
if (key === 'eleType') {
- let _options = this.getOptions(value, datatype, '')
+ let _options = this.getOptions(value, datatype, '', showType)
let _formlist = this.state.formlist.map(item => {
item.hidden = !_options.includes(item.key)
@@ -179,6 +184,7 @@
this.setState({
link: '',
eleType: value,
+ showType: card.showType || 'line',
formlist: _formlist
}, () => {
if (value === 'slider') {
@@ -197,7 +203,7 @@
this.props.form.setFieldsValue({value: option.props.title})
}
} else if (key === 'link') {
- let _options = this.getOptions(eleType, this.state.datatype, value)
+ let _options = this.getOptions(eleType, this.state.datatype, value, showType)
this.setState({
link: value,
formlist: this.state.formlist.map(item => {
@@ -212,11 +218,11 @@
}
onChange = (e, key) => {
- const { eleType } = this.state
+ const { eleType, datatype, link, showType } = this.state
let value = e.target.value
if (key === 'datatype') {
- let _options = this.getOptions(eleType, value, this.state.link)
+ let _options = this.getOptions(eleType, value, link, showType)
this.setState({
datatype: value,
@@ -227,7 +233,7 @@
})
})
} else if (key === 'link') {
- let _options = this.getOptions(eleType, this.state.datatype, value)
+ let _options = this.getOptions(eleType, datatype, value, showType)
this.setState({
link: value,
formlist: this.state.formlist.map(item => {
@@ -236,6 +242,18 @@
item.type = value === 'dynamic' ? 'select' : 'textarea'
}
return item
+ })
+ })
+ } else if (key === 'showType') {
+ this.setState({
+ showType: value
+ }, () => {
+ let _options = this.getOptions(eleType, datatype, link, value)
+ this.setState({
+ formlist: this.state.formlist.map(item => {
+ item.hidden = !_options.includes(item.key)
+ return item
+ })
})
})
}
@@ -261,7 +279,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -286,7 +304,7 @@
<Col span={24} className="textarea" key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -311,7 +329,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -330,7 +348,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -362,7 +380,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -383,7 +401,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
--
Gitblit v1.8.0