import React, { Component } from 'react'
|
import { is, fromJS } from 'immutable'
|
import PropTypes from 'prop-types'
|
import { notification, Modal, Collapse, Card, Switch, Button } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
import SourceElement from '@/templates/zshare/dragsource'
|
import asyncComponent from '@/utils/asyncComponent'
|
import Source from '../source'
|
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
|
const MenuShell = asyncComponent(() => import('@/menu/tableshell'))
|
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
|
const NormalCopy = asyncComponent(() => import('@/menu/normalCopy'))
|
const BgController = asyncComponent(() => import('@/pc/bgcontroller'))
|
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
|
|
class PopViewDesign extends Component {
|
static propTpyes = {
|
btn: PropTypes.object,
|
save: PropTypes.func,
|
cancel: PropTypes.func
|
}
|
|
state = {
|
menuloading: false,
|
oriConfig: null,
|
config: null,
|
comloading: false,
|
}
|
|
UNSAFE_componentWillMount() {
|
const { btn } = this.props
|
sessionStorage.setItem('editMenuType', 'popview')
|
|
let config = fromJS(btn.config).toJS()
|
|
window.GLOB.urlFields = [] // url变量
|
window.GLOB.customMenu = config // 保存菜单信息
|
|
this.setState({config: config, oriConfig: fromJS(config).toJS()})
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('completeSave', this.completeSave)
|
MKEmitter.addListener('triggerMenuSave', this.submitConfig)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('completeSave', this.completeSave)
|
MKEmitter.removeListener('triggerMenuSave', this.submitConfig)
|
}
|
|
closeView = () => {
|
const { oriConfig, config } = this.state
|
|
if (!is(fromJS(oriConfig), fromJS(config))) {
|
const that = this
|
|
confirm({
|
title: '配置已修改，放弃保存吗？',
|
content: '',
|
onOk() {
|
that.props.cancel()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.cancel()
|
}
|
}
|
|
completeSave = () => {
|
this.setState({
|
oriConfig: fromJS(this.state.config).toJS(),
|
menuloading: false
|
})
|
}
|
|
submitConfig = () => {
|
let config = fromJS(this.state.config).toJS()
|
|
if (config.cacheUseful === 'true' && !config.cacheTime) {
|
notification.warning({
|
top: 92,
|
message: '请完善缓存设置！',
|
duration: 5
|
})
|
return
|
}
|
|
if (config.enabled && this.verifyConfig()) {
|
config.enabled = false
|
}
|
|
config.$tables = Array.from(new Set(config.components[0].$tables || []))
|
|
this.setState({
|
config: config,
|
menuloading: true
|
})
|
|
window.GLOB.customMenu = config
|
|
this.props.save(fromJS(config).toJS())
|
}
|
|
onEnabledChange = () => {
|
const { config } = this.state
|
|
if (!config.enabled && this.verifyConfig(true)) {
|
return
|
}
|
|
this.setState({
|
config: {...config, enabled: !config.enabled}
|
})
|
}
|
|
verifyConfig = (show) => {
|
const { config } = this.state
|
let error = ''
|
|
if (config.components[0].errors) {
|
config.components[0].errors.forEach(err => {
|
if (err.level !== 0 || error) return
|
error = err.detail
|
})
|
}
|
|
if (show && error) {
|
notification.warning({
|
top: 92,
|
message: error,
|
duration: 5
|
})
|
}
|
|
return error
|
}
|
|
// 更新配置信息
|
updateConfig = (config) => {
|
this.setState({
|
config: config
|
})
|
|
window.GLOB.customMenu = config
|
}
|
|
resetConfig = (config) => {
|
this.setState({
|
config,
|
comloading: true
|
}, () => {
|
this.setState({
|
comloading: false
|
})
|
})
|
|
window.GLOB.customMenu = config
|
}
|
|
/**
|
* @description 更新常用表信息，快捷添加后更新配置信息
|
*/
|
updatetable = (config) => {
|
this.setState({ config })
|
|
window.GLOB.customMenu = config
|
}
|
|
render () {
|
const { comloading, config, menuloading } = this.state
|
|
return (
|
<div className="pc-poper-view">
|
<div className="menu-body">
|
<div className="menu-setting">
|
<Collapse accordion defaultActiveKey="basedata" bordered={false}>
|
{/* 基本信息 */}
|
<Panel header="基本信息" key="basedata">
|
{/* 表名添加 */}
|
<TableComponent config={config} updatetable={this.updatetable}/>
|
<NormalCopy />
|
</Panel>
|
{/* 组件添加 */}
|
<Panel header="搜索" key="search">
|
{Source.searchItems.map((item, index) => (<SourceElement key={index} content={item}/>))}
|
</Panel>
|
<Panel header="按钮" key="action">
|
{Source.popactionItems.map((item, index) => (<SourceElement key={index} content={item}/>))}
|
</Panel>
|
<Panel header="显示列" key="cols">
|
{Source.columnItems.map((item, index) => (<SourceElement key={index} content={item}/>))}
|
</Panel>
|
<Panel header="页面样式" key="background">
|
<BgController config={config} updateConfig={this.updateConfig} />
|
</Panel>
|
</Collapse>
|
</div>
|
<div className={'menu-view' + (menuloading ? ' saving' : '')}>
|
<Card title={
|
<div> {config.MenuName} </div>
|
} bordered={false} extra={
|
<div>
|
<ReplaceField config={config} updateConfig={this.resetConfig}/>
|
<Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config.enabled} onChange={this.onEnabledChange} />
|
<Button type="primary" id="save-pop-config" onClick={this.submitConfig} loading={menuloading}>保存</Button>
|
<Button type="default" disabled={menuloading} onClick={this.closeView}>返回</Button>
|
</div>
|
} style={{ width: '100%' }}>
|
{!comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null}
|
</Card>
|
</div>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default PopViewDesign
|
