refactor: edit form use FormComponent (name, top, byType) instead
This commit is contained in:
puriphatt
parent
af986e0ae9
commit
ee66e825bb
5 changed files with 565 additions and 467 deletions
307
src/components/02_personnel-management/FormByType.vue
Normal file
307
src/components/02_personnel-management/FormByType.vue
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
<script setup lang="ts">
|
||||
import useUserStore from 'src/stores/user';
|
||||
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',
|
||||
);
|
||||
const sourceNationality = defineModel<string | null | undefined>(
|
||||
'sourceNationality',
|
||||
);
|
||||
const importNationality = defineModel<string | null | undefined>(
|
||||
'importNationality',
|
||||
);
|
||||
const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
|
||||
const checkPoint = defineModel<string>('checkPoint');
|
||||
const checkPointEN = defineModel<string>('checkPointEN');
|
||||
const idenDoc = defineModel<File>('idenDoc');
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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="primary"
|
||||
/>
|
||||
</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="readonly"
|
||||
label="อายุ"
|
||||
class="col-3"
|
||||
:model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
|
||||
/>
|
||||
<q-select
|
||||
v-if="userType === 'MESSENGER'"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="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"
|
||||
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"
|
||||
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"
|
||||
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 outlined 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>
|
||||
</template>
|
||||
56
src/components/02_personnel-management/FormName.vue
Normal file
56
src/components/02_personnel-management/FormName.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import useUserStore from 'src/stores/user';
|
||||
|
||||
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>
|
||||
124
src/components/02_personnel-management/FormTop.vue
Normal file
124
src/components/02_personnel-management/FormTop.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
||||
import { Province, District, SubDistrict } from 'stores/address';
|
||||
|
|
@ -22,9 +22,9 @@ const adrressStore = useAddressStore();
|
|||
const modal = defineModel('modal', { default: false });
|
||||
const address = defineModel('address', { default: '' });
|
||||
const addressEN = defineModel('addressEN', { default: '' });
|
||||
const provinceId = defineModel<string>('provinceId');
|
||||
const districtId = defineModel<string>('districtId');
|
||||
const subDistrictId = defineModel<string>('subDistrictId');
|
||||
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<{
|
||||
|
|
@ -88,7 +88,7 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog full-width v-model="modal">
|
||||
<q-dialog full-width v-model="modal" @hide="close">
|
||||
<AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
|
||||
<q-form greedy @submit.prevent @validation-success="submit">
|
||||
<!-- header -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue