import React, { Component } from 'react'
|
import { is, fromJS } from 'immutable'
|
import PropTypes from 'prop-types'
|
import { notification, Modal, Collapse, Switch, Button } from 'antd'
|
import { DoubleLeftOutlined, DoubleRightOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
|
|
import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
|
const MobShell = asyncComponent(() => import('@/mob/mobshell'))
|
const SourceWrap = asyncComponent(() => import('@/mob/modulesource'))
|
const Modulecell = asyncComponent(() => import('@/menu/modulecell'))
|
const BgController = asyncComponent(() => import('@/pc/bgcontroller'))
|
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
|
const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
|
const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton'))
|
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,
|
settingshow: true,
|
controlshow: true,
|
eyeopen: 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 _this = this
|
|
confirm({
|
title: '配置已修改，放弃保存吗？',
|
content: '',
|
onOk() {
|
_this.props.cancel()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.cancel()
|
}
|
}
|
|
getMenuMessage = (config) => {
|
let tbs = []
|
|
let traversal = (components) => {
|
components.forEach(item => {
|
if (item.$tables) {
|
tbs.push(...item.$tables)
|
}
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
traversal(tab.components)
|
})
|
} else if (item.type === 'group') {
|
traversal(item.components)
|
}
|
})
|
}
|
|
traversal(config.components)
|
|
config.$tables = Array.from(new Set(tbs))
|
}
|
|
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
|
}
|
|
let _pass = this.verifyConfig(config)
|
|
if (config.enabled && !_pass) {
|
config.enabled = false
|
config.force = true
|
} else if (!config.enabled && config.force && _pass) {
|
config.enabled = true
|
delete config.force
|
}
|
|
this.getMenuMessage(config)
|
|
this.setState({
|
config: config,
|
menuloading: true
|
})
|
|
window.GLOB.customMenu = config
|
|
this.props.save(fromJS(config).toJS())
|
}
|
|
onEnabledChange = () => {
|
const { config } = this.state
|
|
let _config = {...config, enabled: !config.enabled}
|
|
delete _config.force
|
|
if (!_config.enabled) {
|
this.setState({
|
config: _config
|
})
|
} else if (this.verifyConfig(_config)) {
|
this.setState({
|
config: _config
|
})
|
}
|
}
|
|
verifyConfig = (config) => {
|
let error = ''
|
|
let check = (components) => {
|
components.forEach(item => {
|
if (error) return
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
check(tab.components)
|
})
|
return
|
} else if (item.type === 'group') {
|
check(item.components)
|
return
|
} else if (!item.errors || item.errors.length === 0) {
|
return
|
}
|
|
item.errors.forEach(err => {
|
if (err.level !== 0 || error) return
|
error = `组件《${item.name}》${err.detail}`
|
})
|
})
|
}
|
|
check(config.components)
|
|
if (config.enabled && 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
|
}
|
|
insert = (item) => {
|
let config = fromJS(this.state.config).toJS()
|
|
config.components.push(item)
|
|
this.setState({config})
|
|
window.GLOB.customMenu = config
|
|
notification.success({
|
top: 92,
|
message: '粘贴成功！',
|
duration: 2
|
})
|
}
|
|
render () {
|
const { settingshow, controlshow, comloading, config, menuloading, eyeopen } = this.state
|
|
return (
|
<div className="mob-poper-view">
|
<div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
|
<div className="draw">
|
{settingshow ? <DoubleLeftOutlined onClick={() => {this.setState({settingshow: false})}} /> : null}
|
{!settingshow ? <DoubleRightOutlined onClick={() => {this.setState({settingshow: true})}} /> : null}
|
</div>
|
<div className="pc-setting-tools">
|
<Collapse accordion defaultActiveKey="component" bordered={false}>
|
{/* 基本信息 */}
|
<Panel header="基本信息" forceRender className="basedata" key="basedata">
|
{/* 表名添加 */}
|
<TableComponent config={config} updatetable={this.updateConfig}/>
|
</Panel>
|
{/* 组件添加 */}
|
<Panel header="组件" className="component" key="component">
|
<SourceWrap viewType="popview"/>
|
</Panel>
|
<Panel header="元素" key="element">
|
<Modulecell />
|
</Panel>
|
<Panel header="页面样式" key="background">
|
<BgController config={config} type="mob_popview" updateConfig={this.updateConfig} />
|
</Panel>
|
</Collapse>
|
</div>
|
</div>
|
<div className={'menu-control' + (!controlshow ? ' hidden' : '')}>
|
<div className="draw">
|
{controlshow ? <DoubleRightOutlined onClick={() => {this.setState({controlshow: false})}}/> : null}
|
{!controlshow ? <DoubleLeftOutlined onClick={() => {this.setState({controlshow: true})}}/> : null}
|
</div>
|
<div className="wrap">
|
<Button type="primary" onClick={this.submitConfig} id="save-config" loading={menuloading}>保存</Button>
|
<Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config && config.enabled} onChange={this.onEnabledChange} />
|
<Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
|
<PasteController insert={this.insert} />
|
<StyleCombControlButton menu={config} />
|
<ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/>
|
<Button type="default" onClick={this.closeView}>返回</Button>
|
</div>
|
</div>
|
<div className={'menu-body menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
|
{config && !comloading ? <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
|
<MobShell menu={config} handleList={this.updateConfig} />
|
</div> : null}
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default PopViewDesign
|
