chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: option from json

Browse source
This commit is contained in:
puriphatt 2024-06-11 12:27:58 +00:00
parent 12a5f618bb
commit cb01378114
9 changed files with 1271 additions and 626 deletions
Download patch file Download diff file Expand all files Collapse all files

537
public/option/option.json Normal file
View file

@ -0,0 +1,537 @@
{
"eng": {
"gender": [
{
"label": "male",
"value": "male"
},
{
"label": "female",
"value": "female"
}
],
"training": [
{
"label": "",
"value": ""
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"value": ""
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"value": ""
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"value": ""
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"value": ""
}
]
},
"tha": {
"gender": [
{
"label": "ชาย",
"value": "male"
},
{
"label": "หญิง",
"value": "female"
}
],
"training": [
{
"label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
"value": "trainingTak"
},
{
"label": "สถานที่อบรมแรงงานเมียนมา-เกาะสอง จ.ระนอง",
"value": "trainingRanong"
},
{
"label": " สถานที่อบรมแรงงานลาว-หนองคาย จ.หนองคาย",
"value": "trainingNongKhai"
},
{
"label": "สถานที่อบรมแรงงานกัมพูชา-อรัญประเทศ จ.สระแก้ว",
"value": "trainingSaKaeo"
},
{
"label": "สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุรี",
"value": "trainingChanthaburi"
}
],
"nationality": [
{
"label": "ไทย",
"value": "th"
},
{
"label": "เมียนมา",
"value": "mm"
},
{
"label": "ลาว",
"value": "lo"
},
{
"label": "กัมพูชา",
"value": "kh"
},
{
"label": "เวียดนาม",
"value": "vn"
}
],
"businessType": [
{
"label": "ประมง",
"value": "fisheries"
},
{
"label": "ต่อเนื่องประมงทะเล",
"value": "continuous-fisheries"
},
{
"label": "เกษตรและปศุสัตว์",
"value": "agriculture "
},
{
"label": "กิจการก่อสร้าง",
"value": "construction "
},
{
"label": "ผู้รับใช้ในบ้าน",
"value": "maid"
},
{
"label": "กิจการต่อเนื่องการเกษตร",
"value": "continuousAgriculture"
},
{
"label": "ต่อเนื่องปศุสัตว์โรงฆ่าสัตว์ ชำแหละ",
"value": "continuousButchery"
},
{
"label": "กิจการรีไซเคิล",
"value": "recycling"
},
{
"label": "เหมืองแร่/เหมืองหิน",
"value": "mining"
},
{
"label": "จำหน่ายผลิตภัณฑ์โลหะ",
"value": "metal"
},
{
"label": "จำหน่ายอาหารและเครื่องดื่ม",
"value": "food"
},
{
"label": "ผลิตหรือจำหน่ายผลิตภัณฑ์จากดิน",
"value": "soilBasedProducts"
},
{
"label": "ผลิตหรือจำหน่ายวัสดุก่อสร้าง",
"value": "constructionMaterials"
},
{
"label": "แปรรูปหิน",
"value": "stone"
},
{
"label": "ผลิตหรือจำหน่ายเสื้อผ้าสำเร็จรูป",
"value": "cloth"
},
{
"label": "ผลิตหรือจำหน่ายผลิตภัณฑ์พลาสติก",
"value": "plastic"
},
{
"label": "ผลิตหรือจำหน่ายผลิตภัณฑ์กระดาษ",
"value": "paper"
},
{
"label": "ผลิตหรือจำหน่ายผลิตภัณฑ์อิเล็กทรอนิกส์",
"value": "electronics"
},
{
"label": "ขนถ่ายสินค้าทางบก น้ำ คลังสินค้า",
"value": "transport"
},
{
"label": "ค้าส่ง ค้าปลีก แผงลอย",
"value": "market"
},
{
"label": "อู่ซ่อมรถ ล้าง อัดฉีด",
"value": "car"
},
{
"label": "สถานีบริการน้ำมัน แก้ส เชื้อเพลิง",
"value": "fuel"
},
{
"label": "สถานศึกษา มูลนิธิ สมาคม สถานพยาบาล",
"value": "institution"
},
{
"label": "การให้บริการต่างๆ",
"value": "service"
},
{
"label": "งานผู้ประสานงานด้านภาษากัมพูชา ลาว หรือเมียนมา",
"value": "coordinator"
},
{
"label": "แปรรูปสัตว์น้ำ",
"value": "seafood"
}
],
"position": [
{
"label": "กรรมกร",
"value": "worker"
},
{
"label": "ช่างเครื่องยนต์ในเรือประมงทะเล",
"value": "boatsMechanic"
},
{
"label": "ผู้รับใช้ในบ้าน",
"value": "maid"
},
{
"label": "งานผู้ประสานงานด้านภาษากัมพูชา ลาว หรือเมียนมา",
"value": "coordinator"
}
],
"area": [
{
"label": "เขตพื้นที่ 1 บางรัก ปทุมวัน ยานนาวสาทร และบางคอแหลม",
"value": "area1"
},
{
"label": "เขตพื้นที่ 2 จอมทอง ทุ่งครุ บางขุนเทียน บางบอน และราษฎร์บูรณะ",
"value": "area2"
},
{
"label": "เขตพื้นที่ 3 คลองเตย บางนา ประเวศ พระโขนง วัฒนา และสวนหลวง",
"value": "area3"
},
{
"label": "เขตพื้นที่ 4 คันนายาว บางกะปิ ลาดพร้าว บึงกุ่ม และวังทางหลาง",
"value": "area4"
},
{
"label": "เขตพื้นที่ 5 คลองสามวา มีนบุรี ลาดกระบัง สะพานสูง หนองจอก และสายไหม",
"value": "area5"
},
{
"label": "เขตพื้นที่ 6 คลองสาน ธนบุรี บางกอกน้อย บางกอกใหญ่ และบางพลัด",
"value": "area6"
},
{
"label": "เขตพื้นที่ 7 ตลิ่งชัน ทวีวัฒนา บางแค ภาษีเจริญ และหนองแขม",
"value": "area7"
},
{
"label": "เขตพื้นที่ 8 ดุสิต พระนครป้อมปราบศัตรูพ่าย และสัมพันธวงศ์",
"value": "area8"
},
{
"label": "เขตพื้นที่ 9 จตุจักร ดอนเมือง บางชื่อ บางเขน และหลักสี่",
"value": "area9"
},
{
"label": "เขตพื้นที่ 10 ดินแดง พญาไท ราชเทวี และห้วยขวาง",
"value": "area10"
}
],
"typeImport": [
{
"label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ เมียนมา",
"value": "nameListMM"
},
{
"label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ ลาว",
"value": "nameListLO"
},
{
"label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ กัมพูชา",
"value": "nameListKH"
}
],
"status": [
{
"label": "ไม่พบข้อมูลเสนอขาย",
"value": "notFound"
},
{
"label": "อยู่ระหว่างดำเนินการ",
"value": "inProgress"
},
{
"label": "ติดตาม / เอกสารเพิ่มเติม",
"value": "follow"
},
{
"label": "รอพิจารณา / นัดรับเอกสาร",
"value": "consider"
},
{
"label": "ดำเนินการเรียบร้อย",
"value": "complete"
},
{
"label": "ยกเลิกบริการ",
"value": "cancel"
}
],
"delivery": [
{
"label": "ช่องทาง E-Mail",
"value": "email"
},
{
"label": "ช่องทาง Line",
"value": "line"
},
{
"label": "ช่องทาง DHL",
"value": "dhl"
},
{
"label": "ช่องทาง รถตู้/รถโดยสาร",
"value": "bus"
},
{
"label": "พร้อมคนเซ็นสัญญา",
"value": "person"
}
],
"typeInsurance": [
{
"label": "ประกันสุขภาพภาพเอกชน 6 เดือน",
"value": "6m"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 3 เดือน",
"value": "3m"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 1 ปี",
"value": "1y"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 2 ปี",
"value": "2y"
}
],
"insurancePlace": [
{
"label": "แปซิฟิคครอส",
"value": "pacificcross"
},
{
"label": "ทิพยประกันภัย",
"value": "dhipaya"
},
{
"label": "รพ.เลิดสิน 4.รพ.ตากสิน",
"value": "lerdsin"
},
{
"label": "รพ.ราชพิพัฒน์",
"value": "ratchapipat"
},
{
"label": "รพ.เจริญกรุงประชารักษ์",
"value": "krungPracharak"
}
],
"typeReplace": [
{
"label": "ใบอนุญาตทำงาน 3 เดือน (325)",
"value": "3m"
},
{
"label": "ใบอนุญาตทำงาน 6 เดือน (550)",
"value": "6m"
},
{
"label": "ใบอนุญาตทำงาน 1 ปี (1000)",
"value": "1y"
},
{
"label": "ใบอนุญาตทำงาน 1 ปี 3 เดือน (1225)",
"value": "1y3m"
},
{
"label": "ใบอนุญาตทำงาน 1 ปี 6 เดือน (1450)",
"value": "1y6m"
},
{
"label": "ใบอนุญาตทำงาน 2 ปี (1900)",
"value": "2y"
}
],
"checkPoint": [
{
"label": "เมียนมา-แม่สอด จ.ตาก",
"value": "tak"
},
{
"label": "เมียนมา- เกาะสอง จ.ระนอง",
"value": "ranong"
},
{
"label": "ลาว-หนองคาย จ.หนองคาย",
"value": "nongKhai"
},
{
"label": "กัมพูชา-อรัญประเทศ จ.สระแก้ว",
"value": "saKaeo"
},
{
"label": "กัมพูชา-บ้านแหลม จ.จันทบุรี",
"value": "chanthaburi"
}
],
"residence": [
{
"label": "ตม.แจ้งวัฒนะ",
"value": "chaengwattana"
},
{
"label": "ตม.สมุทรปราการ",
"value": "samutPrakan"
},
{
"label": "ตม.สมุทรสาคร",
"value": "samutSakhon"
},
{
"label": "ตม.นนทบุรี",
"value": "nonthaburi"
},
{
"label": "ตม.ปทุมธานี",
"value": "pathumThani"
},
{
"label": "ตม.นครปฐม",
"value": "nakhonPathom"
}
],
"customerStep": [
{
"label": "ช่องทางในการจัดส่งเอกสาร",
"value": "channel"
},
{
"label": "ลูกค้ามารับด้วยตัวเอง",
"value": "pickup"
},
{
"label": "ส่งทางไปรษณีย์",
"value": "post"
},
{
"label": "ส่งทางไลน์แมน",
"value": "lineMan"
},
{
"label": "JOB ส่งเอกสาร",
"value": "job"
},
{
"label": "ตม.นครปฐม",
"value": "nakhonPathom"
}
],
"statusDeliver": [
{
"label": "โทรแจ้งลูกค้าเรียบร้อย",
"value": "reached"
},
{
"label": "ติดต่อไม่ได้/ไม่รับสาย",
"value": "cantReached"
},
{
"label": "ลูกค้ารับเอกสารคืนเรียบร้อย",
"value": "received"
},
{
"label": "ติดตาม/แก้ไขเอกสาร",
"value": "follow"
}
],
"type90days": [
{
"label": "รายงานตัว 90 วัน_กทม.(ปกติ)",
"value": "normalBkk"
},
{
"label": "รายงานตัว 90 วัน_กทม.(เกินกำหนด)",
"value": "overdueBkk"
},
{
"label": "รายงานตัว 90 วัน_ตจว.(ปกติ)",
"value": "nomal"
},
{
"label": "รายงานตัว 90 วัน_ตจว.(เกินกำหนด)",
"value": "overdue"
}
],
"typeInsurance2": [
{
"label": "ประกันสุขภาพภาพเอกชน 6 เดือน (990)",
"value": "6m"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 3 เดือน (500)",
"value": "3m"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 1 ปี (2100)",
"value": "1y"
},
{
"label": "ประกันสุขภาพ รพ.รัฐ 2 ปี (4200)",
"value": "2y"
},
{
"label": "สิทธิ์ประกันสังคม",
"value": "socialSecurity"
}
]
}
}

