inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="修改密码"
4     :visible="visible_updPwd"
5     :confirm-loading="confirmLoading"
6     @ok="handleOkUpdPwd"
7     @cancel="handleCancel"
8   >
9     <a-form :form="formUpdPwd">
10       <a-form-item
11         label="原密码"
12         :labelCol="labelCol"
13         :wrapperCol="wrapperCol"
14         has-feedback
15       >
16         <a-input placeholder="请输入原密码" type="password" v-decorator="['password', {rules: [{required: true, message: '请输入原密码!'}]}]" />
17       </a-form-item>
18       <a-form-item
19         label="新密码"
20         :labelCol="labelCol"
21         :wrapperCol="wrapperCol"
22         has-feedback
23       >
24         <a-input
25           placeholder="请输入新密码"
26           type="password"
27           v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码!'},{
28             validator: validateToNextPassword,
29           },]}]" />
30       </a-form-item>
31       <a-form-item
32         label="重复新密码"
33         :labelCol="labelCol"
34         :wrapperCol="wrapperCol"
35         has-feedback
36       >
37         <a-input
38           placeholder="请再次输入新密码"
39           type="password"
40           v-decorator="['confirm', {rules: [{required: true, message: '请再次输入新密码!'},
41                                             {
42                                               validator: compareToFirstPassword,
43                                             }]}]" />
44       </a-form-item>
45     </a-form>
46   </a-modal>
47
48 </template>
49
50 <script>
51   import { sysUserUpdatePwd } from '@/api/modular/system/userManage'
52   export default {
53     data () {
54       return {
55         labelCol: {
56           xs: { span: 24 },
57           sm: { span: 5 }
58         },
59         wrapperCol: {
60           xs: { span: 24 },
61           sm: { span: 16 }
62         },
63         confirmLoading: false,
64         visible_updPwd: false,
65         userId: '',
66         formUpdPwd: this.$form.createForm(this)
67       }
68     },
69     methods: {
70       open (id) {
71         this.userId = id
72         this.visible_updPwd = true
73       },
74       handleOkUpdPwd () {
75         const { formUpdPwd: { validateFields } } = this
76         validateFields((errors, values) => {
77           if (!errors) {
78             this.confirmLoading = true
79             values.id = this.userId
80             sysUserUpdatePwd(values).then((res) => {
81               if (res.success) {
82                 this.$message.success('修改成功')
83                 this.handleCancel()
84               } else {
85                 this.$message.error('修改失败:' + res.message)
86               }
87             // eslint-disable-next-line handle-callback-err
88             }).finally((err) => {
89               this.confirmLoading = false
90             })
91           }
92         })
93       },
94       handleCancel () {
95         this.visible_updPwd = false
96       },
97       compareToFirstPassword (rule, value, callback) {
98         const formUpdPwd = this.formUpdPwd
99         if (value && value !== formUpdPwd.getFieldValue('newPassword')) {
100           // eslint-disable-next-line standard/no-callback-literal
101           callback('请确认两次输入密码的一致性!')
102         } else {
103           callback()
104         }
105       },
106       validateToNextPassword (rule, value, callback) {
107         const formUpdPwd = this.formUpdPwd
108         if (value && this.confirmDirty) {
109           formUpdPwd.validateFields(['confirm'], { force: true })
110         }
111         callback()
112       }
113     }
114   }
115 </script>