CCL_QMS/cclqms-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-item class="site-navbar__switch menu-toggle-btn" index="0-1" @click="toggleMenuMode" :title="menuModeTitle">-->
<!--            <i class="el-icon-refresh"></i>-->
<!--          </el-menu-item>-->
        </el-menu>
<!--        brand-gradient-text-->
        <a class="site-navbar__brand-lg brand-gradient-text" href="javascript:;" v-if="store.state.common.effectsEnabled==='Y'">{{ pageLanguage.XjSysManage }}</a>

        <a class="site-navbar__brand-lg " href="javascript:;" v-if="store.state.common.effectsEnabled==='N'">{{ 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 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()">
                        {{ $t('main.help') }}
                        <!--                             <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()">{{ $t('main.logout') }}</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,
} from "@/api/sysLanguage.js"

import {
  getReviewToolCount

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

export default {
  inject: ['refresh'],
  data() {
    return {
      visible: false,
      updatePassowrdVisible: false,
      updateLanguageVisible: false,
      helpFileVisible: false,
      printListVisible: false,
      message: this.$t('language.name'),
      languageList: [],
      pageLanguage: {
        XjSysManage: this.$t('main.appName'),
        abbreviation: this.$t('main.abbreviation'),
        setting: this.$t('main.setting'),
        languageSetting: this.$t('main.languageSetting'),
        userSetting: this.$t('main.userSetting'),
        updatePassword: this.$t('main.updatePassword'),
        updateDefaultLanguage: this.$t('main.updateDefaultLanguage'),
        cssSetting: this.$t('main.cssSetting'),
        printSetting: this.$t('main.cssSetting'),
      },
      // 导出 end
      pageLanguageList: [
        {
          functionId: "systemInformation",
          languageValue: 'CCLQMS管理系统',
          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: {
    store () {
      return store
    },
    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
      }
    },
    useHoverMenu: {
      get() {
        return this.$store.state.common.useHoverMenu
      },
      set(val) {
        this.$store.commit('common/updateUseHoverMenu', val)
      }
    },
    menuModeIcon() {
      return this.useHoverMenu ? 'zhedie' : 'zhedie'
    },
    menuModeTitle() {
      return this.useHoverMenu ? this.$t('main.menuMode.toClassic') : this.$t('main.menuMode.toHover')
    }
  },
  activated() {

  },
  mounted() {
    this.toolReviewTimer = setInterval(this.getReviewToolCount, 1000 * 60);
  },
  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()
      })
    },
    // 获取待审核的是工具申请单数量
    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() {
      this.languageList = [
        { languageCode: 'cn', languageName: this.$t('main.languageName.cn') },
        { languageCode: 'en', languageName: this.$t('main.languageName.en') }
      ]
    },
    // 获取页面多语言数据
    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)
      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(this.$t('main.logoutDialog.message'), this.$t('main.common.tip'), {
        confirmButtonText: this.$t('main.common.confirm'),
        cancelButtonText: this.$t('main.common.cancel'),
        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(() => {
      })
    },
    // 切换菜单模式
    toggleMenuMode() {
      this.useHoverMenu = !this.useHoverMenu
      this.$message.success(this.useHoverMenu ? this.$t('main.menuMode.switchedHover') : this.$t('main.menuMode.switchedClassic'))
    }
  },
  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;
}

/* 菜单切换按钮悬停显示效果 */
.menu-toggle-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateX(-10px);
}

.site-navbar__menu:hover .menu-toggle-btn,
.menu-toggle-btn:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 为了更好的用户体验，也可以在整个导航栏悬停时显示 */
.site-navbar__brand:hover .menu-toggle-btn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

</style>