CABaggageData2.0/src/layout/index.vue

<template>
  <div class="app-wrapper" @change="eveclk">
    <sidebar class="sidebar-container"/>
    <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">
          <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 { EditPwd } from "@/api/apiHome";
import Dialog from "@/layout/components/Dialog";
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() {
    // document.getElementById("sidebar-container").style.width = "150px";
  },
  methods: {
    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() {
      sessionStorage.removeItem("userName");
      this.$store.dispatch("app/toggleOutflag", false);
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
    //修改密码
    async editPwd() {
      try {
        const res = await EditPwd({
          LoginName: this.name,
          LoginPwd: this.dataForm.old,
          LoginPwdNew: 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);
      }
    },
  },
};
</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%;
}
</style>