提交

src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
       @toggleClick="toggleSideBar"
     />
 
-<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
+    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
@@ -17,42 +17,46 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-<!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
-<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
+        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
+        <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
+        <!--        </el-tooltip>-->
 
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper" style="margin-top:0">
-          <span>{{user.realName}}</span>
+          <span>{{ user.realName }}</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="updatePassword">
+            <span style="display:block;">修改密码</span>
+          </el-dropdown-item>
           <el-dropdown-item @click.native="logout">
             <span style="display:block;">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <user-password ref="userPassword"></user-password>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
+import UserPassword from './UserPassword'
 // import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 
 export default {
   components: {
-    Breadcrumb,
     Hamburger,
     ErrorLog,
     Screenfull,
+    UserPassword,
     // SizeSelect,
     Search
   },
@@ -67,6 +71,10 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
+    updatePassword() {
+      const username = this.user.userName
+      this.$refs.userPassword.show(username)
+    },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)

src/layout/components/UserPassword.vue

@@ -0,0 +1,166 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    cancel-text="关闭"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          label="旧密码"
+        >
+          <a-input
+            v-decorator="[ 'oldPassword', validatorRules.oldPassword]"
+            type="password"
+            placeholder="请输入旧密码"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          label="新密码"
+        >
+          <a-input
+            v-decorator="[ 'newPassword', validatorRules.newPassword]"
+            type="password"
+            placeholder="请输入新密码"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          label="确认新密码"
+        >
+          <a-input
+            v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"
+            type="password"
+            placeholder="请确认新密码"
+          />
+        </a-form-item>
+
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { httpAction, getAction } from '@/api/request'
+
+export default {
+  name: 'UserPassword',
+  data() {
+    return {
+      title: '修改密码',
+      modalWidth: 800,
+      visible: false,
+      confirmLoading: false,
+      validatorRules: {
+        oldPassword: {
+          rules: [{
+            required: true, message: '请输入旧密码!'
+          }]
+        },
+        newPassword: {
+          rules: [{
+            required: true, message: '请输入新密码!'
+          }, {
+            validator: this.validateToNextPassword
+          }]
+        },
+        confirmpassword: {
+          rules: [{
+            required: true, message: '请确认新密码!'
+          }, {
+            validator: this.compareToFirstPassword
+          }]
+        }
+      },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+
+      form: this.$form.createForm(this),
+      url: 'system/user/profile/updatePwd',
+      username: ''
+    }
+  },
+  methods: {
+    show(uname) {
+      if (!uname) {
+        this.$message.warning('当前系统无登录用户!')
+        return
+      } else {
+        this.username = uname
+        this.form.resetFields()
+        this.visible = true
+      }
+    },
+    handleCancel() {
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.disableSubmit = false
+      this.selectedRole = []
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const params = Object.assign({ username: this.username }, values)
+          console.log('修改密码提交数据', params)
+          httpAction(this.url, params, 'put').then((res) => {
+            that.confirmLoading = false
+            if (res.code === 200) {
+              that.$message.success(res.msg)
+              that.close()
+            } else {
+              that.$message.warning(res.msg)
+            }
+          })
+        }
+      })
+    },
+    validateToNextPassword(rule, value, callback) {
+      const pattern = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$/
+      console.log(pattern.test(value))
+      console.log(value)
+      if (value && !pattern.test(value)) {
+        callback('请输入8位以上大小写字母、数字、特殊符号组合')
+      } else {
+        callback()
+      }
+    },
+    compareToFirstPassword(rule, value, callback) {
+      const form = this.form
+      if (value && value !== form.getFieldValue('newPassword')) {
+        callback('两次输入的密码不一样！')
+      } else {
+        callback()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+