2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/tabviews/tabmanage/index.jsx

@@ -1,20 +1,22 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Row, Col, Input, Button, Card, notification } from 'antd'
// import moment from 'moment'
import { Row, Col, Input, Button, Card, notification, Modal, Empty, Spin } from 'antd'
import moment from 'moment'

import Api from '@/api'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
// import options from '@/store/options.js'
// import { verupMainTable } from './config.js'
import MKEmitter from '@/utils/events.js'
import TransferForm from './transferform'
import MutilForm from './mutilform'
import subtableurl from '@/assets/img/subtable.jpg'

import './index.scss'

const { Search } = Input
const { confirm } = Modal

class TabManage extends Component {
  static propTpyes = {
@@ -28,18 +30,51 @@
    ContainerId: Utils.getuuid(), // 菜单外层html Id
    searchKey: '',
    tabviews: null,
    cols: 8
    loading: true,
    modaltype: '',
    editTab: null,
    submitloading: false,
    cols: 8,
    thawVisible: false,
    thawmenulist: null

  }

  getTabs = () => {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => {
      if (res.status) {
        this.setState({
          loading: false,
          tabviews: res.UserTemp.map(temp => {
            return {
              uuid: temp.MenuID,
              value: temp.MenuID,
              MenuName: temp.MenuName || '',
              type: temp.Template,
              MenuNo: temp.MenuNo || '',
              Remark: temp.Remark
            }
          })
        })
      } else {
        this.setState({
          loading: false
        })
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
    })
  }

