hht-xinrui-mes/src/pages/login/Home.vue

<template>
  <section>
    <header><span class="fxcol">首页</span></header>
    <section class="content" style="margin-bottom: 0; margin-top: .86rem">
      <div class="userInfo">
        <div class="fxcol">
          <p class="p1">{{$store.getters.userInfo !== '' ? JSON.parse($store.getters.userInfo).nick_name : ''}}</p>
          <p class="p2">欢迎进入新锐手持系统！</p>
        </div>
        <div class="exit" @click="Quit">
          <i class="icon-exit"></i>
          <span class="exit-text">退出</span>
        </div>
      </div>
      <div class="menu-container">
        <div class="menu-col menu-col_fj" v-for="e in menuList" :key="e.menu_id" @click="toPage(e)">
          <img :src="require('../../images/xinrui/menu/' + e.path + '.png')" alt="">
          <p class="fxcol">{{e.name}}</p>
        </div>
        <div v-show="menuList.length > 0" class="menu-col menu-col_fj" @click="$router.push('/Password')">
          <img src="../../images/xinrui/menu/password.png" alt="">
          <p class="fxcol">修改密码</p>
        </div>
        <!-- <div class="menu-col fxrow" @click="goInner('/MaintainExecution')"><p class="fxcol">设备保养执行-维修工</p></div>
        <div class="menu-col fxrow" @click="goInner('/MaintainConfirm')"><p class="fxcol">设备保养确认-生产员</p></div>
        <div class="menu-col fxrow" @click="goInner('/EquipRepair')"><p class="fxcol">设备报修</p></div>
        <div class="menu-col fxrow" @click="goInner('/EquipRepairExecute')"><p class="fxcol">设备维修执行</p></div>
        <div class="menu-col fxrow" @click="goInner('/EquipRepairConfirm')"><p class="fxcol">设备维修确认</p></div> -->
        <!-- <div class="menu-col fxrow" @click="goInner('/ProcessMakePowder')"><p class="fxcol">配粉工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessGrindBall')"><p class="fxcol">球磨工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessSpray')"><p class="fxcol">喷雾工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessMix')"><p class="fxcol">混合工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessDry')"><p class="fxcol">干燥工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessSeDry')"><p class="fxcol">二次晾晒工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessChuimo')"><p class="fxcol">锤磨工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessYatuan')"><p class="fxcol">压团工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessGranulation')"><p class="fxcol">制粒工序</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessWipe')"><p class="fxcol">擦筛工序</p></div> -->
        <!-- <div class="menu-col fxrow" @click="goInner('/Print')"><p class="fxcol">打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/SoftWasteBagPrint')"><p class="fxcol">袋标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/SoftWasteBarrelPrint')"><p class="fxcol">软废组桶</p></div>
        <div class="menu-col fxrow" @click="goInner('/ReworkBarrelPrint')"><p class="fxcol">返工料桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/FinishProdBarrelPrint')"><p class="fxcol">产成品组桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/ChengPinBarrelPrint')"><p class="fxcol">成品组桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/BarrelBagUpdate')"><p class="fxcol">桶袋标签更新</p></div>
        <div class="menu-col fxrow" @click="goInner('/NewMaterInStoreGroup')"><p class="fxcol">新料入库组盘</p></div>
        <div class="menu-col fxrow" @click="goInner('/FinishMaterInStoreGroup')"><p class="fxcol">产成品入库组盘</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcedureReworkInStoreGroup')"><p class="fxcol">工序返工入库</p></div>
        <div class="menu-col fxrow" @click="goInner('/LikuReworkInStoreGroup')"><p class="fxcol">立库返工入库</p></div>
        <div class="menu-col fxrow" @click="goInner('/SoftWasteInStoreGroup')"><p class="fxcol">软废入库组盘</p></div>
        <div class="menu-col fxrow" @click="goInner('/RemnantInStoreGroup')"><p class="fxcol">零头粉入库组盘</p></div>
        <div class="menu-col fxrow" @click="goInner('/PeifenOutStore')"><p class="fxcol">配粉出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/ReturnMaterOutStore')"><p class="fxcol">退货出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/OtherOutStore')"><p class="fxcol">其他出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/CheckOutStore')"><p class="fxcol">检验出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/SaleOutStore')"><p class="fxcol">销售出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/SoftWasteCleanOutStore')"><p class="fxcol">软废清洗出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/EmptyTrayInStore')"><p class="fxcol">空托盘入库</p></div>
        <div class="menu-col fxrow" @click="goInner('/EmptyTrayOutStore')"><p class="fxcol">空托盘出库</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcessCallEmptyTray')"><p class="fxcol">工序呼叫空盘</p></div>
        <div class="menu-col fxrow" @click="goInner('/CleanWork')"><p class="fxcol">清洗作业</p></div>
        <div class="menu-col fxrow" @click="goInner('/LikuEmptyInOutStore')"><p class="fxcol">立库空盘出入库</p></div>
        <div class="menu-col fxrow" @click="goInner('/RawMaterCheck')"><p class="fxcol">原材料盘点</p></div>
        <div class="menu-col fxrow" @click="goInner('/PinpanManage')"><p class="fxcol">拼盘管理</p></div>
        <div class="menu-col fxrow" @click="goInner('/ChaipanManage')"><p class="fxcol">拆盘管理</p></div>
        <div class="menu-col fxrow" @click="goInner('/RawMaterInspection')"><p class="fxcol">原材料质检</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProcedureInspection')"><p class="fxcol">工序质检</p></div>
        <div class="menu-col fxrow" @click="goInner('/InstructManage')"><p class="fxcol">指令管理</p></div>
        <div class="menu-col fxrow" @click="goInner('/FixedPointTask')"><p class="fxcol">定点作业</p></div>
        <div class="menu-col fxrow" @click="goInner('/ProductInstore')"><p class="fxcol">生产入库</p></div>
        <div class="menu-col fxrow" @click="goInner('/CleaningGroupBarrel')"><p class="fxcol">清洗组桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/PeifenBarrelPrint')"><p class="fxcol">配粉间桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/AbnormalBarrelPrint')"><p class="fxcol">异常桶标签打印</p></div>
        <div class="menu-col fxrow" @click="goInner('/SoftWasteCleanInStore')"><p class="fxcol">软废清洗入库</p></div> -->
      </div>
    </section>
    <section v-if="show === true" class="sec_menu_wraper fxrow">
      <div class="sec_menu_w fxcol fxrow">
        <div class="menu-col sec_menu-col" v-for="e in secM" :key="e.menu_id" @click="toPage2(e)">
          <div class="sec_menu-col_inner fxrow">
            <p class="fxcol">{{e.name}}</p>
          </div>
        </div>
      </div>
      <div class="cancel">
        <div class="iconfont cancel_icon" @click="show = false"></div>
      </div>
    </section>
  </section>
