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

Merge branch 'develop' into dev-tee

Browse source
This commit is contained in:
setthawutttty 2023-09-20 13:58:30 +07:00
commit e91bbb22f4
61 changed files with 8406 additions and 10436 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/information/Education.vue
View file

@ -633,7 +633,7 @@ const duration = ref<string>();
const durationYear = ref<number>(0);
const other = ref<string>();
const fundName = ref<string>();
const isDate = ref<string>("true");
const isDate = ref<string | null>("true");
const finishDate = ref<Date>(new Date());
const startDate = ref<number>(new Date().getFullYear());
const startDate2 = ref<Date>(new Date());
@ -1514,7 +1514,7 @@ const clickHistory = async (row: RequestItemsObject) => {
durationYear: e.durationYear,
other: e.other,
fundName: e.fundName,
isDate: e.isDate.toString(),
isDate: e.isDate,
finishDate: new Date(e.finishDate),
startDate: new Date(e.startDate).getFullYear(),
endDate: new Date(e.endDate).getFullYear(),

1
src/modules/02_organizational/views/MainTreeEmployee.vue
View file

@ -1648,6 +1648,7 @@ const clickAdd = async () => {
isActive.value = false;
isCondition.value = false;
conditionNote.value = "";
selected.value = "";
};
/**เมื่อเลือกใหม่

4
src/modules/04_registry/components/Education.vue
View file

@ -636,7 +636,7 @@ const duration = ref<string>();
const durationYear = ref<number>(0);
const other = ref<string>();
const fundName = ref<string>();
const isDate = ref<string>("true");
const isDate = ref<string | null>("true");
const finishDate = ref<Date>(new Date());
const startDate = ref<number>(new Date().getFullYear());
const startDate2 = ref<Date>(new Date());
@ -1517,7 +1517,7 @@ const clickHistory = async (row: RequestItemsObject) => {
durationYear: e.durationYear,
other: e.other,
fundName: e.fundName,
isDate: e.isDate.toString(),
isDate: e.isDate,
finishDate: new Date(e.finishDate),
startDate: new Date(e.startDate).getFullYear(),
endDate: new Date(e.endDate).getFullYear(),

446
src/modules/04_registry/components/Information/Information.vue
View file

@ -1,106 +1,41 @@
<template>
<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()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" :history="!statusAdd()"
:changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" :historyClick="clickHistory"
:addEmployee="statusAdd()" />
<q-form ref="myform" class="col-12">
<div class="row col-12 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"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
@update:model-value="changeCardID"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val:string) =>
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="informaData.cardid" @update:model-value="changeCardID" :rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
</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'
) "
/>
<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="`${'ชื่อ'}`"
/>
<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="`${'นามสกุล'}`"
/>
<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"
>
<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>
@ -108,30 +43,15 @@
{{ 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
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" :model-value="informaData.birthDate !== null
? date2Thai(informaData.birthDate)
: null
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
" :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 name="event" class="cursor-pointer" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
">
</q-icon>
</template>
</q-input>
@ -139,273 +59,99 @@
</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="`${'อายุ'}`"
/>
<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'
) "
/>
<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'
) "
/>
<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="`${'สัญชาติ'}`"
/>
<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="`${'เชื้อชาติ'}`"
/>
<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'
) "
/>
<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
/>
<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="`${'เบอร์โทร'}`"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) =>
<q-input hide-bottom-space :outlined="edit" dense lazy-rules type="tel" :class="getClass(edit)"
:readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
mask="##########"
/>
]" mask="##########" />
</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 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 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 class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
<label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="มี"
dense
:disable="!edit"
/>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่มี"
color="grey-9"
dense
:disable="!edit"
/>
<q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" label="มี" dense
:disable="!edit" />
<q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0" label="ไม่มี"
color="grey-9" dense :disable="!edit" />
</div>
<div class="row col-12">
<OldName
v-if="same == '1'"
v-model:statusEdit="edit"
:fetchDataInformation="fetchDataComponent"
:perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
:firstname="
informaData.firstname == null ? '' : informaData.firstname
"
:lastname="informaData.lastname == null ? '' : informaData.lastname"
/>
<OldName v-if="same == '1'" v-model:statusEdit="edit" :fetchDataInformation="fetchDataComponent"
:perfixId="informaData.prefixId == null ? '' : informaData.prefixId" :firstname="informaData.firstname == null ? '' : informaData.firstname
" :lastname="informaData.lastname == null ? '' : informaData.lastname" />
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<HistoryTable :rows="rowsHistory" :columns="columnsHistory" :filter="filterHistory"
:visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
<div v-if="col.name == 'birthDate' || col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
@ -811,7 +557,7 @@ const fetchPerson = async () => {
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.catch((e: any) => { })
.finally(() => {
hideLoader();
});
@ -897,14 +643,14 @@ const clickHistory = async () => {
e.employeeType == "gov"
? "งบประมาณเงินอุดหนุนรัฐบาล"
: e.employeeType == "bkk"
? "งบประมาณกรุงเทพมหานคร"
: "-",
? "งบประมาณกรุงเทพมหานคร"
: "-",
employeeClass:
e.employeeClass == "perm"
? "ลูกจ้างประจำ"
: e.employeeClass == "temp"
? "ลูกจ้างชั่วคราว"
: "-",
? "ลูกจ้างชั่วคราว"
: "-",
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
@ -1083,7 +829,7 @@ const editData = async () => {
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,

5
src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
View file

@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import http from "@/plugins/http";
import config from "@/app.config";
const Header = defineAsyncComponent(
() =>
import(
@ -17,8 +20,6 @@ const FormSaveResult = defineAsyncComponent(
)
);
import http from "@/plugins/http";
import config from "@/app.config";
const router = useRouter();
const route = useRoute();
const $q = useQuasar();

5
src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
View file

@ -4,6 +4,9 @@ import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import http from "@/plugins/http";
import config from "@/app.config";
const Header = defineAsyncComponent(
() =>
import(
@ -17,8 +20,6 @@ const FormSaveResultCommader = defineAsyncComponent(
)
);
import http from "@/plugins/http";
import config from "@/app.config";
const router = useRouter();
const route = useRoute();
const $q = useQuasar();

7
src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
View file

@ -1,13 +1,6 @@
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
// const tab = ref<string>("save1");
// const changeTab = (tabVal: string) => {
// tab.value = tabVal
// }
// const Header = defineAsyncComponent(
// () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
// );
const FormReport = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue")
)

22
src/modules/06_retirement/components/DialogFooter.vue
View file

@ -1,5 +1,4 @@
<script setup lang="ts">
const props = defineProps({
editvisible: Boolean,
modalEdit: Boolean,
@ -29,9 +28,6 @@ const emit = defineEmits([
const updateEdit = (value: Boolean) => {
emit("update:editvisible", value);
};
// const cancel = async () => {
// props.cancel();
// };
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
@ -39,30 +35,30 @@ const edit = async () => {
const checkSave = () => {
props.validate();
props.save();
};
</script>
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn
v-if="!editvisible"
<q-btn
v-if="!editvisible"
outline
:disabled="editvisible"
:disabled="editvisible"
:color="editvisible ? 'grey-7' : 'primary'"
@click="edit"
@click="edit"
><!-- icon="mdi-pencil-outline"
<q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
</q-btn>
<div v-else>
<q-btn
<q-btn
unelevated
label="บันทึก"
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
@click="checkSave"
>
</q-btn><!-- icon="mdi-content-save-outline">
</q-btn
><!-- icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip> -->
</div>
</q-card-actions>

13
src/modules/06_retirement/components/DialogHeader.vue
View file

@ -13,17 +13,22 @@ const close = async () => {
<template>
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
</template>
<style scoped lang="scss">
.header-text {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: #35373C;
color: #35373c;
}
</style>

9
src/modules/06_retirement/components/Discharged/dischargedMain.vue
View file

@ -5,12 +5,9 @@ import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
import type { ResponseData } from "@/modules/06_retirement/interface/response/discharged";
const selected = ref<ResponseData[]>([]);
@ -52,7 +49,9 @@ const visibleColumns2 = ref<string[]>([
"positionLevel",
"organizationPositionOld",
"statustext",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
]);
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const filterRef = ref<any>(null);
@ -263,7 +262,6 @@ const deleteData = async (id: string) => {
.delete(config.API.dischargeByid(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
console.log(res);
})
.catch((e) => {
messageError($q, e);
@ -273,6 +271,7 @@ const deleteData = async (id: string) => {
});
};
//ส่งไปออกคำสั่ง
const saveOrder = async () => {
const id = selected.value.map((r) => r.id);
const body = {

5
src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
View file

@ -20,7 +20,6 @@ const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
@ -61,7 +60,6 @@ const responseData = ref<ResponseDataDetail>({
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin.value);
}
await getData();
});
@ -124,6 +122,7 @@ const conditionSave = async () => {
}
};
//บันทึกข้อมูล
const saveData = async () => {
const body = {
organization: organization.value,
@ -139,8 +138,6 @@ const saveData = async () => {
await http
.put(config.API.dischargeByid(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})

11
src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
View file

@ -5,12 +5,9 @@ import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
const selected = ref<ResponseData[]>([]);
@ -185,6 +182,7 @@ const columns2 = ref<QTableProps["columns"]>([
onMounted(async () => {
await getData();
});
const openModalOrder = () => {
openModal();
const row = filters.value.filter(
@ -193,6 +191,7 @@ const openModalOrder = () => {
);
rows2.value = row;
};
const getData = async () => {
showLoader();
await http
@ -234,6 +233,7 @@ const getData = async () => {
hideLoader();
});
};
const clickDelete = async (id: string) => {
dialogMessage(
$q,
@ -246,12 +246,12 @@ const clickDelete = async (id: string) => {
async () => await getData()
);
};
const deleteData = async (id: string) => {
await http
.delete(config.API.outByid(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
console.log(res);
})
.catch((e) => {
messageError($q, e);
@ -260,6 +260,8 @@ const deleteData = async (id: string) => {
await getData();
});
};
//ส่งไปออกคำสั่ง
const saveOrder = async () => {
const id = selected.value.map((r) => r.id);
const body = {
@ -280,6 +282,7 @@ const saveOrder = async () => {
hideLoader();
});
};
const openModal = () => (modal.value = true);
const closeModal = () => (modal.value = false);

3
src/modules/06_retirement/components/DismissOrder/outRegistry.vue
View file

@ -59,7 +59,6 @@ const responseData = ref<ResponseDataDetail>({
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin.value);
}
await getData();
});
@ -140,8 +139,6 @@ const saveData = async () => {
await http
.put(config.API.outByid(dataId), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})

9
src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
View file

@ -28,14 +28,14 @@ const prefix = ref<string>("");
const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
const adjust = ref<any>([]);
const timeThink = ref<any>([]);
const timeThink = ref<any>();
const fullname = ref<any>("");
const avata = ref<any>("");
const realReason = ref<any>("");
const notExitFactor = ref<any>("");
const haveJob = ref<any>("");
const suggestFriends = ref<any>([]);
const futureWork = ref<any>([]);
const haveJob = ref<any>();
const suggestFriends = ref<any>();
const futureWork = ref<any>();
const suggestion = ref<any>("");
const reasonWorkOther = ref("");
@ -117,7 +117,6 @@ const adjust_option = ref<any>([
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin.value);
}
await getData();
});

3
src/modules/06_retirement/components/Expulsion/expulsionMain.vue
View file

@ -30,7 +30,6 @@ const {
showLoader,
hideLoader,
success,
dialogMessage,
dialogRemove,
} = mixin;
const { statusText } = transferStore;
@ -258,7 +257,6 @@ const deleteData = async (id: string) => {
.delete(config.API.expulsionByid(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
console.log(res);
})
.catch((e) => {
messageError($q, e);
@ -269,6 +267,7 @@ const deleteData = async (id: string) => {
});
};
//ส่งไปออกคำสั่ง
const saveOrder = async () => {
const id = selected.value.map((r) => r.id);
const body = {

9
src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
View file

@ -9,11 +9,8 @@ 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/06_retirement/interface/response/expulsion";
import type { QForm } from "quasar";
import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
const $q = useQuasar();
const route = useRoute();
@ -23,7 +20,6 @@ const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
@ -64,7 +60,6 @@ const responseData = ref<ResponseDataDetail>({
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin.value);
}
await getData();
});

5
src/modules/06_retirement/components/ListRetirement/AddList.vue
View file

@ -84,7 +84,6 @@ const fecthlistRetire = async () => {
await http
.get(config.API.profileOrganizRoot)
.then((res) => {
console.log(res);
const id = res.data.result[0].id;
if (id !== "") {
findlist(id);
@ -117,9 +116,7 @@ const findlist = async (id: string) => {
organizationOrganization: e.oc,
}));
})
.catch((e) => {
console.log(e);
})
.catch((e) => {})
.finally(() => {
hideLoader();
});

14
src/modules/06_retirement/components/resign/DetailByidDeceased.vue
View file

@ -160,20 +160,6 @@ onMounted(async () => {
await getData();
});
const getList = async () => {
showLoader();
await http
.get(config.API.detailByidDeceased(profileId.value))
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const listModal = async (id: string) => {
showLoader();
await http

2
src/modules/06_retirement/components/resign/ResignOrder.vue
View file

@ -326,7 +326,6 @@ const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
for (let data of OriginalData.value) {
const OrderTypeValue = data.OrderType;
console.log(OrderTypeValue);
if (!addedOrderTypeValues.includes(OrderTypeValue)) {
OrderTypeOption.push({
id: OrderTypeOption.length,
@ -342,7 +341,6 @@ const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
for (let data of OriginalData.value) {
const OrderStatusValue = data.OrderStatus;
console.log(OrderStatusValue);
if (
OrderStatusValue === null ||

34
src/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue Normal file
View file

@ -0,0 +1,34 @@
<script setup lang="ts">
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
});
</script>
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="props.icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="props.icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="props.header != ''"
>
{{ props.header }}
</div>
</div>
</div>
</template>

505
src/modules/08_registryEmployee/components/AddEmployee/Main.vue Normal file
View file

@ -0,0 +1,505 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import type { QForm } from "quasar";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
dialogMessage,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const informaData = ref<Information>({
cardid: null,
age: null,
prefix: null,
prefixId: null,
firstname: null,
lastname: null,
birthDate: null,
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
});
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
// รายการข้อมูลทั้งหมด
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// ข้อมูลเมื่อเลือกแล้ว
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// call function get รายการข้อมูลต่างๆ
onMounted(async () => {
await fetchPerson();
});
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
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();
});
};
// รูป profile
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
};
// คลิกแก้ไขรูป profile
const addNewImage = async () => {
inputImage.value.click();
};
// ตรวจสอบเลขประจำตัวประชาชน
const defaultCitizenData = ref<string>("");
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
}
}
};
const checkCitizen = async (id: 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();
});
};
// filter list ข้อมูลต่างๆ
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;
default:
break;
}
};
// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
const calculateMaxDate = () => {
const today = new Date();
today.setDate(today.getDate() - 1);
return today;
};
// เช็คเรื่องการเกษียณ
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);
informaData.value.birthDate = null;
informaData.value.age = "";
})
.finally(() => {
hideLoader();
});
}
};
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
}
});
}
};
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
const addData = async () => {
const formData = new FormData();
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("citizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("prefixId", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("firstName", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("lastName", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("genderId", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("religionId", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append(
"birthDate",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("bloodGroupId", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("relationshipId", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("telephoneNumber", informaData.value.tel);
if (informaData.value.employeeType != undefined)
formData.append("employeeType", informaData.value.employeeType);
if (informaData.value.employeeClass != undefined)
formData.append("employeeClass", informaData.value.employeeClass);
showLoader();
await http
.post(config.API.profileEmployeeIn, formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await changeBirth(informaData.value.birthDate ?? new Date());
await clickBack();
hideLoader();
});
hideLoader();
};
// ปุ่ม back
const clickBack = () => {
router.push("/registry-employee");
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
<q-form ref="myform" class="col-12 q-pt-md">
<div class="row">
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
lazy-rules :rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" 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 hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<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="calculateMaxDate()" @update:model-value="handleDate">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :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="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
:model-value="informaData.age" :label="`${'อายุ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined 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-bottom-space outlined 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 hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
:label="`${'สัญชาติ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined 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-bottom-space outlined 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 dense lazy-rules type="tel" v-model="informaData.tel"
:label="`${'เบอร์โทร'}`" :rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]" mask="##########" />
</div>
</div>
</div>
</q-form>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<div class="row col-12">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
</div>
</q-card>
<!-- Header -->
<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 :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>
<!-- End Header -->
</template>

403
src/modules/08_registryEmployee/components/DialogSendToCommand.vue Normal file
View file

@ -0,0 +1,403 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { FormRegistryEmployee } from '../interface/request/Main';
import { useQuasar, type QTableProps, QInput } from 'quasar';
import { useCounterMixin } from '@/stores/mixin';
import http from '@/plugins/http';
import config from "@/app.config";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
dialogMessageNotify,
} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
const $q = useQuasar();
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
rows: {
type: Object,
default: []
},
fetchNewList: {
type: Function,
default: () => { /* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */ }
},
closeDialog: {
type: Function,
default: () => { /* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */ }
},
});
const filter = ref<string>("");
const filterRef = ref<QInput>();
// visible columns ตารางใน dialog ส่งไปออกคำสั่ง
const visibleColumnsOrder = ref<string[]>([
"no",
"fullname",
"fullnameOld",
"oc",
"positionEmployeePosition",
"positionEmployeePositionSide",
"positionLine",
"govAge",
"positionEmployeeGroup",
"dateAppoint",
"refSalary",
"dateStart",
"createdAt",
"salaryDate",
"age",
"amount",
"statustext",
"leaveDateOrder",
"newAgency",
"currentAgency",
]);
// คอลัมน์ในตาราง
const columnsOrder = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-สกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "newAgency",
align: "left",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "newAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "currentAgency",
align: "left",
label: "หน่วยงานปัจจุบัน",
sortable: true,
field: "currentAgency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "amount",
align: "left",
label: "ค่าจ้าง",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "govAge",
align: "left",
label: "อายุราชการ(ปี)",
sortable: true,
field: "govAge",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "dateAppoint",
align: "left",
label: "วันที่จ้าง",
sortable: true,
field: "dateAppoint",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateStart",
align: "left",
label: "วันที่เริ่มปฎิบัติราชการ",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salaryDate",
align: "left",
label: "วันที่แต่งตั้ง",
sortable: true,
field: "salaryDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "refSalary",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "refSalary",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "age",
align: "left",
label: "อายุ",
sortable: true,
field: "age",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "fullnameOld",
align: "left",
label: "ชื่อ-สกุล(เดิม)",
sortable: true,
field: "fullnameOld",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้าง",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "leaveDateOrder",
align: "left",
label: "วันที่พ้นราชการ",
sortable: true,
field: "leaveDateOrder",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statustext",
align: "left",
label: "สถานะ",
sortable: true,
field: "statustext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
// checkbox เลือกคนไปออกคำสั่ง
const selected = ref<any>([]);
const save = () => {
if (selected.value.length == 0) {
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
} else dialogConfirm($q, () => sendToCommand());
};
// post ส่งไปออกคำสั่ง
const sendToCommand = async () => {
let pId: string[] = [];
selected.value.forEach((e: any) => {
pId.push(e.id);
});
let data = {
id: pId,
};
showLoader();
await http
.post(config.API.organizationEmployeeSendOrder, data)
.then((res: any) => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
props.fetchNewList()
props.closeDialog()
selected.value = [];
hideLoader();
});
};
// เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
const rowsOrder = ref<FormRegistryEmployee[]>([]);
const filterRowData = () => {
rowsOrder.value = props.rows.filter(
(r: FormRegistryEmployee) => r.status == "PENDING"
);
}
// เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
watch(props, () => {
if (props.modal === true && props.rows) {
filterRowData()
}
});
</script>
<template>
<q-dialog v-model="props.modal">
<q-card style="width: 900px; max-width: 80vw">
<DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
<q-separator />
<q-card-section class="q-pt-none">
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input borderless outlined dense debounce="300" v-model="filter" ref="filterRef"
placeholder="ค้นหา" style="width: 850px; max-width: auto">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</q-toolbar>
</div>
</div>
<d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
row-key="id" selection="multiple" v-model:selected="selected">
<template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" />
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="newAgency" :props="props">
<div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
props.row.draftPositionEmployee == null
">
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.draftOrganizationOrganization ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.draftPositionEmployee ?? "-" }}
</div>
</div>
</q-td>
<q-td key="currentAgency" :props="props">
<div class="col-12" v-if="props.row.oc == null && props.row.position == null">
<div class="text-weight-medium">
{{ "-" }}
</div>
</div>
<div class="col-12" v-else>
<div class="text-weight-medium">
{{ props.row.oc ?? "-" }}
</div>
<div class="text-weight-light">
{{ props.row.position ?? "-" }}
</div>
</div>
</q-td>
<q-td key="amount" :props="props">
{{ props.row.amount }}
</q-td>
<q-td key="govAge" :props="props">
{{ props.row.govAge }}
</q-td>
<q-td key="dateAppoint" :props="props">
{{ props.row.dateAppoint }}
</q-td>
<q-td key="dateStart" :props="props">
{{ props.row.dateStart }}
</q-td>
<q-td key="salaryDate" :props="props">
{{ props.row.salaryDate }}
</q-td>
<q-td key="refSalary" :props="props">
{{ props.row.refSalary }}
</q-td>
<q-td key="age" :props="props">
{{ props.row.age }}
</q-td>
<q-td key="fullnameOld" :props="props">
{{ props.row.fullnameOld }}
</q-td>
<q-td key="createdAt" :props="props">
{{ props.row.createdAt }}
</q-td>
<q-td key="isLeave" :props="props">
{{ props.row.isLeave }}
</q-td>
<q-td key="leaveDateOrder" :props="props">
{{ props.row.leaveDateOrder }}
</q-td>
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
</template>

