rongxing-vue/src/views/main-navbar.vue

<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <!--      @click="$router.push({ name: 'home' })"-->
      <h1 class="site-navbar__brand">
        <el-menu
          class="site-navbar__menu"
          mode="horizontal">
          <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
            <icon-svg name="zhedie"></icon-svg>
          </el-menu-item>
        </el-menu>
        <a class="site-navbar__brand-lg" href="javascript:;">{{pageLanguage.XjSysManage}}</a>
        <a class="site-navbar__brand-mini" href="javascript:;">{{pageLanguage.abbreviation}}</a>
      </h1>

    </div>

    <div class="site-navbar__body clearfix">

      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <el-menu-item v-if="isAuth('review:show')" class="site-navbar__avatar" index="1">
         <span class="el-dropdown-link">
            <router-link :to="{path:'purchaseorder-procurementReview',query:{'': ''}}">
              工具待审核
            </router-link>
            <el-badge isAuth :value="pending.pendingReview" class="item" style="margin-top: 10px"/>
          </span>
        </el-menu-item>
        <el-menu-item class="site-navbar__avatar" index="2">
                      <span style="    color: #909399;" @click="helpFileList()">
                        帮助
                        <!--                             <icon-svg name="help"  style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>-->
                      </span>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">{{ pageLanguage.setting }}</template>
          <el-submenu index="2-1">
            <template slot="title">{{pageLanguage.languageSetting}}</template>
            <el-menu-item index="2-1-1" :key="index" :value="item.languageCode" v-for="(item,index) in languageList "
                          @click.native="switch_the_language(item.languageCode)">{{item.languageName}}
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2-2">
            <template slot="title">{{ pageLanguage.userSetting }}</template>
            <el-menu-item index="2-2-1" @click.native="updatePasswordHandle()">{{ pageLanguage.updatePassword }}
            </el-menu-item>
            <el-menu-item index="2-2-2" @click.native="updateLanguageHandle()">{{pageLanguage.updateDefaultLanguage}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="2-3" @click="$router.push({ name: 'theme' })">{{ pageLanguage.cssSetting }}
          </el-menu-item>
          <el-menu-item index="2-4" @click="printList()">{{ pageLanguage.printSetting }}</el-menu-item>
        </el-submenu>
        <el-menu-item class="site-navbar__avatar" index="4">
          <el-dropdown :show-timeout="0" placement="bottom">
                      <span class="el-dropdown-link">
                        <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
                      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>

    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <!-- 弹窗, 修改默认语言 -->
    <update-language v-if="updateLanguageVisible" ref="updateLanguage"></update-language>
    <!-- 文件列表 -->
    <FileListView ref="fileListView" v-if="helpFileVisible"></FileListView>
    <!-- 打印机列表 -->
    <UserPrintList ref="userPrintList" v-if="printListVisible"></UserPrintList>
  </nav>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import UpdateLanguage from './main-navbar-update-language'
  import {clearLoginInfo} from '@/utils'
  import FileListView from './modules/common/file-list-view'
  import UserPrintList from './modules/common/user-print-list'
  import {
    searchFunctionButtonList,
    saveButtonList,
    searchSysLanguage,
  } from "@/api/sysLanguage.js"

  import {
    getReviewToolCount

  } from '@/api/purchaseorder/procurementReview.js'

  export default {
    data() {
      return {
        updatePassowrdVisible: false,
        updateLanguageVisible: false,
        helpFileVisible: false,
        printListVisible: false,
        message: this.$t('language.name'),
        languageList: [],
        pageLanguage: {
          XjSysManage: '旭捷管理系统',
          abbreviation: '旭捷',
          setting: '设置',
          languageSetting: '语言设置',
          userSetting: '用户设置',
          updatePassword: '修改密码',
          updateDefaultLanguage: '修改默认语言',
          cssSetting: '主提设置',
          printSetting: '打印设置',
        },
        // 导出 end
        pageLanguageList: [
          {
            functionId: "systemInformation",
            languageValue: '旭捷管理系统',
            objectId: 'XjSysManage',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '首页',
            objectId: 'homePage',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '旭捷',
            objectId: 'abbreviation',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '设置',
            objectId: 'setting',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '语言设置',
            objectId: 'languageSetting',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '用户设置',
            objectId: 'userSetting',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '修改密码',
            objectId: 'updatePassword',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '修改用户语言',
            objectId: 'updateDefaultLanguage',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '主题设置',
            objectId: 'cssSetting',
            objectType: "label",
            tableId: "systemInformation"
          },
          {
            functionId: "systemInformation",
            languageValue: '打印设置',
            objectId: 'printSetting',
            objectType: "label",
            tableId: "systemInformation"
          }
        ],
        pending: {
          pendingReview: 0,
          pendingSum: 0,
        },
        queryToolReview: {
          site: this.$store.state.user.site,
          userId: this.$store.state.user.name,
          strUserId: this.$store.state.user.id,
        },
        toolReviewTimer: null,
      }
    },
    watch: {
      pending: {
        deep: true,
        handler: function (newV, oldV) {
          this.pending.pendingSum = this.pending.pendingReview
        }
      },
    },
    components: {
      UpdatePassword,
      UpdateLanguage,
      FileListView,
      UserPrintList
    },
    computed: {
      navbarLayoutType: {
        get() {
          return this.$store.state.common.navbarLayoutType
        }
      },
      sidebarFold: {
        get() {
          return this.$store.state.common.sidebarFold
        },
        set(val) {
          this.$store.commit('common/updateSidebarFold', val)
        }
      },
      mainTabs: {
        get() {
          return this.$store.state.common.mainTabs
        },
        set(val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      userName: {
        get() {
          return this.$store.state.user.userDisplay
        }
      }
    },
    activated() {

    },
    mounted() {
      this.toolReviewTimer = setInterval( this.getReviewToolCount, 1000*60);
    },
    beforeDestroy() {
      clearInterval(this.toolReviewTimer);
    },
    methods: {
      // 获取待审核的是工具申请单数量
      getReviewToolCount() {
        getReviewToolCount(this.queryToolReview).then(({data}) => {
          if (data.code == 0) {
            this.pending.pendingReview = data.data
          }
        })
      },
      // 打印机列表
      printList() {
        this.printListVisible = true;
        this.$nextTick(() => {
          this.$refs.userPrintList.init()
        })
      },
      // 帮助文档列表
      helpFileList() {
        let fileMappingDto = {
          fileId: '',
          fileType: '功能帮助文档',
          orderRef1: this.$route.meta.menuId,
          orderRef2: '',
          orderRef3: '',
        }
        this.helpFileVisible = true;
        this.$nextTick(() => {
          this.$refs.fileListView.init(fileMappingDto)
        })
      },
      // 获取多语言列表
      getLanguageList() {
        searchSysLanguage({languageCode: this.$i18n.locale}).then(({data}) => {
          this.languageList = data.rows
        })
      },
      // 获取页面多语言数据
      getFunctionButtonList() {
        let queryButton = {
          functionId: 'systemInformation',
          tableId: 'systemInformation',
          languageCode: this.$i18n.locale,
          objectType: 'label'
        }
        searchFunctionButtonList(queryButton).then(({data}) => {
          if (data.code === 0) {
            this.pageLanguage = data.data
          } else {
            saveButtonList(this.pageLanguageList).then(({data}) => {
              this.getFunctionButtonList()
            })
          }
        })
      },
      // 注3：增加语言切换函数
      switch_the_language(val) {
        localStorage.setItem('locale', val)
        location.reload()
      },
      // 修改密码
      updatePasswordHandle() {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 修改用户默认语言
      updateLanguageHandle() {
        this.updateLanguageVisible = true
        this.$nextTick(() => {
          this.$refs.updateLanguage.init()
        })
      },
      // 退出
      logoutHandle() {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.$router.push({name: 'login'})
            }
          })
        }).catch(() => {
        })
      }
    },
    created() {
      this.getLanguageList()
      this.getFunctionButtonList()
      this.getReviewToolCount()
    }
  }
</script>

<style lang="scss">
  .icon-svg {
    width: 2em;
  }

  .el-menu--collapse .el-menu .el-submenu, .el-menu--popup, .el-menu-item {
    min-width: 50px !important;
  }

  .site-navbar__brand-lg, .site-navbar__brand-mini {
    margin: 0 5px;
    color: #fff;
    margin-left: -45px;
  }

  .el-menu--horizontal > .el-menu-item {
    color: #3b4249;
  }

</style>