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';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{ path: '/test', component: () => import('pages/99-test/MainPage.vue') },
|
||||
{
|
||||
path: '',
|
||||
redirect: { name: 'Home' },
|
||||
|
|
@ -21,6 +22,12 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'PersonnelManagement',
|
||||
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