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

Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

Browse source 
# Conflicts:
#	src/api/06_retirement/api.retirement.ts
#	src/modules/05_placement/router.ts
This commit is contained in:
Thanit Konmek 2023-08-14 16:55:32 +07:00
commit b4ac343685
32 changed files with 5263 additions and 1871 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/api/05_placement/api.placement.ts
View file

@ -4,6 +4,11 @@ const orgTree = `${env.API_URI_ORG_TREE}`;
const order = `${env.API_PLACEMENT_URI}`;
const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
const transfer = `${placement}/transfer`;
const placemenHelpGov = `${placement}/officer`;
const placemenRepatriation = `${placement}/repatriation`;
const placemenRelocation = `${placement}/relocation`;
const placemenOther = `${env.API_URI}/retirement/other`;
const placemenAppointment = `${env.API_URI}/retirement/appointment`;
export default {
MainDetail: (year: number) => `${placement}/exam/${year}`,
@ -99,4 +104,27 @@ export default {
transferUser: `${transfer}/user`,
transferUserId: (id: string) => `${transfer}/user/${id}`,
transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
// แต่งตั้ง-เลื่อน
placemenAppointment,
// ช่วยราชการ
placemenHelpGov,
officerMain: () => `${placement}/officer`,
officerDetail: (id:string) => `${placement}/officer/${id}`,
officerMainDelete: (id:string) => `${placement}/officer/${id}`,
officerMainReport: () => `${placement}/officer/report`,
// ส่งตัวกลับ
placemenRepatriation,
repatriationMain: () => `${placement}/repatriation`,
repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
repatriationMainReport: () => `${placement}/repatriation/report`,
// ขอย้าย
placemenRelocation,
// อื่นๆ
placemenOther,
};

34
src/api/05_placement/api.probation.ts
View file

@ -3,6 +3,8 @@ const dataOptions = `${env.API_PROBATION_URI}/data-options`;
const personal = `${env.API_PROBATION_URI}/personal`;
const calculate = `${env.API_PROBATION_URI}/calculate`;
const finish = `${env.API_PROBATION_URI}/assign`;
const evaluate = `${env.API_PROBATION_URI}`;
export default {
competencyOptions: (personalId: string) =>
@ -25,6 +27,36 @@ export default {
personalAdd: () => `${personal}/add`,
probationGetAssignList: (personalId:string) =>
`${finish}/probation-assign-list?personal_id=${personalId}`,
probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`
probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`,
// probationGetAssignList: (personalId: string) =>
// `${finish}/probation-assign-list?personal_id=${personalId}`,
// clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
// บันทึกผล
formevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
formevaluateround: (id: string, no: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_no=${no}`,
formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
createformevaluate: (id: string) => `${evaluate}/evaluate-record?id=${id}`,
//แบบประเมินผล (ผู้บังคับบัญชา)
evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
createformCommader: (id: string) => `${evaluate}/evaluate?id=${id}`,
//แบบประเมินผล (คณะกรรมการ)
evaluateChairman: (id: string) => `${evaluate}/evaluate-chairman/create?assign_id=${id}`,
evaluateRoundChairman: (id: string, no: string) => `${evaluate}/evaluate-chairman?assign_id=${id}&evaluate_no=${no}`,
createformChairman: (id: string) => `${evaluate}/evaluate-chairman?id=${id}`,
//แบบรายงาน
evaluateReportcreate: (id: string) => `${evaluate}/evaluate-result/create?assign_id=${id}`,
evaluateReport: (id: string) => `${evaluate}/evaluate-result?assign_id=${id}`,
createformReport: (id: string) => `${evaluate}/evaluate-result?id=${id}`,
};

11
src/api/06_retirement/api.retirement.ts
View file

@ -1,5 +1,8 @@
import env from "../index";
const retirement = `${env.API_URI}/retirement`;
const retirementDischarge = `${retirement}/discharge`;
const retirementExpulsion = `${retirement}/expulsion`;
const retirementOut = `${retirement}/out`;
export default {
profile: (type: string, year: string) =>
@ -23,4 +26,12 @@ export default {
resingByid: (id: string) => `${retirement}/resign/${id}`,
resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
// ปลดออก
retirementDischarge,
// ไล่ออก
retirementExpulsion,
// ให้ออก
retirementOut,
};

3
src/api/index.ts
View file

@ -26,7 +26,8 @@ const config = ref<any>({
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
MEET_URI: "meet.frappet.com",
API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
// API_PROBATION_URI: "http://192.168.1.151:7776/v1",
},
test: {
API_URI: "http://localhost:5010/api/v1",

8
src/interface/request/main/main.ts
View file

@ -125,7 +125,7 @@ const menuList = readonly<any[]>([
activeIcon: "order",
label: "ออกคำสั่ง",
path: "order",
role: "placement",
role: "order",
},
{
key: 5,
@ -253,7 +253,7 @@ const menuList = readonly<any[]>([
{
key: 6.9,
label: "รายการย้าย" /* */,
path: "move-list",
path: "relocation",
role: "placement",
},
{
@ -311,13 +311,13 @@ const menuList = readonly<any[]>([
{
key: 7.6,
label: "รายการปลดออก",
path: "dismiss-order",
path: "discharged",
role: "retirement",
},
{
key: 7.7,
label: "รายการไล่ออก",
path: "dismiss-order",
path: "expulsion",
role: "retirement",
},
],

2
src/modules/04_registry/components/Information/Certicate.vue
View file

@ -292,7 +292,7 @@ const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError } = mixin;
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } = mixin;
const route = useRoute();
const id = ref<string>("");
const certificateNo = ref<string>();

531
src/modules/04_registry/components/Profile.vue
View file

@ -6,17 +6,10 @@
v-model:statusEdit="statusEdit"
:profileType="profileType"
/> -->
<Information
v-model:statusEdit="statusEdit"
:fetchDataProfile="fetchData"
/>
<Information v-model:statusEdit="statusEdit" :fetchDataProfile="fetchData" />
</div>
<div id="government" name="16" class="row col-12 q-mt-md">
<Government
v-model:statusEdit="statusEdit"
:profileType="profileType"
:employeeClass="employeeClass"
/>
<Government v-model:statusEdit="statusEdit" :profileType="profileType" :employeeClass="employeeClass" />
</div>
<div id="address" name="17" class="row col-12 q-mt-md">
<Address v-model:statusEdit="statusEdit" />
@ -40,20 +33,11 @@
<CoinedVue v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
<div id="assessment" name="6" class="row col-12 q-mt-md">
<AssessmentVue
v-model:statusEdit="statusEdit"
:profileType="profileType"
/>
<AssessmentVue v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
<div id="position" name="7" class="row col-12 q-mt-md">
<SalaryVue
v-model:statusEdit="statusEdit"
v-if="profileType === 'officer'"
/>
<SalaryEmployeeTempVue
v-model:statusEdit="statusEdit"
v-else-if="employeeClass === 'temp'"
/>
<SalaryVue v-model:statusEdit="statusEdit" v-if="profileType === 'officer'" />
<SalaryEmployeeTempVue v-model:statusEdit="statusEdit" v-else-if="employeeClass === 'temp'" />
<SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
</div>
<div id="rule" name="8" class="row col-12 q-mt-md">
@ -78,70 +62,29 @@
<DocumentVue v-model:statusEdit="statusEdit" />
</div>
</div>
<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-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
v-if="imageUrl == null"
size="65px"
rounded
class="containerimage"
>
<img
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="clickImage()"
>
<q-avatar v-if="imageUrl == null" size="65px" rounded class="containerimage">
<img src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
<div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
<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"
/>
<input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
</div>
</q-avatar>
<q-avatar v-else size="65px" rounded class="containerimage">
<img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="clickImage()"
>
<div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
<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"
/>
<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">
@ -157,25 +100,25 @@
<q-btn round flat color="blue" icon="mdi-file-document">
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 160px">
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="helpPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ช่วยราชการ</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="repatriationPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ส่งตัวกลับ</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="appointPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="relocationPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ย้าย</q-item-section>
@ -187,25 +130,25 @@
<q-item-section>ถึงแก่กรรม</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="outPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ให้ออกจากราชการ</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="dischargePost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ปลดออกจากราชการ</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="expulsionPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>ไล่ออกจากราชการ</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="postAdd">
<q-item clickable v-close-popup @click="otherPost">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
</q-item-section>
<q-item-section>อื่นๆ</q-item-section>
@ -215,15 +158,8 @@
</q-menu>
</q-btn>
<q-btn
round
flat
:color="reasonStatus ? 'primary' : 'pink-5'"
@click="clickRetire()"
:icon="
reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
"
>
<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>
@ -237,9 +173,7 @@
<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-section class="text-primary">ประวัติแบบย่อ</q-item-section>
</q-item>
</q-list>
</q-menu>
@ -251,20 +185,8 @@
<q-card style="width: 90vw; max-width: 80vw">
<q-card-section class="row items-center q-pb-xs col-12">
<q-space />
<q-btn
@click="downloadKP7()"
unelevated
class="btn_purple q-mr-sm"
label="ดาวน์โหลด ก.พ.7/ก.ก.1"
></q-btn>
<q-btn
icon="close"
unelevated
round
dense
@click="closeKp7"
style="color: #ff8080; background-color: #ffdede"
/>
<q-btn @click="downloadKP7()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ก.พ.7/ก.ก.1"></q-btn>
<q-btn icon="close" unelevated round dense @click="closeKp7" style="color: #ff8080; background-color: #ffdede" />
</q-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
@ -279,20 +201,9 @@
<q-card style="width: 90vw; max-width: 80vw">
<q-card-section class="row items-center q-pb-xs col-12">
<q-space />
<q-btn
@click="downloadKP7Short()"
unelevated
class="btn_purple q-mr-sm"
label="ดาวน์โหลด ประวัติแบบย่อ"
></q-btn>
<q-btn
icon="close"
unelevated
round
dense
@click="closeKp7Short"
style="color: #ff8080; background-color: #ffdede"
/>
<q-btn @click="downloadKP7Short()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ประวัติแบบย่อ"></q-btn>
<q-btn icon="close" unelevated round dense @click="closeKp7Short"
style="color: #ff8080; background-color: #ffdede" />
</q-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
@ -309,50 +220,28 @@
<q-card-section class="q-py-sm row">
<div class="text-h6">เลือกรูปภาพ</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
@click="closeImage"
style="color: #ff8080; background-color: #ffdede"
>
<q-btn icon="close" unelevated round dense @click="closeImage" style="color: #ff8080; background-color: #ffdede">
<q-tooltip>ปิดหน้านี้</q-tooltip>
</q-btn>
</q-card-section>
<q-separator />
<q-card-section class="col-12 row">
<div
class="row wrap items-start col-12 q-col-gutter-sm"
style="height: 320px; overflow: auto"
>
<div class="row wrap items-start col-12 q-col-gutter-sm" style="height: 320px; overflow: auto">
<div class="col-3" @click="addNewImage">
<div
style="
<div style="
height: 160px;
max-width: 15vw;
display: flex !important;
justify-content: center;
align-items: center;
"
class="column rounded-borders cursor-pointer bg-active-image text-white"
>
" class="column rounded-borders cursor-pointer bg-active-image text-white">
<q-icon name="add" size="60px" color="white" />
<strong>อัปโหลดรูปภาพ</strong>
</div>
</div>
<div
v-for="n in images"
:key="n"
class="col-3"
@click="imageActive(n)"
>
<div v-for="n in images" :key="n" class="col-3" @click="imageActive(n)">
<div :class="getClass(n)">
<q-img
v-if="n.avatar != null"
:src="n.avatar"
:class="imageClass(n)"
>
<q-img v-if="n.avatar != null" :src="n.avatar" :class="imageClass(n)">
<!-- <div
class="absolute-top bg-transparent cursor-pointer text-right"
style="padding: 5px"
@ -366,21 +255,11 @@
style="color: #ff8080"
/>
</div> -->
<div
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
style="padding: 5px"
>
<div class="absolute-bottom col-12 cursor-pointer flex justify-between items-center" style="padding: 5px">
{{ date2Thai(n.createdDate) }}
<q-btn
v-if="!n.isActive"
icon="delete"
unelevated
dense
@click="deletePhoto(n.id)"
class="bg-white"
style="color: #ff8080"
/>
<q-btn v-if="!n.isActive" icon="delete" unelevated dense @click="deletePhoto(n.id)" class="bg-white"
style="color: #ff8080" />
</div>
</q-img>
</div>
@ -398,14 +277,7 @@
>
<q-tooltip>ลบรูปภาพ</q-tooltip>
</q-btn> -->
<q-btn
icon="check"
dense
flat
round
@click="selectAvatarHistory"
color="positive"
>
<q-btn icon="check" dense flat round @click="selectAvatarHistory" color="positive">
<q-tooltip>เลือกรูปภาพ</q-tooltip>
</q-btn>
</q-card-actions>
@ -419,38 +291,18 @@
<q-card-section class="q-py-sm row">
<DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-file
class="col-12 col-sm-6 col-md-5"
outlined
dense
v-model="filePassaway"
label="แนบใบมรณบัตร"
hide-bottom-space
lazy-rules
>
<q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
hide-bottom-space lazy-rules>
<q-separator />
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
<q-input
class="col-12 col-sm-6 col-md-7"
dense
outlined
v-model="deathCertificateNo"
label="เลขที่ใบมรณบัตร"
/>
<q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
label="เลขที่ใบมรณบัตร" />
<datepicker
class="col-12 col-sm-6 col-md-5"
menu-class-name="modalfix"
v-model="dateDeath"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -458,63 +310,32 @@
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateDeath != null ? date2Thai(dateDeath) : null
"
:label="`${'วันที่เสียชีวิต'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
]"
>
<q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : null
" :label="`${'วันที่เสียชีวิต'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12 col-sm-6 col-md-7"
dense
outlined
v-model="placeDeathCertificate"
label="สถานที่ออกใบมรณบัตร"
/>
<q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
label="สถานที่ออกใบมรณบัตร" />
<q-separator />
<q-input
class="col-12"
dense
outlined
v-model="reasonDeath"
label="เหตุผลการเสีบชีวิต"
type="textarea"
/>
<q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสีบชีวิต" type="textarea" />
</div>
<q-space />
</q-card-section>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
unelevated
label="บันทึก"
color="public"
@click="clickSaveDeceased"
:disable="
filePassaway === null ||
deathCertificateNo === '' ||
placeDeathCertificate === '' ||
reasonDeath === ''
"
>
<q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
deathCertificateNo === '' ||
placeDeathCertificate === '' ||
reasonDeath === ''
">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
@ -532,71 +353,34 @@
<q-dialog v-model="dialogLeave" persistent>
<q-card style="width: 600px">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>ประเภทการพ้นราชการ
<q-toolbar-title class="text-subtitle2 text-bold">ประเภทการพ้นราชการ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="closeLeave"
style="color: #ff8080; background-color: #ffdede"
/>
<q-btn icon="close" unelevated round dense @click="closeLeave"
style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<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="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">
<q-select
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
v-model="reason"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
hide-bottom-space
:label="`${'ประเภทการพ้นราชการ'}`"
emit-value
map-options
option-label="name"
:options="reasonOptions"
option-value="id"
/>
<q-select class="full-width inputgreen cursor-pointer" outlined dense lazy-rules v-model="reason"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]" hide-bottom-space
:label="`${'ประเภทการพ้นราชการ'}`" emit-value map-options option-label="name" :options="reasonOptions"
option-value="id" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="leaveDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="leaveDate" :locale="'th'" autoApply :enableTimePicker="false"
week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
:model-value="date2Thai(leaveDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
hide-bottom-space
:label="`${'วันที่พ้นราชการ'}`"
>
<q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
:model-value="date2Thai(leaveDate)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
hide-bottom-space :label="`${'วันที่พ้นราชการ'}`">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -604,64 +388,30 @@
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
autogrow
v-model="leaveDetail"
<q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow v-model="leaveDetail"
:rules="[
(val) =>
!!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
]"
hide-bottom-space
:label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
/>
]" hide-bottom-space :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
autogrow
v-model="leaveNumberOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
hide-bottom-space
:label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
/>
<q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow
v-model="leaveNumberOrder" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
hide-bottom-space :label="`${'คำสั่ง/เอกสารอ้างอิง'}`" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="leaveDateOrder"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="leaveDateOrder" :locale="'th'" autoApply
:enableTimePicker="false" week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
:model-value="date2Thai(leaveDateOrder)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
hide-bottom-space
:label="`${'วันที่ออกคำสั่ง'}`"
>
<q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
:model-value="date2Thai(leaveDateOrder)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
hide-bottom-space :label="`${'วันที่ออกคำสั่ง'}`">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -672,13 +422,7 @@
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
flat
round
color="public"
@click="Retire"
icon="mdi-content-save-outline"
>
<q-btn flat round color="public" @click="Retire" icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
@ -734,6 +478,7 @@ const {
success,
showLoader,
hideLoader,
dialogConfirm
} = mixin;
const route = useRoute();
const router = useRouter();
@ -892,7 +637,7 @@ const uploadImage = async (e: any) => {
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.then((res) => { })
.catch((e) => {
messageError($q, e);
})
@ -1016,13 +761,97 @@ const closeKp7Short = () => {
dialogShort.value = false;
};
const postAdd = () => {
// router.push("/dismiss-order/add");
};
const helpPost = () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.placemenHelpGov, formData);
},
);
}
const downloadKP7 = () => {};
const repatriationPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.placemenRepatriation, formData);
},
);
}
const downloadKP7Short = () => {};
const appointPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.placemenAppointment, formData);
},
);
}
const relocationPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.placemenRelocation, formData);
},
);
}
const outPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.retirementOut, formData);
},
);
}
const dischargePost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.retirementDischarge, formData);
},
);
}
const expulsionPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.retirementExpulsion, formData);
},
);
}
const otherPost = async () => {
dialogConfirm(
$q,
async () => {
const formData = new FormData();
formData.append("id", profileId.value);
await http.post(config.API.placemenOther, formData);
},
);
}
const downloadKP7 = () => { };
const downloadKP7Short = () => { };
const clickKp7 = async () => {
window.open(config.API.profileReportId(profileId.value));
@ -1271,12 +1100,12 @@ const clickSaveDeceased = async () => {
console.log(e);
messageError($q, e);
})
.finally(()=>{
.finally(() => {
hideLoader();
})
})
.onCancel(() => {})
.onDismiss(() => {});
.onCancel(() => { })
.onDismiss(() => { });
};
</script>
<style>

741
src/modules/05_placement/components/OrderPlacement/step/step02.vue
View file

@ -1,741 +0,0 @@
div
<template>
<div>
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
<div class="col-12 row q-pb-sm items-center">
<q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectModal(props.row)"
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1"
@click="upDown(props)"
icon="mdi-arrow-up-bold"
>
<!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1"
@click="upDown(props, false)"
icon="mdi-arrow-down-bold"
>
<!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="dialogDeleteData(props.row.personalId)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="กรอกรายละเอียด"
>
</q-btn>
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="save"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
</div>
<!--********************************** เงินเดือน ********************************** -->
<q-dialog v-model="modal" persistent>
<q-card style="width: 50vw; max-width: 50vw">
<q-form ref="myForm">
<DialogHeader :tittle="titleName" :close="modalOpenClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12">
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
type="number"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`"
type="number"
hide-bottom-space
/>
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]" -->
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
type="number"
hide-bottom-space
/>
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]" -->
</div>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModal"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
<!--********************************** รายชื่อ ********************************** -->
<q-dialog v-model="modalAdd" persistent>
<q-card style="width: 50vw; max-width: 50vw">
<q-form ref="myFormAdd">
<DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<d-table
:rows="rows2"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModalAdd"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import type { QInput } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps, QForm } from "quasar";
import { useRoute } from "vue-router";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
import http from "@/plugins/http";
import config from "@/app.config";
const props = defineProps({
next: {
type: Function,
default: () => console.log("not function"),
},
previous: {
type: Function,
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
const route = useRoute();
const $q = useQuasar();
const modalData = ref<any>({
salaryAmount: 0,
positionSalaryAmount: 0,
mouthSalaryAmount: 0,
});
const myForm = ref<QForm | null>(null);
const myFormAdd = ref<QForm | null>(null);
const modal = ref<boolean>(false);
const modalAdd = ref<boolean>(false);
const titleName = ref<string>("");
const filterRef = ref<QInput>();
const filter = ref<string>("");
const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "education",
align: "left",
label: "วุฒิการศึกษาในการออกคำสั่ง",
field: "education",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<ResponseData[]>([]);
const rows2 = ref<ResponseData[]>([]);
const selected = ref<ResponseData[]>([]);
onMounted(async () => {
await conditionData();
});
const conditionData = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await getData(id);
}
};
const getData = async (id: string) => {
showLoader();
await http
.get(config.API.personsselectedOrder(id))
.then((res) => {
const data = res.data.result;
console.log(data);
let list: ResponseData[] = [];
data.map((r: ResponseData) => {
list.push({
education: r.education ?? "",
idCard: r.idCard ?? "",
name: r.name ?? "",
personalId: r.personalId ?? "",
selectStatus: r.selectStatus !== null ? r.selectStatus : false,
sequence: r.sequence !== null ? r.sequence : 0,
refRecordId: r.refRecordId,
});
});
// console.log("list", list);
rows.value = list;
selected.value = rows.value;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
// const saveSalary = async (id: string) => {
// await http
// .put(config.API.salaryOrder(id))
// .then((res) => {
// // const data = res.data.result;
// // console.log(res);
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
// };
const dialogDeleteData = async (id: string) => {
dialogMessage(
$q,
"ยืนยันการลบข้อมูล",
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
"mdi-help-circle-outline",
"ตกลง",
"red",
() => deleteData(id),
undefined
);
};
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) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await conditionData();
});
};
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);
})
.finally(async () => {
await conditionData();
hideLoader();
});
};
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);
})
.finally(async () => {
await conditionData();
hideLoader();
});
};
const upDown = async (value: any, up: boolean = true) => {
const indexCurrent = value.rowIndex;
if (up) {
await swapUp(value.row.personalId);
// rows.value[indexCurrent] = rows.value[indexCurrent - 1];
// rows.value[indexCurrent - 1] = value.row;
} else {
await swapDown(value.row.personalId);
// rows.value[indexCurrent] = rows.value[indexCurrent + 1];
// rows.value[indexCurrent + 1] = value.row;
}
};
const saveModal = () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
putSalary(modalData.value);
}
});
}
};
const personalId = ref<string>("");
const selectModal = (e: any) => {
console.log(e);
titleName.value = e.name;
personalId.value = e.personalId;
// modalData.value = {
// salaryAmount: 0,
// positionSalaryAmount: 0,
// mouthSalaryAmount: 0,
// };
modalOpenClose(e.personalId);
};
const modalOpenClose = async (personalId: string) => {
modal.value = !modal.value;
if (!modal.value) {
titleName.value = "";
}
if (modal.value == true) {
await fetchSalary(personalId);
}
};
const fetchSalary = async (personalId: string) => {
console.log(personalId);
showLoader();
await http
.get(config.API.salaryOrder(personalId))
.then((res: any) => {
console.log(res);
let salary = res.data.result;
modalData.value = {
salaryAmount: salary.salaryAmount,
positionSalaryAmount: salary.positionSalaryAmount,
mouthSalaryAmount: salary.monthSalaryAmount,
};
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const putSalary = async (salary: any) => {
modalData.value = {
salaryAmount: Number(salary.salaryAmount),
positionSalaryAmount: Number(salary.positionSalaryAmount),
monthSalaryAmount: Number(salary.mouthSalaryAmount),
};
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}).onOk(async () => {
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 () => {
await conditionData();
modal.value = false;
});
});
};
const modalAddChange = async () => {
modalAdd.value = !modalAdd.value;
if (modalAdd.value == true) {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await fetchaddlist(id);
}
} else await conditionData();
};
const fetchaddlist = async (id: string) => {
showLoader();
await http
.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 ?? "",
idCard: r.idCard ?? "",
name: r.name ?? "",
personalId: r.personalId ?? "",
selectStatus: r.selectStatus !== null ? r.selectStatus : false,
sequence: r.sequence !== null ? r.sequence : 0,
refRecordId: r.refRecordId,
}));
rows2.value = list;
selected.value = rows.value;
// rows2.value = list.filter((e: any) => e.selectStatus === false);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const saveModalAdd = () => {
if (myFormAdd.value !== null) {
myFormAdd.value.validate().then(async (result: boolean) => {
if (result && selected.value.length !== 0) {
$q.dialog({
title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}).onOk(async () => {
let data = [];
data.push(...selected.value.map((e: any) => e.refRecordId));
// console.log(data);
addlist(data);
});
}
});
}
};
const addlist = async (data: Object) => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await http
.post(config.API.personsOrder(id), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
modalAddChange();
});
}
};
const click = (e: any) => {
console.log(e);
console.log(rows.value.length);
};
const save = () => {
if (selected.value.length > 0) {
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}).onOk(async () => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
});
} else {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"กรุณาเลือกรายชื่อ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
}
};
const selectData = (row: any) => {};
const refresh = async () => {
// await conditionData();
modalAddChange();
selected.value = [];
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
filterRef.value!.focus();
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style lang="scss"></style>

2
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -256,7 +256,7 @@ const getTable = async () => {
(e: any) =>
e.draft == "รอส่งตัว" &&
e.positionNumber !== null &&
e.statusName == " เตรียมบรรจุ"
e.statusName == "เตรียมบรรจุ"
);
console.log(rowsFilter.value);
})

