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
        src="@/assets/images/base/logo.png"
        class="sidebar-logo"
        style="width: 129px; height: 37px"
      />
    </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 }"
          >
            <span>{{ route.meta.title }}</span>
          </app-link>
        </template>
      </el-scrollbar>
    </div>
    <div class="right-menu">
           <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex; height: 89px"
      >
        <div class="popover-container" style="text-align: center">OA审批</div>

        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 89px;
          "
          class="msginfo"
          @click="gotoOa"
          slot="reference"
        >
          <img
            src="@/assets/images/base/instruction-icon.png"
            width="24px"
            height="24px"
          />

          <!-- <div class="active"></div> -->
        </div>
      </el-popover>
      <el-popover
        v-if="isShowIns"
        placement="bottom"
        trigger="hover"
        style="display: flex; height: 89px"
      >
        <div class="popover-container" style="text-align: center">操作手册</div>

        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 89px;
          "
          class="msginfo"
          @click="openIns"
          slot="reference"
        >
          <img
            src="@/assets/images/base/instruction-icon.png"
            width="24px"
            height="24px"
          />

          <!-- <div class="active"></div> -->
        </div>
      </el-popover>

      <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex; height: 89px"
      >
        <div class="popover-container" style="text-align: center">系统日志</div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 89px;
          "
          class="msginfo"
          v-permission="'/journal'"
          @click="gotoRecode"
          slot="reference"
        >
          <img
            src="@/assets/images/base/base-bell.png"
            width="24px"
            height="24px"
          />
          <!-- <div class="active"></div> -->
        </div>
      </el-popover>

      <div class="left-menu">
        <el-popover
          placement="top-start"
          width="300"
          trigger="hover"
          style="display: flex; height: 89px"
        >
          <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"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              height: 89px;
            "
          >
            <!-- {{ organName.length > 10 ? organName.substr(0, 10) + "..." : organName }} -->
            <!-- <i class="el-icon-s-home" style="font-size: 23px; color: #1A1A1A;"></i> -->
            <img
              src="@/assets/images/base/base-home.png"
              width="24px"
              height="24px"
            />
          </span>
        </el-popover>
      </div>
      <el-dropdown class="avatar-container" trigger="click">
        <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"
          />
          <!-- <i class="el-icon-caret-bottom" /> -->
          <span>{{ username }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <!-- divided -->
          <el-dropdown-item>
            <span style="display: block" @click="resetPassWord">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span style="display: block" @click="logout">退出</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>

    <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 axios from 'axios'
export default {
  data() {
    return {
      username: "",
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: "",
        authCode: "",
        password: "",
        password2: "",
      },
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: "获取验证码",
      isShowIns: false,
    };
  },

  components: {
    AppLink,
    instructions,
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "permission_routes"]),
    getTopMenuActive() {
      let route = this.$route;
      //  (route, getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    },
  },
  mounted() {
    // 手动加入
    this.toggleSideBar();
    this.username = this.$store.getters.name;
    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();
    },
    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(){
      window.open('http://oadev.dayaedu.com/')
    }
  },
  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: 90px;
  line-height: 88px;
  flex: 1;
  display: flex;
  overflow: hidden;
  /* overflow-x: auto; */
  .indexlayout-top-menu-li {
    display: inline-block;
    padding: 0 5px;
    height: 90px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 16px;
    transition: all 0.3s ease;
    span {
      // display: block;
      transition: all 0.3s ease;
      padding: 10px 20px;
    }
    &:hover,
    &.active {
      color: #14928a;
      span {
        background: #fff;
        border-radius: 6px;
      }
    }
    &.active span {
      font-weight: bold;
    }
  }
  .breadcrumb {
    line-height: 90px;
    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: 90px;
  overflow: hidden;
  position: relative;
  z-index: 2000;
  background: #14928a;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 18px;
    line-height: 90px;
    margin: 0 0 0 30px;
    display: inline-block;
  }
  .hamburger-container {
    line-height: 90px;
    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: 90px;
    // padding-right: 22px;
    font-size: 16px;
    color: #fff;
    .topIcon {
      width: 20px;
      height: 25px;
    }
  }
  .right-menu {
    min-width: 154px;
    float: right;
    height: 100%;
    line-height: 90px;
    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-right: 25px;
      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: 90px;
      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;
        }
      }
    }
  }
}
</style>