610
src/modules/08_registryEmployee/views/Assessment.vue → src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue
View file

@ -1,307 +1,3 @@
<!-- card ผลการประเมินการปฏิบัติราชการ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ผลการประเมินการปฏิบัติราชการ"
icon="mdi-clipboard-text"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="ผลการประเมินการปฏิบัติราชการ"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
: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-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point"
:rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
hide-bottom-space
:label="`${'คะแนน'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div> -->
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSumTotal"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
hide-bottom-space
:label="`${'ผลรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSum"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="text-subtitle2 col-12 row items-center">
<q-space></q-space>
ผลการประเมิน:
<div class="text-bold items-center q-px-sm">
{{ textPoint(pointSum) }}
</div>
{{ textRangePoint(pointSum) }}
</div>
<!-- <div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
hide-bottom-space
:label="`${'ชื่อแบบประเมิน'}`"
@update:modelValue="clickEditRow"
/>
</div> -->
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -976,6 +672,312 @@ const textPoint = (val: number | undefined) => {
else return "-";
};
</script>
<!-- card ผลการประเมินการปฏิบัติราชการ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ผลการประเมินการปฏิบัติราชการ"
icon="mdi-clipboard-text"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="ผลการประเมินการปฏิบัติราชการ"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
: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-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point"
:rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
hide-bottom-space
:label="`${'คะแนน'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div> -->
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point1"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2Total"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
hide-bottom-space
:label="`${'ส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="point2"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSumTotal"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
hide-bottom-space
:label="`${'ผลรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="col-6">
<q-input
input-class="text-right"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pointSum"
:rules="[
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
]"
hide-bottom-space
:label="`${'ผลประเมินรวม (คะแนน)'}`"
@update:modelValue="clickEditRow"
type="number"
/>
</div>
<div class="text-subtitle2 col-12 row items-center">
<q-space></q-space>
ผลการประเมิน:
<div class="text-bold items-center q-px-sm">
{{ textPoint(pointSum) }}
</div>
{{ textRangePoint(pointSum) }}
</div>
<!-- <div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
hide-bottom-space
:label="`${'ชื่อแบบประเมิน'}`"
@update:modelValue="clickEditRow"
/>
</div> -->
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

550
src/modules/08_registryEmployee/views/Discipline.vue → src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue
View file

@ -1,277 +1,3 @@
<!-- card วินัย -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วินัย"
icon="mdi-scale-balance"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'refCommandDate' || col.name == 'date'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="วินัย" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
: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-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="level"
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
hide-bottom-space
:label="`${'ระดับการลงโทษทางวินัย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="Ops.levelOptions"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="unStigma"
hide-bottom-space
:label="`${'ล้างมลทิน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'date' ||
col.name == 'refCommandDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -938,6 +664,282 @@ const getClass = (val: boolean) => {
};
const resetFilter = () => {};
</script>
<!-- card วินัย -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วินัย"
icon="mdi-scale-balance"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'refCommandDate' || col.name == 'date'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="วินัย" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
: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-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="level"
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
hide-bottom-space
:label="`${'ระดับการลงโทษทางวินัย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="Ops.levelOptions"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="unStigma"
hide-bottom-space
:label="`${'ล้างมลทิน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'date' ||
col.name == 'refCommandDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

279
src/modules/08_registryEmployee/views/Document.vue → src/modules/08_registryEmployee/components/EditEmployee/Document.vue
View file

@ -1,142 +1,3 @@
<template>
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
<q-form ref="myform" class="col-12">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน"
icon="mdi-file-document"
:history="false"
:changeBtn="changeBtn"
:cancel="onCancel"
:disable="statusEdit"
:save="uploadData"
/>
<div class="row col-12 q-pt-sm">
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="row col-12">
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.file)"
/>
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-show="edit"
@click="deleteData(file.id)"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-input
v-if="edit"
class="q-mt-sm col-12 q-pb-xs"
outlined
dense
lazy-rules
v-model="name"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
@factory="uploadData"
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
@ -298,3 +159,143 @@ const changeBtn = async () => {
}
};
</script>
<template>
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
<q-form ref="myform" class="col-12">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน"
icon="mdi-file-document"
:history="false"
:changeBtn="changeBtn"
:cancel="onCancel"
:disable="statusEdit"
:save="uploadData"
/>
<div class="row col-12 q-pt-sm">
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="row col-12">
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.file)"
/>
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-show="edit"
@click="deleteData(file.id)"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-input
v-if="edit"
class="q-mt-sm col-12 q-pb-xs"
outlined
dense
lazy-rules
v-model="name"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
@factory="uploadData"
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-form>
</q-card>
</template>

1180
src/modules/08_registryEmployee/views/Education.vue → src/modules/08_registryEmployee/components/EditEmployee/Education.vue
View file

File diff suppressed because it is too large Load diff

578
src/modules/08_registryEmployee/views/Information/Address.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue
View file

