hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

บรรจุแต่งตั้ง ย้าย โอน ปรับ format code

Browse source
This commit is contained in:
Thanit Konmek 2023-08-29 11:28:58 +07:00
parent b20015450a
commit 546f53e634
14 changed files with 2477 additions and 2455 deletions
Download patch file Download diff file Expand all files Collapse all files

207
src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -1,106 +1,3 @@
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm">
<q-toggle
v-if="roleAdmin === false"
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="containStatus"
color="blue"
label="แสดงสถานะบรรจุแล้ว"
@update:model-value="updateContain"
/>
<div>
<q-btn
flat
round
color="primary"
icon="mdi-account-arrow-right"
@click="updateModaladdlist"
v-if="displayAdd"
/>
</div>
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดง table ใน คอลัมน์ -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-table
ref="table"
flat
bordered
class="custom-header-table"
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="history == true" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
</div>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { useQuasar } from "quasar";
@ -244,6 +141,110 @@ const updateModaladdlist = () => {
emit("update-modaladdlist", true);
};
</script>
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm">
<q-toggle
v-if="roleAdmin === false"
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="containStatus"
color="blue"
label="แสดงสถานะบรรจุแล้ว"
@update:model-value="updateContain"
/>
<div>
<q-btn
flat
round
color="primary"
icon="mdi-account-arrow-right"
@click="updateModaladdlist"
v-if="displayAdd"
/>
</div>
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดง table ใน คอลัมน์ -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-table
ref="table"
flat
bordered
class="custom-header-table"
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="history == true" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
</div>
</template>
<style lang="scss">
.icon-color {
color: #4154b3;

8
src/modules/05_placement/components/Receive/FormAdd.vue
View file

@ -1,3 +1,7 @@
<script setup lang="ts">
import Information from "@/modules/05_placement/components/Receive/information.vue";
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
@ -7,9 +11,7 @@
</div>
</div>
</template>
<script setup lang="ts">
import Information from "@/modules/05_placement/components/Receive/information.vue";
</script>
<style>
.image-size-default {
height: 150px;

849
src/modules/05_placement/components/Receive/information.vue
View file

@ -1,427 +1,3 @@
<template>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:history="!statusAdd()"
:addEmployee="statusAdd()"
/>
<!-- :disable="statusEdit" -->
<q-separator />
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
v-model="informaData.cardid"
dense
@update:model-value="changeCardID"
lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
]"
:readonly="!edit"
:borderless="!edit"
label="เลขบัตรประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้าชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
@update:model-value="handleDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="
informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:style="!edit ? '' : 'padding:0 12px;'"
:model-value="informaData.age"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.genderId"
emit-value
map-options
option-label="name"
:options="Ops.genderOps"
option-value="id"
:label="`${'เพศ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานภาพ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.nationality"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.religionId"
emit-value
map-options
option-label="name"
:options="Ops.religionOps"
option-value="id"
:label="`${'ศาสนา'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) "
clearable
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="tel"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
:label="`${'เบอร์โทร'}`"
mask="##########"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
</div>
</q-form>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="saveData"
/>
</div>
<q-separator />
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -855,3 +431,428 @@ const getClass = (val: boolean) => {
};
};
</script>
<template>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:history="!statusAdd()"
:addEmployee="statusAdd()"
/>
<!-- :disable="statusEdit" -->
<q-separator />
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
v-model="informaData.cardid"
dense
@update:model-value="changeCardID"
lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
]"
:readonly="!edit"
:borderless="!edit"
label="เลขบัตรประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้าชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
@update:model-value="handleDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="
informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:style="!edit ? '' : 'padding:0 12px;'"
:model-value="informaData.age"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.genderId"
emit-value
map-options
option-label="name"
:options="Ops.genderOps"
option-value="id"
:label="`${'เพศ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานภาพ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.nationality"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.religionId"
emit-value
map-options
option-label="name"
:options="Ops.religionOps"
option-value="id"
:label="`${'ศาสนา'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) "
clearable
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="tel"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
:label="`${'เบอร์โทร'}`"
mask="##########"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
</div>
</q-form>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="saveData"
/>
</div>
<q-separator />
</q-card>
</template>

52
src/modules/05_placement/components/Receive/receiveDetail.vue
View file

