侧边导航栏

<template>
  <el-container style="height: 100vh" class="menu_container">
    <el-aside
      height="100vh"
      width="260px"
      style="background: #0099ff; overflow: hidden"
    >
      <el-row>
        <el-col>
          <div class="menuTitle">油烟检测监控云平台</div>
          <el-menu
            :default-active="activerouter"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#0099ff"
            text-color="#fff"
            active-text-color="#0099ff"
            router
            unique-opened
          >
            <template v-for="item in router">
              <template v-if="item.children.length !== 0">
                <el-submenu :key="item.name" :index="item.name">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span v-if="item.name">{{ item.name }}</span>
                  </template>
                  <el-menu-item
                    v-for="child in item.children"
                    :key="child.name"
                    :index="child.uri"
                    @click="qqq(child)"
                    >{{ child.name }}</el-menu-item
                  >
                  <!-- </template> -->
                </el-submenu>
              </template>

              <template v-else>
                <el-menu-item
                  :key="item.name"
                  :index="item.uri"
                  @click="goMenu(item, [item])"
                >
                  <i :class="item.icon"></i>
                  <span v-if="item.name" slot="title">{{ item.name }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>

    <el-container>
      <el-header class="header">
        <div></div>
        <div class="flex_div">
          <span class="date_time">{{ date }}</span>
          <div class="headerTopImg">
            <div>
              <img src="./../../assets/header/u4.png" alt />
            </div>
          </div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="margin-left: 30px">
              {{ userInfo.name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="b">修改密码</el-dropdown-item>
              <el-dropdown-item command="c">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- <transition name="slide-fade" mode="out-in"> -->
        <router-view />
        <!-- </transition> -->
      </el-main>
    </el-container>

    <!-- 修改密码弹出层 -->
    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :close-on-click-modal = "false"
    >
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="padding: 0 60px"
      >
        <el-form-item label="旧密码" required>
          <el-input
            v-model="formLabelAlign.name"
            placeholder="请输入旧密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input
            v-model="formLabelAlign.region"
            placeholder="请输入新密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" required>
          <el-input
            v-model="formLabelAlign.type"
            placeholder="请再次输入新密码"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activerouter: "",
      // 修改密码弹出层是否显示
      centerDialogVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      router: this.$store.getters.menuReturn,
      obj: {
        username: "admin",
        pwd: "123123",
      },
      date: "",
      code: "",
      userInfo: {},
    };
  },
  created() {
    setInterval(() => {
      this.getDate();
    }, 1000);
    this.code = JSON.parse(JSON.parse(sessionStorage.getItem("userInfo"))).code;
    this.userInfo = JSON.parse(JSON.parse(sessionStorage.getItem("userInfo")));
    console.log(this.userInfo);
  },
  methods: {
    qqq(item) {
      console.log(item);
    },
    goMenu(i, a) {
      if (i.uri == "/home") {
        // this.$router.go(0)
      }
    },
    // 修改密码确认按钮
    changePassword() {
      if (this.formLabelAlign.name == "") {
        this.$message.error("旧密码不能为空");
        return;
      }
      if (this.formLabelAlign.region == "") {
        this.$message.error("新密码不能为空");
        return;
      }
      if (this.formLabelAlign.type == "") {
        this.$message.error("确认密码不能为空");
        return;
      }
      if (this.formLabelAlign.type != this.formLabelAlign.region) {
        this.$message.error("两次密码不一致");
        return;
      }
      if(this.formLabelAlign.region.length < 6 || this.formLabelAlign.type.length < 6){
         this.$message.error("密码长度不能小于6位");
        return;
      }
      let obj = {
        code: this.code,
        oldPsd: this.formLabelAlign.name,
        newPsd: this.formLabelAlign.region,
        confirmPsd: this.formLabelAlign.type,
      };
      this.$api.login.changePwd(obj).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功,请重新登陆",
            type: "success",
          });
          this.$store.dispatch("triggerClearToken", "");
          this.$router.push("/login");
          this.centerDialogVisible = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      if (month.toString().length == 1) {
        month = "0" + month;
      }
      if (day.toString().length == 1) {
        day = "0" + day;
      }
      if (hour.toString().length == 1) {
        hour = "0" + hour;
      }
      if (minute.toString().length == 1) {
        minute = "0" + minute;
      }
      if (second.toString().length == 1) {
        second = "0" + second;
      }
      this.date =
        year +
        "年" +
        month +
        "月" +
        day +
        "日 " +
        hour +
        ":" +
        minute +
        ":" +
        second;
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleCommand(command) {
      if (command == "b") {
        this.centerDialogVisible = true;
        this.formLabelAlign = {
            name: "",
            region: "",
            type: "",
        }
      }
      if (command == "c") {
        this.$confirm("您要退出登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api.login.userLogout().then((res) => {
              if (res.code == 200) {
                this.$store.dispatch("triggerClearToken", "");
                this.$router.push("/login");
              }
            });
          })
          .catch(() => {
            console.log("取消了");
          });
      }
    },
  },
  mounted() {
    let defaultMenu = window.location.hash.substr(
      window.location.hash.indexOf("/")
    );
    this.activerouter = defaultMenu;
  },
};
</script>


<style lang="scss" scoped>
.menu_container {
  .el-container {
    width: 100%;
  }
  .el-aside {
    color: #333;
  }
  .menuTitle {
    box-sizing: border-box;
    height: 70px;
    color: #fff;
    font-size: 20px;
    // display: flex;
    // justify-content: center;
    margin-left: 37px;
    line-height: 70px;
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
  }
  .index {
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    margin-top: 20px;
    height: 56px;
    display: flex;
    align-items: center;
    text-align: center;
  }
}
.headerTopImg {
  width: 32px;
  height: 60px;
  display: inline-block;
  div {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    margin-top: 12.5px;
    margin-right: 15px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.header {
  text-align: right;
  font-size: 12px;
  height: 70px !important;
  // background: #ffffff;
  background: #0099ff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.349019607843137) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .date_time {
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    // color: #0099ff;
    color: #fff;
    margin-right: 50px;
    line-height: 80px;
  }
  .flex_div {
    display: flex;
    align-items: center;
    padding-right: 40px;
  }
}
</style>
<style lang="scss">
.menu_container {
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-menu {
    width: 100%;
    border: 0;
  }
  .el-submenu__title i {
    color: #ffffff;
  }
  .el-submenu__title {
    font-size: 16px;
  }
  .el-menu-item {
    font-size: 16px;
  }
  .el-menu-item i {
    color: #fff !important;
  }
  .el-menu-item.is-active {
    background: #ffffff !important;
  }
  .el-menu-item:hover {
    background: #ffffff !important;
    color: #0099ff !important;
  }
  .el-menu-item:hover i {
    color: #0099ff !important;
  }
  .el-icon-menu:before {
    margin-left: 35px;
  }
  .el-main {
    background: #f9f9f9;
    padding: 0;
  }
  .el-menu-vertical-demo {
    .el-icon-arrow-down:before {
      color: #ffffff;
    }
  }
  .el-submenu .el-menu-item {
    padding-left: 15px;
  }
  .el-menu-item.is-active i {
    color: #0099ff !important;
  }

  .slide-fade-enter-active {
    transition: all 0.8s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
  .el-submenu.is-active .el-submenu__title {
    background: rgba(0, 0, 0, 0.2) !important;
  }
}
</style>