import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip, Icon } from 'antd'
|
|
import { formRule } from '@/utils/option.js'
|
import line1 from '@/assets/img/line1.png'
|
import line2 from '@/assets/img/line2.png'
|
import line3 from '@/assets/img/line3.png'
|
import line4 from '@/assets/img/line4.png'
|
import bar1 from '@/assets/img/bar1.png'
|
import bar2 from '@/assets/img/bar2.png'
|
import bar3 from '@/assets/img/bar3.png'
|
import bar4 from '@/assets/img/bar4.png'
|
import pie1 from '@/assets/img/pie1.png'
|
import pie2 from '@/assets/img/pie2.png'
|
import card1 from '@/assets/img/card1.png'
|
import card2 from '@/assets/img/card2.png'
|
import card3 from '@/assets/img/card3.png'
|
// import card4 from '@/assets/img/card4.png'
|
import card5 from '@/assets/img/card5.png'
|
import './index.scss'
|
|
const syslegends = {
|
line: [
|
{
|
uuid: 'line1',
|
url: line1,
|
options: {
|
shape: 'line',
|
coordinate: 'angle'
|
}
|
},
|
{
|
uuid: 'line2',
|
url: line2,
|
options: {
|
shape: 'smooth',
|
coordinate: 'angle'
|
}
|
},
|
{
|
uuid: 'line3',
|
url: line3,
|
options: {
|
shape: 'hv',
|
coordinate: 'angle'
|
}
|
},
|
{
|
uuid: 'line4',
|
url: line4,
|
options: {
|
shape: 'smooth',
|
coordinate: 'polar'
|
}
|
}
|
],
|
bar: [
|
{
|
uuid: 'bar1',
|
url: bar1,
|
options: {
|
shape: 'rect',
|
adjust: 'dodge',
|
transpose: 'false'
|
}
|
},
|
{
|
uuid: 'bar2',
|
url: bar2,
|
options: {
|
shape: 'rect',
|
adjust: 'dodge',
|
transpose: 'false'
|
}
|
},
|
{
|
uuid: 'bar3',
|
url: bar3,
|
options: {
|
shape: 'rect',
|
adjust: 'stack',
|
transpose: 'false'
|
}
|
},
|
{
|
uuid: 'bar4',
|
url: bar4,
|
options: {
|
shape: 'rect',
|
adjust: 'dodge',
|
transpose: 'true'
|
}
|
}
|
],
|
pie: [
|
{
|
uuid: 'pie1',
|
url: pie1,
|
options: {
|
shape: 'pie'
|
}
|
},
|
{
|
uuid: 'pie2',
|
url: pie2,
|
options: {
|
shape: 'ring'
|
}
|
}
|
],
|
card: [
|
{
|
uuid: 'card1',
|
url: card1,
|
subelement: ['content']
|
},
|
{
|
uuid: 'card2',
|
url: card2,
|
subelement: ['content', 'avatar']
|
},
|
{
|
uuid: 'card3',
|
url: card3,
|
subelement: ['content', 'avatar', 'header']
|
},
|
// {
|
// uuid: 'card4',
|
// url: card4,
|
// subelement: ['content', 'avatar', 'bottom']
|
// },
|
{
|
uuid: 'card5',
|
url: card5,
|
subelement: ['content', 'avatar', 'header', 'bottom']
|
}
|
]
|
}
|
|
class ChartForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
MenuID: PropTypes.any,
|
formlist: PropTypes.any,
|
card: PropTypes.any,
|
inputSubmit: PropTypes.any // 回车提交事件
|
}
|
|
state = {
|
formlist: null,
|
legends: null,
|
columns: null,
|
selectlegend: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { card } = this.props
|
let formlist = JSON.parse(JSON.stringify(this.props.formlist))
|
|
let _type = card.chartType || 'line'
|
let _legends = null
|
let _selectlegend = null
|
let _columns = []
|
|
// 获取标记卡片列，用于颜色赋值
|
formlist.forEach(item => {
|
if (item.key === 'bgfield') {
|
_columns = item.options
|
}
|
})
|
|
if (_type === 'line' || _type === 'bar' || _type === 'line') {
|
_legends = syslegends[_type]
|
_selectlegend = _legends.filter(item => item.uuid === card.modelId)[0]
|
|
if (!_selectlegend) {
|
_selectlegend = _legends[0]
|
}
|
} else if (_type === 'card') {
|
_legends = syslegends.card
|
|
if (card.subelement) {
|
_selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
|
} else {
|
_selectlegend = _legends[0]
|
}
|
}
|
|
this.setState({
|
legends: _legends,
|
columns: _columns,
|
selectlegend: _selectlegend,
|
formlist: formlist.map(item => {
|
if (item.key === 'height' && ['table', 'card'].includes(_type)) {
|
item.hidden = true
|
} else if (item.key === 'widthType' && _type === 'card') {
|
item.hidden = false
|
} 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 === 'bgfield') {
|
item.hidden = _type !== 'card'
|
}
|
return item
|
})
|
})
|
}
|
|
componentDidMount () {
|
const { card } = this.props
|
|
if (!card.chartType) {
|
try {
|
let _form = document.getElementById('title')
|
_form.select()
|
} catch {
|
console.warn('表单focus失败！')
|
}
|
}
|
}
|
|
handleSubmit = (e) => {
|
e.preventDefault()
|
|
if (this.props.inputSubmit) {
|
this.props.inputSubmit()
|
}
|
}
|
|
typeChange = (key, value) => {
|
const { card } = this.props
|
let formlist = JSON.parse(JSON.stringify(this.props.formlist))
|
|
if (key === 'chartType') {
|
this.setState({
|
legends: syslegends[value] || null,
|
selectlegend: syslegends[value] ? syslegends[value][0] : null,
|
formlist: formlist.map(item => {
|
if (item.key === 'height' && ['table', 'card'].includes(value)) {
|
item.hidden = true
|
} else if (item.key === 'widthType' && value === 'card') {
|
item.hidden = false
|
} 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 === '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
|
})
|
})
|
}
|
}
|
|
changeSelectLegend = (item) => {
|
this.setState({
|
selectlegend: item
|
})
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const fields = []
|
this.state.formlist.forEach((item, index) => {
|
if (item.hidden) return
|
|
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" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
},
|
{
|
max: formRule.input.max,
|
message: formRule.input.message
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') {
|
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" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.input'] + item.label + '!'
|
}
|
]
|
})(<InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select') { // 下拉搜索
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
disabled={!!item.readonly}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={(value) => {this.typeChange(item.key, value)}}
|
getPopupContainer={() => document.getElementById('chartwinter')}
|
>
|
{item.options.map((option, index) =>
|
<Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'radio') {
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal,
|
rules: [
|
{
|
required: !!item.required,
|
message: this.props.dict['form.required.select'] + item.label + '!'
|
}
|
]
|
})(
|
<Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}>
|
{
|
item.options.map(option => {
|
return (
|
<Radio key={option.value} value={option.value}>{option.text}</Radio>
|
)
|
})
|
}
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'multiselect') { // 多选
|
fields.push(
|
<Col span={12} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initVal || []
|
})(
|
<Select
|
showSearch
|
mode="multiple"
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{item.options.map((option, i) =>
|
<Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
return fields
|
}
|
|
handleConfirm = () => {
|
const { selectlegend, columns } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
let result = {...this.props.card, ...values}
|
|
let icons = {
|
table: 'table',
|
line: 'line-chart',
|
bar: 'bar-chart',
|
pie: 'pie-chart',
|
card: 'credit-card'
|
}
|
|
if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'line') {
|
if (selectlegend && this.props.card.modelId !== selectlegend.uuid) {
|
result = {...result, ...selectlegend.options}
|
}
|
|
if (selectlegend) {
|
result.modelId = selectlegend.uuid
|
}
|
|
if (result.chartType !== 'pie' && result.Yaxis && typeof(result.Yaxis) === 'string') {
|
result.Yaxis = [result.Yaxis]
|
} else if (result.chartType === 'pie' && result.Yaxis && typeof(result.Yaxis) === 'object') {
|
result.Yaxis = result.Yaxis[0] || ''
|
}
|
} else if (result.chartType === 'card') {
|
if (selectlegend) {
|
result.subelement = selectlegend.subelement
|
}
|
|
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'}
|
]
|
result.bottom = {
|
elemType: 'bottom',
|
show: 'icon',
|
actions: []
|
}
|
result.header = {
|
elemType: 'header',
|
content: 'Card title',
|
datatype: 'static',
|
show: 'icon',
|
actions: []
|
}
|
result.avatar = {
|
elemType: 'avatar',
|
content: '',
|
type: 'picture',
|
field: '',
|
size: 14,
|
widthType: 'absolute',
|
width: 32
|
}
|
}
|
|
if (result.bgfield) {
|
result.background = columns.filter(col => col.value === result.bgfield)[0].background
|
} else {
|
result.background = ''
|
}
|
}
|
|
result.icon = icons[result.chartType]
|
|
resolve(result)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { legends, selectlegend } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 }
|
}
|
}
|
return (
|
<Form {...formItemLayout} className="chart-edit-form mingke-table" id="chartwinter">
|
<Row gutter={24}>{this.getFields()}</Row>
|
{legends ? <Row gutter={24} className="chart-model-image">
|
{legends.map(item => <Col span={6} key={item.uuid}>
|
<img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend && selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
|
</Col>)}
|
</Row> : null}
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(ChartForm)
|
