NEZ-1059 feat: 个人中心 增加 编辑按钮，用户可以编辑个人信息
This commit is contained in:
@changcode
155
nezha-fronted/src/components/common/rightBox/profileBox.vue
Normal file
155
nezha-fronted/src/components/common/rightBox/profileBox.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user