From c7aece35a62b6e91fd98a625bf0e53f64bfbd18d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 17 八月 2023 16:22:15 +0800
Subject: [PATCH] 2023-08-17
---
src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx | 144 +++++++++++++++++++++--------------------------
1 files changed, 64 insertions(+), 80 deletions(-)
diff --git a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
index 0dd5540..59cdc1c 100644
--- a/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
+++ b/src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx
@@ -1,6 +1,7 @@
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 line1 from '@/assets/img/line1.png'
@@ -18,6 +19,9 @@
import card3 from '@/assets/img/card3.png'
import card4 from '@/assets/img/card4.png'
import card5 from '@/assets/img/card5.png'
+import card6 from '@/assets/img/card6.png'
+import card7 from '@/assets/img/card7.png'
+import card8 from '@/assets/img/card8.png'
import './index.scss'
const syslegends = {
@@ -121,14 +125,29 @@
subelement: ['content', 'avatar']
},
{
+ uuid: 'card6',
+ url: card6,
+ subelement: ['content', 'header']
+ },
+ {
uuid: 'card3',
url: card3,
subelement: ['content', 'avatar', 'header']
},
{
+ uuid: 'card8',
+ url: card8,
+ subelement: ['content', 'bottom']
+ },
+ {
uuid: 'card4',
url: card4,
subelement: ['content', 'avatar', 'bottom']
+ },
+ {
+ uuid: 'card7',
+ url: card7,
+ subelement: ['content', 'header', 'bottom']
},
{
uuid: 'card5',
@@ -140,7 +159,6 @@
class ChartForm extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
MenuID: PropTypes.any,
formlist: PropTypes.any,
card: PropTypes.any,
@@ -192,18 +210,18 @@
columns: _columns,
selectlegend: _selectlegend,
formlist: formlist.map(item => {
- if (item.key === 'height' && ['table', 'card'].includes(_type)) {
+ if (item.key === 'actions' && ['table'].includes(_type)) { // 鎸夐挳缁�
item.hidden = true
- } else if (item.key === 'widthType' && _type === 'card') {
- item.hidden = false
+ } else if (item.key === 'height' && ['table', 'card'].includes(_type)) {
+ item.hidden = true
} else if (item.key === 'cardWidth' && _type === 'card') {
- item.hidden = false
- } else if (item.key === 'over' && _type === 'card') {
item.hidden = false
} else if (item.key === 'border' && _type === 'card') {
item.hidden = false
} else if (item.key === 'switch' && _type === 'card') {
item.hidden = false
+ } else if (item.key === 'extraAction') {
+ item.hidden = _type !== 'card'
} else if (item.key === 'bgfield') {
item.hidden = _type !== 'card'
}
@@ -219,7 +237,7 @@
try {
let _form = document.getElementById('title')
_form.select()
- } catch {
+ } catch (e) {
console.warn('琛ㄥ崟focus澶辫触锛�')
}
}
@@ -234,7 +252,6 @@
}
typeChange = (key, value) => {
- const { card } = this.props
let formlist = JSON.parse(JSON.stringify(this.props.formlist))
if (key === 'chartType') {
@@ -242,71 +259,21 @@
legends: syslegends[value] || null,
selectlegend: syslegends[value] ? syslegends[value][0] : null,
formlist: formlist.map(item => {
- if (item.key === 'height' && ['table', 'card'].includes(value)) {
+ if (item.key === 'actions' && ['table'].includes(value)) { // 鎸夐挳缁�
item.hidden = true
- } else if (item.key === 'widthType' && value === 'card') {
- item.hidden = false
+ } else if (item.key === 'height' && ['table', 'card'].includes(value)) {
+ item.hidden = true
} else if (item.key === 'cardWidth' && value === 'card') {
- item.min = card.widthType === 'absolute' ? 50 : 1
- item.max = card.widthType === 'absolute' ? 1000 : 24
- item.hidden = false
- } else if (item.key === 'over' && value === 'card') {
item.hidden = false
} else if (item.key === 'border' && value === 'card') {
item.hidden = false
} else if (item.key === 'switch' && value === 'card') {
item.hidden = false
+ } else if (item.key === 'extraAction') {
+ item.hidden = value !== 'card'
} else if (item.key === 'bgfield') {
item.hidden = value !== 'card'
}
- return item
- })
- })
- }
- }
-
- radioChange = (val, key) => {
- const { formlist } = this.state
-
- if (key === 'widthType') {
- this.setState({
- formlist: formlist.map(item => {
- if (item.key === 'cardWidth') {
- item.min = val === 'absolute' ? 50 : 1
- item.max = val === 'absolute' ? 1000 : 24
- }
-
- return item
- })
- })
- if (val === 'absolute') {
- this.props.form.setFieldsValue({cardWidth: 250})
- } else {
- this.props.form.setFieldsValue({cardWidth: 6})
- }
- } else if (key === 'over' && val === 'roll') {
- this.setState({
- formlist: formlist.map(item => {
- if (item.key === 'cardWidth') {
- item.min = 50
- item.max = 1000
- } else if (item.key === 'widthType') {
- item.readonly = true
- }
-
- return item
- })
- })
- if (this.props.form.getFieldValue('widthType') !== undefined) {
- this.props.form.setFieldsValue({widthType: 'absolute', cardWidth: 250})
- }
- } else if (key === 'over' && val === 'whole') {
- this.setState({
- formlist: formlist.map(item => {
- if (item.key === 'widthType') {
- item.readonly = false
- }
-
return item
})
})
@@ -322,15 +289,16 @@
getFields() {
const { getFieldDecorator } = this.props.form
const fields = []
+
this.state.formlist.forEach((item, index) => {
if (item.hidden) 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
}>
@@ -339,7 +307,7 @@
rules: [
{
required: !!item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
+ message: '璇疯緭鍏�' + item.label + '!'
},
{
max: formRule.input.max,
@@ -355,7 +323,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
}>
@@ -364,7 +332,7 @@
rules: [
{
required: !!item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
+ message: '璇疯緭鍏�' + item.label + '!'
}
]
})(<InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
@@ -374,13 +342,18 @@
} else if (item.type === 'select') { // 涓嬫媺鎼滅储
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} 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 + '!'
+ message: '璇烽�夋嫨' + item.label + '!'
}
]
})(
@@ -404,17 +377,22 @@
} else if (item.type === 'radio') {
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} 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 + '!'
+ message: '璇烽�夋嫨' + item.label + '!'
}
]
})(
- <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}>
+ <Radio.Group disabled={item.readonly}>
{
item.options.map(option => {
return (
@@ -430,7 +408,12 @@
} else if (item.type === 'multiselect') { // 澶氶��
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.key, {
initialValue: item.initVal || []
})(
@@ -468,7 +451,7 @@
card: 'credit-card'
}
- if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'line') {
+ if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'pie') {
if (selectlegend && this.props.card.modelId !== selectlegend.uuid) {
result = {...result, ...selectlegend.options}
}
@@ -489,8 +472,8 @@
if (!result.details) {
result.details = [
- {elemType: 'detail', bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
- {elemType: 'detail',bold: 'false', uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
+ {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'cardtitle', content: 'Card content', datatype: 'static', align: 'left'},
+ {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
]
result.bottom = {
elemType: 'bottom',
@@ -510,8 +493,9 @@
type: 'picture',
field: '',
size: 14,
- widthType: 'absolute',
- width: 32
+ width: 32,
+ radius: 'true',
+ display: 'inline'
}
}
--
Gitblit v1.8.0