|
|
@@ -9,47 +9,13 @@
|
|
|
<div class="open-page-header-title">
|
|
|
{{ $t('index.headetag') }}
|
|
|
</div>
|
|
|
- <div class="open-page-header-icons">
|
|
|
- <el-button class="custom-icon-button">
|
|
|
- <img :src="zk" style="width: 22px;"/>
|
|
|
- </el-button>
|
|
|
- <el-button class="custom-icon-button">
|
|
|
- <img :src="help" style="width: 22px;"/>
|
|
|
- </el-button>
|
|
|
- <el-avatar :src="user" :size="22"/>
|
|
|
- <el-dropdown>
|
|
|
- <div class="user-dropdown-trigger">
|
|
|
- <span class="nickname">{{ nickName }}</span>
|
|
|
- <el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
|
- </div>
|
|
|
-
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <!-- 上半部分：个人信息和修改密码 -->
|
|
|
- <el-dropdown-item @click="handleProfile">
|
|
|
- <el-icon><User /></el-icon>
|
|
|
- <span>{{ $t('index.userinfo') }}</span>
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item @click="handleChangePassword">
|
|
|
- <el-icon><Key /></el-icon>
|
|
|
- <span>{{ $t('index.changePassword') }}</span>
|
|
|
- </el-dropdown-item>
|
|
|
-
|
|
|
- <!-- 下半部分：退出登录 -->
|
|
|
- <el-dropdown-item divided @click="handleLogout" style="color: #F56C6C;">
|
|
|
- <el-icon><SwitchButton /></el-icon>
|
|
|
- <span>{{ $t('index.logout') }}</span>
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
+ <HeaderIcons />
|
|
|
</div>
|
|
|
<div class="open-page-content">
|
|
|
<div class="open-page-leftside">
|
|
|
<el-menu
|
|
|
class="open-page-menu"
|
|
|
- default-active="activeIndex"
|
|
|
+ :default-active="activeIndex"
|
|
|
:router='true'
|
|
|
>
|
|
|
<el-menu-item index="/project">
|
|
|
@@ -69,110 +35,16 @@
|
|
|
</div>
|
|
|
</el-main>
|
|
|
|
|
|
- <el-dialog v-model="dialog.userinfoDialog" align-center :append-to-body="true"
|
|
|
- width="500" class="dialog_class" draggable>
|
|
|
-
|
|
|
- <template #header="{ titleId, titleClass }">
|
|
|
- <div class="my-header ">
|
|
|
- <!-- <el-image :src="icon" fit="contain"></el-image> -->
|
|
|
- <h4 :id="titleId" :class="titleClass">{{ $t('dialog.userinfo') }}</h4>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <el-card class="userinfo-card" shadow="never">
|
|
|
- <template #header>
|
|
|
- <div class="userinfo-header">
|
|
|
- <el-avatar :src="user" :size="30"/>
|
|
|
- <h4 class="userinfo-nickname">{{ userStore.userInfo.nickName || 'User' }}</h4>
|
|
|
- </div>
|
|
|
-
|
|
|
- </template>
|
|
|
- <el-form :label-width="labelWidth" class="userinfo-form">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label="$t('dialog.username')">
|
|
|
- {{ userStore.userInfo.userName }}
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="$t('dialog.mobileNo')">
|
|
|
- {{ userStore.userInfo.mobileNo }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label="$t('dialog.nickname')">
|
|
|
- {{ userStore.userInfo.nickName || 'User' }}
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="$t('dialog.email')">
|
|
|
- {{ userStore.userInfo.email }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-form-item :label="$t('dialog.regTime')">
|
|
|
- {{ userStore.userInfo.regTime }}
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <template #footer>
|
|
|
- <span class="userinfo-footer lastbtn">
|
|
|
- <el-button @click="dialog.userinfoDialog = false">{{ $t('dialog.cancel') }}</el-button>
|
|
|
- <el-button @click="dialog.userinfoDialog = false">
|
|
|
- {{ $t('dialog.ok') }}
|
|
|
- </el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
-
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 修改密码 -->
|
|
|
- <el-dialog v-model="dialog.changePassword" align-center :append-to-body="true"
|
|
|
- width="500" class="dialog_class" draggable>
|
|
|
-
|
|
|
- <template #header="{ titleId, titleClass }">
|
|
|
- <div class="my-header ">
|
|
|
- <!-- <el-image :src="icon" fit="contain"></el-image> -->
|
|
|
- <h4 :id="titleId" :class="titleClass">{{ $t('dialog.changePassword') }}</h4>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <el-card class="userinfo-card" shadow="never">
|
|
|
-
|
|
|
- <el-form :label-width="labelWidth1">
|
|
|
- <el-form-item :label="`${$t('dialog.oldPassword')}：`">
|
|
|
- <el-input v-model="pwd.oldPassword"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- :placeholder="$t('dialog.inputOldPassword')" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="`${$t('dialog.newPassword')}：`">
|
|
|
- <el-input v-model="pwd.newPassword"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- :placeholder="$t('dialog.inputNewPassword')" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="`${$t('dialog.confirmNewPassword')}：`">
|
|
|
- <el-input v-model="pwd.confirmNewPassword"
|
|
|
- type="password"
|
|
|
- show-password
|
|
|
- :placeholder="$t('dialog.inputConfirmNewPassword')" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <template #footer>
|
|
|
- <span class="lastbtn">
|
|
|
- <el-button @click="dialog.changePassword = false">{{ $t('dialog.cancel') }}</el-button>
|
|
|
- <el-button @click="ChangePassword">
|
|
|
- {{ $t('dialog.ok') }}
|
|
|
- </el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
+
|
|
|
|
|
|
- </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import myheader from '@/components/layout/header.vue'
|
|
|
+import HeaderIcons from '@/components/layout/HeaderIcons.vue'
|
|
|
+
|
|
|
import { RouterView, RouterLink,useRouter } from "vue-router"
|
|
|
import { request, enPassword } from "@/utils/request";
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
@@ -192,26 +64,13 @@ import user from '@/assets/img/user.png'
|
|
|
const router = useRouter();
|
|
|
const userStore = useUserStore();
|
|
|
|
|
|
-const nickName = userStore.userInfo.nickName || 'User';
|
|
|
-
|
|
|
-const labelWidth = computed(() => {
|
|
|
- return locale.value === 'zh-CN' ? '80px' : '120px'
|
|
|
-})
|
|
|
-
|
|
|
-const labelWidth1 = computed(() => {
|
|
|
- return locale.value === 'zh-CN' ? '90px' : '140px'
|
|
|
-})
|
|
|
|
|
|
let dialog = ref({
|
|
|
userinfoDialog: false,
|
|
|
changePassword: false,
|
|
|
});
|
|
|
|
|
|
-let pwd = ref({
|
|
|
- oldPassword: '',
|
|
|
- newPassword: '',
|
|
|
- confirmNewPassword: ''
|
|
|
-})
|
|
|
+
|
|
|
|
|
|
const activeIndex = computed(() => {
|
|
|
// 获取当前路由的所有匹配路径
|
|
|
@@ -220,58 +79,6 @@ const activeIndex = computed(() => {
|
|
|
return matched[matched.length - 1]?.path || '/project'
|
|
|
})
|
|
|
|
|
|
-const handleProfile = () => {
|
|
|
- dialog.value.userinfoDialog = true;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-const handleChangePassword = () => {
|
|
|
- dialog.value.changePassword = true;
|
|
|
- pwd.value.oldPassword = '';
|
|
|
- pwd.value.newPassword = '';
|
|
|
- pwd.value.confirmNewPassword = '';
|
|
|
-}
|
|
|
-
|
|
|
-const ChangePassword = () => {
|
|
|
- if (!pwd.value.oldPassword) {
|
|
|
- ElMessage.error(t('dialog.inputOldPassword'));
|
|
|
- return;
|
|
|
- }else if(!pwd.value.newPassword) {
|
|
|
- ElMessage.error(t('dialog.inputNewPassword'));
|
|
|
- return;
|
|
|
- }else if(!pwd.value.confirmNewPassword) {
|
|
|
- ElMessage.error(t('dialog.inputConfirmNewPassword'));
|
|
|
- return;
|
|
|
- }
|
|
|
- if (pwd.value.newPassword !== pwd.value.confirmNewPassword) {
|
|
|
- ElMessage.error(t('dialog.passwordMismatch'));
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const params = {
|
|
|
- transCode: "B00003",
|
|
|
- oldPassword: enPassword(pwd.value.oldPassword),
|
|
|
- newPassword: enPassword( pwd.value.newPassword),
|
|
|
- }
|
|
|
-
|
|
|
- request(params).then(res => {
|
|
|
- ElMessage.success(t('dialog.passwordChangeSuccess'));
|
|
|
- dialog.value.changePassword = false;
|
|
|
- }).catch(error => {
|
|
|
- console.error(error);
|
|
|
- ElMessage.error(t('dialog.passwordChangeFailed'));
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-const handleLogout = () => {
|
|
|
- userStore.clearUserInfo();
|
|
|
- removeToken();
|
|
|
- removeUserId();
|
|
|
- // 跳转到登录页面
|
|
|
- ElMessage.success(t('message.logoutSuccess'));
|
|
|
- router.push('/login');
|
|
|
-}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -294,13 +101,6 @@ const handleLogout = () => {
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
-.open-page-header-icons{
|
|
|
- width: 150px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-}
|
|
|
-
|
|
|
.open-page-header-icons .el-button {
|
|
|
padding: 0;
|
|
|
border: none;
|
|
|
@@ -345,22 +145,4 @@ const handleLogout = () => {
|
|
|
text-transform: none;
|
|
|
}
|
|
|
|
|
|
-.user-dropdown-trigger {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.userinfo-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.userinfo-footer {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
</style>
|
tangjunhao