<template>
|
<div v-if="user">
|
<el-card style="margin: 10px;">
|
<el-row>
|
<el-col :span="12" align="left">
|
<b style="margin-right: 20px">{{ $t('menu.Profile') }}</b>
|
<el-button link size="default" type="primary" :icon="icon.Edit" @click="showUpdatePasswdView">
|
{{ $t('button.ChangePassword') }}
|
</el-button>
|
</el-col>
|
<el-col :span="12" align="right">
|
|
</el-col>
|
</el-row>
|
<el-divider style="margin: 10px 0px"/>
|
<el-main>
|
<el-row>
|
<el-col :span="24">
|
<el-form :model="user" size="default" :rules="rules" ref="dialogForm" label-width="150px">
|
<el-row>
|
<el-col :span="16">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.UserName')" prop="name">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
:disabled="!isInternalAccount"
|
v-model="user.name" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.Status')" prop="status">
|
<el-tag v-if="user.status === 0" type="success">
|
{{ $t('label.VALID') }}
|
</el-tag>
|
<el-tag v-else-if="user.status === 1" type="info">
|
{{ $t('label.LOCKED') }}
|
</el-tag>
|
<el-tag v-else-if="user.status === 2" type="danger">
|
{{ $t('label.EXPIRED') }}
|
</el-tag>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.Cellphone')" prop="cellphone">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="user.cellphone" disabled="disabled" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.Telephone')" prop="telephone">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
:disabled="!isInternalAccount"
|
v-model="user.telephone" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.Account')" prop="account">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="user.account" disabled="disabled" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="$t('label.Level')" prop="type">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="user.type" disabled="disabled" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item :label="$t('label.Email')" prop="email">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="user.email" disabled="disabled" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item :label="$t('label.Address')" prop="address">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
:disabled="!isInternalAccount"
|
v-model="user.address" placeholder=""/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="8" align="center">
|
<el-skeleton v-if="!isInternalAccount" style="width: 240px">
|
<template #template>
|
<el-skeleton-item variant="image" style="width: 240px; height: 240px"/>
|
<div style="padding: 14px">
|
<el-skeleton-item variant="p" style="width: 50%"/>
|
<div style="display: flex; align-items: center; justify-items: center;">
|
<el-skeleton-item variant="text" style="margin-right: 16px"/>
|
<el-skeleton-item variant="text" style="width: 30%"/>
|
</div>
|
</div>
|
</template>
|
</el-skeleton>
|
<AvatarUploadExt v-else :image="user.userface" :successCallBack="(data)=>user.userface=data"/>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-col>
|
</el-row>
|
</el-main>
|
<el-divider style="margin: 10px 0px"/>
|
<el-footer>
|
<el-row>
|
<el-col :span="18" align="left">
|
<div>
|
<el-icon style="font:normal bold 16px arial,serif;vertical-align: -10%">
|
<collection-tag/>
|
</el-icon>
|
<span style="margin-left: 2px; font:normal bold 16px arial,serif;">{{ $t('label.Tags') }}：</span>
|
<el-tag type="success" style="margin-right: 5px" v-for="(r, index) in selectedroles"
|
:key="index">{{ r.name }}
|
</el-tag>
|
</div>
|
</el-col>
|
<el-col :span="6" align="right">
|
<el-button size="default" type="primary"
|
v-if="isInternalAccount"
|
:icon="icon.CircleCheck" @click="onUpdateUserProfile">
|
{{ $t('button.Save') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-footer>
|
</el-card>
|
<div v-dialogdrag>
|
<el-dialog :header="passwdtitle" v-model="passwdDialogVisible" :close-on-click-modal="false"
|
class="el-dialog-customer" width="600px">
|
<template #header>
|
<el-row>
|
<el-col :span="12">
|
<el-icon style="font:normal bold 20px arial,serif;vertical-align: -10%">
|
<edit/>
|
</el-icon>
|
<span
|
style="margin-left: 10px; font:normal bold 20px arial,serif;">{{ $t('label.NewPassword') }}</span>
|
</el-col>
|
</el-row>
|
</template>
|
<el-card style="margin-top: 0px;">
|
<el-form :model="passwordmodel" size="default" status-icon :rules="passwordmodelrules"
|
ref="changePasswordForm" label-width="160px" class="demo-ruleForm">
|
<el-row style="margin-top: 20px;">
|
<el-col :span="20">
|
<el-form-item :label="$t('label.OriginalPassword')" prop="originalpassword">
|
<el-input size="default" type="password" maxlength="64" :prefix-icon="icon.Edit"
|
v-model="passwordmodel.originalpassword" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item :label="$t('label.NewPassword')" prop="newpassword">
|
<el-input size="default" type="password" maxlength="64" :prefix-icon="icon.Edit"
|
v-model="passwordmodel.newpassword" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item :label="$t('label.ConfirmPassword')" prop="confirmpassword">
|
<el-input size="default" type="password" maxlength="64" :prefix-icon="icon.Edit"
|
v-model="passwordmodel.confirmpassword" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
<template #footer>
|
<el-button size="default" type="primary" :icon="icon.CircleCheck" @click="updatePassword">
|
{{ $t('button.Submit') }}
|
</el-button>
|
<el-button size="default" :icon="icon.CircleClose" @click="passwdDialogVisible = false" type="danger"
|
plain>
|
{{ $t('button.Close') }}
|
</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import * as icon from '@element-plus/icons-vue'
|
import {onMounted, onBeforeUnmount, getCurrentInstance, reactive, toRefs} from "vue";
|
import {UpdateUserProfile, UpdateAccountPassword, doLoginOut} from "@/api/admin/security";
|
import Cookies from "js-cookie";
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import AvatarUploadExt from "@/components/common/AvatarUploadExt.vue";
|
|
export default {
|
name: "My-Profile",
|
components: {AvatarUploadExt},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore()
|
const state = reactive({
|
isInternalAccount: false,
|
passwdDialogVisible: false,
|
passwdtitle: '修改密码',
|
passwordmodel: {
|
userid: '',
|
originalpassword: '',
|
newpassword: '',
|
confirmpassword: ''
|
},
|
passwordmodelrules: {
|
originalpassword: [
|
{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.OriginalPassword')})}`,
|
trigger: 'blur'
|
}
|
],
|
newpassword: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.NewPassword')})}`,
|
trigger: 'blur'
|
}],
|
confirmpassword: [{
|
required: true,
|
validator: (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error(`${proxy.$t('message.IsRequired', {name: proxy.$t('label.ConfirmPassword')})}`));
|
} else if (value !== proxy.passwordmodel.newpassword) {
|
callback(new Error(`${proxy.$t('message.ConfirmPasswordNotMatchNewPassword')}`));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}]
|
},
|
|
user: {
|
name: '',
|
telephone: '',
|
phone: '',
|
address: '',
|
userface: ''
|
},
|
userrules: {},
|
selectedroles: store.roles,
|
rules: {
|
name: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Name')})}`,
|
trigger: 'blur'
|
}],
|
},
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
if (store.$state.user && store.$state.user.employee) {
|
state.user = store.$state.user.employee;
|
state.isInternalAccount = true;
|
} else {
|
state.user = store.$state.user;
|
}
|
};
|
const LoadData = () => {
|
|
};
|
const onUpdateUserProfile = () => {
|
if (state.user.id) {
|
proxy.$refs['dialogForm'].validate(valid => {
|
if (valid) {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSubmit')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
type: 'warning',
|
center: true
|
}).then(() => {
|
const rLoading = proxy.openLoading("#detailDialog");
|
UpdateUserProfile(state.user)
|
.then(resp => {
|
if (resp && resp.data) {
|
if (resp.data.code == 200) {
|
proxy.$message.success({message: `${proxy.$t('message.' + resp.data.message)}`});
|
LoadData();
|
} else {
|
proxy.$message.error({message: `${proxy.$t('message.' + resp.data.message)}`});
|
}
|
}
|
rLoading.close();
|
})
|
.catch(error => {
|
console.error(error);
|
proxy.$message.error({message: error});
|
});
|
}).catch((error) => {
|
console.error(error)
|
});
|
}
|
});
|
}
|
};
|
const showUpdatePasswdView = () => {
|
state.passwdDialogVisible = true;
|
};
|
const updatePassword = () => {
|
proxy.$refs['changePasswordForm'].validate(valid => {
|
if (valid) {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSubmit')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
type: 'warning',
|
center: true
|
}).then(() => {
|
const rLoading = proxy.openLoading("#detailDialog");
|
state.passwordmodel.accountid = store.$state.user.id;
|
|
UpdateAccountPassword(state.passwordmodel).then(resp => {
|
if (resp && resp.data) {
|
if (resp.data.code == 200) {
|
proxy.$message.success({message: `${proxy.$t('message.' + resp.data.message)}`});
|
state.passwdDialogVisible = false;
|
} else {
|
proxy.$message.error({message: `${proxy.$t('message.' + resp.data.message)}`});
|
}
|
}
|
rLoading.close();
|
}).catch(error => {
|
console.error(error);
|
proxy.$message.error({message: error});
|
});
|
})
|
}
|
});
|
};
|
const logout = () => {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSignOut')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
confirmButtonClass: 'confirmButtonClass',
|
cancelButtonClass: 'cancelButtonClass',
|
type: 'warning',
|
center: true,
|
}).then(() => {
|
localStorage.removeItem('Authorization');
|
localStorage.removeItem(WGURL.routeKey);
|
localStorage.removeItem("userid");
|
|
Cookies.remove('userid', {domain: WGURL.cookieDomain});
|
Cookies.remove('Authorization', {domain: WGURL.cookieDomain});
|
|
doLoginOut().then(success => {
|
if (WGURL.UseSSO) {
|
window.history.go(0);
|
} else {
|
proxy.$router.replace('/admin/login');
|
}
|
}).catch(error => {
|
console.error(error);
|
state.loading = false;
|
proxy.$message.error({
|
message: error
|
});
|
|
if (WGURL.UseSSO) {
|
window.history.go(0);
|
} else {
|
proxy.$router.replace('/admin/login');
|
}
|
});
|
}).catch((error) => {
|
console.error(error)
|
})
|
}
|
|
return {
|
...toRefs(state),
|
logout, icon,
|
onUpdateUserProfile,
|
showUpdatePasswdView,
|
updatePassword,
|
}
|
},
|
}
|
</script>
|
|
<style></style>
|
