kmt/src/pages/Home.vue

<template>
  <el-row class="height100">
    <el-col :span="24" class="">
      <div class="conterLayout">
        <div class="main_header">
          <MenuComponent></MenuComponent>
          <!--<div class="main_header_user">-->
          <!--<el-dropdown @command="handleCommand">-->
          <!--<div class="el-dropdown-link" style="position: relative;cursor: pointer;">-->
          <!--<span style="margin-right:30px; font-size: .14rem;"> {{getUser.name}} </span>-->
          <!--&lt;!&ndash;<i class="el-icon-caret-right"></i>&ndash;&gt;-->
          <!--<span class="out">退出</span>-->
          <!--</div>-->
          <!--<el-dropdown-menu slot="dropdown">-->
          <!--<el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>-->
          <!--<el-dropdown-item command="logDown" divided>退出登录</el-dropdown-item>-->
          <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
          <!--</div>-->
        </div>
        <div class="main_conter">
          <router-view></router-view>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script type="es6">
  import NavMenuComponent from "@/components/NavMenuComponent";
  import MenuComponent from "@/components/MenuComponent";
  import UserInfoView from "@/components/UserInfoView";
  import { mapGetters, mapActions } from "vuex";
  export default {
    components: { NavMenuComponent, UserInfoView, MenuComponent },
    name: "home",
    data() {
      return {
        userImgPath: "",
        filters: {
          activitySerachListen: 0,
          timeFrame: []
        },
        filterstwo: {
          activityMonitoringListen: 0,
          timeType: "0",
          timeFrame: []
        },
        name: "在线人员管理CRM",
        userName: "超级管理员",
        // 菜单相关
        router: true,
        navHeight: 0,
        navsData: [],
        breadcrumb: "",
        // 修改密码
        modifyPwdFormRules: {
          oldPassword: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            { min: 5, message: "密码长度不能小于6", trigger: "blur" },
            { max: 18, message: "密码长度不能大于18", trigger: "blur" }
          ],
          newPassword: [
            { required: true, message: "新密码不能为空", trigger: "blur" },
            { min: 5, message: "新密码长度不能小于6", trigger: "blur" },
            { max: 18, message: "新密码长度不能大于18", trigger: "blur" }
          ],
          newPassword2: {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.modifyPwdForm.newPassword) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        },
        modifyPwdForm: { oldPassword: "", newPassword: "" },
        userModifyPwdVisible: false,
        modifyPwdFormLoading: false,

      };
    },
    watch: {
    },
    computed: {
      ...mapGetters(["getUser", "getAtivityTimeFrameData"])
    },
    // async beforeCreate() {
    //   let {
    //     success,
    //     permissionsMap
    //   } = await this.$dao.sysDao.findPagePermissions();
    //   if (success) this.setPagePermissions(permissionsMap);
    //   // 判断用户是否登录
    //   if (sessionStorage.user === undefined) {
    //     this.$router.push("/");
    //     return this.$message("请先登录!");
    //   }
    //   let menuList = this.$dao.sysDao.getMenuList();
    //   if (menuList.length < 1) {
    //     this.$router.push("/");
    //   }
    //   this.navsData = menuList;
    //   this.twoMenu = this.$util.twoMenu(menuList);
    // },
    methods: {
      ...mapActions([
      ]),
      ...mapGetters([""]),
      // 修改密码框显示
      userModifyPwdShow() {
        const self = this;
        self.userAddFormLoading = false;
        self.userModifyPwdVisible = true;
        self.modifyPwdForm = { oldPassword: "", newPassword: "" };
      },
      // 修改密码提交
      userModifyPwdSubmit() {
        const self = this;
        self.$refs.modifyPwdForm.validate(async valid => {
          if (!valid) return false;
          self.userAddFormLoading = true;
          let data = {
            oldPassword: self.modifyPwdForm.oldPassword,
            newPassword: self.modifyPwdForm.newPassword
          };
          let { success } = await self.$dao.sysDao.userModifyPwd(data);
          if (success) {
            self.userModifyPwdVisible = false;
            self.$util.messageMethod("success", "修改密码成功!");
          }
          self.userAddFormLoading = false;
        });
      },
      //  账号管理、退出登录
      handleCommand(command) {
        const self = this;
        if (command === `logDown`) {
          this.$confirm("您确定退出吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$dao.logout();
              this.$router.replace("/");
              this.$util.messageMethod("success", "退出成功!");
              // location.reload()
            })
            .catch(() => {
              // console.log(err)
              self.$message("已取消操作!");
            });
        } else if (command === `modifyPwd`) {
          // self.$router.replace('/accountManagement')
          self.userModifyPwdShow();
        } else if (command === `accountManagement`) {
          self.$router.replace("/accountManagement");
        }
      },
      //  路由切换
      // routerDataPath() {
      //   const path = this.$route.path;
      //   if (this.dashboard.indexOf(path) !== -1) this.activeName = path;
      //   if (path !== "/accountManagement") {
      //     return path;
      //   } else {
      //     return "";
      //   }
      // }
    },
    mounted() {
      // this.userImgPath = this.getUser.imagePath;
      this.breadcrumb = this.$route.name;
      // this.$nextTick(() => {
      //   this.navHeight =
      //     document.body.clientHeight - this.$refs.logoUser.offsetHeight;
      // });
    }
  };
