| | |
| | | import React, { Component } from 'react' |
| | | import { DndProvider } from 'react-dnd' |
| | | import { withRouter } from 'react-router' |
| | | import { is, fromJS } from 'immutable' |
| | | import moment from 'moment' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import { ConfigProvider, notification, Modal, Collapse, Button, Spin } from 'antd' |
| | | import { DoubleLeftOutlined, DoubleRightOutlined, LeftOutlined, UserOutlined, EllipsisOutlined } from '@ant-design/icons' |
| | | |
| | |
| | | direction: 'vertical', |
| | | settingshow: true, |
| | | controlshow: true, |
| | | adapters: [], |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | |
| | | window.GLOB.shellHeight = 853 |
| | | } |
| | | |
| | | let adapters = sessionStorage.getItem('adapter') |
| | | if (adapters) { |
| | | adapters = adapters.split(',') |
| | | } else { |
| | | adapters = [] |
| | | } |
| | | |
| | | this.setState({ |
| | | adapters, |
| | | MenuId: param.MenuID, |
| | | }, () => { |
| | | this.getMenuParam() |
| | |
| | | message: '菜单信息解析错误!', |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (this.props.match.params.param !== nextProps.match.params.param) { |
| | | window.location.reload() |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) |
| | | this.props.history.replace('/imdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID, type: 'view'})))) |
| | | window.location.reload() |
| | | }) |
| | | } |
| | | |
| | |
| | | }) |
| | | this.setState({loading: false}) |
| | | return |
| | | } else { |
| | | let config = null |
| | | let isCreate = false |
| | | } |
| | | |
| | | try { |
| | | config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = null |
| | | } |
| | | let config = null |
| | | let isCreate = false |
| | | |
| | | if (!config) { |
| | | isCreate = true |
| | | config = { |
| | | version: 1.0, |
| | | uuid: MenuId, |
| | | MenuID: MenuId, |
| | | Template: 'imPage', |
| | | enabled: false, |
| | | MenuName: '即时通信', |
| | | MenuNo: 'im', |
| | | tables: [], |
| | | components: [], |
| | | viewType: 'im', |
| | | wrap: {}, |
| | | style: { |
| | | backgroundColor: '#ededed', backgroundImage: '' |
| | | } |
| | | try { |
| | | config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = null |
| | | } |
| | | |
| | | if (!config) { |
| | | isCreate = true |
| | | config = { |
| | | version: 1.0, |
| | | // uuid: MenuId, |
| | | // MenuID: MenuId, |
| | | Template: 'imPage', |
| | | enabled: false, |
| | | MenuName: '即时通信', |
| | | MenuNo: 'im', |
| | | tables: [], |
| | | components: [], |
| | | viewType: 'im', |
| | | wrap: {}, |
| | | style: { |
| | | backgroundColor: '#ededed', backgroundImage: '' |
| | | } |
| | | } |
| | | |
| | | config.uuid = MenuId |
| | | config.MenuID = MenuId |
| | | config.open_edition = result.open_edition || '' |
| | | |
| | | this.setState({ |
| | | oriConfig: isCreate ? null : config, |
| | | config: fromJS(config).toJS(), |
| | | loading: false |
| | | }) |
| | | } |
| | | |
| | | config.uuid = MenuId |
| | | config.MenuID = MenuId |
| | | config.open_edition = result.open_edition || '' |
| | | |
| | | this.setState({ |
| | | oriConfig: isCreate ? null : config, |
| | | config: fromJS(config).toJS(), |
| | | loading: false |
| | | }) |
| | | }) |
| | | this.getAppMenus() |
| | | } |
| | |
| | | } |
| | | |
| | | submitConfig = () => { |
| | | const { adapters } = this.state |
| | | let config = fromJS(this.state.config).toJS() |
| | | |
| | | if (!config.MenuName || !config.MenuNo) { |
| | |
| | | }) |
| | | |
| | | setTimeout(() => { |
| | | let roleParam = {type: 'im', key: config.uuid, title: config.MenuName, children: []} |
| | | |
| | | if (adapters.includes('wxmini')) { |
| | | config = this.getMiniStyle(config) |
| | | } |
| | | |
| | | let param = { |
| | | func: 'sPC_TrdMenu_AddUpt', |
| | | FstID: 'mk_app', |
| | |
| | | MenuName: config.MenuName || '', |
| | | PageParam: JSON.stringify({Template: 'imPage'}), |
| | | open_edition: config.open_edition, |
| | | menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify(roleParam))), |
| | | menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify({type: 'im', key: config.uuid, title: config.MenuName, children: []}))), |
| | | LText: '', |
| | | LTexttb: '' |
| | | } |
| | | |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | param.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | let _config = fromJS(config).toJS() |
| | | |
| | | param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config))) |
| | | param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config))) |
| | | |
| | | Api.getSystemConfig(param).then(res => { |
| | | if (!res.status) { |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { localedict, loading, settingshow, controlshow, dict, MenuId, config, menuloading, adapters } = this.state |
| | | const { localedict, loading, settingshow, controlshow, dict, MenuId, config, menuloading } = this.state |
| | | |
| | | return ( |
| | | <ConfigProvider locale={localedict}> |
| | | <div className="mk-mob-view" id="mk-mob-design-view"> |
| | | <Header/> |
| | | {loading ? <Spin className="view-spin" size="large" /> : null} |
| | | <DndProvider backend={HTML5Backend}> |
| | | <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="basedata" bordered={false}> |
| | | {/* 基本信息 */} |
| | | <Panel header={dict['mob.basemsg']} forceRender key="basedata"> |
| | | {/* 菜单信息 */} |
| | | {config ? <MenuForm |
| | | dict={dict} |
| | | config={config} |
| | | MenuId={MenuId} |
| | | adapters={adapters} |
| | | updateConfig={this.updateConfig} |
| | | /> : null} |
| | | </Panel> |
| | | <Panel header={'页面样式'} key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | <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" onClick={this.submitConfig} id="save-config" loading={menuloading}>{dict['mob.save']}</Button> |
| | | <NormalForm title="即时通信设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <Button type="default" style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>设置</Button> |
| | | </NormalForm> |
| | | <Button type="default" className="mk-border-purple" onClick={this.backView}>后退</Button> |
| | | <CreateView resetmenu={this.getAppMenus} /> |
| | | <Transfer MenuID={MenuId} /> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | <div className="pc-setting-tools"> |
| | | <Collapse accordion defaultActiveKey="basedata" bordered={false}> |
| | | {/* 基本信息 */} |
| | | <Panel header={dict['mob.basemsg']} forceRender key="basedata"> |
| | | {/* 菜单信息 */} |
| | | {config ? <MenuForm |
| | | dict={dict} |
| | | config={config} |
| | | MenuId={MenuId} |
| | | updateConfig={this.updateConfig} |
| | | /> : null} |
| | | </Panel> |
| | | <Panel header={'页面样式'} key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | <div className={'menu-body menu-view'}> |
| | | <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> |
| | | <div className="instant-message" style={config ? config.style : null}> |
| | | <div className="header"> |
| | | <LeftOutlined/> |
| | | <span className="title">friend</span> |
| | | {config && config.wrap.linkmenu ? <EllipsisOutlined onClick={this.changeEditMenu}/> : null} |
| | | </div> |
| | | <div className="mk-content-wrap"> |
| | | <div className="line-wrap"> |
| | | <div className="time-line">12:34</div> |
| | | <div className="line-msg"> |
| | | <div className="portrait"> |
| | | <div className="img"><UserOutlined /></div> |
| | | </div> |
| | | <div className="msg"> |
| | | <div className="title">friend</div> |
| | | <div className="words">您好</div> |
| | | </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}>{dict['mob.save']}</Button> |
| | | <NormalForm title="即时通信设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <Button type="default" style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>设置</Button> |
| | | </NormalForm> |
| | | <Button type="default" className="mk-border-purple" onClick={this.backView}>后退</Button> |
| | | <CreateView resetmenu={this.getAppMenus} /> |
| | | <Transfer MenuID={MenuId} /> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | </div> |
| | | <div className={'menu-body menu-view'}> |
| | | <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> |
| | | <div className="instant-message" style={config ? config.style : null}> |
| | | <div className="header"> |
| | | <LeftOutlined/> |
| | | <span className="title">朋友</span> |
| | | {config && config.wrap.linkmenu ? <EllipsisOutlined onDoubleClick={this.changeEditMenu}/> : null} |
| | | </div> |
| | | <div className="mk-content-wrap"> |
| | | <div className="line-wrap"> |
| | | <div className="time-line">12:34</div> |
| | | <div className="line-msg"> |
| | | <div className="portrait"> |
| | | <div className="img"><UserOutlined /></div> |
| | | </div> |
| | | </div> |
| | | <div className="line-wrap"> |
| | | <div className="time-line">12:45</div> |
| | | <div className="line-msg right"> |
| | | <div className="msg"> |
| | | <div className="words"> |
| | | 您好 |
| | | </div> |
| | | </div> |
| | | <div className="portrait"> |
| | | <div className="img"><UserOutlined /></div> |
| | | </div> |
| | | <div className="msg"> |
| | | <div className="title">朋友</div> |
| | | <div className="words">您好</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className="send-wrap"> |
| | | <div className="adm-input"></div> |
| | | <div className="send"><Button>发送</Button></div> |
| | | <div className="line-wrap"> |
| | | <div className="time-line">12:45</div> |
| | | <div className="line-msg right"> |
| | | <div className="msg"> |
| | | <div className="words"> |
| | | 您好 |
| | | </div> |
| | | </div> |
| | | <div className="portrait"> |
| | | <div className="img"><UserOutlined /></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div className="send-wrap"> |
| | | <div className="adm-input"></div> |
| | | <div className="send"><Button>发送</Button></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </DndProvider> |
| | | </div> |
| | | <StyleController /> |
| | | </div> |
| | | </ConfigProvider> |