| | |
| | | import React, { Component } from 'react' |
| | | import { DndProvider } from 'react-dnd' |
| | | import { is, fromJS } from 'immutable' |
| | | import PropTypes from 'prop-types' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import { notification, Modal, Collapse, Card, Switch, Button } from 'antd' |
| | | import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons' |
| | | |
| | |
| | | const { confirm } = Modal |
| | | |
| | | const MenuForm = asyncComponent(() => import('./menuform')) |
| | | const Header = asyncComponent(() => import('@/menu/header')) |
| | | const SourceWrap = asyncComponent(() => import('@/menu/modulesource')) |
| | | const Modulecell = asyncComponent(() => import('@/menu/modulecell')) |
| | | const MenuShell = asyncComponent(() => import('@/menu/menushell')) |
| | |
| | | class PopViewDesign extends Component { |
| | | static propTpyes = { |
| | | btn: PropTypes.object, |
| | | updateConfig: PropTypes.func |
| | | save: PropTypes.func, |
| | | cancel: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | MenuId: '', |
| | | activeKey: 'basedata', |
| | | menuloading: false, |
| | | oriConfig: null, |
| | | config: null, |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('completeSave', this.completeSave) |
| | | MKEmitter.addListener('triggerMenuSave', this.submitConfig) |
| | | } |
| | | |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('completeSave', this.completeSave) |
| | | MKEmitter.removeListener('triggerMenuSave', this.submitConfig) |
| | | } |
| | | |
| | |
| | | const { oriConfig, config } = this.state |
| | | |
| | | if (!is(fromJS(oriConfig), fromJS(config))) { |
| | | const _this = this |
| | | |
| | | confirm({ |
| | | title: '配置已修改,放弃保存吗?', |
| | | content: '', |
| | | onOk() { |
| | | // window.history.back() |
| | | _this.props.cancel() |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } else { |
| | | // window.history.back() |
| | | this.props.cancel() |
| | | } |
| | | } |
| | | |
| | | getMenuMessage = (tbs) => { |
| | | const { config } = this.state |
| | | getMenuMessage = (config) => { |
| | | let tbs = [] |
| | | |
| | | let traversal = (components) => { |
| | | components.forEach(item => { |
| | |
| | | } |
| | | |
| | | traversal(config.components) |
| | | |
| | | config.$tables = Array.from(new Set(tbs)) |
| | | } |
| | | |
| | | completeSave = () => { |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | } |
| | | |
| | | submitConfig = () => { |
| | |
| | | config.enabled = false |
| | | } |
| | | |
| | | this.getMenuMessage(config) |
| | | |
| | | this.setState({ |
| | | config: config, |
| | | menuloading: true |
| | | }) |
| | | |
| | | window.GLOB.customMenu = config |
| | | |
| | | this.props.save(config) |
| | | } |
| | | |
| | | onEnabledChange = () => { |
| | |
| | | config.components.push(item) |
| | | |
| | | this.setState({config}) |
| | | |
| | | window.GLOB.customMenu = config |
| | | |
| | | notification.success({ |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { activeKey, comloading, config, menuloading, eyeopen } = this.state |
| | | const { comloading, config, menuloading, eyeopen } = this.state |
| | | |
| | | return ( |
| | | <div className="pc-poper-view"> |
| | | <Header /> |
| | | <DndProvider backend={HTML5Backend}> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | | <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header="基本信息" key="basedata"> |
| | | {/* 菜单信息 */} |
| | | <MenuForm config={config} updateConfig={this.updateConfig}/> |
| | | {/* 表名添加 */} |
| | | <TableComponent config={config} updatetable={this.updatetable}/> |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header="组件" key="component"> |
| | | <SourceWrap MenuType="" /> |
| | | </Panel> |
| | | <Panel header="元素" key="element"> |
| | | <Modulecell /> |
| | | </Panel> |
| | | <Panel header="页面样式" key="background"> |
| | | <BgController config={config} updateConfig={this.updateConfig} /> |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}> |
| | | <Card title={ |
| | | <div> {config.MenuName} </div> |
| | | } bordered={false} extra={ |
| | | <div> |
| | | <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <PasteController insert={this.insert} /> |
| | | <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" onClick={this.closeView}>返回</Button> |
| | | </div> |
| | | } style={{ width: '100%' }}> |
| | | {!comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |
| | | </Card> |
| | | </div> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | | <Collapse accordion defaultActiveKey="basedata" bordered={false}> |
| | | {/* 基本信息 */} |
| | | <Panel header="基本信息" key="basedata"> |
| | | {/* 菜单信息 */} |
| | | <MenuForm config={config} updateConfig={this.updateConfig}/> |
| | | {/* 表名添加 */} |
| | | <TableComponent config={config} updatetable={this.updatetable}/> |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header="组件" key="component"> |
| | | <SourceWrap MenuType="" /> |
| | | </Panel> |
| | | <Panel header="元素" key="element"> |
| | | <Modulecell /> |
| | | </Panel> |
| | | <Panel header="页面样式" key="background"> |
| | | <BgController config={config} updateConfig={this.updateConfig} /> |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | </DndProvider> |
| | | <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}> |
| | | <Card title={ |
| | | <div> {config.MenuName} </div> |
| | | } bordered={false} extra={ |
| | | <div> |
| | | <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <PasteController insert={this.insert} /> |
| | | <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" onClick={this.closeView}>返回</Button> |
| | | </div> |
| | | } style={{ width: '100%' }}> |
| | | {!comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |
| | | </Card> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |