| | |
| | | import { withRouter } from 'react-router' |
| | | import { is, fromJS } from 'immutable' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd' |
| | | import { notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd' |
| | | import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, ArrowLeftOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | import md5 from 'md5' |
| | | |
| | | import Api from '@/api' |
| | | import Utils, { setGLOBFuncs } from '@/utils/utils.js' |
| | | import antdZhCN from 'antd/es/locale/zh_CN' |
| | | import Utils from '@/utils/utils.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MenuUtils, { getTables, getFuncsAndInters } from '@/utils/utils-custom.js' |
| | | import MenuUtils, { getTables, getFuncsAndInters, getLangTrans } from '@/utils/utils-custom.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | |
| | | import '@/assets/css/design.scss' |
| | |
| | | viewType: 'menu', |
| | | view: '', |
| | | eyeopen: false, |
| | | needUpdate: false |
| | | needUpdate: false, |
| | | appLoginId: '', |
| | | appHomeId: '' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | |
| | | |
| | | try { |
| | | let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param))) |
| | | |
| | | if (param.lang) { |
| | | sessionStorage.setItem('lang', param.lang) |
| | | } |
| | | |
| | | if (param.type === 'app') { |
| | | sessionStorage.setItem('appId', param.ID || '') |
| | | sessionStorage.setItem('appName', param.remark || '') |
| | | sessionStorage.setItem('lang', param.lang || 'zh-CN') |
| | | sessionStorage.setItem('kei_no', param.kei_no || '') |
| | | sessionStorage.setItem('typename', param.typename || 'mob') |
| | | sessionStorage.setItem('adapter', param.adapter || '') |
| | |
| | | sessionStorage.setItem('direction', param.direction || 'vertical') |
| | | sessionStorage.setItem('userbind', param.userbind || '') |
| | | sessionStorage.setItem('instantMessage', param.instantMessage || '') |
| | | |
| | | if (param.applangList) { |
| | | sessionStorage.setItem('applangList', param.applangList) |
| | | } else { |
| | | sessionStorage.removeItem('applangList') |
| | | } |
| | | |
| | | if (param.wxAppId) { |
| | | sessionStorage.setItem('wxAppId', param.wxAppId) |
| | | } |
| | | |
| | | this.getAppMessage(param.MenuID) |
| | | } else if (param.type === 'view') { |
| | |
| | | adapters = [] |
| | | } |
| | | |
| | | let appLoginId = '' |
| | | let appHomeId = '' |
| | | if (sessionStorage.getItem('appViewList')) { |
| | | try { |
| | | let appMenus = JSON.parse(sessionStorage.getItem('appViewList')) |
| | | appMenus.forEach(item => { |
| | | if (item.keys_type === 'login') { |
| | | appLoginId = item.keys_id |
| | | } else if (item.keys_type === 'index') { |
| | | appHomeId = item.keys_id |
| | | } |
| | | }) |
| | | } catch (e) { |
| | | |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | adapters, |
| | | MenuId: param.MenuID, |
| | | viewType: /^userbind/.test(param.MenuID) ? 'userbind' : 'menu' |
| | | viewType: /^userbind/.test(param.MenuID) ? 'userbind' : 'menu', |
| | | appLoginId: appLoginId, |
| | | appHomeId: appHomeId |
| | | }, () => { |
| | | this.getMenuParam(param) |
| | | }) |
| | |
| | | MKEmitter.addListener('changePopview', this.initPopview) |
| | | MKEmitter.addListener('triggerMenuSave', this.submitConfig) |
| | | MKEmitter.addListener('changeEditMenu', this.changeEditMenu) |
| | | |
| | | if (sessionStorage.getItem('wxAppId')) { |
| | | window.GLOB.WXAppID = sessionStorage.getItem('wxAppId') |
| | | } |
| | | |
| | | setTimeout(() => { |
| | | this.getRoleFields() |
| | | setGLOBFuncs() |
| | | // setGLOBFuncs() |
| | | }, 1000) |
| | | |
| | | document.onkeydown = (event) => { |
| | |
| | | MenuID: menu.MenuID, |
| | | copyMenuId: menu.copyMenuId || '', |
| | | clearMenu: menu.clearMenu !== 'false', |
| | | type: 'view' |
| | | type: 'view', |
| | | lang: sessionStorage.getItem('lang') |
| | | } |
| | | |
| | | param.MenuNo = menu.MenuNo || '' |
| | |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) |
| | | this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: homeId, type: 'view'})))) |
| | | this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: homeId, type: 'view', lang: sessionStorage.getItem('lang')})))) |
| | | } |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) |
| | | this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID || homeId, type: 'view'})))) |
| | | this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID || homeId, type: 'view', lang: sessionStorage.getItem('lang')})))) |
| | | } |
| | | }) |
| | | } |
| | |
| | | |
| | | let traversal = (components) => { |
| | | return components.map(item => { |
| | | item.miniStyle = '' |
| | | if (item.style) { |
| | | item.miniStyle = this.transferStyle(item.style) |
| | | } |
| | |
| | | } |
| | | |
| | | if (item.type === 'tabs') { |
| | | if (item.setting.backgroundColor) { |
| | | item.miniStyle += `--tabs-header-background: ${item.setting.backgroundColor};` |
| | | } |
| | | item.subtabs.forEach(tab => { |
| | | tab.components = traversal(tab.components) |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | item.components = traversal(item.components) |
| | | } else if (['card', 'carousel', 'timeline'].includes(item.type)) { |
| | | if (item.wrap.display === 'hidden') { |
| | | item.miniStyle += 'display:none;' |
| | | } |
| | | item.subcards.forEach(card => { |
| | | card.miniStyle = this.transferStyle(card.style) |
| | | card.elements = card.elements.map(cell => { |
| | |
| | | activeKey: 'basedata' |
| | | }) |
| | | return |
| | | } else if (this.checklog()) { |
| | | if ((sessionStorage.getItem('applangList') && !config.trans) || (adapters.includes('wxmini') && !config.hasOwnProperty('miniStyle'))) { |
| | | |
| | | } else { |
| | | notification.success({ |
| | | top: 92, |
| | | message: '当前配置未修改,无需保存。', |
| | | duration: 5 |
| | | }) |
| | | MKEmitter.emit('completeSave') |
| | | return |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | |
| | | typename: sessionStorage.getItem('typename') || '', |
| | | adapter: sessionStorage.getItem('adapter') || '', |
| | | sysBgColor: sessionStorage.getItem('sysBgColor') || '', |
| | | MenuName: config.MenuName || '', |
| | | MenuName: config.MenuName || '' |
| | | } |
| | | |
| | | url = window.btoa(window.encodeURIComponent(JSON.stringify(urlparam))) |
| | |
| | | roleParam.pass = true |
| | | } |
| | | |
| | | delete config.miniTitle |
| | | delete config.miniReloadUp |
| | | |
| | | config.components.forEach(item => { |
| | | if (item.type === 'login') { |
| | | roleParam.login = true |
| | |
| | | config.loginview = true |
| | | } else if (item.type === 'navbar') { |
| | | config.tabview = true |
| | | } else if (item.type === 'topbar' && adapters.includes('wxmini')) { |
| | | if (item.wrap.minishow !== 'true') { |
| | | config.miniTitle = item.wrap.title || '' |
| | | } |
| | | if (item.wrap.reload === 'true') { |
| | | config.miniReloadUp = true |
| | | } |
| | | } |
| | | }) |
| | | |
| | |
| | | |
| | | let interfaces = getFuncsAndInters(config) |
| | | roleParam.interfaces = interfaces |
| | | let langSql = getLangTrans(config) |
| | | |
| | | let param = { |
| | | func: 'sPC_TrdMenu_AddUpt', |
| | |
| | | PageParam: JSON.stringify({Template: 'webPage', interfaces}), |
| | | open_edition: config.open_edition, |
| | | menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify(roleParam))), |
| | | LText: '', |
| | | LTexttb: '', |
| | | // LText: '', |
| | | // LTexttb: '', |
| | | menus_used_list, |
| | | debug_md5: key, |
| | | debug_url: url, |
| | | debug_list: window.btoa(tbs) |
| | | } |
| | | |
| | | if (langSql) { |
| | | param.lang_translation = window.btoa(window.encodeURIComponent(langSql)) |
| | | } |
| | | |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | |
| | | PageParam: JSON.stringify({Template: NavBar.type}), |
| | | open_edition: _item ? (_item.open_edition || '') : '', |
| | | menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify(roles))), |
| | | LText: '', |
| | | LTexttb: '' |
| | | // LText: '', |
| | | // LTexttb: '' |
| | | } |
| | | |
| | | _param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(NavBar))) |
| | |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | param.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | const that = this |
| | | |
| | | confirm({ |
| | | title: '确定设置本页面为首页吗?', |
| | | content: '', |
| | |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) |
| | | |
| | | that.setState({ |
| | | appHomeId: config.MenuID |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | param.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | let hasLogin = config.components.findIndex(item => item.type === 'login') > -1 |
| | | const that = this |
| | | |
| | | confirm({ |
| | | title: '确定设置本页面为登录页吗?', |
| | |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) |
| | | |
| | | that.setState({ |
| | | appLoginId: config.MenuID |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | |
| | | |
| | | render () { |
| | | const { view, viewType, comloading, loading, settingshow, controlshow, activeKey, MenuId, config, menuloading, adapters, eyeopen, needUpdate } = this.state |
| | | const { view, viewType, comloading, loading, settingshow, controlshow, activeKey, MenuId, config, menuloading, adapters, eyeopen, needUpdate, appLoginId, appHomeId } = this.state |
| | | |
| | | return ( |
| | | <ConfigProvider locale={antdZhCN}> |
| | | <div className={'mk-mob-view ' + viewType} id="mk-mob-design-view"> |
| | | <Header/> |
| | | {loading ? <Spin className="view-spin" size="large" /> : null} |
| | | <DndProvider backend={HTML5Backend}> |
| | | {view !== 'popview' ? <><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 activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header="基本信息" forceRender className="basedata" key="basedata"> |
| | | {config ? <> |
| | | <MenuForm |
| | | config={config} |
| | | MenuId={MenuId} |
| | | adapters={adapters} |
| | | updateConfig={(con) => { |
| | | this.updateConfig(con) |
| | | if (con.direction !== config.direction) { |
| | | this.changeView(con.direction) |
| | | } |
| | | }} |
| | | /> |
| | | <UrlFieldComponent config={config} updateConfig={this.updateConfig}/> |
| | | {/* 表名添加 */} |
| | | <TableComponent config={config} updatetable={this.updateConfig}/> |
| | | <Paragraph style={{padding: '15px 0px 0px 18px'}} copyable={{ text: MenuId }}>菜单ID</Paragraph> |
| | | <Paragraph style={{padding: '10px 0px 0px 18px'}} copyable={{ text: `${window.GLOB.baseurl}mob/index.html#/index/${sessionStorage.getItem('kei_no')}/${sessionStorage.getItem('typename')}/${sessionStorage.getItem('lang')}/${MenuId}/@BID@` }}>菜单链接</Paragraph> |
| | | <NormalCss config={config} updateConfig={this.updateConfig}/> |
| | | </> : null} |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header="组件" className="component" key="component"> |
| | | <SourceWrap /> |
| | | </Panel> |
| | | <Panel header="元素" key="element"> |
| | | <Modulecell /> |
| | | </Panel> |
| | | <Panel header="页面样式" key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | <div className={'mk-mob-view ' + viewType} id="mk-mob-design-view"> |
| | | <Header/> |
| | | {loading ? <Spin className="view-spin" size="large" /> : null} |
| | | <DndProvider backend={HTML5Backend}> |
| | | {view !== 'popview' ? <><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={'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" className={needUpdate ? 'update-tip' : ''} onClick={this.submitConfig} id="save-config" loading={menuloading}>保存</Button> |
| | | {config ? <Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config.enabled} onChange={this.onEnabledChange} /> : null} |
| | | <ArrowLeftOutlined title="后退" className="back-view" onClick={this.backView}/> |
| | | {config ? <Debug config={config}/> : null} |
| | | <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button> |
| | | <CreateView resetmenu={this.getAppMenus} /> |
| | | <PasteController insert={this.insert} /> |
| | | <TableNodes config={config} /> |
| | | <ViewNodes config={config} MenuId={MenuId}/> |
| | | <SysInterface config={config} updateConfig={this.updateConfig}/> |
| | | <PictureController/> |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-green set-home" onClick={this.setHomeView}><HomeOutlined /> 设为首页</Button> |
| | | <Button className="mk-border-purple set-login" onClick={this.setLoginView}><LoginOutlined /> 设为登录页</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <Transfer MenuID={MenuId} /> |
| | | {config ? <Versions MenuId={MenuId} Template="webPage" checklog={this.checklog} updateConfig={this.updateLogConfig}/> : null} |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | <div className="pc-setting-tools"> |
| | | <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header="基本信息" forceRender className="basedata" key="basedata"> |
| | | {config ? <> |
| | | <MenuForm |
| | | config={config} |
| | | MenuId={MenuId} |
| | | adapters={adapters} |
| | | updateConfig={(con) => { |
| | | this.updateConfig(con) |
| | | if (con.direction !== config.direction) { |
| | | this.changeView(con.direction) |
| | | } |
| | | }} |
| | | /> |
| | | <UrlFieldComponent config={config} updateConfig={this.updateConfig}/> |
| | | {/* 表名添加 */} |
| | | <TableComponent config={config} updatetable={this.updateConfig}/> |
| | | <Paragraph style={{padding: '15px 0px 0px 18px'}} copyable={{ text: MenuId }}>菜单ID</Paragraph> |
| | | <Paragraph style={{padding: '10px 0px 0px 18px'}} copyable={{ text: `${window.GLOB.baseurl}mob/index.html#/index/${sessionStorage.getItem('kei_no')}/${sessionStorage.getItem('typename')}/${sessionStorage.getItem('lang')}/${MenuId}/@BID@` }}>菜单链接</Paragraph> |
| | | <NormalCss config={config} updateConfig={this.updateConfig}/> |
| | | </> : null} |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header="组件" className="component" key="component"> |
| | | <SourceWrap /> |
| | | </Panel> |
| | | <Panel header="元素" key="element"> |
| | | <Modulecell /> |
| | | </Panel> |
| | | <Panel header="页面样式" key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </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></> : <PopView btn={this.state.popConfig} save={this.submitPopConfig} cancel={this.closePop}/>} |
| | | </DndProvider> |
| | | <StyleController /> |
| | | <StyleCombController /> |
| | | <ModalController /> |
| | | <SearchController /> |
| | | </div> |
| | | </ConfigProvider> |
| | | </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" className={needUpdate ? 'update-tip' : ''} onClick={this.submitConfig} id="save-config" loading={menuloading}>保存</Button> |
| | | {config ? <Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config.enabled} onChange={this.onEnabledChange} /> : null} |
| | | <ArrowLeftOutlined title="后退" className="back-view" onClick={this.backView}/> |
| | | {config ? <Debug config={config}/> : null} |
| | | <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button> |
| | | <CreateView resetmenu={this.getAppMenus} /> |
| | | <PasteController insert={this.insert} /> |
| | | <TableNodes config={config} /> |
| | | <ViewNodes config={config} MenuId={MenuId}/> |
| | | <SysInterface config={config} updateConfig={this.updateConfig}/> |
| | | <PictureController/> |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-green set-home" disabled={MenuId === appHomeId} onClick={this.setHomeView}><HomeOutlined /> 设为首页</Button> |
| | | <Button className="mk-border-purple" disabled={MenuId === appLoginId} onClick={this.setLoginView}><LoginOutlined /> 设为登录页</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <Transfer MenuID={MenuId} /> |
| | | {config ? <Versions MenuId={MenuId} Template="webPage" checklog={this.checklog} updateConfig={this.updateLogConfig}/> : null} |
| | | <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></> : <PopView btn={this.state.popConfig} save={this.submitPopConfig} cancel={this.closePop}/>} |
| | | </DndProvider> |
| | | <StyleController /> |
| | | <StyleCombController /> |
| | | <ModalController /> |
| | | <SearchController /> |
| | | </div> |
| | | ) |
| | | } |
| | | } |