elizebeth/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
            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>
        <a href="https://sso.kuyicloud.com/help" target="_blank">帮助中心</a>
      </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 {
  inject: ["reload"],
  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.$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
      );
    }
  },
  created() {
    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);
        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;
    font-size: 14px;
    .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: 14px;
    color: #fff;
  }
}
</style>