2019-12-23

king

2019-12-23 d38dc481492878c04ddf2d6bc2e9bf7d44c57fd7

 src/components/sidemenu/editthdmenu/index.jsx

@@ -10,6 +10,7 @@
import Utils from '@/utils/utils.js'
import DragElement from '../menuelement'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import { sysTemps } from '@/utils/option.js'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
@@ -23,56 +24,56 @@
const { confirm } = Modal
const { TabPane } = Tabs
const { Search } = Input
const illust = {

const illust = { // 模板图片，用于已使用模板
  CommonTable: nortable
}
let previewList = null

let previewList = null // 初始菜单列表

class EditMenu extends Component {
  static propTpyes = {
    menulist: PropTypes.any,
    supMenuList: PropTypes.array,
    supMenu: PropTypes.object,
    reload: PropTypes.func,
    exitEdit: PropTypes.func
    reload: PropTypes.func,      // 菜单修改后刷新
    menulist: PropTypes.any,     // 三级菜单列表
    exitEdit: PropTypes.func,    // 退出编辑状态
    supMenu: PropTypes.object,   // 对应的上级菜单
    supMenuList: PropTypes.array // 上级菜单列表，用于三级菜单切换上级菜单
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    show: true,
    thawmenulist: null, // 已冻结的二级菜单
    visible: null,
    title: '',
    type: '',
    tabview: '',           // 选择模板窗口（template）、基础表格配置（CommonTable）
    formlist: null,
    show: true,            // 控制菜单刷新
    thawmenulist: null,    // 已冻结的二级菜单
    type: '',              // 操作类型，新建或编辑菜单
    tabview: '',           // 选择模板窗口（template）、基础表格配置（CommonTable）、表单（Modal）、子表（SubTable）
    editMenu: null,        // 编辑菜单
    editAction: null,      // 编辑按钮
    editTab: null,         // 编辑标签
    thawMvisible: false,   // 解除冻结模态框
    confirmLoading: false, // 提交中。。。
    selectTemp: '',        // 选择模板
    usedTemplates: null,
    menuConfig: '',
    tempSearchKey: '',
    loading: false,
    preview: null,
    pretemplate: null,
    baseTemplates: [{
      title: '基础表格',
      type: 'CommonTable',
      url: illust['CommonTable'],
      baseconfig: ''
    }]
    usedTemplates: null,   // 已使用模板列表
    tempSearchKey: '',     // 菜单名称过滤值
    loading: false,        // 编辑菜单或使用已使用模板时，获取配置信息
    preview: null,         // 图片预览url
    pretemplate: null,     // 预览模板
    sysTemplates: sysTemps // 系统模板
  }

  /**
   * @description 菜单顺序改变时，保存中间状态
   */
  handlePreviewList = (List) => {
    // 菜单顺序改变时，保存中间状态
    previewList = List
  }

  /**
   * @description 菜单编辑：修改、删除
   * 1、菜单修改或删除时，先查看菜单顺序是否改变
   * 2、菜单删除
   * 3、菜单编辑，查询菜单配置信息，信息正确，进入对应编辑页面
   */
  handleMenu = (menu) => {
    // 菜单编辑：修改、删除
    const _this = this
    if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
      notification.warning({
@@ -122,25 +123,23 @@
          try {
            _LongParam = JSON.parse(_LongParam)
          } catch (e) {
            _LongParam = {
              type: 'system',
              setting: {},
              search: [],
              action: [],
              columns: []
            }
            _LongParam = ''
          }

          _menu.LongParam = _LongParam
          _menu.ParentID = this.props.supMenu.MenuID

          // 检测模板是否存在
          let _Template = this.state.baseTemplates.filter(temp => temp.type === _menu.PageParam.Template)
          let _Template = this.state.sysTemplates.filter(temp => temp.type === _menu.PageParam.Template)

          this.setState({
            type: 'edit',
            editMenu: _menu,
            loading: false,
            tabview: _Template.length > 0 ? _menu.PageParam.Template : 'template'
          })

          // 模板不存在时错误提示
          if (_Template.length === 0) {
            notification.warning({
              top: 92,
@@ -320,57 +319,104 @@
    })
  }

  useTemplate = (template) => {
  useTemplate = (template, useType) => {
    const { type, editMenu } = this.state

    // 选择模板：添加菜单时
    if (type === 'add') {
      this.setState({
        tabview: template.type,
        editMenu: {
          MenuID: Utils.getuuid(),
          MenuName: '',
          MenuNo: '',
          id: this.props.menulist.length,
          src: '',
          text: '',
          type: template.type,
          PageParam: {OpenType: 'newtab', Template: template.type},
          LongParam: template.baseconfig,
          ParentID: this.props.supMenu.MenuID
    new Promise(resolve => {
      if (useType === 'sys') {
        resolve(true)
      } else {
        let param = {
          func: 'sPC_Get_LongParam',
          MenuID: template.uuid
        }
      })
    } else {
      let _PageParam = {OpenType: editMenu.PageParam.OpenType || 'newtab', Template: template.type}
        this.setState({
          loading: true
        })

      this.setState({
        tabview: template.type,
        editMenu: {...editMenu, LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}
      })
    }
    document.getElementById('root').style.overflowY = 'hidden'
        Api.getSystemConfig(param).then(result => {
          if (!result.status) {
            notification.warning({
              top: 92,
              message: result.message,
              duration: 10
            })
            resolve(false)
          } else {
            let _config = ''
            if (result.LongParam) {
              try {
                _config = window.decodeURIComponent(window.atob(result.LongParam))
                _config = JSON.parse(_config)
                _config.type = 'user'
              } catch (e) {
                _config = ''
              }
            }

            if (_config) {
              template.baseconfig = _config
              resolve(true)
            } else {
              notification.warning({
                top: 92,
                message: '模板信息获取失败！',
                duration: 10
              })
              resolve(false)
            }
          }
        })
      }
    }).then(res => {
      if (!res) {
        this.setState({
          loading: false
        })
        return
      }

      // 选择模板：添加菜单时
      if (type === 'add') {
        this.setState({
          tabview: template.type,
          loading: false,
          editMenu: {
            MenuID: Utils.getuuid(),
            MenuName: '',
            MenuNo: '',
            id: this.props.menulist.length,
            src: '',
            text: '',
            type: template.type,
            PageParam: {OpenType: 'newtab', Template: template.type},
            LongParam: template.baseconfig,
            ParentID: this.props.supMenu.MenuID
          }
        })
      } else {
        let _PageParam = {OpenType: editMenu.PageParam.OpenType || 'newtab', Template: template.type}

        this.setState({
          loading: false,
          tabview: template.type,
          editMenu: {...editMenu, LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}
        })
      }
      document.getElementById('root').style.overflowY = 'hidden'
    })
  }

  getUsedTemplate = () => {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp'}).then(res => {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'menu'}).then(res => {
      this.setState({
        usedTemplates: res.UserTemp.map(temp => {
          let _config = ''
          if (temp.LongParam) {
            _config = window.decodeURIComponent(window.atob(temp.LongParam))
            try {
              _config = JSON.parse(_config)
              _config.type = 'user'
            } catch (e) {
              _config = ''
            }
          }

          return {
            uuid: temp.MenuID,
            title: temp.MenuName,
            type: temp.Template,
            url: illust[temp.Template],
            baseconfig: _config
            url: illust[temp.Template]
          }
        })
      })
@@ -401,7 +447,6 @@
        })
      }
    } else if (type === 'tab') {
      console.log(item)
      if (item.type === 'SubTable') {
        this.setState({
          editMenu: originMenu,
@@ -478,14 +523,14 @@
            {this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
              <TabPane tab="系统模板" key="1">
                <Row>
                  {this.state.baseTemplates.map(template => {
                  {this.state.sysTemplates.map(template => {
                    return (
                      <Col key={template.type} span={8}>
                        <Card
                          title={template.title}>
                          <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                          <div className="card-operation">
                            <Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
                            <Button type="primary" onClick={() => {this.useTemplate(template, 'sys')}}>使用模板</Button>
                          </div>
                        </Card>
                      </Col>
@@ -508,7 +553,7 @@
                            title={template.title}>
                            <img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
                            <div className="card-operation">
                              <Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
                              <Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
                            </div>
                          </Card>
                        </Col>
@@ -561,7 +606,7 @@
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
        </Modal>
        {this.state.loading && <Spin style={{position: 'fixed', left: 'calc(50vw - 22px)', top: 'calc(50vh - 70px)'}} size="large" />}
        {this.state.loading && <Spin className="loading-thdmenu" size="large" />}
      </div>
    )
  }