kd-aiot-frontend-eom/src/layout/components/password-modal.vue

<!-- 修改密码弹窗 -->
<template>
  <ele-modal
    width="420px"
    title="修改密码"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    @update:visible="updateVisible"
    @closed="onClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="82px"
      @keyup.enter.native="save"
    >
      <el-form-item label="旧密码:" prop="oldPassword">
        <el-input
          show-password
          v-model="form.oldPassword"
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码:" prop="newPassword">
        <el-input
          show-password
          v-model="form.newPassword"
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码:" prop="newPassword1">
        <el-input
          show-password
          v-model="form.newPassword1"
          placeholder="请再次输入新密码"
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { updatePassword } from '@/api/system/user';
  import { SYSTEM_NAME } from '@/config/setting';
  export default {
    props: {
      visible: Boolean
    },
    data() {
      return {
        // 按钮 loading
        loading: false,
        // 表单数据
        form: {
          oldPassword: '',
          newPassword: '',
          newPassword1: ''
        },
        // 表单验证
        rules: {
          oldPassword: [
            {
              required: true,
              message: '请输入旧密码',
              trigger: 'blur'
            }
          ],
          newPassword: [
            {
              required: true,
              message: '请输入新密码',
              trigger: 'blur'
            }
          ],
          newPassword1: [
            {
              required: true,
              trigger: 'blur',
              validator: (_rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请再次输入新密码'));
                }
                if (value !== this.form.newPassword) {
                  return callback(new Error('两次输入密码不一致'));
                }
                callback();
              }
            }
          ]
        }
      };
    },
    methods: {
      /* 修改 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 保存修改 */
      save() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.form.id = localStorage.getItem(`userId-${SYSTEM_NAME}`);
            updatePassword(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
              })
              .catch((e) => {
                console.log(e);
                this.loading = false;
                // this.$message.error(e.message);
              });
          } else {
            return false;
          }
        });
      },
      /* 关闭回调 */
      onClose() {
        this.form = {
          oldPassword: '',
          newPassword: '',
          newPassword1: ''
        };
        this.$refs.form.resetFields();
        this.loading = false;
      }
    }
  };
</script>