import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Select, InputNumber } from 'antd'
|
|
import ColorSketch from '@/mob/colorsketch'
|
|
import './index.scss'
|
|
class NodeUpdate extends Component {
|
static propTpyes = {
|
node: PropTypes.object
|
}
|
|
state = {
|
formlist: null
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
formlist: this.getFormList(this.props.node)
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
|
this.setState({
|
formlist: null
|
}, () => {
|
this.setState({
|
formlist: this.getFormList(nextProps.node)
|
})
|
})
|
}
|
}
|
|
getFormList = (node) => {
|
let roleList = sessionStorage.getItem('sysRoles')
|
if (roleList) {
|
try {
|
roleList = JSON.parse(roleList)
|
} catch (e) {
|
roleList = []
|
}
|
} else {
|
roleList = []
|
}
|
|
let title = ''
|
if (node.attrs && node.attrs.text) {
|
title = node.attrs.text.text || ''
|
}
|
|
let fontSize = ''
|
if (node.attrs && node.attrs.text) {
|
fontSize = node.attrs.text.fontSize || 12
|
}
|
|
let fontFill = ''
|
if (node.attrs && node.attrs.text) {
|
fontFill = node.attrs.text.fill || '#262626'
|
}
|
|
let stroke = ''
|
|
if (node.attrs && node.attrs.body) {
|
stroke = node.attrs.body.stroke || ''
|
}
|
let fill = ''
|
|
if (node.attrs && node.attrs.body) {
|
fill = node.attrs.body.fill || ''
|
}
|
|
if (node.shape === 'edge') {
|
return [
|
{
|
type: 'text',
|
field: 'title',
|
label: '标签',
|
initval: title
|
},
|
{
|
type: 'color',
|
field: 'fill',
|
label: '背景',
|
initval: fill
|
},
|
{
|
type: 'color',
|
field: 'stroke',
|
label: '边框',
|
initval: stroke
|
},
|
{
|
type: 'number',
|
field: 'fontSize',
|
label: '字号',
|
initval: fontSize
|
},
|
{
|
type: 'color',
|
field: 'fontFill',
|
label: '颜色',
|
initval: fontFill
|
}
|
]
|
} else {
|
return [
|
{
|
type: 'title',
|
label: '内容'
|
},
|
{
|
type: 'text',
|
field: 'title',
|
label: '标签',
|
initval: title
|
},
|
{
|
type: 'title',
|
label: '样式'
|
},
|
{
|
type: 'color',
|
field: 'fill',
|
label: '背景',
|
initval: fill
|
},
|
{
|
type: 'color',
|
field: 'stroke',
|
label: '边框',
|
initval: stroke
|
},
|
{
|
type: 'title',
|
label: '标签样式'
|
},
|
{
|
type: 'number',
|
field: 'fontSize',
|
label: '字号',
|
initval: fontSize
|
},
|
{
|
type: 'color',
|
field: 'fontFill',
|
label: '颜色',
|
initval: fontFill
|
}
|
]
|
}
|
}
|
|
change = (value, key) => {
|
if (key === 'title') {
|
|
} else if (key === 'fill') {
|
|
} else if (key === 'stroke') {
|
|
} else if (key === 'fontSize') {
|
if (typeof(value) !== 'number' || value < 0) {
|
return
|
}
|
} else if (key === 'fontFill') {
|
|
}
|
|
this.props.onChange(value, key)
|
}
|
|
getFields() {
|
const { formlist } = this.state
|
const fields = []
|
|
if (!formlist) return
|
|
formlist.forEach((item, index) => {
|
if (item.type === 'title') {
|
fields.push(
|
<Col span={24} key={index}>
|
<span className="split-line">{item.label}</span>
|
</Col>
|
)
|
} else if (item.type === 'text') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
<Input defaultValue={item.initval} placeholder="" autoComplete="off" onChange={(e) => this.change(e.target.value, item.field)} />
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
<InputNumber defaultValue={item.initval} precision={0} min={0} onChange={(value) => this.change(value, item.field)} />
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={(value) => {this.change(value, item.field)}}
|
>
|
{item.options.map(option =>
|
<Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'color') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
<ColorSketch defaultValue={item.initval} onChange={(value) => this.change(value, item.field)}/>
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
return fields
|
}
|
|
render() {
|
return (
|
<Form className="node-edit-form">
|
<Row>{this.getFields()}</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default NodeUpdate
|