</template>

<script>
import {authority} from '@config/getData2.js'
export default {
  name: 'Home',
  data () {
    return {
      menuList: [],
      show: false,
      secM: []
    }
  },
  mounted () {
    this.$store.dispatch('materObj', {})
    document.getElementsByTagName('body')[0].className = 'bgwhite'
  },
  created () {
    this._authority()
  },
  // beforeDestroy () {
  //   document.body.removeAttribute('class', 'bgwhite')
  // },
  methods: {
    toPage (e) {
      // if (e.sonTree.length === 0) {
      //   let name = e.path.substr(2)
      //   if (name === 'ProcedureInspection' || name === 'SoftWasteBarrelPrint' || name === 'NewMaterInStoreGroup' || name === 'SoftWasteInStoreGroup' || name === 'FinishProdBarrelPrint' || name === 'ChengPinBarrelPrint' || name === 'BarrelBagUpdate' || name === 'ReworkBarrelPrint' || name === 'SoftWasteBagPrint' || name === 'ChaipanManage' || name === 'RawMaterCheck' || name === 'ProductInstore' || name === 'PeifenOutStore' || name === 'ReturnMaterOutStore' || name === 'OtherOutStore' || name === 'CheckOutStore' || name === 'SaleOutStore' || name === 'SoftWasteCleanOutStore' || name === 'CleaningGroupBarrel' || name === 'PeifenBarrelPrint' || name === 'AbnormalBarrelPrint' || name === 'SoftWasteCleanInStore') {
      //     this.$store.dispatch('setKeepAlive', [name])
      //   }
      //   this.$router.push(e.path.substr(2))
      // } else {
      //   this.show = true
      //   this.secM = e.sonTree
      // }
      if (e.sonTree.length > 0) {
        this.show = true
        this.secM = e.sonTree
      }
    },
    toPage2 (e) {
      let name = e.path.substr(2)
      if (name === 'ProcedureInspection' || name === 'SoftWasteBarrelPrint' || name === 'NewMaterInStoreGroup' || name === 'SoftWasteInStoreGroup' || name === 'FinishProdBarrelPrint' || name === 'ChengPinBarrelPrint' || name === 'BarrelBagUpdate' || name === 'ReworkBarrelPrint' || name === 'SoftWasteBagPrint' || name === 'ChaipanManage' || name === 'RawMaterCheck' || name === 'ProductInstore' || name === 'PeifenOutStore' || name === 'ReturnMaterOutStore' || name === 'OtherOutStore' || name === 'CheckOutStore' || name === 'SaleOutStore' || name === 'SoftWasteCleanOutStore' || name === 'CleaningGroupBarrel' || name === 'PeifenBarrelPrint' || name === 'AbnormalBarrelPrint' || name === 'SoftWasteCleanInStore' || name === 'ProcessMakePowder' || name === 'ProcessGrindBall' || name === 'ProcessSpray' || name === 'ProcessMix' || name === 'ProcessDry' || name === 'ProcessSeDry' || name === 'ProcessChuimo' || name === 'ProcessYatuan' || name === 'ProcessGranulation' || name === 'ProcessWipe' || name === 'MaintainExecution' || name === 'MaintainConfirm' || name === 'EquipRepair' || name === 'EquipRepairExecute' || name === 'EquipRepairConfirm') {
        this.$store.dispatch('setKeepAlive', [name])
      }
      this.$router.push(e.path.substr(2))
    },
    async _authority () {
      let accountId = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).account_id : ''
      let res = await authority(accountId)
      if (res.code === '1') {
        this.menuList = [...res.result.sonTree]
      } else {
        this.Dialog(res.desc)
      }
    },
    Quit () {
      this.$store.dispatch('setSignOut')
      this.$router.push('/login')
    },
    goInner (path) {
      let name = path.substr(1)
      if (name === 'ProcedureInspection' || name === 'SoftWasteBarrelPrint' || name === 'NewMaterInStoreGroup' || name === 'SoftWasteInStoreGroup' || name === 'FinishProdBarrelPrint' || name === 'ChengPinBarrelPrint' || name === 'BarrelBagUpdate' || name === 'ReworkBarrelPrint' || name === 'SoftWasteBagPrint' || name === 'ChaipanManage' || name === 'RawMaterCheck' || name === 'ProductInstore' || name === 'PeifenOutStore' || name === 'ReturnMaterOutStore' || name === 'OtherOutStore' || name === 'CheckOutStore' || name === 'SaleOutStore' || name === 'SoftWasteCleanOutStore' || name === 'CleaningGroupBarrel' || name === 'PeifenBarrelPrint' || name === 'AbnormalBarrelPrint' || name === 'SoftWasteCleanInStore' || name === 'ProcessMakePowder' || name === 'ProcessGrindBall' || name === 'ProcessSpray' || name === 'ProcessMix' || name === 'ProcessDry' || name === 'ProcessSeDry' || name === 'ProcessChuimo' || name === 'ProcessYatuan' || name === 'ProcessGranulation' || name === 'ProcessWipe' || name === 'MaintainExecution' || name === 'MaintainConfirm' || name === 'EquipRepair' || name === 'EquipRepairExecute' || name === 'EquipRepairConfirm') {
        this.$store.dispatch('setKeepAlive', [name])
      }
      this.$router.push(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
>>>header
  background-color #ffffff
  span
    color #444444
.userInfo
  _fj()
  padding .46rem .31rem .41rem .31rem
  background-color $red
  _bis('../../images/bg2.png',auto,100%,right,bottom)
  border-radius: .08rem
  color #fff
  align-items center
.p1
  _font(.34rem,1,#fff)
  padding-bottom .18rem
.p2
  _font(.26rem,1,#fff)
.exit
  flex 0 0 1.2rem
  _fj()
  height .47rem
  padding 0 .15rem
  border 1px solid #FF967C
  border-radius .235rem
.icon-exit
  flex 0 0 .22rem
  height .22rem
  _bis('../../images/exit.png',.22rem)
.exit-text
  flex 1
  _font(.24rem,.47rem,#fff,,right)
.menu-container
  _wh(100%, calc(100% - 2.6rem))
  overflow-y auto
  _fj()
  align-content flex-start
  flex-wrap wrap
  padding-top .4rem
  &::after
    content ''
    display block
    _wh(30%,0)
.menu-col
  cursor pointer
  position relative
  margin-bottom .4rem
  _wh(30%, auto)
  text-align center
  padding .05rem
  box-sizing border-box
  overflow hidden
  img
    _wh(55%, auto)
    margin 0 auto .2rem
  p
    _font(.28rem,.38rem,#444,,center)
.menu-col_fj
  _fj()
  flex-direction column
.num_tip
  position absolute
  top 0
  right .32rem
  _wh(.3rem, .3rem)
  _font(.22rem, .3rem, #fff,,center)
  border-radius 100%
  background-color $red
.sec_menu_wraper
  position fixed
  top 0
  left 0
  _wh(100%, 100%)
  background-color rgba(0, 0, 0, .9)
  z-index 2017
  flex-direction column
.sec_menu_w
  _wh(100%, auto)
  padding 0 .24rem
  flex-wrap wrap
  align-content center
  &::after
    content ''
    display block
    _wh(30%,0)
.cancel
  _wh(100%, 1rem)
  padding 0 .24rem
  overflow hidden
  background-color rgba(255, 255, 255, .3)
  box-shadow 0 .01rem .04rem 0 rgba(160,160,160,0.9)
.sec_menu-col
  background-color transparent
  border none
  height auto
.sec_menu-col_inner
  _wh(1.6rem, 1.6rem)
  border-radius 50%
  background-color $yellow
  margin 0 auto
  p
    padding 0 .2rem
    color #fff
</style>