CABaggageData2.0/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <sidebar class="sidebar-container" id="sidebar-containers" @leup="leuper" />
    <div class="main-container">
      <navbar />
      <app-main id="main-containers" />
    </div>
    <!--修改密码弹框-->
    <Dialog width="496px" customClass="dataStoreInfoDialog" :flag="pwdflag">
      <div class="dialog-public-background">
        <div class="title">修改密码</div>
        <div class="content">
          <div class="ruleZf">特殊字符：`、!、@、#、$、%、^、&、*、(、)、_、+、{、}、"、:、?、>、&lt;、`、,、.、/、'、;、[、]、=、-、\、|</div>
          <div class="ruleZf">密码规则：长度为8-20个字符，并且必须包含数字、大写字母、小写字母、特殊字符</div>
          <el-form :model="dataForm" :rules="dataRules" ref="dataForm" class="demo-dataForm">
            <el-form-item label="旧密码" prop="old">
              <el-input size="medium" placeholder="请输入旧密码" show-password v-model="dataForm.old"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new">
              <el-input size="medium" placeholder="请输入新密码" show-password v-model="dataForm.new"></el-input>
            </el-form-item>
            <el-form-item label="再次确认新密码" prop="again">
              <el-input size="medium" placeholder="请再次确认新密码" show-password v-model="dataForm.again"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button size="medium" type="primary" @click="addSubmit('dataForm')" class="r24">保存</el-button>
          <el-button size="medium" @click="resetForm('dataForm')">取消</el-button>
        </div>
      </div>
    </Dialog>
    <!--退出弹框-->
    <Dialog :flag="outflag">
      <div class="airportInfoDialog">
        <div class="flx">退出系统</div>
        <div class="content">是否确认退出系统？</div>
        <div class="foot right t30" style="margin-top: 24px">
          <el-button size="medium" class="r25 r26" @click="outQd" type="primary">确定</el-button>
          <el-button size="medium" @click="outQx" class="r26">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapGetters } from "vuex";
import { changePassword } from "@/api/newLogin";
import { removeToken } from "@/utils/auth";
import Dialog from "@/layout/components/Dialog";
import MD5 from 'blueimp-md5'
export default {
  name: "Layout",
  components: {
    Navbar,
    Sidebar,
    AppMain,
    Dialog,
  },
  mixins: [ResizeMixin],
  data () {
    return {
      dataForm: {
        //数据项表单
        old: "",
        new: "",
        again: "",
      },
      // leup: true,
      dataRules: {
        //数据项表单验证
        old: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        new: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        again: [
          { required: true, message: "请再次确认新密码", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["pwdflag", "outflag", "name"]),
  },
  mounted () {
    this.leuper(true)
  },
  methods: {
    leuper (data) {
      if (data) {
        document.getElementById("sidebar-containers").style.width = "208px";
        document.getElementById("main-containers").style.paddingLeft = "208px";
        document.getElementById("navbar_lowers").style.paddingLeft = "208px";
        this.$store.dispatch('app/expandSidebar', true)
      } else {
        document.getElementById("sidebar-containers").style.width = "56px";
        document.getElementById("main-containers").style.paddingLeft = "56px";
        document.getElementById("navbar_lowers").style.paddingLeft = "56px";
        this.$store.dispatch('app/expandSidebar', false)
      }
    },
    // eveclk() {
    //   document.getElementById("sidebar-container").style.width = "150px";
    //   this.leup = true;
    //   // document.getElementById("main-containers").style.paddingLeft = "50px";
    // },
    // upLeft() {
    //   document.getElementById("sidebar-container").style.width = "48px";
    //   this.leup = false;
    //   // document.getElementById("main-containers").style.paddingLeft = "30px";
    // },
    //存储数据项-提交
    addSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dataForm.new !== this.dataForm.again) {
            this.$message.error("两次输入的密码不一致，请重新输入");
            return false;
          }
          this.editPwd();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //存储数据项-取消
    resetForm (formName) {
      this.$store.dispatch("app/togglePwdflag", false);
      this.$refs[formName].resetFields();
    },
    //退出系统-取消
    outQx () {
      this.$store.dispatch("app/toggleOutflag", false);
    },
    //退出系统-确定
    async outQd () {
      if (this.name == '匿名用户') {
        removeToken();
        sessionStorage.clear();
        this.$store.dispatch("app/toggleOutflag", false);
        this.$router.push(`/login`);
        location.reload();
      } else {
        sessionStorage.removeItem("userName");
        this.$store.dispatch("app/toggleOutflag", false);
        const res = await this.$store.dispatch("user/logout");
        this.$router.push(`/login`);
      }
    },
    //修改密码
    async editPwd () {
      try {
        const res = await changePassword({
          username: this.name,
          originPassword: MD5(this.dataForm.old),
          // passwd: MD5(this.dataForm.again),
          newPassword: this.dataForm.again,
          // newPassword: MD5(this.dataForm.again),
        });
        if (res.code == 0) {
          this.$message.success(res.message);
          this.$store.dispatch("app/togglePwdflag", false);
          setTimeout(() => {
            this.outQd();
          }, 2000);
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error.message || error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
.ruleZf {
  line-height: 2;
  margin-bottom: 22px;
  color: #101611;
}
</style>