@ -1,291 +1,3 @@
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลที่อยู่"
icon="mdi-map-marker"
:save="saveData"
:history="!statusAdd()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.address"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/>
</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="addressData.provinceId"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</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="addressData.districtId"
emit-value
map-options
option-label="name"
:options="Ops.districtOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
) "
/>
</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="addressData.subdistrictId"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictOps"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codep"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-12 q-pt-lg"><q-separator /></div>
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-bold"
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!edit"
/>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!edit"
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.addressC"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.provinceIdC"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.districtIdC"
emit-value
map-options
option-label="name"
:options="Ops.districtCOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictCOps"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codec"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -643,7 +355,6 @@ const fetchData = async () => {
.get(config.API.profileAdrsId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
console.log(data);
addressData.value.address = data.registrationAddress;
addressData.value.addressC = data.currentAddress;
@ -907,3 +618,292 @@ const getClass = (val: boolean) => {
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลที่อยู่"
icon="mdi-map-marker"
:save="saveData"
:history="!statusAdd()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.address"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/>
</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="addressData.provinceId"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</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="addressData.districtId"
emit-value
map-options
option-label="name"
:options="Ops.districtOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
) "
/>
</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="addressData.subdistrictId"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictOps"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codep"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-12 q-pt-lg"><q-separator /></div>
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-bold"
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!edit"
/>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!edit"
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.addressC"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.provinceIdC"
emit-value
map-options
option-label="name"
:options="Ops.provinceOps"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value:string) => selectProvince(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.districtIdC"
emit-value
map-options
option-label="name"
:options="Ops.districtCOps"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value:string) => selectDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="Ops.subdistrictCOps"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codec"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

516
src/modules/08_registryEmployee/views/Information/Certicate.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue
View file

@ -1,260 +1,3 @@
<!-- card ใบอนุญาตประกอบอาชีพ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:name="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
icon="mdi-book"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'issueDate' || col.name == 'expireDate'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
:tittle="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateType"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
hide-bottom-space
:label="`${'ชื่อใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="issuer"
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
]"
hide-bottom-space
:label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space
:label="`${'เลขที่ใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="issueDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(issueDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
]"
hide-bottom-space
: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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="expireDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(expireDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'expireDate' ||
col.name == 'issueDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -825,6 +568,265 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card ใบอนุญาตประกอบอาชีพ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:name="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
icon="mdi-book"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'issueDate' || col.name == 'expireDate'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
:tittle="
profileType == 'employee'
? 'ใบอนุญาตของลูกจ้าง'
: 'ใบอนุญาตประกอบอาชีพ'
"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateType"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
hide-bottom-space
:label="`${'ชื่อใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="issuer"
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
]"
hide-bottom-space
:label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="certificateNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space
:label="`${'เลขที่ใบอนุญาต'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="issueDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(issueDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
]"
hide-bottom-space
: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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="expireDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(expireDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'expireDate' ||
col.name == 'issueDate' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

873
src/modules/08_registryEmployee/views/Information/Family.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue
View file

