ccl_plm-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:;">{{'CCL PLM'}}</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 @click="siteModel()">{{siteNow}}</span>
        </el-menu-item>
        <el-menu-item class="site-navbar__avatar" index="0">
          <span @click="favoriteFunction()">
         <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>
        </span>
        </el-menu-item>
        <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="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-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/ccl.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 title="变更工厂" :close-on-click-modal="false" v-drag :visible.sync="siteFlag" width="200px" :modal="false">
      <el-form :inline="true" label-position="top" style="margin-left: 24px">
        <el-form-item :label="'当前账号'">
          <el-input v-model="$store.state.user.name" disabled style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item :label="'工厂'">
          <el-select filterable v-model="site" style="width: 130px" clearable>
            <el-option :label="item.siteName" :value="item.siteID" v-for="(item,index) in siteList "
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
            <el-footer style="height:30px;margin-top: 5px;text-align:center">
              <el-button type="primary" @click="changeSite">确定</el-button>
              <el-button type="primary" @click="siteFlag = false">取消</el-button>
            </el-footer>
    </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,
  searchSysLanguage,
} from "@/api/sysLanguage.js"

import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
import {
  getSiteData,
  getUserAccessSite,
} from "@/api/base/site.js"
export default {
  inject: ['refresh'],
  data() {
    return {
      siteNow:'',
      favorite: false,
      route:this.$route.meta.menuId,
      visible: false,
      updatePassowrdVisible: false,
      updateLanguageVisible: false,
      helpFileVisible: false,
      site:'',
      siteList:'',
      siteFlag:false,
      message: this.$t('language.name'),
      languageList: [],
      pageLanguage: {
        XjSysManage: '旭捷管理系统',
        abbreviation: '旭捷',
        setting: '设置',
        languageSetting: '语言设置',
        userSetting: '用户设置',
        updatePassword: '修改密码',
        updateDefaultLanguage: '修改默认语言',
        cssSetting: '主题设置',

      },
      // 导出 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"
        }
      ],
      pending: {
        pendingReview: 0,
        pendingSum: 0,
      },

    }
  },
  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() {

  },
  beforeDestroy() {

  },
  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()
      })
    },


    // 帮助文档列表
    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)
      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() {
      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
          })
        })
      } else {
        // 收藏
        saveUserFavorite(userFavorite).then(({data}) => {
          this.$message.success(data.msg)
          this.favorite = true
        })
      }

    },
    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
            }
          }
        }
      })
    },
    siteModel(){
      this.site=this.$store.state.user.site
      getUserAccessSite({username:this.$store.state.user.name}).then(({data})=>{
        this.siteList=data.rows
      })
      this.siteFlag=true
    },
    changeSite(){
      if(this.site==null||this.site===''){
        this.$message.error( '工厂未选择！')
        return false
      }
      //修改工厂 2个缺一不可
      this.$store.commit('user/updateSite', this.site)
      localStorage.setItem('accessSite', this.site)
      this.siteFlag=false
      this.getNowSite()
      this.$nextTick(function () {
        // 在 DOM 更新之后执行的操作
        window.location.reload()
      });
    },
  },
  created() {
    this.getLanguageList()
    this.getFunctionButtonList()
    this. getNowSite()
  }
}
</script>

<style lang="scss">
.icon-svg {
  width: 2em;
}
.site-sidebar{
  overflow-y: auto;
}

.site-sidebar__inner{
  overflow-y: visible;
}

.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: -25px;
  font-size: 18px;
}

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

</style>