610
src/modules/05_placement/components/Repatriate/RepatriateMain.vue Normal file
View file

@ -0,0 +1,610 @@
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import type { QTableProps } from "quasar";
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";
const transferStore = useTransferDataStore();
const { statusText } = transferStore;
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import type { officerType } from "@/modules/05_placement/interface/response/officer";
const selected = ref<officerType[]>([]);
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
dialogMessage,
} = mixin;
const modal = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statusText",
"btn",
]);
const visibleColumns2 = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statusText",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
};
// const nextPage = (id:string) => {
// router.push("/retirement/resign/"+id);
// };
const rows = ref<officerType[]>([]);
const rows2 = ref<any>([
{
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
},
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
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",
},
{
name: "btn",
align: "left",
label: "",
sortable: true,
field: "btn",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
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",
},
]);
//--------------(ปุ่มลบ)----------------//
const openDetail = (id:string) => {
router.push(`/repatriate/detail/${id}`)
}
const openModal = () => (modal.value = true);
const closeModal = () => (modal.value = false);
const openModalOrder = () => {
openModal();
const row = rows.value.filter(
(item: officerType) =>
item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
);
rows2.value = row;
};
const getData = async () => {
showLoader();
await http
.get(config.API.repatriationMain())
.then((res: any) => {
const data = res.data.result;
console.log("data==>", data);
rows.value = data.map((item: officerType) => ({
id: item.id,
fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
position: item.position,
posNo: item.posNo,
positionLevel: item.positionLevel,
createdAt: date2Thai(item.createdAt),
organization: item.organization,
reason: item.reason,
status: item.status,
statusText:statusText(item.status),
date: item.date,
salary: item.salary,
positionTypeOld: item.positionTypeOld,
positionLevelOld: item.positionLevelOld,
positionNumberOld: item.positionNumberOld,
organizationPositionOld: item.organizationPositionOld,
isActive: item.isActive,
})
);
console.log(rows.value )
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const saveOrder = async () => {
const id = selected.value.map((item) => item.id);
const body = {
id,
};
showLoader();
await http
.post(config.API.repatriationMainReport(), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
closeModal();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
const deleteData = async (id:string) => {
await http
.delete(config.API.repatriationMainDelete(id))
.then((res)=>{
success($q, "ลบข้อมูลสำเร็จ");
console.log(res)
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
});
}
const clickDelete = async (name:string,id:string) => {
dialogMessage(
$q,
`ลบข้อมูลของ ${name}`,
`ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
"delete",
"ยืนยัน",
"red",
async () => await deleteData(id)
,
async () => await getData()
);
};
onMounted(async () => {
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
@click="openModalOrder"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
</q-btn>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="openDetail(props.row.id)">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props" @click="openDetail(props.row.id)">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
</div>
</q-td>
<q-td key="organization" :props="props" @click="openDetail(props.row.id)">
<div class="table_ellipsis">
{{ props.row.organization }}
</div>
</q-td>
<q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
{{ props.row.statusText }}
</q-td>
<q-td auto-width>
<q-btn
icon="delete"
size="14px"
color="red-7"
flat
round
dense
@click="clickDelete(props.row.fullname,props.row.id)"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
<q-dialog v-model="modal">
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader title="ส่งไปออกคำสั่งส่งตัวกลับ" :close="closeModal" />
<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="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="personalId"
class="custom-header-table"
:visible-columns="visibleColumns2"
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-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="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
</div>
</q-td>
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
</div>
</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="saveOrder"
:disable="checkSelected"
color="public"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped lang="scss"></style>

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

@ -0,0 +1,508 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอียดการส่งตัวกลับ {{ fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
<q-space />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="router.push(`/registry/${personId}`)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-3 col-sm-2 col-md-1 row">
<q-img src="@/assets/avatar_user.jpg" />
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12 q-pl-md">
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
<div class="col-12 text-detail">
{{ positionTypeOld }}
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">ระดับ</div>
<div class="col-12 text-detail">
{{ positionLevelOld }}
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">สังกัด</div>
<div class="col-12 text-detail">
{{ organizationPositionOld }}
</div>
</div>
</div>
</div>
</div>
</q-card>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
</div>
<q-space />
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="conditionSave"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="edit = !edit"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<q-form ref="myForm">
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหน่งและหน่วยงานเดิม
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="salary"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
hide-bottom-space
:label="`${'เงินเดือน'}`"
type="number"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
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="date !== null ? date2Thai(date) : null"
: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>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
// import type {
// TypeFile,
// ResponseDataDetail,
// } from "@/modules/05_placement/interface/response/Transfer";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const personId = route.params.id as string;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
} = mixin;
const roleAdmin = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const name = ref<string>("นายสมคิด ยอดใจ");
const level = ref<string>("ชำนาญการพิเศษ");
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
const fullname = ref<string>("");
const id = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const date = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
// const responseData = ref<ResponseDataDetail>({
// createdAt: new Date(),
// date: new Date(),
// id: "",
// organization: "",
// organizationPositionOld: "",
// positionLevelOld: "",
// positionNumberOld: "",
// positionTypeOld: "",
// reason: "",
// salary: 0,
// status: "",
// });
// const rows = ref<TypeFile[]>([]);
// const columns = ref<QTableProps["columns"]>([
// {
// name: "no",
// align: "left",
// label: "ลำดับ",
// sortable: true,
// field: "no",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "fileName",
// align: "left",
// label: "ชื่อไฟล์",
// sortable: true,
// field: "fileName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "btnMicrosoft",
// align: "right",
// label: "ปุ่ม",
// sortable: true,
// field: "btnMicrosoft",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// ]);
const getData = async () => {
showLoader();
await http
.get(config.API.repatriationDetail(personId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
date.value = data.date;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
//
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success: any) => {
if (success) {
dialogMessage(
$q,
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
"mdi-help-circle-outline",
"ตกลง",
"public",
async () => await saveData(),
undefined
);
}
});
}
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
date: date.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.transferId(personId.toString()), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
// const confirmMessage = async () => {
// dialogMessage(
// $q,
// "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
// "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
// "mdi-help-circle-outline",
// "ยืนยัน",
// "primary",
// () => sendConfirm(),
// undefined
// );
// };
// const sendConfirm = async () => {
// showLoader();
// await http
// .get(config.API.transferConfirmId(personId.toString()))
// .then((res: any) => {
// // const data = res.data.result;
// // console.log(data);
// success($q, "ส่งคำร้องข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// await getData();
// hideLoader();
// });
// };
onMounted(async () => {
await getData();
});
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;
height: 70px;
}
.text-top {
color: gray;
font-weight: 400;
padding-bottom: 3px;
}
.text-detail {
font-weight: 500;
}
</style>

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

@ -0,0 +1,507 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอียดการช่วยราชการ {{ fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
<q-space />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="router.push(`/registry/${personId}`)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-3 col-sm-2 col-md-1 row">
<q-img src="@/assets/avatar_user.jpg" />
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12 q-pl-md">
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
<div class="col-12 text-detail">
{{ positionTypeOld }}
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">ระดับ</div>
<div class="col-12 text-detail">
{{ positionLevelOld }}
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<div class="col-12 text-top">สังกัด</div>
<div class="col-12 text-detail">
{{ organizationPositionOld }}
</div>
</div>
</div>
</div>
</div>
</q-card>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
</div>
<q-space />
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="conditionSave"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="edit = !edit"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<q-form ref="myForm">
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหน่งและหน่วยงานเดิม
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="salary"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
hide-bottom-space
:label="`${'เงินเดือน'}`"
type="number"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
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="date !== null ? date2Thai(date) : null"
: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>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
// import type {
// TypeFile,
// ResponseDataDetail,
// } from "@/modules/05_placement/interface/response/Transfer";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const edit = ref<boolean>(false);
const personId = route.params.id as string;
const {
date2Thai,
dialogMessage,
messageError,
showLoader,
hideLoader,
success,
} = mixin;
const roleAdmin = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const name = ref<string>("นายสมคิด ยอดใจ");
const level = ref<string>("ชำนาญการพิเศษ");
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
const fullname = ref<string>("");
const id = ref<string>("");
const prefix = ref<string>("");
const firstName = ref<string>("");
const lastName = ref<string>("");
const position = ref<string>("");
const posNo = ref<string>("");
const positionLevel = ref<string>("");
const createdAt = ref<string>("");
const organization = ref<string>("");
const reason = ref<string>("");
const status = ref<string>("");
const date = ref<Date | null>(null);
const salary = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const positionNumberOld = ref<string>("");
const organizationPositionOld = ref<string>("");
const isActive = ref<string>("");
// const responseData = ref<ResponseDataDetail>({
// createdAt: new Date(),
// date: new Date(),
// id: "",
// organization: "",
// organizationPositionOld: "",
// positionLevelOld: "",
// positionNumberOld: "",
// positionTypeOld: "",
// reason: "",
// salary: 0,
// status: "",
// });
// const rows = ref<TypeFile[]>([]);
// const columns = ref<QTableProps["columns"]>([
// {
// name: "no",
// align: "left",
// label: "ลำดับ",
// sortable: true,
// field: "no",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "fileName",
// align: "left",
// label: "ชื่อไฟล์",
// sortable: true,
// field: "fileName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "btnMicrosoft",
// align: "right",
// label: "ปุ่ม",
// sortable: true,
// field: "btnMicrosoft",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// ]);
const getData = async () => {
showLoader();
await http
.get(config.API.officerDetail(personId))
.then((res: any) => {
const data = res.data.result;
(fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
(id.value = data.id);
prefix.value = data.prefix;
firstName.value = data.firstName;
lastName.value = data.lastName;
position.value = data.position;
posNo.value = data.posNo;
positionLevel.value = data.positionLevel;
createdAt.value = data.createdAt;
organization.value = data.organization;
reason.value = data.reason;
status.value = data.status;
date.value = data.date;
salary.value = data.salary;
positionTypeOld.value = data.positionTypeOld;
positionLevelOld.value = data.positionLevelOld;
positionNumberOld.value = data.positionNumberOld;
organizationPositionOld.value = data.organizationPositionOld;
isActive.value = data.isActive;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
//
const conditionSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then((success: any) => {
if (success) {
dialogMessage(
$q,
"ต้องการแก้ไขข้อมูลหรือไม่?",
"แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
"mdi-help-circle-outline",
"ตกลง",
"public",
async () => await saveData(),
undefined
);
}
});
}
};
const saveData = async () => {
const body = {
organization: organization.value,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
date: date.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: salary.value,
};
showLoader();
await http
.put(config.API.transferId(personId.toString()), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
edit.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
// const confirmMessage = async () => {
// dialogMessage(
// $q,
// "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
// "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
// "mdi-help-circle-outline",
// "ยืนยัน",
// "primary",
// () => sendConfirm(),
// undefined
// );
// };
// const sendConfirm = async () => {
// showLoader();
// await http
// .get(config.API.transferConfirmId(personId.toString()))
// .then((res: any) => {
// // const data = res.data.result;
// // console.log(data);
// success($q, "ส่งคำร้องข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// await getData();
// hideLoader();
// });
// };
onMounted(async () => {
await getData();
});
</script>
<style lang="scss" scope>
.q-img {
border-radius: 5px;
height: 70px;
}
.text-top {
color: gray;
font-weight: 400;
padding-bottom: 3px;
}
.text-detail {
font-weight: 500;
}
</style>

610
src/modules/05_placement/components/helpgovernment/mainHelp.vue Normal file
View file

@ -0,0 +1,610 @@
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import type { QTableProps } from "quasar";
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";
const transferStore = useTransferDataStore();
const { statusText } = transferStore;
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import type { officerType } from "@/modules/05_placement/interface/response/officer";
const selected = ref<officerType[]>([]);
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
dialogMessage,
} = mixin;
const modal = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statusText",
"btn",
]);
const visibleColumns2 = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statusText",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
};
// const nextPage = (id:string) => {
// router.push("/retirement/resign/"+id);
// };
const rows = ref<officerType[]>([]);
const rows2 = ref<any>([
{
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
},
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
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",
},
{
name: "btn",
align: "left",
label: "",
sortable: true,
field: "btn",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
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",
},
]);
//--------------(ปุ่มลบ)----------------//
const openDetail = (id:string) => {
router.push(`/help-government/detail/${id}`)
}
const openModal = () => (modal.value = true);
const closeModal = () => (modal.value = false);
const openModalOrder = () => {
openModal();
const row = rows.value.filter(
(item: officerType) =>
item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
);
rows2.value = row;
};
const getData = async () => {
showLoader();
await http
.get(config.API.officerMain())
.then((res: any) => {
const data = res.data.result;
console.log("data==>", data);
rows.value = data.map((item: officerType) => ({
id: item.id,
fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
position: item.position,
posNo: item.posNo,
positionLevel: item.positionLevel,
createdAt: date2Thai(item.createdAt),
organization: item.organization,
reason: item.reason,
status: item.status,
statusText:statusText(item.status),
date: item.date,
salary: item.salary,
positionTypeOld: item.positionTypeOld,
positionLevelOld: item.positionLevelOld,
positionNumberOld: item.positionNumberOld,
organizationPositionOld: item.organizationPositionOld,
isActive: item.isActive,
})
);
console.log(rows.value )
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const saveOrder = async () => {
const id = selected.value.map((item) => item.id);
const body = {
id,
};
showLoader();
await http
.post(config.API.officerMainReport(), body)
.then((res: any) => {
// const data = res.data.result;
// console.log(data);
success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
closeModal();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
hideLoader();
});
};
const deleteData = async (id:string) => {
await http
.delete(config.API.officerMainDelete(id))
.then((res)=>{
success($q, "ลบข้อมูลสำเร็จ");
console.log(res)
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
});
}
const clickDelete = async (name:string,id:string) => {
dialogMessage(
$q,
`ลบข้อมูลของ ${name}`,
`ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
"delete",
"ยืนยัน",
"red",
async () => await deleteData(id)
,
async () => await getData()
);
};
onMounted(async () => {
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">รายการช่วยราชการ</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
@click="openModalOrder"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
</q-btn>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="openDetail(props.row.id)">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props" @click="openDetail(props.row.id)">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
</div>
</q-td>
<q-td key="organization" :props="props" @click="openDetail(props.row.id)">
<div class="table_ellipsis">
{{ props.row.organization }}
</div>
</q-td>
<q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
{{ props.row.statusText }}
</q-td>
<q-td auto-width>
<q-btn
icon="delete"
size="14px"
color="red-7"
flat
round
dense
@click="clickDelete(props.row.fullname,props.row.id)"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
<q-dialog v-model="modal">
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
<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="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="personalId"
class="custom-header-table"
:visible-columns="visibleColumns2"
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-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="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
</div>
</q-td>
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
</div>
</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="saveOrder"
:disable="checkSelected"
color="public"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped lang="scss"></style>

173
src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
View file

@ -1,12 +1,40 @@
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { ref, defineAsyncComponent, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const mixin = useCounterMixin();
const {
date2Thai,
notifyError,
messageError,
showLoader,
hideLoader,
success,
dateToISO,
} = mixin;
const route = useRoute();
const assignId = ref<string>(route.params.form.toString());
const person = ref<any>([]);
const assign = ref<any>([]);
const evaluate_no = ref<string>("");
const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const commander = ref<any>([]);
const round = ref<any>();
const status = ref<boolean>(true);
const props = defineProps({
tab: String,
});
const list2_1 = [
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@ -53,14 +81,104 @@ const list2_3 = [
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
},
];
onMounted(async () => {
fecthAssign(assignId.value);
if (props.tab !== undefined) {
round.value = props.tab.charAt(4);
fetchEvaluate(assignId.value, round.value);
}
// console.log(round.value);
// console.log(assignId.value);
});
const fecthAssign = async (id: string) => {
showLoader();
await http
.get(config.API.evaluateCreate(id))
.then((res: any) => {
// console.log(res);
person.value = res.data.data.person;
assign.value = res.data.data.assign;
commander.value = res.data.data.commander;
option.value.push(commander.value);
Autherise.value = commander.value.name;
evaluate_no.value = res.data.data.evaluate_no;
start_date.value = res.data.data.start_date;
date_finish.value = res.data.data.end_date;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchEvaluate = async (id: string, round: string) => {
// showLoader();
await http
.get(config.API.evaluatecommader(id, round))
.then((res: any) => {
// console.log(res);
let data = res.data.data.evaluate;
console.log(data);
start_date.value = data.date_start;
date_finish.value = data.date_finish;
knowledge_level.value = data.knowledge_level;
skill_level.value = data.skill_level;
competency_level.value = data.competency_level;
learn_level.value = data.learn_level;
apply_level.value = data.apply_level;
success_level.value = data.success_level;
achievement_other.value.text = data.achievement_other_desc;
achievement_other.value.level = data.achievement_other_level;
conduct_level.value[0] = data.conduct1_level;
conduct_level.value[1] = data.conduct2_level;
conduct_level.value[2] = data.conduct3_level;
conduct_level.value[3] = data.conduct4_level;
moral_level.value[0] = data.moral1_level;
moral_level.value[1] = data.moral2_level;
moral_level.value[2] = data.moral3_level;
discipline_level.value[0] = data.discipline1_level;
discipline_level.value[1] = data.discipline2_level;
discipline_level.value[2] = data.discipline3_level;
discipline_level.value[3] = data.discipline4_level;
discipline_level.value[4] = data.discipline5_level;
behavio_orther.value.text = data.behavior_other_desc;
behavio_orther.value.level = data.behavior_other_level;
behavio_strength_desc.value = data.behavior_strength_desc;
behavior_improve_desc.value = data.behavior_improve_desc;
orientation.value = data.orientation.toString();
self_learning.value = data.self_learning.toString();
training_seminar.value = data.training_seminar.toString();
other_training.value = data.other_training.toString();
if (
data.achievement_other_desc !== "" &&
data.achievement_other_level !== null
) {
etc.value = true;
}
if (
data.behavior_other_desc !== "" &&
data.behavior_other_level !== null
) {
etc2.value = true;
}
status.value = false;
})
.catch((e) => {
messageError($q, e);
console.log(e);
})
.finally(() => {
// hideLoader();
});
};
const mixin = useCounterMixin();
const { date2Thai, notifyError } = mixin;
const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);
// const dateToday = ref<Date>(new Date("10-10-2023"));
// const dateEnd = ref<Date>(new Date("12-10-2023"));
// const period = ref<number>(1);
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>([]);
// part 1
const knowledge_level = ref<number>(0);
@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
const behavio_strength_desc = ref<string>("");
const behavior_improve_desc = ref<string>("");
// part 3
const orientation = ref<num>(null);
const orientation = ref<any>(null);
const self_learning = ref<any>(null);
const training_seminar = ref<any>(null);
const other_training = ref<any>(null);
@ -136,6 +254,9 @@ const savaForm = () => {
};
const putformData = () => {
const data = {
evaluate_no: evaluate_no.value,
start_date: start_date.value,
date_finish: date_finish.value,
knowledge_level: knowledge_level.value,
skill_level: skill_level.value,
competency_level: competency_level.value,
@ -155,13 +276,14 @@ const putformData = () => {
discipline3_level: discipline_level.value[2],
discipline4_level: discipline_level.value[3],
discipline5_level: discipline_level.value[4],
behavio_orther: behavio_orther.value,
behavio_strength_desc: behavio_strength_desc.value,
behavior_orther: behavio_orther.value,
behavior_strength_desc: behavio_strength_desc.value,
behavior_improve_desc: behavior_improve_desc.value,
orientation: Number(orientation.value),
self_learning: Number(self_learning.value),
training_seminar: Number(training_seminar.value),
other_training: Number(other_training.value),
commander_dated: dateToISO(dateAutherise.value),
};
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
@ -174,6 +296,15 @@ const putformData = () => {
})
.onOk(async () => {
console.log("บันทึกข้อมูล", data);
await http
.post(config.API.createformCommader(assignId.value), data)
.then((res: any) => {
console.log(res);
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
});
})
.onCancel(() => {})
.onDismiss(() => {});
@ -182,21 +313,28 @@ const putformData = () => {
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="toptitle text-dark col-12 row items-center">
<div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_start)
}}</span>
ถึงวันที
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_finish)
}}</span>
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
ระหว่างวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
ถึงวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />
@ -891,9 +1029,7 @@ const putformData = () => {
<!-- Footer -->
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
ผู้บังคับบัญชา
</div>
<div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
@ -902,6 +1038,7 @@ const putformData = () => {
outlined
:options="option"
label="ผู้บังคับบัญชา"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -948,7 +1085,7 @@ const putformData = () => {
<!-- <Footer /> -->
<q-toolbar class="text-primary">
<q-space />
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
</q-toolbar>
</div>
</template>

305
src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
View file

@ -1,12 +1,133 @@
<script setup lang="ts">
import { ref, defineAsyncComponent, computed } from "vue";
import { ref, defineAsyncComponent, computed, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const mixin = useCounterMixin();
const {
date2Thai,
notifyError,
messageError,
showLoader,
hideLoader,
dateToISO,
success,
} = mixin;
const route = useRoute();
const assignId = ref<string>(route.params.form.toString());
// const person = ref<any>([]);
const assign = ref<any>([]);
const evaluate_no = ref<string>("");
const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const status = ref<boolean>(true);
const chairman = ref<any>([]);
const commander = ref<any>([]);
const mentors = ref<any>([{ name: "" }, { name: "" }]);
const round = ref<any>();
const props = defineProps({
tab: String,
});
onMounted(() => {
console.log(props);
console.log(assignId.value);
fecthAssign(assignId.value);
if (props.tab !== undefined) {
round.value = props.tab.charAt(4);
fetchEvaluate(assignId.value, round.value);
}
});
const fecthAssign = async (id: string) => {
showLoader();
await http
.get(config.API.evaluateChairman(id))
.then((res: any) => {
console.log(res);
assign.value = res.data.data.assign;
evaluate_no.value = res.data.data.evaluate_no;
start_date.value = res.data.data.start_date;
date_finish.value = res.data.data.end_date;
chairman.value = res.data.data.chairman;
commander.value = res.data.data.commander;
mentors.value = res.data.data.mentors;
console.log(mentors.value[0].name);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchEvaluate = async (id: string, round: string) => {
showLoader();
await http
.get(config.API.evaluateRoundChairman(id, round))
.then((res: any) => {
let data = res.data.data.evaluate;
console.log(data);
start_date.value = data.date_start;
date_finish.value = data.date_finish;
learn_level.value = data.knowledge_level;
apply_level.value = data.apply_level;
success_level.value = data.success_level;
achievement_other.value.text = data.achievement_other_desc;
achievement_other.value.level = data.achievement_other_level;
conduct_level.value[0] = data.conduct1_level;
conduct_level.value[1] = data.conduct2_level;
conduct_level.value[2] = data.conduct3_level;
conduct_level.value[3] = data.conduct4_level;
moral_level.value[0] = data.moral1_level;
moral_level.value[1] = data.moral2_level;
moral_level.value[2] = data.moral3_level;
discipline_level.value[0] = data.discipline1_level;
discipline_level.value[1] = data.discipline2_level;
discipline_level.value[2] = data.discipline3_level;
discipline_level.value[3] = data.discipline4_level;
discipline_level.value[4] = data.discipline5_level;
behavio_orther.value.text = data.behavior_other_desc;
behavio_orther.value.level = data.behavior_other_level;
orientation.value = data.develop_orientation_score;
self_learning.value = data.develop_self_learning_score;
training_seminar.value = data.develop_training_seminar_score;
other_training.value = data.develop_other_training_score;
orientation_percent.value = data.develop_orientation_percent;
self_learning_percent.value = data.develop_self_learning_percent;
training_seminar_percent.value = data.develop_training_seminar_percent;
other_training_percent.value = data.develop_other_training_percent;
if (
data.achievement_other_desc !== "" &&
data.achievement_other_level !== null
) {
etc.value = true;
}
if (
data.behavior_other_desc !== "" &&
data.behavior_other_level !== null
) {
etc2.value = true;
}
status.value = false;
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
const list2_1 = [
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@ -54,8 +175,6 @@ const list2_3 = [
},
];
const mixin = useCounterMixin();
const { date2Thai, notifyError } = mixin;
const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);
@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
const behavio_orther = ref<any>({ text: "", level: 0 });
// part 3
const orientation = ref<number>(null);
const self_learning = ref<number>(null);
const training_seminar = ref<number>(null);
const other_training = ref<number>(null);
const orientation = ref<number>(0);
const self_learning = ref<number>(0);
const training_seminar = ref<number>(0);
const other_training = ref<number>(0);
const orientation_percent = ref<number>(0);
const self_learning_percent = ref<number>(0);
const training_seminar_percent = ref<number>(0);
const other_training_percent = ref<number>(0);
const develop_result = ref<any>();
const develop_result_option = ref<any>([
{ name: "ไม่ผ่านการทดลองงาน", value: 0 },
{ name: "ผ่านการทดลองงาน", value: 1 },
]);
// footer
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
// const option = ref<any>([]);
// score
const score1 = computed(() => {
@ -98,6 +226,22 @@ const score1 = computed(() => {
}
return learn_level.value + apply_level.value + success_level.value;
});
const achievement_score_total: any = computed(() => {
if (
etc.value === true &&
achievement_other.value.text !== undefined &&
achievement_other.value.level !== undefined
) {
return 20;
}
return 15;
});
const achievement_result: any = computed(() => {
if (percent_score1.value > 60) {
return 1;
}
return 0;
});
const score2 = computed(() => {
let sum_conduct = conduct_level.value.reduce(
(sum: number, level: number) => sum + level,
@ -121,7 +265,22 @@ const score2 = computed(() => {
);
} else return sum_conduct + sum_moral + sum_discipline;
});
const percent_score1: number = computed(() => {
const behavior_score_total: any = computed(() => {
if (
etc2.value === true &&
behavio_orther.value.text !== undefined &&
behavio_orther.value.level !== undefined
) {
return 65;
} else return 60;
});
const behavior_result: any = computed(() => {
if (percent_score2.value > 60) {
return 1;
}
return 0;
});
const percent_score1: any = computed(() => {
let num = 0;
if (etc.value === true) {
num = 20;
@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
let percent1 = (score1.value / num) * 100;
return percent1.toFixed(2);
});
const percent_score2: number = computed(() => {
const percent_score2: any = computed(() => {
let num = 0;
if (etc2.value === true) {
num = 65;
@ -149,6 +308,14 @@ const score4 = computed(() => {
Number(other_training.value)
);
});
const score5 = computed(() => {
return (
Number(orientation_percent.value) +
Number(self_learning_percent.value) +
Number(training_seminar_percent.value) +
Number(other_training_percent.value)
);
});
const savaForm = () => {
let hasError = false;
@ -185,7 +352,10 @@ const savaForm = () => {
};
const putformData = () => {
const data = {
learn_level: learn_level.value,
evaluate_no: evaluate_no.value,
start_date: start_date.value,
date_finish: date_finish.value,
knowledge_level: learn_level.value,
apply_level: apply_level.value,
success_level: success_level.value,
achievement_other: achievement_other.value,
@ -201,13 +371,27 @@ const putformData = () => {
discipline3_level: discipline_level.value[2],
discipline4_level: discipline_level.value[3],
discipline5_level: discipline_level.value[4],
behavio_orther: behavio_orther.value,
orientation: Number(orientation.value),
self_learning: Number(self_learning.value),
training_seminar: Number(training_seminar.value),
other_training: Number(other_training.value),
total_experiment: Number(score1.value),
total_behavior: Number(score2.value),
behavior_orther: behavio_orther.value,
develop_orientation_score: Number(orientation.value),
develop_self_learning_score: Number(self_learning.value),
develop_training_seminar_score: Number(training_seminar.value),
develop_other_training_score: Number(other_training.value),
develop_orientation_percent: Number(orientation_percent.value),
develop_self_learning_percent: Number(self_learning_percent.value),
develop_training_seminar_percent: Number(training_seminar_percent.value),
develop_other_training_percent: Number(other_training_percent.value),
achievement_score: Number(score1.value),
achievement_percent: Number(percent_score1.value),
achievement_score_total: Number(achievement_score_total.value),
achievement_result: Number(achievement_result.value),
behavior_score: Number(score2.value),
behavior_percent: Number(percent_score2.value),
behavior_score_total: Number(behavior_score_total.value),
behavior_result: Number(behavior_result.value),
sum_score: Number(score1.value) + Number(score2.value),
sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
chairman_dated: dateToISO(dateAutherise.value),
develop_result: develop_result.value,
};
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
@ -220,6 +404,19 @@ const putformData = () => {
})
.onOk(async () => {
console.log("บันทึกข้อมูล", data);
await http
.post(config.API.createformChairman(assignId.value), data)
.then((res: any) => {
console.log(res);
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
fetchEvaluate(assignId.value, round.value);
});
})
.onCancel(() => {})
.onDismiss(() => {});
@ -228,21 +425,28 @@ const putformData = () => {
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="toptitle text-dark col-12 row items-center">
<div>แบบประเมินผล (คณะกรรมการ)</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_start)
}}</span>
ถึงวันที
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_finish)
}}</span>
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
ระหว่างวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
ถึงวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />
@ -829,7 +1033,7 @@ const putformData = () => {
<q-input dense type="number" v-model="orientation" />
</div>
<div class="col">
<q-input dense type="number" v-model="text" />
<q-input dense type="number" v-model="orientation_percent" />
</div>
</div>
<q-separator class="q-my-xs" />
@ -839,7 +1043,7 @@ const putformData = () => {
<q-input dense type="number" v-model="self_learning" />
</div>
<div class="col">
<q-input dense type="number" v-model="text" />
<q-input dense type="number" v-model="self_learning_percent" />
</div>
</div>
<q-separator class="q-my-xs" />
@ -849,7 +1053,7 @@ const putformData = () => {
<q-input dense type="number" v-model="training_seminar" />
</div>
<div class="col">
<q-input dense type="number" v-model="text" />
<q-input dense type="number" v-model="training_seminar_percent" />
</div>
</div>
<q-separator class="q-my-xs" />
@ -861,7 +1065,7 @@ const putformData = () => {
<q-input dense type="number" v-model="other_training" />
</div>
<div class="col">
<q-input dense type="number" v-model="text" />
<q-input dense type="number" v-model="other_training_percent" />
</div>
</div>
<!-- <q-list dense>
@ -969,13 +1173,36 @@ const putformData = () => {
<div class="row q-gutter-md">
<div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
<div class="col">{{ score4 }}</div>
<div class="col">ร้อยละ</div>
<div class="col">{{ score5 }}</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row justify-center">
<div class="col-12 text-top0 items-center">
<!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
</div>
<div class="col-12">
<q-select
class="col-xs-12"
dense
v-model="develop_result"
outlined
:options="develop_result_option"
option-label="name"
option-value="value"
label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
map-options
emit-value
/>
</div>
</div>
</div>
<!-- Footer -->
<!-- <Footer /> -->
<div class="row col-12 q-gutter-lg no-margin">
@ -987,10 +1214,10 @@ const putformData = () => {
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
v-model="commander.name"
outlined
:options="option"
label="ผู้บังคับบัญชา"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -1036,10 +1263,10 @@ const putformData = () => {
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
v-model="mentors[0].name"
outlined
:options="option"
label="ผู้บังคับบัญชา"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -1085,10 +1312,10 @@ const putformData = () => {
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
v-model="mentors[1].name"
outlined
:options="option"
label="ผู้บังคับบัญชา"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -1135,17 +1362,15 @@ const putformData = () => {
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
คณะกรรมการ
</div>
<div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
v-model="chairman.name"
outlined
:options="option"
label="คณะกรรมการ"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -1192,7 +1417,7 @@ const putformData = () => {
<q-toolbar class="text-primary">
<q-space />
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
</q-toolbar>
</div>
</template>

388
src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
View file

@ -1,31 +1,107 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const myForm = ref<QForm>();
const edit = ref<boolean>(false);
const mixin = useCounterMixin();
const { date2Thai, notifyError } = mixin;
const {
date2Thai,
notifyError,
messageError,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const assignId = ref<string>(route.params.form.toString());
const assign = ref<any>([]);
const mentors = ref<any>([]);
const commander = ref<any>([]);
const status = ref<boolean>(true);
const evaluate = ref<any>([]);
onMounted(() => {
fecthAssign(assignId.value);
fecthResult(assignId.value);
});
const fecthAssign = async (id: string) => {
showLoader();
await http
.get(config.API.evaluateReportcreate(id))
.then((res) => {
console.log(res);
assign.value = res.data.data.assign;
mentors.value = res.data.data.mentors;
date_start.value = assign.value.date_start;
date_finish.value = assign.value.date_finish;
director_id.value = res.data.data.commander.name;
director_id2.value = mentors.value[0].name;
director_id3.value = mentors.value[1].name;
commander.value.push(res.data.data.commander);
optionDirector.value = mentors.value;
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const date_start = ref<Date>(new Date());
const date_finish = ref<Date>();
const develop = ref<number>();
const result = ref<number>();
const reson = ref<string>("");
const chairman_dated = ref<string>("");
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const fecthResult = async (id: string) => {
await http
.get(config.API.evaluateReport(id))
.then((res: any) => {
let data = res.data.data.evaluate;
console.log(data);
date_start.value = data.date_start;
date_finish.value = data.date_finish;
develop.value = Number(data.develop_complete);
result.value = Number(data.pass_result);
reson.value = data.reson;
chairman_dated.value = data.chairman_dated;
director1_dated.value = data.director1_dated;
director2_dated.value = data.director2_dated;
status.value = false;
})
.catch((e) => {
console.log(e);
});
};
// part new
const date_start = ref<Date>(new Date("10-10-2023"));
const date_finish = ref<Date>();
const reson = ref<string>("");
const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
const options = [
{ value: 1, label: "พัฒนาครบ 3 ส่วน" },
{ value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
];
const optionsResult = [
{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
{ value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
];
const director_id = ref<any>(null);
const director_dated = ref<any>();
const director_id2 = ref<any>(null);
const director_dated2 = ref<any>();
const director_id3 = ref<any>(null);
const director_dated3 = ref<any>();
const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const optionDirector = ref<any>([]);
const savaForm = async () => {
await myForm.value!.validate().then((result: boolean) => {
@ -41,40 +117,56 @@ const savaForm = async () => {
})
.onOk(async () => {
postData();
})
.onCancel(() => { })
.onDismiss(() => { });
.onCancel(() => {})
.onDismiss(() => {});
}
});
};
const postData = async () => {
const data = await {
date_start: date_start.value,
start_date: date_start.value,
date_finish: date_finish.value,
director_id: director_id.value,
director_dated: director_dated.value,
director_id2: director_id2.value,
director_dated2: director_dated2.value,
director_id3: director_id3.value,
director_dated3: director_dated3.value,
}
develop_complete: develop.value,
pass_result: result.value,
reson: reson.value,
chairman_dated: chairman_dated.value,
director1_dated: director1_dated.value,
director2_dated: director2_dated.value,
};
console.log("postData===>", data)
console.log("postData===>", data);
await http
.post(config.API.createformReport(assignId.value), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
});
};
</script>
<template>
<div class="row col-12 q-mr-md">
<q-form ref="myForm">
<div class="toptitle text-dark col-12 row items-center">
<div>แบบรายงานการประเมินฯ</div>
</div>
<div class="row col-12">
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-6">
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="date_start"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -82,12 +174,22 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
" :label="`${'ระหว่างวันที่'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่'}`,
]">
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
date_start != null ? date2Thai(date_start) : null
"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -95,8 +197,15 @@ const postData = async () => {
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -104,12 +213,22 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
" :label="`${'ถึงวันที่'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่'}`,
]">
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -121,24 +240,63 @@ const postData = async () => {
<div class="col-12 row q-mt-xs">
<div class="col-xs-12 col-sm-6">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
:options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
<q-select
:rules="[
(val) =>
!!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="options"
class="col-xs-12 col-sm-6"
dense
borderless
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="develop"
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
/>
</div>
</div>
<div class="col-12 row q-mt-lg">
<div class="col-xs-12 col-sm-6">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
:options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
<q-select
:rules="[
(val) =>
!!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="optionsResult"
class="col-xs-12 col-sm-6"
dense
borderless
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="result"
label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
/>
</div>
</div>
<div class="col-12 row q-mt-lg">
<div class="col-12">
<q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
<q-input
hide-bottom-space
:readonly="edit"
dense
borderless
:outlined="!edit"
class="bg-white"
type="textarea"
v-model="reson"
label="เหตุผล"
:rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
/>
</div>
</div>
@ -152,11 +310,26 @@ const postData = async () => {
ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
</div>
<div class="col-12 row q-col-gutter-md">
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
label="" />
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id"
outlined
:options="commander"
label=""
option-label="name"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="chairman_dated"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -164,10 +337,22 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<q-input
outlined
dense
class="full-width datepicker col-3"
:model-value="
chairman_dated != null ? date2Thai(chairman_dated) : null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -182,11 +367,25 @@ const postData = async () => {
ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
</div>
<div class="col-12 row q-col-gutter-md">
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
label="" />
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id2"
outlined
:options="optionDirector"
label=""
option-label="name"
/>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="director1_dated"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -194,10 +393,24 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<q-input
outlined
dense
class="full-width datepicker col-3"
:model-value="
director1_dated != null
? date2Thai(director1_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -212,11 +425,25 @@ const postData = async () => {
ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
</div>
<div class="col-12 row q-col-gutter-md">
<q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
label="" />
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="director_id3"
outlined
:options="optionDirector"
label=""
option-label="name"
/>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="director2_dated"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -224,10 +451,24 @@ const postData = async () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
<q-input
outlined
dense
class="full-width datepicker col-3"
:model-value="
director2_dated != null
? date2Thai(director2_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -240,7 +481,12 @@ const postData = async () => {
<q-toolbar class="text-primary">
<q-space />
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
<q-btn
label="บันทึก"
color="secondary"
@click="savaForm"
v-if="status"
/>
</q-toolbar>
</q-form>
</div>
@ -266,4 +512,4 @@ const postData = async () => {
.q-card {
box-shadow: 0px 0px 0px 0px !important;
}
</style>
</style>

181
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
View file

@ -1,14 +1,127 @@
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { formatDate } from "@fullcalendar/core";
// import { formatDate } from "@fullcalendar/core";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const route = useRoute();
const probationStore = useProbationDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
success,
notifyError,
dateToISO,
messageError,
showLoader,
hideLoader,
} = mixin;
const { ratingColors } = probationStore;
const assignId = ref<string>(route.params.form.toString());
const person = ref<any>([]);
const assign = ref<any>([]);
const evaluate_no = ref<string>("");
const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const status = ref<boolean>(true);
const round = ref<any>();
const props = defineProps({
tab: String,
});
onMounted(async () => {
console.log(props.tab);
await fecthFormdata(assignId.value);
if (props.tab !== undefined) {
round.value = props.tab.charAt(4);
await fecthFormRound(assignId.value, round.value);
}
});
const fecthFormdata = async (id: string) => {
await http
.get(config.API.formevaluateRecord(id))
.then((res: any) => {
// console.log(res);
evaluate_no.value = res.data.data.evaluate_no;
start_date.value = res.data.data.start_date;
date_finish.value = res.data.data.end_date;
person.value = res.data.data.person;
assign.value = res.data.data.assign;
option.value.push(res.data.data.director);
Autherise.value = res.data.data.director.name;
})
.catch((e: any) => {
console.log(e);
});
};
const fecthFormRound = async (id: string, no: string) => {
showLoader();
await http
.get(config.API.formevaluateround(id, no))
.then((res: any) => {
console.log(res);
let data = res.data.data.evaluate;
start_date.value = data.date_start;
date_finish.value = data.date_finish;
knowledge_level.value = data.knowledge_level;
skill_level.value = data.skill_level;
competency_level.value = data.competency_level;
learn_level.value = data.learn_level;
apply_level.value = data.apply_level;
achievement_other.value.text = data.achievement_other_desc;
achievement_other.value.level = data.achievement_other_level;
achievement_strength_desc.value = data.achievement_strength_desc;
achievement_improve_desc.value = data.achievement_improve_desc;
conduct_level.value[0] = data.conduct1_level;
conduct_level.value[1] = data.conduct2_level;
conduct_level.value[2] = data.conduct3_level;
conduct_level.value[3] = data.conduct4_level;
moral_level.value[0] = data.moral1_level;
moral_level.value[1] = data.moral2_level;
moral_level.value[2] = data.moral3_level;
discipline_level.value[0] = data.discipline1_level;
discipline_level.value[1] = data.discipline2_level;
discipline_level.value[2] = data.discipline3_level;
discipline_level.value[3] = data.discipline4_level;
discipline_level.value[4] = data.discipline5_level;
behavio_orther.value.text = data.behavior_other_desc;
behavio_orther.value.level = data.behavior_other_level;
behavior_strength_desc.value = data.behavior_strength_desc;
behavior_improve_desc.value = data.behavior_improve_desc;
orientation.value = data.orientation.toString();
self_learning.value = data.self_learning.toString();
training_seminar.value = data.training_seminar.toString();
other_training.value = data.other_training.toString();
if (
data.achievement_other_desc !== "" &&
data.achievement_other_level !== null
) {
etc.value = true;
}
if (
data.behavior_other_desc !== "" &&
data.behavior_other_level !== null
) {
etc2.value = true;
}
status.value = false;
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
const list1_1 = [
{ id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
@ -69,10 +182,8 @@ const list2_3 = [
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
},
];
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const option = ref<any>([]);
const mixin = useCounterMixin();
const { date2Thai, success, notifyError } = mixin;
const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);
@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
const behavio_orther = ref<any>({ text: "", level: 0 });
// const etc_text2 = ref<string>("");
// const ext_value2 = ref<number>(0);
const behavio_strength_desc = ref<string>("");
const behavior_strength_desc = ref<string>("");
const behavior_improve_desc = ref<string>("");
// part 3
const orientation = ref<nu>(null);
const orientation = ref<any>(null);
const self_learning = ref<any>(null);
const training_seminar = ref<any>(null);
const other_training = ref<any>(null);
@ -166,13 +277,13 @@ const savaForm = () => {
competency_level.value === 0 ||
learn_level.value === 0 ||
apply_level.value === 0 ||
success_level.value === 0 ||
// success_level.value === 0 ||
achievement_strength_desc.value === "" ||
achievement_improve_desc.value === "" ||
conduct_level.value.length < 4 ||
moral_level.value.length < 3 ||
discipline_level.value.length < 5 ||
behavio_strength_desc.value === "" ||
behavior_strength_desc.value === "" ||
behavior_improve_desc.value === "" ||
orientation.value === null ||
self_learning.value === null ||
@ -200,6 +311,9 @@ const savaForm = () => {
};
const putformData = () => {
const data = {
evaluate_no: evaluate_no.value,
start_date: start_date.value,
date_finish: date_finish.value,
evaluate_expenct_level: evaluate_expenct_level.value,
evaluate_ouptut: evaluate_ouptut.value,
knowledge_level: knowledge_level.value,
@ -207,7 +321,7 @@ const putformData = () => {
competency_level: competency_level.value,
learn_level: learn_level.value,
apply_level: apply_level.value,
success_level: success_level.value,
// success_level: success_level.value,
achievement_other: achievement_other.value,
// achievement_other_desc: etc_text.value,
// achievement_other_level: ext_value.value,
@ -228,13 +342,13 @@ const putformData = () => {
// behavio_orther_desc: etc_text2.value,
// behavio_orther_level: ext_value2.value,
behavio_orther: behavio_orther.value,
behavio_strength_desc: behavio_strength_desc.value,
behavior_strength_desc: behavior_strength_desc.value,
behavior_improve_desc: behavior_improve_desc.value,
orientation: Number(orientation.value),
self_learning: Number(self_learning.value),
training_seminar: Number(training_seminar.value),
other_training: Number(other_training.value),
assessor_dated: dateToISO(dateAutherise.value),
// commander_dated: dateAutherise.value,
};
$q.dialog({
@ -248,29 +362,48 @@ const putformData = () => {
})
.onOk(async () => {
console.log("บันทึกข้อมูล", data);
saveformdata(data);
})
.onCancel(() => {})
.onDismiss(() => {});
};
const saveformdata = async (data: any) => {
await http
.post(config.API.createformevaluate(assignId.value), data)
.then((res: any) => {
console.log(res);
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
});
};
</script>
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="toptitle text-dark col-12 row items-center">
<div>แบบบันทึกผล</div>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_start)
}}</span>
ถึงวันที
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{
date2Thai(assign.date_finish)
}}</span>
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
ระหว่างวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
ถึงวันที่
<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
<span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />
@ -590,7 +723,7 @@ const putformData = () => {
</q-list>
</q-card>
<q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
<!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
@ -627,7 +760,7 @@ const putformData = () => {
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-card> -->
<q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
<q-list dense>
@ -635,7 +768,7 @@ const putformData = () => {
<q-item-section>
<q-item-label>
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.8 อื่นๆ
1.7 อื่นๆ
<q-checkbox
class="q-ml-sm"
dense
@ -965,7 +1098,7 @@ const putformData = () => {
<q-input
outlined
dense
v-model="behavio_strength_desc"
v-model="behavior_strength_desc"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
@ -1129,6 +1262,8 @@ const putformData = () => {
outlined
:options="option"
label="ผู้บังคับบัญชา"
option-label="name"
disable
/>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -1174,7 +1309,7 @@ const putformData = () => {
</div>
<q-toolbar class="text-primary">
<q-space />
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
<q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
</q-toolbar>
</div>
</template>

1306
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue Normal file
View file

File diff suppressed because it is too large Load diff

41
src/modules/05_placement/components/probation/FormEvaluation/Header.vue
View file

@ -1,23 +1,43 @@
<script setup lang="ts">
import { ref, watch } from "vue";
const tabHead = ref<string>("save1");
import { ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const tabHead = ref<string>("save1");
const props = defineProps({
changeTab: {
type: Function,
default() {
return 'Default function'
}
}
})
return "Default function";
},
},
activeTab: String,
});
onMounted(() => {
console.log(props);
});
watch(tabHead, () => {
props.changeTab(tabHead.value)
console.log(props);
props.changeTab(tabHead.value);
});
const nextPage = () => {
if (props.activeTab) {
router.push(
"/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
);
}
// const url =
// "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
// window.open(url, "_blank");
};
</script>
<template>
<q-header class="bg-grey-1">
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
@ -103,7 +123,7 @@ watch(tabHead, () => {
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
<q-tooltip> เพิ่ม </q-tooltip>
</q-btn>
</div>
@ -111,5 +131,4 @@ watch(tabHead, () => {
<q-separator />
</div>
</q-header>
</template>
</template>

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

@ -1,31 +1,152 @@
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, success } = mixin;
const assignId = ref<string>(route.params.form.toString());
const evaluate = ref<any>([]);
const tabHead = ref<string>("save1");
const tabs = ref<any>([]);
const tab = ref<string>("save1");
const activeTab = ref<string>("tab2");
const props = defineProps({
activeTab: String,
});
onMounted(() => {
console.log(props.activeTab);
// fecthAssign(assignId.value);
});
watch(props, () => {
console.log(props);
});
// const fecthAssign = async (id: string) => {
// showLoader();
// await http
// .get(config.API.formevaluate(id))
// .then((res: any) => {
// evaluate.value = res.data.data.evaluate;
// tabs.value = evaluate.value;
// console.log(tabs.value);
// })
// .catch((e: any) => {
// console.log(e);
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
// };
const changeTab = (tabVal: string) => {
tab.value = tabVal
}
console.log(tabVal);
tab.value = tabVal;
};
const nextPage = () => {
const newTabLabel = tabs.value.length + 1;
tabs.value.push({ no: newTabLabel });
};
const Header = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
)
);
const FormSaveResult = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
)
</script>
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
)
);
</script>
<template>
<Header :change-tab="changeTab" />
<Header :change-tab="changeTab" :activeTab="activeTab" />
<!-- <q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-xs-md items-center">
<q-tabs
dense
v-model="tabHead"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab
v-for="tabData in tabs"
:key="tabData.no"
:name="tabData.no"
:label="'ครั้งที่' + tabData.no"
@click="changeTab('save' + tabData.no)"
>
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tabHead !== tabData.no"
:color="tabHead !== tabData.no ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<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>
<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>
</q-tab>
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
<q-tooltip> เพิ่ม </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header> -->
<!-- <q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel
v-for="tabName in tabs"
:key="tabName"
:name="'save' + tabName.no"
>
<FormSaveResult :tab="tab" />
</q-tab-panel>
</q-tab-panels>
</q-page-container> -->
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<FormSaveResult />
<FormSaveResult :tab="tab" />
</q-tab-panel>
<q-tab-panel name="save2">
<FormSaveResult />
<FormSaveResult :tab="tab" />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
</template>

4
src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
View file

@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<FormEvaluate />
<FormEvaluate :tab="tab" />
</q-tab-panel>
<q-tab-panel name="save2">
<FormEvaluate />
<FormEvaluate :tab="tab"/>
</q-tab-panel>
</q-tab-panels>
</q-page-container>

28
src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
View file

@ -2,15 +2,21 @@
import { ref, defineAsyncComponent } from "vue";
const tab = ref<string>("save1");
const changeTab = (tabVal: string) => {
tab.value = tabVal
}
tab.value = tabVal;
};
const Header = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
)
);
const FormEvaluateScore = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
)
</script>
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
)
);
</script>
<template>
<Header :change-tab="changeTab" />
@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<FormEvaluateScore />
<FormEvaluateScore :tab="tab" />
</q-tab-panel>
<!-- <q-tab-panel name="save2">
<FormEvaluateScore />
</q-tab-panel> -->
<q-tab-panel name="save2">
<FormEvaluateScore :tab="tab" />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
</template>

2
src/modules/05_placement/components/probation/MainDetail.vue
View file

@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
</q-tab-panel>
<q-tab-panel name="tab2">
<TabsTemplate1 />
<TabsTemplate1 :activeTab="activeTab"/>
</q-tab-panel>
<q-tab-panel name="tab3">

23
src/modules/05_placement/interface/response/officer.ts Normal file
View file

@ -0,0 +1,23 @@
interface officerType {
no:number,
id: string,
prefix: string,
firstName: string,
lastName: string,
position: string,
posNo: string,
positionLevel: string,
createdAt: Date,
organization: string,
reason: string,
status: string,
date: Date,
salary: number,
positionTypeOld: string,
positionLevelOld: string,
positionNumberOld: string,
organizationPositionOld: string,
isActive: true
}
export type { officerType};

65
src/modules/05_placement/router.ts
View file

@ -33,7 +33,16 @@ const RepatriationOrder = () =>
import("@/modules/05_placement/components/RepatriationOrder/List.vue");
const RepatriationOrderAdd = () =>
import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
const helpgovernment = () =>
import("@/modules/05_placement/components/helpgovernment/mainHelp.vue");
const helpgovernmentbyId = () =>
import(
"@/modules/05_placement/components/helpgovernment/governmentDetail.vue"
);
const repatriate = () =>
import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue");
const repatriatebyId = () =>
import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue");
//รับโอน
const receiveMain = () =>
import("@/modules/05_placement/components/Receive/receiveMain.vue");
@ -44,6 +53,10 @@ const receiveDetail2 = () =>
import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
const ReceiveAdd = () =>
import("@/modules/05_placement/components/Receive/FormAdd.vue");
const FormSaveResultAdd = () =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue"
);
export default [
{
@ -106,6 +119,16 @@ export default [
Role: "placement",
},
},
{
path: "/probation/detail/add/:id/:form",
name: "probationFormAdd",
component: FormSaveResultAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
{
path: "/probation/work/add",
name: "probationWorkAdd",
@ -206,4 +229,44 @@ export default [
Role: "placement",
},
},
{
path: "/help-government",
name: "help-government",
component: helpgovernment,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
},
{
path: "/help-government/detail/:id",
name: "help-governmentbyId",
component: helpgovernmentbyId,
meta: {
Auth: true,
Key: [6.6],
Role: "placement",
},
},
{
path: "/repatriate",
name: "repatriate",
component: repatriate,
meta: {
Auth: true,
Key: [6.7],
Role: "placement",
},
},
{
path: "/repatriate/detail/:id",
name: "repatriatebyId",
component: repatriatebyId,
meta: {
Auth: true,
Key: [6.7],
Role: "placement",
},
},
];

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

@ -125,7 +125,7 @@ import config from "@/app.config";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
mixin;
const DataStore = useOrderPlacementDataStore();
@ -314,20 +314,11 @@ const redirectToPage = (id?: string, status?: string) => {
};
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await deleteData(id);
})
.onCancel(() => { })
.onDismiss(() => { });
dialogRemove(
$q,
() => deleteData(id),
);
};
const deleteData = async (id: string) => {

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

@ -3,24 +3,10 @@
<q-form ref="myForm" class="q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="typeOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
hide-bottom-space
:label="`${'ประเภทคำสั่ง'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="typeOrderOption"
option-value="id"
use-input
input-debounce="0"
/>
<selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
:label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
:options="typeOrderOption" option-value="id" use-input input-debounce="0" />
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
) " -->
@ -29,73 +15,36 @@
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
:label="`${'คำสั่งเรื่อง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
@update:modelValue="clickEditRow" hide-bottom-space />
</div>
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
<div class="col-6">
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="command"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
:label="`${'คำสั่ง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
type="number"
/>
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
hide-bottom-space type="number" />
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
<label class="col-1 flex justify-center items-center text-bold">/</label>
<div class="col-5">
<datepicker
v-model="dateYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="clickEditRow"
>
<datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
@update:modelValue="clickEditRow">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:model-value="dateYear + 543"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`"
dense
outlined
>
<q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
:label="`${'พ.ศ.'}`" dense outlined>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-xs-5 col-md-3">
<datepicker
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -103,24 +52,12 @@
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่มีผลออกคำสั่ง'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]"
>
<q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
" :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -129,24 +66,10 @@
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="byOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
hide-bottom-space
:label="`${'คำสั่งโดย'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="byOrderOption"
option-value="id"
use-input
input-debounce="0"
/>
<selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
:rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
@update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
option-value="id" use-input input-debounce="0" />
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
) " -->
@ -154,55 +77,25 @@
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="nameCommand"
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
:label="`${'ผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow" hide-bottom-space />
</div>
<div class="col-xs-12 col-md-6">
<!-- :readonly="!edit"
:borderless="!edit" -->
<q-input
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="positionCommand"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
:label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
<q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
@update:modelValue="clickEditRow" hide-bottom-space />
</div>
<div class="col-12">
<q-separator />
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="examRound"
:rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
hide-bottom-space
:label="`${'รอบการสอบ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="examRoundName"
:options="examRoundOption"
option-value="examRoundValue"
use-input
input-debounce="0"
/>
<selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
:rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
@update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
:options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
) " -->
@ -216,39 +109,18 @@
filterSelector(inputValue, doneFn,'positionOption' ) " -->
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="register"
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="registerOption"
option-value="id"
use-input
input-debounce="0"
/>
<selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
</div>
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
) " -->
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateRegister"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -256,25 +128,13 @@
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateRegister != null ? date2Thai(dateRegister) : null
"
:label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
]"
>
<q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
" :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -282,38 +142,18 @@
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="announce"
<selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
:rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
hide-bottom-space
:label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="announceOption"
option-value="id"
use-input
input-debounce="0"
/>
hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
input-debounce="0" />
<!-- @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
) " -->
</div>
<div class="col-xs-12 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnounce"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -321,25 +161,13 @@
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
:label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
]"
>
<q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
" :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
(val) =>
!!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
]">
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
@ -371,14 +199,22 @@ import type {
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
dialogConfirm,
} = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const router = useRouter();
const props = defineProps({
next: {
@ -568,9 +404,9 @@ const fecthExamRoundOption = async () => {
.get(config.API.examroundOrder())
.then((res) => {
examRoundOption.value = res.data.result;
console.log(examRoundOption.value);
// console.log(examRoundOption.value);
})
.catch((e) => {});
.catch((e) => { });
};
const submit = async () => {
const formdata = {
@ -591,33 +427,28 @@ const submit = async () => {
};
await myForm.value!.validate().then((result: boolean) => {
if (result) {
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
dialogConfirm(
$q,
() => {
if (!orderId) {
createListOrder(formdata);
} else {
let orderIdString = orderId.toString();
updateOrder(formdata, orderIdString);
}
},
persistent: true,
}).onOk(async () => {
showLoader();
if (!orderId) {
createListOrder(formdata);
} else {
let orderIdString = orderId.toString();
updateOrder(formdata, orderIdString);
}
});
);
}
});
};
const createListOrder = async (formData: Object) => {
// console.log(formData);
showLoader();
await http
.post(config.API.createOrder(), formData)
.then((res) => {
const data = res.data.result;
localStorage.setItem("orderId", data.id);
router.push(`/order/detail/${data.id}?step=${2}`);
next();
success($q, "บันทึกข้อมูลสำเร็จ");
})
@ -630,7 +461,7 @@ const createListOrder = async (formData: Object) => {
};
const updateOrder = async (formData: Object, orderId: string) => {
// console.log(formData);
showLoader();
await http
.put(config.API.detailOrder(orderId), formData)
.then((res) => {

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

@ -9,51 +9,20 @@ div
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
style="max-width: 200px" class="q-ml-sm">
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
<q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
:options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
class="gt-xs q-ml-sm" />
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -67,51 +36,23 @@ div
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectModal(props.row)"
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
"no" ? props.rowIndex + 1 : col.value }}</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1"
@click="upDown(props)"
icon="mdi-arrow-up-bold"
>
<q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
<!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1"
@click="upDown(props, false)"
icon="mdi-arrow-down-bold"
>
<q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
<!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="dialogDeleteData(props.row.personalId)"
icon="mdi-delete"
>
<q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
icon="mdi-delete">
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
@ -121,24 +62,9 @@ div
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="กรอกรายละเอียด"
>
<q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
</q-btn>
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="save"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@ -157,43 +83,22 @@ div
<div class="col-xs-12">
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
type="number"
hide-bottom-space
/>
<q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
hide-bottom-space />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`"
type="number"
hide-bottom-space
/>
<q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]" -->
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="modalData.mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
type="number"
hide-bottom-space
/>
<q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]" -->
@ -204,14 +109,7 @@ div
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModal"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
</q-card-actions>
@ -225,24 +123,12 @@ div
<DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<d-table
:rows="rows2"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
selection="multiple"
v-model:selected="selected"
>
<d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
selection="multiple" v-model:selected="selected">
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
</q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
@ -252,33 +138,17 @@ div
<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-checkbox keep-color color="primary" dense v-model="props.selected" />
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
col.value }}</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModalAdd"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
</q-card-actions>
@ -313,7 +183,7 @@ const props = defineProps({
const next = () => props.next();
const previous = () => props.previous();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
const route = useRoute();
const $q = useQuasar();
@ -372,7 +242,6 @@ const columns = ref<QTableProps["columns"]>([
const rows = ref<ResponseData[]>([]);
const rows2 = ref<ResponseData[]>([]);
const selected = ref<ResponseData[]>([]);
const orderId = ref<string>(route.params.orderid.toString());
onMounted(async () => {
await conditionData();
@ -382,8 +251,8 @@ const conditionData = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await getData(id);
}
@ -437,15 +306,9 @@ const getData = async (id: string) => {
// };
const dialogDeleteData = async (id: string) => {
dialogMessage(
dialogRemove(
$q,
"ยืนยันการลบข้อมูล",
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
"mdi-help-circle-outline",
"ตกลง",
"red",
() => deleteData(id),
undefined
);
};
@ -573,36 +436,40 @@ const putSalary = async (salary: any) => {
positionSalaryAmount: Number(salary.positionSalaryAmount),
monthSalaryAmount: Number(salary.mouthSalaryAmount),
};
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
dialogConfirm(
$q,
async () => {
showLoader()
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 () => {
await conditionData();
modal.value = false;
hideLoader()
});
},
persistent: true,
}).onOk(async () => {
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 () => {
await conditionData();
modal.value = false;
});
});
);
};
const modalAddChange = async () => {
modalAdd.value = !modalAdd.value;
if (modalAdd.value == true) {
await fetchaddlist(orderId.value);
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await fetchaddlist(id);
}
} else await conditionData();
};
const fetchaddlist = async (id: string) => {
@ -637,37 +504,41 @@ const saveModalAdd = () => {
if (myFormAdd.value !== null) {
myFormAdd.value.validate().then(async (result: boolean) => {
if (result && selected.value.length !== 0) {
$q.dialog({
title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
dialogConfirm(
$q,
() => {
let data = [];
data.push(...selected.value.map((e: any) => e.refRecordId));
addlist(data);
},
persistent: true,
}).onOk(async () => {
let data = [];
data.push(...selected.value.map((e: any) => e.refRecordId));
// console.log(data);
addlist(data);
});
"ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
"ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
);
}
});
}
};
const addlist = async (data: Object) => {
await http
.post(config.API.personsOrder(orderId.value), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
modalAddChange();
});
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await http
.post(config.API.personsOrder(id), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch((e: any) => {
console.log(e);
messageError($q, e);
})
.finally(() => {
modalAddChange();
});
}
};
const click = (e: any) => {
@ -677,35 +548,22 @@ const click = (e: any) => {
const save = () => {
if (selected.value.length > 0) {
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
}).onOk(async () => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
});
} else {
dialogMessage(
dialogConfirm(
$q,
() => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
},
);
} else {
dialogMessageNotify(
$q,
"ข้อความแจ้งเตือน",
"กรุณาเลือกรายชื่อ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
}
};
const selectData = (row: any) => {};
const refresh = async () => {
// await conditionData();
modalAddChange();
@ -725,4 +583,4 @@ const getClass = (val: boolean) => {
};
};
</script>
<style lang="scss"></style>
<style lang="scss"></style>

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

@ -343,7 +343,7 @@ const previous = () => props.previous();
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
const route = useRoute();
@ -598,22 +598,7 @@ const getClass = (val: boolean) => {
};
const clickClose = async () => {
// if (editRow.value == true) {
// dialogMessage(
// $q,
// "ข้อมูลมีการแก้ไข",
// "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
// "mdi-help-circle-outline",
// "ตกลง",
// "orange",
// () => (modal.value = false),
// undefined
// );
// } else {
modal.value = false;
// next.value = false;
// previous.value = false;
// }
};
const clickAdd = async () => {
@ -628,15 +613,9 @@ const clickAdd = async () => {
};
const clickDelete = (id: string) => {
dialogMessage(
dialogRemove(
$q,
"ยืนยันการลบข้อมูล",
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
"mdi-help-circle-outline",
"ตกลง",
"red",
() => deleteData(id),
undefined
);
};

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

@ -6,8 +6,8 @@
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำสั่ง</div>
<q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
:disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
<q-btn v-show="OrderPDF == ''" 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">
@ -25,8 +25,8 @@
</div>
<div @click="setTab('second')" :class="getClass(tab == 'second')">
<div class="q-pr-sm">เอกสารแนบท้าย</div>
<q-btn v-show="TailerPDF == ''" size="12px" flat dense
:color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
<q-btn v-show="TailerPDF == ''" 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">
@ -252,7 +252,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
const route = useRoute();
const $q = useQuasar();
@ -382,25 +382,17 @@ const save = () => {
if (myForm.value !== null) {
myForm.value!.validate().then((success: Boolean) => {
if (success) {
// yay, models are correct
$q.dialog({
title: "ยืนยันการบันทึกข้อมูล",
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
dialogConfirm(
$q,
async () => {
await putOrderData();
await postfileOrder();
await postfileTailer();
await fetchAttachment(orderId.value);
await fecthstatusOrder(orderId.value);
})
.onCancel(() => { })
.onDismiss(() => { });
},
);
}
});
}
@ -432,16 +424,9 @@ const postfileTailer = async () => {
await http.post(config.API.attachmentFileId(orderId.value), formData);
};
const clickExecute = async (id: string) => {
$q.dialog({
title: "ยืนยันการออกคำสั่ง",
message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
dialogConfirm(
$q,
async () => {
await http
.put(config.API.executeOrder(id))
.then((res) => {
@ -450,9 +435,10 @@ const clickExecute = async (id: string) => {
.catch((e) => {
messageError($q, e);
});
})
.onCancel(() => { })
.onDismiss(() => { });
},
"ยืนยันการออกคำสั่ง",
"ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
);
};
const validateForm = () => {

20
src/modules/10_order/router.ts
View file

@ -1,12 +1,6 @@
/**
* Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
*/
const AddPage = () =>
import("@/modules/10_order/components/Add.vue");
// const AddPage = () => import("@/modules/10_order/components/Add.vue");
const MainOrder = () => import("@/modules/10_order/components/Main.vue");
const DetailPage = () =>
import("@/modules/10_order/components/Detail.vue");
const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
export default [
{
@ -16,16 +10,17 @@ export default [
meta: {
Auth: true,
Key: [10],
Role: "placement",
Role: "order",
},
},
{
path: "/order/add",
name: "OrderAdd",
component: AddPage,
component: DetailPage,
meta: {
Auth: true,
Role: "placement",
Key: [10],
Role: "order",
},
},
{
@ -34,7 +29,8 @@ export default [
component: DetailPage,
meta: {
Auth: true,
Role: "placement",
Key: [10],
Role: "order",
},
},
];

75
src/stores/mixin.ts
View file

@ -411,6 +411,77 @@ export const useCounterMixin = defineStore("mixin", () => {
});
};
//*** Dialog ***//
const dialogConfirm = (
q: any,
ok?: Function,
title?: string, // ถ้ามี cancel action ใส่เป็น null
desc?: string, // ถ้ามี cancel action ใส่เป็น null
cancel?: Function
) => {
q.dialog({
component: CustomComponent,
componentProps: {
title: title && title != null ? title : "ยืนยันการบันทึก",
message:
desc && desc != null
? desc
: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
icon: "info",
color: "public",
textOk: "ตกลง",
onlycancel: false,
},
})
.onOk(() => {
if (ok) ok();
})
.onCancel(() => {
if (cancel) cancel();
});
};
const dialogRemove = (q: any, ok?: Function, cancel?: Function) => {
q.dialog({
component: CustomComponent,
componentProps: {
title: "ยืนยันการลบข้อมูล",
message: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
icon: "delete",
color: "red",
textOk: "ตกลง",
onlycancel: false,
},
})
.onOk(() => {
if (ok) ok();
})
.onCancel(() => {
if (cancel) cancel();
});
};
const dialogMessageNotify = (
q: any,
desc?: string, // ถ้ามี cancel action ใส่เป็น null
cancel?: Function
) => {
q.dialog({
component: CustomComponent,
componentProps: {
title: "ข้อความแจ้งเตือน",
message: desc && desc != null ? desc : "กรุณากรอกข้อมูลให้ครบ",
icon: "warning",
color: "orange",
textOk: "ตกลง",
onlycancel: true,
},
}).onCancel(() => {
if (cancel) cancel();
});
};
//*** END Dialog ***//
const showLoader = () => {
Loading.show({
spinner: QSpinnerCube,
@ -718,5 +789,9 @@ export const useCounterMixin = defineStore("mixin", () => {
typeChangeName,
statusLeave,
modalWarning,
// common dialog
dialogConfirm,
dialogRemove,
dialogMessageNotify
};
});