【更新】修改密码迁移位置，移至个人设置里面

_web/src/components/tools/UserMenu.vue

@@ -21,13 +21,6 @@
              <span>切换应用</span>
            </a>
          </a-menu-item>
          <a-menu-item key="5" v-if="hasPerm('sysUser:updatePwd')" >
            <a @click="updatePwd()" >
              <a-icon type="tool"/>
              <span>修改密码</span>
            </a>
          </a-menu-item>
          <a-menu-item key="0">
            <router-link :to="{ name: 'center' }">
              <a-icon type="user"/>
@@ -50,7 +43,6 @@
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal
      title="切换应用"
      :visible="visible"
@@ -58,7 +50,6 @@
      :confirm-loading="confirmLoading"
      @cancel="handleCancel"
    >
      <a-form :form="form1" >
        <a-form-item
          :labelCol="labelCol"
@@ -77,58 +68,7 @@
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="修改密码"
      :visible="visible_updPwd"
      :confirm-loading="confirmLoading"
      @ok="handleOkUpdPwd"
      @cancel="handleCancel"
    >
      <a-form :form="form2">
        <a-form-item
          label="原密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入原密码" type="password" v-decorator="['password', {rules: [{required: true, message: '请输入原密码！'}]}]" />
        </a-form-item>
        <a-form-item
          label="新密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入新密码"
            type="password"
            v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{
              validator: validateToNextPassword,
            },]}]" />
        </a-form-item>
        <a-form-item
          label="重复新密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请再次输入新密码"
            type="password"
            v-decorator="['confirm', {rules: [{required: true, message: '请再次输入新密码！'},
                                              {
                                                validator: compareToFirstPassword,
                                              }]}]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
@@ -161,20 +101,17 @@ export default {
        sm: { span: 16 }
      },
      visible: false,
      visible_updPwd: false,
      confirmLoading: false,
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      defApp: []
    }
  },
  computed: {
    ...mapGetters(['nickname', 'avatar', 'userInfo'])
  },
  methods: {
    ...mapActions(['Logout', 'MenuChange', 'UpdatePwd']),
    ...mapActions(['Logout', 'MenuChange']),
    handleLogout () {
      this.$confirm({
@@ -205,30 +142,6 @@ export default {
      this.defApp.push(Vue.ls.get(ALL_APPS_MENU)[0].code)
    },
    /**
     * 打开修改密码框
     */
    updatePwd () {
      this.visible_updPwd = true
    },
    compareToFirstPassword (rule, value, callback) {
      const form2 = this.form2
      if (value && value !== form2.getFieldValue('newPassword')) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('请确认两次输入密码的一致性！')
      } else {
        callback()
      }
    },
    validateToNextPassword (rule, value, callback) {
      const form2 = this.form2
      if (value && this.confirmDirty) {
        form2.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    switchApp (appCode) {
      this.visible = false
      this.defApp = []
@@ -241,29 +154,9 @@ export default {
        message.error('应用切换异常')
      })
    },
    handleOkUpdPwd () {
      const { form2: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          values.id = this.userInfo.id
          this.UpdatePwd(values).then((res) => {
            if (res.success) {
              this.$message.success('修改成功')
              this.handleCancel()
            } else {
              this.$message.error('修改失败：' + res.message)
            }
          })
        }
      })
    },
    handleCancel () {
      this.form1.resetFields()
      this.form2.resetFields()
      this.visible = false
      this.visible_updPwd = false
    }
  }
}

_web/src/store/modules/user.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
import { login, getLoginUser, logout } from '@/api/modular/system/loginManage'
import { sysDictTypeTree } from '@/api/modular/system/dictManage'
import { sysMenuChange } from '@/api/modular/system/menuManage'
import { sysUserUpdatePwd } from '@/api/modular/system/userManage'
import { ACCESS_TOKEN, ALL_APPS_MENU, DICT_TYPE_TREE_DATA } from '@/store/mutation-types'
import { welcome } from '@/utils/util'
@@ -163,17 +162,6 @@ const user = {
          resolve()
        })
      })
    },
    // 修改密码
    UpdatePwd ({ commit }, passwords) {
      return new Promise((resolve, reject) => {
        sysUserUpdatePwd(passwords).then((res) => {
          resolve(res)
        }).catch(() => {
          resolve()
        })
      })
    }
  }

_web/src/views/system/account/settings/Security.vue

