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="left-menu">
      <i class="el-icon-location-information topIcon"></i>

      <el-popover placement="top-start" width="300" trigger="hover">
        <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">{{
          organName.length > 10 ? organName.substr(0, 10) + "..." : organName
        }}</span>
      </el-popover>
    </div> -->
    <div class="right-menu">
      <div class="msginfo" v-permission="'/journal'" @click="gotoRecode">
        <img src="@/assets/images/base/base-bell.svg" />
        <!-- <div class="active"></div> -->
      </div>
      <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" 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.svg" style="width: 23px;">
          </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>
  </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';
export default {
  data() {
    return {
      username: "",
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: "",
        authCode: "",
        password: "",
        password2: "",
      },
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: "获取验证码",
    };
  },
  components: {
    AppLink
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "permission_routes"]),
    getTopMenuActive() {
      let route = this.$route;
      // console.log(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);
            }
          });
      }
    },
  },
  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 .3s ease;
    span {
      // display: block;
      transition: all .3s ease;
      padding: 10px 20px;
    }
    &:hover,
    &.active{
      color: #fff;
      span {
        background: #14928A;
        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;
  background: #363D55;
  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 {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-right: 20px;
      margin-left: 30px;
      position: relative;
      cursor: pointer;
      img {
        width: 23px;
        height: 30px;
      }
      .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>