Add edit password

ui/src/components/personalProfile/editPasswd.vue

@@ -1,27 +1,94 @@
 <template>
-    <el-form :model="form" label-width="90px">
-        <el-form-item label="旧密码" prop="oldPasswd">
-            <el-input v-model="form.oldPasswd" placeholder="请输入旧密码" show-password />
-        </el-form-item>
-        <el-form-item label="新密码" prop="newPasswd">
-            <el-input v-model="form.newPasswd" placeholder="请输入新密码" show-password />
-        </el-form-item>
-        <el-form-item label="验证密码" prop="selectPasswd">
-            <el-input v-model="form.selectPasswd" placeholder="请重新输入新密码" show-password />
-        </el-form-item>
-    </el-form>
+    <el-main>
+        <el-form :model="passwdForm" :rules="rules" ref="passwdForm" label-width="90px">
+            <el-form-item label="旧密码" prop="oldPasswd">
+                <el-input v-model="passwdForm.oldPasswd" placeholder="请输入旧密码" show-password />
+            </el-form-item>
+            <el-form-item label="新密码" prop="newPasswd">
+                <el-input v-model="passwdForm.newPasswd" placeholder="请输入新密码" show-password />
+            </el-form-item>
+            <el-form-item label="确认密码" prop="selectPasswd">
+                <el-input
+                    v-model="passwdForm.selectPasswd"
+                    placeholder="请重新确认密码"
+                    show-password
+                />
+            </el-form-item>
+        </el-form>
+    </el-main>
+    <el-footer class="dialog-footer" style="text-align: center">
+        <el-button @click="cancelPasswd">取消</el-button>
+        <el-button type="primary" @click="onSubmit(passwdForm)">确定</el-button>
+    </el-footer>
 </template>
 <script lang="ts">
 export default {
     data() {
         return {
-            form: {
+            passwdForm: {
                 oldPasswd: '',
                 newPasswd: '',
                 selectPasswd: ''
+            },
+            rules: {
+                oldPasswd: [
+                    {
+                        required: true,
+                        message: '旧密码不能为空'
+                    }
+                ],
+                newPasswd: [
+                    {
+                        required: true,
+                        message: '新密码不能为空'
+                    }
+                ],
+                selectPasswd: [
+                    {
+                        required: true,
+                        message: '确认密码不能为空',
+                        trigger: 'blur'
+                    },
+                    {
+                        validator: this.validateSurePassword,
+                        trigger: 'blur'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        onSubmit(passwdForm) {
+            // 表单校验
+            this.$refs.passwdForm.validate((value) => {
+                if (value) {
+                    this.$emit('updatePasswd', passwdForm)
+                    this.$refs.passwdForm.resetFields()
+                    console.log('submit!')
+                } else {
+                    console.log('fault!')
+                }
+            })
+        },
+        cancelPasswd() {
+            this.$emit('cancelPasswd', null)
+            this.$refs.passwdForm.resetFields()
+        },
+        validateSurePassword(rule, value, callback) {
+            if (value !== '') {
+                if (value !== this.passwdForm.newPasswd) {
+                    callback(new Error('两次输入的新密码不一致'))
+                    return false
+                } else {
+                    callback()
+                }
             }
         }
     }
 }
 </script>
-<style scoped></style>
+<style scoped>
+.dialog-footer button:first-child {
+    margin-right: 10px;
+}
+</style>

ui/src/pages/profile/PersonalProfile.vue

@@ -73,8 +73,14 @@
             </el-row>
         </el-form>
     </div>
-    <el-dialog v-model="visible" width="50%" title="修改密码">
-        <edit-passwd></edit-passwd>
+    <el-dialog
+        v-model="visible"
+        width="50%"
+        title="修改密码"
+        :show-close="false"
+        :close-on-click-modal="false"
+    >
+        <edit-passwd @updatePasswd="updatePasswd" @cancelPasswd="cancelPasswd"></edit-passwd>
     </el-dialog>
 </template>
 
@@ -195,6 +201,13 @@ export default {
         },
         resetForm() {
             this.form = _.cloneDeep(this.staff)
+        },
+        updatePasswd(passwdForm) {
+            console.log(passwdForm)
+            this.visible = false
+        },
+        cancelPasswd() {
+            this.visible = false
         }
     },
     created() {

ui/src/pages/work/Manage.vue

@@ -167,7 +167,6 @@ export default {
                 })
         },
         setDialogVisible(dialogVisible) {
-            console.log(dialogVisible)
             this.addVisible = dialogVisible
             this.editVisible = dialogVisible
             this.getTableData()