eta_front/src/components/pwdDlg.vue

<template>
  <div class="container-reset">
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisiblePwd"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      custom-class="reset-pwd-dlg"
      v-dialogDrag
    >
      <div>
        <p class="p-text" v-if="isInitText">当前使用的是初始密码，请您修改密码</p>
        <div v-else>
          <el-form :model="addForm" :rules="rules" label-width="120px" ref="addForm">
            <el-form-item label="新密码" prop="NewPwd" v-if="visible">
              <el-input type="password" v-model="addForm.NewPwd" placeholder="请输入长度不超过20个字符" maxlength="20" autocomplete="new-password">
                <i slot="suffix" class="el-icon-view el-input__icon" title="显示密码" @click="changePass('show')" style="cursor: pointer"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="NewPwd" v-else>
              <el-input type="text" v-model="addForm.NewPwd" placeholder="请输入长度不超过20个字符" maxlength="20" autocomplete="new-password">
                <i slot="suffix" class="el-icon-more el-input__icon" title="隐藏密码" @click="changePass('hide')" style="cursor: pointer"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="twoNewPwd" v-if="twovisible">
              <el-input type="password" v-model="addForm.twoNewPwd" placeholder="请输入长度不超过20个字符" maxlength="20">
                <i slot="suffix" class="el-icon-view el-input__icon" title="显示密码" @click="changetwoPass('show')" style="cursor: pointer"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="twoNewPwd" v-else>
              <el-input type="text" v-model="addForm.twoNewPwd" placeholder="请输入长度不超过20个字符" maxlength="20">
                <i slot="suffix" class="el-icon-more el-input__icon" title="隐藏密码" @click="changetwoPass('hide')" style="cursor: pointer"></i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="$router.back()">退出</el-button>
        <el-button v-if="isInitText" type="primary" @click="isInitText = false">立即修改</el-button>
        <el-button v-else type="primary" @click="addSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { modifyPwd } from "@/api/api.js";
import md5 from "@/utils/md5.js";
export default {
  name: "",
  components: {},
  props: {
    dialogVisiblePwd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isInitText: true,
      visible: true,
      twovisible: true,
      addForm: {
        NewPwd: "",
        twoNewPwd: "",
      },
      rules: {
        NewPwd: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
        ],
        twoNewPwd: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    resetPwd() {},
    changePass(value) {
      this.visible = !(value === "show");
    },
    changetwoPass(value) {
      this.twovisible = !(value === "show");
    },
    addSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.addForm.NewPwd != this.addForm.twoNewPwd) {
            this.$message.warning("新密码两次输入不一致，请核对！");
            return false;
          }
          const initPwd = "123456a";
          modifyPwd({ OldPwd: md5.hex_md5(initPwd), NewPwd: md5.hex_md5(this.addForm.NewPwd) }).then((res) => {
            if (res.Ret == 200) {
              this.$message.success("修改密码成功,请重新登录！");
              setTimeout(() => {
                localStorage.setItem("auth", "");
                localStorage.setItem("userName", "");
                localStorage.setItem("Role", "");
                localStorage.setItem("RoleType", "");
                localStorage.setItem("AdminId", "");
                localStorage.setItem('AdminName',"");
                localStorage.setItem("RoleIdentity", "");
                localStorage.setItem("ManageType", "");
                localStorage.setItem("loginTime", "");
                this.$router.push({ path: "/login" });
              }, 1000);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.reset-pwd-dlg {
  width: 500px;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
  .el-input {
    width: 80%;
  }
  .dialog-footer {
    margin-top: 20px;
    text-align: center;
  }
}
.p-text {
  margin: 20px 0;
  text-indent: 2em;
}
</style>