dy-admin-manager/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
    <router-link
      key="collapse"
      style="display: flex; align-items: center; padding-left: 30px"
      to="/"
    >
      <img
        v-if="tenantLogo"
        :src="tenantLogo"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <img
        v-else
        src="@/assets/images/base/logo.png"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <span class="tenantName" :title="tenantName">{{ tenantName }}</span>
    </router-link>
    <!-- <breadcrumb class="breadcrumb-container" /> -->
    <div class="indexlayout-top-menu">
      <!-- :class="{'active': getTopMenuActive === route.path}" -->
      <!-- el-scrollbar -->
      <el-scrollbar
        class="horizontal-scrollbar"
        style="overflow: hidden; height: 100%"
      >
        <template v-for="route in permission_routes">
          <app-link
            v-if="!route.hidden"
            :to="route.path"
            :key="route.id"
            class="indexlayout-top-menu-li"
            :class="{ active: getTopMenuActive === route.path }"
          >
            <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 76px;">
              <i :class="[route.meta.icon, 'menuSize']"></i>
              <span style="line-height: 1.2">{{ route.meta.title }}</span>
            </div>
          </app-link>
        </template>
      </el-scrollbar>
    </div>
    <div class="right-menu">
      <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
        v-if="tenantForm.tenantId == 1"
      >
        <div class="popover-container" style="text-align: center">OA审批</div>

        <div
          class="msginfo right-position"
          @click="gotoOa"
          slot="reference"
        >
          <i class="icon_admin_oa operationSize"></i>
        </div>
      </el-popover>
      <!-- <el-popover
        v-if="isShowIns"
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">操作手册</div>

        <div
          class="msginfo right-position"
          @click="openIns"
          slot="reference"
        >
          <i class="icon_admin_book operationSize"></i>
        </div>
      </el-popover> -->

      <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">系统日志</div>
        <div
          class="msginfo right-position"
          v-permission="'/journal'"
          @click="gotoRecode"
          slot="reference"
        >
          <i class="icon_admin_message operationSize"></i>
        </div>
      </el-popover>

      <div class="left-menu" style="margin-right: 12px">
        <el-popover
          placement="top-start"
          width="300"
          trigger="hover"
          style="display: flex;"
        >
          <div class="popover-container">
            <el-tag
              class="navbar_tag"
              type="info"
              v-for="item in organNameList"
              :key="item"
              >{{ item }}</el-tag
            >
          </div>
          <span
            slot="reference"
            class="msginfo right-position"
          >
            <i class="icon_admin_orgin operationSize"></i>
          </span>
        </el-popover>
      </div>
      <el-dropdown class="avatar-container" trigger="hover">
        <div class="avatar-wrapper">
          <img
            v-if="$store.getters.avatar"
            :src="$store.getters.avatar"
            class="user-avatar"
          />
          <img
            v-else
            class="user-avatar"
            src="@/assets/images/base/placehorder-icon.png"
          />
          <span>{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <div class="drop_userInfo">
            <div class="avatar-wrapper">
              <img
                v-if="$store.getters.avatar"
                :src="$store.getters.avatar"
                class="user-avatar"
              />
              <img
                v-else
                class="user-avatar"
                src="@/assets/images/base/placehorder-icon.png"
              />
              <div>
                <span>{{ name }}</span>
                <p class="positionName" :title="positionName">{{ positionName }}</p>
              </div>
            </div>
          </div>
          <div class="tenantService"  v-if="!tenantStatus">
            <div class="serviceName">
              <p class="name">{{ tenantInfo.serverName }}</p>
              <div class="serviceRenew" @click="onRenew" v-if="$helpers.permission('/ productService') && $helpers.permission('/serviceRenew')">立即续费</div>
            </div>
            <div class="serviceTime" v-if="tenantInfo.validRemaining > 0">
              剩余{{ tenantInfo.validRemaining }}天（{{ tenantInfo.expiryDateEnd }}）到期
            </div>
            <div class="serviceTime" v-else>
              已过期
            </div>
          </div>
          <!-- divided -->
          <el-dropdown-item v-if="tenantStatus" @click.native="onTenantChange">
            <i class="icon_admin_tenant userSize"></i>
            <span class="dropdown-text">{{ tenantName }}</span>
            <i style="margin-left: 3px" class="icon_admin_change userSize"></i>
          </el-dropdown-item>
          <el-dropdown-item @click.native="resetPassWord">
            <i class="icon_admin_edit userSize"></i>
            <span class="dropdown-text">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="accountStatus = true" v-if="$helpers.permission('/tenantInfoSetting')">
            <i class="icon_admin_account userSize"></i>
            <span class="dropdown-text">账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item style="border-top: 1px solid #E5E5E5;" @click.native="logout">
            <i class="icon_admin_exit userSize"></i>
            <span class="dropdown-text">安全退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      width="500px"
      append-to-body
      :visible.sync="resetVisible"
    >
      <el-form
        :model="resetForm"
        label-position="right"
        label-width="100px"
        ref="pwdForm"
      >
        <el-form-item label="手机号" prop="phone">
          <div>{{ this.$store.getters.phone }}</div>
        </el-form-item>
        <el-form-item
          label="新密码"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
          prop="password"
        >
          <el-input
            v-model.trim="resetForm.password"
            type="password"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="再次输入"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur',
            },
          ]"
          prop="password2"
        >
          <el-input
            v-model.trim="resetForm.password2"
            type="password"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          :rules="[
            { required: true, message: '验证码不能为空', trigger: 'blur' },
          ]"
          prop="authCode"
          style=""
        >
          <el-input
            v-model.trim="resetForm.authCode"
            style="width: 180px"
            autocomplete="off"
          ></el-input>
          <el-button :disabled="isDisable" @click="getCode">{{
            btnName
          }}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="切换机构"
      width="500px"
      append-to-body
      v-if="tenantVisible"
      :visible.sync="tenantVisible"
    >
      <el-form
        :model="tenantForm"
        label-position="right"
        label-width="100px"
        ref="tenantForm"
      >
        <el-form-item
          label="选择机构"
          :rules="[
            { required: true, message: '请选择机构', trigger: 'change' }
          ]"
          prop="tenantId"
        >
          <el-select
            v-model.trim="tenantForm.tenantId"
            filterable
            placeholder="请选择机构"
            clearable
            style="width: 100% !important"
          >
            <el-option v-for="(item, index) in  tenantList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tenantVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTenant">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog
      title="账号设置"
      append-to-body
      :visible.sync="accountStatus"
      v-if="accountStatus"
      width="650px"
    >
      <user-model @close="accountStatus = false"></user-model>
    </el-dialog>
    <!-- <portal-target name="AppMain" ref="target">
      <instructions ref="instructions" @checkShow="checkShow" />
    </portal-target> -->
  </div>
