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

<template>
  <div class="top-nav">
    <!-- <div class="nav-logo">
      <img :src="require(`../../../assets/logo/logo.png`)" alt="">
    </div>
    <el-menu class="navbar" mode="horizontal">
      <div>
        <span> {{this.$store.getters.xt_user.org.org_name}}
        </span>
      </div>
      <div class="system-nav">
        <div class="system-nav-menu active">
          <a>
            <span><i class="icon iconfont icon-jiankangshuidi"></i> 血透管理</span>
          </a>
        </div>
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.cdm_role_exist">
          <a :href="CDMWebsit()">
            <span><i class="icon iconfont icon-manbing-xuanzhong"></i> 慢病管理</span>
          </a>
        </div>
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.scrm_role_exist">
          <a :href="SCRMWebsit()">
            <span><i class="iconfont icon-pengyou"></i> SCRM</span>
          </a>
        </div>
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.mall_role_exist">
          <a :href="MircoMallWebsit()">
            <span><i class="icon iconfont icon-service_fill"></i> 微商城</span>
          </a>
        </div>

        <div class="system-nav-menu">
          <a :href="APPManageWebsit()">
            <span><i class="icon iconfont icon-suoyou"></i> 应用</span>
          </a>
        </div>
      </div>

      <div class="right-menu">
        <el-dropdown class="avatar-container right-menu-item" trigger="click"  @command="handleCommand">
          <div class="avatar-wrapper">
            <img class="user-avatar" :src="avater">
            <span class="user-title">{{ this.$store.getters.xt_user.user.user_name }}</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="modifyUserInfoAction">
              个人信息
            </el-dropdown-item>
            <el-dropdown-item command="modifyOrgInfoAction">
              机构信息
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              {{$t('navbar.logOut')}}

            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <modify-user-info-dialog ref="modify_user_info_dialog"></modify-user-info-dialog>
        <modify-org-info-dialog ref="modify_org_info_dialog"></modify-org-info-dialog>

      </div>
    </el-menu>-->
    <div style="display:flex;align-items: center;">
      <div class="nav-logo">
        <img :src="require(`../../../assets/logo/logo2.png`)" alt="">
      </div>
      <div class="dropdownBox">
        <el-dropdown trigger="click" @command="handleOrgCommand">
          <span class="el-dropdown-link">
            {{ org_name }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in orgs"
              :key="index"
              :command="item.id"
              >{{ item.org_name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div style="margin-left: 50px" v-if="org_config.code&&org_config.code.length >0">机构编码:{{org_config.code}}</div>
    </div>
    <div class="navRight">
      <!-- <el-input placeholder="搜索患者透析号/姓名/首拼" prefix-icon="el-icon-search" v-model="input2"></el-input>
      <div style="color: #b2b2b3;">通知中心</div> -->
      <div class="right-menu">
        <el-dropdown
          class="avatar-container right-menu-item"
          trigger="click"
          @command="handleCommand"
        >
          <div class="avatar-wrapper">
            <img class="user-avatar" :src="avater" />
            <span class="user-title">{{
              this.$store.getters.xt_user.user.user_name
            }}</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item >医师编码: {{role.doctor_number}}</el-dropdown-item>
            <el-dropdown-item command="modifyUserInfoAction"
              >个人信息</el-dropdown-item
            >
            <el-dropdown-item
              command="modifyOrgInfoAction"
              v-if="is_super_admin === 1"
              >机构信息</el-dropdown-item
            >
            <el-dropdown-item divided command="logout">{{
              $t("navbar.logOut")
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <modify-user-info-dialog
          ref="modify_user_info_dialog"
        ></modify-user-info-dialog>
        <modify-org-info-dialog
          ref="modify_org_info_dialog"
        ></modify-org-info-dialog>
      </div>
      <div>
        <!-- <i class="el-icon-question"></i>
        <a href="https://sso.kuyicloud.com/help" target="_blank">帮助中心</a> -->
       <div class="fixedBox">
         <div class="fixed-item" @mouseover="mouseOver" @mouseleave="leave">
          <i class="el-icon-chat-line-round"></i>
           <div class="fixed-text">联系客户经理</div>
            <div class="fixed-wrap" v-show="wrap1">
              <div class="fixed-inner">
                <div class="fixed-inner-item">您的专属客户经理:{{ information.name }}</div>
                  <div class="fixed-inner-item">电话:{{ information.phone }}</div>
               <div class="fixed-inner-item">微信:{{ information.wechat }}</div>
                <div class="fixed-inner-item">QQ:{{ information.qqchat }}</div>
                <div class="fixed-inner-item">邮箱:{{ information.email }}</div>
                <div class="fixed-inner-triangle"></div>
             </div>
            </div>
          </div>
          <div class="fixed-item" @mouseover="mouseOver1" @mouseleave="leave1">
           <i class="el-icon-full-screen"></i>
            <div class="fixed-text">微信联系</div>
            <div class="fixed-wrap" v-show="wrap2">
              <div class="fixed-inner">
                <img :src="information.wechat_link" alt="">
                <div>扫码加微信</div>
                <div class="fixed-inner-triangle"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from "vuex";
// import Breadcrumb from "@/components/Breadcrumb";
// import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import ModifyUserInfoDialog from "@/xt_pages/home/modify_user_info_dialog";
import ModifyOrgInfoDialog from "@/xt_pages/home/modifyOrgInfoDialog";
import { getFiledConfigList, setFiledConfigList } from "@/utils/data_config"; // getConfigList from sessionStorage
import {
  getAdminUserInfoCache,
  cacheAdminUserInfo,
  removeAdminUserInfoCache
} from "@/utils/admin_info_cache";
import { getOrgs, changeOrg } from "@/api/config";
import { getConnect } from "@/api/login";
export default {
  inject: ["reload"],
  data() {
    return {
      orgs: [],
      org_id: this.$store.getters.xt_user.org.id,
      org_name: this.$store.getters.xt_user.org.org_name,
      is_super_admin: 0,
      wrap1:false,
      wrap2:false,
      information:{},
      org_config:{},
      role:{},
      // scrm_role_exist: $store.getters.xt_user.scrm_role_exist
    };
  },
  components: {
    Screenfull,
    ModifyUserInfoDialog,
    ModifyOrgInfoDialog
  },
  computed: {
    ...mapGetters(["sidebar"]),
    avater: function() {
      var avatar = this.$store.getters.xt_user.user.avatar;
      return avatar.length > 0
        ? avatar
        : require("../../../assets/home/userData.png");
    },
    websocket() {
      return this.$store.state.user.websocket;
    }
  },
  methods: {
    handleOrgCommand(org_id) {
      let params = {
        org_id: org_id
      };
      changeOrg(params)
        .then(response => {
          if (response.data.state === 1) {
            // window.location.reload()

            this.$message.success("切换成功");
            let data = response.data.data;
            this.org_id = data.org.id;
            this.org_name = data.org.org_name;

            // this.$store.dispatch("ModifyAdminUserOrgInfo", {
            //   user: data.user,
            //   cur_org_id: data.current_org_id,
            //   cur_app_id: data.current_app_id,
            //   org: data.org,
            //   subscibe: data.subscibe,
            //   template_info: data.template_info,
            //   scrm_role_exist: data.scrm_role_exist,
            //   cdm_role_exist: data.cdm_role_exist,
            //   mall_role_exist: data.mall_role_exist
            // });
            //
            // this.$store.dispatch("ModifyUrlInfo", {
            //   urlfors: data.urlfors
            // });
            //
            // this.$store.dispatch("ModifyFiled", {
            //   fileds: data.fileds
            // });

            // setFiledConfigList(JSON.stringify(data.fileds));
            // cacheAdminUserInfo(JSON.stringify(data));

            window.location.reload();

            // this.$store
            //   .dispatch(
            //     "xt_GenerateRoutes",
            //     this.$store.getters.current_role_urls
            //   )
            //   .then(() => {
            //     this.$store.dispatch("VerifyConfigList").then(() => {
            //       // alert('token 验证成功')
            //       // console.log(this.$store.getters.xt_permission.addRouters)
            //       this.$router.addRoutes(
            //         this.$store.getters.xt_permission.addRouters
            //       ); // 动态添加可访问路由表
            //       //        next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
            //       // this.$router.replace({ path: '/' })
            //       // this.$router.go(0)
            //       // this.reload()
            //     });
            //   });
          } else {
            this.$message.success(response.data.msg);
          }
        })
        .catch(e => {
          // this.$message.success("网络异常")
        });
    },

    handleCommand(command) {
      switch (command) {
        case "modifyUserInfoAction":
          this.modifyUserInfoAction();
          break;
        case "modifyOrgInfoAction":
          this.modifyOrgInfoAction();
          break;
        case "logout":
          this.logout();
          break;
      }
    },
    logout() {
      this.$store.dispatch("FrontendLogout");
      window.location.href = process.env.BASE_API + "/logout";
    },
    modifyOrgInfoAction() {
      // this.$refs.modify_org_info_dialog.show()
      this.$router.push("/orginfo");
      return false;
    },
    modifyUserInfoAction() {
      this.$refs.modify_user_info_dialog.show();
    },
    myServe() {
      this.$router.push("/service");
      return false;
    },
    SCRMWebsit() {
      return process.env.SRCM_HOST;
    },
    MircoMallWebsit() {
      return process.env.MIRCO_MALL_HOST;
    },
    CDMWebsit() {
      return process.env.CDM_HOST;
    },
    APPManageWebsit() {
      return (
        process.env.SSO_HOST +
        "/org/admin/apps?org=" +
        this.$store.getters.xt_user.org_id
      );
    },
    getToken(orgId,adminUserId){
      axios.get('/api/index/gettoken/'+ orgId + '/'+ adminUserId
        ).then((res) => {
        console.log('res',res.data)

        if(res.data.code == 0){
          let token = res.data.data.token
          localStorage.setItem("token",token)
          let http = 'wss://socket.sgjyun.com?token='
          // let http = 'ws://socket.szjkhd.com?token='//测试
          console.log(this.$store.state.user.websocket)
          this.$store.state.user.websocket = new ReconnectingWebSocket(
            http + token
          );
          this.$store.state.user.websocket.timeoutInterval = 3000;
          setInterval(() => {
            if (navigator.onLine == false) {
              this.showWsErr = true;
              this.wsErrMsg = "网络已断开，请检查网络后重新打开页面";
              console.log('navigator',navigator)
              let http = 'wss://socket.sgjyun.com?token='
              // let http = 'ws://socket.szjkhd.com?token=' //测试
              let token = localStorage.getItem("token")
              this.$store.state.user.websocket = new ReconnectingWebSocket(
                http + token
              );
            } else if (
              navigator.onLine == true &&
              this.websocket.readyState == 1
            ) {
              this.showWsErr = false;
            }
            this.websocket.send("1");
          }, 30000);
        }

      }).catch(error => {
          // window.location.href = error.response.data.redirect;
        });
    },
    mouseOver() {
      this.wrap1 = true;
    },
    leave() {
      this.wrap1 = false;
    },
    mouseOver1() {
      this.wrap2 = true;
    },
    leave1() {
      this.wrap2 = false;
    },
    getConnect(){
      getConnect().then(res => {
        console.log(res)
        this.information = res.data.data.information
      })
    }
  },

  created() {
    this.getConnect()
    getOrgs().then(response => {
      if (response.data.state === 1) {
        this.orgs = response.data.data.orgs;
        console.log("org", this.orgs);
        var creator = response.data.data.creator;
        console.log("creator", creator);
        var admin = response.data.data.admin;
        console.log("admin", admin);
        this.is_super_admin = admin.is_super_admin;
        for (let i = 0; i < this.orgs.length; i++) {
          if (this.orgs[i].id == this.org_id) {
            this.org_name = this.orgs[i].org_name;
          }
        }

        this.org_config = response.data.data.org_config
        this.role = response.data.data.role

        localStorage.setItem("org_id",creator.org_id);
        sessionStorage.setItem("org_id",creator.org_id);
        sessionStorage.setItem("admin_user_id",creator.admin_user_id);
        this.getToken(creator.org_id,creator.admin_user_id)
      }
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-nav {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0px;
  right: 0;
  z-index: 1000;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  .dropdownBox {
    margin-left: 10px;
  }
  .navRight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    margin-right: 10px;
    font-size: 14px;
    .right-menu {
      float: right;
      height: 100%;
      z-index: 99999;
      color: #000;
      & :focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        margin: 0 8px;

        .iconfont {
          font-size: 18px;
        }
      }
      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

      .theme-switch {
        vertical-align: 15px;
      }

      .avatar-container {
        margin-right: 10px;

        .avatar-wrapper {
          cursor: pointer;
          margin-top: 3px;
          display: flex;
          align-items: center;
          justify-content: center;

          .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
          }

          .user-title {
            margin: 0 8px;
            font-size: 14px;
            color: #000;
          }

          .el-icon-caret-bottom {
            font-size: 12px;
            color: #000;
          }
        }
      }
    }
  }

  .nav-logo {
    width: 140px;
    display: flex;
    align-items: center;
    // height: 60px;
    text-align: center;
    justify-content: center;
    // padding: 10px 0;
    box-sizing: border-box;
    float: left;

    img {
      display: inline-block;
      width: 100px;
    }
  }
  .navbar {
    border-radius: 0px !important;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 180px);
    align-items: center;
    color: #fff;
    border: none;
    background: #409eff;
    float: left;

    .breadcrumb-container {
      float: left;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;
      z-index: 99999;

      & :focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        margin: 0 8px;

        .iconfont {
          font-size: 18px;
        }
      }
      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

      .theme-switch {
        vertical-align: 15px;
      }

      .avatar-container {
        margin-right: 10px;

        .avatar-wrapper {
          cursor: pointer;
          margin-top: 3px;
          display: flex;
          align-items: center;
          justify-content: center;

          .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
          }

          .user-title {
            margin: 0 8px;
            font-size: 14px;
            color: #000;
          }

          .el-icon-caret-bottom {
            font-size: 12px;
            color: #000;
          }
        }
      }
    }
  }
  .system-nav {
    .system-nav-menu {
      float: left;
      height: 60px;
      line-height: 60px;
      padding: 0 25px;

      a {
        font-size: 15px;

        .iconfont {
          font-size: 18px;
        }
      }
    }
    .active {
      background: #3090eb;
      border-left: 1px #5fabf7 solid;
      border-right: 1px #5fabf7 solid;
    }
  }
  .el-menu::after,
  .el-menu::before {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.el-dropdown-menu {
  z-index: 9999 ;
}

// .v-modal {
//   z-index: 9999 !important;
// }

</style>

<style lang="scss">
.navRight {
  .el-input {
    width: 250px;
  }
  .el-input__inner {
    border-radius: 30px;
    background: #f5f7fa;
  }
}
.dropdownBox {
  .el-dropdown-link {
    font-size: 14px;
    color: #000;
  }
}

</style>
<style>
.fixedBox{
   /* position: fixed;
   right: 10px;
   top: 60%;
   -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
   -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
   box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
   background-color: #fff;
   color: #000;
   z-index: 998; */
   display: flex;
}
.fixed-item{
  width: 100%;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
}
.fixed-text{
  display: block;
  width: 90px;
  left: 0;
  top: 0;
  margin: auto;
  color: #000;
  line-height: 16px;
  font-size: 13px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  text-align: center;
}
.fixed-wrap{
  position: absolute;
  right: 0;
  top: 160px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #409EFF;
  color: #FFF;
  z-index: 9999999;
  border-radius: 4px;
}
.fixed-inner{
  width: 308px;
  padding: 9px 0;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
}
.fixed-inner-item{
  padding: 15px;
  text-align: left;
}
.fixed-inner-triangle{
  position: absolute;
  right: 15%;
  top: -10px;
  -webkit-transform: rotate(-45deg) translateY(-50%);
  -moz-transform: rotate(-45deg) translateY(-50%);
  -ms-transform: rotate(-45deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
  width: 12px;
  height: 12px;
  border-color: transparent #409EFF #409EFF transparent;
  border-style: solid;
  border-width: 6px;
  background: transparent;
  -webkit-box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);
  -moz-box-shadow: 5px 5px 10px 0 rgba(0,0,0,.1);
  box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.fixed-inner img{
  height: 160px;
}
</style>