  UNSAFE_componentWillMount () {
    let docwidth = document.body.offsetWidth
    let cols = 8

    if (docwidth > 1500) {
    if (docwidth > 1800) {
      cols = 6
    } else if (docwidth > 1900) {
      cols = 4
    }
    
    this.setState({
@@ -48,27 +83,8 @@
  }

  componentDidMount () {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => {
      if (res.status) {
        this.setState({
          tabviews: res.UserTemp.map(temp => {
            return {
              uuid: temp.MenuID,
              value: temp.MenuID,
              text: temp.MenuName,
              type: temp.Template,
              MenuNo: temp.MenuNo
            }
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 10
        })
      }
    })
    this.getTabs()
    MKEmitter.addListener('reloadMenuView', this.reloadMenuView)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -82,38 +98,477 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('reloadMenuView', this.reloadMenuView)
  }

  reloadMenuView = (menuId) => {
    const { MenuID } = this.props

    if (MenuID !== menuId) return

    this.setState({
      searchKey: '',
      tabviews: null,
      loading: true,
      modaltype: '',
      editTab: null,
      submitloading: false,
      thawVisible: false,
      thawmenulist: null
    })
    this.getTabs()
  }

  handleTab = (tab, type) => {
    let _this = this

    if (type === 'delete') {
      confirm({
        title: "确定删除该标签吗？",
        onOk() {
          return new Promise(resolve => {
            let _param = {
              func: 'sPC_MainMenu_Del',
              MenuID: tab.uuid
            }

            Api.getSystemConfig(_param).then(res => {
              if (!res.status) {
                notification.warning({
                  top: 92,
                  message: res.message,
                  duration: 5
                })
              } else {
                notification.success({
                  top: 92,
                  message: '执行成功',
                  duration: 2
                })
                _this.setState({
                  loading: true,
                  tabviews: null
                }, () => {
                  _this.getTabs()
                })
              }
              resolve()
            })
          })
        },
        onCancel() {}
      })
    } else {
      this.setState({
        editTab: tab,
        modaltype: type
      })
    }
  }

  handleSubmit = () => {
    const { editTab, modaltype } = this.state

    this.tabFormRef.handleConfirm().then(res => {

      let _tab = {...editTab, ...res}

      this.setState({submitloading: true})

      Api.getSystemConfig({
        func: 'sPC_Get_LongParam',
        MenuID: _tab.uuid
      }).then(res => {

        if (!res.status) {
          this.setState({
            submitloading: false
          })
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
          return
        }

        let param = {
          func: 'sPC_Tab_AddUpt',
          MenuID: _tab.uuid,
          MenuNo: _tab.MenuNo,
          Template: _tab.type,
          MenuName: _tab.MenuName,
          Remark: _tab.Remark,
          PageParam: JSON.stringify({Template: _tab.type}),
          Sort: 0
        }

        let _oriActions = []

        let btnParam = {
          func: 'sPC_Button_AddUpt',
          Type: 40,
          ParentID: _tab.uuid,
          MenuNo: _tab.MenuNo,
          Template: _tab.type,
          PageParam: '',
          LongParam: '',
          LText: ''
        }

        if (modaltype === 'edit') {
          param.LongParam = res.LongParam
        } else {
          let _LongParam = ''
          let _menuId = Utils.getuuid()

          // 解析配置
          if (res.LongParam) {
            try {
              _LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
            } catch (e) {
              console.warn('Parse Failure')
              _LongParam = ''
            }
          }

          if (_LongParam) {
            try {
              _LongParam.uuid = _menuId
              _LongParam.tabName = _tab.MenuName
              _LongParam.tabNo = _tab.MenuNo
              _LongParam.Remark = _tab.Remark
  
              let _linkchange = {}
              btnParam.LText = []
  
              _LongParam.action = _LongParam.action.map((item, index) => {
                let uuid = Utils.getuuid()
  
                if (item.OpenType === 'pop') {
                  _oriActions.push({
                    prebtn: JSON.parse(JSON.stringify(item)),
                    curuuid: uuid,
                    Template: 'Modal'
                  })
                } else if (item.OpenType === 'popview') {
                  _linkchange[item.linkTab] = Utils.getuuid()
  
                  item.linkTab = _linkchange[item.linkTab]
                }
  
                item.uuid = uuid
  
                btnParam.LText.push(`select '${item.uuid}' as menuid, '${item.label}' as menuname, '${(index + 1) * 10}' as Sort`)
  
                return item
              })
  
              if (_LongParam.funcs && _LongParam.funcs.length > 0) {
                _LongParam.funcs = _LongParam.funcs.map(item => {
                  if (item.type === 'tab') {
                    item.linkTab = _linkchange[item.linkTab]
                    item.menuNo = ''
                    item.subfuncs = []
                  }
  
                  return item
                })
              }
  
              btnParam.LText = btnParam.LText.join(' union all ')
              btnParam.LText = Utils.formatOptions(btnParam.LText)
              btnParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
              btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp)
  
              _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_LongParam)))
            } catch (e) {
              console.warn('Stringify Failure')
              _LongParam = ''
            }
          }

          param.MenuID = _menuId
          param.LongParam = _LongParam

          btnParam.ParentID = _menuId
        }

        new Promise(resolve => {
          Api.getSystemConfig(param).then(response => {
            if (response.status) {
              resolve(true)
            } else {
              notification.warning({
                top: 92,
                message: response.message,
                duration: 5
              })
              resolve(false)
            }
          })
        }).then(result => {
          if (!result) return result
          if (modaltype === 'edit') return true
          if (!btnParam.LText) return true

          return Api.getSystemConfig(btnParam)
        }).then(result => {
          if (!result) return result
          if (modaltype === 'edit') return true
          if (!btnParam.LText) return true

          if (result.status) {
            return true
          } else {
            notification.warning({
              top: 92,
              message: result.message,
              duration: 5
            })
            return false
          }
        }).then(result => {
          if (!result) return result
          if (modaltype === 'edit') return true
          if (_oriActions.length === 0) return true

          let deffers = _oriActions.map(item => {
            return new Promise(resolve => {
              Api.getSystemConfig({
                func: 'sPC_Get_LongParam',
                MenuID: item.prebtn.uuid
              }).then(response => {
                if (!response.status) {
                  notification.warning({
                    top: 92,
                    message: response.message,
                    duration: 5
                  })
                  resolve(false)
                } else if (response.status && response.LongParam) {
                  let _param = {
                    func: 'sPC_ButtonParam_AddUpt',
                    ParentID: _tab.uuid,
                    MenuID: item.curuuid,
                    MenuNo: _tab.MenuNo,
                    Template: item.Template,
                    MenuName: item.prebtn.label,
                    PageParam: JSON.stringify({Template: item.Template}),
                    LongParam: response.LongParam
                  }
                  Api.getSystemConfig(_param).then(resp => {
                    if (!resp.status) {
                      notification.warning({
                        top: 92,
                        message: resp.message,
                        duration: 5
                      })
                      resolve(false)
                    } else {
                      resolve(true)
                    }
                  })
                } else {
                  resolve(true)
                }
              })
            })
          })

          return Promise.all(deffers)
        }).then(result => {
          if (!result) {
            this.setState({
              submitloading: false
            })
            return
          }

          let isSuccess = true

          if (typeof(result) === 'object') {
            result.forEach(resul => {
              if (!resul) {
                isSuccess = false
              }
            })
          }

          if (isSuccess) {
            notification.success({
              top: 92,
              message: '执行成功',
              duration: 2
            })
          }

          this.setState({
            loading: true,
            submitloading: false,
            modaltype: '',
            tabviews: null
          }, () => {
            this.getTabs()
          })
        })
      })
    })
  }

