import React, { Component } from 'react'
|
import { withRouter } from 'react-router'
|
import { is, fromJS } from 'immutable'
|
import moment from 'moment'
|
import { notification, Modal, Collapse, Button, Spin } from 'antd'
|
import { DoubleLeftOutlined, DoubleRightOutlined, LeftOutlined, UserOutlined, EllipsisOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
// import MKEmitter from '@/utils/events.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import getWrapForm from './options'
|
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
|
const Header = asyncComponent(() => import('@/mob/header'))
|
const MenuForm = asyncComponent(() => import('./menuform'))
|
const CreateView = asyncComponent(() => import('@/pc/createview'))
|
const Transfer = asyncComponent(() => import('@/pc/transfer'))
|
const BgController = asyncComponent(() => import('@/pc/bgcontroller'))
|
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
|
const NormalForm = asyncComponent(() => import('@/components/normalform'))
|
|
sessionStorage.setItem('appType', 'mob') // 应用类型
|
document.body.className = ''
|
window.GLOB.CacheIndependent = new Map()
|
|
class ImDesign extends Component {
|
state = {
|
loading: true,
|
MenuId: '',
|
MenuName: '',
|
MenuNo: '',
|
menuloading: false,
|
oriConfig: null,
|
config: null,
|
direction: 'vertical',
|
settingshow: true,
|
controlshow: true,
|
}
|
|
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('kei_no', param.kei_no || '')
|
sessionStorage.setItem('typename', param.typename || 'mob')
|
sessionStorage.setItem('adapter', param.adapter || '')
|
sessionStorage.setItem('sysBgColor', param.sysBgColor || '#ffffff')
|
sessionStorage.setItem('userbind', param.userbind || '')
|
sessionStorage.setItem('instantMessage', param.instantMessage || '')
|
|
this.getAppMessage(param.MenuID)
|
} else if (param.type === 'view') {
|
window.GLOB.winWidth = 420
|
window.GLOB.winHeight = 738
|
window.GLOB.shellWidth = 376
|
window.GLOB.shellHeight = 680
|
|
if (sessionStorage.getItem('typename') === 'pad') {
|
window.GLOB.winWidth = 736
|
window.GLOB.winHeight = 945
|
window.GLOB.shellWidth = 640
|
window.GLOB.shellHeight = 853
|
}
|
|
this.setState({
|
MenuId: param.MenuID,
|
}, () => {
|
this.getMenuParam()
|
})
|
}
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '菜单信息解析错误！',
|
duration: 5
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
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') {
|
let node = document.getElementById('save-config')
|
if (node) {
|
node.click()
|
}
|
return false
|
}
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
changeEditMenu = () => {
|
const { oriConfig, config } = this.state
|
|
if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) {
|
notification.warning({
|
top: 92,
|
message: '配置信息未保存！',
|
duration: 5
|
})
|
return
|
}
|
|
let param = {
|
MenuID: config.wrap.linkmenu,
|
copyMenuId: '',
|
type: 'view',
|
lang: sessionStorage.getItem('lang')
|
}
|
|
param = window.btoa(window.encodeURIComponent(JSON.stringify(param)))
|
|
this.props.history.push('/mobdesign/' + param)
|
}
|
|
getAppMessage = (MenuID) => {
|
Api.getCloudConfig({
|
func: 's_get_keyids',
|
bid: sessionStorage.getItem('appId')
|
}).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
return
|
}
|
|
let appViewList = []
|
if (res.data && res.data.length > 0) {
|
appViewList = res.data
|
}
|
|
sessionStorage.setItem('appViewList', JSON.stringify(appViewList))
|
this.props.history.replace('/imdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID, type: 'view', lang: sessionStorage.getItem('lang')}))))
|
window.location.reload()
|
})
|
}
|
|
closeView = () => {
|
const { oriConfig, config } = this.state
|
|
if (!config) {
|
window.close()
|
} else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) {
|
confirm({
|
title: '配置信息未保存，确定关闭吗？',
|
content: '',
|
onOk() {
|
window.close()
|
},
|
onCancel() {}
|
})
|
} else {
|
window.close()
|
}
|
}
|
|
backView = () => {
|
const { oriConfig, config } = this.state
|
|
if (!config) {
|
window.history.back()
|
} else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) {
|
confirm({
|
title: '配置信息未保存，确定后退吗？',
|
content: '',
|
onOk() {
|
window.history.back()
|
},
|
onCancel() {}
|
})
|
} else {
|
window.history.back()
|
}
|
}
|
|
getMenuParam = () => {
|
const { MenuId } = this.state
|
|
let param = {
|
func: 'sPC_Get_LongParam',
|
TypeCharOne: sessionStorage.getItem('kei_no'),
|
typename: sessionStorage.getItem('typename'),
|
MenuID: MenuId
|
}
|
|
Api.getCloudConfig(param).then(result => {
|
if (!result.status) {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
this.setState({loading: false})
|
return
|
}
|
|
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
|
}
|
|
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
|
})
|
})
|
this.getAppMenus()
|
}
|
|
getAppMenus = () => {
|
let _param = {
|
func: 's_get_app_menus',
|
TypeCharOne: sessionStorage.getItem('kei_no'),
|
typename: sessionStorage.getItem('typename'),
|
LText: `select '${window.GLOB.appkey}'`,
|
timestamp: moment().format('YYYY-MM-DD HH:mm:ss')
|
}
|
|
_param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)
|
|
Api.getCloudConfig(_param).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
return
|
}
|
|
let appIndeList = sessionStorage.getItem('appViewList')
|
appIndeList = JSON.parse(appIndeList)
|
appIndeList = appIndeList.map(item => (item.keys_type !== 'index' ? item.keys_id : '')).join(',')
|
|
if (sessionStorage.getItem('userbind')) {
|
appIndeList = appIndeList + ',' + sessionStorage.getItem('userbind')
|
}
|
if (sessionStorage.getItem('instantMessage')) {
|
appIndeList = appIndeList + ',' + sessionStorage.getItem('instantMessage')
|
}
|
|
let menus = res.menus.filter(item => appIndeList.indexOf(item.MenuID) === -1)
|
menus = menus.map(item => {
|
item.value = item.MenuID
|
item.label = item.MenuName
|
return item
|
})
|
sessionStorage.setItem('appMenus', JSON.stringify(menus))
|
})
|
}
|
|
submitConfig = () => {
|
let config = fromJS(this.state.config).toJS()
|
|
if (!config.MenuName || !config.MenuNo) {
|
notification.warning({
|
top: 92,
|
message: '请完善菜单基本信息！',
|
duration: 5
|
})
|
this.setState({
|
settingshow: true
|
})
|
return
|
}
|
|
this.setState({
|
menuloading: true
|
})
|
|
setTimeout(() => {
|
let param = {
|
func: 'sPC_TrdMenu_AddUpt',
|
FstID: 'mk_app',
|
SndID: 'mk_app',
|
ParentID: 'mk_app',
|
MenuID: config.uuid,
|
MenuNo: config.MenuNo || '',
|
EasyCode: '',
|
Template: 'imPage',
|
TypeCharOne: sessionStorage.getItem('kei_no'),
|
Typename: sessionStorage.getItem('typename'),
|
MenuName: config.MenuName || '',
|
PageParam: JSON.stringify({Template: 'imPage'}),
|
open_edition: config.open_edition,
|
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)
|
param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
|
|
Api.getCloudConfig(param).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
this.setState({
|
menuloading: false
|
})
|
return
|
}
|
|
config.open_edition = res.open_edition || ''
|
|
this.setState({
|
config,
|
oriConfig: fromJS(config).toJS(),
|
menuloading: false
|
})
|
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
})
|
}, 300)
|
}
|
|
getWrapForms = () => {
|
const { config } = this.state
|
|
return getWrapForm(config.wrap)
|
}
|
|
updateWrap = (res) => {
|
let _config = {...this.state.config, wrap: res}
|
|
this.setState({
|
config: _config
|
})
|
}
|
|
// 更新配置信息
|
updateConfig = (config) => {
|
this.setState({
|
config: config
|
})
|
}
|
|
render () {
|
const { loading, settingshow, controlshow, MenuId, config, menuloading } = this.state
|
|
return (
|
<div className="mk-mob-view" id="mk-mob-design-view">
|
<Header/>
|
{loading ? <Spin className="view-spin" size="large" /> : null}
|
<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="基本信息" forceRender key="basedata">
|
{/* 菜单信息 */}
|
{config ? <MenuForm
|
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>
|
<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>
|
<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 className="msg">
|
<div className="title">朋友</div>
|
<div className="words">您好</div>
|
</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>
|
</div>
|
</div>
|
<div className="send-wrap">
|
<div className="adm-input"></div>
|
<div className="send"><Button>发送</Button></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<StyleController />
|
</div>
|
)
|
}
|
}
|
|
export default withRouter(ImDesign)
|
