fix: form component
This commit is contained in:
puriphatt
parent
2d0102eefb
commit
e1462b2b88
11 changed files with 909 additions and 767 deletions
270
src/components/02_personnel-management/FormAddress.vue
Normal file
270
src/components/02_personnel-management/FormAddress.vue
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
addressTitle?: string;
|
||||
addressTitleEN?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
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: '' });
|
||||
|
||||
const addrOptions = ref<{
|
||||
provinceOps?: Province[];
|
||||
districtOps?: District[];
|
||||
subDistrictOps?: SubDistrict[];
|
||||
}>({});
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
if (result) {
|
||||
addrOptions.value.provinceOps = result;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDistrict(id: string | undefined) {
|
||||
if (id) {
|
||||
const result = await adrressStore.fetchDistrictByProvinceId(id);
|
||||
if (result) {
|
||||
addrOptions.value.districtOps = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSubDistrict(id: string | undefined) {
|
||||
if (id) {
|
||||
const result = await adrressStore.fetchSubDistrictByProvinceId(id);
|
||||
if (result) {
|
||||
addrOptions.value.subDistrictOps = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function selectProvince(id: string) {
|
||||
if (!id) return;
|
||||
districtId.value = undefined;
|
||||
subDistrictId.value = undefined;
|
||||
addrOptions.value.districtOps = [];
|
||||
addrOptions.value.subDistrictOps = [];
|
||||
zipCode.value = '';
|
||||
await fetchDistrict(id);
|
||||
}
|
||||
|
||||
async function selectDistrict(id: string) {
|
||||
if (!id) return;
|
||||
subDistrictId.value = undefined;
|
||||
zipCode.value = '';
|
||||
await fetchSubDistrict(id);
|
||||
}
|
||||
|
||||
async function selectSubDistrict(id: string) {
|
||||
if (!id) return;
|
||||
zipCode.value =
|
||||
addrOptions.value.subDistrictOps
|
||||
?.filter((x) => x.id === id)
|
||||
.map((x) => x.zipCode)[0] ?? '';
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 app-text-muted">
|
||||
• {{ title || 'ข้อมูลที่อยู่พนักงาน' }}
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitle || 'ที่อยู่' }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
id="addr-input"
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="address"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
id="select-province"
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
@update:model-value="(v: string) => selectProvince(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
id="select-district"
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
@update:model-value="(v: string) => selectDistrict(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
id="select-sub-district"
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
id="zip"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitleEN || 'ที่อยู่ ภาษาอังกฤษ' }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
id="addr-en-input"
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="addressEN"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
id="select-province-en"
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
@update:model-value="(v: string) => selectProvince(v)"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
id="select-district-en"
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
@update:model-value="(v: string) => selectDistrict(v)"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
id="select-sub-district-en"
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
zip="zip-en"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -5,13 +5,9 @@ import { dateFormat } from 'src/utils/datetime';
|
|||
const userStore = useUserStore();
|
||||
|
||||
const userType = defineModel<string>('userType');
|
||||
const telephoneNo = defineModel<string>('telephoneNo');
|
||||
const gender = defineModel<string>('gender');
|
||||
const email = defineModel<string>('email');
|
||||
const registrationNo = defineModel<string | null>('registrationNo');
|
||||
const startDate = defineModel<Date | null>('startDate');
|
||||
const retireDate = defineModel<Date | null>('retireDate');
|
||||
const birthDate = defineModel<Date | null>('birthDate');
|
||||
const responsibleArea = defineModel<string>('responsibleArea');
|
||||
const discountCondition = defineModel<string | null | undefined>(
|
||||
'discountCondition',
|
||||
|
|
@ -34,285 +30,211 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
class="col-3"
|
||||
label="เบอร์โทร"
|
||||
v-model="telephoneNo"
|
||||
mask="##########"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
label="เพศ"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="gender"
|
||||
:options="userStore.userOption.genderOpts"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="อีเมล"
|
||||
class="col-6"
|
||||
v-model="email"
|
||||
/>
|
||||
<div
|
||||
v-if="userType === 'USER' || userType === 'MESSENGER'"
|
||||
class="row col-12 q-col-gutter-md"
|
||||
style="margin-left: 0px; padding-left: 0px"
|
||||
>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
|
||||
class="col-12"
|
||||
v-model="registrationNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="startDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
<div v-if="userType" class="col-3 app-text-muted">• ข้อมูลการทำงาน</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<div
|
||||
v-if="userType === 'USER' || userType === 'MESSENGER'"
|
||||
class="row col-12 q-col-gutter-md"
|
||||
style="margin-left: 0px; padding-left: 0px"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันที่เริ่มงาน"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="startDate ? dateFormat(startDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="startDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="startDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
|
||||
class="col-12"
|
||||
v-model="registrationNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="startDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันที่เริ่มงาน"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="startDate ? dateFormat(startDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="startDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="startDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="retireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="retireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันที่พ้นสภาพพนักงาน"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="retireDate ? dateFormat(retireDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="retireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="retireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-select
|
||||
v-if="userType === 'MESSENGER'"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="responsibleArea"
|
||||
:options="userStore.userOption.responsibleAreaOpts"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="userType === 'DELEGATE'"
|
||||
class="row col-12"
|
||||
style="row-gap: 16px"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันที่พ้นสภาพพนักงาน"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="retireDate ? dateFormat(retireDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="retireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="retireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="birthDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
|
||||
class="col-12"
|
||||
v-model="discountCondition"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="userType === 'AGENCY'"
|
||||
class="row col-12 q-col-gutter-md"
|
||||
style="margin-left: 0px; padding-left: 0px"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันเดือนปีเกิด"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="birthDate ? dateFormat(birthDate) : ''"
|
||||
>
|
||||
<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="birthDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="birthDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
label="อายุ"
|
||||
class="col-3"
|
||||
:model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
|
||||
/>
|
||||
<q-select
|
||||
v-if="userType === 'MESSENGER'"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="responsibleArea"
|
||||
:options="userStore.userOption.responsibleAreaOpts"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="userType === 'DELEGATE'" class="row col-12" style="row-gap: 16px">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
|
||||
class="col-12"
|
||||
v-model="discountCondition"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="userType === 'AGENCY'"
|
||||
class="row col-12 q-col-gutter-md"
|
||||
style="margin-left: 0px; padding-left: 0px"
|
||||
>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สัญชาติต้นทาง"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="sourceNationality"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="นำเข้าสัญชาติ"
|
||||
class="col-3"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="importNationality"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สถานที่อบรม"
|
||||
class="col-6"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="trainingPlace"
|
||||
:options="userStore.userOption.trainingPlaceOpts"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="ด่าน"
|
||||
class="col-6"
|
||||
v-model="checkPoint"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="ด่าน ENG"
|
||||
class="col-6"
|
||||
v-model="checkPointEN"
|
||||
/>
|
||||
<q-file
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="แบบเอกสารประจำตัว"
|
||||
class="col-12"
|
||||
v-model="idenDoc"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สัญชาติต้นทาง"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="sourceNationality"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="นำเข้าสัญชาติ"
|
||||
class="col-3"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="importNationality"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สถานที่อบรม"
|
||||
class="col-6"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="trainingPlace"
|
||||
:options="userStore.userOption.trainingPlaceOpts"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="ด่าน"
|
||||
class="col-6"
|
||||
v-model="checkPoint"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="ด่าน ENG"
|
||||
class="col-6"
|
||||
v-model="checkPointEN"
|
||||
/>
|
||||
<q-file
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="แบบเอกสารประจำตัว"
|
||||
class="col-12"
|
||||
v-model="idenDoc"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
132
src/components/02_personnel-management/FormInformation.vue
Normal file
132
src/components/02_personnel-management/FormInformation.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<script setup lang="ts">
|
||||
import useUserStore from 'src/stores/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const hqId = defineModel<string | null | undefined>('hqId');
|
||||
const brId = defineModel<string | null | undefined>('brId');
|
||||
const userType = defineModel<string>('userType');
|
||||
const userRole = defineModel<string>('userRole');
|
||||
const userName = defineModel<string | null | undefined>('userName');
|
||||
const userCode = defineModel<string>('userCode');
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
|
||||
async function selectHq(id: string) {
|
||||
if (!id) return;
|
||||
brId.value = '';
|
||||
userStore.userOption.brOpts = [];
|
||||
await userStore.fetchBrOption(id);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• ข้อมูลพื้นฐาน</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
v-model="hqId"
|
||||
:options="userStore.userOption.hqOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
|
||||
@update:model-value="(val: string) => selectHq(val)"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
label="รหัสสาขา"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="brId"
|
||||
:options="userStore.userOption.brOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="ประเภทผู้ใช้งาน"
|
||||
v-model="userType"
|
||||
:options="userStore.userOption.userTypeOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
label="สิทธิ์ผู้ใช้งาน"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="userRole"
|
||||
:options="userStore.userOption.roleOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
label="ชื่อผู้ใช้งาน (Username)"
|
||||
v-model="userName"
|
||||
:rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
label="รหัสพนักงาน"
|
||||
v-model="userCode"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const firstName = defineModel<string>('firstName');
|
||||
const lastName = defineModel<string>('lastName');
|
||||
const firstNameEN = defineModel<string>('firstNameEN');
|
||||
const lastNameEN = defineModel<string>('lastNameEN');
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="ชื่อ ภาษาไทย"
|
||||
v-model="firstName"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="นามสกุล ภาษาไทย"
|
||||
v-model="lastName"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="ชื่อ ภาษาอังกฤษ"
|
||||
v-model="firstNameEN"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="นามสกุล ภาษาอังกฤษ"
|
||||
v-model="lastNameEN"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
|
||||
/>
|
||||
</template>
|
||||
152
src/components/02_personnel-management/FormPerson.vue
Normal file
152
src/components/02_personnel-management/FormPerson.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<script setup lang="ts">
|
||||
import useUserStore from 'src/stores/user';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const firstName = defineModel<string>('firstName');
|
||||
const lastName = defineModel<string>('lastName');
|
||||
const firstNameEN = defineModel<string>('firstNameEN');
|
||||
const lastNameEN = defineModel<string>('lastNameEN');
|
||||
const telephoneNo = defineModel<string>('telephoneNo');
|
||||
const email = defineModel<string>('email');
|
||||
const gender = defineModel<string>('gender');
|
||||
const birthDate = defineModel<Date | null>('birthDate');
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• ข้อมูลบุคลากร</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="ชื่อ ภาษาไทย"
|
||||
v-model="firstName"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="นามสกุล ภาษาไทย"
|
||||
v-model="lastName"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="ชื่อ ภาษาอังกฤษ"
|
||||
v-model="firstNameEN"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
label="นามสกุล ภาษาอังกฤษ"
|
||||
v-model="lastNameEN"
|
||||
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
class="col-6"
|
||||
label="เบอร์โทร"
|
||||
v-model="telephoneNo"
|
||||
mask="##########"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
label="อีเมล"
|
||||
class="col-6"
|
||||
v-model="email"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
label="เพศ"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="gender"
|
||||
:options="userStore.userOption.genderOpts"
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="birthDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
label="วันเดือนปีเกิด"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:model-value="birthDate ? dateFormat(birthDate) : ''"
|
||||
>
|
||||
<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="birthDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="birthDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
label="อายุ"
|
||||
class="col-3"
|
||||
:model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import useUserStore from 'src/stores/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const hqId = defineModel<string | null | undefined>('hqId');
|
||||
const brId = defineModel<string | null | undefined>('brId');
|
||||
const userType = defineModel<string>('userType');
|
||||
const userRole = defineModel<string>('userRole');
|
||||
const userName = defineModel<string | null | undefined>('userName');
|
||||
const userCode = defineModel<string>('userCode');
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
|
||||
async function selectHq(id: string) {
|
||||
if (!id) return;
|
||||
brId.value = '';
|
||||
userStore.userOption.brOpts = [];
|
||||
await userStore.fetchBrOption(id);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
v-model="hqId"
|
||||
:options="userStore.userOption.hqOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
|
||||
@update:model-value="(val: string) => selectHq(val)"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
label="รหัสสาขา"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="brId"
|
||||
:options="userStore.userOption.brOpts"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="ประเภทผู้ใช้งาน"
|
||||
v-model="userType"
|
||||
:options="userStore.userOption.userTypeOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
|
||||
/>
|
||||
<q-select
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
label="สิทธิ์ผู้ใช้งาน"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="userRole"
|
||||
:options="userStore.userOption.roleOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
v-if="userName"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
label="ชื่อผู้ใช้งาน (Username)"
|
||||
v-model="userName"
|
||||
:rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:class="userName ? 'col-3' : 'col-6'"
|
||||
bg-color="white"
|
||||
label="รหัสพนักงาน"
|
||||
v-model="userCode"
|
||||
/>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue