侧边导航栏

阳光穿透心脏的1/2处 2022-11-25 10:12 261阅读 0赞

<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
                      >
                      
                    </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>
            
            <router-view />
            
          </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>