tnbapp/src/views/devops/user/UserProfile.vue

<template>
  <el-container>
    <el-header height="220">
      <h3>个人资料</h3>
    </el-header>
    <el-main>
      <el-row>
        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>我的帐号</span>
              </div>
              <div class="text item">
                <el-form v-if="loginUser !== null" ref="form" :model="loginUser" label-width="80px">
                  <el-form-item label="用户名">
                    <el-input v-model="loginUser.username" style="width: 70%; padding-right: 10px" readonly />
                    <el-button size="mini" type="info" @click="showUpdateDialog(1)">修改</el-button>
                  </el-form-item>
                  <el-form-item label="用户密码">
                    <el-input value="**********" style="width: 70%; padding-right: 10px" readonly />
                    <el-button size="mini" type="info" @click="showUpdateDialog(2)">修改</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog
      :title="updateTitle"
      append-to-body
      :visible.sync="updateUsernameDialog"
      width="30%"
      center
    >
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px;">
        <el-form ref="form" :model="updateUsernameForm" label-width="100px">
          <el-form-item label="新用户名" label-width="100px">
            <el-input v-model="updateUsernameForm.newUsername" style="width: 45%; padding-right: 10px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onUpdateUsername">确定</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>
    <el-dialog
      :title="updateTitle"
      append-to-body
      :visible.sync="updatePasswordDialog"
      width="30%"
      center
    >
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
        <el-form ref="form" :model="updatePasswordForm" label-width="100px">
          <el-form-item label="当前密码">
            <el-input v-model="updatePasswordForm.currentPasswd" style="padding-right: 1px"/>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="updatePasswordForm.newPasswd" style="padding-right: 1px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onUpdatePassword">确定</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>
  </el-container>
</template>

<script>
import { getAuthedUser } from '@/utils/auth'
import { updateAccountName, updateAccountPasswd } from '@/api/devops'

export default {
  name: 'UserProfile',
  data() {
    return {
      updateTitle: null,
      updateUsernameDialog: false,
      updateUsernameForm: {
        newUsername: null
      },
      updatePasswordDialog: false,
      updatePasswordForm: {
        currentPasswd: null,
        newPasswd: null
      },
      loginUser: null
    }
  },
  mounted() {
    this.loginUser = getAuthedUser()
  },
  created() {
    document.title = '我的'
  },
  methods: {
    showUpdateDialog(type) {
      if (type === 1) {
        this.updateType = 1
        this.updateTitle = '修改用户名'
        this.updateUsernameDialog = true
      } else if (type === 2) {
        this.updateType = 2
        this.updateTitle = '修改用户密码'
        this.updatePasswordDialog = true
      }
    },
    onUpdateUsername() {
      const formData = new FormData()
      formData.append('newUsername', this.updateUsernameForm.newUsername)
      updateAccountName(formData).then(resp => {
        this.$message.info(resp.msg)
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.updateUsernameDialog = false
      })
    },
    onUpdatePassword() {
      const formData = new FormData()
      formData.append('currentPasswd', this.updatePasswordForm.currentPasswd)
      formData.append('newPasswd', this.updatePasswordForm.newPasswd)
      updateAccountPasswd(formData).then(resp => {
        this.$message.info(resp.msg)
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.updatePasswordDialog = false
      })
    }
  }
}
</script>

<style>
</style>