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 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   icon="el-icon-plus" v-for="(item,index) in orgs" :key="index"  :command="item.id">{{item.org_name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </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 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>
      <div>
        <i class="el-icon-question"></i>
        <span>帮助中心</span>
      </div>
    </div>
  </div>
</template>

<script>
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'
export default {
  data() {
    return {
      orgs:[],
      org_id:this.$store.getters.xt_user.org.id,
      org_name:this.$store.getters.xt_user.org.org_name,

      // 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");
    }
  },
  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.commit('SET_CURRENT_INFO', {
            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,
          })

          this.commit('SET_URLFORS', {
            urlfors: data.urlfors
          })

          this.commit('SET_FILEDS', {
            fileds: data.fileds
          })
          setFiledConfigList(JSON.stringify(data.fileds))
          cacheAdminUserInfo(JSON.stringify(data))


        }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
      );
    }
  },
  created() {
    this.org_id = 12

    getOrgs().then(response => {
      if (response.data.state === 1) {
          this.orgs = response.data.data.orgs;
          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
            }
          }
      }
    });



  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-nav {
  background: #409eff;
  position: fixed;
  top: 0;
  left: 150px;
  right: 0;
  z-index: 1000;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color:#fff;
  .dropdownBox {
    margin-left: 10px;
  }
  .navRight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    margin-right: 10px;
    .right-menu {
      float: right;
      height: 100%;
      z-index: 99999;
      color: #fff;
      & :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: #fff;
          }

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

  .nav-logo {
    width: 162px;
    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: #fff;
          }

          .el-icon-caret-bottom {
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
  .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 !important;
}

.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: 18px;
      color:#fff;
    }
  }
</style>