484 lines
14 KiB
Vue
484 lines
14 KiB
Vue
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: kBank
|
|||
|
|
* @Date: 2023-02-23 15:59:57
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<div class="page">
|
|||
|
|
<topBar
|
|||
|
|
v-if="topList.length > 0"
|
|||
|
|
:top-list="topList"
|
|||
|
|
:moren="moren"
|
|||
|
|
/>
|
|||
|
|
<div class="main">
|
|||
|
|
<div class="user-info">
|
|||
|
|
<div class="title">{{ $t('MN_F_17') }}</div>
|
|||
|
|
<div class="avatar">
|
|||
|
|
<el-upload
|
|||
|
|
class="upload-demo"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
:action="uploadImgUrl"
|
|||
|
|
:on-success="handleAvatarSuccess"
|
|||
|
|
:headers="headers"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
v-if="userInfo.headPath==''||userInfo.headPath==null"
|
|||
|
|
style="width: 140px"
|
|||
|
|
src="@/assets/images/avatar.png"
|
|||
|
|
alt=""
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
v-if="userInfo.headPath"
|
|||
|
|
style="width: 140px;height: 140px"
|
|||
|
|
:src="userInfo.headPath"
|
|||
|
|
onerror="this.src='';this.οnerrοr=null"
|
|||
|
|
alt=""
|
|||
|
|
>
|
|||
|
|
</el-upload>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-boxs" v-if="userInfo.userType!=9">
|
|||
|
|
<div v-if="userInfo.countryList" class="">
|
|||
|
|
<span class="" style="padding-right: 20px">{{$t('MN_F_18')}}</span>
|
|||
|
|
<span v-for="(item,index) in userInfo.countryList">
|
|||
|
|
{{ item.shortName }}<span v-if="index+1!=userInfo.countryList.length">/</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-boxs" v-if="userInfo.userType!=9">
|
|||
|
|
<div v-if="userInfo.vertexList" class="">
|
|||
|
|
<span class="" style="padding-right: 20px">{{$t('MN_F_19')}}</span>
|
|||
|
|
<span v-for="(item,index) in userInfo.vertexList">
|
|||
|
|
{{ item.vertexName }}<span v-if="index+1!=userInfo.vertexList.length">/</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('MN_F_20')}}</div>
|
|||
|
|
<div class="">{{ userInfo.userName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('MN_F_21')}}</div>
|
|||
|
|
<div class="">{{ userInfo.nickName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box">
|
|||
|
|
<div class="">{{$t('MN_F_T_228')}}</div>
|
|||
|
|
<div class="">{{ userInfo.userName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box">
|
|||
|
|
<div class="">{{$t('PER_DA_14')}}</div>
|
|||
|
|
<div class="">{{ userInfo.nickName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('MN_F_22')}}</div>
|
|||
|
|
<div class="">{{ userInfo.authority==0?$t('ENU_POPUP_TYPE_1'):$t('ENU_POPUP_TYPE_2') }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box">
|
|||
|
|
<div class="">{{$t('w_0052')}}</div>
|
|||
|
|
<div class="">{{ userInfo.phonenumber }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('MN_F_24')}}</div>
|
|||
|
|
<div class="">{{ userInfo.deptName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('MN_F_25')}}</div>
|
|||
|
|
<div v-if="userInfo.roleList" class="">{{ userInfo.roleList[0].roleName }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-box" v-if="userInfo.userType!=9">
|
|||
|
|
<div class="">{{$t('PER_DA_9')}}</div>
|
|||
|
|
<div class="">{{ userInfo.creationTime }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-info" style="flex: 1;margin:0 20px;">
|
|||
|
|
<div class="title">{{$t('MN_F_26')}}</div>
|
|||
|
|
<div class="user-nav">
|
|||
|
|
<div v-for="(item,index) in userNavList" class="boxs" @click="naxIndex=index">
|
|||
|
|
<div :style="naxIndex==index?'color:#C8161D':''">{{ item.name }}</div>
|
|||
|
|
<div v-if="naxIndex==index" class="line" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="lines" />
|
|||
|
|
<div class="content">
|
|||
|
|
<div v-if="naxIndex==0">
|
|||
|
|
<el-form
|
|||
|
|
ref="loginForm"
|
|||
|
|
:model="loginForm"
|
|||
|
|
:rules="rules"
|
|||
|
|
class="login-form"
|
|||
|
|
auto-complete="on"
|
|||
|
|
label-position="left"
|
|||
|
|
>
|
|||
|
|
<el-form-item :label="$t('MN_F_21')" prop="username">
|
|||
|
|
<el-input
|
|||
|
|
ref="username"
|
|||
|
|
v-model="loginForm.username"
|
|||
|
|
style="width: 600px"
|
|||
|
|
clearable
|
|||
|
|
:placeholder="$t('S_C_70')"
|
|||
|
|
name="username"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
auto-complete="on"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="$t('w_0052')" prop="phone">
|
|||
|
|
<el-input
|
|||
|
|
ref="phone"
|
|||
|
|
v-model="loginForm.phone"
|
|||
|
|
style="width: 600px"
|
|||
|
|
clearable
|
|||
|
|
:placeholder="$t('w_0052')"
|
|||
|
|
name="phone"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
auto-complete="on"
|
|||
|
|
max-length="11"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="naxIndex==1">
|
|||
|
|
<el-form
|
|||
|
|
ref="loginForm1"
|
|||
|
|
:model="loginForm1"
|
|||
|
|
:rules="rules"
|
|||
|
|
class="login-form"
|
|||
|
|
auto-complete="on"
|
|||
|
|
label-position="left"
|
|||
|
|
>
|
|||
|
|
<el-form-item style="margin-left: 12px" :label="$t('PER_DA_37')" prop="oldPassword">
|
|||
|
|
<el-input
|
|||
|
|
ref="oldPassword"
|
|||
|
|
v-model="loginForm1.oldPassword"
|
|||
|
|
style="width: 600px"
|
|||
|
|
clearable
|
|||
|
|
:placeholder="$t('w_0348')"
|
|||
|
|
name="username"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
show-password
|
|||
|
|
auto-complete="on"
|
|||
|
|
max-length="20"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item style="margin-left: 12px" :label="$t('MN_F_29')" prop="newPassword">
|
|||
|
|
<el-input
|
|||
|
|
ref="newPassword"
|
|||
|
|
v-model="loginForm1.newPassword"
|
|||
|
|
style="width: 600px"
|
|||
|
|
clearable
|
|||
|
|
:placeholder="$t('w_0048')"
|
|||
|
|
name="phone"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
show-password
|
|||
|
|
auto-complete="on"
|
|||
|
|
max-length="20"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="$t('MN_F_30')" prop="newPassword1">
|
|||
|
|
<el-input
|
|||
|
|
ref="newPassword1"
|
|||
|
|
v-model="loginForm1.newPassword1"
|
|||
|
|
style="width: 600px"
|
|||
|
|
clearable
|
|||
|
|
:placeholder="$t('w_0050')"
|
|||
|
|
show-password
|
|||
|
|
name="phone"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
auto-complete="on"
|
|||
|
|
max-length="20"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer">
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
class="thebtn2"
|
|||
|
|
> {{ $t('ENU_P_TYPE0') }}</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="small"
|
|||
|
|
class="thebtn1"
|
|||
|
|
@click="submit"
|
|||
|
|
> {{ $t('MN_F_32') }}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Editor from '@/components/Editor'
|
|||
|
|
import * as api from '@/api/translate'
|
|||
|
|
import topBar from '@/components/topBar'
|
|||
|
|
import { getToken } from '@/utils/auth'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Editor,
|
|||
|
|
topBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
fileList: [],
|
|||
|
|
noneUploadImg: false,
|
|||
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/manage/user/center-head',
|
|||
|
|
headers: {
|
|||
|
|
Authorization: getToken()
|
|||
|
|
},
|
|||
|
|
coverList: [],
|
|||
|
|
loginForm: {
|
|||
|
|
username: '',
|
|||
|
|
phone: ''
|
|||
|
|
},
|
|||
|
|
loginForm1: {
|
|||
|
|
oldPassword: '',
|
|||
|
|
newPassword: '',
|
|||
|
|
newPassword1: ''
|
|||
|
|
},
|
|||
|
|
naxIndex: 0,
|
|||
|
|
moren: 'userCentre',
|
|||
|
|
userNavList: [{ 'name': this.$t('MN_F_26') }, { 'name': this.$t('MN_F_34') }],
|
|||
|
|
topList: [
|
|||
|
|
{
|
|||
|
|
name: this.$t('MN_F_16'),
|
|||
|
|
path: 'userCentre'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
ruleForm: {
|
|||
|
|
functionType: 1,
|
|||
|
|
startTime: '',
|
|||
|
|
endTime: '',
|
|||
|
|
websiteTypes: [],
|
|||
|
|
publishLocations: [],
|
|||
|
|
grades: []
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
oldPassword: [{ required: true, message: this.$t('w_0498'), trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
|||
|
|
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
|||
|
|
],
|
|||
|
|
newPassword: [{ required: true, message: this.$t('w_0499'), trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
|||
|
|
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
|||
|
|
],
|
|||
|
|
newPassword1: [{ required: true, message: this.$t('w_0500'), trigger: 'blur' },
|
|||
|
|
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
|||
|
|
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
|||
|
|
],
|
|||
|
|
username: [{ required: true, message: this.$t('MN_F_T_778'), trigger: 'blur' }],
|
|||
|
|
phone: [{ required: true, message: this.$t('w_0053'), trigger: 'blur' },
|
|||
|
|
{ pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: this.$t('CK_KS_73') }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
localList: [],
|
|||
|
|
popList: [],
|
|||
|
|
webList: [],
|
|||
|
|
gradeList: [],
|
|||
|
|
pkId: '',
|
|||
|
|
funcList: [],
|
|||
|
|
jsList: [],
|
|||
|
|
isAdmin: false,
|
|||
|
|
lookOver: false,
|
|||
|
|
userInfo: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getUserInfo()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleAvatarSuccess(response, file, fileList) {
|
|||
|
|
if (response.code == '200') {
|
|||
|
|
this.$message({
|
|||
|
|
message: response.msg,
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
this.userInfo.headPath = response.data.url
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getUserInfo() {
|
|||
|
|
api.getUserInfo().then((res) => {
|
|||
|
|
this.userInfo = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
if (this.naxIndex == 0) {
|
|||
|
|
this.$refs.loginForm.validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
api.updateUserInfo({ 'nickName': this.loginForm.username, 'phone': this.loginForm.phone }).then((res) => {
|
|||
|
|
if (res.code == '200') {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
this.getUserInfo()
|
|||
|
|
this.loginForm = {
|
|||
|
|
'userName': '',
|
|||
|
|
'phone': ''
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.naxIndex == 1) {
|
|||
|
|
this.$refs.loginForm1.validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (this.loginForm1.newPassword1 !== this.loginForm1.newPassword) {
|
|||
|
|
this.$message({
|
|||
|
|
message: this.$t('MN_F_35')
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
api.updateUserPwd({ 'oldPassword': this.loginForm1.oldPassword, 'newPassword': this.loginForm1.newPassword }).then((res) => {
|
|||
|
|
if (res.code == '200') {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
this.getUserInfo()
|
|||
|
|
this.loginForm1 = {
|
|||
|
|
'oldPassword': '',
|
|||
|
|
'oldPassword1': '',
|
|||
|
|
'newPassword': ''
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.upload-demo{
|
|||
|
|
width: 150px;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-form-item__error{
|
|||
|
|
left: 80px;
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
padding: 20px 20px;
|
|||
|
|
}
|
|||
|
|
.lines{
|
|||
|
|
height: 4px;
|
|||
|
|
background: rgba(0,0,0,0.05);
|
|||
|
|
opacity: 1;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 108px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.user-info{
|
|||
|
|
width: 440px;
|
|||
|
|
height: 868px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
|||
|
|
opacity: 1;
|
|||
|
|
position: relative;
|
|||
|
|
.user-nav{
|
|||
|
|
display: flex;
|
|||
|
|
.boxs{
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 30px 30px 10px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.line{
|
|||
|
|
width: 60px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #C8161D;
|
|||
|
|
border-radius: 0px 0px 0px 0px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.avatar{
|
|||
|
|
height: 190px;
|
|||
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.div-boxs{
|
|||
|
|
//height: 60px;
|
|||
|
|
padding:15px 20px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
//line-height: 60px;
|
|||
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-weight: 600;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.div-box{
|
|||
|
|
padding:15px 20px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-weight: 600;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 20px 0 10px 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.page {
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
font-size: 14px;
|
|||
|
|
.main {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-select {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
height: 68px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
|
|||
|
|
// margin: 0 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
.thebtn1 {
|
|||
|
|
background: #3181e5;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 9px 45px;
|
|||
|
|
}
|
|||
|
|
.thebtn2 {
|
|||
|
|
background: #cccccc;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 9px 45px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|