longchuang-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:;">
          <img class="site-navbar__brand-logo" src="~@/assets/img/lc.png" alt="龙闯电梯">
        </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">
<!--         <span @click="favoriteFunction()">-->
<!--         <icon-svg :name="this.$store.state.user.favorite?'xiangqufill':'xiangqu'" ></icon-svg>-->
<!--        </span>-->
        <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 class="site-navbar__avatar" index="0">
<!--          <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" style="margin-top: 11px" class="sl-svg"></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-3" @click="revisionModal">{{ pageLanguage.revisionSetting }}</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 custom-avatar">
                        <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>

    <el-dialog append-to-body top="26vh" :show-close="false" :close-on-click-modal="true" v-drag :visible.sync="revisionModalFlag" width="335px">
      <div slot="title" style="text-align: center">
        <img src="~@/assets/img/ckp.png" style="width: 115px;height: 45px;vertical-align: middle;object-fit: contain;">
<!--        <img src="~@/assets/img/avatar.png" style="width: 115px;height: 45px;vertical-align: middle;object-fit: contain;">-->
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div class="aaa">
          <div>开发商</div>
          <div>开发商邮箱</div>
          <div>更新时间</div>
          <div>版本</div>
        </div>
        <div style="text-align: right" class="aaa">
          <div>{{ revisionData.company }}</div>
          <div>{{ revisionData.installPath }}</div>
          <div>{{ revisionData.regDate }}</div>
          <div>{{ revisionData.revisionNo }}</div>
        </div>
      </div>
<!--      <el-form :inline="true" label-position="top" style="margin-left: 7px;">-->
<!--        <el-form-item label=" ">-->
<!--          开发商: {{ revisionData.company }}-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-form :inline="true" label-position="top" style="margin-left: 7px;">-->
<!--        <el-form-item label=" ">-->
<!--          开发商邮箱: {{ revisionData.installPath }}-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-form :inline="true" label-position="top" style="margin-left: 7px;">-->
<!--        <el-form-item label=" ">-->
<!--          版本: {{ revisionData.revisionNo }}-->
<!--        </el-form-item>-->
<!--      </el-form>-->
    </el-dialog>

    <!-- 动态列    -->
    <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 column from "./modules/common/column";
import {
  searchFunctionButtonList,
  saveButtonList,
  getRevisionInformation, // 获取版本信息
} from "@/api/sysLanguage.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
import {EventBus} from "../main";
export default {
  inject: ['refresh'],
  data() {
    return {
      favorite: false,
      // 是否收藏
      visible: false,
      updatePassowrdVisible: false,
      updateLanguageVisible: false,
      helpFileVisible: false,
      printListVisible: false,
      message: this.$t('language.name'),
      languageList: [],
      pageLanguage: {
        XjSysManage: 'Checkpoint',
        abbreviation: 'Checkpoint',
        setting: '设置',
        languageSetting: '语言设置',
        userSetting: '用户设置',
        updatePassword: '修改密码',
        updateDefaultLanguage: '修改默认语言',
        cssSetting: '主题设置',
        printSetting: '打印设置',
        revisionSetting: '版本说明'
      },
      // 导出 end
      pageLanguageList: [
        {
          functionId: "systemInformation",
          languageValue: '旭捷管理系统',
          objectId: 'XjSysManage',
          objectType: "label",
          tableId: "systemInformation"
        },
        {
          functionId: "systemInformation",
          languageValue: '首页',
          objectId: 'homePage',
          objectType: "label",
          tableId: "systemInformation"
        },
        {
          functionId: "systemInformation",
          languageValue: 'Checkpoint',
          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: 'revisionSetting',
          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,
      revisionData: {
        identityNo: '',
        company: '',
        regDate: '',
        serverName: '',
        revisionNo: '',
        installPath: '',
        registerNo: '',
        serialNo: '',
        registerMark: '',
        applicationName: '',
        customerIdentificationId: ''
      },
      revisionModalFlag: false
    }
  },
  watch: {
    pending: {
      deep: true,
      handler: function (newV, oldV) {
        this.pending.pendingSum = this.pending.pendingReview
      }
    },
    $route: {
      deep: true,
      handler: function (newV, oldV) {
        this.favoriteIsOk();
      }
    },
  },
  components: {
    UpdatePassword,
    UpdateLanguage,
    FileListView,
    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() {

  },

  methods: {
    // 查询版本信息
    revisionModal () {
      getRevisionInformation().then(({data}) => {
        if (data && data.code === 0) {
          this.revisionData = data.rows
          this.revisionModalFlag = true
        }
      })
    },

    // 打开页面设置
    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()
      })
    },

    // 帮助文档列表
    helpFileList() {
      let fileMappingDto = {
        fileId: '',
        fileType: '功能帮助文档',
        orderRef1: this.$route.meta.menuId,
        orderRef2: '',
        orderRef3: '',
      }
      this.helpFileVisible = true;
      this.$nextTick(() => {
        this.$refs.fileListView.init(fileMappingDto)
      })
    },
    // 获取多语言列表
    getLanguageList() {
      const isEn = this.$i18n.locale === 'en'
      this.languageList = [
        { languageCode: 'cn', languageName: isEn ? 'Chinese' : '中文' },
        // { languageCode: 'en', languageName: isEn ? 'English' : '英文' }
      ]
    },
    // 获取页面多语言数据
    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(`确定进行[退出]操作?`, '提示', {
        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}) => {
        this.favorite = false
        for (let i = 0; i < data.list.length; i++) {
          if (!data.list[i]){
            continue
          }
          if(this.$route.meta.menuId==data.list[i].menuId){
            this.favorite = true
            // flag=true;
          }
        }

      })
    },
    // 收藏 OR 取消收藏
    favoriteFunction() {
      if(this.$route.meta.menuId==null||this.$route.meta.menuId==''){
        this.$message.error( '首页不需要收藏！')
        return false
      }
      let userFavorite = {
        userId: this.$store.state.user.id,
        functionId: this.$route.meta.menuId,
      }
      if (this.favorite) {
        // 取消收藏
        this.$confirm(`确定取消收藏`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeUserFavorite(userFavorite).then(({data}) => {
            this.$message.success(data.msg)
            this.favorite = false
            EventBus.$emit('updateFavoriteList');
          })
        })
      } else {
        // 收藏
        saveUserFavorite(userFavorite).then(({data}) => {
          this.$message.success(data.msg)
          this.favorite = true
          EventBus.$emit('updateFavoriteList');
        })
      }

    },
  },
  created() {
    this.getLanguageList()
    this.getFunctionButtonList()
    this.favoriteIsOk()
  }
}
</script>

<style scoped 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: #f7fffe;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
}

.site-navbar__brand-lg {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
}

.site-navbar__brand-mini {
  font-size: 16px;
}

.site-navbar__brand-logo {
  width: auto;
  max-width: 136px;
  object-fit: contain;
}
.site-navbar__brand {
  background-color: #263238;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.el-menu--horizontal > .el-menu-item {
  color: #f5f7f9;
}
.aaa div{
  margin-top: 10px;
}
.aaa {
  margin-bottom: 15px;
}

.custom-avatar img {
  width: 105px;
  height: 35px;
}
</style>