From fa381753ef2a2b25b1c0722549ac17e333da79be Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 06 九月 2022 22:50:54 +0800 Subject: [PATCH] 2022-09-06 --- src/views/popdesign/index.jsx | 352 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 190 insertions(+), 162 deletions(-) diff --git a/src/menu/popview/index.jsx b/src/views/popdesign/index.jsx similarity index 67% rename from src/menu/popview/index.jsx rename to src/views/popdesign/index.jsx index ff72ac6..e95fc0f 100644 --- a/src/menu/popview/index.jsx +++ b/src/views/popdesign/index.jsx @@ -1,21 +1,21 @@ import React, { Component } from 'react' -import PropTypes from 'prop-types' import { DndProvider } from 'react-dnd' import { is, fromJS } from 'immutable' import moment from 'moment' import HTML5Backend from 'react-dnd-html5-backend' -import { notification, Modal, Collapse, Card, Switch, Button } from 'antd' +import { ConfigProvider, notification, Modal, Collapse, Card, Switch, Button } from 'antd' import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons' import Api from '@/api' -import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' +import Utils, { setGLOBFuncs } from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' +// import antdEnUS from 'antd/es/locale/en_US' +import antdZhCN from 'antd/es/locale/zh_CN' import './index.scss' +const _locale = antdZhCN const { Panel } = Collapse const { confirm } = Modal @@ -25,22 +25,22 @@ const SourceWrap = asyncComponent(() => import('@/menu/modulesource')) const MenuShell = asyncComponent(() => import('@/menu/menushell')) const ReplaceField = asyncComponent(() => import('@/menu/replaceField')) -const BgController = asyncComponent(() => import('@/menu/bgcontroller')) +const BgController = asyncComponent(() => import('@/pc/bgcontroller')) const PasteController = asyncComponent(() => import('@/menu/pastecontroller')) -const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton')) const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) +const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) +const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) +const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller')) + sessionStorage.setItem('isEditState', 'true') -class MenuDesign extends Component { - static propTpyes = { - btn: PropTypes.object, - handleBack: PropTypes.func - } +document.body.className = '' +class PopViewDesign extends Component { state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + btn: null, MenuId: '', delButtons: [], activeKey: 'basedata', @@ -53,13 +53,29 @@ } UNSAFE_componentWillMount() { - const { btn } = this.props + sessionStorage.setItem('editMenuType', 'popview') - this.setState({ - MenuId: btn.uuid, - }, () => { - this.getMenuParam() - }) + window.GLOB.UserComponentMap = new Map() // 缂撳瓨鐢ㄦ埛鑷畾涔夌粍浠� + window.GLOB.TabsMap = new Map() // 缂撳瓨鐢ㄦ埛鎿嶄綔鐨勬爣绛鹃〉 + window.GLOB.urlFields = [] // url鍙橀噺 + window.GLOB.customMenu = null // 淇濆瓨鑿滃崟淇℃伅 + + try { + let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param))) + + this.setState({ + btn: param, + MenuId: param.uuid, + }, () => { + this.getMenuParam() + }) + } catch (e) { + notification.warning({ + top: 92, + message: '鑿滃崟淇℃伅瑙f瀽閿欒锛�', + duration: 5 + }) + } } componentDidMount () { @@ -67,7 +83,57 @@ MKEmitter.addListener('triggerMenuSave', this.submitConfig) MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) - this.updateCustomComponent() + setTimeout(() => { + if (sessionStorage.getItem('app_custom_components')) { + let list = sessionStorage.getItem('app_custom_components') + list = JSON.parse(list) + + this.setCustomComponent(list) + } else { + this.updateCustomComponent() + } + setGLOBFuncs() + }, 1000) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + if (this.state.modalStatus) { + notification.warning({ + top: 92, + message: '璇蜂繚瀛�' + this.state.modalStatus, + duration: 5 + }) + return false + } + + let node = document.getElementById('save-modal-config') + if (!node) { + node = document.getElementById('save-pop-config') + } + + if (node) { + node.click() + } + return false + } + } } shouldComponentUpdate (nextProps, nextState) { @@ -93,34 +159,46 @@ typename: sessionStorage.getItem('appType'), typecharone: '' }).then(res => { - let coms = [] - if (res.cus_list && res.cus_list.length > 0) { - res.cus_list.forEach(item => { - let config = '' - - try { - config = JSON.parse(window.decodeURIComponent(window.atob(item.long_param))) - } catch (e) { - console.warn('Parse Failure') - config = '' - } - - if (!config || !item.c_name) return - - window.GLOB.UserComponentMap.set(item.c_id, item.c_name) - coms.push({ - uuid: item.c_id, - type: 'menu', - title: item.c_name, - url: item.images, - component: config.type, - subtype: config.subtype, - config - }) + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 }) + } else if (res.cus_list) { + sessionStorage.setItem('app_custom_components', JSON.stringify(res.cus_list)) + this.setCustomComponent(res.cus_list) } - this.setState({customComponents: coms}) }) + } + + setCustomComponent = (cus_list) => { + let coms = [] + + cus_list.forEach(item => { + let config = '' + + try { + config = JSON.parse(window.decodeURIComponent(window.atob(item.long_param))) + } catch (e) { + console.warn('Parse Failure') + config = '' + } + + if (!config || !item.c_name) return + + window.GLOB.UserComponentMap.set(item.c_id, item.c_name) + coms.push({ + uuid: item.c_id, + type: 'menu', + title: item.c_name, + url: item.images, + component: config.type, + subtype: config.subtype, + config + }) + }) + this.setState({customComponents: coms}) } updateComponentStyle = (parentId, keys, style) => { @@ -153,29 +231,26 @@ const { oriConfig, config } = this.state if (!config) { - this.props.handleBack() + window.history.back() return } - - const _this = this if (!is(fromJS(oriConfig), fromJS(config))) { confirm({ title: '閰嶇疆宸蹭慨鏀癸紝鏀惧純淇濆瓨鍚楋紵', content: '', onOk() { - _this.props.handleBack() + window.history.back() }, onCancel() {} }) } else { - this.props.handleBack() + window.history.back() } } getMenuParam = () => { - const { btn } = this.props - const { MenuId } = this.state + const { MenuId, btn } = this.state let param = { func: 'sPC_Get_LongParam', @@ -205,7 +280,7 @@ MenuID: MenuId, Template: 'CustomPage', enabled: false, - MenuName: btn.config.MenuName + '-' + btn.label, + MenuName: btn.MenuName, MenuNo: '', tables: [], components: [], @@ -258,7 +333,6 @@ delButtons.push(btn.uuid) return } - this.checkBtn(btn) buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -269,7 +343,6 @@ delButtons.push(cell.uuid) return } - this.checkBtn(cell) buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -279,7 +352,6 @@ delButtons.push(cell.uuid) return } - this.checkBtn(cell) buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -292,7 +364,6 @@ delButtons.push(cell.uuid) return } - this.checkBtn(cell) buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -304,7 +375,6 @@ delButtons.push(cell.uuid) return } - this.checkBtn(cell) buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -314,7 +384,6 @@ delButtons.push(btn.uuid) return } - this.checkBtn(btn) buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -324,7 +393,6 @@ delButtons.push(btn.uuid) return } - this.checkBtn(btn) buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -335,7 +403,6 @@ delButtons.push(btn.uuid) return } - this.checkBtn(btn) buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`) _sort++ }) @@ -347,26 +414,6 @@ traversal(config.components) return buttons - } - - checkBtn = (btn) => { - if (['prompt', 'exec', 'pop'].includes(btn.OpenType) && btn.Ot === 'required' && btn.verify && btn.verify.scripts && btn.verify.scripts.length > 0) { - let hascheck = false - btn.verify.scripts.forEach(item => { - if (item.status === 'false') return - - if (/\$check@|@check\$/ig.test(item.sql)) { - hascheck = true - } - }) - if (hascheck) { - notification.warning({ - top: 92, - message: `鍙�夋嫨澶氳鐨勬寜閽��${btn.label}銆嬩腑 $check@ 鎴� @check$ 灏嗕笉浼氱敓鏁堬紒`, - duration: 5 - }) - } - } } filterConfig = (components) => { @@ -387,7 +434,7 @@ } submitConfig = () => { - const { btn } = this.props + const { btn } = this.state let config = fromJS(this.state.config).toJS() if ((config.cacheUseful === 'true' && !config.cacheTime) || !config.MenuNo || !config.MenuName) { @@ -410,15 +457,13 @@ config.enabled = false } - let _name = (btn.component.name ? btn.component.name + '-' : '') + btn.label - let param = { func: 'sPC_ButtonParam_AddUpt', - ParentID: btn.config.uuid, + ParentID: btn.ParentMenuID, MenuID: config.uuid, MenuNo: config.MenuNo || '', Template: 'CustomPage', - MenuName: _name, + MenuName: config.MenuName, PageParam: JSON.stringify({Template: 'CustomPage'}), LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(config))), open_edition: config.open_edition @@ -560,32 +605,14 @@ } else if (item.type === 'group') { check(item.components) return + } else if (!item.errors || item.errors.length === 0) { + return } - if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return - if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return - - if (item.setting) { - if (item.setting.interType === 'system' && item.setting.execute !== 'false' && !item.setting.dataresource) { - error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆鏁版嵁婧愶紒` - } else if (item.setting.interType === 'system' && item.setting.execute === 'false' && item.scripts.length === 0) { - error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆鏁版嵁婧愶紒` - } else if (!item.setting.primaryKey) { - error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婚敭锛乣 - } else if (!item.setting.supModule && item.type !== 'balcony') { - error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婄骇缁勪欢锛乣 - } - } - if (item.type === 'bar' || item.type === 'line' || item.type === 'pie') { - if (!item.plot.Xaxis) { - error = `缁勪欢銆�${item.name}銆嬪浘琛ㄥ瓧娈靛皻鏈缃紒` - } - } else if (item.type === 'dashboard' && !item.plot.valueField) { - error = `缁勪欢銆�${item.name}銆嬫樉绀哄�煎皻鏈缃紒` - } else if (item.type === 'scatter' && (!item.plot.Xaxis || !item.plot.Yaxis || !item.plot.gender)) { - error = `缁勪欢銆�${item.name}銆嬪潗鏍囪酱灏氭湭璁剧疆锛乣 - } else if (item.type === 'tree' && (!item.wrap.valueField || !item.wrap.labelField || !item.wrap.parentField)) { - error = `缁勪欢銆�${item.name}銆嬪熀鏈俊鎭皻鏈缃紒` - } + + item.errors.forEach(err => { + if (err.level !== 0 || error) return + error = `缁勪欢銆�${item.name}銆�${err.detail}` + }) }) } @@ -661,61 +688,62 @@ } render () { - const { btn } = this.props - const { activeKey, comloading, dict, config, menuloading, customComponents, MenuId, eyeopen } = this.state + const { activeKey, comloading, config, menuloading, customComponents, MenuId, 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={dict['mob.basemsg']} key="basedata"> - {/* 鑿滃崟淇℃伅 */} - {config ? <MenuForm dict={dict} config={config} btn={btn} updateConfig={this.updateConfig}/> : null} - {/* 琛ㄥ悕娣诲姞 */} - {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} - </Panel> - {/* 缁勪欢娣诲姞 */} - <Panel header={dict['mob.component']} key="component"> - <SourceWrap MenuType="" /> - </Panel> - {customComponents && customComponents.length ? <Panel header="鑷畾涔夌粍浠�" key="cuscomponent"> - <SourceWrap components={customComponents} MenuType="" /> - </Panel> : null} - <Panel header={'椤甸潰鑳屾櫙'} key="background"> - {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} - </Panel> - <Panel header={'椤甸潰鍐呰竟璺�'} key="padding"> - {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null} - </Panel> - </Collapse> + <ConfigProvider locale={_locale}> + <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"> + {/* 鑿滃崟淇℃伅 */} + {config ? <MenuForm config={config} updateConfig={this.updateConfig}/> : null} + {/* 琛ㄥ悕娣诲姞 */} + {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} + </Panel> + {/* 缁勪欢娣诲姞 */} + <Panel header="缁勪欢" key="component"> + <SourceWrap MenuType="" /> + </Panel> + {customComponents && customComponents.length ? <Panel header="鑷畾涔夌粍浠�" key="cuscomponent"> + <SourceWrap components={customComponents} MenuType="" /> + </Panel> : null} + <Panel header="椤甸潰鏍峰紡" key="background"> + {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} + </Panel> + </Collapse> + </div> + <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}> + <Card title={ + <div> {config && config.MenuName} </div> + } bordered={false} extra={ + <div> + <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 缁勪欢鍚�</Button> + <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''} updateConfig={this.refreshConfig}/> + <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> + <StyleCombControlButton menu={config} /> + <PasteController insert={this.insert} /> + {config ? <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" checked={config.enabled} onChange={this.onEnabledChange} /> : null} + <Button type="primary" id="save-pop-config" onClick={this.submitConfig} loading={menuloading}>淇濆瓨</Button> + <Button type="default" onClick={this.closeView}>杩斿洖</Button> + </div> + } style={{ width: '100%' }}> + {config && !comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} + </Card> + </div> </div> - <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}> - <Card title={ - <div> {config && config.MenuName} </div> - } bordered={false} extra={ - <div> - <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 缁勪欢鍚�</Button> - <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''} updateConfig={this.refreshConfig}/> - <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> - <StyleCombControlButton menu={config} /> - <PasteController insert={this.insert} /> - {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} - <Button type="primary" id="save-pop-config" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> - <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> - </div> - } style={{ width: '100%' }}> - {config && !comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} - </Card> - </div> - </div> - </DndProvider> - </div> + </DndProvider> + <StyleController /> + <StyleCombController /> + <ModalController /> + </div> + </ConfigProvider> ) } } -export default MenuDesign \ No newline at end of file +export default PopViewDesign \ No newline at end of file -- Gitblit v1.8.0