  triggerDraw = () => {
    this.setState({
      thawVisible: true
    })

    Api.getSystemConfig({
      func: 'sPC_Get_FrozenMenu',
      TYPE: 50
    }).then(res => {
      if (res.status) {
        this.setState({
          thawmenulist: res.data.map(menu => {
            return {
              key: menu.MenuID,
              title: menu.MenuName
            }
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      }
    })
  }

  thawMenuSubmit = () => {
    if (this.refs.trawmenu.state.targetKeys.length === 0) {
      notification.warning({
        top: 92,
        message: '请选择要解除冻结的标签！',
        duration: 5
      })
    } else {
      this.setState({
        submitloading: true
      })
      let defers = this.refs.trawmenu.state.targetKeys.map(item => {
        return new Promise((resolve) => {
          Api.getSystemConfig({
            func: 'sPC_MainMenu_ReDel',
            MenuID: item
          }).then(res => {
            if (res.status) {
              resolve('')
            } else {
              resolve(res.message)
            }
          })
        })
      })
      Promise.all(defers).then(res => {
        let msg = res.filter(Boolean)[0]
        if (msg) {
          notification.error({
            top: 92,
            message: msg,
            duration: 10
          })
          this.setState({
            submitloading: false
          })
        } else {
          notification.success({
            top: 92,
            message: '执行成功',
            duration: 2
          })
          this.setState({
            submitloading: false,
            thawVisible: false,
            thawmenulist: null,
            tabviews: null
          }, () => {
            this.getTabs()
          })
        }
      })
    }
  }

  render() {
    const { cols, tabviews } = this.state
    const { cols, tabviews, modaltype, editTab, searchKey, loading } = this.state

    let _tabviews = []
    if (tabviews) {
      _tabviews = tabviews.filter(tab => tab.MenuName.toLowerCase().indexOf(searchKey.toLowerCase()) >= 0 || tab.MenuNo.toLowerCase().indexOf(searchKey.toLowerCase()) >= 0)
    }

    return (
      <div className="tab-manage" id={this.state.ContainerId}>
        {loading && <Spin size="large" />}
        <Row>
          <Col className="tab-search" span={6}>
            <Search placeholder="请输入标签名称" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
          <Col className="tab-thaw" span={6} offset={12}>
            <Button type="primary">标签解冻</Button>
            <Button type="primary" onClick={this.triggerDraw}>标签解冻</Button>
          </Col>
        </Row>
        <Row className="tab-list">
          {tabviews && tabviews.map((tab, index) => {
        {_tabviews.length > 0 ? <Row className="tab-list">
          {_tabviews.map((tab, index) => {
            return (
              <Col span={cols} key={index}>
                <Card
                  className="tab-card"
                  title={tab.text}
                  title={tab.MenuName}
                >
                  <img onClick={() => {this.previewPicture()}} src={subtableurl} alt=""/>
                  <div className="card-operation">
                    <Button type="primary">使用模板</Button>
                  <div className="tab-operation">
                    <Button type="primary" onClick={() => this.handleTab(tab, 'edit')}>编辑</Button>
                    <Button className="mk-green" onClick={() => this.handleTab(tab, 'copy')}>复制</Button>
                    <Button type="danger" onClick={() => this.handleTab(tab, 'delete')}>删除</Button>
                  </div>
                </Card>
              </Col>
            )
          })}
        </Row>
        </Row> : null}
        {tabviews && _tabviews.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
        {/* 标签修改或复制 */}
        <Modal
          title={modaltype === 'edit' ? '标签编辑' : '标签复制'}
          visible={!!modaltype}
          width={600}
          maskClosable={false}
          onOk={this.handleSubmit}
          confirmLoading={this.state.submitloading}
          onCancel={() => {this.setState({modaltype: '', editTab: null})}}
          destroyOnClose
        >
          <MutilForm
            dict={this.state.dict}
            tab={editTab}
            inputSubmit={this.handleSubmit}
            wrappedComponentRef={(inst) => this.tabFormRef = inst}
          />
        </Modal>
        {/* 解冻标签模态框 */}
        <Modal
          title="标签解除冻结"
          visible={this.state.thawVisible}
          width={600}
          onOk={this.thawMenuSubmit}
          confirmLoading={this.state.submitloading}
          onCancel={() => {this.setState({thawVisible: false, thawmenulist: null})}}
          destroyOnClose
        >
          {!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
          {this.state.thawmenulist && <TransferForm ref="trawmenu" menulist={this.state.thawmenulist}/>}
        </Modal>
      </div>
    )
  }