NEZ-1059 feat: 个人中心增加编辑按钮，用户可以编辑个人信息

2021-10-14 13:40:13 +08:00
parent 6838c990c6
commit 72665f1bcb
6 changed files with 239 additions and 17 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1799,6 +1799,11 @@ const cn = {
    clear: '清空',
    enable: '启用',
    update: '更新',
+    edit: '编辑个人中心',
+    editProfile: '编辑个人中心',
+    username: '用户名',
+    name: '名称',
+    language: '语言',
    operationRecord: '操作记录',
    changePassword: '修改密码',
    oldPassword: '当前密码',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1682,6 +1682,11 @@ const en = {
    clear: 'Clear',
    enable: 'Enable',
    update: 'Update',
+    edit: 'Edit profile',
+    editProfile: 'Edit Profile',
+    username: 'User name',
+    name: 'Name',
+    language: 'Language',
    operationRecord: 'Operation log',
    changePassword: 'Change password',
    oldPassword: 'Current password',
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -213,6 +213,7 @@ export default {
          sessionStorage.setItem('nz-username', this.loginData.username)
          localStorage.setItem('nz-username', this.loginData.username)
          localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
+          localStorage.setItem('nz-language', this.lang)
          this.loginSuccess(res)
        } else {
          this.authToken = res.data.authToken
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -0,0 +1,155 @@
+<template>
+  <div v-clickoutside="{obj: editProfile, func: esc}" class="right-box right-box-profile">
+    <div class="right-box__header">
+      <div class="header__title">{{$t('profile.editProfile')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editProfile, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="profileForm" :model="editProfile" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('profile.name')" prop="name">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.name" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.username')" prop="username">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.username" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.email')" prop="email">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.email" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.mobile')" prop="mobile">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.mobile" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.role')" v-if="editProfile.roles[0].i18n != ''" prop="roles">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.role')" v-else prop="roles">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--language-->
+          <el-form-item :label="$t('config.user.language')" prop="lang">
+            <el-select id="account-input-language"
+                       class="right-box__select"
+                       v-model="editProfile.lang"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       size="small">
+              <template v-for="item in languageList">
+                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('profile.source')" prop="source">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.source" size="small" type="text"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editProfile, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+
+export default {
+  name: 'modelbox',
+  components: {
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {},
+  mixins: [editRigthBox],
+  data () {
+    return {
+      url: 'sys/user/profile',
+      rightBox: { profile: { show: false } },
+      editProfile: {},
+      languageList: [
+        { value: 'en', label: 'English' },
+        { value: 'cn', label: '简体中文' }
+      ],
+      roles: [],
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        email: [
+          { type: 'email', message: this.$t('validate.email') },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        roles: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        lang: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        source: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.isEdit = true
+        this.editProfile = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  created () {},
+  methods: {
+    clickoutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.$refs.profileForm.validate((valid) => {
+        if (valid) {
+          if (this.editProfile.id) {
+            this.editProfile.roleIds = this.editProfile.roles[0].id
+            this.$put(this.url, this.editProfile).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/common/rightboxcommon.scss';
+</style>
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -157,13 +157,13 @@ export default {
        document.location.href = '/'
      })
    },
-    refreshLang () {
-      this.language = localStorage.getItem('nz-language')
-      this.$i18n.locale = this.language
-      this.$nextTick(() => {
-        window.location.reload()
-      })
-    },
+    // refreshLang () {
+    //   this.language = localStorage.getItem('nz-language')
+    //   this.$i18n.locale = this.language
+    //   this.$nextTick(() => {
+    //     // window.location.reload()
+    //   })
+    // },
    showPinDialog () {
      // this.showChangePin = true
      this.$router.push({
@@ -184,7 +184,7 @@ export default {
    initEvent () {
      bus.$on('login', () => {
        this.username = sessionStorage.getItem('nz-username')
-        this.refreshLang()
+        // this.refreshLang()
      })
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL)
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -30,6 +30,10 @@
          </el-popover>
        </div>
      </div>
+      <button id="asset-edit-cancel" class="profile-left__btn" @click="profileBox">
+        <span><i class="nz-icon nz-icon-edit" style="color: #666666;margin-right: 5px;font-size: 18px"></i></span>
+        <span>{{$t('profile.edit')}}</span>
+      </button>
      <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
        <span style="margin:0 18px 0 0"><i :class="item.icon"></i></span>
        <div class="profile-left__center-title">
@@ -39,7 +43,7 @@
        </div>
      </div>
      <div class="profile-left__center">
-       <span style="margin:0 10px 10px 0"><i class="nz-icon nz-icon-yanzhengma" style="color: orange"></i></span>
+       <span style="margin:0 18px 10px 0"><i class="nz-icon nz-icon-zhongzhi2FA1" style="color: orange;"></i></span>
       <div class="profile-left__center-title">
         <div>{{$t('profile.twoFactorAuthentication')}}</div>
       </div>
@@ -126,20 +130,27 @@
        </button>
      </div>
    </el-dialog>
+    <transition name="right-box">
+      <profile-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></profile-box>
+    </transition>
  </div>
 </template>

 <script>
 import operationRecord from './operationRecord'
-import QRCode from "qrcodejs2";
-import MessageBox from "element-ui/packages/message-box/src/main";
-import i18n from "@/components/common/i18n";
+import QRCode from "qrcodejs2"
+import MessageBox from "element-ui/packages/message-box/src/main"
+import i18n from "@/components/common/i18n"
+import profileBox from '@/components/common/rightBox/profileBox'
+import dataList from '@/components/common/mixin/dataList'

 export default {
  name: 'profile',
  components: {
-    operationRecord
+    operationRecord,
+    profileBox
  },
+  mixins: [dataList],
  data () {
    return {
      username: sessionStorage.getItem('nz-username'),
@@ -152,6 +163,18 @@ export default {
      mfaLevel: 0,
      authKey: '',
      authToken: '',
+      url: 'sys/user/profile',
+      object: {},
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        username: '',
+        role: '',
+        email: '',
+        mobile: '',
+        language: 'en',
+        source: ''
+      },
      // 右侧列表
      tableProfile: [
        {
@@ -201,6 +224,9 @@ export default {
  mounted () {
    this.personalCenter()
  },
+  beforeUpdate () {
+    this.personalCenter()
+  },
  methods: {
    // 请求后端数据
    personalCenter () {
@@ -209,7 +235,11 @@ export default {
          if (response.code === 200) {
            this.userList = response.user
            this.mfaLevel = response.user.mfaLevel
+            if (response.user.roles[0].i18n) {
              this.tableProfile[0].prop = this.userList.roles[0].i18n
+            } else {
+              this.tableProfile[0].prop = this.userList.roles[0].name
+            }
            this.tableProfile[1].prop = this.userList.email
            this.tableProfile[2].prop = this.userList.mobile
            if (this.userList.lang == 'cn') {
@@ -278,6 +308,12 @@ export default {
        })
      })
    },
+    profileBox () {
+      this.rightBox.show = true
+      this.$get(this.url).then(res => {
+        this.object = res.user
+      })
+    },
    closeDialog () {
      this.authBindShow = false
      this.bindAuthCode = ''
@@ -353,10 +389,11 @@ export default {
    height: calc(100% - 10px);
    width: 360px;
    overflow: auto;
+    position: relative;
    .profile-left__header {
      height: 200px;
-      width: 100%;
-      margin: 10px 0;
+      width: calc(100% - 18px);
+      margin:0 0 50px 18px;
      text-align: center;
      display: flex;
      justify-content: flex-start;
@@ -438,6 +475,26 @@ export default {
        }
      }
    }
+    .profile-left__btn {
+      border: 1px solid rgba(0,0,0,0.15);
+      border-radius: 4px;
+      background: #fff;
+      min-width: 132px;
+      height: 36px;
+      position: absolute;
+      top: 175px;
+      left: 100px;
+      padding: 0 20px;
+      cursor: pointer;
+      span {
+        font-family: Roboto-Regular;
+        font-size: 14px;
+        color: #333333;
+        text-align: left;
+        line-height: 22px;
+        font-weight: 400;
+      }
+    }
    .profile-left__center:nth-of-type(7) {
      margin-bottom: 0;
    }
@@ -459,7 +516,6 @@ export default {
        color: #8871DB;
      }
      .profile-left__center-title {
-        margin-left: 8px;
        margin-top: 1px;
        div:nth-of-type(1) {
          padding-bottom: 5px;