@ -1,3 +1,439 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type {
Family,
DataOption,
} from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
import type {
ResponseObject,
childrenFamily,
ResponseHistory,
} from "@/modules/04_registry/interface/response/Family";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const edit = ref<boolean>(false);
const fix = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const modal = ref<boolean>(false);
const indexRow = ref<number>(0);
const previous = ref<boolean>(false);
const next = ref<boolean>(false);
//C Couple
//M Male
//F Female
const familyData = ref<Family>({
prefixC: null,
prefixIdC: null,
firstnameC: null,
lastnameC: null,
lastnameCOld: null,
occupationC: null,
liveC: null,
citizenIdC: null,
prefixM: null,
prefixIdM: null,
firstnameM: null,
lastnameM: null,
occupationM: null,
liveM: null,
citizenIdM: null,
prefixF: null,
prefixIdF: null,
firstnameF: null,
lastnameF: null,
occupationF: null,
liveF: null,
citizenIdF: null,
same: "0",
childrens: [],
});
const familyDataHistory = ref<ResponseHistory[]>([]);
const Ops = ref<any>({
prefixOps: [],
});
const OpsFilter = ref<any>({
prefixOps: [],
});
onMounted(async () => {
await fetchPrefix();
await fetchData();
emit("update:statusEdit", false);
defaultAdd();
});
const statusAdd = () => props.statusAdd;
const defaultAdd = () => {
if (props.statusAdd) {
edit.value = props.statusAdd;
familyData.value = {
prefixC: null,
prefixIdC: null,
firstnameC: null,
lastnameC: null,
lastnameCOld: null,
occupationC: null,
citizenIdC: null,
liveC: null,
prefixM: null,
prefixIdM: null,
firstnameM: null,
lastnameM: null,
occupationM: null,
citizenIdM: null,
liveM: null,
prefixF: null,
prefixIdF: null,
firstnameF: null,
lastnameF: null,
occupationF: null,
citizenIdF: null,
liveF: null,
same: "0",
childrens: [],
};
}
};
const historyData = async () => {
await fetchHistory();
};
const filterSelector = (val: any, update: Function, refData: string) => {
update(() => {
Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
};
const refreshData = async () => {
if (myform.value != null) {
myform.value.reset();
}
await fetchData();
};
const fetchPrefix = async () => {
showLoader();
await http
.get(config.API.prefix)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.prefixOps = option;
OpsFilter.value.prefixOps = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const addChildren = async () => {
familyData.value.childrens.push({
id: `${familyData.value.childrens.length + 1}`,
childrenPrefixId: "",
childrenFirstName: "",
childrenLastName: "",
childrenCareer: "",
childrenLive: "1",
childrenCitizenId: "",
});
familyData.value.childrens.sort(
(a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
);
};
const deleteChildren = (items: childrenFamily) => {
const index = familyData.value.childrens.findIndex(
(r: childrenFamily) => r.id == items.id
);
familyData.value.childrens.splice(index, 1);
};
const fetchHistory = async () => {
familyDataHistory.value = [];
showLoader();
await http
.get(config.API.profileFamiHisId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject[] = res.data.result;
data.map((row: ResponseObject) => {
const arrayData: ResponseHistory = {
couple: row.couple ? "1" : "0",
couplePrefixId: row.couplePrefixId,
coupleFirstName: row.coupleFirstName,
coupleLastName: row.coupleLastName,
coupleLastNameOld: row.coupleLastNameOld,
coupleCareer: row.coupleCareer,
coupleLive: row.coupleLive ? "1" : "0",
coupleCitizenId: row.coupleCitizenId,
fatherPrefixId: row.fatherPrefixId,
fatherFirstName: row.fatherFirstName,
fatherLastName: row.fatherLastName,
fatherCareer: row.fatherCareer,
fatherLive: row.fatherLive ? "1" : "0",
fatherCitizenId: row.fatherCitizenId,
motherPrefixId: row.motherPrefixId,
motherFirstName: row.motherFirstName,
motherLastName: row.motherLastName,
motherCareer: row.motherCareer,
motherLive: row.motherLive ? "1" : "0",
motherCitizenId: row.motherCitizenId,
childrens: row.childrens,
createdFullName: row.createdFullName,
createdAt: new Date(row.createdAt),
};
familyDataHistory.value.push(arrayData);
});
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
if (familyDataHistory.value.length == 0) {
// modalError(
// $q,
// "ประวัติแก้ไขข้อมูลครอบครัว",
// "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
// );
} else {
modal.value = true;
indexRow.value = 0;
if (familyDataHistory.value.length > 1) {
next.value = true;
previous.value = false;
} else {
next.value = false;
previous.value = false;
}
}
});
};
const fetchData = async () => {
if (route.params.id) {
showLoader();
await http
.get(config.API.profileFamiId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
familyData.value.prefixC = "";
familyData.value.prefixIdC = data.couplePrefixId;
familyData.value.firstnameC = data.coupleFirstName;
familyData.value.lastnameC = data.coupleLastName;
familyData.value.lastnameCOld = data.coupleLastNameOld;
familyData.value.occupationC = data.coupleCareer;
familyData.value.liveC = data.coupleLive ? "1" : "0";
familyData.value.citizenIdC = data.coupleCitizenId;
familyData.value.prefixM = "";
familyData.value.prefixIdM = data.fatherPrefixId;
familyData.value.firstnameM = data.fatherFirstName;
familyData.value.lastnameM = data.fatherLastName;
familyData.value.occupationM = data.fatherCareer;
familyData.value.liveM = data.fatherLive ? "1" : "0";
familyData.value.citizenIdM = data.fatherCitizenId;
familyData.value.prefixF = "";
familyData.value.prefixIdF = data.motherPrefixId;
familyData.value.firstnameF = data.motherFirstName;
familyData.value.lastnameF = data.motherLastName;
familyData.value.occupationF = data.motherCareer;
familyData.value.liveF = data.motherLive ? "1" : "0";
familyData.value.citizenIdF = data.motherCitizenId;
familyData.value.same = data.couple ? "1" : "0";
if (data.childrens.length > 0) {
let dataChild: childrenFamily[] = [];
data.childrens.map((row: childrenFamily, index: number) => {
dataChild.push({
id: `${index + 1}`,
childrenPrefixId: row.childrenPrefixId,
childrenFirstName: row.childrenFirstName,
childrenLastName: row.childrenLastName,
childrenCareer: row.childrenCareer,
childrenLive: row.childrenLive,
childrenCitizenId: row.childrenCitizenId,
});
});
familyData.value.childrens = dataChild;
} else {
familyData.value.childrens = [];
}
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
};
const editData = async () => {
showLoader();
const body: ResponseObject = {
couple: familyData.value.same == "1",
couplePrefixId: familyData.value.prefixIdC,
coupleFirstName: familyData.value.firstnameC,
coupleLastName: familyData.value.lastnameC,
coupleLastNameOld: familyData.value.lastnameCOld,
coupleCareer: familyData.value.occupationC,
coupleLive: familyData.value.liveC == "1",
coupleCitizenId: familyData.value.citizenIdC,
fatherPrefixId: familyData.value.prefixIdM,
fatherFirstName: familyData.value.firstnameM,
fatherLastName: familyData.value.lastnameM,
fatherCareer: familyData.value.occupationM,
fatherLive: familyData.value.liveM == "1",
fatherCitizenId: familyData.value.citizenIdM,
motherPrefixId: familyData.value.prefixIdF,
motherFirstName: familyData.value.firstnameF,
motherLastName: familyData.value.lastnameF,
motherCareer: familyData.value.occupationF,
motherLive: familyData.value.liveF == "1",
motherCitizenId: familyData.value.citizenIdF,
childrens: familyData.value.childrens,
createdFullName: "-",
createdAt: new Date(),
};
await http
.put(config.API.profileFamiId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await fetchData();
});
};
const addData = async () => {
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = () => {
dialogConfirm($q, () => Datasave());
};
const Datasave = async () => {
await myform.value?.validate().then(async (success: boolean) => {
if (success) {
if (props.statusAdd) {
await addData();
} else {
await editData();
}
} else {
}
});
};
const clickPreviousNext = (page: string) => {
const index: number =
page == "next" ? indexRow.value - 1 : indexRow.value + 1;
let length: number = familyDataHistory.value.length;
previous.value = index == 0 ? false : true;
next.value = index == length - 1 ? false : true;
indexRow.value = index;
};
const selectRadio = (e: boolean, i: any) => {
if (e) {
familyData.value.prefixIdC = "";
familyData.value.firstnameC = "";
familyData.value.lastnameC = "";
familyData.value.lastnameCOld = "";
familyData.value.occupationC = "";
familyData.value.liveC = "";
familyData.value.citizenIdC = "";
}
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
<HeaderTop
@ -1071,439 +1507,4 @@
</div>
</template>
</DialogHistory>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type {
Family,
DataOption,
} from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
import type {
ResponseObject,
childrenFamily,
ResponseHistory,
} from "@/modules/04_registry/interface/response/Family";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const edit = ref<boolean>(false);
const fix = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const modal = ref<boolean>(false);
const indexRow = ref<number>(0);
const previous = ref<boolean>(false);
const next = ref<boolean>(false);
//C Couple
//M Male
//F Female
const familyData = ref<Family>({
prefixC: null,
prefixIdC: null,
firstnameC: null,
lastnameC: null,
lastnameCOld: null,
occupationC: null,
liveC: null,
citizenIdC: null,
prefixM: null,
prefixIdM: null,
firstnameM: null,
lastnameM: null,
occupationM: null,
liveM: null,
citizenIdM: null,
prefixF: null,
prefixIdF: null,
firstnameF: null,
lastnameF: null,
occupationF: null,
liveF: null,
citizenIdF: null,
same: "0",
childrens: [],
});
const familyDataHistory = ref<ResponseHistory[]>([]);
const Ops = ref<any>({
prefixOps: [],
});
const OpsFilter = ref<any>({
prefixOps: [],
});
onMounted(async () => {
await fetchPrefix();
await fetchData();
emit("update:statusEdit", false);
defaultAdd();
});
const statusAdd = () => props.statusAdd;
const defaultAdd = () => {
if (props.statusAdd) {
edit.value = props.statusAdd;
familyData.value = {
prefixC: null,
prefixIdC: null,
firstnameC: null,
lastnameC: null,
lastnameCOld: null,
occupationC: null,
citizenIdC: null,
liveC: null,
prefixM: null,
prefixIdM: null,
firstnameM: null,
lastnameM: null,
occupationM: null,
citizenIdM: null,
liveM: null,
prefixF: null,
prefixIdF: null,
firstnameF: null,
lastnameF: null,
occupationF: null,
citizenIdF: null,
liveF: null,
same: "0",
childrens: [],
};
}
};
const historyData = async () => {
await fetchHistory();
};
const filterSelector = (val: any, update: Function, refData: string) => {
update(() => {
Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
};
const refreshData = async () => {
if (myform.value != null) {
myform.value.reset();
}
await fetchData();
};
const fetchPrefix = async () => {
showLoader();
await http
.get(config.API.prefix)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.prefixOps = option;
OpsFilter.value.prefixOps = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const addChildren = async () => {
familyData.value.childrens.push({
id: `${familyData.value.childrens.length + 1}`,
childrenPrefixId: "",
childrenFirstName: "",
childrenLastName: "",
childrenCareer: "",
childrenLive: "1",
childrenCitizenId: "",
});
familyData.value.childrens.sort(
(a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
);
};
const deleteChildren = (items: childrenFamily) => {
const index = familyData.value.childrens.findIndex(
(r: childrenFamily) => r.id == items.id
);
familyData.value.childrens.splice(index, 1);
};
const fetchHistory = async () => {
familyDataHistory.value = [];
showLoader();
await http
.get(config.API.profileFamiHisId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject[] = res.data.result;
data.map((row: ResponseObject) => {
const arrayData: ResponseHistory = {
couple: row.couple ? "1" : "0",
couplePrefixId: row.couplePrefixId,
coupleFirstName: row.coupleFirstName,
coupleLastName: row.coupleLastName,
coupleLastNameOld: row.coupleLastNameOld,
coupleCareer: row.coupleCareer,
coupleLive: row.coupleLive ? "1" : "0",
coupleCitizenId: row.coupleCitizenId,
fatherPrefixId: row.fatherPrefixId,
fatherFirstName: row.fatherFirstName,
fatherLastName: row.fatherLastName,
fatherCareer: row.fatherCareer,
fatherLive: row.fatherLive ? "1" : "0",
fatherCitizenId: row.fatherCitizenId,
motherPrefixId: row.motherPrefixId,
motherFirstName: row.motherFirstName,
motherLastName: row.motherLastName,
motherCareer: row.motherCareer,
motherLive: row.motherLive ? "1" : "0",
motherCitizenId: row.motherCitizenId,
childrens: row.childrens,
createdFullName: row.createdFullName,
createdAt: new Date(row.createdAt),
};
familyDataHistory.value.push(arrayData);
});
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
if (familyDataHistory.value.length == 0) {
// modalError(
// $q,
// "ประวัติแก้ไขข้อมูลครอบครัว",
// "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
// );
} else {
modal.value = true;
indexRow.value = 0;
if (familyDataHistory.value.length > 1) {
next.value = true;
previous.value = false;
} else {
next.value = false;
previous.value = false;
}
}
});
};
const fetchData = async () => {
if (route.params.id) {
showLoader();
await http
.get(config.API.profileFamiId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
familyData.value.prefixC = "";
familyData.value.prefixIdC = data.couplePrefixId;
familyData.value.firstnameC = data.coupleFirstName;
familyData.value.lastnameC = data.coupleLastName;
familyData.value.lastnameCOld = data.coupleLastNameOld;
familyData.value.occupationC = data.coupleCareer;
familyData.value.liveC = data.coupleLive ? "1" : "0";
familyData.value.citizenIdC = data.coupleCitizenId;
familyData.value.prefixM = "";
familyData.value.prefixIdM = data.fatherPrefixId;
familyData.value.firstnameM = data.fatherFirstName;
familyData.value.lastnameM = data.fatherLastName;
familyData.value.occupationM = data.fatherCareer;
familyData.value.liveM = data.fatherLive ? "1" : "0";
familyData.value.citizenIdM = data.fatherCitizenId;
familyData.value.prefixF = "";
familyData.value.prefixIdF = data.motherPrefixId;
familyData.value.firstnameF = data.motherFirstName;
familyData.value.lastnameF = data.motherLastName;
familyData.value.occupationF = data.motherCareer;
familyData.value.liveF = data.motherLive ? "1" : "0";
familyData.value.citizenIdF = data.motherCitizenId;
familyData.value.same = data.couple ? "1" : "0";
if (data.childrens.length > 0) {
let dataChild: childrenFamily[] = [];
data.childrens.map((row: childrenFamily, index: number) => {
dataChild.push({
id: `${index + 1}`,
childrenPrefixId: row.childrenPrefixId,
childrenFirstName: row.childrenFirstName,
childrenLastName: row.childrenLastName,
childrenCareer: row.childrenCareer,
childrenLive: row.childrenLive,
childrenCitizenId: row.childrenCitizenId,
});
});
familyData.value.childrens = dataChild;
} else {
familyData.value.childrens = [];
}
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
};
const editData = async () => {
showLoader();
const body: ResponseObject = {
couple: familyData.value.same == "1",
couplePrefixId: familyData.value.prefixIdC,
coupleFirstName: familyData.value.firstnameC,
coupleLastName: familyData.value.lastnameC,
coupleLastNameOld: familyData.value.lastnameCOld,
coupleCareer: familyData.value.occupationC,
coupleLive: familyData.value.liveC == "1",
coupleCitizenId: familyData.value.citizenIdC,
fatherPrefixId: familyData.value.prefixIdM,
fatherFirstName: familyData.value.firstnameM,
fatherLastName: familyData.value.lastnameM,
fatherCareer: familyData.value.occupationM,
fatherLive: familyData.value.liveM == "1",
fatherCitizenId: familyData.value.citizenIdM,
motherPrefixId: familyData.value.prefixIdF,
motherFirstName: familyData.value.firstnameF,
motherLastName: familyData.value.lastnameF,
motherCareer: familyData.value.occupationF,
motherLive: familyData.value.liveF == "1",
motherCitizenId: familyData.value.citizenIdF,
childrens: familyData.value.childrens,
createdFullName: "-",
createdAt: new Date(),
};
await http
.put(config.API.profileFamiId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await fetchData();
});
};
const addData = async () => {
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = () => {
dialogConfirm($q, () => Datasave());
};
const Datasave = async () => {
await myform.value?.validate().then(async (success: boolean) => {
if (success) {
if (props.statusAdd) {
await addData();
} else {
await editData();
}
} else {
}
});
};
const clickPreviousNext = (page: string) => {
const index: number =
page == "next" ? indexRow.value - 1 : indexRow.value + 1;
let length: number = familyDataHistory.value.length;
previous.value = index == 0 ? false : true;
next.value = index == length - 1 ? false : true;
indexRow.value = index;
};
const selectRadio = (e: boolean, i: any) => {
if (e) {
familyData.value.prefixIdC = "";
familyData.value.firstnameC = "";
familyData.value.lastnameC = "";
familyData.value.lastnameCOld = "";
familyData.value.occupationC = "";
familyData.value.liveC = "";
familyData.value.citizenIdC = "";
}
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
</template>

659
src/modules/08_registryEmployee/views/Information/Government.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue
View file

@ -1,332 +1,3 @@
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลราชการ"
icon="mdi-account-tie"
:save="saveData"
:history="true"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ocId"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.numberId"
:label="`${'ตำแหน่งเลขที่'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionId"
:label="`${'ตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionPathSide"
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLine"
:label="`${'สายงาน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionType"
:label="`${'ประเภท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLevel"
:label="`${'ระดับ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutive"
:label="`${'ตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutiveSide"
:label="`${'ด้านตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-12 q-py-md"><q-separator /></div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="govermentData.containDate"
: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="date2Thai(new Date(govermentData.containDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกวันที่บรรจุ'
: 'กรุณาเลือกวันที่แต่งตั้ง'
}`,
]"
:label="`${
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
}`"
>
<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-3 col-md-3">
<datepicker
v-model="govermentData.workDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
>
<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="date2Thai(new Date(govermentData.workDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
: 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
}`,
]"
:label="`${
profileType == 'officer'
? 'เริ่มปฎิบัติราชการ'
: 'วันที่จ้างและแต่งตั้งมีผล'
}`"
>
<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-6 col-md-6" v-if="profileType == 'officer'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
stack-label
:readonly="!edit"
:borderless="!edit"
v-model="govermentData.reasonSameDate"
:label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.retireDate"
:label="`${'วันเกษียณอายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ageAll"
:label="`${'อายุราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.absent"
:label="`${'ขาดราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.age"
:label="`${'อายุราชการเกื้อกูล'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateAppoint' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -761,3 +432,333 @@ const getClass = (val: boolean) => {
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลราชการ"
icon="mdi-account-tie"
:save="saveData"
:history="true"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ocId"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.numberId"
:label="`${'ตำแหน่งเลขที่'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionId"
:label="`${'ตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionPathSide"
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLine"
:label="`${'สายงาน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionType"
:label="`${'ประเภท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionLevel"
:label="`${'ระดับ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutive"
:label="`${'ตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutiveSide"
:label="`${'ด้านตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-12 q-py-md"><q-separator /></div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="govermentData.containDate"
: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="date2Thai(new Date(govermentData.containDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกวันที่บรรจุ'
: 'กรุณาเลือกวันที่แต่งตั้ง'
}`,
]"
:label="`${
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
}`"
>
<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-3 col-md-3">
<datepicker
v-model="govermentData.workDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
>
<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="date2Thai(new Date(govermentData.workDate))"
:rules="[
(val) =>
!!val ||
`${
profileType == 'officer'
? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
: 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
}`,
]"
:label="`${
profileType == 'officer'
? 'เริ่มปฎิบัติราชการ'
: 'วันที่จ้างและแต่งตั้งมีผล'
}`"
>
<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-6 col-md-6" v-if="profileType == 'officer'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
stack-label
:readonly="!edit"
:borderless="!edit"
v-model="govermentData.reasonSameDate"
:label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.retireDate"
:label="`${'วันเกษียณอายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.ageAll"
:label="`${'อายุราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.absent"
:label="`${'ขาดราชการ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.age"
:label="`${'อายุราชการเกื้อกูล'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateAppoint' ||
col.name == 'createdAt'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

831
src/modules/08_registryEmployee/views/Information/Information.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue
View file

@ -1,417 +1,3 @@
<template>
<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()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 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"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
@update:model-value="changeCardID"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
</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="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 class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
<label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="มี"
dense
:disable="!edit"
/>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่มี"
color="grey-9"
dense
:disable="!edit"
/>
</div>
<div class="row col-12">
<OldName
v-if="same == '1'"
v-model:statusEdit="edit"
:fetchDataInformation="fetchDataComponent"
:perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
:firstname="
informaData.firstname == null ? '' : informaData.firstname
"
:lastname="informaData.lastname == null ? '' : informaData.lastname"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -1073,7 +659,7 @@ const editData = async () => {
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,
@ -1156,3 +742,418 @@ const getClass = (val: boolean) => {
};
};
</script>
<template>
<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()"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 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"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
@update:model-value="changeCardID"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
</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 ? date2Thai(informaData.birthDate) : null"
: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 class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
<label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="มี"
dense
:disable="!edit"
/>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่มี"
color="grey-9"
dense
:disable="!edit"
/>
</div>
<div class="row col-12">
<OldName
v-if="same == '1'"
v-model:statusEdit="edit"
:fetchDataInformation="fetchDataComponent"
:perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
:firstname="
informaData.firstname == null ? '' : informaData.firstname
"
:lastname="informaData.lastname == null ? '' : informaData.lastname"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

588
src/modules/08_registryEmployee/views/Information/OldName.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/OldName.vue
View file

@ -1,296 +1,3 @@
<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
<template>
<div class="col-12">
<q-form ref="myForm">
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
icon="mdi-book"
:statusEdit="!statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="statusEdit ? selectData(props) : ''"
class="cursor-pointer"
>
<div v-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</div>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<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="status"
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>
<q-space class="col-6" />
<div class="col-xs-4 col-sm-4 col-md-4">
<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="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-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'lastName'"
:borderless="!edit"
v-model="firstName"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
:label="`${'ชื่อ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'firstName'"
:borderless="!edit"
v-model="lastName"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
:label="`${'นามสกุล'}`"
@update:modelValue="clickEditRow"
/>
</div>
<q-btn
v-if="file != null && !edit"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(file)"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
:history="true"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -967,6 +674,301 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
<template>
<div class="col-12">
<q-form ref="myForm">
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
icon="mdi-book"
:statusEdit="!statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="statusEdit ? selectData(props) : ''"
class="cursor-pointer"
>
<div v-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</div>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<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="status"
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>
<q-space class="col-6" />
<div class="col-xs-4 col-sm-4 col-md-4">
<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="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-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'lastName'"
:borderless="!edit"
v-model="firstName"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
:label="`${'ชื่อ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit || status == 'firstName'"
:borderless="!edit"
v-model="lastName"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
:label="`${'นามสกุล'}`"
@update:modelValue="clickEditRow"
/>
</div>
<q-btn
v-if="file != null && !edit"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(file)"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
:history="true"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

389
src/modules/08_registryEmployee/views/Information/Tempinformation.vue → src/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue
View file

@ -1,194 +1,3 @@
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลลูกจ้างชั่วคราว"
icon="mdi-account"
:save="saveData"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:addEmployee="statusAdd()"
:history="!statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeGroupId"
:label="`${'กลุ่มงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="employeeGroupOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeLineId"
:label="`${'สายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeeLineOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeePositionId"
:label="`${'ชื่อตำแหน่งทางสายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeePositionOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</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="informaTempData.employeeOc"
: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="informaTempData.employeeTypeIndividual"
:label="`${'ประเภทบุคคล'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeWage"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'ค่าจ้าง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyIncrease"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyAllowance"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployee"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployer"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -198,7 +7,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
import HeaderTop from "@/modules/08_registryEmployee/views/topEmployeeTemp.vue";
import HeaderTop from "@/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router";
import type { QTableProps } from "quasar";
@ -211,7 +20,7 @@ const props = defineProps({
},
fetchDataProfile: {
type: Function,
default: () => console.log("not function"),
default: () => { /* function */},
},
statusAdd: {
type: Boolean,
@ -486,8 +295,6 @@ const fetchData = async () => {
// console.log(res);
// });
const data: any = res.data.result;
console.log(data);
informaTempData.value.employeeMoneyIncrease =
data.employeeMoneyIncrease;
informaTempData.value.employeeMoneyAllowance =
@ -672,3 +479,195 @@ const getClass = (val: boolean) => {
};
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลลูกจ้างชั่วคราว"
icon="mdi-account"
:save="saveData"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:addEmployee="statusAdd()"
:history="!statusAdd()"
/>
<q-form ref="myform">
<div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeGroupId"
:label="`${'กลุ่มงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="employeeGroupOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeeLineId"
:label="`${'สายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeeLineOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaTempData.positionEmployeePositionId"
:label="`${'ชื่อตำแหน่งทางสายงาน'}`"
@update:modelValue="!edit"
emit-value
map-options
option-label="name"
:options="positionEmployeePositionOptions"
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
option-value="id"
hide-bottom-space
use-input
input-debounce="0"
/>
</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="informaTempData.employeeOc"
: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="informaTempData.employeeTypeIndividual"
:label="`${'ประเภทบุคคล'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeWage"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'ค่าจ้าง'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyIncrease"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyAllowance"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployee"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<CurrencyInput
v-model="informaTempData.employeeMoneyEmployer"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

689
src/modules/08_registryEmployee/views/Leave.vue → src/modules/08_registryEmployee/components/EditEmployee/Leave.vue
View file

@ -1,346 +1,3 @@
<!-- card การลา -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:addleave="clickAddLeave"
name="การลา"
icon="mdi-calendar-account"
iconAdd="mdi-calendar-account"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
class="cursor-pointer"
@click="selectData(props)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name == 'dateStartLeave'"
class="table_ellipsis"
>
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ statusLeave(col.value) }}
<!-- {{ col.value }} -->
</div>
<div
v-else-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Add Edit Leave -->
<q-dialog v-model="modalAdd" persistent>
<q-card style="width: 600px">
<q-form ref="myFormAdd">
<DialogHeader tittle="การลา" :close="clickCloseLeave" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="typeLeave"
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
hide-bottom-space
:label="`${'ประเภทการลา'}`"
@update:modelValue="clickEditRowType"
emit-value
map-options
option-label="name"
:options="typeLeaveOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateRange"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
range
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="dateThaiRange(dateRange)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
hide-bottom-space
: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-3 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="numLeave"
type="number"
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
hide-bottom-space
:label="`${'จำนวนวันที่ลา'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
:outlined="true"
dense
lazy-rules
:readonly="false"
:borderless="false"
disable
v-model="numUsedLeave"
type="number"
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
hide-bottom-space
:label="`${'จำนวนวันที่ลามาแล้ว'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="statLeave"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
hide-bottom-space
:label="`${'สถานะการลา'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="statLeaveOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
) "
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
hide-bottom-space
:label="`${'เหตุผล'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="การลา" :close="clickClose" />
<q-separator />
<q-card-section>
<div class="col-xs-12 col-sm-12 col-md-12">
<data-table
:rows="rowsTotal"
:columns="columnsTotal"
:filter="filterTotal"
:visible-columns="visibleColumnsTotal"
v-model:inputfilter="filterTotal"
v-model:inputvisible="visibleColumnsTotal"
:nornmalData="true"
>
<template #columns="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-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{
col.value == null
? ""
: col.value.toLocaleString("en-US")
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</data-table>
</div>
</q-card-section>
<q-separator />
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<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 == 'dateStartLeave'" class="table_ellipsis">
{{
dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
}}
</div>
<div
v-else-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ statusLeave(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -724,7 +381,6 @@ const fetchData = async () => {
.get(config.API.profileLeaveId(profileId.value))
.then((res) => {
const data = res.data.result;
// console.log(data);
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
@ -1273,6 +929,351 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card การลา -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:addleave="clickAddLeave"
name="การลา"
icon="mdi-calendar-account"
iconAdd="mdi-calendar-account"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
class="cursor-pointer"
@click="selectData(props)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name == 'dateStartLeave'"
class="table_ellipsis"
>
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ statusLeave(col.value) }}
<!-- {{ col.value }} -->
</div>
<div
v-else-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Add Edit Leave -->
<q-dialog v-model="modalAdd" persistent>
<q-card style="width: 600px">
<q-form ref="myFormAdd">
<DialogHeader tittle="การลา" :close="clickCloseLeave" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="typeLeave"
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
hide-bottom-space
:label="`${'ประเภทการลา'}`"
@update:modelValue="clickEditRowType"
emit-value
map-options
option-label="name"
:options="typeLeaveOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
) "
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateRange"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
range
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="dateThaiRange(dateRange)"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
hide-bottom-space
: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-3 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="numLeave"
type="number"
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
hide-bottom-space
:label="`${'จำนวนวันที่ลา'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
:outlined="true"
dense
lazy-rules
:readonly="false"
:borderless="false"
disable
v-model="numUsedLeave"
type="number"
:rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
hide-bottom-space
:label="`${'จำนวนวันที่ลามาแล้ว'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="statLeave"
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
hide-bottom-space
:label="`${'สถานะการลา'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="statLeaveOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
) "
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
hide-bottom-space
:label="`${'เหตุผล'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="การลา" :close="clickClose" />
<q-separator />
<q-card-section>
<div class="col-xs-12 col-sm-12 col-md-12">
<data-table
:rows="rowsTotal"
:columns="columnsTotal"
:filter="filterTotal"
:visible-columns="visibleColumnsTotal"
v-model:inputfilter="filterTotal"
v-model:inputvisible="visibleColumnsTotal"
:nornmalData="true"
>
<template #columns="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-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{
col.value == null
? ""
: col.value.toLocaleString("en-US")
}}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</data-table>
</div>
</q-card-section>
<q-separator />
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<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 == 'dateStartLeave'" class="table_ellipsis">
{{
dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
}}
</div>
<div
v-else-if="
col.name == 'numLeave' ||
col.name == 'sumLeave' ||
col.name == 'totalLeave'
"
class="table_ellipsis"
>
{{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ statusLeave(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

325
src/modules/08_registryEmployee/views/Other.vue → src/modules/08_registryEmployee/components/EditEmployee/Other.vue
View file

@ -1,165 +1,3 @@
<!-- card อื่นๆ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="อื่นๆ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="อื่นๆ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
hide-bottom-space
: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-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -619,3 +457,166 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card อื่นๆ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="อื่นๆ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="อื่นๆ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
hide-bottom-space
: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-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

512
src/modules/08_registryEmployee/views/Record.vue → src/modules/08_registryEmployee/components/EditEmployee/Record.vue
View file

@ -1,258 +1,3 @@
<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
icon="mdi-calendar-remove"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'date' || col.name == 'refCommandDate'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
: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-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'date' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -820,6 +565,263 @@ const getClass = (val: boolean) => {
};
const resetFilter = () => {};
</script>
<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
icon="mdi-calendar-remove"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="col.name == 'date' || col.name == 'refCommandDate'"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader
tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
hide-bottom-space
: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-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
autogrow
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'date' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

1096
src/modules/08_registryEmployee/views/Salary.vue → src/modules/08_registryEmployee/components/EditEmployee/Salary.vue
View file

File diff suppressed because it is too large Load diff

1158
src/modules/08_registryEmployee/views/SalaryEmployee.vue → src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue
View file

File diff suppressed because it is too large Load diff

321
src/modules/08_registryEmployee/views/Talent.vue → src/modules/08_registryEmployee/components/EditEmployee/Talent.vue
View file

@ -1,163 +1,3 @@
<!-- card ความสามารถพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ความสามารถพิเศษ"
icon="mdi-folder-star"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="field"
:rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
hide-bottom-space
:label="`${'ด้าน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="remark"
hide-bottom-space
:label="`${'หมายเหตุ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -684,3 +524,164 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card ความสามารถพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ความสามารถพิเศษ"
icon="mdi-folder-star"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="field"
:rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
hide-bottom-space
:label="`${'ด้าน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="remark"
hide-bottom-space
:label="`${'หมายเหตุ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
autogrow
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>

184
src/modules/08_registryEmployee/views/topEmployeeTemp.vue → src/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue
View file

@ -1,100 +1,3 @@
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="header != ''"
>
{{ header }}
</div>
</div>
<div class="q-gutter-sm q-mx-sm" v-if="addData == false">
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="disable"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit && !addEmployee"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
<q-btn
size="12px"
flat
round
color="add"
@click="addleave"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
<q-tooltip>สรุปวันลา</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
flat
round
:disabled="disable"
color="add"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<q-space />
<!-- <q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
v-if="history"
@click="historyClick"
>
<q-tooltip>ประวัติ{{ header }}</q-tooltip>
</q-btn> -->
</div>
</template>
<script setup lang="ts">
const props = defineProps({
header: {
@ -196,4 +99,89 @@ const addleave = () => {
props.addleave();
};
</script>
<style scoped></style>
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="header != ''"
>
{{ header }}
</div>
</div>
<div class="q-gutter-sm q-mx-sm" v-if="addData == false">
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="disable"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit && !addEmployee"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
<q-btn
size="12px"
flat
round
color="add"
@click="addleave"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
<q-tooltip>สรุปวันลา</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
flat
round
:disabled="disable"
color="add"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<q-space />
</div>
</template>

800
src/modules/08_registryEmployee/views/Train.vue → src/modules/08_registryEmployee/components/EditEmployee/Train.vue
View file

@ -1,402 +1,3 @@
<!-- card การฝึกอบรม/ดูงาน -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="การฝึกอบรม/ดูงาน"
icon="mdi-briefcase"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="
col.name == 'startDate' ||
col.name == 'endDate' ||
col.name == 'dateOrder'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis">
{{ col.value + 543 }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[
(val) =>
!!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
]"
:label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="topic"
:rules="[
(val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
]"
:label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="startDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(startDate)"
:rules="[
(val) =>
!!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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(endDate)"
:rules="[
(val) =>
!!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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="yearly"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
:readonly="!edit"
@update:modelValue="clickEditRow"
>
<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
:borderless="!edit"
:model-value="yearly + 543"
:rules="[(val) => !!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-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="place"
:rules="[
(val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
]"
:label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="duration"
:label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="department"
:label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="numberOrder"
:label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateOrder"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(dateOrder)"
:label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
>
<!-- :rules="[
(val) =>
!!val ||
`${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
]" -->
<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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'startDate' ||
col.name == 'endDate' ||
col.name == 'createdAt' ||
col.name == 'dateOrder'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis">
{{ col.value + 543 }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -1125,6 +726,407 @@ const getClass = (val: boolean) => {
};
};
</script>
<!-- card การฝึกอบรม/ดูงาน -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="การฝึกอบรม/ดูงาน"
icon="mdi-briefcase"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="
col.name == 'startDate' ||
col.name == 'endDate' ||
col.name == 'dateOrder'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis">
{{ col.value + 543 }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[
(val) =>
!!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
]"
:label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="topic"
:rules="[
(val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
]"
:label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="startDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(startDate)"
:rules="[
(val) =>
!!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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(endDate)"
:rules="[
(val) =>
!!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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="yearly"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
:readonly="!edit"
@update:modelValue="clickEditRow"
>
<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
:borderless="!edit"
:model-value="yearly + 543"
:rules="[(val) => !!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-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="place"
:rules="[
(val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
]"
:label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="duration"
:label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="department"
:label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="numberOrder"
:label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateOrder"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<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
:borderless="!edit"
:model-value="date2Thai(dateOrder)"
:label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
>
<!-- :rules="[
(val) =>
!!val ||
`${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
]" -->
<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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'startDate' ||
col.name == 'endDate' ||
col.name == 'createdAt' ||
col.name == 'dateOrder'
"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis">
{{ col.value + 543 }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

602
src/modules/08_registryEmployee/views/Work.vue → src/modules/08_registryEmployee/components/EditEmployee/Work.vue
View file

@ -1,303 +1,3 @@
<!-- card ปฏิบัติราชการพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ปฏิบัติราชการพิเศษ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateStart"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(dateStart)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
hide-bottom-space
: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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(dateEnd)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space
: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-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
@ -903,6 +603,308 @@ const getClass = (val: boolean) => {
};
const resetFilter = () => {};
</script>
<!-- card ปฏิบัติราชการพิเศษ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ปฏิบัติราชการพิเศษ"
icon="mdi-bookmark"
:statusEdit="statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateStart"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(dateStart)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
hide-bottom-space
: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-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(dateEnd)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space
: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-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="refCommandNo"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="clickEditRow"
>
<template v-slot:append>
<q-icon
name="mdi-file"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="
refCommandDate == null ? null : date2Thai(refCommandDate)
"
hide-bottom-space
: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>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="
col.name == 'dateStart' ||
col.name == 'dateEnd' ||
col.name == 'createdAt' ||
col.name == 'refCommandDate'
"
class="table_ellipsis"
>
{{ col.value == null ? null : date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

0
src/modules/08_registryEmployee/index/Main.ts → src/modules/08_registryEmployee/interface/index/Main.ts
View file

56
src/modules/08_registryEmployee/interface/request/Main.ts Normal file
View file

@ -0,0 +1,56 @@
interface FormRegistryEmployee {
id: string;
fullname: string;
fullnameOld: string;
oc: string;
position: string;
positionPathSide: string;
positionLine: string;
govAge: number;
refSalary: string;
positionEmployeePosition: string | null;
positionEmployeePositionSide: string | null;
positionEmployeeGroup: string | null;
age: string;
amount: string;
dateAppoint: string | null;
dateStart: string | null;
createdAt: string | null;
// salaryDate: string | null;
isLeave: string;
// leaveReason: string;
leaveDateOrder: string | null;
draftPositionEmployee: string | null;
draftOrganizationOrganization: string | null;
newAgency: string | null;
currentAgency: string | null;
status: string;
statustext: string;
}
interface ResponseEmployeeTemp {
id: string;
fullname: string;
fullnameOld: string;
oc: string;
position: string;
positionPathSide: string;
positionLine: string;
govAge: number;
refSalary: string;
positionEmployeePosition: string | null;
positionEmployeePositionSide: string | null;
positionEmployeeGroup: string | null;
age: string;
amount: string;
dateAppoint: Date | null;
dateStart: Date | null;
createdAt: Date | null;
salaryDate: Date | null;
isLeave: boolean;
leaveReason: string;
leaveDateOrder: Date | null;
draftPositionEmployee: string | null;
draftOrganizationOrganization: string | null;
draftOrgEmployeeStatus: string;
}
export type { ResponseEmployeeTemp, FormRegistryEmployee };

0
src/modules/08_registryEmployee/response/Main.ts → src/modules/08_registryEmployee/interface/response/Main.ts
View file

56
src/modules/08_registryEmployee/request/Main.ts
View file

@ -1,56 +0,0 @@
interface FormRegistryEmployee {
id: string;
fullname: String;
fullnameOld: String;
oc: String;
position: string;
positionPathSide: String;
positionLine: String;
govAge: number;
refSalary: String;
positionEmployeePosition: String | null;
positionEmployeePositionSide: String | null;
positionEmployeeGroup: String | null;
age: String;
amount: String;
dateAppoint: String | null;
dateStart: String | null;
createdAt: String | null;
// salaryDate: String | null;
isLeave: String;
// leaveReason: string;
leaveDateOrder: String | null;
draftPositionEmployee: String | null;
draftOrganizationOrganization: String | null;
newAgency: String | null;
currentAgency: String | null;
status: String;
statustext: String;
}
interface ResponseEmployeeTemp {
id: string;
fullname: String;
fullnameOld: String;
oc: String;
position: string;
positionPathSide: String;
positionLine: String;
govAge: number;
refSalary: String;
positionEmployeePosition: String | null;
positionEmployeePositionSide: String | null;
positionEmployeeGroup: String | null;
age: String;
amount: String;
dateAppoint: Date | null;
dateStart: Date | null;
createdAt: Date | null;
salaryDate: Date | null;
isLeave: boolean;
leaveReason: string;
leaveDateOrder: Date | null;
draftPositionEmployee: String | null;
draftOrganizationOrganization: String | null;
draftOrgEmployeeStatus: String;
}
export type { ResponseEmployeeTemp, FormRegistryEmployee };

24
src/modules/08_registryEmployee/router.ts
View file

@ -1,16 +1,14 @@
/**
* Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee)
*/
/*** Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee) */
import { defineAsyncComponent } from "vue";
// const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
// const Detail = () => import("@/modules/08_registryEmployee/views/Detail.vue");
const Main = defineAsyncComponent(
() => import("@/modules/08_registryEmployee/views/Main.vue")
);
const Detail = defineAsyncComponent(
() => import("@/modules/08_registryEmployee/views/Detail.vue")
const CreateEmployee = defineAsyncComponent(
() => import("@/modules/08_registryEmployee/views/Add.vue")
);
const EditDetail = defineAsyncComponent(
() => import("@/modules/08_registryEmployee/views/EditDetail.vue")
);
@ -26,20 +24,10 @@ export default [
Role: "registryEmployee",
},
},
// {
// path: "/registryEmployee/:id",
// name: "registryEmployeeDetail",
// component: Detail,
// meta: {
// Auth: true,
// Key: [10],
// Role: "registryEmployeeDetails",
// },
// },
{
path: "/registry-employee/add",
name: "registryEmployeeAdd",
component: Detail,
component: CreateEmployee,
meta: {
Auth: true,
Key: [11],

26
src/modules/08_registryEmployee/store.ts
View file

@ -81,3 +81,29 @@ export const useProfileDataStore = defineStore("profile", () => {
changeRetireText,
};
});
export const useRegistryEmployeeDataStore = defineStore("registryEmployeeDataStore", () => {
const statusText = (val: string) => {
switch (val) {
case "WAITTING":
return "รอดำเนินการ";
case "PENDING":
return "เลือกตำแหน่งแล้ว";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
case "REPORT":
return "ส่งรายชื่อไปออกคำสั่ง";
case "DONE":
return "ออกคำสั่งเสร็จแล้ว";
default:
return "-";
}
};
return {
statusText,
};
});

14
src/modules/08_registryEmployee/views/Detail.vue → src/modules/08_registryEmployee/views/Add.vue
View file

@ -1,19 +1,17 @@
<script setup lang="ts">
import AddEmployee from "@/modules/08_registryEmployee/components/AddEmployee/Main.vue";
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
<div id="information" name="1" class="row col-12 information q-mt-sm">
<!-- <Informationvue
v-model:statusEdit="statusEdit"
:profileType="profileType"
/> -->
<Information :statusAdd="true" />
<AddEmployee />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Information from "@/modules/08_registryEmployee/views/information.vue";
</script>
<style>
.image-size-default {
height: 150px;

876
src/modules/08_registryEmployee/views/EditDetail.vue
View file

@ -1,3 +1,394 @@
<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import EducationVue from "@/modules/08_registryEmployee/components/EditEmployee/Education.vue";
import TrainVue from "@/modules/08_registryEmployee/components/EditEmployee/Train.vue";
import AssessmentVue from "@/modules/08_registryEmployee/components/EditEmployee/Assessment.vue";
// import SalaryVue from "@/modules/08_registryEmployee/components/EditEmployee/Salary.vue";
import SalaryEmployeeVue from "@/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue";
import DisciplineVue from "@/modules/08_registryEmployee/components/EditEmployee/Discipline.vue";
import LeaveVue from "@/modules/08_registryEmployee/components/EditEmployee/Leave.vue";
import TalentVue from "@/modules/08_registryEmployee/components/EditEmployee/Talent.vue";
import WorkVue from "@/modules/08_registryEmployee/components/EditEmployee/Work.vue";
// import RecordVue from "@/modules/08_registryEmployee/components/EditEmployee/Record.vue";
import OtherVue from "@/modules/08_registryEmployee/components/EditEmployee/Other.vue";
import DocumentVue from "@/modules/08_registryEmployee/components/EditEmployee/Document.vue";
import Certicate from "@/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue";
import Information from "@/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue";
import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const router = useRouter();
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const fullname = ref<string>("");
const position = ref<string>("นักจัดการงานทั่วไป");
const dialog = ref<boolean>(false);
const dialogShort = ref<boolean>(false);
const dialogLeave = ref<boolean>(false);
const dialogImage = ref<boolean>(false);
const statusEdit = ref<boolean>(false);
const activeImage = ref<any | null>(null);
const images = ref<any>([]);
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const profileType = ref<string>("");
const leaveDate = ref<Date>(new Date());
const leaveDetail = ref<string>("");
const leaveNumberOrder = ref<string>("");
const leaveDateOrder = ref<Date>(new Date());
const reason = ref<string>("");
const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
{
id: "retire",
name: "เกษียณอายุราชการ",
},
{
id: "resign",
name: "ลาออก",
},
{
id: "transfer",
name: "ให้โอน",
},
{
id: "death",
name: "ถึงแก่กรรม",
},
{
id: "layoff",
name: "ให้ออก",
},
{
id: "discharge",
name: "ปลดออก",
},
{
id: "dismiss",
name: "ไล่ออก",
},
{
id: "other",
name: "อื่นๆ",
},
]);
// get ข้อมูลทั้งหมด
const fetchData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarId(profileId.value))
.then((res) => {
const data = res.data.result;
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
profileType.value = data.profileType;
const reason = reasonOptions.value.filter(
(r: DataOption) => r.id == data.leaveReason
);
if (reason.length > 0) {
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
} else {
leaveReason.value = "";
}
reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const fetchAvatarHistory = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(profileId.value))
.then((res) => {
let data = res.data.result;
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const uploadImage = async (e: any) => {
if (profileId.value !== "") {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
}
};
const fetchDataDelete = async (id: string) => {
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
});
};
const deletePhoto = async (id: string) => {
dialogMessage(
$q,
"ลบข้อมูล",
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
"delete",
undefined,
"red",
() => fetchDataDelete(id),
undefined,
false
);
};
const selectAvatarHistory = async () => {
if (activeImage.value == null) {
dialogMessage(
$q,
"ไม่สามารถเปลี่ยนรูปได้",
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
}
if (profileId.value !== "") {
showLoader();
await http
.put(config.API.profileAvatarId(profileId.value), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
const imageActive = (n: any) => {
activeImage.value = n;
};
const imageClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders bg-grey-2 image-size-default": val,
"rounded-borders bg-grey-2 image-size-full": !val,
};
};
const getClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders border-green shadow-1": val,
"rounded-borders shadow-1": !val,
};
};
const addNewImage = async () => {
inputImage.value.click();
await imageActive(null);
};
const clickImage = async () => {
await fetchAvatarHistory();
dialogImage.value = true;
};
const closeImage = () => {
dialogImage.value = false;
};
const closeLeave = () => {
dialogLeave.value = false;
};
const closeKp7 = () => {
dialog.value = false;
};
const closeKp7Short = () => {
dialogShort.value = false;
};
const downloadKP7 = () => {};
const downloadKP7Short = () => {};
const downloadFilePDF = async (res: string, fileName: string) => {
const link = document.createElement("a");
// link.href = window.URL.createObjectURL(new Blob([res]));
link.href = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.ms-excel",
})
);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
};
const clickKp7Short = async () => {
if (profileId.value !== "") {
window.open(config.API.profileKp7ShortId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileKp7ShortId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrcShort.value = "g==";
// pdfCurrentPageShort.value = 1;
// pdfTotalPageShort.value = 7;
// dialogShort.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
const clickRetire = async () => {
if (reasonStatus.value == true) {
dialogMessage(
$q,
"โปรดยืนยัน",
"ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
"info",
undefined,
"primary",
Retire,
undefined,
false
);
} else {
leaveDate.value = new Date();
leaveDetail.value = "";
leaveNumberOrder.value = "";
leaveDateOrder.value = new Date();
reason.value = "";
dialogLeave.value = true;
}
};
const Retire = async () => {
if (profileId.value !== "") {
if (reasonStatus.value == true) {
showLoader();
await http
.put(config.API.profileReactive(profileId.value))
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
} else {
showLoader();
await http
.put(config.API.profileDeactive(profileId.value), {
leaveDate: dateToISO(leaveDate.value),
leaveDetail: leaveDetail.value,
leaveNumberOrder: leaveNumberOrder.value,
leaveDateOrder: dateToISO(leaveDateOrder.value),
reason: reason.value,
})
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
}
}
};
</script>
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
@ -146,35 +537,6 @@
</div>
</div>
<q-space />
<!-- <q-btn
round
flat
:color="reasonStatus ? 'primary' : 'pink-5'"
@click="clickRetire()"
:icon="
reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
"
>
<q-tooltip>{{
reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
}}</q-tooltip>
</q-btn> -->
<!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="clickKp7()">
<q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="clickKp7Short()">
<q-item-section class="text-primary"
>ประวัติแบบย่อ</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</div>
</q-page-sticky>
</div>
@ -197,13 +559,6 @@
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
:src="pdfSrc"
:currentpage="pdfCurrentPage"
:totalpage="pdfTotalPage"
></viewpdf> -->
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="dialogShort" persistent>
@ -494,456 +849,7 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import EducationVue from "@/modules/08_registryEmployee/views/Education.vue";
import TrainVue from "@/modules/08_registryEmployee/views/Train.vue";
import AssessmentVue from "@/modules/08_registryEmployee/views/Assessment.vue";
import SalaryVue from "@/modules/08_registryEmployee/views/Salary.vue";
import SalaryEmployeeVue from "@/modules/08_registryEmployee/views/SalaryEmployee.vue";
import DisciplineVue from "@/modules/08_registryEmployee/views/Discipline.vue";
import LeaveVue from "@/modules/08_registryEmployee/views/Leave.vue";
import TalentVue from "@/modules/08_registryEmployee/views/Talent.vue";
import WorkVue from "@/modules/08_registryEmployee/views/Work.vue";
import RecordVue from "@/modules/08_registryEmployee/views/Record.vue";
import OtherVue from "@/modules/08_registryEmployee/views/Other.vue";
import DocumentVue from "@/modules/08_registryEmployee/views/Document.vue";
import Certicate from "@/modules/08_registryEmployee/views/Information/Certicate.vue";
import Information from "@/modules/08_registryEmployee/views/Information/Information.vue";
import TempInformation from "@/modules/08_registryEmployee/views/Information/Tempinformation.vue";
import Address from "@/modules/08_registryEmployee/views/Information/Address.vue";
import Family from "@/modules/08_registryEmployee/views/Information/Family.vue";
import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const store = useDataStore();
const { changeTab } = store;
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const router = useRouter();
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const fullname = ref<string>("");
const position = ref<string>("นักจัดการงานทั่วไป");
const pdfSrc = ref<string>("");
const pdfCurrentPage = ref<number>();
const pdfTotalPage = ref<number>();
const pdfSrcShort = ref<string>("");
const pdfCurrentPageShort = ref<number>();
const pdfTotalPageShort = ref<number>();
const dialog = ref<boolean>(false);
const dialogShort = ref<boolean>(false);
const dialogLeave = ref<boolean>(false);
const dialogImage = ref<boolean>(false);
const loader = ref<boolean>(false); //รอโหลด
const statusEdit = ref<boolean>(false);
const activeImage = ref<any | null>(null);
const images = ref<any>([]);
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
// const profileId = ref<string>("");
const profileType = ref<string>("");
const leaveDate = ref<Date>(new Date());
const leaveDetail = ref<string>("");
const leaveNumberOrder = ref<string>("");
const leaveDateOrder = ref<Date>(new Date());
const reason = ref<string>("");
const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
{
id: "retire",
name: "เกษียณอายุราชการ",
},
{
id: "resign",
name: "ลาออก",
},
{
id: "transfer",
name: "ให้โอน",
},
{
id: "death",
name: "ถึงแก่กรรม",
},
{
id: "layoff",
name: "ให้ออก",
},
{
id: "discharge",
name: "ปลดออก",
},
{
id: "dismiss",
name: "ไล่ออก",
},
// {
// id: "change",
// name: "เปลี่ยนประเภทข้าราชการ",
// },
{
id: "other",
name: "อื่นๆ",
},
]);
onMounted(async () => {
// await checkProfileData();
// await fetchData();
// await changeTab("information");
});
const fetchData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarId(profileId.value))
.then((res) => {
const data = res.data.result;
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
profileType.value = data.profileType;
const reason = reasonOptions.value.filter(
(r: DataOption) => r.id == data.leaveReason
);
if (reason.length > 0) {
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
} else {
leaveReason.value = "";
}
reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const checkProfileData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileCheckId(profileId.value))
.then((res) => {
let data = res.data.result;
if (data == false) router.push("/registry");
})
.catch((e) => {
router.push("/registry");
})
.finally(() => {
hideLoader();
});
}
};
const fetchAvatarHistory = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(profileId.value))
.then((res) => {
let data = res.data.result;
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const uploadImage = async (e: any) => {
if (profileId.value !== "") {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
}
};
const fetchDataDelete = async (id: string) => {
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
// dialogImage.value = false;
});
};
const deletePhoto = async (id: string) => {
dialogMessage(
$q,
"ลบข้อมูล",
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
"delete",
undefined,
"red",
() => fetchDataDelete(id),
undefined,
false
);
};
const selectAvatarHistory = async () => {
if (activeImage.value == null) {
dialogMessage(
$q,
"ไม่สามารถเปลี่ยนรูปได้",
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
}
if (profileId.value !== "") {
showLoader();
await http
.put(config.API.profileAvatarId(profileId.value), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
const imageActive = (n: any) => {
activeImage.value = n;
};
const imageClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders bg-grey-2 image-size-default": val,
"rounded-borders bg-grey-2 image-size-full": !val,
};
};
const getClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders border-green shadow-1": val,
"rounded-borders shadow-1": !val,
};
};
const addNewImage = async () => {
inputImage.value.click();
await imageActive(null);
};
const clickImage = async () => {
await fetchAvatarHistory();
dialogImage.value = true;
};
const closeImage = () => {
dialogImage.value = false;
};
const closeLeave = () => {
dialogLeave.value = false;
};
const closeKp7 = () => {
dialog.value = false;
};
const closeKp7Short = () => {
dialogShort.value = false;
};
const downloadKP7 = () => {};
const downloadKP7Short = () => {};
const clickKp7 = async () => {
if (profileId.value !== "") {
window.open(config.API.profileReportId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileReportId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrc.value = "data:application/pdf;base64," + res.data;
// pdfCurrentPage.value = 1;
// pdfTotalPage.value = 7;
// dialog.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
const downloadFilePDF = async (res: string, fileName: string) => {
const link = document.createElement("a");
// link.href = window.URL.createObjectURL(new Blob([res]));
link.href = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.ms-excel",
})
);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
};
const clickKp7Short = async () => {
if (profileId.value !== "") {
window.open(config.API.profileKp7ShortId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileKp7ShortId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrcShort.value = "g==";
// pdfCurrentPageShort.value = 1;
// pdfTotalPageShort.value = 7;
// dialogShort.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
const clickRetire = async () => {
if (reasonStatus.value == true) {
dialogMessage(
$q,
"โปรดยืนยัน",
"ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
"info",
undefined,
"primary",
Retire,
undefined,
false
);
} else {
leaveDate.value = new Date();
leaveDetail.value = "";
leaveNumberOrder.value = "";
leaveDateOrder.value = new Date();
reason.value = "";
dialogLeave.value = true;
}
};
const Retire = async () => {
if (profileId.value !== "") {
if (reasonStatus.value == true) {
showLoader();
await http
.put(config.API.profileReactive(profileId.value))
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
} else {
showLoader();
await http
.put(config.API.profileDeactive(profileId.value), {
leaveDate: dateToISO(leaveDate.value),
leaveDetail: leaveDetail.value,
leaveNumberOrder: leaveNumberOrder.value,
leaveDateOrder: dateToISO(leaveDateOrder.value),
reason: reason.value,
})
.then((res) => {
if (res.data) {
dialogLeave.value = false;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
router.push("/registry");
});
}
}
};
</script>
<style>
.image-size-default {
height: 150px;

1534
src/modules/08_registryEmployee/views/Main.vue
View file

File diff suppressed because it is too large Load diff

1247
src/modules/08_registryEmployee/views/information.vue
View file

File diff suppressed because it is too large Load diff

136
src/modules/08_registryEmployee/views/top.vue
View file

@ -1,136 +0,0 @@
<template>
<div class="flex items-center">
<div class="flex items-center">
<q-icon
:name="icon"
size="1.5em"
color="grey-5"
class="q-mr-md"
v-if="icon != ''"
/>
<div
class="text-bold text-subtitle2 col-12 row items-center"
v-if="header != ''"
>
{{ header }}
</div>
</div>
<div class="q-gutter-sm q-mx-sm" v-if="addData == false"></div>
<q-space />
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
v-if="history"
@click="historyClick"
>
<q-tooltip>ประวัติ{{ header }}</q-tooltip>
</q-btn>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
iconAdd: {
type: String,
default: null,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
edit: {
type: Boolean,
default: true,
required: true,
},
history: {
type: Boolean,
default: true,
required: true,
},
addData: {
type: Boolean,
defualt: false,
},
disable: {
type: Boolean,
defualt: false,
},
historyClick: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
deleted: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
changeBtn: {
type: Function,
default: () => console.log("not function"),
},
addEmployee: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits(["update:edit"]);
const updateEdit = (value: any) => {
emit("update:edit", value);
};
const ClickEdit = () => {
updateEdit(!props.edit);
props.changeBtn();
};
const historyClick = async () => {
await props.historyClick();
};
const ClickCancel = () => {
updateEdit(!props.edit);
props.cancel();
props.changeBtn();
};
const save = () => {
props.save();
};
const add = () => {
props.add();
};
const addleave = () => {
props.addleave();
};
</script>
<style scoped></style>

2
src/modules/10_order/components/Detail.vue
View file

@ -64,7 +64,6 @@ const destroyLocalStorage = () => {
localStorage.clear();
};
onMounted(() => {
// console.log("route query===>", route.query)
if (route.query.step) {
step.value = Number(route.query.step);
localStorage.setItem("currentStep", step.value.toString());
@ -79,7 +78,6 @@ onMounted(() => {
if (orderId_params !== undefined) {
orderId.value = orderId_params.toString();
// console.log("orderId.value");
}
});
</script>

12
src/modules/10_order/components/Main.vue
View file

@ -141,7 +141,6 @@ const OriginalDataFetch = async () => {
await http
.get(config.API.listOrder())
.then((res: any) => {
// console.log("list", res);
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
@ -234,7 +233,6 @@ const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหม
const addedfiscalYearValues: number[] = [];
const fiscalYearFilter = async () => {
await http.get(config.API.yearOptionsOrder()).then((res) => {
// console.log(res);
const response = res.data.result;
fiscalyearOP.push(...response);
});
@ -247,7 +245,6 @@ const OrderTypeFilter = async () => {
await http
.get(config.API.typeOrder())
.then((res) => {
// console.log(res.data);
const response = res.data.result;
OrderTypeOption.push(...response);
})
@ -275,8 +272,6 @@ const OrderStatusFilter = async () => {
}
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
// console.log(OrderStatusValue);
OrderStatusOption.push({
// id: OrderStatusValue,
id: OrderStatusOption.length.toString(),
@ -303,12 +298,6 @@ const searchFilterTable = async () => {
if (OrderStatus.value == "ทั้งหมด") {
OrderStatus.value = "";
}
console.log(
"Input value changed:",
OrderType.value,
OrderStatus.value,
fiscalyear.value
);
await DataStore.DataUpdateOrder(
OrderType.value,
@ -316,7 +305,6 @@ const searchFilterTable = async () => {
fiscalyear.value
);
UpdataData.value = DataStore.DataMainUpdateOrder;
// console.log(UpdataData.value);
};
const paging = ref<boolean>(true);

2
src/modules/10_order/components/PopupHistory.vue
View file

@ -93,13 +93,11 @@ const clickSearch = async () => {
year: reportYear.value,
posno: reportNo.value,
};
// console.log(body);
showLoader();
http
.post(config.API.searchOrderprofile(), body)
.then((res) => {
let data = res.data.result;
console.log(data);
if (data.length !== 0) {
rows.value = data.map((e: any) => ({

16
src/modules/10_order/components/step/step01.vue
View file

@ -178,7 +178,6 @@ watch(byOrder, async () => {
.get(config.API.approverOC(byOrder.value))
.then((res: any) => {
CommandOption.value = res.data.result;
// console.log(CommandOption.value);
})
.catch((e: any) => {
console.log(e);
@ -220,10 +219,8 @@ const fetchdetailOrder = async () => {
await http
.get(config.API.detailOrder(orderIdString))
.then((res: any) => {
// console.log(res);
const data = res.data.result;
// console.log(data);
typeOrder.value = typeOrderOption.value.find(
(e) => e.id === data.orderTypeValue
);
@ -234,7 +231,6 @@ const fetchdetailOrder = async () => {
byOrder.value = data.orderBy;
nameCommand.value = data.signatoryBy;
positionCommand.value = data.signatoryPosition;
// console.log("nameCommand===>",nameCommand.value);
examRound.value = data.examRound;
conclusionRegisterNo.value = data.conclusionRegisterNo;
@ -309,8 +305,6 @@ const fecthCommand = async () => {
await http
.get(config.API.organizationsOrder())
.then((res: any) => {
console.log(res);
byOrderOption.value = res.data.result;
})
.catch((e: any) => {
@ -319,7 +313,6 @@ const fecthCommand = async () => {
};
const nameOrderFilter = (selectOrder: any) => {
console.log(selectOrder);
switch (selectOrder) {
case "C-PM-01":
return "บรรจุและแต่งตั้งผู้สอบแข่งขันได้";
@ -434,9 +427,6 @@ const fecthExamRoundOption = async (commandCode: string) => {
};
const submit = async () => {
// console.log(nameCommand.value);
// console.log(CommandOption.value);
let signBy = null;
if (!nameCommand.value.length) {
signBy = await nameCommand.value.name;
@ -447,9 +437,7 @@ const submit = async () => {
(x: any) => x.name == nameCommand.value
);
signBy = await name2?.name;
console.log("signBy", signBy);
}
console.log(signBy);
const orderByOrganizationName = await byOrderOption.value.find(
(x: any) => x.id == byOrder.value
@ -553,8 +541,6 @@ const submit = async () => {
});
}
// console.log(formdata);
await myForm.value!.validate().then((result: boolean) => {
if (result) {
dialogConfirm($q, () => {
@ -591,8 +577,6 @@ const updateOrder = async (formData: Object, orderId: string, type: string) => {
await http
.put(config.API.orderCPMUpdate(type, orderId), formData)
.then((res) => {
console.log(res);
next();
success($q, "บันทึกข้อมูลสำเร็จ");
})

23
src/modules/10_order/components/step/step02.vue
View file

@ -118,7 +118,6 @@ const getData = async (id: string) => {
.get(config.API.personsselectedOrder(id))
.then((res) => {
const data = res.data.result;
// console.log(data);
let list: ResponseData[] = [];
data.map((r: ResponseData) => {
list.push({
@ -134,7 +133,6 @@ const getData = async (id: string) => {
monthSalaryAmount: r.monthSalaryAmount,
});
});
// console.log("list", list);
rows.value = list;
selected.value = rows.value;
})
@ -182,8 +180,6 @@ const deleteData = async (id: string) => {
await http
.delete(config.API.personsOrder(id))
.then((res) => {
// const data = res.data.result;
// console.log(res);
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
@ -199,10 +195,6 @@ const swapUp = async (id: string) => {
// id = personalId
await http
.put(config.API.swapUpOrder(id))
.then((res) => {
// const data = res.data.result;
// console.log(res);
})
.catch((e) => {
messageError($q, e);
})
@ -216,10 +208,6 @@ const swapDown = async (id: string) => {
// id = personalId
await http
.put(config.API.swapDownOrder(id))
.then((res) => {
// const data = res.data.result;
// console.log(res);
})
.catch((e) => {
messageError($q, e);
})
@ -249,7 +237,6 @@ const saveModal = () => {
};
const personalId = ref<string>("");
const selectModal = (e: any) => {
// console.log(e);
titleName.value = e.name;
personalId.value = e.personalId;
modalOpenClose(e.personalId);
@ -265,12 +252,10 @@ const modalOpenClose = async (personalId: string) => {
myForm.value?.reset();
};
const fetchSalary = async (personalId: string) => {
// console.log(personalId);
showLoader();
await http
.get(config.API.salaryOrder(personalId))
.then((res: any) => {
console.log(res);
const data = res.data.result;
modalData.value = {
salaryAmount:
@ -292,10 +277,8 @@ const fetchSalary = async (personalId: string) => {
? null
: data.monthSalaryAmount,
};
// console.log("data", modalData.value);
})
.catch((e) => {
// console.log(e);
messageError($q, e);
})
.finally(() => {
@ -318,11 +301,9 @@ const putSalary = async (salary: any) => {
await http
.put(config.API.salaryOrder(personalId.value), modalData.value)
.then((res: any) => {
// console.log(res);
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
// console.log(e);
messageError($q, e);
})
.finally(async () => {
@ -353,7 +334,6 @@ const fetchaddlist = async (id: string) => {
.get(config.API.personsOrder(id))
.then((res) => {
const data = res.data.result;
console.log(data);
let list = [];
list = data.map((r: ResponseData) => ({
education: r.education ?? "",
@ -408,7 +388,6 @@ const addlist = async (data: Object) => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
@ -418,8 +397,6 @@ const addlist = async (data: Object) => {
};
const save = async () => {
// console.log("save===>", rows.value);
// console.log(statuscode.value);
const check = rows.value.find((x: any) => x.salaryAmount == 0);
if (
(selected.value.length > 0 && !check) ||

8
src/modules/10_order/components/step/step03.vue
View file

@ -207,7 +207,6 @@ const getData = async (id: string) => {
.get(config.API.copyOrderId(id))
.then((res) => {
const data = res.data.result;
// console.log(data);
let list: DataCopyOrder[] = [];
data.map((r: ResponseCopyOrder) => {
let selectCopyOrder = [];
@ -248,7 +247,6 @@ const getData = async (id: string) => {
};
const saveData = async () => {
// console.log("select", selectedModal.value);
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
@ -258,10 +256,6 @@ const saveData = async () => {
showLoader();
await http
.post(config.API.copyOrderPersonsId(id), selectedModal.value)
.then((res) => {
// const data = res.data.result;
// console.log(res);
})
.catch((e) => {
messageError($q, e);
})
@ -332,8 +326,6 @@ const deleteData = async (id: string) => {
await http
.delete(config.API.copyOrderId(id))
.then((res) => {
// const data = res.data.result;
// console.log(res);
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {

548
src/modules/10_order/components/step/step04.vue
View file

@ -65,7 +65,6 @@ const getCommandDetail = async () => {
code.value = orderTypeCode ?? "";
orderName.value = res.data.result.orderTitle;
orderStatusName.value = data.orderStatusName;
// console.log(orderStatusName.value);
fetchReportCover("pdf", orderId.value);
@ -211,7 +210,6 @@ const viewPDFUpload = async (pdf: string) => {
};
watch(tab, () => {
// console.log(tab.value);
if (tab.value === "main") {
viewPDF(orderCoverPdf.value);
}
@ -244,7 +242,6 @@ const props = defineProps({
const previous = () => props.previous();
const onchangePage = (val: any) => {
// console.log(val);
if (vuePDFRef !== null) {
vuePDFRef.value.reload();
}
@ -260,6 +257,7 @@ const downloadFile = (response: any, filename: string) => {
document.body.removeChild(link);
};
// การอัพโหลดไฟล์คำสั่งและเอกสารแนบท้าย
const saveUpload = () => {
if (myFormUpload.value !== null) {
myFormUpload.value!.validate().then((success: Boolean) => {
@ -288,32 +286,41 @@ const saveUpload = () => {
}
};
// แก้ไขรายละเอียดคำสั่ง
const saveDetail = () => {
console.log(tab.value);
if (myForm.value !== null) {
myForm.value!.validate().then((success: Boolean) => {
if (success) {
// ยืนยันการบันทึก
dialogConfirm($q, async () => {
showLoader();
await putOrderData();
if (tab.value == "main") {
await fetchReportCover("pdf", orderId.value);
} else {
if (
code.value != "c-pm-10" &&
code.value != "c-pm-11" &&
code.value != "c-pm-12" &&
code.value != "c-pm-16" &&
code.value != "c-pm-18" &&
code.value != "c-pm-19" &&
code.value != "c-pm-20" &&
code.value != "c-pm-21"
) {
await fetchReportAttachment("pdf", orderId.value);
await viewPDF(orderAttachmentPdf.value);
await putOrderData(); // บันทึกข้อมูลในส่วนของรายละเอียด
await fetchReportCover("pdf", orderId.value); // ดึงรายงานคำสั่งใหม่
// เช็คประเภทคำสั่งถ้าไม่ใช่ type เหล่านี้จะมีแนบท้าย
if (
code.value != "c-pm-10" &&
code.value != "c-pm-11" &&
code.value != "c-pm-12" &&
code.value != "c-pm-16" &&
code.value != "c-pm-18" &&
code.value != "c-pm-19" &&
code.value != "c-pm-20" &&
code.value != "c-pm-21"
) {
// ดึงรายงานในส่วนของแนบท้ายมาใหม่
await fetchReportAttachment("pdf", orderId.value);
// เช็คว่าถ้าอยู่ใน tab ของแนบท้ายไหมถ้าอยู่เข้าเงื่อนไขนี้
if (tab.value == "second") {
// แสดงผลส่วนของแนบท้ายใหม่
await viewPDF(orderAttachmentPdf.value);
}
}
// ดึงข้อมูลสถานะการออกคำสั่ง (Y = ออกคำสั่งได้แล้ว, N = เงื่อนไขยังไม่ครบไม่สามารถกดออกคำสั่งได้)
await fecthstatusOrder();
hideLoader();
@ -323,6 +330,7 @@ const saveDetail = () => {
}
};
// ฟังก์ชั่นการบันทึกข้อมูลในส่วนของรายละเอียด
const putOrderData = async () => {
const orderData = {
orderNo: order.value,
@ -438,108 +446,61 @@ const viewFileUpload = async (url: string) => {
<template>
<div>
<div style="min-height: 70vh">
<q-splitter
v-model="splitterModel"
style="height: 70vh"
@update:model-value="onchangePage"
>
<q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำสั่ง</div>
<q-btn
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense icon="mdi-download"
:disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="downloadCover('pdf')"
>
<q-item clickable v-close-popup @click="downloadCover('pdf')">
<!-- type="a"
:href="orderCoverPdf"
target="_blank" -->
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadCover('docx')"
>
<q-item clickable v-close-popup @click="downloadCover('docx')">
<!-- type="a"
:href="orderCoverDocs"
target="_blank" -->
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div
v-if="
code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
"
@click="setTab('second')"
:class="getClass(tab == 'second')"
>
<div v-if="code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
" @click="setTab('second')" :class="getClass(tab == 'second')">
<div class="q-pr-sm">เอกสารแนบท้าย</div>
<q-btn
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
size="12px"
flat
dense
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense
:color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="downloadAttachment('pdf')"
>
<q-item clickable v-close-popup @click="downloadAttachment('pdf')">
<!-- type="a"
:href="orderAttachmentPdf"
target="_blank" -->
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadAttachment('xlsx')"
>
<q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
<!-- type="a"
:href="orderAttachmentXlsx"
target="_blank" -->
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section>
</q-item>
</q-list>
@ -547,24 +508,12 @@ const viewFileUpload = async (url: string) => {
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
<q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
</div>
<q-separator style="margin-top: -1px; z-index: 1" />
<q-card bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -572,12 +521,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -586,12 +530,7 @@ const viewFileUpload = async (url: string) => {
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -599,12 +538,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -612,12 +546,7 @@ const viewFileUpload = async (url: string) => {
</template>
<template v-slot:separator>
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
<q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
</template>
<template v-slot:after>
@ -629,94 +558,47 @@ const viewFileUpload = async (url: string) => {
<div>
<label class="text-file">คำสั่ง</label>
<div v-if="OrderPDFUpload != ''" class="text-right">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)"
>
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)">
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
type="a"
:href="OrderPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<q-file
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
outlined
dense
v-model="fileOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
accept=".pdf"
>
<q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileOrder"
label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']" accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div
v-if="
code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
"
>
<div v-if="code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
">
<label class="text-file">เอกสารแนบท้าย</label>
<div v-if="TailerPDFUpload != ''" class="text-right">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)"
>
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)">
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
type="a"
:href="TailerPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
outlined
dense
v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
accept=".pdf"
>
<q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -724,26 +606,15 @@ const viewFileUpload = async (url: string) => {
</div>
<!-- บันทึกอัพโหลดเอกสาร -->
<div
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
class="row col-12 q-mt-md"
>
<div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
<q-space></q-space>
<q-btn
unelevated
label="บันทึก"
:color="
validateFormUpload() &&
orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
"
:disable="
!validateFormUpload() ||
orderStatusName == 'ออกคำสั่งแล้ว'
"
@click="saveUpload"
>
<q-btn unelevated label="บันทึก" :color="validateFormUpload() &&
orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
" :disable="!validateFormUpload() ||
orderStatusName == 'ออกคำสั่งแล้ว'
" @click="saveUpload">
</q-btn>
</div>
</div>
@ -756,54 +627,25 @@ const viewFileUpload = async (url: string) => {
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">เลขที่คำสั่ง</label>
<q-input
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
/>
<q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" :disable="orderStatusName == 'ออกคำสั่งแล้ว'" />
</div>
<div>
<label class="text-file">ปีที่ออกคำสั่ง</label>
<datepicker
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
menu-class-name="modalfix"
v-model="years"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
week-start="0"
>
<datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="years"
:locale="'th'" autoApply year-picker :enableTimePicker="false" week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
outlined
dense
lazy-rules
:model-value="years + 543"
:rules="[
<q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense lazy-rules
:model-value="years + 543" :rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]"
hide-bottom-space
:label="`${'ปีที่ออกคำสั่ง'}`"
>
]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -812,16 +654,8 @@ const viewFileUpload = async (url: string) => {
</div>
<div>
<label class="text-file">วันที่ลงนาม</label>
<datepicker
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="date"
:locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -829,24 +663,13 @@ const viewFileUpload = async (url: string) => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
outlined
dense
class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่ลงนาม'}`"
:rules="[
<q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense
class="full-width datepicker" hide-bottom-space
:model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
]"
>
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
</q-icon>
</template>
</q-input>
@ -855,24 +678,13 @@ const viewFileUpload = async (url: string) => {
</div>
<!-- บันทึกรายละเอียดคำสั่ง -->
<div
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
class="row col-12 q-mt-md"
>
<div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
<q-space></q-space>
<q-btn
unelevated
label="บันทึก"
:color="
validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
"
:disable="
!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
"
@click="saveDetail"
>
<q-btn unelevated label="บันทึก" :color="validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
" :disable="!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
" @click="saveDetail">
</q-btn>
</div>
</div>
@ -884,26 +696,13 @@ const viewFileUpload = async (url: string) => {
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา"
>
<q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" dense outline color="primary" icon="chevron_left"
@click="previous" class="q-pr-md" label="เลือกรายชื่อส่งสำเนา">
</q-btn>
<!-- ออกคำสั่ง -->
<q-btn
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
:disable="statusOrder == 'N'"
unelevated
label="ออกคำสั่ง"
:color="statusOrder == 'Y' ? 'public' : 'grey'"
>
<q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" :disable="statusOrder == 'N'" unelevated label="ออกคำสั่ง"
:color="statusOrder == 'Y' ? 'public' : 'grey'">
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="clickExecute(orderId)">
@ -916,42 +715,18 @@ const viewFileUpload = async (url: string) => {
</q-menu>
</q-btn>
<q-btn
v-else
disable
unelevated
label="ออกคำสั่งเสร็จสิ้น"
color="green"
></q-btn>
<q-btn v-else disable unelevated label="ออกคำสั่งเสร็จสิ้น" color="green"></q-btn>
</div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
<q-card class="bg-white text-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
<q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
v-close-popup />
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -959,32 +734,16 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -992,12 +751,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
@ -1005,33 +759,16 @@ const viewFileUpload = async (url: string) => {
</q-card>
</q-dialog>
<q-dialog
v-model="dialogFileUpload"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
transition-hide="slide-down">
<q-card class="bg-white text-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
<q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
v-close-popup />
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -1039,32 +776,16 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfFileUploadSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -1072,12 +793,7 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>

3
src/stores/mixin.ts
View file

@ -253,7 +253,7 @@ export const useCounterMixin = defineStore("mixin", () => {
);
}
function appendLeadingZeroes(n: Number) {
function appendLeadingZeroes(n: number) {
if (n <= 9) return "0" + n;
return n;
}
@ -313,7 +313,6 @@ export const useCounterMixin = defineStore("mixin", () => {
const messageError = (q: any, e: any = "") => {
// q.dialog.hide();
console.log("e.response", e.response);
if (e.response !== undefined) {
if (e.response.data.status !== undefined) {
if (e.response.data.status == 401) {