feat: view personnel info (wip)
This commit is contained in:
Methapon2001
parent
7a9f0451a9
commit
dfeb1061c7
2 changed files with 360 additions and 0 deletions
353
src/pages/02_personnel-management/person-info/MainPage.vue
Normal file
353
src/pages/02_personnel-management/person-info/MainPage.vue
Normal file
|
|
@ -0,0 +1,353 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
import useUserStore from 'stores/user';
|
||||||
|
import useBranchStore from 'stores/branch';
|
||||||
|
|
||||||
|
import { User } from 'stores/user/types';
|
||||||
|
import { Branch, BranchWithChildren } from 'stores/branch/types';
|
||||||
|
|
||||||
|
import PersonCard from 'components/home/PersonCard.vue';
|
||||||
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
|
import useAddressStore, {
|
||||||
|
District,
|
||||||
|
Province,
|
||||||
|
SubDistrict,
|
||||||
|
} from 'src/stores/address';
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const addrStore = useAddressStore();
|
||||||
|
const branchStore = useBranchStore();
|
||||||
|
|
||||||
|
const { data: userData } = storeToRefs(userStore);
|
||||||
|
|
||||||
|
const currentUser = ref<User>();
|
||||||
|
const currentUserBranch = ref<Branch[]>([]);
|
||||||
|
const currentHQ = ref<string | null>();
|
||||||
|
const currentBR = ref<string | null>();
|
||||||
|
|
||||||
|
const hq = ref<Branch[]>([]);
|
||||||
|
const br = ref<Branch[]>([]);
|
||||||
|
|
||||||
|
async function getCurrentUser() {
|
||||||
|
if (typeof route.params.id !== 'string') return;
|
||||||
|
|
||||||
|
const record = userData.value?.result.find((v) => v.id === route.params.id);
|
||||||
|
|
||||||
|
if (record) return (currentUser.value = record);
|
||||||
|
|
||||||
|
const res = await userStore.fetchById(route.params.id);
|
||||||
|
|
||||||
|
if (res) currentUser.value = res;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getUserBranch() {
|
||||||
|
if (!currentUser.value) return;
|
||||||
|
|
||||||
|
const res = await userStore.getBranch(currentUser.value.id);
|
||||||
|
|
||||||
|
if (!res) return;
|
||||||
|
|
||||||
|
currentUserBranch.value = res.result;
|
||||||
|
|
||||||
|
const mainBranch = currentUserBranch.value[0];
|
||||||
|
|
||||||
|
if (mainBranch && mainBranch.headOfficeId) {
|
||||||
|
currentHQ.value = mainBranch.headOfficeId;
|
||||||
|
currentBR.value = mainBranch.id;
|
||||||
|
} else {
|
||||||
|
currentHQ.value = mainBranch.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getHQ() {
|
||||||
|
const res = await branchStore.fetchList({
|
||||||
|
filter: 'head',
|
||||||
|
pageSize: 9999,
|
||||||
|
});
|
||||||
|
if (res) hq.value = res.result;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getBR() {
|
||||||
|
if (!currentHQ.value) return;
|
||||||
|
|
||||||
|
const res = await branchStore.fetchById<BranchWithChildren>(currentHQ.value, {
|
||||||
|
includeSubBranch: true,
|
||||||
|
});
|
||||||
|
if (res) br.value = res.branch;
|
||||||
|
}
|
||||||
|
|
||||||
|
const opts = reactive<{
|
||||||
|
province: Province[];
|
||||||
|
district: District[];
|
||||||
|
subDistrict: SubDistrict[];
|
||||||
|
}>({
|
||||||
|
province: [],
|
||||||
|
district: [],
|
||||||
|
subDistrict: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getProvince() {
|
||||||
|
const result = await addrStore.fetchProvince();
|
||||||
|
if (result) opts.province = result;
|
||||||
|
}
|
||||||
|
async function getDistrict() {
|
||||||
|
if (!currentUser.value?.provinceId) return;
|
||||||
|
const result = await addrStore.fetchDistrictByProvinceId(
|
||||||
|
currentUser.value?.provinceId,
|
||||||
|
);
|
||||||
|
if (result) opts.district = result;
|
||||||
|
}
|
||||||
|
async function getSubDistrict() {
|
||||||
|
if (!currentUser.value?.districtId) return;
|
||||||
|
const result = await addrStore.fetchSubDistrictByProvinceId(
|
||||||
|
currentUser.value?.districtId,
|
||||||
|
);
|
||||||
|
if (result) opts.subDistrict = result;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
getCurrentUser();
|
||||||
|
getHQ();
|
||||||
|
getProvince();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => route.params.id, getCurrentUser);
|
||||||
|
watch(currentUser, getUserBranch);
|
||||||
|
watch(currentHQ, getBR);
|
||||||
|
watch(() => currentUser.value?.provinceId, getDistrict);
|
||||||
|
watch(() => currentUser.value?.districtId, getSubDistrict);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="info-container"
|
||||||
|
:class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<PersonCard
|
||||||
|
:list="[
|
||||||
|
{
|
||||||
|
id: currentUser.id,
|
||||||
|
img: `${currentUser.profileImageUrl}`,
|
||||||
|
name: `${currentUser.firstName} ${currentUser.lastName}`,
|
||||||
|
male: currentUser.gender === 'male',
|
||||||
|
female: currentUser.gender === 'female',
|
||||||
|
detail: [
|
||||||
|
{ label: 'ตำแหน่ง', value: currentUser.userType },
|
||||||
|
{ label: 'โทรศัพท์', value: currentUser.telephoneNo },
|
||||||
|
{ label: 'อีเมล', value: currentUser.email },
|
||||||
|
],
|
||||||
|
badge: currentUser.code,
|
||||||
|
disabled: currentUser.status === 'INACTIVE',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
v-if="currentUser"
|
||||||
|
:grid-columns="1"
|
||||||
|
no-hover
|
||||||
|
no-action
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<AppBox class="surface-1" rounded bordered v-if="currentUser">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
class="col-6"
|
||||||
|
option-value="id"
|
||||||
|
option-label="code"
|
||||||
|
id="selectHQ"
|
||||||
|
v-model="currentHQ"
|
||||||
|
@update:model-value="currentBR = null"
|
||||||
|
:label="$t('branchHQLabel')"
|
||||||
|
:options="hq"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
v-model="currentBR"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
class="col-6"
|
||||||
|
id="selectBR"
|
||||||
|
option-value="id"
|
||||||
|
option-label="code"
|
||||||
|
:label="$t('branchLabel')"
|
||||||
|
:options="br"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
:label="$t('firstname')"
|
||||||
|
class="col-3"
|
||||||
|
v-model="currentUser.firstName"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="col-12 group-label">{{ $t('address') }}</div>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
id="address"
|
||||||
|
label="ที่อยู่"
|
||||||
|
class="col-12"
|
||||||
|
v-model="currentUser.addressEN"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
id="selectProvince"
|
||||||
|
v-model="currentUser.provinceId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
:label="$t('province')"
|
||||||
|
class="col-3"
|
||||||
|
@update:model-value="
|
||||||
|
(currentUser.districtId = null), (currentUser.subDistrictId = null)
|
||||||
|
"
|
||||||
|
:options="opts.province"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
id="selectDistrict"
|
||||||
|
v-model="currentUser.districtId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
:label="$t('district')"
|
||||||
|
class="col-3"
|
||||||
|
@update:model-value="currentUser.subDistrictId = null"
|
||||||
|
:options="opts.district"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="SelectSubDistrict"
|
||||||
|
v-model="currentUser.subDistrictId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
:label="$t('subDistrict')"
|
||||||
|
class="col-3"
|
||||||
|
:options="opts.subDistrict"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
:label="$t('zipCode')"
|
||||||
|
class="col-3"
|
||||||
|
v-model="currentUser.zipCode"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="col-12 group-label">{{ $t('address') }} EN</div>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
id="addressEN"
|
||||||
|
label="ที่อยู่"
|
||||||
|
class="col-12"
|
||||||
|
v-model="currentUser.addressEN"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
id="selectProvinceEN"
|
||||||
|
v-model="currentUser.provinceId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="nameEN"
|
||||||
|
:label="$t('province')"
|
||||||
|
class="col-3"
|
||||||
|
@update:model-value="
|
||||||
|
(currentUser.districtId = null), (currentUser.subDistrictId = null)
|
||||||
|
"
|
||||||
|
:options="opts.province"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
readonly
|
||||||
|
id="selectDistrictEN"
|
||||||
|
v-model="currentUser.districtId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="nameEN"
|
||||||
|
:label="$t('district')"
|
||||||
|
class="col-3"
|
||||||
|
@update:model-value="currentUser.subDistrictId = null"
|
||||||
|
:options="opts.district"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
id="SelectSubDistrictEN"
|
||||||
|
v-model="currentUser.subDistrictId"
|
||||||
|
option-value="id"
|
||||||
|
option-label="nameEN"
|
||||||
|
:label="$t('subDistrict')"
|
||||||
|
class="col-3"
|
||||||
|
:options="opts.subDistrict"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
zip="zipEN"
|
||||||
|
:label="$t('zipCode')"
|
||||||
|
class="col-3"
|
||||||
|
v-model="currentUser.zipCode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.info-container {
|
||||||
|
--_group-label-color: currentColor;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
gap: var(--size-4);
|
||||||
|
|
||||||
|
.group-label {
|
||||||
|
color: var(--_group-label-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
--_group-label-color: hsl(var(--info-bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.desktop {
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { RouteRecordRaw } from 'vue-router';
|
import { RouteRecordRaw } from 'vue-router';
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{ path: '/test', component: () => import('pages/99-test/MainPage.vue') },
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirect: { name: 'Home' },
|
redirect: { name: 'Home' },
|
||||||
|
|
@ -21,6 +22,12 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: 'PersonnelManagement',
|
name: 'PersonnelManagement',
|
||||||
component: () => import('pages/02_personnel-management/MainPage.vue'),
|
component: () => import('pages/02_personnel-management/MainPage.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/personnel-management/:id',
|
||||||
|
name: 'PersonnelInfo',
|
||||||
|
component: () =>
|
||||||
|
import('pages/02_personnel-management/person-info/MainPage.vue'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue