2024-06-21

king

2024-06-21 2bccb9ec7bdefe23292a22bc153463cfa1479a49

 src/views/imdesign/index.jsx

@@ -1,18 +1,12 @@
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 { 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 zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import antdEnUS from 'antd/es/locale/en_US'
import antdZhCN from 'antd/es/locale/zh_CN'
// import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import getWrapForm from './options'
@@ -30,15 +24,12 @@
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const NormalForm = asyncComponent(() => import('@/components/normalform'))

sessionStorage.setItem('isEditState', 'true')
sessionStorage.setItem('appType', 'mob')       // 应用类型
document.body.className = ''
window.GLOB.CacheIndependent = new Map()

class ImDesign extends Component {
  state = {
    localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loading: true,
    MenuId: '',
    MenuName: '',
@@ -49,29 +40,25 @@
    direction: 'vertical',
    settingshow: true,
    controlshow: true,
    adapters: [],
  }

  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('lang', param.lang || 'zh-CN')
        sessionStorage.setItem('appName', param.remark || '')
        sessionStorage.setItem('kei_no', param.kei_no || '')
        sessionStorage.setItem('role_type', param.role_type || 'true')
        sessionStorage.setItem('login_types', param.login_types || 'false')
        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.setState({
          localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS,
          dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
        })
        this.getAppMessage(param.MenuID)
      } else if (param.type === 'view') {
        window.GLOB.winWidth = 420
@@ -86,15 +73,7 @@
          window.GLOB.shellHeight = 853
        }

        let adapters = sessionStorage.getItem('adapter')
        if (adapters) {
          adapters = adapters.split(',')
        } else {
          adapters = []
        }

        this.setState({
          adapters,
          MenuId: param.MenuID,
        }, () => {
          this.getMenuParam()
@@ -109,21 +88,11 @@
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.match.params.param !== nextProps.match.params.param) {
      window.location.reload()
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentDidMount () {
    setTimeout(() => {
      this.getAppPictures()
    }, 1000)

    document.onkeydown = (event) => {
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode
@@ -176,7 +145,8 @@
    let param = {
      MenuID: config.wrap.linkmenu,
      copyMenuId: '',
      type: 'view'
      type: 'view',
      lang: sessionStorage.getItem('lang')
    }

    param = window.btoa(window.encodeURIComponent(JSON.stringify(param)))
@@ -185,7 +155,7 @@
  }

  getAppMessage = (MenuID) => {
    Api.getSystemConfig({
    Api.getCloudConfig({
      func: 's_get_keyids',
      bid: sessionStorage.getItem('appId')
    }).then(res => {
@@ -204,46 +174,8 @@
      }

      sessionStorage.setItem('appViewList', JSON.stringify(appViewList))
      this.props.history.replace('/imdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID, type: 'view'}))))
    })
  }

  getAppPictures = () => {
    if (sessionStorage.getItem('app_videos') || sessionStorage.getItem('app_pictures')) return

    Api.getSystemConfig({
      func: 's_url_db_adduptdel',
      PageIndex: 0,  // 0 代表全部
      PageSize: 0,   // 0 代表全部
      typecharone: 'image',
      type: 'search'
    }).then(res => {
      if (res.status) {
        sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
      }

      Api.getSystemConfig({
        func: 's_url_db_adduptdel',
        PageIndex: 0,  // 0 代表全部
        PageSize: 0,   // 0 代表全部
        typecharone: 'video',
        type: 'search'
      }).then(res => {
        if (res.status) {
          sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
        }
      })
      Api.getSystemConfig({
        func: 's_url_db_adduptdel',
        PageIndex: 0,  // 0 代表全部
        PageSize: 0,   // 0 代表全部
        typecharone: 'color',
        type: 'search'
      }).then(res => {
        if (res.status) {
          sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
        }
      })
      this.props.history.replace('/imdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID, type: 'view', lang: sessionStorage.getItem('lang')}))))
      window.location.reload()
    })
  }

@@ -295,7 +227,7 @@
      MenuID: MenuId
    }

    Api.getSystemConfig(param).then(result => {
    Api.getCloudConfig(param).then(result => {
      if (!result.status) {
        notification.warning({
          top: 92,
@@ -304,47 +236,47 @@
        })
        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()
  }
@@ -360,7 +292,7 @@

    _param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)

    Api.getSystemConfig(_param).then(res => {
    Api.getCloudConfig(_param).then(res => {
      if (!res.status) {
        notification.warning({
          top: 92,
@@ -392,7 +324,6 @@
  }

  submitConfig = () => {
    const { adapters } = this.state
    let config = fromJS(this.state.config).toJS()

    if (!config.MenuName || !config.MenuNo) {
@@ -412,12 +343,6 @@
    })

    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',
@@ -432,19 +357,16 @@
        MenuName: config.MenuName || '',
        PageParam: JSON.stringify({Template: 'imPage'}),
        open_edition: config.open_edition,
        menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify(roleParam))),
        LText: '',
        LTexttb: ''
        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)))

      let _config = fromJS(config).toJS()

      param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))

      Api.getSystemConfig(param).then(res => {
      Api.getCloudConfig(param).then(res => {
        if (!res.status) {
          notification.warning({
            top: 92,
@@ -496,100 +418,94 @@
  }

  render () {
    const { localedict, loading, settingshow, controlshow, dict, MenuId, config, menuloading, adapters } = this.state
    const { loading, settingshow, controlshow, 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 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="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>
            <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">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="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="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 className="msg">
                      <div className="title">朋友</div>
                      <div className="words">您好</div>
                    </div>
                  </div>
                  <div className="send-wrap">
                    <div className="adm-input"></div>
                    <div className="send"><Button>发送</Button></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>
          </DndProvider>
          <StyleController />
          </div>
        </div>
      </ConfigProvider>
        <StyleController />
      </div>
    )
  }
}