Jtem-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:;">旭捷-MES</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 class="site-navbar__avatar" index="2">
          <span>{{siteNow}}</span>
        </el-menu-item>
<!--        <el-menu-item class="site-navbar__avatar" index="2">-->
<!--                     <span @click="favoriteFunction()">-->
<!--         <icon-svg :name="favorite?'xiangqufill':'xiangqu'"></icon-svg>-->
<!--        </span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item class="site-navbar__avatar" index="2">-->
<!--                      <span style="    color: #909399;" @click="helpFileList()">-->
<!--                        帮助-->
<!--                        &lt;!&ndash;                             <icon-svg name="help"  style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>&ndash;&gt;-->
<!--                      </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>
  </nav>
</template>

<script>
  import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
  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 {
    searchFunctionButtonList,
    saveButtonList,
    searchSysLanguage,
  } from "@/api/sysLanguage.js"
  import pubsub from 'pubsub-js'
  import {
    getSiteData,
  } from "@/api/base/site.js"
  export default {
    data() {
      return {
        siteNow:'',
        updatePassowrdVisible: false,
        updateLanguageVisible: false,
        helpFileVisible: false,
        favorite: 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,
    },
    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() {
      pubsub.subscribe('favorite', (msgName, data) => {
        this.favoriteIsOk()
      })
    },
    beforeDestroy() {

    },
    methods: {
      // 打印机列表
      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(() => {
        })
      },
      // 校验用户是否收藏
      favoriteIsOk() {
        let userFavorite = {
          userId: this.$store.state.user.id,
          languageCode: this.$i18n.locale
        }
        userFavoriteList(userFavorite).then(({data}) => {
          let size = data.list.filter(item => item.menuId == this.$route.meta.menuId).length;
          if (size > 0) {
            this.favorite = true
          } else {
            this.favorite = false
          }
        })
      },
      // 收藏 OR 取消收藏
      async favoriteFunction() {
        let userFavorite = {
          userId: this.$store.state.user.id,
          functionId: this.$route.meta.menuId,
        }
        if (this.favorite) {
          // 取消收藏
          await this.$confirm(`确定取消收藏`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            removeUserFavorite(userFavorite).then(({data}) => {
              this.$message.success(data.msg)
              this.favorite = false
              pubsub.publish('userFavorite')
            })
          })
        } else {
          // 收藏
          await saveUserFavorite(userFavorite).then(({data}) => {
            this.$message.success(data.msg)
            this.favorite = true
            pubsub.publish('userFavorite')
          })
        }
      },
      getNowSite(){
        let data={};
        getSiteData(data).then(({data}) => {
          if(data.rows.length>0){
            for (let i = 0; i <data.rows.length ; i++) {
              if(data.rows[i].siteID==this.$store.state.user.site){
                this.siteNow="当前工厂："+data.rows[i].siteID+" - "+data.rows[i].siteName
              }
            }
          }
        })
      }
    },
    created() {
      this.getLanguageList()
      this.getFunctionButtonList()
      this. getNowSite()
    }
  }
</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>