import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Input, Select, Radio, InputNumber, Modal } from 'antd'
|
import { FormOutlined } from '@ant-design/icons'
|
|
import ColorSketch from '@/mob/colorsketch'
|
import NodeForm from './nodeform'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class NodeUpdate extends Component {
|
static propTpyes = {
|
node: PropTypes.object,
|
rolelist: PropTypes.array
|
}
|
|
state = {
|
formlist: null,
|
mknode: null,
|
mkdata: null
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
mknode: this.props.node,
|
mkdata: this.props.node.mkdata || '',
|
formlist: this.getFormList(this.props.node)
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
|
this.setState({
|
formlist: null
|
}, () => {
|
this.setState({
|
mknode: nextProps.node,
|
mkdata: nextProps.node.mkdata || '',
|
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 || ''
|
}
|
|
if (node.shape === 'edge') {
|
let stroke = ''
|
|
if (node.attrs && node.attrs.line) {
|
stroke = node.attrs.line.stroke || '#000000'
|
}
|
|
let strokeWidth = ''
|
|
if (node.attrs && node.attrs.line) {
|
strokeWidth = node.attrs.line.strokeWidth || 1
|
}
|
|
let lineType = 'solid'
|
|
if (node.attrs && node.attrs.line && node.attrs.line.strokeDasharray) {
|
lineType = 'dash'
|
}
|
|
let font = node.labels && node.labels[0] ? node.labels[0].attrs.label : {}
|
|
return [
|
{
|
type: 'title',
|
label: '内容'
|
},
|
{
|
type: 'text',
|
field: 'title',
|
label: '标签',
|
initval: font.text || ''
|
},
|
{
|
type: 'title',
|
label: '样式'
|
},
|
{
|
type: 'color',
|
field: 'stroke',
|
label: '颜色',
|
initval: stroke
|
},
|
{
|
type: 'number',
|
field: 'strokeWidth',
|
label: '线宽',
|
initval: strokeWidth
|
},
|
{
|
type: 'radio',
|
field: 'lineType',
|
label: '线型',
|
initval: lineType,
|
options: [
|
{value: 'solid', text: '实线'},
|
{value: 'dash', text: '虚线'}
|
]
|
},
|
{
|
type: 'title',
|
label: '标签样式'
|
},
|
{
|
type: 'number',
|
field: 'fontSize',
|
label: '字号',
|
initval: font.fontSize || 14
|
},
|
{
|
type: 'color',
|
field: 'fontFill',
|
label: '颜色',
|
initval: font.fill || '#000000'
|
},
|
{
|
type: 'other',
|
label: '自定义信息'
|
}
|
]
|
} else if (node.shape === 'lane') {
|
let fontFill = '#262626'
|
if (node.attrs && node.attrs.text) {
|
fontFill = node.attrs.text.fill || '#262626'
|
}
|
|
let fill = ''
|
if (node.attrs && node.attrs['name-rect']) {
|
fill = node.attrs['name-rect'].fill || ''
|
}
|
|
let width = 100
|
if (node.size) {
|
width = node.size.width || 100
|
}
|
let height = 100
|
if (node.size) {
|
height = node.size.height || 100
|
}
|
|
let fontSize = 12
|
if (node.attrs && node.attrs.text) {
|
fontSize = node.attrs.text.fontSize || 12
|
}
|
|
let stroke = ''
|
if (node.attrs && node.attrs.body) {
|
stroke = node.attrs.body.stroke || ''
|
}
|
return [
|
{
|
type: 'title',
|
label: '标题'
|
},
|
{
|
type: 'text',
|
field: 'title',
|
label: '标签',
|
initval: title
|
},
|
{
|
type: 'title',
|
label: '样式'
|
},
|
{
|
type: 'color',
|
field: 'stroke',
|
label: '边框',
|
initval: stroke
|
},
|
{
|
type: 'number',
|
field: 'width',
|
label: '宽度',
|
help: '宽度不可小于100',
|
initval: width
|
},
|
{
|
type: 'number',
|
field: 'height',
|
label: '高度',
|
help: '高度不可小于100',
|
initval: height
|
},
|
{
|
type: 'title',
|
label: '标题样式'
|
},
|
{
|
type: 'color',
|
field: 'fill',
|
label: '背景',
|
initval: fill
|
},
|
{
|
type: 'number',
|
field: 'fontSize',
|
label: '字号',
|
initval: fontSize
|
},
|
{
|
type: 'color',
|
field: 'fontFill',
|
label: '颜色',
|
initval: fontFill
|
}
|
]
|
} else if (node.shape === 'mk-text') {
|
if (node.attrs && node.attrs.label) {
|
title = node.attrs.label.text || ''
|
}
|
|
let fill = ''
|
|
if (node.attrs && node.attrs.body) {
|
fill = node.attrs.body.fill || ''
|
}
|
|
let stroke = ''
|
|
if (node.attrs && node.attrs.body) {
|
stroke = node.attrs.body.stroke || ''
|
}
|
|
let fontFill = '#262626'
|
if (node.attrs && node.attrs.label) {
|
fontFill = node.attrs.label.style.color || '#262626'
|
}
|
|
let fontSize = 14
|
if (node.attrs && node.attrs.label) {
|
fontSize = node.attrs.label.style.fontSize || 14
|
}
|
return [
|
{
|
type: 'title',
|
label: '内容'
|
},
|
{
|
type: 'textarea',
|
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
|
}
|
]
|
} else {
|
let fontFill = '#262626'
|
if (node.attrs && node.attrs.text) {
|
fontFill = node.attrs.text.fill || '#262626'
|
}
|
|
let fill = ''
|
|
if (node.attrs && node.attrs.body) {
|
fill = node.attrs.body.fill || ''
|
}
|
let fontSize = 12
|
if (node.attrs && node.attrs.text) {
|
fontSize = node.attrs.text.fontSize || 12
|
}
|
let stroke = ''
|
|
if (node.attrs && node.attrs.body) {
|
stroke = node.attrs.body.stroke || ''
|
}
|
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
|
},
|
{
|
type: 'other',
|
label: '自定义信息'
|
}
|
]
|
}
|
}
|
|
change = (value, key) => {
|
if (key === 'fontSize') {
|
if (typeof(value) !== 'number' || value < 0) {
|
return
|
}
|
} else if (key === 'width' || key === 'height') {
|
if (typeof(value) !== 'number') {
|
return
|
} else if (value < 100) {
|
return
|
}
|
}
|
|
this.props.onChange(value, key)
|
}
|
|
confirm = () => {
|
this.nodeRef.handleConfirm().then(res => {
|
this.setState({visible: false, mkdata: res})
|
this.props.onChange(res, 'mkdata')
|
})
|
}
|
|
getFields() {
|
const { formlist, mkdata, mknode } = 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 === 'textarea') {
|
fields.push(
|
<Col span={24} key={index} style={{padding: '0 12px'}}>
|
<TextArea defaultValue={item.initval} rows={3} onChange={(e) => this.change(e.target.value, item.field)} />
|
</Col>
|
)
|
} else if (item.type === 'number') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label} help={item.help || null}>
|
<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
|
defaultValue={item.initval}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={(value) => {this.change(value, item.field)}}
|
>
|
{item.options.map(option =>
|
<Select.Option key={option.value} value={option.value}>
|
{option.text}
|
</Select.Option>
|
)}
|
</Select>
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'radio') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
<Radio.Group defaultValue={item.initval} style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.change(e.target.value, item.field)}}>
|
{item.options.map(option => {
|
return (
|
<Radio key={option.value} value={option.value}>{option.text}</Radio>
|
)
|
})}
|
</Radio.Group>
|
</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>
|
)
|
} else if (item.type === 'other') {
|
fields.push(
|
<Col span={24} key={index}>
|
<span className="split-line">{item.label}：<FormOutlined onClick={() => {this.setState({visible: true})}}/></span>
|
{mkdata ? <div className="mk-data">
|
<div>状态：{mkdata.status}<span style={{float: 'right'}}>{mkdata.statusName}</span></div>
|
{mknode.shape !== 'edge' ? <div>标记：{mkdata.sign || ''}</div> : null}
|
{mkdata.roleId ? <div>角色：{mkdata.roleName || ''}</div> : null}
|
{mkdata.depId ? <div>部门：{mkdata.depName || ''}</div> : null}
|
<div>备注：{mkdata.remark || ''}</div>
|
</div> : null}
|
</Col>
|
)
|
}
|
})
|
return fields
|
}
|
|
render() {
|
const { visible, mkdata, mknode } = this.state
|
|
return (
|
<div className="node-edit-form-wrap">
|
<Form className="node-edit-form">
|
<Row>{this.getFields()}</Row>
|
</Form>
|
<Modal
|
title="节点编辑"
|
visible={visible}
|
closable={false}
|
maskClosable={false}
|
width={700}
|
onOk={this.confirm}
|
onCancel={() => this.setState({visible: false})}
|
destroyOnClose
|
>
|
<NodeForm node={mknode} data={mkdata} rolelist={this.props.rolelist} handleSubmit={() => this.confirm()} wrappedComponentRef={(inst) => this.nodeRef = inst}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default NodeUpdate
|
