Blame view

ant-design-vue-jeecg/src/views/system/modules/PasswordModal.vue 3.75 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <a-modal
    title="重新设定密码"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入用户账号" v-decorator="[ 'username', {}]" :readOnly="true"/>
        </a-form-item>
肖超群 authored
19
20
        <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
          <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'password', validatorRules.password]"/>
肖超群 authored
21
22
        </a-form-item>
肖超群 authored
23
24
25
        <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
          <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码"
                   v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
肖超群 authored
26
27
28
29
30
31
32
33
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
肖超群 authored
34
import {changePassword} from '@/api/api'
肖超群 authored
35
肖超群 authored
36
37
38
39
40
41
42
43
44
45
46
47
export default {
  name: "PasswordModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      validatorRules: {
        password: {
          rules: [{
            validator: this.validateToNextPassword,
          }],
肖超群 authored
48
        },
肖超群 authored
49
50
51
52
53
54
        confirmpassword: {
          rules: [{
            required: true, message: '请重新输入登录密码!',
          }, {
            validator: this.compareToFirstPassword,
          }],
肖超群 authored
55
56
        },
      },
肖超群 authored
57
58
59
60
61
62

      model: {},

      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
肖超群 authored
63
      },
肖超群 authored
64
65
66
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
肖超群 authored
67
      },
肖超群 authored
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
      form: this.$form.createForm(this)
    }
  },
  created() {
    console.log("created");
  },

  methods: {
    show(username) {
      this.form.resetFields();
      this.visible = true;
      this.model.username = username;
      this.$nextTick(() => {
        this.form.setFieldsValue({username: username});
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;
      this.selectedRole = [];
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          changePassword(formData).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.$emit('ok');
            } else {
              this.$message.warning(res.message);
            }
          }).finally(() => {
            this.confirmLoading = false;
            this.close();
          });
肖超群 authored
107
        }
肖超群 authored
108
109
110
111
112
113
114
115
116
117
118
119
120
121
      })
    },
    handleCancel() {
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      const confirmpassword = form.getFieldValue('confirmpassword');
      console.log("confirmpassword==>", confirmpassword);
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样!');
      }
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], {force: true})
肖超群 authored
122
      }
肖超群 authored
123
124
125
126
127
128
129
130
131
132
133
134
135
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('两次输入的密码不一样!');
      } else {
        callback()
      }
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
肖超群 authored
136
137
    }
  }
肖超群 authored
138
}
肖超群 authored
139
</script>