yiliangyiyun-pc-jj/src/views/system/systemFile/systemFile.vue

<!-- 船员模块 体系管理 -->
<template>
  <div class="frame">
    <div class="frameTitle">
      <el-menu :default-active="defaultIndex()"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect">
        <el-menu-item v-for="(item,id) in elMenu"
                      :key="id"
                      v-show="item.hp"
                      :index="item.key">
          <span>{{ $t(item.value) }}</span>
          <span v-if="item.num >= 0">
            <span>{{ '(' }}</span>
            <span style="color: #e74c3c">{{ item.num }}</span>
            <span>{{ ')' }}</span>
          </span>
        </el-menu-item>
      </el-menu>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { getHp } from '@/utils/getHasPermission'
import { getWarnList } from '@/model/system'
import { getFileOperationInfoWaitDealWithByPage } from '@/model/system'

export default {
  name: 'systemFile',
  data () {
    return {
      elMenu: [
        {
          value: 'route.warn',
          key: '1',
          hp: getHp('ismManager.SystemOperation.systemOperationWarning'),
          num: 0
        },
        {
          value: 'route.systemOperation',
          key: '2',
          hp: getHp('ismManager.SystemOperation.systemOperationFile'),
          num: 0
        },
        {
          value: 'route.myFile',
          key: '3',
          hp: getHp('ismManager.SystemOperation.systemOperationFile')
        },
        {
          value: 'route.fileManage',
          key: '4',
          hp: getHp('ismManager.SystemOperation.fileManagement')
        },
        {
          value: 'route.archivedHistory',
          key: '5',
          hp: getHp('ismManager.SystemOperation.fileArchiveHistory')
        },
      ]
    }
  },
  watch: {
    '$route' (to, from) {
      // this.httpGetUserInfo(); // 这是我ajax获取用户信息的方法
      this.defaultIndex()
      this.handleSelect(this.defaultIndex())
    },
    '$store.state.app.systemOperationNum': function (newVal) {
      this.elMenu[1].num = newVal
    },
    '$store.state.app.systemWarnNum': function (newVal) {
      this.elMenu[0].num = newVal
    }
  },
  created () {
    // this.clickHistory()
    this.handleSelect(this.defaultIndex())
    this.getWarnNum()
    this.getFileNum()
  },
  methods: {
    getWarnNum () {
      getWarnList().toPromise().then(data => {
        this.elMenu[0].num = data.total
        this.$store.commit('app/SET_WARN_NUM', data.total)
        this.elMenu[0].num = this.$store.getters.systemWarnNum
      })
    },
    getFileNum () {
      getFileOperationInfoWaitDealWithByPage().toPromise().then(data => {
        this.$store.commit('app/SET_OPERATION_NUM', data.total)
        this.elMenu[1].num = this.$store.getters.systemOperationNum
      })
    },
    defaultIndex () {
      const allMenu = this.elMenu.filter(i => i.hp)
      if (allMenu.length > 0) {
        if (sessionStorage.getItem('ws-pf_systemFile')) {
          for (let i = 0; i < allMenu.length; i++) {
            if (allMenu[i].hp && allMenu[i].key === sessionStorage.getItem('ws-pf_systemFile')) {
              return sessionStorage.getItem('ws-pf_systemFile')
            }
          }
          return allMenu[0].key
        } else {
          for (let i = 0; i < allMenu.length; i++) {
            if (allMenu[i].hp) {
              return allMenu[i].key
            }
          }
        }
      }
      return ''
    },
    // 点击标签跳转
    handleSelect (key) {
      // sessionStorage.setItem('ws-pf_myAuthority', key)
      if (key === '1') {
        this.$router.push({ name: 'warn' })
        sessionStorage.setItem('ws-pf_systemFile', key)
      } else if (key === '2') {
        this.$router.push({ name: 'systemOperation' })
        sessionStorage.setItem('ws-pf_systemFile', key)
      } else if (key === '3') {
        this.$router.push({ name: 'myFile' })
        sessionStorage.setItem('ws-pf_systemFile', key)
      } else if (key === '4') {
        this.$router.push({ name: 'fileManage' })
        sessionStorage.setItem('ws-pf_systemFile', key)
      } else if (key === '5') {
        this.$router.push({ name: 'archivedHistory' })
        sessionStorage.setItem('ws-pf_systemFile', key)
      }
    },
    // // 记住切换选择
    // clickHistory() {
    //   if (sessionStorage.getItem('ws-pf_myAuthority') === null) {
    //     this.activeIndex = '1';
    //   } else {
    //     this.activeIndex = sessionStorage.getItem('ws-pf_myAuthority')
    //   }
    //   this.handleSelect(this.activeIndex)
    // }
  }
}
</script>

<style lang="scss" scoped>
.frameTitle {
  padding-left: 10px;
  background-color: #fff;
  border-top: 1px solid #eeeeee;
}

.frameCenter {
  background-color: #fff;

  padding: 0px 15px 15px 15px;
  height: calc(100vh - 100px);
  overflow-y: auto;
}

// .management {
//   background: #fff;
//   // margin-right:100px;
// }

// .title-line-height {
//   height: 50px;
// }

// .svg-icon-class {
//   float: left;
//   font-size: 20px;
//   color: #1d6ced;
//   margin: 16px 0 0 16px;
// }
</style>

<!--<template>
  <div>
    <div class="tabsMain">
      <div class="navBar">
        <router-link class="navBtn" :to="{name:'warn'}" v-if="permissionIf">{{ $t('route.warn') }}</router-link>
        <router-link class="navBtn" :to="{name:'fileManage'}" v-if="permission">{{ $t('route.fileManage') }}</router-link>
        <router-link class="navBtn" :to="{name:'systemOperation'}" v-if="permission">{{ $t('route.systemOperation') }}</router-link>
        <router-link class="navBtn" :to="{name:'archivedHistory'}" v-if="permission">{{ $t('route.archivedHistory') }}</router-link>
      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
import {
  getHp
} from '@/utils/getHasPermission';
export default {
  data() {
    return {
      permission: getHp('configuration.announcementManagement.announcementType'),
      permissionIf: getHp('configuration.announcementManagement.announcement')
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
  .active{
    color: #1D6CED !important;
  }
  .tabsMain .navBar{
    width: 100%;
  }
</style>-->