修改密码页面

src/views/layout/UpdatePassword.vue

@@ -0,0 +1,140 @@
+<template>
+	<v-dialog
+		title="修改密码"
+		:close-on-click-modal="true"
+		append-to-body
+		v-model="dialogVisible"
+		width="70%"
+		height="600px"
+	>
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+             label-width="80px" @submit.native.prevent>
+      <div style="margin-bottom: 20px;" v-if="showTip">
+        <el-alert
+          title="当前账号的密码仍为初始密码，风险较大，请及时修改"
+          type="warning"
+          :closable="false"
+          center
+          show-icon>
+        </el-alert>
+      </div>
+      <el-form-item label="账号">
+        <span>{{ userName }}</span>
+      </el-form-item>
+      <el-form-item label="原密码" prop="password">
+        <el-input type="password" size="small" v-model="dataForm.password" ></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input type="password" size="small" v-model="dataForm.newPassword" ></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input type="password" size="small" v-model="dataForm.confirmPassword" ></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer" style="float: right">
+      <el-button size="large" @click="dialogVisible = false" icon="el-icon-circle-close">关闭</el-button>
+      <el-button size="large" type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </v-dialog>
+</template>
+
+<script>
+  import {clearLoginInfo} from '@/utils'
+  import UserService from '@/api/sys/UserService'
+  export default {
+	  props:{
+		  innerVisible:{
+			  type: Boolean,
+			  default: true
+		  }
+	  },
+    data () {
+      let validateConfirmPassword = (rule, value, callback) => {
+        if (this.dataForm.newPassword !== value) {
+          callback(new Error('确认密码与新密码不一致'))
+        } else {
+          callback()
+        }
+      }
+      return {
+      	dialogVisible: this.innerVisible,
+        showTip: false,
+        dataForm: {
+          password: '',
+          newPassword: '',
+          confirmPassword: ''
+        },
+        dataRule: {
+          password: [
+            {required: true, message: '原密码不能为空', trigger: 'blur'}
+          ],
+          newPassword: [
+            {required: true, message: '新密码不能为空', trigger: 'blur'}
+          ],
+          confirmPassword: [
+            {required: true, message: '确认密码不能为空', trigger: 'blur'},
+            {validator: validateConfirmPassword, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      userName: {
+        get () {
+          return this.$store.state.user.name
+        }
+      },
+      mainTabs: {
+        get () {
+          return this.$store.state.common.mainTabs
+        },
+        set (val) {
+          this.$store.commit('common/updateMainTabs', val)
+        }
+      }
+    },
+    created () {},
+    methods: {
+		handleClose(done) {
+			this.$emit("innerDialog",false)
+		},
+      // 初始化
+      init (showTip) {
+        if (this.commonJS.isNotEmpty(showTip)) {
+          this.showTip = showTip
+        } else {
+          this.showTip = false
+        }
+        this.dialogVisible = true
+        // this.$nextTick(() => {
+        //   this.$refs.dataForm.resetFields()
+        //   //this.$refs['dataForm'].resetFields()
+        // })
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.userService.savePwd({
+              'oldPassword': this.dataForm.password,
+              'newPassword': this.dataForm.newPassword
+            }).then((data) => {
+              this.$message({
+                message: '修改成功, 请重新登录!',
+                type: 'success',
+                duration: 1500
+              })
+              this.dialogVisible = false
+              this.$nextTick(() => {
+                this.mainTabs = []
+                clearLoginInfo()
+                this.$router.replace({name: 'login'})
+              })
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+