wms-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:;">WMS</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="1">
         <span class="el-dropdown-link" @click="userSetting">
            <icon-svg name="editTable"  style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>
          </span>
        </el-menu-item>
        <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>

    <!-- 动态列    -->
    <column v-if="visible" ref="column" @refreshData="getTableUserColumn" v-drag></column>
  </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 column from "./modules/common/column";
import {
  searchFunctionButtonList,
  saveButtonList,
  searchSysLanguage,
} from "@/api/sysLanguage.js"

export default {
  inject: ['refresh'],
  data() {
    return {
      visible: false,
      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,
    column,
  },
  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() {
  },
  beforeDestroy() {
    clearInterval(this.toolReviewTimer);
  },
  methods: {
    // 打开页面设置
    userSetting() {
      this.visible = true;
      let queryTable = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        languageCode: this.$i18n.locale,
        tableId: '',
      }
      this.$nextTick(() => {
        this.$refs.column.init(queryTable);
      })
    },
    getTableUserColumn() {
      this.$nextTick(() => {
        this.refresh()
      })
    },
    // 打印机列表
    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
        }
      })
    },
    // 注3：增加语言切换函数
    switch_the_language(val) {
      localStorage.setItem('locale', val)
      this.$i18n.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()
  }
}
</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>