@@ -1,39 +1,68 @@
<template>
  <a-list
    itemLayout="horizontal"
    :dataSource="data"
  >
    <a-list-item slot="renderItem" slot-scope="item, MenuIndex" :key="MenuIndex">
      <a-list-item-meta>
        <a slot="title">{{ item.title }}</a>
        <span slot="description">
          <span class="security-list-description">{{ item.description }}</span>
          <span v-if="item.value"> : </span>
          <span class="security-list-value">{{ item.value }}</span>
        </span>
      </a-list-item-meta>
      <template v-if="item.actions">
        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
      </template>
    </a-list-item>
  </a-list>
  <div>
    <a-list
      itemLayout="horizontal"
      :dataSource="data"
    >
      <a-list-item slot="renderItem" slot-scope="item, MenuIndex" :key="MenuIndex">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
            <span v-if="item.value"> : </span>
            <span class="security-list-value">{{ item.value }}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>
      </a-list-item>
    </a-list>
    <upd-pwd ref="updPwd"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [
        { title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message') } } },
        { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } },
        { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
        { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
        { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      ]
  import { mapGetters } from 'vuex'
  import UpdPwd from './securityItem/updPwd'
  export default {
    components: {
      UpdPwd
    },
    data () {
      return {
        data: []
      }
    },
    created () {
      if (this.hasPerm('sysUser:updatePwd')) {
        const updPwdMenu = {
          title: '账户密码',
          description: '当前密码强度',
          value: '强',
          actions: { title: '修改',
            callback: () => {
              this.$refs.updPwd.open(this.userInfo.id)
            }
          }
        }
        this.data.push(updPwdMenu)
      }
      const encryptedPhone = { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } }
      const encryptedProblem = { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } }
      const encryptedEmail = { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } }
      const encryptedMfa = { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      this.data.push(encryptedPhone)
      this.data.push(encryptedProblem)
      this.data.push(encryptedEmail)
      this.data.push(encryptedMfa)
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
    }
  }
}
</script>
<style scoped>

_web/src/views/system/account/settings/securityItem/updPwd.vue

@@ -0,0 +1,115 @@
<template>
  <a-modal
    title="修改密码"
    :visible="visible_updPwd"
    :confirm-loading="confirmLoading"
    @ok="handleOkUpdPwd"
    @cancel="handleCancel"
  >
    <a-form :form="formUpdPwd">
      <a-form-item
        label="原密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input placeholder="请输入原密码" type="password" v-decorator="['password', {rules: [{required: true, message: '请输入原密码！'}]}]" />
      </a-form-item>
      <a-form-item
        label="新密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请输入新密码"
          type="password"
          v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{
            validator: validateToNextPassword,
          },]}]" />
      </a-form-item>
      <a-form-item
        label="重复新密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请再次输入新密码"
          type="password"
          v-decorator="['confirm', {rules: [{required: true, message: '请再次输入新密码！'},
                                            {
                                              validator: compareToFirstPassword,
                                            }]}]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
  import { sysUserUpdatePwd } from '@/api/modular/system/userManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        visible_updPwd: false,
        userId: '',
        formUpdPwd: this.$form.createForm(this)
      }
    },
    methods: {
      open (id) {
        this.userId = id
        this.visible_updPwd = true
      },
      handleOkUpdPwd () {
        const { formUpdPwd: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.confirmLoading = true
            values.id = this.userId
            sysUserUpdatePwd(values).then((res) => {
              if (res.success) {
                this.$message.success('修改成功')
                this.handleCancel()
              } else {
                this.$message.error('修改失败：' + res.message)
              }
            // eslint-disable-next-line handle-callback-err
            }).finally((err) => {
              this.confirmLoading = false
            })
          }
        })
      },
      handleCancel () {
        this.visible_updPwd = false
      },
      compareToFirstPassword (rule, value, callback) {
        const formUpdPwd = this.formUpdPwd
        if (value && value !== formUpdPwd.getFieldValue('newPassword')) {
          // eslint-disable-next-line standard/no-callback-literal
          callback('请确认两次输入密码的一致性！')
        } else {
          callback()
        }
      },
      validateToNextPassword (rule, value, callback) {
        const formUpdPwd = this.formUpdPwd
        if (value && this.confirmDirty) {
          formUpdPwd.validateFields(['confirm'], { force: true })
        }
        callback()
      }
    }
  }
</script>