</script>

<style scoped>
.el-input__inner, .el-checkbox__inner, .el-textarea__inner, .el-button {
    font-size: 0.3125rem;
    text-align: center;
    line-height: 0!important;
    padding: 12px 20px!important;
}
  .main_conter{
    min-height: 1000px;
  }
  .out{
    margin-left:10px;
    color:#333333;
  }
  .navlink{
    float:left;
    margin-right:24px;
    color:#999999 ;
    font-size: 9px;
  }
  .menu {
    /* overflow-y: auto; */
    position: relative;
    z-index: 1;
    background-color: #00253f;
    box-shadow: 3px 0px 7px #cfcfcf;
  }
  .logoUser {
    position: relative;
    width: 100%;
    color: #fff;
    border-bottom: 1px solid #001625;
  }
  .logoImg {
    padding: 0.2rem;
  }
  .logoImg > img {
    display: inline-block;
    width: 1.8rem;
    height: 0.38rem;
  }
  .logoImg > h2 {
    font-size: 0.14rem;
    color: #82b5d7;
  }
  .userImg {
    display: inline-block;
    height: 0.9rem;
    width: 0.9rem;
    border: 2px solid #00c1de;
  }
  .userImg,
  .userImg > img {
    border-radius: 50%;
  }
  .userTitle > p {
    margin: 0.1rem 0;
    font-size: 0.16rem;
    color: #6e828a;
  }
  .userAdmin {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0 0.14rem;
    height: 0.25rem;
    background-color: #37bf5b;
    border-radius: 0.1rem;
  }
  .userAdmin > span {
    font-size: 0.12rem;
    color: #def0e3;
    line-height: 0.2rem;
  }
  .conterLayout {
    background-color: #eef1f6;
    width: 100%;
    height: 100%;
  }
  .main_header {
    display: flex;
    position: relative;
    height: 110px;
    line-height: 110px;
    background-color: #fff;
    box-shadow: 0px 0px 20px #eaeaea;
  }
  .el-breadcrumb {
    line-height: 50px;
  }
  .el-breadcrumb .el-breadcrumb__item {
    padding-top: 13px;
    line-height: 26px;
    font-size: 18px;
  }
  .main_header_user {
    position: absolute;
    right: 30px;
  }
  .main_header_user .el-dropdown {
    color: #333333;
  }
  .main_header_user .el-icon-caret-right {
    transform: rotate(43deg);
    position: absolute;
    right: 30px;
    bottom: 16px;
  }
  .ativityTimeFrame .el-radio {
    margin-left: 15px;
  }
</style>