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/sharecomponent/cardcomponent/carddetailform/index.jsx | 110 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 83 insertions(+), 27 deletions(-)
diff --git a/src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx b/src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx
index dd31a0c..0a141c1 100644
--- a/src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx
@@ -1,9 +1,10 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip, Icon } from 'antd'
+import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
import { formRule } from '@/utils/option.js'
-import './index.scss'
+// import './index.scss'
class MainSearch extends Component {
static propTpyes = {
@@ -15,38 +16,56 @@
state = {
formlist: null,
- columns: null
+ oriformlist: null,
+ columns: null,
+ actions: []
}
UNSAFE_componentWillMount () {
const { card } = this.props
- let columns = this.props.formlist.filter(item => item.key === 'field')[0].options
+ let columns = []
+ let actions = []
+
+ let formlist = this.props.formlist.filter(item => !item.forbid)
+ formlist.forEach(item => {
+ if (item.key === 'field') {
+ columns = JSON.parse(JSON.stringify(item.options))
+ } else if (item.key === 'actions') {
+ actions = JSON.parse(JSON.stringify(item.options))
+ }
+ })
this.setState({
columns: columns,
- formlist: this.props.formlist.map(item => {
+ actions: actions,
+ oriformlist: formlist,
+ formlist: formlist.map(item => {
if (item.key === 'content' && card.datatype === 'dynamic') {
item.hidden = true
} else if (item.key === 'field' && card.datatype === 'static') {
item.hidden = true
+ } else if (item.key === 'field' && card.elemType === 'avatar') {
+ item.options = columns.filter(option => option.type === card.type)
+ } else if (item.key === 'size' && card.elemType === 'avatar' && card.type === 'icon') {
+ item.hidden = false
+ } else if (item.key === 'width' && card.elemType === 'avatar' && card.type === 'picture') {
+ item.hidden = false
+ } else if (item.key === 'radius' && card.elemType === 'avatar' && card.type === 'picture') {
+ item.hidden = false
}
-
return item
})
})
}
- componentDidMount () {
-
- }
-
typeChange = (key, value) => {
+ const { columns, oriformlist } = this.state
+
if (key === 'datatype') {
this.setState({
- formlist: this.props.formlist.map(item => {
+ formlist: oriformlist.map(item => {
item.hidden = false
-
if (item.key === 'content' && value === 'dynamic') {
item.hidden = true
} else if (item.key === 'field' && value === 'static') {
@@ -56,9 +75,26 @@
return item
})
})
- // if (this.props.form.getFieldValue('fieldlength') !== undefined) {
- // this.props.form.setFieldsValue({fieldlength: fieldlength})
- // }
+ } else if (key === 'type') {
+ this.setState({
+ formlist: oriformlist.map(item => {
+ if (item.key === 'field') {
+ item.options = columns.filter(option => option.type === value)
+ } else if (item.key === 'width') {
+ item.hidden = value !== 'picture'
+ } else if (item.key === 'size') {
+ item.hidden = value !== 'icon'
+ } else if (item.key === 'radius') {
+ item.hidden = value !== 'picture'
+ }
+
+ return item
+ })
+ }, () => {
+ if (this.props.form.getFieldValue('field') !== undefined) {
+ this.props.form.setFieldsValue({field: ''})
+ }
+ })
}
}
@@ -74,14 +110,14 @@
const { getFieldDecorator } = this.props.form
const fields = []
this.state.formlist.forEach((item, index) => {
- if (item.hidden) return
+ if (item.hidden || item.forbid) return
- if (item.type === 'text') { // 鏂囨湰鎼滅储
+ if (item.type === 'text') {
fields.push(
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -106,7 +142,7 @@
<Col span={12} key={index}>
<Form.Item label={item.tooltip ?
<Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
+ <QuestionCircleOutlined className="mk-form-tip" />
{item.label}
</Tooltip> : item.label
}>
@@ -118,8 +154,7 @@
message: this.props.dict['form.required.input'] + item.label + '!'
}
]
- })(item.unlimit ? <InputNumber /> :
- <InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
+ })(<InputNumber min={item.min} max={item.max} precision={item.precision || 0} />)}
</Form.Item>
</Col>
)
@@ -165,7 +200,7 @@
}
]
})(
- <Radio.Group onChange={(e) => {this.typeChange(item.key, e.target.value)}}>
+ <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => {this.typeChange(item.key, e.target.value)}}>
{
item.options.map(option => {
return (
@@ -205,15 +240,36 @@
handleConfirm = () => {
- const { columns } = this.state
+ const { columns, actions } = this.state
// 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
- values.uuid = this.props.card.uuid || ''
+ if (this.props.card.uuid) {
+ values.uuid = this.props.card.uuid
+ }
+ values.elemType = this.props.card.elemType
- if (values.field && !values.content) {
- values.content = columns.filter(col => col.value === values.field)[0].text
+ if (['detail', 'header'].includes(values.elemType)) {
+ if (values.field && !values.content) {
+ values.content = columns.filter(col => col.value === values.field)[0].text
+ }
+ }
+ if (values.elemType === 'bottom' && values.actions) {
+ values.actions = values.actions.map(item => actions.filter(action => action.value === item)[0])
+ }
+ if (values.elemType === 'header' && values.actions) {
+ values.actions = actions.filter(action => action.value === values.actions)
+ }
+
+ if (['avatar'].includes(values.elemType)) {
+ if (values.type === 'icon') {
+ let column = columns.filter(col => col.value === values.field)[0]
+ values.icon = column.icon
+ values.color = column.color
+
+ values.width = values.size
+ }
}
resolve(values)
@@ -236,7 +292,7 @@
}
}
return (
- <Form {...formItemLayout} className="card-detail-edit-form" id="card-detail-edit-form">
+ <Form {...formItemLayout} style={{minHeight: '190px'}} id="card-detail-edit-form">
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0