feat: Personnel info
This commit is contained in:
puriphatt
parent
0524b6dda1
commit
05660f5b86
4 changed files with 458 additions and 96 deletions
54
src/components/02_personnel-management/infoForm.vue
Normal file
54
src/components/02_personnel-management/infoForm.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<script lang="ts" setup>
|
||||
import AppBox from '../app/AppBox.vue';
|
||||
import FormAddress from './FormAddress.vue';
|
||||
|
||||
defineProps<{
|
||||
addressTitle?: string;
|
||||
addressTitleEN?: string;
|
||||
}>();
|
||||
|
||||
const address = defineModel('address', { default: '' });
|
||||
const addressEN = defineModel('addressEN', { default: '' });
|
||||
const provinceId = defineModel<string | null | undefined>('provinceId');
|
||||
const districtId = defineModel<string | null | undefined>('districtId');
|
||||
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
||||
const zipCode = defineModel<string>('zipCode', { default: '' });
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-stretch" style="position: absolute; inset: 0">
|
||||
<div class="col-3">
|
||||
<slot name="person-card"></slot>
|
||||
</div>
|
||||
<div class="col-9" style="position: relative">
|
||||
<AppBox
|
||||
bordered
|
||||
class="q-my-md q-mr-md"
|
||||
style="position: absolute; overflow-y: auto; inset: 0"
|
||||
>
|
||||
<div class="row q-col-gutter-y-md">
|
||||
<slot name="information"></slot>
|
||||
<slot name="person"></slot>
|
||||
<slot name="address">
|
||||
<FormAddress
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:address="address"
|
||||
v-model:addressEN="addressEN"
|
||||
v-model:provinceId="provinceId"
|
||||
v-model:districtId="districtId"
|
||||
v-model:subDistrictId="subDistrictId"
|
||||
v-model:zipCode="zipCode"
|
||||
:addressTitle="addressTitle || ''"
|
||||
:addressTitleEN="addressTitleEN || ''"
|
||||
v-if="!$slots.address"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="qr-code"></slot>
|
||||
<slot name="location"></slot>
|
||||
<slot name="by-type"></slot>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
131
src/components/DrawerInfo.vue
Normal file
131
src/components/DrawerInfo.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string;
|
||||
editData?: (...args: unknown[]) => void;
|
||||
deleteData?: (...args: unknown[]) => void;
|
||||
submit?: (...args: unknown[]) => void;
|
||||
close?: (...args: unknown[]) => void;
|
||||
}>();
|
||||
|
||||
const drawerOpen = defineModel<boolean>('drawerOpen', {
|
||||
default: false,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-drawer
|
||||
@hide="close"
|
||||
:width="1100"
|
||||
:breakpoint="500"
|
||||
v-model="drawerOpen"
|
||||
behavior="mobile"
|
||||
side="right"
|
||||
show-if-above
|
||||
>
|
||||
<AppBox
|
||||
class="column justify-between full-height"
|
||||
style="padding: 0; border-radius: var(--radius-2)"
|
||||
>
|
||||
<div class="form-header col q-px-lg row items-center">
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
icon="mdi-pencil-outline"
|
||||
padding="xs"
|
||||
class="q-mr-md"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
style="color: var(--brand-1)"
|
||||
@click="editData"
|
||||
/>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
icon="mdi-trash-can-outline"
|
||||
padding="xs"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
style="color: hsl(var(--negative-bg))"
|
||||
@click="deleteData"
|
||||
/>
|
||||
|
||||
<div class="col text-subtitle1 text-weight-bold text-center">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div style="width: 31.98px"></div>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
icon="mdi-close"
|
||||
padding="xs"
|
||||
class="close-btn"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-10 form-body"
|
||||
style="position: relative"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
|
||||
>
|
||||
<slot name="info"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
|
||||
>
|
||||
<q-btn
|
||||
dense
|
||||
outline
|
||||
unelevated
|
||||
id="cancelBtn"
|
||||
class="q-px-md app-text-negative"
|
||||
:label="$t('cancel')"
|
||||
@click="close"
|
||||
/>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
id="submitBtn"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="q-px-md"
|
||||
:label="$t('save')"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.close-btn {
|
||||
color: hsl(var(--negative-bg));
|
||||
background-color: hsla(var(--negative-bg) / 0.1);
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--negative-bg));
|
||||
}
|
||||
}
|
||||
|
||||
.form-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-body {
|
||||
--_body-bg: var(--sand-0);
|
||||
background-color: var(--_body-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
&.dark {
|
||||
--_body-bg: var(--gray-10);
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@ defineProps<{
|
|||
list: {
|
||||
id: string;
|
||||
name: string;
|
||||
detail: { label: string; value: string }[];
|
||||
detail?: { label: string; value: string }[];
|
||||
male?: boolean;
|
||||
female?: boolean;
|
||||
disabled?: boolean;
|
||||
|
|
@ -18,6 +18,8 @@ defineProps<{
|
|||
gridColumns?: number;
|
||||
noHover?: boolean;
|
||||
noAction?: boolean;
|
||||
noDetail?: boolean;
|
||||
noBg?: boolean;
|
||||
detailColumnCount?: number;
|
||||
}>();
|
||||
|
||||
|
|
@ -48,9 +50,10 @@ defineEmits<{
|
|||
:class="{
|
||||
'person-box__disabled': v.disabled,
|
||||
'person-box__no-hover': noHover,
|
||||
'person-box__no-detail': noDetail,
|
||||
'person-box__no-bg': noBg,
|
||||
}"
|
||||
@click="$emit('enterCard', v.id)"
|
||||
style="padding: 0"
|
||||
@click="$emit('enterCard', 'INFO', v.id)"
|
||||
v-for="(v, i) in list"
|
||||
:key="i"
|
||||
>
|
||||
|
|
@ -69,7 +72,7 @@ defineEmits<{
|
|||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
@click="$emit('updateCard', v.id)"
|
||||
@click="$emit('updateCard', 'FORM', v.id)"
|
||||
v-close-popup
|
||||
>
|
||||
<q-item-section class="col-4">
|
||||
|
|
@ -173,8 +176,9 @@ defineEmits<{
|
|||
</div>
|
||||
|
||||
<!-- detail -->
|
||||
<q-separator />
|
||||
<q-separator v-if="!noDetail" />
|
||||
<div
|
||||
v-if="!noDetail"
|
||||
class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
|
||||
:class="{
|
||||
'bg-gender': v.male || v.female,
|
||||
|
|
@ -210,6 +214,7 @@ defineEmits<{
|
|||
background-color: var(--surface-2);
|
||||
border-radius: var(--radius-2) !important;
|
||||
transition: 100ms ease-in-out;
|
||||
padding: 0;
|
||||
|
||||
&.person-box__disabled {
|
||||
opacity: 0.4;
|
||||
|
|
@ -223,6 +228,14 @@ defineEmits<{
|
|||
}
|
||||
}
|
||||
|
||||
&.person-box__no-detail {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
&.person-box__no-bg {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& .bg-gender {
|
||||
color: hsla(var(--_fg));
|
||||
background-color: hsl(var(--_bg));
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ import useUserStore from 'stores/user';
|
|||
import useBranchStore from 'src/stores/branch';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
import { UserCreate, UserTypeStats } from 'src/stores/user/types';
|
||||
import { User, UserCreate, UserTypeStats } from 'src/stores/user/types';
|
||||
import { BranchUserStats } from 'src/stores/branch/types';
|
||||
import useAddressStore from 'src/stores/address';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
|
@ -19,11 +20,16 @@ import FormDialog from 'src/components/FormDialog.vue';
|
|||
import FormInformation from 'src/components/02_personnel-management/FormInformation.vue';
|
||||
import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
|
||||
import FormByType from 'src/components/02_personnel-management/FormByType.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import infoForm from 'src/components/02_personnel-management/infoForm.vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const branchStore = useBranchStore();
|
||||
const adrressStore = useAddressStore();
|
||||
const { data: userData } = storeToRefs(userStore);
|
||||
|
||||
const defaultFormData = {
|
||||
|
|
@ -56,20 +62,24 @@ const defaultFormData = {
|
|||
birthDate: null,
|
||||
responsibleArea: null,
|
||||
username: '',
|
||||
status: 'CREATED',
|
||||
};
|
||||
|
||||
const currentUser = ref<User>();
|
||||
const infoPersonCard = ref();
|
||||
const infoDrawer = ref(false);
|
||||
const profileSubmit = ref(false);
|
||||
const urlProfile = ref<string>();
|
||||
const isEdit = ref(false);
|
||||
const modal = ref(false);
|
||||
const status = ref(false);
|
||||
const statusToggle = ref(true);
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const inputSearch = ref('');
|
||||
const userId = ref('');
|
||||
const selectorLabel = ref('');
|
||||
const hqId = ref('');
|
||||
const brId = ref('');
|
||||
const code = ref('');
|
||||
const userId = ref<string>();
|
||||
const selectorLabel = ref<string>('');
|
||||
const hqId = ref<string>();
|
||||
const brId = ref<string>();
|
||||
const code = ref<string>();
|
||||
const formDialogRef = ref();
|
||||
const userStats = ref<BranchUserStats[]>();
|
||||
const typeStats = ref<UserTypeStats>();
|
||||
|
|
@ -89,7 +99,7 @@ const formData = ref<UserCreate>({
|
|||
licenseExpireDate: null,
|
||||
licenseIssueDate: null,
|
||||
licenseNo: null,
|
||||
discountCondition: '',
|
||||
discountCondition: null,
|
||||
retireDate: null,
|
||||
startDate: null,
|
||||
registrationNo: null,
|
||||
|
|
@ -105,6 +115,7 @@ const formData = ref<UserCreate>({
|
|||
checkpoint: null,
|
||||
checkpointEN: null,
|
||||
username: '',
|
||||
status: 'CREATED',
|
||||
});
|
||||
|
||||
const profileFile = ref<File | undefined>(undefined);
|
||||
|
|
@ -135,76 +146,49 @@ const selectorList = computed(() => [
|
|||
{ label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
|
||||
]);
|
||||
|
||||
async function openDialog(idEdit?: string) {
|
||||
modal.value = true;
|
||||
async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
|
||||
if (action === 'FORM') {
|
||||
modal.value = true;
|
||||
} else if (action === 'INFO') {
|
||||
infoDrawer.value = true;
|
||||
if (!userData.value) return;
|
||||
const user = userData.value.result.find((x) => x.id === idEdit);
|
||||
infoPersonCard.value = user
|
||||
? [
|
||||
{
|
||||
id: user.id,
|
||||
img: `${user.profileImageUrl}`,
|
||||
name:
|
||||
locale.value === 'en-US'
|
||||
? `${user.firstNameEN} ${user.lastNameEN}`
|
||||
: `${user.firstName} ${user.lastName}`,
|
||||
male: user.gender === 'male',
|
||||
female: user.gender === 'female',
|
||||
badge: user.code,
|
||||
disabled: user.status === 'INACTIVE',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
}
|
||||
|
||||
statusToggle.value = true;
|
||||
profileSubmit.value = false;
|
||||
userStore.userOption.brOpts = [];
|
||||
|
||||
userStore.userOption.hqOpts.length === 0
|
||||
? await userStore.fetchHqOption()
|
||||
: '';
|
||||
userStore.userOption.roleOpts.length === 0
|
||||
? await userStore.fetchRoleOption()
|
||||
: '';
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
await userStore.fetchHqOption();
|
||||
}
|
||||
|
||||
if (userStore.userOption.hqOpts.length === 1) {
|
||||
hqId.value = userStore.userOption.hqOpts[0].value;
|
||||
}
|
||||
|
||||
if (userStore.userOption.roleOpts.length === 0) {
|
||||
await userStore.fetchRoleOption();
|
||||
}
|
||||
|
||||
if (idEdit && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
|
||||
if (foundUser) {
|
||||
formData.value = {
|
||||
provinceId: foundUser.provinceId,
|
||||
districtId: foundUser.districtId,
|
||||
subDistrictId: foundUser.subDistrictId,
|
||||
telephoneNo: foundUser.telephoneNo,
|
||||
email: foundUser.email,
|
||||
zipCode: foundUser.zipCode,
|
||||
gender: foundUser.gender,
|
||||
addressEN: foundUser.addressEN,
|
||||
address: foundUser.address,
|
||||
trainingPlace: foundUser.trainingPlace,
|
||||
importNationality: foundUser.importNationality,
|
||||
sourceNationality: foundUser.sourceNationality,
|
||||
licenseNo: foundUser.licenseNo,
|
||||
discountCondition: foundUser.discountCondition,
|
||||
registrationNo: foundUser.registrationNo,
|
||||
lastNameEN: foundUser.lastNameEN,
|
||||
lastName: foundUser.lastName,
|
||||
firstNameEN: foundUser.firstNameEN,
|
||||
firstName: foundUser.firstName,
|
||||
userRole: foundUser.userRole,
|
||||
userType: foundUser.userType,
|
||||
username: foundUser.username,
|
||||
responsibleArea: foundUser.responsibleArea,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
null,
|
||||
licenseIssueDate:
|
||||
(foundUser.licenseIssueDate &&
|
||||
new Date(foundUser.licenseIssueDate)) ||
|
||||
null,
|
||||
retireDate:
|
||||
(foundUser.retireDate && new Date(foundUser.retireDate)) || null,
|
||||
startDate:
|
||||
(foundUser.startDate && new Date(foundUser.startDate)) || null,
|
||||
birthDate:
|
||||
(foundUser.birthDate && new Date(foundUser.birthDate)) || null,
|
||||
};
|
||||
|
||||
foundUser.status === 'ACTIVE'
|
||||
? (status.value = true)
|
||||
: (status.value = false);
|
||||
userId.value = foundUser.id;
|
||||
hqId.value = foundUser.branch[0].headOfficeId as string;
|
||||
brId.value = foundUser.branch[0].id;
|
||||
code.value = foundUser.code;
|
||||
urlProfile.value = foundUser.profileImageUrl;
|
||||
isEdit.value = true;
|
||||
profileSubmit.value = true;
|
||||
await userStore.fetchBrOption(hqId.value);
|
||||
// await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
// await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
}
|
||||
assignFormData(idEdit);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,8 +200,9 @@ function onClose() {
|
|||
urlProfile.value = '';
|
||||
profileSubmit.value = false;
|
||||
modal.value = false;
|
||||
status.value = false;
|
||||
infoDrawer.value = false;
|
||||
isEdit.value = false;
|
||||
statusToggle.value = true;
|
||||
Object.assign(formData.value, defaultFormData);
|
||||
mapUserType(selectorLabel.value);
|
||||
}
|
||||
|
|
@ -233,16 +218,33 @@ async function onSubmit() {
|
|||
persistent: true,
|
||||
message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
|
||||
action: async () => {
|
||||
if (!userId.value) return;
|
||||
|
||||
const formDataEdit = {
|
||||
...formData.value,
|
||||
status:
|
||||
formData.value.status !== 'CREATED'
|
||||
? formData.value.status
|
||||
: undefined,
|
||||
};
|
||||
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
|
||||
} as const;
|
||||
await userStore.editById(userId.value, formDataEdit);
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
|
||||
if (
|
||||
hqId.value &&
|
||||
currentUser.value?.branch[0] &&
|
||||
hqId.value !== currentUser.value.branch[0].id &&
|
||||
brId.value !== currentUser.value.branch[0].id
|
||||
) {
|
||||
userStore.removeBranch(userId.value, currentUser.value.branch[0].id);
|
||||
await branchStore.addUser(
|
||||
!!brId.value ? brId.value : hqId.value,
|
||||
userId.value,
|
||||
);
|
||||
}
|
||||
|
||||
userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
|
@ -254,6 +256,12 @@ async function onSubmit() {
|
|||
persistent: true,
|
||||
message: 'คุณต้องการเพิ่มบุคลากร ใช่หรือไม่',
|
||||
action: async () => {
|
||||
if (!hqId.value) return;
|
||||
|
||||
statusToggle.value
|
||||
? (formData.value.status = 'CREATED')
|
||||
: (formData.value.status = 'INACTIVE');
|
||||
|
||||
const result = await userStore.create(formData.value);
|
||||
if (result) {
|
||||
await branchStore.addUser(
|
||||
|
|
@ -262,7 +270,11 @@ async function onSubmit() {
|
|||
);
|
||||
}
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -278,15 +290,15 @@ async function onDelete(id: string) {
|
|||
message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
|
||||
action: async () => {
|
||||
await userStore.deleteById(id);
|
||||
await userStore.fetchList({ includeBranch: true });
|
||||
await userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function cardClick(id: string) {
|
||||
router.push({ name: 'PersonnelInfo', params: { id } });
|
||||
}
|
||||
|
||||
function mapUserType(label: string) {
|
||||
const userTypeMap: { [key: string]: string } = {
|
||||
USER: 'USER',
|
||||
|
|
@ -309,8 +321,78 @@ async function toggleStatus(id: string) {
|
|||
if (res) record.status = res.status;
|
||||
}
|
||||
|
||||
async function assignFormData(idEdit: string) {
|
||||
if (!userData.value) return;
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
if (foundUser) {
|
||||
currentUser.value = foundUser;
|
||||
|
||||
formData.value = {
|
||||
provinceId: foundUser.provinceId,
|
||||
districtId: foundUser.districtId,
|
||||
subDistrictId: foundUser.subDistrictId,
|
||||
telephoneNo: foundUser.telephoneNo,
|
||||
email: foundUser.email,
|
||||
zipCode: foundUser.zipCode,
|
||||
gender: foundUser.gender,
|
||||
addressEN: foundUser.addressEN,
|
||||
address: foundUser.address,
|
||||
trainingPlace: foundUser.trainingPlace,
|
||||
importNationality: foundUser.importNationality,
|
||||
sourceNationality: foundUser.sourceNationality,
|
||||
licenseNo: foundUser.licenseNo,
|
||||
discountCondition: foundUser.discountCondition,
|
||||
registrationNo: foundUser.registrationNo,
|
||||
lastNameEN: foundUser.lastNameEN,
|
||||
lastName: foundUser.lastName,
|
||||
firstNameEN: foundUser.firstNameEN,
|
||||
firstName: foundUser.firstName,
|
||||
userRole: foundUser.userRole,
|
||||
userType: foundUser.userType,
|
||||
username: foundUser.username,
|
||||
responsibleArea: foundUser.responsibleArea,
|
||||
status: foundUser.status,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
null,
|
||||
licenseIssueDate:
|
||||
(foundUser.licenseIssueDate && new Date(foundUser.licenseIssueDate)) ||
|
||||
null,
|
||||
retireDate:
|
||||
(foundUser.retireDate && new Date(foundUser.retireDate)) || null,
|
||||
startDate: (foundUser.startDate && new Date(foundUser.startDate)) || null,
|
||||
birthDate: (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
|
||||
};
|
||||
|
||||
formData.value.status === 'ACTIVE' || 'CREATED'
|
||||
? (statusToggle.value = true)
|
||||
: (statusToggle.value = false);
|
||||
userId.value = foundUser.id;
|
||||
if (foundUser.branch[0].isHeadOffice) {
|
||||
hqId.value = foundUser.branch[0].id as string;
|
||||
} else {
|
||||
hqId.value = foundUser.branch[0].headOfficeId as string;
|
||||
brId.value = foundUser.branch[0].id;
|
||||
}
|
||||
code.value = foundUser.code;
|
||||
urlProfile.value = foundUser.profileImageUrl;
|
||||
isEdit.value = true;
|
||||
profileSubmit.value = true;
|
||||
await userStore.fetchBrOption(hqId.value);
|
||||
if (formData.value.districtId) {
|
||||
await adrressStore.fetchSubDistrictByProvinceId(
|
||||
formData.value.districtId,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.fetchList({ includeBranch: true });
|
||||
await userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
userStore.userOption.roleOpts.length === 0
|
||||
? await userStore.fetchRoleOption()
|
||||
: '';
|
||||
|
|
@ -370,7 +452,7 @@ watch(
|
|||
unelevated
|
||||
label="+ เพิ่มบุคลากร"
|
||||
padding="4px 16px"
|
||||
@click="openDialog()"
|
||||
@click="openDialog('FORM')"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -478,7 +560,7 @@ watch(
|
|||
"
|
||||
@update-card="openDialog"
|
||||
@delete-card="onDelete"
|
||||
@enter-card="cardClick"
|
||||
@enter-card="openDialog"
|
||||
@toggle-status="toggleStatus"
|
||||
/>
|
||||
<div
|
||||
|
|
@ -499,15 +581,97 @@ watch(
|
|||
<AddButton
|
||||
:label="'personnelAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialog"
|
||||
@trigger="openDialog('FORM')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
|
||||
<DrawerInfo
|
||||
:title="
|
||||
$i18n.locale === 'en-US'
|
||||
? `${formData.firstNameEN} ${formData.lastNameEN}`
|
||||
: `${formData.firstName} ${formData.lastName}`
|
||||
"
|
||||
v-model:drawerOpen="infoDrawer"
|
||||
:close="() => onClose()"
|
||||
>
|
||||
<template #info>
|
||||
<infoForm
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:provinceId="formData.provinceId"
|
||||
v-model:districtId="formData.districtId"
|
||||
v-model:subDistrictId="formData.subDistrictId"
|
||||
v-model:zipCode="formData.zipCode"
|
||||
>
|
||||
<template #person-card>
|
||||
<div class="q-ma-md">
|
||||
<AppBox class="surface-1" style="padding: 0">
|
||||
<PersonCard
|
||||
noHover
|
||||
noAction
|
||||
noDetail
|
||||
no-bg
|
||||
:list="infoPersonCard"
|
||||
:gridColumns="1"
|
||||
/>
|
||||
</AppBox>
|
||||
</div>
|
||||
</template>
|
||||
<template #information>
|
||||
<FormInformation
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:usernameReadonly="isEdit"
|
||||
v-model:hqId="hqId"
|
||||
v-model:brId="brId"
|
||||
v-model:userType="formData.userType"
|
||||
v-model:userRole="formData.userRole"
|
||||
v-model:username="formData.username"
|
||||
v-model:userCode="code"
|
||||
/>
|
||||
</template>
|
||||
<template #person>
|
||||
<FormPerson
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:firstName="formData.firstName"
|
||||
v-model:lastName="formData.lastName"
|
||||
v-model:firstNameEN="formData.firstNameEN"
|
||||
v-model:lastNameEN="formData.lastNameEN"
|
||||
v-model:telephoneNo="formData.telephoneNo"
|
||||
v-model:email="formData.email"
|
||||
v-model:gender="formData.gender"
|
||||
v-model:birthDate="formData.birthDate"
|
||||
/>
|
||||
</template>
|
||||
<template #by-type>
|
||||
<FormByType
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:userType="formData.userType"
|
||||
v-model:registrationNo="formData.registrationNo"
|
||||
v-model:startDate="formData.startDate"
|
||||
v-model:retireDate="formData.retireDate"
|
||||
v-model:responsibleArea="formData.responsibleArea"
|
||||
v-model:discountCondition="formData.discountCondition"
|
||||
v-model:sourceNationality="formData.sourceNationality"
|
||||
v-model:importNationality="formData.importNationality"
|
||||
v-model:trainingPlace="formData.trainingPlace"
|
||||
/>
|
||||
</template>
|
||||
</infoForm>
|
||||
</template>
|
||||
</DrawerInfo>
|
||||
|
||||
<!-- form -->
|
||||
<FormDialog
|
||||
removeDialog
|
||||
ref="formDialogRef"
|
||||
title="เพิ่มบุคลากร"
|
||||
addressTitle="ที่อยู่พนักงาน"
|
||||
|
|
@ -593,7 +757,7 @@ watch(
|
|||
<q-toggle
|
||||
dense
|
||||
size="md"
|
||||
v-model="status"
|
||||
v-model="statusToggle"
|
||||
padding="none"
|
||||
class="q-pr-md"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue