@hbisty/qj-common 5.0.4

package/src/views/layout/components/Navbar.vue

@@ -0,0 +1,695 @@
+<template>
+  <div>
+    <el-menu class="navbar" mode="horizontal">
+      <!-- <hamburger
+        class="hamburger-container"
+        :toggleClick="toggleSideBar"
+        :isActive="sidebar.appNavOpen"
+      ></hamburger>
+      <breadcrumb></breadcrumb>-->
+      <slot></slot>
+      <div class="navbar-title">
+        <!-- <i class="icon-liebiaoxiangyou iconfont"></i> -->
+        <ul class="flex">
+          <li>{{ firstLevelMenu || '首页' }}</li>
+          <li v-if="secondLevelMenu">
+            <i>/</i>
+            {{ secondLevelMenu }}
+          </li>
+          <li v-if="thirdLevelMenu">
+            <i>/</i>
+            {{ thirdLevelMenu }}
+          </li>
+        </ul>
+      </div>
+      <div class="nav-head">
+        <el-popover placement="bottom-end" width="100" trigger="click">
+          <ul class="theme-color-box clearfix">
+            <li @click="themeClick('bda16f')" :class="[activeColor == 'bda16f' ? 'active' : '']"
+              :style="{ background: '#bda16f' }"></li>
+            <li @click="themeClick('2c4158')" :class="[activeColor == '2c4158' ? 'active' : '']"
+              :style="{ background: '#2c4158' }"></li>
+          </ul>
+          <!-- <el-button class="theme-box" slot="reference">主题</el-button> -->
+        </el-popover>
+
+        <div class="user_name">
+          <p class="user-bar">
+            <!-- <i class="user-icon"></i> -->
+            <!-- <span class="user_line"></span> -->
+            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
+            <span class="user-remark" v-if="proappRemark && proappRemark.length > 0">
+              <el-popover placement="bottom" width="300" trigger="hover">
+                <p>{{ proappRemark[0] }}</p>
+                <img :src="proappRemark[1]" alt="" width="300px" />
+                <i slot="reference">{{ proappRemark[0] }} </i>
+              </el-popover>
+            </span>
+
+            <!-- <span class="user_line"></span> -->
+            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
+            <el-badge class="msg-icon" v-if="proappEnvLayout && proappEnvLayout.tenantCode == '2021122100000001'" is-dot
+              :hidden='unreadMessageNum == 0'>
+              <i class="el-icon-bell" @click="jumpToPage"></i>
+            </el-badge>
+            <span class="user-name" @click="lookInfo">
+              <i style="padding-right: 10px">{{ this.merberCompname }}</i>
+              {{ $store.state.user.name }}
+            </span>
+          </p>
+        </div>
+        <!-- <i class="set-icon"></i>
+        <i class="info-icon"></i>-->
+        <!-- <span class="spl_line"></span> -->
+        <div class="log_uot">
+          <i class="icon-tuichu1 iconfont" @click="logout"></i>
+          <!-- <span class="logout-text" @click="logout">退出</span>  -->
+        </div>
+      </div>
+      <el-dialog title="登录账户信息" :visible.sync="centerDialogVisible" width="23%" center>
+        <el-form label-width="100px" style="padding-bottom: 20px;">
+          <el-form-item label="登录名：">
+            {{ name }}
+          </el-form-item>
+          <el-form-item label="手机号：">
+            {{ phone | hidePhone }}
+          </el-form-item>
+          <el-form-item label="所属公司：">
+            {{ compony }}
+          </el-form-item>
+          <el-form-item label="角色：">
+            {{ role }}
+          </el-form-item>
+        </el-form>
+        <!-- <div>联系人：</div> -->
+        <!-- <img :src="proappRemark[1]" alt=""> -->
+        <!-- <div class="loginInfo-Block-left">
+          <div>登录名：</div>
+          <div>手机号：</div>
+          <div>所属公司：</div>
+          <div>角色：</div>
+        </div>
+        <div class="loginInfo-Block-right">
+          <div>{{ name }}</div>
+          <div>{{ phone | hidePhone }}</div>
+          <div>{{ compony }}</div>
+          <div>{{ role }}</div>
+        </div> -->
+      </el-dialog>
+      <!-- <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            Home
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+      </el-dropdown>-->
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Breadcrumb from '#/components/Breadcrumb';
+import Hamburger from '#/components/Hamburger';
+import { getUserserviceInfo, getSSOAuthInfo } from '../../../api/login';
+import axios from 'axios';
+import qs from 'qs';
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+  },
+  props: {
+    firstLevelMenu: String,
+    secondLevelMenu: String,
+    thirdLevelMenu: String,
+  },
+  data() {
+    return {
+      unreadMessageNum: 0,
+      activeColor: '2c4158',
+      menuList: '',
+      menuCode: '',
+      merberCompname: '',
+      centerDialogVisible: false,
+      name: '',
+      phone: '',
+      compony: '',
+      role: '',
+      type: null,
+      ssoSubscriptionKey: '',
+      proappEnvLayout: '',
+      proappRemark: [],
+
+      gapTime: '',
+      beforeUnloadTime: '',
+      secDomainName: null,
+      commonShowMenuAction: ''
+    };
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+  created() {
+    this.merberCompname = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).merberCompname : '';
+    this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? JSON.parse(window.sessionStorage.getItem('proappEnvLayout')) : '';
+
+    if (this.proappEnvLayout && this.proappEnvLayout.proappRemark) {
+      this.proappRemark = this.proappEnvLayout.proappRemark.split('>');
+    }
+
+    console.log(window.location.href, 'window.location.href本地路由');
+    if (window.location.href.indexOf('listDMkf') == -1) {
+      if (this.proappEnvLayout.tenantCode === '2019071800001392') {  // tenantCode 判断
+        let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
+        getUserserviceInfo({
+          userId: userId,
+        }).then((res) => {
+          // console.log(res)
+          this.name = res.userRelname ? res.userRelname : res.userName;
+          this.phone = res.userOcode ? res.userOcode : res.userPhone;
+          this.compony = res.userinfoCompname;
+          this.role = res.userRoleName;
+        });
+      } else {
+        let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
+        getUserserviceInfo({
+          userId: userId,
+        }).then((res) => {
+          // console.log(res)
+          this.name = res.userNickname ? res.userNickname : res.userName;
+          this.phone = res.userPhone;
+          this.compony = res.userinfoCompname;
+          this.role = res.userRoleName;
+        });
+      }
+    }
+
+    if (this.proappEnvLayout && this.proappEnvLayout.tenantCode == '2021122100000001') this.watchLocalStorage()
+  },
+  mounted() {
+    // 监听 beforeunload 离开或者刷新页面触发
+    window.addEventListener('beforeunload', (e) => this.beforeunloadFn(e));
+    // 监听 unload
+    window.addEventListener('unload', (e) => this.unloadFn());
+
+    this.type = this.$route.query.type || null;
+    this.secDomainName = sessionStorage.getItem('secDomainName') ? sessionStorage.getItem('secDomainName') : null;
+  },
+  filters: {
+    hidePhone: function (value) {
+      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; //判断为手机号的正则
+      if (!myreg.test(value)) {
+        return value;
+      } else {
+        return value.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
+      }
+    },
+  },
+  methods: {
+    /**
+     * 监听保存到本地的未读消息数量用来显示角标
+     */
+    watchLocalStorage() {
+      // 监听localStorage的变化
+      window.addEventListener('storage', event => {
+        if (event.key === 'unreadMessageNum') {
+          // 处理数据变化的逻辑
+          this.unreadMessageNum = Number(event.newValue)
+        }
+      });
+    },
+    /**
+     * 跳转到消息列表页面
+     */
+    jumpToPage() {
+      location.href = '/paas/b2b-bus-pc-ayd/index.html#/msgList'
+    },
+    /**
+     * beforeunload function
+     */
+    beforeunloadFn() {
+      // 记录当前时间
+      this.beforeUnloadTime = new Date().getTime();
+    },
+
+    /**
+     * unload function
+     */
+    unloadFn() {
+      this.gapTime = new Date().getTime() - this.beforeUnloadTime;
+      if (this.gapTime < 5) {
+        //请求退出接口
+        this.logout();
+      }
+    },
+
+    lookInfo() {
+      // 这边修改导航用户登陆信息按钮
+      // location.href = `${
+      //   location.origin
+      // }/paas/buyer-manager/index.html#/operatorInfo`;
+      this.centerDialogVisible = true;
+      // console.log("我被调用了北鼻")
+    },
+    toggleSideBar() {
+      this.$store.commit('TOGGLE_SIDEBAR_APPNAV');
+    },
+    logout() {
+      window.localStorage.removeItem('pohcode');
+      this.menuList = window.sessionStorage.getItem('menuList') ? window.sessionStorage.getItem('menuList') : '';
+      this.menuCode = window.sessionStorage.getItem('menuCode') ? window.sessionStorage.getItem('menuCode') : '';
+      this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? window.sessionStorage.getItem('proappEnvLayout') : '';
+      this.commonShowMenuAction = window.sessionStorage.getItem('commonShowMenuAction') ? window.sessionStorage.getItem('commonShowMenuAction') : ''
+      // 获取 SSO 登出配置
+      this.ssoLogout();
+    },
+
+    /**
+     * SSO 登出操作
+     */
+    ssoLogout() {
+      getSSOAuthInfo({ oauthEnvCode: 'out' }).then((res) => {
+        let logoutUrl = '';
+        let paramsArr = [];
+        if (res.rows && res.rows.length > 0) {
+          let configs = res.rows;
+          let params = '';
+          configs.forEach((el) => {
+            if (el.oauthEnvconfigName == 'baseUrl') {
+              this.ssoBaseUrl = el.oauthEnvconfigValue;
+            } else {
+              params += `${el.oauthEnvconfigName}=${el.oauthEnvconfigValue}&`;
+              paramsArr.push({ name: el.oauthEnvconfigName, value: el.oauthEnvconfigValue });
+            }
+          });
+
+          // 拼接登出地址
+          logoutUrl = `${this.ssoBaseUrl}?${params.substring(0, params.length - 1)}`;
+          // P&G SSO logout 需要iframe
+          if (JSON.parse(this.proappEnvLayout).proappCode != '063') {
+            try {
+              var iframe = document.createElement('<iframe name="ifr"></iframe>');
+            } catch (e) {
+              var iframe = document.createElement('iframe');
+              iframe.name = 'ifr';
+            }
+            iframe.src = logoutUrl;
+            iframe.style = 'display: none';
+            document.body.appendChild(iframe);
+          }
+        }
+        console.log('logout---->params---->', paramsArr);
+        this.paasLogout(paramsArr);
+      });
+    },
+
+    // 九洲云腾退出登录
+    iDsManagerLogout(paramsArr) {
+      //创建form表单
+      var temp_form = document.createElement('form');
+
+      temp_form.action = this.ssoBaseUrl;
+
+      //如需打开新窗口，form的target属性要设置为'_blank'
+
+      temp_form.target = '_self';
+
+      temp_form.method = 'post';
+
+      temp_form.style.display = 'none';
+
+      //添加参数
+      for (var item in paramsArr) {
+        var opt = document.createElement('textarea');
+
+        opt.name = paramsArr[item].name;
+
+        opt.value = paramsArr[item].value;
+
+        temp_form.appendChild(opt);
+      }
+
+      document.body.appendChild(temp_form);
+
+      //提交数据
+
+      temp_form.submit();
+    },
+
+    // Paas 登出操作
+    paasLogout(paramsArr) {
+      // 调用 Paas 登出接口
+      this.$store.dispatch('LogOut').then((res) => {
+        window.sessionStorage.clear();
+        window.sessionStorage.setItem('menuList', this.menuList);
+        window.sessionStorage.setItem('menuCode', this.menuCode);
+        window.sessionStorage.setItem('commonShowMenuAction', this.commonShowMenuAction)
+        this.$store.dispatch('GetAppRouter').then((reg) => {
+          window.sessionStorage.setItem('menuList', JSON.stringify(reg));
+        });
+
+        this.$store.commit('ADD_MENU', []);
+        console.log('logout---->params---->', JSON.parse(this.proappEnvLayout).proappCode);
+        // 九洲云腾登出操作
+        // if (JSON.parse(this.proappEnvLayout).proappCode === '063') {
+        //   this.iDsManagerLogout(paramsArr);
+        // } else {
+        let path = '';
+        if (this.proappEnvLayout && this.proappEnvLayout != null && this.proappEnvLayout != '') {
+          path = JSON.parse(this.proappEnvLayout).proappEnvIndexr;
+        } else {
+          path = '/paas/index/index.html';
+        }
+        console.log(path, window.location.origin, 'logout');
+        if (window.location.origin) {
+          //this.secDomainName
+          if (this.secDomainName && this.secDomainName != 'null' && this.secDomainName != window.location.origin) {
+            window.location.href = `${this.secDomainName}${path}`;
+          } else {
+            window.location.href = `${window.location.origin}${path}`;
+          }
+          //无论url是什么，强制刷新页面，另外reload()有true和false参
+          window.location.reload()
+        } else {
+          window.location.href = path;
+          window.location.reload()
+        }
+        // }
+      });
+    },
+
+    themeClick(color) {
+      this.activeColor = color;
+      this.$emit('themeClick', color);
+    },
+  },
+
+  destroyed() {
+    window.removeEventListener('beforeunload', (e) => this.beforeunloadFn());
+    window.removeEventListener('unload', (e) => this.unloadFn());
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flex {
+  display: flex;
+}
+
+.loginInfo-Block-left {
+  width: 39%;
+  height: 100%;
+  text-align: right;
+  display: inline-block;
+}
+
+.loginInfo-Block-left>div {
+  margin-bottom: 25px;
+}
+
+.loginInfo-Block-right {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+
+  img {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+.loginInfo-Block-right>div {
+  margin-bottom: 25px;
+}
+
+.theme-color-box {
+  li {
+    width: 40px;
+    height: 20px;
+    border: 1px solid #e0e0e0;
+    cursor: pointer;
+    float: left;
+    margin: 5px;
+    opacity: 0.3;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+}
+
+.user-bar {}
+
+.user-remark {
+  display: inline-block;
+  width: 530px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  float: left;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: right;
+  padding-right: 20px;
+  position: relative;
+}
+
+.user-name {
+  font-size: 14px;
+  // line-height: 30px;
+  // margin-top: -1px;
+  // display: inline-block;
+  float: right;
+
+  cursor: pointer;
+}
+
+.nav-head {
+  flex: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #bbbbbb;
+  margin-right: 15px;
+  align-items: center; // font-weight: normal;
+  // transition: all 10s linear;
+  // i {
+  //   display: inline-block;
+  //   width: 18px;
+  //   height: 18px;
+  //   // margin-right: 25px;
+  //   cursor: pointer;
+  // }
+  // .user_name {
+  //   cursor: pointer;
+  //   margin-right: 15px;
+  //   p {
+  //     width: 100%;
+  //     line-height: 24px;
+  //     height: 24px;
+  //     display: inline-table;
+  //     // .user-icon {
+  //     //   vertical-align: middle;
+  //     //   background: url("../../../assets/nav/admin.png") no-repeat;
+  //     //   background-size: 80%;
+  //     // }
+  //     // .user_line {
+  //     //   border: 1px solid #f8f8f8;
+  //     //   margin: 0 5px;
+  //     // }
+  //   }
+  //   &:hover {
+  //     // .user-icon {
+  //     //   vertical-align: middle;
+  //     //   background-image: url("../../../assets/nav/admin-hover.png");
+  //     //   background-size: 100% 100%;
+  //     // }
+  //     p {
+  //       color: #409dff;
+  //     }
+  //   }
+  // }
+
+  .spl_line {
+    height: 40px;
+    border: 1px solid #f8f8f8;
+    line-height: 46px;
+    margin-right: 15px;
+  }
+
+  .log_uot {
+    // height: 24px;
+    // line-height: 24px;
+    // width: 24px;
+    cursor: pointer;
+    margin-left: 12px;
+
+    // .logout-icon {
+    //   vertical-align: middle;
+    //   background: url("../../../assets/nav/logout.png") no-repeat;
+    //   background-size: 80%;
+    // }
+    .logout-text {
+      position: absolute;
+      bottom: -15px;
+      font-size: 12px;
+    }
+
+    &:hover {
+      // .logout-icon {
+      //   vertical-align: middle;
+      //   background-image: url("../../../assets/nav/logout-hover.png");
+      //   background-size: 100% 100%;
+      // }
+      color: #409dff;
+
+      .logout-text {
+        color: #409dff;
+      }
+    }
+  }
+}
+
+.theme-box {
+  border: none;
+  background: none;
+  margin-right: 30px;
+
+  &:active {
+    background: none;
+    color: #409dff;
+  }
+
+  &:hover {
+    background: none;
+    color: #409dff;
+  }
+
+  &:focus {
+    background: none;
+    color: #409dff;
+  }
+
+  &:visited {
+    background: none;
+    color: #409dff;
+  }
+}
+
+// .logout-text:hover{
+//   font-weight: bold;
+//   color:#3ca1ec;
+// }
+// .logout-text{
+//   margin:0 25px 0 8px;cursor:pointer;
+// }
+// .nav-head i{
+//   display: inline-block;
+//   width: 18px;
+//   height: 18px;
+//   // margin-right: 25px;
+//   cursor: pointer;
+// }
+// .nav-head p{
+//    margin-right: 15px;
+// }
+
+.set-icon {
+  background-image: url('../../../assets/nav/set.png');
+  background-size: 100% 100%;
+}
+
+.info-icon {
+  background-image: url('../../../assets/nav/info.png');
+  background-size: 100% 100%;
+}
+
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 0 !important;
+  position: relative;
+
+  &-title {
+    font-size: 14px;
+    color: #333;
+    margin-left: 12px;
+
+    // cursor: pointer;
+    ul {
+      li:last-child {
+        color: #999;
+      }
+
+      i {
+        margin: 0 10px;
+        color: #999;
+      }
+    }
+  }
+
+  .hamburger-container {
+    line-height: 30px;
+    height: 30px;
+    float: left;
+    padding: 0 14px 0 20px;
+  }
+
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+
+  .avatar-container {
+    height: 46px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+/deep/ .msg-icon {
+  display: inline;
+  cursor: pointer;
+  margin-right: 20px;
+
+  .el-badge__content.is-fixed {
+    top: 4px;
+    right: 8px;
+  }
+}
+</style>