23
src/components/03_customer-management/BasicInformation.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const customerName = defineModel<string>('customerName');
const customerNameEn = defineModel<string>('customerNameEn');
@ -12,13 +12,6 @@ const customerBranchId = defineModel<string>('customerBranchId');
const employeeID = defineModel<string>('employeeID');
const nrcNo = defineModel<string>('nrcNo');
const branchOption = ref([
{
label: 'uuu',
value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
},
]);
defineProps<{
dense?: boolean;
outlined?: boolean;
@ -26,7 +19,15 @@ defineProps<{
separator?: boolean;
typeCustomer?: string;
employee?: boolean;
employeeOwnerOption?: { label: string; value: string }[];
}>();
defineEmits<{
(e: 'filterOwnerBranch', val: string, update: void): void;
}>();
onMounted(async () => {});
</script>
<template>
@ -82,6 +83,8 @@ defineProps<{
<div v-if="employee" class="col-9 row q-col-gutter-md">
<q-select
id="select-employer-branch"
use-input
input-debounce="0"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -94,7 +97,8 @@ defineProps<{
option-value="value"
emit-value
map-options
:options="branchOption"
:options="employeeOwnerOption"
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
@ -112,6 +116,7 @@ defineProps<{
v-model="employeeID"
/>
<q-input
mask="## #### ###### #"
for="input-nrcNo"
:dense="dense"
:outlined="!readonly"

530
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

@ -21,6 +21,14 @@ const addrOptions = reactive<{
});
const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
const checkupTypeOption =
defineModel<{ label: string; value: string }[]>('checkupTypeOption');
const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
'medicalBenefitOption',
);
const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
'insuranceCompanyOption',
);
const tab = ref();
@ -73,271 +81,273 @@ onMounted(async () => {
</script>
<template>
<div class="bordered-b full-width">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab
v-for="(tab, index) in employeeCheckup"
<div>
<div class="bordered-b full-width">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab
v-for="(tab, index) in employeeCheckup"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
style="z-index: 999"
>
<div class="text-weight-medium row items-center">
{{ $t('formDialogTabCheckup') + (index + 1) }}
<q-btn
v-if="!readonly && employeeCheckup?.length !== 1"
round
flat
id="closeDialog"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="removeData(index)"
/>
</div>
</q-tab>
</q-tabs>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panel
v-for="(checkup, index) in employeeCheckup"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
style="z-index: 999"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
>
<div class="text-weight-medium row items-center">
{{ $t('formDialogTabCheckup') + (index + 1) }}
<q-btn
v-if="!readonly && employeeCheckup?.length !== 1"
round
flat
id="closeDialog"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="removeData(index)"
/>
<div class="col-3 app-text-muted">
• {{ $t(`formDialogTitleHealthCheck`) }}
</div>
</q-tab>
</q-tabs>
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputCheckupRes')"
v-model="checkup.checkupResult"
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.checkupType"
option-value="value"
option-label="label"
:label="$t('formDialogInputCheckupType')"
class="col-6"
:options="checkupTypeOption"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.provinceId"
option-value="id"
option-label="name"
:label="$t('province')"
class="col-3"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-9"
:label="$t('formDialogInputHospital')"
v-model="checkup.hospitalName"
/>
<q-input
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="checkup.remark"
type="textarea"
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.medicalBenefitScheme"
option-value="value"
option-label="label"
:label="$t('formDialogInputMedicalBenefit')"
class="col-6"
:options="medicalBenefitOption"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.insuranceCompany"
option-value="value"
option-label="label"
:label="$t('formDialogInputInsuranceCompany')"
class="col-6"
:options="insuranceCompanyOption"
lazy-rules
/>
<VueDatePicker
utc
autoApply
:teleport="true"
v-model="checkup.coverageStartDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageStartDate
? dateFormat(checkup.coverageStartDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageStartDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="checkup.coverageStartDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
:teleport="true"
v-model="checkup.coverageExpireDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageExpireDate
? dateFormat(checkup.coverageExpireDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageExpireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="checkup.coverageExpireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</q-tab-panel>
</q-tab-panels>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panel
v-for="(checkup, index) in employeeCheckup"
v-bind:key="index"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
>
<div class="col-3 app-text-muted">
• {{ $t(`formDialogTitleHealthCheck`) }}
</div>
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputCheckupRes')"
v-model="checkup.checkupResult"
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.checkupType"
option-value="id"
option-label="name"
:label="$t('formDialogInputCheckupType')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.provinceId"
option-value="id"
option-label="nameEN"
:label="$t('province')"
class="col-3"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-9"
:label="$t('formDialogInputHospital')"
v-model="checkup.hospitalName"
/>
<q-input
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="checkup.remark"
type="textarea"
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.medicalBenefitScheme"
option-value="id"
option-label="name"
:label="$t('formDialogInputMedicalBenefit')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="checkup.insuranceCompany"
option-value="id"
option-label="name"
:label="$t('formDialogInputInsuranceCompany')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<VueDatePicker
utc
autoApply
:teleport="true"
v-model="checkup.coverageStartDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageStartDate
? dateFormat(checkup.coverageStartDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageStartDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="checkup.coverageStartDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
:teleport="true"
v-model="checkup.coverageExpireDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageExpireDate
? dateFormat(checkup.coverageExpireDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageExpireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="checkup.coverageExpireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</q-tab-panel>
</q-tab-panels>
</template>
<style scoped>

4
src/components/03_customer-management/FormEmployeeOther.vue
View file

@ -89,7 +89,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
v-model="employeeOther.birthPlace"
v-model="employeeOther.fatherBirthPlace"
/>
</div>
<div class="col-12" />
@ -150,7 +150,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
v-model="employeeOther.birthPlace"
v-model="employeeOther.motherBirthPlace"
/>
</div>
</div>

47
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -1,23 +1,6 @@
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { onMounted } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import useAddressStore, {
District,
Province,
SubDistrict,
} from 'src/stores/address';
const adrressStore = useAddressStore();
const addrOptions = reactive<{
provinceOps: Province[];
districtOps: District[];
subDistrictOps: SubDistrict[];
}>({
provinceOps: [],
districtOps: [],
subDistrictOps: [],
});
const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber');
@ -28,6 +11,11 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(
'previousPassportReference',
);
const passportTypeOption =
defineModel<{ label: string; value: string }[]>('passportTypeOption');
const passportIssuingCountryOption = defineModel<
{ label: string; value: string }[]
>('passportIssuingCountryOption');
defineProps<{
title?: string;
@ -35,18 +23,7 @@ defineProps<{
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
typeCustomer?: string;
}>();
async function fetchProvince() {
const result = await adrressStore.fetchProvince();
if (result) addrOptions.provinceOps = result;
}
onMounted(async () => {
await fetchProvince();
});
</script>
<template>
@ -63,11 +40,11 @@ onMounted(async () => {
emit-value
map-options
v-model="passportType"
option-value="id"
option-label="name"
option-value="value"
option-label="label"
:label="$t('formDialogInputPassportType')"
class="col-3"
:options="addrOptions.provinceOps"
:options="passportTypeOption"
lazy-rules
:rules="[
(val: string) =>
@ -130,11 +107,11 @@ onMounted(async () => {
emit-value
map-options
v-model="passportIssuingCountry"
option-value="id"
option-label="nameEN"
option-value="value"
option-label="label"
:label="$t('formDialogInputPassportCountry')"
class="col-3"
:options="addrOptions.provinceOps"
:options="passportIssuingCountryOption"
lazy-rules
:rules="[
(val: string) =>

9
src/components/03_customer-management/FormEmployeeVisa.vue
View file

@ -28,6 +28,9 @@ const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date | null>('entryDate');
const visaTypeOption =
defineModel<{ label: string; value: string }[]>('visaTypeOption');
defineProps<{
title?: string;
dense?: boolean;
@ -62,11 +65,11 @@ onMounted(async () => {
emit-value
map-options
v-model="visaType"
option-value="id"
option-label="name"
option-value="value"
option-label="label"
:label="$t('formDialogInputVisaType')"
class="col-3"
:options="addrOptions.provinceOps"
:options="visaTypeOption"
lazy-rules
:rules="[
(val: string) =>

613
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -1,26 +1,15 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import useAddressStore, {
District,
Province,
SubDistrict,
} from 'src/stores/address';
import { EmployeeWorkCreate } from 'src/stores/employee/types';
const adrressStore = useAddressStore();
const addrOptions = reactive<{
provinceOps: Province[];
districtOps: District[];
subDistrictOps: SubDistrict[];
}>({
provinceOps: [],
districtOps: [],
subDistrictOps: [],
});
const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
const positionNameOption =
defineModel<{ label: string; value: string }[]>('positionNameOption');
const jobTypeOption =
defineModel<{ label: string; value: string }[]>('jobTypeOption');
const workplaceOption =
defineModel<{ label: string; value: string }[]>('workplaceOption');
const tab = ref();
@ -30,15 +19,8 @@ defineProps<{
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
typeCustomer?: string;
}>();
async function fetchProvince() {
const result = await adrressStore.fetchProvince();
if (result) addrOptions.provinceOps = result;
}
function addData() {
employeeWork.value?.push({
workEndDate: null,
@ -66,308 +48,309 @@ function removeData(index: number) {
}
onMounted(async () => {
await fetchProvince();
tab.value = 'tab0';
});
</script>
<template>
<div class="bordered-b full-width">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab
v-for="(tab, index) in employeeWork"
<div>
<div class="bordered-b full-width">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab
v-for="(tab, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
style="z-index: 999"
>
<div class="text-weight-medium row items-center">
{{ $t('formDialogTabWork') + (index + 1) }}
<q-btn
v-if="!readonly && employeeWork?.length !== 1"
round
flat
id="closeDialog"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="removeData(index)"
/>
</div>
</q-tab>
</q-tabs>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panel
v-for="(work, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
style="z-index: 999"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
>
<div class="text-weight-medium row items-center">
{{ $t('formDialogTabWork') + (index + 1) }}
<q-btn
v-if="!readonly && employeeWork?.length !== 1"
round
flat
id="closeDialog"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="removeData(index)"
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-ownerName"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputOwnerName')"
v-model="work.ownerName"
/>
<q-select
id="select-positionName"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.positionName"
option-value="value"
option-label="label"
:label="$t('formDialogInputJobPosition')"
class="col-6"
:options="positionNameOption"
lazy-rules
/>
<q-select
id="select-jobType"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.jobType"
option-value="value"
option-label="label"
:label="$t('formDialogInputJobType')"
class="col-6"
:options="jobTypeOption"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.workplace"
option-value="value"
option-label="label"
:label="$t('formDialogInputWorkPlace')"
class="col-6"
:options="workplaceOption"
lazy-rules
/>
<q-input
for="input-workEndDate"
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="work.remark"
type="textarea"
/>
<VueDatePicker
id="date-picker-workEndDate"
utc
autoApply
:teleport="true"
v-model="work.workEndDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkUntil')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workEndDate ? dateFormat(work.workEndDate) : ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workEndDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workEndDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-input
for="input-workPermitNo"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
v-model="work.workPermitNo"
/>
<VueDatePicker
id="date-picker-workPermitIssuDate"
utc
autoApply
:teleport="true"
v-model="work.workPermitIssuDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkPermitIssueDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitIssuDate
? dateFormat(work.workPermitIssuDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workPermitIssuDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workPermitIssuDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
id="date-picker-workPermitExpireDate"
utc
autoApply
:teleport="true"
v-model="work.workPermitExpireDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkPermitExpireDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitExpireDate
? dateFormat(work.workPermitExpireDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workPermitExpireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workPermitExpireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
</q-tab>
</q-tabs>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</q-tab-panel>
</q-tab-panels>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panel
v-for="(work, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
>
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-ownerName"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputOwnerName')"
v-model="work.ownerName"
/>
<q-select
id="select-positionName"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.positionName"
option-value="id"
option-label="name"
:label="$t('formDialogInputJobPosition')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-select
id="select-jobType"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.jobType"
option-value="id"
option-label="nameEN"
:label="$t('formDialogInputJobType')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-select
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
v-model="work.workplace"
option-value="id"
option-label="nameEN"
:label="$t('formDialogInputWorkPlace')"
class="col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-input
for="input-workEndDate"
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="work.remark"
type="textarea"
/>
<VueDatePicker
id="date-picker-workEndDate"
utc
autoApply
:teleport="true"
v-model="work.workEndDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkUntil')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workEndDate ? dateFormat(work.workEndDate) : ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workEndDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workEndDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-input
for="input-workPermitNo"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
v-model="work.workPermitNo"
/>
<VueDatePicker
id="date-picker-workPermitIssuDate"
utc
autoApply
:teleport="true"
v-model="work.workPermitIssuDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkPermitIssueDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitIssuDate
? dateFormat(work.workPermitIssuDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workPermitIssuDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workPermitIssuDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
id="date-picker-workPermitExpireDate"
utc
autoApply
:teleport="true"
v-model="work.workPermitExpireDate"
:locale="'th'"
:enableTimePicker="false"
:disabled="readonly"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
id="input-birth-date"
:label="$t('formDialogInputWorkPermitExpireDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitExpireDate
? dateFormat(work.workPermitExpireDate)
: ''
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="work.workPermitExpireDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="work.workPermitExpireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</q-tab-panel>
</q-tab-panels>
</template>
<style scoped>

129
src/pages/03_customer-management/MainPage.vue
View file

@ -59,6 +59,7 @@ const {
createBranch,
deleteBranchById,
editBranchById,
fetchListBranch,
} = userCustomer;
const employeeStore = useEmployeeStore();
const formData = ref<CustomerCreate>({
@ -107,6 +108,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
const formDataEmployeeSameAddr = ref(false);
const formDataEmployeeTab = ref('personalInfo');
const employeeOwnerBranchOption = ref();
const formDataEmployee = ref<EmployeeCreate>({
image: null,
customerBranchId: '',
@ -173,17 +175,18 @@ const formDataEmployee = ref<EmployeeCreate>({
},
],
employeeOtherInfo: {
birthPlace: '',
citizenId: '',
fatherFirstName: '',
fatherLastName: '',
fatherFirstNameEN: '',
fatherLastNameEN: '',
fatherBirthPlace: '',
motherFirstName: '',
motherLastName: '',
motherFirstNameEN: '',
motherLastNameEN: '',
motherBirthPlace: '',
},
});
@ -386,6 +389,83 @@ function clearForm() {
};
}
function clearFormEmployee() {
formDataEmployee.value = {
image: null,
customerBranchId: '',
nrcNo: '',
dateOfBirth: null,
gender: '',
nationality: '',
firstName: '',
firstNameEN: '',
lastName: '',
lastNameEN: '',
addressEN: '',
address: '',
zipCode: '',
passportType: '',
passportNumber: '',
passportIssueDate: null,
passportExpiryDate: null,
passportIssuingCountry: '',
passportIssuingPlace: '',
previousPassportReference: '',
visaType: '',
visaNumber: '',
visaIssueDate: null,
visaExpiryDate: null,
visaIssuingPlace: '',
visaStayUntilDate: null,
tm6Number: '',
entryDate: null,
workerStatus: '',
subDistrictId: '',
districtId: '',
provinceId: '',
employeeWork: [
{
workEndDate: null,
workPermitExpireDate: null,
workPermitIssuDate: null,
workPermitNo: '',
workplace: '',
jobType: '',
positionName: '',
ownerName: '',
remark: '',
},
],
employeeCheckup: [
{
coverageExpireDate: null,
coverageStartDate: null,
insuranceCompany: '',
medicalBenefitScheme: '',
remark: '',
hospitalName: '',
provinceId: '',
checkupResult: '',
checkupType: '',
},
],
employeeOtherInfo: {
citizenId: '',
fatherFirstName: '',
fatherLastName: '',
fatherFirstNameEN: '',
fatherLastNameEN: '',
fatherBirthPlace: '',
motherFirstName: '',
motherLastName: '',
motherFirstNameEN: '',
motherLastNameEN: '',
motherBirthPlace: '',
},
};
}
function deleteCustomerById(id: string) {
dialog({
color: 'negative',
@ -447,6 +527,8 @@ async function onSubmit() {
});
const resultList = await employeeStore.fetchList();
if (resultList) listEmployee.value = resultList.result;
clearFormEmployee();
dialogEmployee.value = false;
}
}
@ -557,6 +639,25 @@ function undo() {
infoDrawerEdit.value = false;
}
async function employeeFilterOwnerBranch(
val: string,
update: (...args: unknown[]) => void,
) {
update(async () => {
const result = await fetchListBranch({
includeCustomer: true,
query: val,
pageSize: 30,
});
if (result) {
employeeStore.ownerOption = result.result.map((i) => ({
label: i.code,
value: i.id,
}));
}
});
}
async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
formData.value = {
status: 'CREATED',
@ -630,6 +731,10 @@ onMounted(async () => {
}
if (resultListEmployee) listEmployee.value = resultListEmployee.result;
const resultOption = await fetch('/option/option.json');
employeeStore.globalOption = await resultOption.json();
console.log(employeeStore.globalOption);
});
watch(locale, () => {
@ -742,6 +847,7 @@ watch(fieldSelectedCustomer, async () => {
<div class="row q-py-md">
<div class="col">
<q-select
v-if="selectorLabel === 'EMPLOYER'"
v-model="fieldSelectedCustomer"
style="width: 150px"
outlined
@ -1202,8 +1308,10 @@ watch(fieldSelectedCustomer, async () => {
dense
outlined
separator
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch-id="formDataEmployee.customerBranchId"
v-model:nrc-no="formDataEmployee.nrcNo"
@filter-owner-branch="employeeFilterOwnerBranch"
/>
</template>
@ -1231,12 +1339,22 @@ watch(fieldSelectedCustomer, async () => {
dense
outlined
v-model:employee-checkup="formDataEmployee.employeeCheckup"
v-model:checkup-type-option="employeeStore.globalOption.tha.nationality"
v-model:medical-benefit-option="
employeeStore.globalOption.tha.typeInsurance
"
v-model:insurance-company-option="
employeeStore.globalOption.tha.insurancePlace
"
/>
<FormEmployeeWorkHistory
v-if="formDataEmployeeTab === 'workHistory'"
dense
outlined
v-model:employee-work="formDataEmployee.employeeWork"
v-model:position-name-option="employeeStore.globalOption.tha.position"
v-model:job-type-option="employeeStore.globalOption.tha.businessType"
v-model:workplace-option="employeeStore.globalOption.tha.area"
/>
<FormEmployeeOther
v-if="
@ -1258,13 +1376,19 @@ watch(fieldSelectedCustomer, async () => {
v-model:passport-number="formDataEmployee.passportNumber"
v-model:passport-issue-date="formDataEmployee.passportIssueDate"
v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
v-model:passport-issuing-country="
formDataEmployee.passportIssuingCountry
"
v-model:passport-issuing-place="formDataEmployee.passportIssuingCountry"
v-model:previous-passport-reference="
formDataEmployee.previousPassportReference
"
v-model:passport-type-option="
employeeStore.globalOption.tha.nationality
"
v-model:passport-issuing-country-option="
employeeStore.globalOption.tha.nationality
"
/>
<FormEmployeeVisa
v-if="formDataEmployeeTab === 'personalInfo'"
@ -1279,6 +1403,7 @@ watch(fieldSelectedCustomer, async () => {
v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
v-model:tm6-number="formDataEmployee.tm6Number"
v-model:entry-date="formDataEmployee.entryDate"
v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
/>
</template>
</FormDialog>

5
src/stores/employee/index.ts
View file

@ -7,6 +7,9 @@ import axios from 'axios';
const useEmployeeStore = defineStore('api-employee', () => {
const data = ref<Pagination<Employee[]>>();
const globalOption = ref();
const ownerOption = ref<{ label: string; value: string }[]>();
async function fetchList(
opts?: {
page?: number;
@ -136,6 +139,8 @@ const useEmployeeStore = defineStore('api-employee', () => {
return {
data,
globalOption,
ownerOption,
fetchList,
create,