</template>

<script>
import qs from "qs";
import Logo from "./Sidebar/Logo";
import { mapGetters } from "vuex";
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
import { resetPassword } from "@/api/buildTeam";
import AppLink from "./Sidebar/Link";
import { getBelongTopMenuPath } from "@/utils/permission";
// import instructions from "./instructions";
import { validOaUrl } from '@/utils/validate'
import { tenantInfoQueryPage } from '@/views/organManager/api'
import Cookies from 'js-cookie'
import axios from 'axios'
import userModel from './modal/userModal'
export default {
  data() {
    let tenantConfig = sessionStorage.getItem('tenantConfig')
    tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {}
    return {
      accountStatus: false,
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: "",
        authCode: "",
        password: "",
        password2: "",
      },
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: "获取验证码",
      isShowIns: false,
      tenantVisible: false,
      tenantName: tenantConfig.tenantName || null,
      tenantForm: {
        tenantId: Number(tenantConfig.tenantId) || null,
      },
      tenantList: [],
      tenantLogo: tenantConfig.tenantLogo || null,
    };
  },

  components: {
    AppLink,
    userModel
    // instructions,
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "name", "positionName", "permission_routes", "tenantInfo"]),
    getTopMenuActive() {
      let route = this.$route;
      //  (route, getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    },
    tenantStatus() { // 判断是否是平台账号 true 是
      const baseTenantId = sessionStorage.getItem('baseTenantId')
      return baseTenantId < 0 ? true : false
    },
  },
  mounted() {
    // 手动加入
    this.toggleSideBar();
    this.organNameList = this.organName.split(",") || [];
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      localStorage.removeItem("firstMenuUrl");
      // await this.$store.dispatch("permission/removePermission")
      this.$router.push(`/login`);
      window.location.reload();
    },
    async onTenantChange() {
      try {
        const res = await tenantInfoQueryPage({ page: 1, rows: 999, payState: 1 }, )
        this.tenantList = res.data?.rows || []
        this.tenantVisible = true
      } catch(e) {}
    },
    onRenew() {
      this.$router.push('/productService')
    },
    submitTenant() {
      this.$refs['tenantForm'].validate((res) => {
        if(res) {
          const tenantForm = this.tenantForm
          let tenantName = null
          let tenantLogo = null
          this.tenantList.forEach(item => {
            if(item.id == tenantForm.tenantId) {
              tenantName = item.name
              tenantLogo = item.logo
              this.tenantName = item.name
              this.tenantLogo = item.logo
            }
          });
          let tenantConfig = sessionStorage.getItem('tenantConfig')
          tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {}
          if(tenantConfig.tenantId != tenantForm.tenantId) {
            //判断是否是当前路由
            // if(url == this.$route.path) {
              tenantConfig.tenantId = tenantForm.tenantId
              tenantConfig.tenantName = tenantName
              tenantConfig.tenantLogo = tenantLogo
              sessionStorage.setItem('tenantConfig', JSON.stringify(tenantConfig))
              this.$router.push({
                  path: '/redirect',
                  query: this.$route.fullPath
              })
            // } else {
            //     this.$router.push({
            //     path: url
            //     })
            // }
          }
        }
      })
    },
    gotoRecode() {
      this.$router.push("/journal/journal");
    },
    resetPassWord() {
      this.resetVisible = true;
    },
    submitResetPassWord() {
      if (this.resetForm.password !== this.resetForm.password2) {
        this.$message.error("两次密码必须相同");
        return;
      }
      this.$refs["pwdForm"].validate((res) => {
        if (res) {
          // 发请求
          resetPassword({
            authCode: this.resetForm.authCode,
            mobile: this.$store.getters.phone,
            newPassword: this.resetForm.password,
          }).then((res) => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success("修改成功");
              this.logout();
            }
          });
        }
      });
    },
    getCode() {
      // 获取验证码
      if (!this.$store.getters.phone) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      if (!this.isDisable) {
        this.isDisable = true;
        // 发请求成功后开启定时器
        // 发送验证码
        axios
          .post(
            "/api-web/code/sendSms",
            qs.stringify({ mobile: this.$store.getters.phone })
          )
          .then((res) => {
            if (res.data.code == 200) {
              let timer = setInterval((res) => {
                if (this.timerCount <= 0) {
                  clearInterval(timer);
                  this.isDisable = false;
                  this.btnName = "获取验证码";
                  this.timerCount = 60;
                } else {
                  this.timerCount--;
                  this.btnName = `${this.timerCount}s后重试`;
                }
              }, 1000);
            }
          });
      }
    },
    openIns() {
      // this.$refs.instructions.showInstructions();
    },
    checkShow(val) {
      this.isShowIns = val;
    },
    gotoOa(){
      // console.log(validOaUrl())
      // const Token = Cookies.get('cross-Token')
      // console.log(Token, validOaUrl().split('//')[1])
      // Cookies.set('Admin-Token', Token, { domain: `.${validOaUrl().split('//')[1]}`, path: '/' })
      // document.cookie = `Adminoken=${Token};domain=oadev.dayaedu.com;`
      window.open(validOaUrl())
    }
  },
  watch: {
    resetVisible(val) {
      if (!val) {
        this.resetForm = {
          phone: "",
          authCode: "",
          password: "",
          password2: "",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar_tag {
  margin: 0 5px 8px;
}

.indexlayout-top-menu {
  padding-left: 57px;
  height: 76px;
  line-height: 76px;
  flex: 1;
  display: flex;
  overflow: hidden;
  /* overflow-x: auto; */
  .indexlayout-top-menu-li {
    display: table-cell;
    padding: 0 5px;
    height: 76px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 16px;
    transition: all 0.3s ease;
    span {
      // display: block;
      transition: all 0.3s ease;
      // padding: 10px 20px;
      padding: 8px 20px 3px;
    }
    &:hover,
    &.active {
      span {
        font-weight: 500;
      //   border-radius: 6px;
      }
    }
    // &.active span {
    //   font-weight: bold;
    // }
  }
  .breadcrumb {
    line-height: 76px;
    margin-left: 10px;
    .el-breadcrumb__item {
      display: inline-block;
      float: none;
    }
  }
}
.popover-container {
  max-height: 350px;
  overflow-y: scroll;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 76px;
  overflow: hidden;
  position: relative;
  z-index: 2000;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 18px;
    line-height: 76px;
    margin: 0 0 0 30px;
    display: inline-block;
  }
  .hamburger-container {
    line-height: 76px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }
  .left-menu {
    line-height: 76px;
    // padding-right: 22px;
    font-size: 16px;
    .topIcon {
      width: 20px;
      height: 25px;
    }
  }
  .right-menu {
    min-width: 154px;
    float: right;
    height: 100%;
    line-height: 76px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &:focus {
      outline: none;
    }
    .msginfo.ins {
      img {
        width: 18px;
        height: 23px;
      }
    }
    .msginfo {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 12px;
      position: relative;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
      .active {
        position: absolute;
        width: 7px;
        height: 7px;
        background-color: #f97215;
        border-radius: 50%;
        top: 20px;
        right: -4px;
      }
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 14px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      height: 76px;
      margin-right: 42px;
      cursor: pointer;

      .avatar-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span {
          margin-left: 8px;
          font-size: 14px;
          font-weight: 500;
          // color: rgba(68, 68, 68, 1);
          color: #fff;
        }

        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 2px solid #f0f2f5;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 14px;
        }
      }
    }
  }
}
.user-dropdown {
  width: 258px;
  padding-top: 0 !important;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.05);
  /deep/.popper__arrow {
    border-bottom-color: var(--color-primary) !important;
    &::after {
      border-bottom-color: var(--color-primary) !important;
    }
  }
  .drop_userInfo {
    background-color: var(--color-primary);
    height: 64px;
    color: #fff;
    padding: 0 12px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      align-items: center;
      background: url("../../assets/images/user_tips.png") no-repeat right center;
      background-size: 45%;
      width: 100%;
      .user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .tenantService {
    border-bottom: 1px solid #E5E5E5;
    padding: 18px 17px 12px;
    .serviceName {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-primary);
        line-height: 25px;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .serviceRenew {
        width: 63px;
        height: 22px;
        background: linear-gradient(270deg, #FFC65E 0%, #FFE8A6 100%);
        border-radius: 11px;
        line-height: 22px;
        font-size: 11px;
        font-weight: 400;
        color: #981E13;
        text-align: center;
        cursor: pointer;
      }
    }
    .serviceTime {
      margin-top: 15px;
      font-size: 13px;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
    }
  }
  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    // margin: 3px 17px;
    padding: 7px 17px;
  }
  .dropdown-text {
    display: block;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.right-position {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
}
.sidebar-logo {
  margin-right: 8px;
}
.tenantName {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 28px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.positionName {
  font-size: 12px;
  width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>