import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal, notification, Switch, message } from 'antd'
|
import { CopyOutlined } from '@ant-design/icons'
|
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import { getColumnForm } from '@/templates/zshare/formconfig'
|
|
import ColumnForm from './columnform'
|
import ColspanForm from './colspanform'
|
import GridBtnForm from './gridbtnform'
|
import DragElement from './dragcolumn'
|
import MarkColumn from './markcolumn'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class ColumnComponent extends Component {
|
static propTpyes = {
|
menu: PropTypes.object, // 三级菜单信息
|
config: PropTypes.object, // 配置信息
|
updatecolumn: PropTypes.func // 更新
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
columnlist: null, // 显示列
|
showField: true, // 显示列字段
|
modaltype: '', // 模态框控制
|
card: null // 编辑中元素
|
}
|
|
/**
|
* @description 显示列初始化
|
*/
|
UNSAFE_componentWillMount () {
|
this.setState({
|
columnlist: fromJS(this.props.config.columns).toJS()
|
})
|
}
|
|
/**
|
* @description 显示列顺序调整，或拖拽添加
|
*/
|
handleList = (list, card) => {
|
const { config } = this.props
|
|
if (card) {
|
this.setState({columnlist: list})
|
this.handleColumn(card)
|
} else {
|
this.setState({columnlist: list}, ()=> {
|
this.props.updatecolumn({...config, columns: list})
|
})
|
}
|
}
|
|
/**
|
* @description 显示列与合并列编辑，获取表单信息
|
*/
|
handleColumn = (card) => {
|
const { menu } = this.props
|
const { columnlist } = this.state
|
|
if (card.type !== 'colspan') {
|
let menulist = []
|
|
if (menu.fstMenuList) {
|
let trees = fromJS(menu.fstMenuList).toJS()
|
|
menulist = trees.map(fst => {
|
fst.value = fst.MenuID
|
fst.label = fst.MenuName
|
fst.isLeaf = false
|
fst.children = fst.children.map(snd => {
|
snd.value = snd.MenuID
|
snd.label = snd.MenuName
|
|
snd.children = snd.children.map(thd => {
|
thd.value = thd.MenuID
|
thd.label = thd.MenuName
|
thd.disabled = thd.MenuID === menu.MenuID
|
return thd
|
})
|
return snd
|
})
|
return fst
|
})
|
}
|
|
let fields = []
|
columnlist.forEach(col => {
|
if (!col.field) return
|
fields.push({
|
value: col.field,
|
text: col.label
|
})
|
})
|
|
this.setState({
|
modaltype: 'columns',
|
card: card,
|
formlist: getColumnForm(card, menulist, fields)
|
})
|
} else {
|
this.setState({
|
modaltype: 'colspan',
|
card: card
|
})
|
}
|
}
|
|
/**
|
* @description 设置标志
|
*/
|
markElement = (card) => {
|
this.setState({
|
modaltype: 'mark',
|
card: card
|
})
|
}
|
|
/**
|
* @description 操作列编辑
|
*/
|
handleGridBtn = () => {
|
this.setState({
|
modaltype: 'gridbtn'
|
})
|
}
|
|
/**
|
* @description 取消保存，如果元素为新添元素，则从序列中删除
|
*/
|
editModalCancel = () => {
|
const { card } = this.state
|
|
if (card && card.focus) {
|
let _columnlist = fromJS(this.state.columnlist).toJS()
|
|
_columnlist = _columnlist.filter(item => item.uuid !== card.uuid)
|
|
this.setState({
|
card: null,
|
modaltype: '',
|
columnlist: _columnlist
|
})
|
} else {
|
this.setState({
|
card: null,
|
modaltype: ''
|
})
|
}
|
}
|
|
/**
|
* @description 搜索修改后提交保存
|
* 1、去除系统默认显示列
|
* 2、字段及提示文字重复校验
|
* 3、更新下拉菜单可选集合
|
* 4、下拉菜单数据源语法验证
|
*/
|
handleSubmit = () => {
|
const { config } = this.props
|
const { modaltype, card } = this.state
|
|
let _columnlist = fromJS(this.state.columnlist).toJS()
|
|
if (modaltype === 'columns' || modaltype === 'colspan') {
|
this.columnFormRef.handleConfirm().then(res => {
|
let fieldrepet = false // 字段重复
|
|
_columnlist = _columnlist.filter(item => !item.origin || item.uuid === res.uuid) // 去除初始列
|
_columnlist = _columnlist.map(item => {
|
if (item.uuid !== res.uuid && res.field && item.field) {
|
if (item.field.toLowerCase() === res.field.toLowerCase()) {
|
fieldrepet = true
|
}
|
}
|
|
if (item.uuid === res.uuid) {
|
return res
|
} else {
|
return item
|
}
|
})
|
|
if (fieldrepet) {
|
notification.warning({
|
top: 92,
|
message: '字段已存在!',
|
duration: 5
|
})
|
return
|
}
|
|
if (!card.focus && (card.type !== res.type || (res.field && card.field !== res.field))) {
|
let refers = []
|
_columnlist.forEach(column => {
|
if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
|
refers.push(column.label)
|
}
|
if (column.type === 'colspan') {
|
let _length = column.sublist.length
|
column.sublist = column.sublist.filter(cell => cell !== card.uuid)
|
|
if (column.sublist.length < _length) {
|
let subfield = [] // 合并列字段
|
_columnlist.forEach(col => {
|
if (col.field && column.sublist.includes(col.uuid)) {
|
subfield.push(col.field)
|
}
|
})
|
column.subfield = subfield.join(', ')
|
}
|
}
|
})
|
|
if (refers.length > 0) {
|
notification.warning({
|
top: 92,
|
message: '显示列《' + refers.join('、') + '》标记中含有该字段，此次修改会导致标记失效，请修改相应的标记设置！',
|
duration: 5
|
})
|
}
|
|
let chartRefers = []
|
config.charts && config.charts.forEach((chart, index) => {
|
if (chart.chartType === 'card') {
|
if (chart.avatar && chart.avatar.field === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (chart.header && chart.header.datatype === 'dynamic' && chart.header.field === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (chart.details && chart.details.length > 0 && chart.details.filter(item => item.datatype === 'dynamic' && item.field === card.field).length > 0) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
} else if (['bar', 'line', 'pie'].includes(chart.chartType)) {
|
if (chart.Xaxis === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (Array.isArray(chart.Yaxis)) {
|
if (chart.Yaxis.includes(card.field)) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
} else if (chart.Yaxis === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
}
|
})
|
|
if (chartRefers.length > 0) {
|
notification.warning({
|
top: 92,
|
message: '图表《' + chartRefers.join('、') + '》中含有该字段，此次修改会导致图表显示异常，请修改相应的图表设置！',
|
duration: 5
|
})
|
}
|
}
|
|
this.setState({
|
card: null,
|
columnlist: _columnlist,
|
modaltype: ''
|
}, ()=> {
|
this.props.updatecolumn({...config, columns: _columnlist})
|
})
|
})
|
} else if (modaltype === 'gridbtn') {
|
this.gridBtnFormRef.handleConfirm().then(res => {
|
this.setState({
|
modaltype: ''
|
})
|
|
this.props.updatecolumn({...config, gridBtn: res})
|
})
|
}
|
}
|
|
/**
|
* @description 显示列删除
|
*/
|
deleteElement = (card) => {
|
const { config } = this.props
|
const { dict } = this.state
|
let _this = this
|
|
confirm({
|
content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ？`,
|
onOk() {
|
let _columnlist = fromJS(_this.state.columnlist).toJS()
|
|
_columnlist = _columnlist.filter(item => item.uuid !== card.uuid)
|
|
if (card.field) {
|
let refers = []
|
_columnlist.forEach(column => {
|
if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
|
refers.push(column.label)
|
}
|
if (column.type === 'colspan') {
|
let _length = column.sublist.length
|
column.sublist = column.sublist.filter(cell => cell !== card.uuid)
|
|
if (column.sublist.length < _length) {
|
let subfield = [] // 合并列字段
|
_columnlist.forEach(col => {
|
if (col.field && column.sublist.includes(col.uuid)) {
|
subfield.push(col.field)
|
}
|
})
|
column.subfield = subfield.join(', ')
|
}
|
}
|
})
|
|
if (refers.length > 0) {
|
notification.warning({
|
top: 92,
|
message: '显示列《' + refers.join('、') + '》标记中含有该字段，删除会导致标记失效，请修改相应的标记设置！',
|
duration: 5
|
})
|
}
|
|
let chartRefers = []
|
config.charts && config.charts.forEach((chart, index) => {
|
if (chart.chartType === 'card') {
|
if (chart.avatar && chart.avatar.field === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (chart.header && chart.header.datatype === 'dynamic' && chart.header.field === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (chart.details && chart.details.length > 0 && chart.details.filter(item => item.datatype === 'dynamic' && item.field === card.field).length > 0) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
} else if (['bar', 'line', 'pie'].includes(chart.chartType)) {
|
if (chart.Xaxis === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
} else if (Array.isArray(chart.Yaxis)) {
|
if (chart.Yaxis.includes(card.field)) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
} else if (chart.Yaxis === card.field) {
|
chartRefers.push(chart.title || (index + 1))
|
}
|
}
|
})
|
|
if (chartRefers.length > 0) {
|
notification.warning({
|
top: 92,
|
message: '图表《' + chartRefers.join('、') + '》中含有该字段，删除会导致图表显示异常，请修改相应的图表设置！',
|
duration: 5
|
})
|
}
|
}
|
|
_this.setState({
|
columnlist: _columnlist
|
}, ()=> {
|
_this.props.updatecolumn({...config, columns: _columnlist})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
/**
|
* @description 显示列复制
|
*/
|
copycolumn = () => {
|
const { columnlist } = this.state
|
|
let oInput = document.createElement('input')
|
let val = {
|
copyType: 'columns',
|
columns: columnlist
|
}
|
|
let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
|
if (srcid) {
|
val.$srcId = srcid
|
}
|
|
oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
oInput.className = 'oInput'
|
oInput.style.display = 'none'
|
|
message.success('复制成功。')
|
|
document.body.removeChild(oInput)
|
}
|
|
/**
|
* @description 显示列字段名显示或隐藏控制
|
*/
|
onFieldChange = () => {
|
const { showField, columnlist } = this.state
|
|
if (!showField) {
|
let fields = []
|
columnlist.forEach(col => {
|
if (col.field) {
|
fields.push(col.field)
|
}
|
})
|
|
fields = fields.join(',')
|
|
let textArea = document.createElement('textarea')
|
textArea.value = fields
|
document.body.appendChild(textArea)
|
textArea.select()
|
|
try {
|
document.execCommand('copy')
|
document.body.removeChild(textArea)
|
} catch (err) {
|
document.body.removeChild(textArea)
|
}
|
}
|
|
this.setState({
|
showField: !showField
|
})
|
}
|
|
markSubmit = () => {
|
const { config } = this.props
|
const { card } = this.state
|
let _columnlist = fromJS(this.state.columnlist).toJS()
|
let _marks = this.refs.markRef.state.marks
|
|
if (_marks.length === 0) {
|
_marks = ''
|
}
|
|
_columnlist = _columnlist.map(item => {
|
if (item.uuid === card.uuid) {
|
item.marks = _marks
|
}
|
|
return item
|
})
|
|
this.setState({
|
card: null,
|
columnlist: _columnlist,
|
modaltype: ''
|
}, ()=> {
|
this.props.updatecolumn({...config, columns: _columnlist})
|
})
|
}
|
|
plusColumns = (MenuId, items) => {
|
const { config } = this.props
|
const { columnlist } = this.state
|
|
if (MenuId !== config.uuid) return
|
|
let list = [...columnlist, ...items]
|
|
if (list[0] && list[0].origin) {
|
list = list.filter(col => !col.origin)
|
}
|
|
this.setState({
|
columnlist: list
|
}, () => {
|
this.props.updatecolumn({...config, columns: list})
|
})
|
}
|
|
revert = () => {
|
this.setState({
|
columnlist: fromJS(this.props.config.columns).toJS()
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('revert', this.revert)
|
MKEmitter.addListener('plusColumns', this.plusColumns)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('revert', this.revert)
|
MKEmitter.removeListener('plusColumns', this.plusColumns)
|
}
|
|
render() {
|
const { config } = this.props
|
const { modaltype, columnlist, dict, card } = this.state
|
|
return (
|
<div className="model-table-column-list">
|
{columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null}
|
<Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} />
|
<DragElement
|
list={columnlist}
|
setting={config.setting}
|
gridBtn={config.gridBtn}
|
handleList={this.handleList}
|
handleMenu={this.handleColumn}
|
deleteMenu={this.deleteElement}
|
markMenu={this.markElement}
|
handleGridBtn={this.handleGridBtn}
|
showfield={this.state.showField}
|
/>
|
{/* 显示列编辑 */}
|
<Modal
|
title="显示列-编辑"
|
visible={modaltype === 'columns'}
|
width={850}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<ColumnForm
|
dict={dict}
|
card={card}
|
MenuID={this.props.menu.MenuID}
|
inputSubmit={this.handleSubmit}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.columnFormRef = inst}
|
/>
|
</Modal>
|
{/* 合并列编辑 */}
|
<Modal
|
title={dict['model.form.colspan'] + '-' + dict['model.edit']}
|
visible={modaltype === 'colspan'}
|
width={850}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<ColspanForm
|
dict={dict}
|
card={card}
|
inputSubmit={this.handleSubmit}
|
columns={columnlist}
|
wrappedComponentRef={(inst) => this.columnFormRef = inst}
|
/>
|
</Modal>
|
{/* 操作列编辑 */}
|
<Modal
|
title="操作列-编辑"
|
visible={modaltype === 'gridbtn'}
|
width={850}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<GridBtnForm
|
dict={dict}
|
inputSubmit={this.handleSubmit}
|
card={config.gridBtn}
|
wrappedComponentRef={(inst) => this.gridBtnFormRef = inst}
|
/>
|
</Modal>
|
{/* 按钮使用系统存储过程时，验证信息模态框 */}
|
<Modal
|
wrapClassName="model-table-column-mark-modal"
|
title={'标记设置'}
|
visible={modaltype === 'mark'}
|
width={'75vw'}
|
maskClosable={false}
|
okText={dict['model.submit']}
|
onOk={this.markSubmit}
|
onCancel={() => { this.setState({ modaltype: '' }) }}
|
destroyOnClose
|
>
|
<MarkColumn
|
ref="markRef"
|
card={card}
|
dict={dict}
|
columns={columnlist}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default ColumnComponent
|