@ -1,3 +1,30 @@
<script setup lang="ts">
import { ref } from "vue";
import Image from "@/components/information/Image.vue";
import Information from "@/components/information/Information.vue";
import Government from "@/components/information/Government.vue";
import Address from "@/components/information/Address.vue";
import Family from "@/components/information/Family.vue";
import Certicate from "@/components/information/Certicate.vue";
import EducationVue from "@/components/information/Education.vue";
import TrainVue from "@/components/information/Train.vue";
import InsigniaVue from "@/components/information/Insignia.vue";
import CoinedVue from "@/components/information/Coin.vue";
import AssessmentVue from "@/components/information/Assessment.vue";
import SalaryVue from "@/components/information/Salary.vue";
import DisciplineVue from "@/components/information/Discipline.vue";
import LeaveVue from "@/components/information/Leave.vue";
import TalentVue from "@/components/information/Talent.vue";
import WorkVue from "@/components/information/Work.vue";
import RecordVue from "@/components/information/Record.vue";
import OtherVue from "@/components/information/Other.vue";
import DocumentVue from "@/components/information/Document.vue";
const statusEdit = ref<boolean>(false);
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
@ -73,32 +100,7 @@
<Image />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Image from "@/components/information/Image.vue";
import Information from "@/components/information/Information.vue";
import Government from "@/components/information/Government.vue";
import Address from "@/components/information/Address.vue";
import Family from "@/components/information/Family.vue";
import Certicate from "@/components/information/Certicate.vue";
import EducationVue from "@/components/information/Education.vue";
import TrainVue from "@/components/information/Train.vue";
import InsigniaVue from "@/components/information/Insignia.vue";
import CoinedVue from "@/components/information/Coin.vue";
import AssessmentVue from "@/components/information/Assessment.vue";
import SalaryVue from "@/components/information/Salary.vue";
import DisciplineVue from "@/components/information/Discipline.vue";
import LeaveVue from "@/components/information/Leave.vue";
import TalentVue from "@/components/information/Talent.vue";
import WorkVue from "@/components/information/Work.vue";
import RecordVue from "@/components/information/Record.vue";
import OtherVue from "@/components/information/Other.vue";
import DocumentVue from "@/components/information/Document.vue";
const statusEdit = ref<boolean>(false);
</script>
<style lang="scss" scoped>
.information:target {
padding-top: 84px;

872
src/modules/05_placement/components/Receive/receiveDetail2.vue
View file

@ -1,3 +1,440 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import CurrencyInput from "@/components/CurruncyInput.vue";
import type { QTableProps, QForm } from "quasar";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import { defaultInformation } from "@/modules/04_registry/components/profileType";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const paramsId = route.params.id;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
dateToISO,
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText } = profileStore;
const title = ref<ResponseTitle>({
fullname: "",
organizationPositionOld: "",
positionLevelOld: "",
positionTypeOld: "",
});
const status = ref<string>("");
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const profileId = ref<string>("");
const educationOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const posNo = ref<string>("");
const salary = ref<number>(0);
// const organization = ref<string>("");
// const date = ref<Date | null>(null);
const reason = ref<string>("");
const informaData = ref<Information>(defaultInformation);
const dateBefore = ref<Date>(new Date());
const defaultCitizenData = ref<string>("");
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
onMounted(async () => {
await fetchPerson();
await getData();
});
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.finally(() => {
// hideLoader();
});
};
const getData = async () => {
showLoader();
await http
.get(config.API.receiveDataId(paramsId.toString()))
.then(async (res: any) => {
const data = res.data.result;
profileId.value = data.profileId;
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
title.value.positionLevelOld = data.positionLevelOld ?? "-";
title.value.positionTypeOld = data.positionTypeOld ?? "-";
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
informaData.value = {
cardid: data.citizenId ?? "",
age: "",
prefix: "",
prefixId:
(data.prefixId == "00000000-0000-0000-0000-000000000000"
? null
: data.prefixId) ?? "",
firstname: data.firstname ?? "",
lastname: data.lastname ?? "",
birthDate:
data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
genderId:
(data.gender == "00000000-0000-0000-0000-000000000000"
? null
: data.gender) ?? "",
bloodId:
(data.bloodGroup == "00000000-0000-0000-0000-000000000000"
? null
: data.bloodGroup) ?? "",
nationality: data.nationality ?? "",
ethnicity: data.race ?? "",
statusId:
(data.relationship == "00000000-0000-0000-0000-000000000000"
? null
: data.relationship) ?? "",
religionId:
(data.religion == "00000000-0000-0000-0000-000000000000"
? null
: data.religion) ?? "",
tel: data.telephoneNumber ?? "",
employeeType: "",
employeeClass: "",
profileType: "",
};
educationOld.value = data.educationOld ?? "";
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.amountOld ?? 0;
reason.value = data.reason ?? "";
status.value = data.status ?? "";
await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
dateBefore.value = new Date(data.dateOfBirth);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const cancel = async () => {
edit.value = !edit.value;
if (myForm.value !== null) {
await getData();
myForm.value.reset();
}
};
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
// informaData.value.cardid = defaultCitizenData.value;
}
}
};
const checkCitizen = async (id: string) => {
console.log("String");
showLoader();
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeClassOps":
update(() => {
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeTypeOps":
update(() => {
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
await calRetire(modelData);
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
// if (dateToISO(dateBefore.value) != dateToISO(birth)) {
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = dateBefore.value;
changeRetireText(date2Thai(retire));
})
.finally(() => {
hideLoader();
});
// }
};
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success) => {
if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
}
});
}
};
const saveData = async () => {
const body = {
citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId,
firstname: informaData.value.firstname,
lastname: informaData.value.lastname,
dateOfBirth:
informaData.value.birthDate !== null
? dateToISO(informaData.value.birthDate)
: null,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,
reason: reason.value,
educationOld: educationOld.value,
organizationPositionOld: organizationPositionOld.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amount: 0,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.receiveDataId(route.params.id.toString()), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -577,442 +1014,7 @@
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import CurrencyInput from "@/components/CurruncyInput.vue";
import type { QTableProps, QForm } from "quasar";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import { defaultInformation } from "@/modules/04_registry/components/profileType";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const paramsId = route.params.id;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
dateToISO,
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText } = profileStore;
const title = ref<ResponseTitle>({
fullname: "",
organizationPositionOld: "",
positionLevelOld: "",
positionTypeOld: "",
});
const status = ref<string>("");
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const profileId = ref<string>("");
const educationOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const posNo = ref<string>("");
const salary = ref<number>(0);
// const organization = ref<string>("");
// const date = ref<Date | null>(null);
const reason = ref<string>("");
const informaData = ref<Information>(defaultInformation);
const dateBefore = ref<Date>(new Date());
const defaultCitizenData = ref<string>("");
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
onMounted(async () => {
await fetchPerson();
await getData();
});
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.finally(() => {
// hideLoader();
});
};
const getData = async () => {
showLoader();
await http
.get(config.API.receiveDataId(paramsId.toString()))
.then(async (res: any) => {
const data = res.data.result;
profileId.value = data.profileId;
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
title.value.positionLevelOld = data.positionLevelOld ?? "-";
title.value.positionTypeOld = data.positionTypeOld ?? "-";
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
informaData.value = {
cardid: data.citizenId ?? "",
age: "",
prefix: "",
prefixId:
(data.prefixId == "00000000-0000-0000-0000-000000000000"
? null
: data.prefixId) ?? "",
firstname: data.firstname ?? "",
lastname: data.lastname ?? "",
birthDate:
data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
genderId:
(data.gender == "00000000-0000-0000-0000-000000000000"
? null
: data.gender) ?? "",
bloodId:
(data.bloodGroup == "00000000-0000-0000-0000-000000000000"
? null
: data.bloodGroup) ?? "",
nationality: data.nationality ?? "",
ethnicity: data.race ?? "",
statusId:
(data.relationship == "00000000-0000-0000-0000-000000000000"
? null
: data.relationship) ?? "",
religionId:
(data.religion == "00000000-0000-0000-0000-000000000000"
? null
: data.religion) ?? "",
tel: data.telephoneNumber ?? "",
employeeType: "",
employeeClass: "",
profileType: "",
};
educationOld.value = data.educationOld ?? "";
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.amountOld ?? 0;
reason.value = data.reason ?? "";
status.value = data.status ?? "";
await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
dateBefore.value = new Date(data.dateOfBirth);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const cancel = async () => {
edit.value = !edit.value;
if (myForm.value !== null) {
await getData();
myForm.value.reset();
}
};
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
// informaData.value.cardid = defaultCitizenData.value;
}
}
};
const checkCitizen = async (id: string) => {
console.log("String");
showLoader();
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeClassOps":
update(() => {
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeTypeOps":
update(() => {
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
await calRetire(modelData);
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
// if (dateToISO(dateBefore.value) != dateToISO(birth)) {
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = dateBefore.value;
changeRetireText(date2Thai(retire));
})
.finally(() => {
hideLoader();
});
// }
};
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success) => {
if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
}
});
}
};
const saveData = async () => {
const body = {
citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId,
firstname: informaData.value.firstname,
lastname: informaData.value.lastname,
dateOfBirth:
informaData.value.birthDate !== null
? dateToISO(informaData.value.birthDate)
: null,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,
reason: reason.value,
educationOld: educationOld.value,
organizationPositionOld: organizationPositionOld.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amount: 0,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.receiveDataId(route.params.id.toString()), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;

292
src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
View file

@ -1,3 +1,150 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const dataId = route.params.id as string;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
dialogConfirm,
} = mixin;
const myForm = ref<QForm | null>(null);
const personId = ref<string>("");
const fullname = ref<string>("");
const id = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const date = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
const getData = async () => {
showLoader();
await http
.get(config.API.repatriationDetail(dataId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
personId.value = data.profileId;
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
date.value = data.date;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success: any) => {
if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
}
});
}
};
const cancelBtn = () => {
edit.value = !edit;
getData();
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
date: date.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.repatriationMainEdit(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
onMounted(async () => {
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -272,152 +419,7 @@
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const dataId = route.params.id as string;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
dialogConfirm,
} = mixin;
const myForm = ref<QForm | null>(null);
const personId = ref<string>("");
const fullname = ref<string>("");
const id = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const date = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
const getData = async () => {
showLoader();
await http
.get(config.API.repatriationDetail(dataId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
personId.value = data.profileId;
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
date.value = data.date;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success: any) => {
if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
}
});
}
};
const cancelBtn = () => {
edit.value = !edit;
getData();
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
date: date.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.repatriationMainEdit(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
onMounted(async () => {
await getData();
});
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;

54
src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
View file

@ -1,3 +1,31 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent } from "vue";
import type { QStepper } from "quasar";
const step01 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
);
const step02 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
);
const step03 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
);
const router = useRouter();
const step = ref<number>(1);
const stepper = ref<QStepper>();
const nextStep = () => {
stepper.value!.next();
};
const previousStep = () => {
stepper.value!.previous();
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -49,33 +77,7 @@
</q-stepper>
</q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent } from "vue";
import type { QStepper } from "quasar";
const step01 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
);
const step02 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
);
const step03 = defineAsyncComponent(
() => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
);
const router = useRouter();
const step = ref<number>(1);
const stepper = ref<QStepper>();
const nextStep = () => {
stepper.value!.next();
};
const previousStep = () => {
stepper.value!.previous();
};
</script>
<style>
.q-stepper--horizontal .q-stepper__step-inner {
padding: 0px;

380
src/modules/05_placement/components/RepatriationOrder/List.vue
View file

@ -1,193 +1,3 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType"
label="ประเภท"
dense
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
</q-card>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="UpdataData"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="redirectToPage(props.row.Order)"
>
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
<q-td key="OrderNum" :props="props">
{{ props.row.OrderNum }}
</q-td>
<q-td key="OrderType" :props="props">
{{ props.row.OrderType }}
</q-td>
<q-td key="OrderDate" :props="props">
{{ props.row.OrderDate }}
</q-td>
<q-td key="OrderBy" :props="props">
{{ props.row.OrderBy }}
</q-td>
<q-td key="Signer" :props="props">
{{ props.row.Signer }}
</q-td>
<q-td key="OrderStatus" :props="props">
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click.stop="clickDelete(props.row.id)"
icon="mdi-delete"
>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
import type { QTableProps } from "quasar";
@ -677,6 +487,196 @@ const paginationLabel = (start: string, end: string, total: string) => {
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType"
label="ประเภท"
dense
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="id"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
</div>
</q-card>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="UpdataData"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="redirectToPage(props.row.Order)"
>
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
<q-td key="OrderNum" :props="props">
{{ props.row.OrderNum }}
</q-td>
<q-td key="OrderType" :props="props">
{{ props.row.OrderType }}
</q-td>
<q-td key="OrderDate" :props="props">
{{ props.row.OrderDate }}
</q-td>
<q-td key="OrderBy" :props="props">
{{ props.row.OrderBy }}
</q-td>
<q-td key="Signer" :props="props">
{{ props.row.Signer }}
</q-td>
<q-td key="OrderStatus" :props="props">
{{ props.row.OrderStatus }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click.stop="clickDelete(props.row.id)"
icon="mdi-delete"
>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</div>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;

266
src/modules/05_placement/components/RepatriationOrder/step01.vue
View file

@ -1,3 +1,137 @@
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const myForm = ref<QForm>();
const editRow = ref<boolean>(false);
const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
const dateCommand = ref<Date>(new Date());
// const dateRegister = ref<Date>(new Date());
// const dateAnnounce = ref<Date>(new Date());
const typeOrder = ref<string>("ช่วยราชการ");
const typeOrderOption = ref<DataOption[]>(["ส่งตัวกลับ", "ส่งตัวกลับ"]);
const typeOrderOptionFilter = ref<DataOption[]>([]);
const byOrder = ref<string>("");
const byOrderOption = ref<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);
// const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOptionFilter = ref<DataOption[]>([]);
// const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOptionFilter = ref<DataOption[]>([]);
// const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);
const test = ref<string>("นายก ข");
const testOption = ref<DataOption[]>([]);
const testOptionFilter = ref<DataOption[]>([]);
const clickEditRow = () => (editRow.value = true);
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "typeOrderOption":
update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "byOrderOption":
update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "registerOption":
update(() => {
registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "announceOption":
update(() => {
announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "positionOption":
update(() => {
positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "testOption":
update(() => {
testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const submit = async () => {
next();
// await myForm.value!.validate().then((result: boolean) => {
// if (result) {
// next();
// }
// });
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<div style="max-height: 68vh; overflow-y: scroll">
<q-form ref="myForm" class="q-pa-md">
@ -213,139 +347,7 @@
<q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const myForm = ref<QForm>();
const editRow = ref<boolean>(false);
const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
const dateCommand = ref<Date>(new Date());
// const dateRegister = ref<Date>(new Date());
// const dateAnnounce = ref<Date>(new Date());
const typeOrder = ref<string>("ช่วยราชการ");
const typeOrderOption = ref<DataOption[]>(['ส่งตัวกลับ',"ส่งตัวกลับ"]);
const typeOrderOptionFilter = ref<DataOption[]>([]);
const byOrder = ref<string>("");
const byOrderOption = ref<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);
// const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOptionFilter = ref<DataOption[]>([]);
// const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOptionFilter = ref<DataOption[]>([]);
// const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);
const test = ref<string>("นายก ข");
const testOption = ref<DataOption[]>([]);
const testOptionFilter = ref<DataOption[]>([]);
const clickEditRow = () => (editRow.value = true);
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "typeOrderOption":
update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "byOrderOption":
update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "registerOption":
update(() => {
registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "announceOption":
update(() => {
announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "positionOption":
update(() => {
positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "testOption":
update(() => {
testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const submit = async () => {
next();
// await myForm.value!.validate().then((result: boolean) => {
// if (result) {
// next();
// }
// });
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style>
.q-field--with-bottom {
padding-bottom: 0px;

606
src/modules/05_placement/components/RepatriationOrder/step02.vue
View file

@ -1,305 +1,3 @@
<template>
<div>
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="idcard" :props="props">
{{ props.row.idcard }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="send" :props="props">
<q-select
:class="getClass(true)"
hide-bottom-space
multiple
:outlined="true"
dense
lazy-rules
v-model="props.row.mutiselect"
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไม่พบข้อมูลที่ค้นหา
</q-item-section>
</q-item>
</template>
</q-select>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อ"
>
</q-btn>
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="next"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<q-form ref="myForm">
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-12 row q-py-sm items-center">
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
v-model="filterModal"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterModal == ''" name="search" />
<q-icon
v-if="filterModal !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsModal"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columnsModal"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
:filter="filterModal"
row-key="name"
selection="multiple"
v-model:selected="selectedModal"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-selection="scope">
<!-- <q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/> -->
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="clickClose"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
@ -681,4 +379,308 @@ const onSelected = async (id: string) => {
const deleteData = async (id: string) => {};
</script>
<template>
<div>
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="idcard" :props="props">
{{ props.row.idcard }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="send" :props="props">
<q-select
:class="getClass(true)"
hide-bottom-space
multiple
:outlined="true"
dense
lazy-rules
v-model="props.row.mutiselect"
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไม่พบข้อมูลที่ค้นหา
</q-item-section>
</q-item>
</template>
</q-select>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อ"
>
</q-btn>
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="next"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<q-form ref="myForm">
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-12 row q-py-sm items-center">
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
v-model="filterModal"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterModal == ''" name="search" />
<q-icon
v-if="filterModal !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsModal"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columnsModal"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
:filter="filterModal"
row-key="name"
selection="multiple"
v-model:selected="selectedModal"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-selection="scope">
<!-- <q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/> -->
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="clickClose"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss"></style>

210
src/modules/05_placement/components/RepatriationOrder/step03.vue
View file

@ -1,3 +1,109 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => {
// myEventHandler(e);
// });
// });
onMounted(async () => {
// window.addEventListener("resize", (e: any) => {
// myEventHandler(e);
// });
const pdfData = usePDF("/src/assets/05_modules.pdf");
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
});
// const myEventHandler = (e: any) => {
// console.log("e", e.target.innerWidth);
// if (vuePDFRef !== null) {
// vuePDFRef.value.reload();
// }
// };
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const myForm = ref<QForm | null>(null);
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const splitterModel = ref<number>(70);
const tab = ref<string>("main");
const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);
const order = ref<string>("");
const years = ref<number>(new Date().getFullYear());
const date = ref<Date>(new Date());
const onchangePage = (val: any) => {
// console.log(val);
if (vuePDFRef !== null) {
vuePDFRef.value.reload();
}
};
const save = () => {
if (myForm.value !== null) {
myForm.value!.validate().then((success: Boolean) => {
if (success) {
// yay, models are correct
}
});
}
};
const validateForm = () => {
return (
fileOrder.value !== null &&
fileOrder.value !== null &&
order.value.trim() !== ""
);
};
const getClass = (val: boolean) => {
return {
"card-header-active q-px-lg q-py-md cursor-pointer": val,
"card-header q-px-lg q-py-md cursor-pointer": !val,
};
};
const setTab = (val: string) => {
tab.value = val;
page.value = 1;
};
</script>
<template>
<div>
<div style="min-height: 70vh">
@ -416,111 +522,7 @@
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => {
// myEventHandler(e);
// });
// });
onMounted(async () => {
// window.addEventListener("resize", (e: any) => {
// myEventHandler(e);
// });
const pdfData = usePDF("/src/assets/05_modules.pdf");
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
});
// const myEventHandler = (e: any) => {
// console.log("e", e.target.innerWidth);
// if (vuePDFRef !== null) {
// vuePDFRef.value.reload();
// }
// };
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const myForm = ref<QForm | null>(null);
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const splitterModel = ref<number>(70);
const tab = ref<string>("main");
const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);
const order = ref<string>("");
const years = ref<number>(new Date().getFullYear());
const date = ref<Date>(new Date());
const onchangePage = (val: any) => {
// console.log(val);
if (vuePDFRef !== null) {
vuePDFRef.value.reload();
}
};
const save = () => {
if (myForm.value !== null) {
myForm.value!.validate().then((success: Boolean) => {
if (success) {
// yay, models are correct
}
});
}
};
const validateForm = () => {
return (
fileOrder.value !== null &&
fileOrder.value !== null &&
order.value.trim() !== ""
);
};
const getClass = (val: boolean) => {
return {
"card-header-active q-px-lg q-py-md cursor-pointer": val,
"card-header q-px-lg q-py-md cursor-pointer": !val,
};
};
const setTab = (val: string) => {
tab.value = val;
page.value = 1;
};
</script>
<style lang="scss" scoped>
.border {
border-radius: 10px;

306
src/modules/05_placement/components/helpgovernment/governmentDetail.vue
View file

@ -1,3 +1,157 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
// import type {
// TypeFile,
// ResponseDataDetail,
// } from "@/modules/05_placement/interface/response/Transfer";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const dataId = route.params.id as string;
const {
date2Thai,
dialogConfirm,
messageError,
showLoader,
hideLoader,
success,
} = mixin;
const roleAdmin = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const name = ref<string>("นายสมคิด ยอดใจ");
const level = ref<string>("ชำนาญการพิเศษ");
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
const fullname = ref<string>("");
const id = ref<string>("");
const profileId = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const dateStart = ref<Date | null>(null);
const dateEnd = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
const getData = async () => {
showLoader();
await http
.get(config.API.officerDetail(dataId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
profileId.value = data.profileId;
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
dateStart.value = data.dateStart;
dateEnd.value = data.dateEnd;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
//
const conditionSave = async () => {
// if (myForm.value !== null) {
// myForm.value.validate().then((success: any) => {
// if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
};
// });
// }
// };
const cancelBtn = () => {
edit.value = !edit;
getData();
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
dateStart: dateStart.value,
dateEnd: dateEnd.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.officerMainEdit(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
onMounted(async () => {
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -320,159 +474,7 @@
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
// import type {
// TypeFile,
// ResponseDataDetail,
// } from "@/modules/05_placement/interface/response/Transfer";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const dataId = route.params.id as string;
const {
date2Thai,
dialogConfirm,
messageError,
showLoader,
hideLoader,
success,
} = mixin;
const roleAdmin = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const name = ref<string>("นายสมคิด ยอดใจ");
const level = ref<string>("ชำนาญการพิเศษ");
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
const fullname = ref<string>("");
const id = ref<string>("");
const profileId = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const dateStart = ref<Date | null>(null);
const dateEnd = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
const getData = async () => {
showLoader();
await http
.get(config.API.officerDetail(dataId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
profileId.value = data.profileId;
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
dateStart.value = data.dateStart;
dateEnd.value = data.dateEnd;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
//
const conditionSave = async () => {
// if (myForm.value !== null) {
// myForm.value.validate().then((success: any) => {
// if (success) {
dialogConfirm(
$q,
async () => await saveData(),
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
);
};
// });
// }
// };
const cancelBtn = () => {
edit.value = !edit;
getData();
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
dateStart: dateStart.value,
dateEnd: dateEnd.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.officerMainEdit(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
onMounted(async () => {
await getData();
});
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;

512
src/modules/05_placement/components/probation/MainProbation.vue
View file

@ -1,259 +1,3 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="modal = true"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="router.push(`/probation/detail/${props.row.personal_id}`)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'probation_status'">
<q-icon
size="20px"
v-if="props.row.probation_status === 'PENDING'"
name="mdi-timer-sand"
color="deep-orange"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'PROCESS'"
name="mdi-timer-sand"
color="deep-orange"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'PASS'"
name="mdi-check"
color="teal"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'NO-PASS'"
name="mdi-close"
color="red"
/>
{{
props.row.probation_status === "PENDING"
? "รอมอบหมายงาน"
: props.row.probation_status === "PROCESS"
? "อยู่ระหว่างทดลองงาน"
: props.row.probation_status === "PASS"
? "ผ่านการทดลองงาน"
: props.row.probation_status === "NO-PASS"
? "ไม่ผ่านการทดลองงาน"
: ""
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader
tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-sm">
<q-input
class="col-12"
standout
dense
v-model="filterKeyword2"
ref="filterRef2"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter2"
/>
</template>
</q-input>
<div class="col-12">
<q-table
ref="table2"
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
dense
class="q-px-md"
outline
color="primary"
label="เพิ่ม"
@click="clickAdd(props.row.id)"
>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs, onMounted, watch } from "vue";
import type { QTableProps } from "quasar";
@ -610,6 +354,262 @@ const paginationLabel = (start: string, end: string, total: string) => {
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="modal = true"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="router.push(`/probation/detail/${props.row.personal_id}`)"
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'probation_status'">
<q-icon
size="20px"
v-if="props.row.probation_status === 'PENDING'"
name="mdi-timer-sand"
color="deep-orange"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'PROCESS'"
name="mdi-timer-sand"
color="deep-orange"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'PASS'"
name="mdi-check"
color="teal"
/>
<q-icon
size="20px"
v-else-if="props.row.probation_status === 'NO-PASS'"
name="mdi-close"
color="red"
/>
{{
props.row.probation_status === "PENDING"
? "รอมอบหมายงาน"
: props.row.probation_status === "PROCESS"
? "อยู่ระหว่างทดลองงาน"
: props.row.probation_status === "PASS"
? "ผ่านการทดลองงาน"
: props.row.probation_status === "NO-PASS"
? "ไม่ผ่านการทดลองงาน"
: ""
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader
tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-sm">
<q-input
class="col-12"
standout
dense
v-model="filterKeyword2"
ref="filterRef2"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter2"
/>
</template>
</q-input>
<div class="col-12">
<q-table
ref="table2"
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
dense
class="q-px-md"
outline
color="primary"
label="เพิ่ม"
@click="clickAdd(props.row.id)"
>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;

318
src/modules/05_placement/components/probation/ProbationDetail.vue
View file

@ -1,3 +1,163 @@
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
import { useCounterMixin } from "@/stores/mixin";
import { date, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
const router = useRouter();
const route = useRoute();
const personalId = ref<string>(route.params.id as string);
const name = ref<string>("");
const position_line = ref<string>("");
const position_level = ref<string>("");
const organization = ref<string>("");
const probation_status = ref<string>("");
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"date_start",
"date_finish",
"mentors",
"commander",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date_start",
align: "left",
label: "ตั้งแต่วันที่",
sortable: true,
field: "date_start",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date_finish",
align: "left",
label: "ถึงวันที่",
sortable: true,
field: "date_finish",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "mentors",
align: "left",
label: "ผู้ดูแล",
sortable: true,
field: "mentors",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "commander",
align: "left",
label: "ผู้บังคับบัญชา",
sortable: true,
field: "commander",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormProbationDetail[]>([]);
const clickAdd = () => {};
const clickSelect = (id: string) => {
// console.log(route.fullPath);
router.push(`${route.fullPath}/${id}`);
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const getAssignList = async () => {
showLoader();
await http
.get(config.API.probationGetAssignList(personalId.value))
.then((res) => {
console.log("LIST ===>", res.data.data);
const data = res.data.data;
rows.value = data.map((item: FormProbationDetail) => ({
id: item.id,
round_no: item.round_no,
date_start: date2Thai(new Date(item.date_start)),
date_finish: date2Thai(new Date(item.date_finish)),
mentors: item.mentors,
commander: item.commander,
chairman: item.chairman,
}));
})
.catch(() => {})
.finally(() => {
hideLoader();
});
};
const getpersonalList = async () => {
showLoader();
await http
.get(config.API.personal(personalId.value))
.then((res) => {
const data = res.data.data;
name.value = data.name;
position_line.value = data.position_line;
position_level.value = data.position_level;
organization.value = data.organization;
probation_status.value = data.probation_status;
console.log("(data)", data);
})
.catch(() => {})
.finally(() => {
hideLoader();
});
};
onMounted(async () => {
await getpersonalList();
await getAssignList();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -212,165 +372,7 @@
</div>
</q-card>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
import { useCounterMixin } from "@/stores/mixin";
import { date, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
const router = useRouter();
const route = useRoute();
const personalId = ref<string>(route.params.id as string);
const name = ref<string>("");
const position_line = ref<string>("");
const position_level = ref<string>("");
const organization = ref<string>("");
const probation_status = ref<string>("");
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"date_start",
"date_finish",
"mentors",
"commander",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date_start",
align: "left",
label: "ตั้งแต่วันที่",
sortable: true,
field: "date_start",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date_finish",
align: "left",
label: "ถึงวันที่",
sortable: true,
field: "date_finish",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "mentors",
align: "left",
label: "ผู้ดูแล",
sortable: true,
field: "mentors",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "commander",
align: "left",
label: "ผู้บังคับบัญชา",
sortable: true,
field: "commander",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormProbationDetail[]>([]);
const clickAdd = () => {};
const clickSelect = (id: string) => {
// console.log(route.fullPath);
router.push(`${route.fullPath}/${id}`);
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const getAssignList = async () => {
showLoader();
await http
.get(config.API.probationGetAssignList(personalId.value))
.then((res) => {
console.log("LIST ===>", res.data.data);
const data = res.data.data;
rows.value = data.map((item: FormProbationDetail) => ({
id: item.id,
round_no: item.round_no,
date_start: date2Thai(new Date(item.date_start)),
date_finish: date2Thai(new Date(item.date_finish)),
mentors: item.mentors,
commander: item.commander,
chairman: item.chairman,
}));
})
.catch(() => {})
.finally(() => {
hideLoader();
});
};
const getpersonalList = async () => {
showLoader();
await http
.get(config.API.personal(personalId.value))
.then((res) => {
const data = res.data.data;
name.value = data.name;
position_line.value = data.position_line;
position_level.value = data.position_level;
organization.value = data.organization;
probation_status.value = data.probation_status;
console.log("(data)", data);
})
.catch(() => {})
.finally(() => {
hideLoader();
});
};
onMounted(async () => {
await getpersonalList();
await getAssignList();
});
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;