erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-07-02 13:55:35 +07:00
parent e91f0d22c4
commit 976816d408
7 changed files with 290 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/components/user/Profile.vue
View File

@@ -1,53 +1,64 @@
<template>
<div
class="columns mx-0"
v-if="login"
v-if="store.login"
class="fixed-grid has-12-cols"
>
<div class="column is-3">
<div class="leftbox">
<Avatarbox
class="ml-4"
v-bind="{
image: undefined,
text: login.fullname.substring(0, 1).toUpperCase(),
type: 'primary',
size: 'three',
<div class="grid is-gap-0">
<div class="cell is-col-span-3">
<div
class="card h-full p-4 has-background-grey-100"
:style="{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
}"
/>
<div>
<p class="ml-4 mt-3 fsb-16">
<span>{{ login.fullname }}</span>
</p>
<p class="ml-4 mt-1 fs-14 has-text-grey">
<span>{{ login.username }}</span>
</p>
<p class="border-bottom mt-2"></p>
<aside
class="menu"
style="padding-top: 22px"
>
<ul class="menu-list">
<li
v-for="(v, i) in tabs"
style="list-style: none"
>
<a
:class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
@click="changeTab(v)"
>
<div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
<Avatarbox
v-bind="{
image: undefined,
text: store.login.fullname.substring(0, 1).toUpperCase(),
type: 'primary',
size: 12,
}"
/>
<p class="mt-3 fsb-16">{{ store.login.fullname }}</p>
<p class="fs-14 has-text-grey">{{ store.login.username }}</p>
</div>
<div>
<aside class="menu">
<ul class="menu-list is-flex is-flex-direction-column is-gap-1">
<li
v-for="(v, i) in tabs"
:key="i"
style="list-style: none"
>
{{ isVietnamese ? v.vi : v.en }}
</a>
</li>
</ul>
</aside>
<a
:class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
style="text-decoration: none"
@click="changeTab(v)"
>
{{ isVietnamese ? v.vi : v.en }}
</a>
</li>
</ul>
</aside>
</div>
</div>
</div>
<div class="cell is-col-span-9">
<div
class="card h-full p-4 has-background-grey-100"
:style="{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: 'none',
}"
>
<UserInfo v-if="tab === 'info'" />
<ChangePass v-else-if="tab === 'password'" />
<Logout v-else-if="tab === 'logout'" />
</div>
</div>
</div>
<div class="column">
<UserInfo v-if="tab === 'info'"></UserInfo>
<ChangePass v-else-if="tab === 'password'"></ChangePass>
<Logout v-else-if="tab === 'logout'"></Logout>
</div>
</div>
</template>
@@ -55,24 +66,16 @@
import Logout from "~/components/user/Logout";
import UserInfo from "~/components/user/UserInfo";
import ChangePass from "~/components/user/ChangePass";
const store = useStore();
const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");
var login = store.login;
var tabs = [
const isVietnamese = computed(() => store.lang === "vi");
const tabs = [
{ code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
{ code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
{ code: "logout", vi: "Đăng xuất", en: "Logout" },
];
var tab = ref("info");
const tab = ref("info");
function changeTab(v) {
tab.value = v.code;
}
</script>
<style>
.leftbox {
border-radius: 15px;
background: rgb(245, 245, 246);
padding: 20px;
}
</style>