import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal } from 'antd'
|
import { ForkOutlined } from '@ant-design/icons'
|
|
import './index.scss'
|
|
class FormFork extends Component {
|
static propTpyes = {
|
forms: PropTypes.array
|
}
|
|
state = {
|
visible: false,
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
trigger = () => {
|
const { forms } = this.props
|
|
// let linkSubField = []
|
// let supField = []
|
// let tabField = []
|
// let linkField = []
|
|
|
let linkFields = {} // 关联菜单
|
let controlFields = {} // 控制表单
|
let fieldMap = new Map()
|
let formlist = fromJS(forms).toJS()
|
|
formlist.forEach(item => {
|
if (item.supField) { // 多层表单控制
|
if (['hint', 'split', 'formula'].includes(item.type)) {
|
item.field = item.uuid
|
}
|
let supvals = []
|
if (item.supvalue) {
|
item.supvalue.split(',').forEach(val => {
|
supvals.push(val)
|
})
|
} else {
|
supvals.push('')
|
}
|
supvals = Array.from(new Set(supvals))
|
controlFields[item.supField] = controlFields[item.supField] || []
|
controlFields[item.supField].push({field: item.field, values: supvals.join(',')})
|
} else {
|
delete item.supField
|
delete item.supvalue
|
}
|
if (item.linkField) {
|
linkFields[item.linkField] = linkFields[item.linkField] || []
|
linkFields[item.linkField].push({field: item.field, label: item.label, uuid: item.uuid})
|
} else {
|
delete item.linkField
|
}
|
|
Object.keys(item).forEach(key => {
|
if (!['type', 'uuid', 'field', 'label', 'supField', 'supvalue', 'linkField', 'linkSubField', 'multiple', 'enter', 'tabField'].includes(key)) {
|
delete item[key]
|
}
|
})
|
|
if (!item.field) return
|
|
fieldMap.set(item.field, item)
|
})
|
|
Object.keys(controlFields).forEach(key => {
|
if (!fieldMap.has(key)) return
|
|
let supItem = fieldMap.get(key)
|
let fields = []
|
|
controlFields[key].forEach(item => {
|
if (!fieldMap.has(item.field)) return
|
|
item.label = fieldMap.get(item.field).label
|
|
fields.push(item)
|
})
|
|
if (fields.length === 0) return
|
|
supItem.controlFields = fields
|
|
fieldMap.set(key, supItem)
|
})
|
|
let _f = fromJS([...fieldMap.values()]).toJS()
|
_f.forEach(item => {
|
// 下级表单控制-字段写入
|
if (item.linkSubField && item.linkSubField.length > 0) {
|
item.subFields = []
|
if ((['select', 'radio', 'link', 'cascader'].includes(item.type) || (item.type === 'checkcard' && item.multiple !== 'true'))) {
|
item.linkSubField.forEach(m => {
|
let n = fieldMap.get(m)
|
if (n && ['text', 'number', 'textarea', 'select'].includes(n.type)) {
|
item.subFields.push({
|
uuid: n.uuid,
|
field: m,
|
label: n.label
|
})
|
}
|
})
|
} else if (item.type === 'switch') {
|
item.linkSubField.forEach(m => {
|
let n = fieldMap.get(m)
|
if (n && ['text', 'number', 'textarea', 'select'].includes(n.type)) {
|
item.subFields.push({
|
uuid: n.uuid,
|
field: m,
|
label: n.label
|
})
|
}
|
})
|
} else if (item.type === 'fileupload') {
|
item.linkSubField.forEach(m => {
|
let n = fieldMap.get(m)
|
if (n && ['text', 'number', 'textarea', 'select'].includes(n.type)) {
|
item.subFields.push({
|
uuid: n.uuid,
|
field: m,
|
label: n.label
|
})
|
}
|
})
|
} else if (item.type === 'popSelect') {
|
item.linkSubField.forEach(m => {
|
let n = fieldMap.get(m)
|
if (n && ['text', 'number', 'textarea', 'select'].includes(n.type)) {
|
item.subFields.push({
|
uuid: n.uuid,
|
field: m,
|
label: n.label
|
})
|
}
|
})
|
}
|
|
if (item.subFields.length === 0) {
|
delete item.subFields
|
}
|
}
|
|
if (linkFields[item.field]) {
|
item.linkFields = linkFields[item.field]
|
}
|
|
if (item.enter === 'tab' || item.enter === 'sub') {
|
if (item.tabField) {
|
if (!fieldMap.has(item.tabField)) {
|
delete item.tabField
|
} else {
|
item.tabLabel = fieldMap.get(item.tabField).label
|
}
|
}
|
} else {
|
delete item.tabField
|
}
|
|
if (item.supField) {
|
if (!fieldMap.has(item.supField)) {
|
delete item.supField
|
delete item.supvalue
|
} else {
|
item.supLabel = fieldMap.get(item.supField).label
|
}
|
}
|
if (item.linkField) {
|
if (!fieldMap.has(item.linkField)) {
|
item.linkLabel = '字段集'
|
} else {
|
item.linkLabel = fieldMap.get(item.linkField).label
|
}
|
}
|
|
delete item.enter
|
delete item.multiple
|
delete item.linkSubField
|
|
// if (!item.controlFields && !item.linkFields && !item.subFields && !item.resubFields)
|
|
fieldMap.set(item.field, item)
|
})
|
|
let _t = fromJS([...fieldMap.values()]).toJS()
|
|
_t.forEach(item => {
|
if (item.subFields) {
|
item.subFields.forEach(cell => {
|
let _cell = fieldMap.get(cell.field)
|
|
_cell.resubFields = _cell.resubFields || []
|
|
_cell.resubFields.push({
|
uuid: item.uuid,
|
field: item.field,
|
label: item.label
|
})
|
|
fieldMap.set(cell.field, _cell)
|
})
|
}
|
})
|
|
this.setState({
|
visible: true
|
})
|
}
|
|
render() {
|
const { visible } = this.state
|
|
return (
|
<>
|
<ForkOutlined title="表单关系图" onClick={this.trigger}/>
|
<Modal
|
title="表单关系图"
|
wrapClassName="form-fork-modal mk-scroll-modal"
|
visible={visible}
|
width={900}
|
maskClosable={false}
|
cancelText="关闭"
|
onOk={() => { this.setState({ visible: false })}}
|
onCancel={() => { this.setState({ visible: false })}}
|
destroyOnClose
|
>
|
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default FormFork
|
