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

Merge branch 'develop' into dev-tee

Browse source
This commit is contained in:
setthawutttty 2023-08-28 17:23:12 +07:00
commit cc6c637538
30 changed files with 2561 additions and 2346 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/api/07_insignia/api.insignia.ts
View file

@ -3,27 +3,37 @@
*/
import env from "../index";
const insignia = `${env.API_URI}/insignia`;
const Organization = `${env.API_URI}/Organization`
const report = `${env.API_REPORT2_URI}/report`;
const Organization = `${env.API_URI}/Organization`;
export default {
getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
listRoundInsignia: () => `${insignia}/period/`,
editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
RoundInsignia: (id: string) => `${insignia}/period/${id}`,
requestInsignia: (insigniaPeriodId: string) => `${insignia}/request/${insigniaPeriodId}`,
requestInsignia: (insigniaPeriodId: string) =>
`${insignia}/request/${insigniaPeriodId}`,
// Type
typeOc: () => `${Organization}/history/type/หน่วยงาน`,
// manage
insigniaManage: (type: string) => `${insignia}/manage/${type}`,
insigniaCreate: () => `${insignia}/request`,
insigniaList: (insigniaPeriodId: any, ocId: string, role: string, status: any) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`,
insigniaReject: (profileId: string) => `${insignia}/request/status/reject/${profileId}`,
insigniaDelete: (profileId: string) => `${insignia}/request/status/delete/${profileId}`,
insigniaList: (
insigniaPeriodId: any,
ocId: string,
role: string,
status: any
) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`,
insigniaReject: (profileId: string) =>
`${insignia}/request/status/reject/${profileId}`,
insigniaDelete: (profileId: string) =>
`${insignia}/request/status/delete/${profileId}`,
insigniaEdit: (profileId: string) => `${insignia}/request/${profileId}`,
insigniaNosend: (insigniaPeriodId: any) => `${insignia}/request/org/no-send/${insigniaPeriodId}`,
insigniaNosend: (insigniaPeriodId: any) =>
`${insignia}/request/org/no-send/${insigniaPeriodId}`,
insigniaAgency: () => `${insignia}/request/agency`,
insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
insigniaDashboard: (insigniaPeriodId: string) =>
`${insignia}/request/dashboard/${insigniaPeriodId}`,
// record
noteround: () => `${insignia}/request/note`,
requestDocNote: (id: string) => `${insignia}/request/note/doc/${id}`,
@ -31,31 +41,58 @@ export default {
noteAdd: (insigniaId: string) => `${insignia}/request/note/${insigniaId}`,
noteByid: (id: string) => `${insignia}/request/note/${id}`,
insigniaSendToDirector: (roundId: string, ocId: string) =>
`${insignia}/request/officer/approve/${roundId}/${ocId}`,
insigniaDirectorBackToEdit: (roundId: string, ocId: string) =>
`${insignia}/request/director/reject/${roundId}/${ocId}`,
insigniaDirectorApproved: (roundId: string, ocId: string) =>
`${insignia}/request/director/approve/${roundId}/${ocId}`,
insigniaRequestSendNote: (insigniaPeriodId: string) =>
`${insignia}/request/send/note/${insigniaPeriodId}`,
insigniaSendToDirector: (roundId: string, ocId: string) => `${insignia}/request/officer/approve/${roundId}/${ocId}`,
insigniaDirectorBackToEdit: (roundId: string, ocId: string) => `${insignia}/request/director/reject/${roundId}/${ocId}`,
insigniaDirectorApproved: (roundId: string, ocId: string) => `${insignia}/request/director/approve/${roundId}/${ocId}`,
insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/request/send/note/${insigniaPeriodId}`,
// insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/insignia/request/send/note/${insigniaPeriodId}`,
// uploadfile
uploadfileInsignia: (type: string, noteId: string) => `${insignia}/request/import/${type}/${noteId}`,
previewfileInsignia: (type: string,noteId: string) => `${insignia}/request/preview/${type}/${noteId}`,
uploadfileInsignia: (type: string, noteId: string) =>
`${insignia}/request/import/${type}/${noteId}`,
previewfileInsignia: (type: string, noteId: string) =>
`${insignia}/request/preview/${type}/${noteId}`,
// uploadfileinvoice: (noteId: string) => `${insignia}/request/import/invoice/${noteId}`,
// จัดสรรเครื่องราช
insigniaManageType: (insigniaTypeId: string, year: number) => `${insignia}/manage/type/${year}/${insigniaTypeId}`,
insigniaManageType: (insigniaTypeId: string, year: number) =>
`${insignia}/manage/type/${year}/${insigniaTypeId}`,
insigniaManageAdd: () => `${insignia}/manage`,
insigniaManageById: (insigniaManageId: string) => `${insignia}/manage/${insigniaManageId}`,
insigniaManageById: (insigniaManageId: string) =>
`${insignia}/manage/${insigniaManageId}`,
insigniaManageOrg: (insigniaManageId: string) => `${insignia}/manage/org/${insigniaManageId}`,
insigniaManageOrg: (insigniaManageId: string) =>
`${insignia}/manage/org/${insigniaManageId}`,
insigniaManageOrgAdd: () => `${insignia}/manage/org`,
insigniaManageOrgDashboard: (insigniaManageId: string) => `${insignia}/manage/org/dashboard/${insigniaManageId}`,
insigniaManageOrgDashboard: (insigniaManageId: string) =>
`${insignia}/manage/org/dashboard/${insigniaManageId}`,
// ยืม-คืนเครื่องราชฯ
insigniaManageBorrow: () => `${insignia}/manage/borrow`,
insigniaManageBorrowReturn: (insigniaManageProfileId: string) => `${insignia}/manage/return/${insigniaManageProfileId}`,
insigniaManageBorrowList: (year: number, insigniaTypeId: string) => `${insignia}/manage/borrow/${year}/${insigniaTypeId}`,
insigniaManageBorrowById: (insigniaManageProfileId: string) => `${insignia}/manage/borrow/${insigniaManageProfileId}`,
};
insigniaManageBorrowReturn: (insigniaManageProfileId: string) =>
`${insignia}/manage/return/${insigniaManageProfileId}`,
insigniaManageBorrowList: (year: number, insigniaTypeId: string) =>
`${insignia}/manage/borrow/${year}/${insigniaTypeId}`,
insigniaManageBorrowById: (insigniaManageProfileId: string) =>
`${insignia}/manage/borrow/${insigniaManageProfileId}`,
// InsigniaReport API รายงานระบบเครื่องราชอิสริยาภรณ์
// ******
// type = 39 : 39-แบบ ขร1 บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ ข้าราชการ ชั้นสายสะพาย
// type = 40 : 40-แบบ ขร2 บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ ข้าราชการ ชั้นต่ำกว่าสายสะพาย
// type = 41 : 41-แบบ ขร3 บัญชีรายชื่อข้าราชการผู้ขอพระราชทานเครื่องราชฯ
// type = 42 : 42-แบบ ขร4 บัญชีแสดงคุณสมบัติของข้าราชการซึ่งเสนอขอเครื่องราชฯ
// type = 43 : 43-บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี
// type = 44 : 44-บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ
// type = 45 : 45-บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา
// type = 46 : 46-ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
// ******
// fileType = pdf, docx หรือ xlsx
reportInsignia: (type: string, fileType: string, fileId: string) =>
`${report}/insignia/${type}/${fileType}/${fileId}`,
};

19
src/modules/05_placement/components/PersonalList/TableDetail.vue
View file

@ -93,7 +93,6 @@ watch(props, () => {
}
});
const validateData = () => {
const selectedIds = personalForm.value.isProperty;
@ -280,7 +279,7 @@ const putpersonalForm = async () => {
<div>ภาค ค</div>
<div>รวมทั้งหมด</div>
</div>
<div class="col-4 q-pa-xs">
<div class="col-4 q-pa-xs text-right">
<div class="header-sub-text-exam-2">คะแนนที่ได้</div>
<div class="sub-text-exam">
{{ personalForm.pointTotalA }}
@ -295,8 +294,12 @@ const putpersonalForm = async () => {
{{ personalForm.pointTotal }}
</div>
</div>
<div class="col-4 q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2">ผลการสอบ</div>
<div
class="col-4 q-pa-xs header-sub-text-exam-2 text-right"
>
<div class="header-sub-text-exam-2 text-right">
ผลการสอบ
</div>
<div class="sub-text-exam">
{{ personalForm.pointA }}
</div>
@ -335,18 +338,18 @@ const putpersonalForm = async () => {
</div>
<!-- <div class="contanier-box-mini"> -->
<!-- <q-card bordered class="card-panding">
<!-- <q-card bordered class="card-panding">
<div class="col-12 row items-center q-pa-sm header-text">
เอกสารเพิ่มเติม
</div> -->
<!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
<!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
<q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
:rules="[isRequired]" class="checkbox-group" />
<q-separator />
</div> -->
<!-- </q-card>
<!-- </q-card>
</div> -->
</div>
</div>
<!-- <q-separator />
<div>
<DialogFooter

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

@ -2,476 +2,13 @@
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
<div id="information" name="1" class="row col-12 information q-mt-sm">
<Information
v-model:statusEdit="statusEdit"
:fetchDataProfile="fetchData"
:statusAdd="true"
/>
<Information :statusAdd="true" />
</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-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-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<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()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
</div>
<q-dialog v-model="dialog" persistent>
<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-card-section>
<q-card-section class="q-p-sm"> </q-card-section>
</q-card>
</q-dialog>
<!-- Dialog เลือก Image -->
<q-dialog v-model="dialogImage" persistent>
<q-card style="width: 100vw; max-width: 60vw">
<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-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="col-3" @click="addNewImage">
<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"
>
<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 :class="getClass(n)">
<q-img
v-if="n.avatar != null"
:src="n.avatar"
:class="imageClass(n)"
>
<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"
/>
</div>
</q-img>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
icon="check"
dense
flat
round
@click="selectAvatarHistory"
color="positive"
>
<q-tooltip>เลือกรูปภาพ</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import Information from "@/modules/05_placement/components/Receive/information.vue";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const store = useDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
dialogRemove,
} = mixin;
const route = useRoute();
const router = useRouter();
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const fullname = ref<string>("");
const position = ref<string>("นักจัดการงานทั่วไป");
const dialog = ref<boolean>(false);
const dialogImage = ref<boolean>(false);
const statusEdit = ref<boolean>(false);
const activeImage = ref<any | null>(null);
const images = ref<any>([]);
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
// const profileId = ref<string>("");
const profileType = ref<string>("");
const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
{
id: "retire",
name: "เกษียณอายุราชการ",
},
{
id: "resign",
name: "ลาออก",
},
{
id: "transfer",
name: "ให้โอน",
},
{
id: "death",
name: "ถึงแก่กรรม",
},
{
id: "layoff",
name: "ให้ออก",
},
{
id: "discharge",
name: "ปลดออก",
},
{
id: "dismiss",
name: "ไล่ออก",
},
// {
// id: "change",
// name: "เปลี่ยนประเภทข้าราชการ",
// },
{
id: "other",
name: "อื่นๆ",
},
]);
onMounted(async () => {
await checkProfileData();
await fetchData();
// await changeTab("information");
});
const fetchData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarId(profileId.value))
.then((res) => {
const data = res.data.result;
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
profileType.value = data.profileType;
const reason = reasonOptions.value.filter(
(r: DataOption) => r.id == data.leaveReason
);
if (reason.length > 0) {
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
} else {
leaveReason.value = "";
}
reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const checkProfileData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileCheckId(profileId.value))
.then((res) => {
let data = res.data.result;
if (data == false) router.push("/registry");
})
.catch((e) => {
router.push("/registry");
})
.finally(() => {
hideLoader();
});
}
};
const fetchAvatarHistory = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(profileId.value))
.then((res) => {
let data = res.data.result;
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const uploadImage = async (e: any) => {
if (profileId.value !== "") {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
}
};
const fetchDataDelete = async (id: string) => {
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
// dialogImage.value = false;
});
};
const deletePhoto = async (id: string) => {
dialogRemove($q, () => fetchDataDelete(id));
};
const selectAvatarHistory = async () => {
if (activeImage.value == null) {
dialogMessage(
$q,
"ไม่สามารถเปลี่ยนรูปได้",
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
}
if (profileId.value !== "") {
showLoader();
await http
.put(config.API.profileAvatarId(profileId.value), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
const imageActive = (n: any) => {
activeImage.value = n;
};
const imageClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders bg-grey-2 image-size-default": val,
"rounded-borders bg-grey-2 image-size-full": !val,
};
};
const getClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders border-green shadow-1": val,
"rounded-borders shadow-1": !val,
};
};
const addNewImage = async () => {
inputImage.value.click();
await imageActive(null);
};
const clickImage = async () => {
await fetchAvatarHistory();
dialogImage.value = true;
};
const closeImage = () => {
dialogImage.value = false;
};
const closeKp7 = () => {
dialog.value = false;
};
</script>
<style>
.image-size-default {

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

@ -1,4 +1,58 @@
<template>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
@ -6,11 +60,9 @@
icon="mdi-account"
:save="saveData"
:history="!statusAdd()"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
:addEmployee="statusAdd()"
/>
<!-- :disable="statusEdit" -->
<q-separator />
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@ -288,6 +340,12 @@
v-model="informaData.tel"
:label="`${'เบอร์โทร'}`"
mask="##########"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
/>
</div>
<div
@ -350,32 +408,6 @@
</div>
</q-form>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
@ -400,35 +432,23 @@ import type {
DataOption,
} from "@/modules/04_registry/components/profileType";
import { defaultInformation } from "@/modules/04_registry/components/profileType";
import type {
RequestItemsHistoryObject,
Columns,
} from "@/modules/04_registry/interface/request/Information";
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute, useRouter } from "vue-router";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import type { QTableColumn, QForm } from "quasar";
import type { QForm } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetchDataProfile: {
type: Function,
default: () => console.log("not function"),
},
statusAdd: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:statusEdit"]);
const router = useRouter();
const route = useRoute();
@ -446,16 +466,16 @@ const {
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
const edit = ref<boolean>(false);
const defaultCitizenData = ref<string>("");
const informaData = ref<Information>(defaultInformation);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
const same = ref<string>("0");
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
@ -488,206 +508,10 @@ const OpsFilter = ref<InformationOps>({
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const columnsHistory = ref<QTableColumn[]>([
{
name: "citizenId",
align: "left",
label: "เลขบัตรประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "prefix",
align: "left",
label: "คำนำหน้าชื่อ",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthDate",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gender",
align: "left",
label: "เพศ",
sortable: true,
field: "gender",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "relationship",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "relationship",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bloodGroup",
align: "left",
label: "หมู่เลือด",
sortable: true,
field: "bloodGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "nationality",
align: "left",
label: "สัญชาติ",
sortable: true,
field: "nationality",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "race",
align: "left",
label: "เชื้อชาติ",
sortable: true,
field: "race",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "religion",
align: "left",
label: "ศาสนา",
sortable: true,
field: "religion",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "telephoneNumber",
align: "left",
label: "เบอร์โทร",
sortable: true,
field: "telephoneNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeType",
align: "left",
label: "ประเภทการจ้าง",
sortable: true,
field: "employeeType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeClass",
align: "left",
label: "ประเภทลูกจ้าง",
sortable: true,
field: "employeeClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"citizenId",
"prefix",
"firstName",
"lastName",
"birthDate",
"gender",
"relationship",
"bloodGroup",
"nationality",
"race",
"religion",
"telephoneNumber",
"employeeType",
"employeeClass",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
await fetchPerson();
emit("update:statusEdit", false);
// emit("update:statusEdit", false);
defaultAdd();
});
@ -718,11 +542,38 @@ const defaultAdd = () => {
// }
};
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
const addNewImage = async () => {
inputImage.value.click();
};
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
await fetchData();
// if (profileId.value !== "") {
// let input = e.target.files;
// if (input.length > 0) {
// console.log(typeof input[0]);
// const formData = new FormData();
// formData.append("FileData", input[0]);
// showLoader();
// await http
// .post(config.API.profileAvatarId(profileId.value), formData)
// .then((res) => {})
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// await fetchData();
// dialogImage.value = false;
// });
// return;
// }
// }
};
/**
@ -833,52 +684,6 @@ const checkCitizen = async (id: string) => {
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileInforHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
citizenId: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
birthDate: new Date(e.birthDate),
gender: e.gender,
relationship: e.relationship,
bloodGroup: e.bloodGroup,
nationality: e.nationality,
race: e.race,
religion: e.religion,
telephoneNumber: e.telephoneNumber,
employeeType:
e.employeeType == "gov"
? "งบประมาณเงินอุดหนุนรัฐบาล"
: e.employeeType == "bkk"
? "งบประมาณกรุงเทพมหานคร"
: "-",
employeeClass:
e.employeeClass == "perm"
? "ลูกจ้างประจำ"
: e.employeeClass == "temp"
? "ลูกจ้างชั่วคราว"
: "-",
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
@ -942,11 +747,6 @@ const handleDate = async (modelData: Date) => {
await calRetire(modelData);
};
const fetchDataComponent = async (modelData: Date) => {
await props.fetchDataProfile();
await fetchData();
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
@ -963,9 +763,11 @@ const calRetire = async (birth: Date) => {
})
.catch((e: any) => {
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = dateBefore.value;
changeRetireText(date2Thai(retire));
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = null;
informaData.value.age = "";
// dateBefore.value;
// changeRetireText(null);
})
.finally(() => {
hideLoader();
@ -973,93 +775,6 @@ const calRetire = async (birth: Date) => {
}
};
const fetchData = async () => {
if (route.params.id) {
showLoader();
await http
.get(config.API.profileInforId(route.params.id.toString()))
.then(async (res: any) => {
const data: ResponseObject = res.data.result;
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
informaData.value.cardid = data.citizenId;
informaData.value.prefix = "";
informaData.value.prefixId = data.prefixId;
informaData.value.firstname = data.firstName;
informaData.value.lastname = data.lastName;
informaData.value.birthDate = new Date(data.birthDate);
informaData.value.genderId = data.genderId;
informaData.value.bloodId = data.bloodGroupId;
informaData.value.nationality = data.nationality;
informaData.value.ethnicity = data.race;
informaData.value.statusId = data.relationshipId;
informaData.value.religionId = data.religionId;
informaData.value.tel = data.telephoneNumber;
informaData.value.age = data.age;
informaData.value.employeeType = data.employeeType;
informaData.value.employeeClass = data.employeeClass;
informaData.value.profileType = data.profileType;
dateBefore.value = new Date(data.birthDate);
same.value = data.changeName == true ? "1" : "0";
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
if (
data.profileType == "officer" &&
columnsHistory.value.length >= 15
) {
columnsHistory.value.splice(13, 1);
columnsHistory.value.splice(12, 1);
}
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
// hideLoader();
await props.fetchDataProfile();
});
}
};
const editData = async () => {
showLoader();
const body: any = {
citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname,
lastName: informaData.value.lastname,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,
createdAt: new Date(),
age: null,
employeeType: informaData.value.employeeType,
employeeClass: informaData.value.employeeClass,
profileType: informaData.value.profileType,
createdFullName: "-",
};
await http
.put(config.API.profileInforId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await fetchData();
await changeBirth(informaData.value.birthDate ?? new Date());
hideLoader();
});
};
const addData = async () => {
showLoader();
@ -1079,30 +794,34 @@ const addData = async () => {
// };
const formData = new FormData();
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("CitizenId", informaData.value.cardid);
formData.append("CitizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("Prefix", informaData.value.prefixId);
formData.append("Prefix", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("Firstname", informaData.value.firstname);
formData.append("Firstname", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("Lastname", informaData.value.lastname);
formData.append("Lastname", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("Gender", informaData.value.genderId);
formData.append("Gender", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("Nationality", informaData.value.nationality);
formData.append("Nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("Race", informaData.value.ethnicity);
formData.append("Race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("Religion", informaData.value.religionId);
formData.append("Religion", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append("DateOfBirth", dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()));
formData.append(
"DateOfBirth",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("BloodGroup", informaData.value.bloodId);
formData.append("BloodGroup", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("Relationship", informaData.value.statusId);
formData.append("Relationship", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("TelephoneNumber", informaData.value.tel);
formData.append("TelephoneNumber", informaData.value.tel);
await http
.post(config.API.receiveData(), formData)
@ -1123,7 +842,7 @@ const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
addData();
addData();
}
});
}

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

@ -43,7 +43,7 @@ const visibleColumns = ref<string[]>([
"position",
"positionLevel",
"organizationPositionOld",
// "organization",
"organization",
"createdAt",
"statusText",
"btn",
@ -55,7 +55,7 @@ const visibleColumns2 = ref<string[]>([
"position",
"positionLevel",
"organizationPositionOld",
// "organization",
"organization",
"createdAt",
"statusText",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@ -72,53 +72,7 @@ const resetFilter = () => {
// 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 rows2 = ref<any>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -177,7 +131,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
label: "หน่วยงานที่ให้ช่วยราชการ",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
@ -272,7 +226,7 @@ const columns2 = ref<QTableProps["columns"]>([
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
label: "หน่วยงานที่ให้ช่วยราชการ",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",

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

@ -200,9 +200,9 @@
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
:rules="[(val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
:label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
/>
</div>
</div>

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

@ -181,7 +181,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
label: "หน่วยงานที่ให้ช่วยราชการ",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
@ -298,7 +298,7 @@ const columns2 = ref<QTableProps["columns"]>([
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
label: "หน่วยงานที่ให้ช่วยราชการ",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",

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

@ -529,7 +529,7 @@ const getData = async () => {
fullname.value = data.fullname ?? "";
prefix.value = data.prefix ?? "";
reasonWork.value = data.reasonWork ?? [];
reasonWorkOther.value = data.ReasonWorkOther ?? "";
reasonWorkOther.value = data.reasonWorkOther ?? "";
timeThink.value = data.TimeThink ?? 0;
exitFactor.value = data.exitFactor ?? [];
exitFactorOther.value = data.exitFactorOther ?? 0;

4
src/modules/06_retirement/components/resign/ResignByid.vue
View file

@ -775,9 +775,11 @@ const fetchData = async (id: string) => {
pathName: doc.pathName ?? "",
fileName: doc.fileName ?? "",
});
console.log(doc.fileName);
});
}
rows.value = list;
dataDetail.value = data;
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";

354
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -30,6 +30,8 @@ const modalAdd = ref<boolean>(false);
const modalEdit = ref<boolean>(false);
const rowid = ref<string>("");
const organization = ref<string>("");
const fileId = ref<string>("");
const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
"no",
@ -194,9 +196,12 @@ const props = defineProps({
roleUser: {
type: String,
},
roundName: {
type: String,
},
requestStatus: {
type: String,
}
},
});
onMounted(async () => {
@ -344,6 +349,36 @@ const clickmodalEdit = (props: any) => {
// fecthInsigniaType();
};
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const downloadReport = async (type: string = "pdf") => {
showLoader();
await http
.get(config.API.reportInsignia("45", type, props.roundId!), {
responseType: "blob",
})
.then(async (res) => {
downloadFile(
res,
`บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickSave = () => {
dialogConfirm(
$q,
@ -525,40 +560,136 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<!-- {{ DataStore.typeinsigniaOptions }} -->
<q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
:options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="changtypeOc" />
<q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
:options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable" />
<q-select
v-if="props.roleUser == 'admin'"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
/>
<q-select
v-model="DataStore.typeinsignia"
label="ปรเภทเครื่องราชฯ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable"
/>
<div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<!-- @click="downloadReport('pdf')" -->
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="downloadReport('pdf')">
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="downloadReport('docx')">
<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-item clickable v-close-popup @click="downloadReport('xlsx')">
<q-item-section avatar
><q-icon color="green" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xlsx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickmodalAdd">
<q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickmodalAdd"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<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" />
<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-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<q-table
ref="table"
:columns="columns"
:rows="DataStore.rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -568,7 +699,11 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click.stop="nextPage(props.row.profileId)">
<q-tr
:props="props"
class="cursor-pointer"
@click.stop="nextPage(props.row.profileId)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -600,26 +735,68 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
{{ props.row.dateSend }}
</q-td>
<q-td auto-width>
<q-btn v-if="(roleUser == 'admin') || (roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4'))" icon="mdi-dots-vertical" size="12px"
color="grey-7" flat round dense @click.stop>
<q-btn
v-if="
roleUser == 'admin' ||
(roleUser == 'insignia1' &&
(requestStatus == 'st1' || requestStatus == 'st4'))
"
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 250px">
<q-item clickable v-close-popup @click.stop="clickmodalEdit(props.row)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-item
clickable
v-close-popup
@click.stop="clickmodalEdit(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
<q-icon color="primary" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section>
<q-item-section
>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click.stop="clickReject(props.row.id)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-item
clickable
v-close-popup
@click.stop="clickReject(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ไม่ยื่นขอ</q-tooltip>
<q-icon color="blue" size="xs" name="mdi-alert-circle-outline" />
<q-icon
color="blue"
size="xs"
name="mdi-alert-circle-outline"
/>
</q-item-section>
<q-item-section>ไม่ยื่นขอ</q-item-section>
</q-item>
<q-item clickable v-close-popup @click.stop="clickDelete(props.row.id)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบออก</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
@ -632,8 +809,16 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
@ -645,21 +830,44 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
<q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="modalAdd = false"
style="color: #ff8080; background-color: #ffdede" />
<q-btn
icon="close"
unelevated
round
dense
@click="modalAdd = false"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<div class="q-pa-md">
<q-toolbar style="padding: 0">
<q-input borderless outlined dense debounce="300" placeholder="ค้นหา" style="width: 850px; max-width: auto"
v-model="filterKeyword2">
<q-input
borderless
outlined
dense
debounce="300"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
v-model="filterKeyword2"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</q-toolbar>
<q-table flat bordered dense :rows="rows2" :columns="columns2" :filter="filterKeyword2" row-key="name"
class="custom-header-table" :pagination-label="paginationLabel2" v-model:pagination="pagination2">
<q-table
flat
bordered
dense
:rows="rows2"
:columns="columns2"
:filter="filterKeyword2"
row-key="name"
class="custom-header-table"
:pagination-label="paginationLabel2"
v-model:pagination="pagination2"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -685,14 +893,27 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
{{ props.row.organizationOrganization }}
</q-td>
<q-td>
<q-btn outline :props="props" label="เพิ่ม" class="text-teal-5" @click="clickAdd(props.row.id)" />
<q-btn
outline
:props="props"
label="เพิ่ม"
class="text-teal-5"
@click="clickAdd(props.row.id)"
/>
<q-tooltip>เพิ่ม</q-tooltip>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination2.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination2.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
@ -703,18 +924,39 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
<q-dialog v-model="modalEdit" persistent>
<q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6">แก้ไขเครื่องราชฯ ที่ยื่นขอ
<q-toolbar-title class="text-h6"
>แก้ไขเครื่องราชฯ ที่ยื่นขอ
</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="modalEdit = false"
style="color: #ff8080; background-color: #ffdede" />
<q-btn
icon="close"
unelevated
round
dense
@click="modalEdit = false"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<div class="q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col">
<q-select v-model="insignia" label="ชื่อเครื่องราชฯ" dense emit-value map-options :options="insigniaOptions"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" style="min-width: 150px" />
<q-select
v-model="insignia"
label="ชื่อเครื่องราชฯ"
dense
emit-value
map-options
:options="insigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
</div>
<!-- <div class="col">
<q-select
@ -746,10 +988,20 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
</q-card>
</q-dialog>
<DialogPopupReason :modal="modelPopupReject" title="เหตุผลไม่ยื่นของ" label="หมายเหตุ"
:click-close="closemodelPopupReject" :savaForm="savaReasonReject" />
<DialogPopupReason :modal="modelPopupDelete" title="เหตุผลที่ลบออก" label="หมายเหตุ"
:click-close="closemodelPopupDelete" :savaForm="savaReasonDelete" />
<DialogPopupReason
:modal="modelPopupReject"
title="เหตุผลไม่ยื่นของ"
label="หมายเหตุ"
:click-close="closemodelPopupReject"
:savaForm="savaReasonReject"
/>
<DialogPopupReason
:modal="modelPopupDelete"
title="เหตุผลที่ลบออก"
label="หมายเหตุ"
:click-close="closemodelPopupDelete"
:savaForm="savaReasonDelete"
/>
<!-- note -->
<!-- <q-dialog v-model="modalNote" persistent>

292
src/modules/07_insignia/components/2_Manage/listManage.vue
View file

@ -20,14 +20,14 @@ const roleUser = ref<string>("admin");
const DataStore = useInsigniaDataStore();
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } =
mixin;
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
const router = useRouter();
const $q = useQuasar(); //ใช้ noti quasar
const loading = ref<boolean>(false);
const round = ref<string>("");
const roundName = ref<string>("");
const optionRound = ref<any>([]);
// const typeOc = ref<string>("kljkljk");
const optiontypeOc = ref<any>([]);
@ -74,6 +74,7 @@ const fecthlistRound = async () => {
// const lastIndex = optionRound.value.length;
const lastValue = optionRound.value[0];
round.value = lastValue.id.toString();
roundName.value = lastValue.name;
fecthStat(round.value);
})
.catch((err) => {
@ -143,8 +144,12 @@ const changround = async () => {
: DataStore.typeOc);
fecthInsigniaByOc(round.value, organization, "officer", tab.value);
// get round name
const roundFilter = await optionRound.value.find((x: any) => round.value === x.id)
roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชปี ${roundFilter.year + 543}`
const roundFilter = await optionRound.value.find(
(x: any) => round.value === x.id
);
roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชปี ${
roundFilter.year + 543
}`;
};
// const fecthInsigniaAll = async (periodId: string, tab: string) => {
// // let data: any = [];
@ -161,8 +166,8 @@ const changround = async () => {
// // }
// // console.log(data);
// };
const requestNote = ref<string>("")
const requestStatus = ref<string>("")
const requestNote = ref<string>("");
const requestStatus = ref<string>("");
const fecthInsigniaByOc = async (
roundId: string,
ocId: string,
@ -191,33 +196,36 @@ const fecthInsigniaByOc = async (
};
const sendToDirector = async () => {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
dialogConfirm($q, async () => {
showLoader();
await http
.get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const modalPopupBackToEdit = ref<boolean>(false);
const popupBackToEdit = async () => {
modalPopupBackToEdit.value = true;
}
};
const closeModalPopupBackToEdit = async () => {
modalPopupBackToEdit.value = false;
}
};
const backToEdit = async (reason: string) => {
dialogConfirm(
@ -225,24 +233,33 @@ const backToEdit = async (reason: string) => {
async () => {
showLoader();
await http
.put(config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency), {
reason: reason
})
.put(
config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency),
{
reason: reason,
}
)
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
closeModalPopupBackToEdit()
closeModalPopupBackToEdit();
hideLoader();
});
},
'ยืนยันการตีกลับ',
'ต้องการยืนยันการตีกลับใช่หรือไม่?');
"ยืนยันการตีกลับ",
"ต้องการยืนยันการตีกลับใช่หรือไม่?"
);
};
const directorApproved = async () => {
@ -254,7 +271,12 @@ const directorApproved = async () => {
.get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
})
.catch((err) => {
// console.log(err);
@ -264,29 +286,35 @@ const directorApproved = async () => {
hideLoader();
});
},
'ยืนยันการอนุมัติ',
'ต้องการยืนยันการอนุมัติใช่หรือไม่?');
"ยืนยันการอนุมัติ",
"ต้องการยืนยันการอนุมัติใช่หรือไม่?"
);
};
const requestSendNote = async () => {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.post(config.API.insigniaRequestSendNote(round.value), { name: roundName.value })
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.insigniaRequestSendNote(round.value), {
name: roundName.value,
})
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(
round.value,
DataStore.agency,
"officer",
tab.value
);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
</script>
@ -297,76 +325,176 @@ const requestSendNote = async () => {
<q-card bordered class="row col-12 q-mt-sm">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<q-select borderless dense v-model="round" :options="optionRound" map-options emit-value option-value="id"
option-label="name" @update:model-value="changround" />
<q-select
borderless
dense
v-model="round"
:options="optionRound"
map-options
emit-value
option-value="id"
option-label="name"
@update:model-value="changround"
/>
</div>
<div class="col-12"><q-separator /></div>
<div v-if="roleUser == 'admin'" class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-sm fit">
<cardTop :amount="stat.orgAllCount" label="หน่วยงานทั้งหมด" color="#016987" />
<cardTop :amount="stat.orgSendCount" label="หน่วยงานที่ส่งรายชื่อเเล้ว" color="#02A998" />
<cardTop :amount="stat.orgNoSendCount" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" color="#2EA0FF" />
<cardTop :amount="stat.allUserUser" label="จำนวนคนที่ยื่นขอ" color="#4154B3" />
<cardTop
:amount="stat.orgAllCount"
label="หน่วยงานทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.orgSendCount"
label="หน่วยงานที่ส่งรายชื่อเเล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.orgNoSendCount"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
color="#2EA0FF"
/>
<cardTop
:amount="stat.allUserUser"
label="จำนวนคนที่ยื่นขอ"
color="#4154B3"
/>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
<div v-if="roleUser == 'insignia1' && requestStatus == 'st4'" class="q-pa-md q-gutter-sm">
<q-banner inline-actions bordered class="bg-orange-1 text-orange border-orange">
<q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ {{ requestNote }}
<div
v-if="roleUser == 'insignia1' && requestStatus == 'st4'"
class="q-pa-md q-gutter-sm"
>
<q-banner
inline-actions
bordered
class="bg-orange-1 text-orange border-orange"
>
<q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ
{{ requestNote }}
</q-banner>
</div>
<div class="row col-12">
<q-tabs v-model="tab" dense class="text-grey" active-color="primary" active-class="bg-teal-1"
indicator-color="primary" align="left">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="pending" label="ผู้ที่ยื่นขอ" />
<q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
<q-tab name="delete" label="คนที่ถูกลบออก" />
<q-tab v-if="roleUser == 'admin'" name="organization" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
<q-tab
v-if="roleUser == 'admin'"
name="organization"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
/>
</q-tabs>
</div>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="pending" class="q-pa-none">
<tab1 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser"
:request-status="requestStatus" />
<tab1
:tab="tab"
:roundId="round"
:roundName="roundName"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
:request-status="requestStatus"
/>
</q-tab-panel>
<q-tab-panel name="reject" class="q-pa-none">
<tab2 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
<tab2
:tab="tab"
:roundId="round"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
/>
</q-tab-panel>
<q-tab-panel name="delete" class="q-pa-none">
<tab3 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
<tab3
:tab="tab"
:roundId="round"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
/>
</q-tab-panel>
<q-tab-panel v-if="roleUser == 'admin'" name="organization" class="q-pa-none">
<q-tab-panel
v-if="roleUser == 'admin'"
name="organization"
class="q-pa-none"
>
<tab4 :tab="tab" :roundId="round" :role-user="roleUser" />
</q-tab-panel>
</q-tab-panels>
<q-toolbar class="q-py-md text-right">
<q-space />
<q-btn v-if="roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4')" dense unelevated
label="บันทึกข้อมูล" color="public" class="q-px-md" @click="sendToDirector" />
<q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="ตีกลับ" color="orange"
class="q-px-md" @click="popupBackToEdit" />
<q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="อนุมัติ" color="positive"
class="q-px-md q-ml-md" @click="directorApproved" />
<q-btn
v-if="
roleUser == 'insignia1' &&
(requestStatus == 'st1' || requestStatus == 'st4')
"
dense
unelevated
label="บันทึกข้อมูล"
color="public"
class="q-px-md"
@click="sendToDirector"
/>
<q-btn
v-if="roleUser == 'insignia2' && requestStatus == 'st3'"
dense
unelevated
label="ตีกลับ"
color="orange"
class="q-px-md"
@click="popupBackToEdit"
/>
<q-btn
v-if="roleUser == 'insignia2' && requestStatus == 'st3'"
dense
unelevated
label="อนุมัติ"
color="positive"
class="q-px-md q-ml-md"
@click="directorApproved"
/>
<!-- สกจ. Freez ข้อมูล -->
<q-btn v-if="roleUser == 'admin'" dense unelevated label="บันทึกข้อมูล" color="public" class="q-px-md q-ml-md"
@click="requestSendNote" />
<q-btn
v-if="roleUser == 'admin'"
dense
unelevated
label="บันทึกข้อมูล"
color="public"
class="q-px-md q-ml-md"
@click="requestSendNote"
/>
</q-toolbar>
<DialogPopupReason :modal="modalPopupBackToEdit" title="หมายเหตุการตีกลับ" label="หมายเหตุ"
:click-close="closeModalPopupBackToEdit" :savaForm="backToEdit" />
<DialogPopupReason
:modal="modalPopupBackToEdit"
title="หมายเหตุการตีกลับ"
label="หมายเหตุ"
:click-close="closeModalPopupBackToEdit"
:savaForm="backToEdit"
/>
</q-card>
</template>
<style lang="scss" scope>
.border-orange {
border: 1px solid #FFA800;
border: 1px solid #ffa800;
border-radius: 5px;
}

6
src/modules/07_insignia/components/3_result/DialogForm.vue
View file

@ -217,11 +217,11 @@ const findlist = async (id: string) => {
};
const fectDataByid = async (id: string) => {
showLoader();
employeeClass.value = "";
await http
.get(config.API.noteByid(id))
.then((res) => {
let data = res.data.result;
employeeClass.value = "";
cardid.value = data.citizenId;
fullName.value = data.fullName;
position.value = data.position;
@ -348,7 +348,9 @@ const searchcardid = () => {
</div>
<div class="col-xs-12 col-sm-4">
<q-input
:disable="disbleStatus || status == 'DONE' || status == 'PENDING'"
:disable="
disbleStatus || status == 'DONE' || status == 'PENDING'
"
hide-bottom-space
outlined
class="inputgreen"

119
src/modules/07_insignia/components/4_Allocate/DialogEdit.vue Normal file
View file

@ -0,0 +1,119 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
const title = ref<string>("");
const amount = ref<number>();
const props = defineProps({
modal: Boolean,
save: {
type: Function,
default: () => console.log("not function"),
},
close: {
type: Function,
default: () => console.log("not function"),
},
insigniadata: {
type: Object,
default: [],
},
actionType: {
type: String,
},
});
watch(props, () => {
if (props.modal === true) {
amount.value = props.insigniadata.total;
if (props.actionType === "insignia") {
title.value = props.insigniadata.insignia;
} else title.value = props.insigniadata.organization;
}
});
const closeModal = () => {
props.close();
};
const clickSave = () => {
console.log(props.insigniadata);
dialogConfirm($q, () => {
if (props.actionType === "insignia") {
props.save(
props.insigniadata.id,
props.insigniadata.insigniaId,
amount.value,
props.insigniadata.year
);
} else {
props.save(props.insigniadata.id, amount.value);
}
});
};
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 800px">
<q-toolbar class="q-py-sm">
<q-toolbar-title class="text-h6"
>แก้ไขการจัดสรรเครื่องราชฯ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="closeModal"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-6">
<q-input
hide-bottom-space
outlined
class="inputgreen"
v-model="title"
dense
lazy-rules
type="text"
label="จำนวน"
disable
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
hide-bottom-space
outlined
class="inputgreen"
v-model="amount"
dense
lazy-rules
type="number"
label="จำนวน"
/>
</div>
</div>
</div>
</q-form>
<q-separator />
<div class="row justify-end q-py-sm">
<div class="q-px-md">
<q-btn label="บันทึก" @click="clickSave" color="public" />
</div>
</div>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped></style>

64
src/modules/07_insignia/components/4_Allocate/DialogForm.vue
View file

@ -7,9 +7,7 @@ import { useRouter } from "vue-router";
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const {
dialogConfirm,
} = mixin;
const { dialogConfirm } = mixin;
const router = useRouter();
const routeName = router.currentRoute.value.name;
const amount = ref<number | null>();
@ -31,18 +29,17 @@ const props = defineProps({
},
insigniaList: {
type: Array,
default: []
default: [],
},
});
watch(props, () => {
if (props.modal) {
grandCross.value = ""
Org.value = ""
amount.value = null
if (props.modal === false) {
grandCross.value = "";
Org.value = "";
amount.value = null;
}
console.log("insigniaList===>", props.insigniaList)
})
});
const clickSave = () => {
dialogConfirm($q, () => props.save(grandCross.value, amount.value));
@ -54,22 +51,53 @@ const clickSave = () => {
<q-card style="width: 800px">
<q-toolbar class="q-py-sm">
<q-toolbar-title class="text-h6">จัดสรรเครื่องราชฯ </q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="closeModal"
style="color: #ff8080; background-color: #ffdede" />
<q-btn
icon="close"
unelevated
round
dense
@click="closeModal"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md">
<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-6">
<q-select hide-bottom-space :options="insigniaList" dense borderless
option-label="name" option-value="id" emit-value map-options outlined options-cover v-model="grandCross"
:label="routeName == 'insigniaAllocate' ? `เครื่องราชฯ` : `เลือกหน่วยงาน`" />
<q-select
hide-bottom-space
:options="insigniaList"
dense
borderless
option-label="name"
option-value="id"
emit-value
map-options
outlined
options-cover
v-model="grandCross"
:label="
routeName == 'insigniaAllocate'
? `เครื่องราชฯ`
: `เลือกหน่วยงาน`
"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input hide-bottom-space outlined class="inputgreen" v-model="amount" dense lazy-rules type="number"
label="จำนวน" />
<q-input
hide-bottom-space
outlined
class="inputgreen"
v-model="amount"
dense
lazy-rules
type="number"
label="จำนวน"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
</div>

478
src/modules/07_insignia/components/4_Allocate/Main.vue
View file

@ -4,26 +4,22 @@ import { ref, onMounted, watch, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
import type { FormProprsalsRound } from "@/modules/07_insignia/interface/request/Main";
import router from "@/router";
import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
import { useQuasar } from "quasar";
const DataStore = useResultDataStore();
const DataStore = useAllocateDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
const redirectToPage = (id: string, name: string) => {
DataStore.insigniaName = name
DataStore.insigniaName = name;
router.push(`/insignia/allocate/org/${id}`);
};
const paging = ref<boolean>(true);
@ -63,7 +59,7 @@ const fecthRound = async () => {
selectRoundOption.value = data.map((e: any) => ({
id: e.id,
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
year: e.year
year: e.year,
}));
selectRound.value = data[0].id;
roundYear.value = data[0].year;
@ -82,10 +78,13 @@ const fecthInsignia = async () => {
DataStore.fetchDatainsignia(data);
})
.catch((err) => {
messageError($q, err)
}).finally(async () => {
insigniaOp.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
messageError($q, err);
})
.finally(async () => {
insigniaOp.value = await DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value || x.type === ""
);
});
};
const fecthInsigniaType = async () => {
@ -96,7 +95,7 @@ const fecthInsigniaType = async () => {
DataStore.fetchDatainsigniaType(data);
tab.value = DataStore.insigniaType[0].name;
fecthlistInsignia()
// fecthlistInsignia();
fecthInsignia();
})
.catch((err) => {
@ -159,19 +158,18 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const rows = ref<FormProprsalsRound[]>([]);
watch(tab, () => {
insigniaOp.value = DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
console.log(DataStore.insigniaOp);
insigniaOp.value = DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value || x.type === ""
);
DataStore.insignia = "";
fecthlistInsignia();
});
const selectorInsignia = () => {
fecthlistInsignia();
};
const selectorRound = (round: string) => {
selectRound.value = round;
const yearFilter = selectRoundOption.value.find((x: any) => x.id == round)
const yearFilter = selectRoundOption.value.find((x: any) => x.id == round);
roundYear.value = yearFilter?.year;
};
@ -181,17 +179,7 @@ const fecthlistInsignia = async () => {
.get(config.API.insigniaManageType(tab.value, Number(roundYear.value)))
.then((res) => {
let data = res.data.result;
rows.value = [];
// console.log("dsata===>", data);
rows.value = data.map((e: any) => ({
id: e.id,
insignia: e.insignia,
insigniaId: e.insigniaId,
total: e.total,
allocate: e.allocate,
remain: e.remain,
// status: DataStore.status(e.status),
}));
DataStore.listinsignia(data);
})
.catch((err) => {
console.log(err);
@ -202,12 +190,12 @@ const fecthlistInsignia = async () => {
});
};
const filterRef = ref<QInput>();
const filter = ref<string>("");
const close = () => {
modal.value = false;
modalEdit.value = false;
};
const addData = () => {
@ -215,31 +203,78 @@ const addData = () => {
action.value = "addData";
};
const editData = (data: any) => {
personId.value = data.id;
profileType.value = data.profileType;
action.value = "editData";
modal.value = true;
const modalEdit = ref<boolean>(false);
const rowData = ref<any>([]);
const actionType = ref<string>("");
const clickEditrow = (data: any) => {
rowData.value = data;
modalEdit.value = true;
actionType.value = "insignia";
};
const save = async (insigniaId: string, total: string) => {
showLoader()
showLoader();
await http
.post(config.API.insigniaManageAdd(), {
insignia: insigniaId,
year: `${roundYear.value}`,
total: total,
})
.then((res) => {
fecthlistInsignia();
.then(async () => {
success($q, "บันทึกข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err)
}).finally(() => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const saveEdit = async (
id: string,
insigniaId: string,
total: Number,
year: Number
) => {
showLoader();
let body = {
insignia: insigniaId,
year: year,
total: Number(total),
};
await http
.put(config.API.insigniaManageById(id), body)
.then(async () => {
success($q, "แก้ไขข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const clickDelete = async (insigniaId: string) => {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.insigniaManageById(insigniaId))
.then(async () => {
success($q, "ลบข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@ -255,66 +290,152 @@ const resetFilter = () => {
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<selector hide-bottom-space borderless dense lazy-rules emit-value map-options options-dense option-label="name"
option-value="id" v-model="selectRound" :options="selectRoundOption" use-input input-debounce="0"
input-class="text-bold text-grey" @update:emit-value="selectorRound">
<selector
hide-bottom-space
borderless
dense
lazy-rules
emit-value
map-options
options-dense
option-label="name"
option-value="id"
v-model="selectRound"
:options="selectRoundOption"
use-input
input-debounce="0"
input-class="text-bold text-grey"
@update:emit-value="selectorRound"
>
</selector>
</div>
<q-separator />
<q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
<q-tabs
dense
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<div v-for="item in DataStore.insigniaType">
<q-tab :name="item.name" :label="item.label" />
</div>
</q-tabs>
<q-separator />
<div>
<div v-for="item in DataStore.insigniaType">
<div v-if="tab == item.name" class="q-pa-md">
<q-tab-panels v-model="tab" animated>
<q-tab-panel
v-for="item in DataStore.insigniaType"
:key="item.name"
:name="item.name"
class="q-pa-none"
>
<div class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<div>
<q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
:label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="insigniaOp"
option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
@update:model-value="selectorInsignia" />
<q-select
v-model="DataStore.insignia"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="insigniaOp"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="DataStore.selectInsignia"
/>
</div>
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</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 ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<d-table
ref="table"
:columns="columns"
:rows="DataStore.rows"
:filter="filter"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id, props.row.insignia)">
<q-tr
:props="props"
class="cursor-pointer"
@click="redirectToPage(props.row.id, props.row.insignia)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -333,155 +454,92 @@ const resetFilter = () => {
<q-td key="remain" :props="props">
{{ props.row.remain }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-list dense style="min-width: auto">
<q-item
clickable
v-close-popup
@click.stop="clickEditrow(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไข</q-tooltip>
<q-icon
color="primary"
size="xs"
name="mdi-pencil"
/>
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบ</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<div>
<q-btn flat round color="light-blue" icon="upload">
<!-- <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="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</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">
<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:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn dense size="12px" flat round color="primary" @click="editData(props.row)"
icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<div>
<q-btn flat round color="light-blue" icon="upload">
<!-- <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="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</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">
<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:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn dense size="12px" flat round color="primary" @click="editData(props.row)"
icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</div>
<DialogForm :modal="modal" :save="save" :close="close" :insignia-list="insigniaOp" />
</q-tab-panel>
</q-tab-panels>
</q-card>
<DialogForm
:modal="modal"
:save="save"
:close="close"
:insignia-list="insigniaOp"
/>
<DialogEdit
:modal="modalEdit"
:save="saveEdit"
:close="close"
:insigniadata="rowData"
:actionType="actionType"
/>
</template>
<style lang="scss" scoped>
.arrow {

274
src/modules/07_insignia/components/4_Allocate/OrgList.vue
View file

@ -9,15 +9,12 @@ import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
const DataStore = useResultDataStore();
const DataStore = useAllocateDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
const name = ref<string>("");
const $q = useQuasar(); //ใช้ noti quasar
@ -40,13 +37,13 @@ const stat = ref<any>({
onMounted(async () => {
fecthDashboard();
fecthListData();
name.value = DataStore.insigniaName
name.value = DataStore.insigniaName;
fetchOrgList()
fetchOrgList();
});
const fecthDashboard = async () => {
showLoader()
showLoader();
await http
.get(config.API.insigniaManageOrgDashboard(id.value))
.then((res) => {
@ -54,16 +51,16 @@ const fecthDashboard = async () => {
total: res.data.result.total,
allocate: res.data.result.allocate,
remain: res.data.result.remain,
}
};
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => hideLoader())
.finally(() => hideLoader());
};
const fecthListData = async () => {
showLoader()
showLoader();
await http
.get(config.API.insigniaManageOrg(id.value))
.then((res) => {
@ -74,12 +71,12 @@ const fecthListData = async () => {
total: e.total,
allocate: e.allocate,
remain: e.remain,
}))
}));
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => hideLoader())
.finally(() => hideLoader());
};
const fetchOrgList = async () => {
@ -87,46 +84,90 @@ const fetchOrgList = async () => {
await http
.get(config.API.typeOc())
.then(async (response: any) => {
orgList.value = response.data.result.map((e: any)=>({
orgList.value = response.data.result.map((e: any) => ({
id: e.organizationId,
name: e.organizationName
}))
name: e.organizationName,
}));
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => {
hideLoader();
});
.finally(() => {
hideLoader();
});
};
const backHistory = () => {
router.push(`/insignia/allocate`)
}
router.push(`/insignia/allocate`);
};
const close = () => {
modal.value = false;
modalEdit.value = false;
};
const save = async (organizationId: string, total: string) => {
showLoader()
showLoader();
await http
.post(config.API.insigniaManageOrgAdd(), {
"organizationOrganizationId": organizationId,
"insigniaManageId": id.value,
"total": total
organizationOrganizationId: organizationId,
insigniaManageId: id.value,
total: total,
})
.then((res) => {
fecthListData();
fecthDashboard();
})
.catch((err) => {
messageError($q, err)
}).finally(() => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const saveEdit = async (organizationId: string, amount: number) => {
showLoader();
await http
.put(config.API.insigniaManageOrg(organizationId), { total: Number(amount) })
.then(async () => {
success($q, "แก้ไขมูลสำเร็จ");
await fecthDashboard();
await fecthListData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const rowData = ref<any>([]);
const modalEdit = ref<boolean>(false);
const clickEditrow = (data: any) => {
rowData.value = data;
modalEdit.value = true;
};
const clickDelete = async (insigniaId: string) => {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.insigniaManageOrg(insigniaId))
.then(async () => {
success($q, "ลบข้อมูลสำเร็จ");
await fecthDashboard();
await fecthListData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const visibleColumns = ref<string[]>([
"no",
@ -189,7 +230,7 @@ const columns = ref<QTableProps["columns"]>([
const rows = ref<any[]>([]);
const clickAdd = () => {
modal.value = true
modal.value = true;
};
// ค้นหาในตาราง
@ -218,16 +259,37 @@ const paginationLabel = (start: string, end: string, total: string) => {
<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="backHistory" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="backHistory"
/>
หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนเครื่องราช ฯ ทั้งหมด" color="#016987" />
<cardTop :amount="stat.allocate" label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว" color="#02A998" />
<cardTop :amount="stat.remain" label="จำนวนเครื่องราช ฯ คงเหลือ" color="#2EA0FF" />
<cardTop
:amount="stat.total"
label="จำนวนเครื่องราช ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.allocate"
label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remain"
label="จำนวนเครื่องราช ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
@ -236,33 +298,79 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>จัดสรรเครื่องราชอิสริยาภรณ์ให้หน่วยงาน</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<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" />
<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-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
@ -286,18 +394,84 @@ const paginationLabel = (start: string, end: string, total: string) => {
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.remain }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: auto">
<q-item
clickable
v-close-popup
@click.stop="clickEditrow(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไข</q-tooltip>
<q-icon color="primary" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบ</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<DialogForm :modal="modal" :close="close" :save="save" :insignia-list="orgList" />
<DialogForm
:modal="modal"
:close="close"
:save="save"
:insignia-list="orgList"
/>
<DialogEdit
:modal="modalEdit"
:save="saveEdit"
:close="close"
:insigniadata="rowData"
/>
</template>
<style lang="scss" scope>

12
src/modules/07_insignia/components/5_Borrow/DialogForm.vue
View file

@ -2,12 +2,12 @@
import { ref, watch, computed } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
const DataStore = useResultDataStore();
const DataStore = useAllocateDataStore();
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
@ -114,10 +114,16 @@ const fetchOrgList = async () => {
await http
.get(config.API.typeOc())
.then(async (response: any) => {
OrgList.value = response.data.result.map((e: any) => ({
const orgArr = response.data.result.map((e: any) => ({
id: e.organizationId,
name: e.organizationName
}))
if (props.action == 'editData') {
OrgList.value = [{id: "00000000-0000-0000-0000-000000000000", name: 'สำนักนายกรัฐมนตรี'},...orgArr]
} else {
OrgList.value = orgArr
}
})
.catch((err) => {
messageError($q, err)

346
src/modules/07_insignia/components/5_Borrow/Main.vue
View file

@ -3,7 +3,7 @@ import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
@ -12,7 +12,7 @@ import type { QTableProps, QInput } from "quasar";
import { useQuasar } from "quasar";
// const router = useRouter();
const DataStore = useResultDataStore();
const DataStore = useBrrowDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
@ -46,24 +46,32 @@ const fecthRound = async () => {
.get(config.API.noteround())
.then((res) => {
let data = res.data.result;
selectRoundAllOption.value = [{
name: "ทั้งหมด",
id: "all",
year: 0,
}]
selectRoundAllOption.value = [
{
name: "ทั้งหมด",
id: "00000000-0000-0000-0000-000000000000",
year: 0,
},
];
data.map((e: any) => {
selectRoundOption.value = [...selectRoundOption.value, {
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
year: e.year
}]
selectRoundOption.value = [
...selectRoundOption.value,
{
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
year: e.year,
},
];
selectRoundAllOption.value = [...selectRoundAllOption.value, {
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
year: e.year
}]
selectRoundAllOption.value = [
...selectRoundAllOption.value,
{
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
year: e.year,
},
];
});
selectRound.value = data[0].id;
roundYear.value = data[0].year;
@ -79,13 +87,16 @@ const fecthInsignia = async () => {
.then((res) => {
// console.log(res);
let data = res.data.result;
DataStore.fetchDatainsignia(data);
DataStore.fetchDataInsignia(data);
})
.catch((err) => {
console.log(err);
}).finally(async () => {
insigniaList.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value || x.type == '')
})
.finally(async () => {
insigniaList.value = await DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value || x.type == ""
);
});
};
const fecthInsigniaType = async () => {
@ -252,7 +263,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "returnDate",
align: "left",
label: "วันที่ยืม",
label: "วันที่คืน",
field: "returnDate",
sortable: true,
sort: (a: string, b: string) =>
@ -276,49 +287,35 @@ const columns = ref<QTableProps["columns"]>([
]);
watch(tab, async () => {
insigniaList.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value || x.type == '')
insigniaList.value = await DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value || x.type == ""
);
DataStore.insignia = "";
fecthlistInsignia();
});
const selectorInsignia = () => {
fecthlistInsignia();
const selectorInsignia = async () => {
const dataCopy = await DataStore.listInsignia;
rows.value =
DataStore.insignia != ""
? dataCopy.filter((x: any) => x.requestInsigniaId == DataStore.insignia)
: dataCopy;
};
const selectorRound = (round: string) => {
selectRound.value = round;
};
// const selectorRound = (round: string) => {
// selectRound.value = round;
// };
const rows = ref<any[]>([]);
const fecthlistInsignia = async () => {
showLoader();
await http
.get(config.API.insigniaManageBorrowList(Number(roundYear.value), tab.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
rows.value = data.map((e: any) => ({
id: e.id,
citizenId: e.citizenId,
prefix: e.prefix,
position: e.position,
// status: DataStore.status(e.status),
name: e.fullName,
type: e.requestInsignia,
employeeType: DataStore.profileType(e.profileType),
profileType: e.profileType,
page: e.page,
number: e.no,
vatnumber: e.number,
datepay: date2Thai(e.datePayment),
typepay: e.typePayment,
address: e.address,
borrowOrganization: e.borrowOrganization,
borrowDate: e.borrowDate !== null ? date2Thai(e.borrowDate) : '-',
returnOrganization: e.returnOrganization,
returnDate: e.returnDate !== null ? date2Thai(e.returnDate) : '-',
returnReason: e.returnReason !== null ? e.returnReason : '-',
}));
.get(
config.API.insigniaManageBorrowList(Number(roundYear.value), tab.value)
)
.then(async (res) => {
await DataStore.fetchlistinsignia(res.data.result);
rows.value = DataStore.rows;
})
.catch((err) => {
console.log(err);
@ -338,7 +335,7 @@ const close = () => {
const closeAndFecth = () => {
modal.value = false;
fecthlistInsignia()
fecthlistInsignia();
};
const addData = () => {
@ -364,34 +361,63 @@ const resetFilter = () => {
ยืม-คืนเครื่องราชฯ
</div>
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
<q-tabs
dense
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<div v-for="item in DataStore.insigniaType">
<q-tab :name="item.name" :label="item.label" />
</div>
</q-tabs>
<q-separator />
<div>
<div v-for="item in DataStore.insigniaType">
<div v-if="tab == item.name" class="q-pa-md">
<q-tab-panels v-model="tab" animated>
<q-tab-panel
v-for="item in DataStore.insigniaType"
:key="item.name"
:name="item.name"
class="q-pa-none"
>
<div class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<div>
<!-- <div>
<q-select v-model="selectRound" dense outlined lazy-rules hide-bottom-space
:label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
:options="selectRoundAllOption" option-value="id" :readonly="false" :borderless="false"
:label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
:options="selectRoundAllOption" option-value="id" :borderless="false"
style="min-width: 150px" @update:emit-value="selectorRound" />
</div>
</div> -->
<div>
<q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
:label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="insigniaList"
option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
@update:model-value="selectorInsignia" />
<q-select
v-model="DataStore.insignia"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="insigniaList"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="selectorInsignia"
/>
</div>
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
@ -399,30 +425,68 @@ const resetFilter = () => {
<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:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'action'">
<div
v-else-if="
props.col.name == 'action' && props.row.returnDate == '-'
"
>
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
<q-btn
label="คืนเครื่องราชฯ"
@click="editData(props.row.id)"
color="blue"
/>
</q-td>
</div>
@ -433,111 +497,23 @@ const resetFilter = () => {
</template>
</d-table>
</div>
</q-tab-panel>
</q-tab-panels>
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</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">
<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:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'action'">
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
</q-td>
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</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">
<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:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'action'">
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
</q-td>
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</div>
<DialogForm :modal="modal" :close="close" :close-and-fecth="closeAndFecth" :round-id="selectRound" :action="action"
:profile-id="profileId" :selectRoundOption="selectRoundOption" :type-id="tab" />
<DialogForm
:modal="modal"
:close="close"
:close-and-fecth="closeAndFecth"
:round-id="
selectRound == '00000000-0000-0000-0000-000000000000'
? 'all'
: selectRound
"
:action="action"
:profile-id="profileId"
:select-round-option="selectRoundOption"
:type-id="tab"
/>
</q-card>
</template>
<style lang="scss" scoped>

67
src/modules/07_insignia/components/report/ReportView.vue
View file

@ -1,8 +1,19 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
const router = useRouter();
const store = useInsigniaDataStore();
const { setTypeandTitle } = store;
const nextPage = (type: string, title: string) => {
setTypeandTitle(type, title);
router.push("/insignia/report/report-02");
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รางงานเครื่องราชอิสริยาภรณ์
รายงานเครื่องราชอิสริยาภรณ์
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
@ -16,7 +27,7 @@
</q-item-section>
</q-item>
<q-item to="/insignia/report/report-01" dense class="hover-green">
<!-- <q-item to="/insignia/report/report-01" dense class="hover-green">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
@ -32,6 +43,52 @@
<q-item-section class="text-dark"
>รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
</q-item-section>
</q-item> -->
<q-item
clickable
@click="
nextPage('43', 'บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี')
"
dense
class="hover-green"
>
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('44', 'บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ')"
dense
class="hover-green"
>
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ
</q-item-section>
</q-item>
<q-item
clickable
@click="
nextPage('46', 'ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา')
"
dense
class="hover-green"
>
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
</q-item-section>
</q-item>
</div>
</q-card>
@ -41,9 +98,9 @@
<style lang="scss" scope>
.q-item.hover-green:hover {
background-color: #d5f1ee57;
border-radius: 2px ;
border-radius: 2px;
}
.q-item.hover-green{
.q-item.hover-green {
padding: 10px;
}
</style>

243
src/modules/07_insignia/components/report/Report_01.vue
View file

@ -1,36 +1,55 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const $q = useQuasar();
const myForm = ref<QForm>();
const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const dialog = ref<boolean>(false);
onMounted(async () => {
const pdfData = usePDF(
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
);
await fecthlistRound();
// const pdfData = usePDF(
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
// );
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
console.log(pdfData);
// setTimeout(() => {
// pdfSrc.value = pdfData.pdf.value;
// numOfPages.value = pdfData.pages.value;
// }, 1000);
// console.log(pdfData);
});
const splitterModel = ref(14);
const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
const fileId = ref<string>("");
const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
const optionsReport = ref<any>([
{ id: 1, name: "รายงานขร.1" },
{ id: 2, name: "รายงานขร.2" },
{ id: 3, name: "รายงานขร.3" },
{ id: 4, name: "รายงานขร.4" },
]);
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
const optionsList = ref<any>([
{ id: 1, name: "list 1" },
{ id: 2, name: "list 2" },
{ id: 39, name: "รายงานขร.1" },
{ id: 40, name: "รายงานขร.2" },
{ id: 41, name: "รายงานขร.3" },
{ id: 42, name: "รายงานขร.4" },
]);
const selectList = ref<any>();
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
const nextPage = () => {
if (page.value < numOfPages.value) {
page.value++;
@ -45,6 +64,95 @@ const backPage = () => {
const backHistory = () => {
window.history.back();
};
const fecthlistRound = async () => {
await http
.get(config.API.listRoundInsignia())
.then((res: any) => {
optionsList.value = res.data.result.map((e: any) => ({
id: e.period_id,
year: e.period_year,
name: e.period_name,
}));
})
.catch((err) => {
console.log(err);
messageError($q, err);
});
};
const updateSelect = () => {
conditionDocument("show");
};
const conditionDocument = (type: string) => {
myForm.value?.validate().then(async (success: boolean) => {
if (success) {
if (type == "show") {
await downloadReport("pdf", false);
} else {
// await downloadReport("pdf", false);
await downloadReport(type, true);
}
}
});
};
const showDocument = (url: any) => {
const pdfData = usePDF(url);
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
};
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const downloadReport = async (
type: string = "pdf",
download: boolean = true
) => {
showLoader();
await http
.get(
config.API.reportInsignia(
selectReport.value.id.toString(),
type,
selectList.value.id
),
{
responseType: "blob",
}
)
.then(async (res) => {
if (download) {
downloadFile(
res,
`${selectReport.value.name} ${selectList.value.name}.${type}`
);
} else {
const url = URL.createObjectURL(new Blob([res.data]));
// pdfSrc.value = "";
// numOfPages.value = 0;
showDocument(url);
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
@ -64,30 +172,85 @@ const backHistory = () => {
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md q-gutter-y-sm">
<q-toolbar style="padding: 0" >
<q-select
class="q-mr-sm"
dense
outlined
v-model="selectReport"
:options="optionsReport"
:label="optionsReport.name"
option-value="id"
option-label="name"
/>
<q-select
dense
outlined
v-model="selectList"
:options="optionsList"
:label="optionsList.name"
option-value="id"
option-label="name"
/>
<q-toolbar style="padding: 0">
<q-form ref="myForm" class="row items-center">
<q-select
use-input
fill-input
hide-selected
class="q-mr-sm"
dense
outlined
v-model="selectReport"
:options="optionsReport"
:label="optionsReport.name"
option-value="id"
option-label="name"
style="width: 150px"
@update:model-value="updateSelect"
/>
<q-select
class="q-pa-none"
use-input
fill-input
hide-selected
dense
outlined
v-model="selectList"
:options="optionsList"
label="เลือกรอบ"
option-value="id"
option-label="name"
:rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
@update:model-value="updateSelect"
/>
</q-form>
<!-- style="width: 200px" -->
<q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
<q-btn unelevated icon="mdi-eye" color="primary" label="แสดงรางงาน" />
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="conditionDocument('pdf')"
>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="conditionDocument('docx')"
>
<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-item
clickable
v-close-popup
@click="conditionDocument('xlsx')"
>
<q-item-section avatar
><q-icon color="green" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xlsx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
unelevated
icon="mdi-eye"
color="primary"
label="แสดงรายงาน"
@click="conditionDocument('show')"
/>
<q-btn
unelevated
color="blue"

439
src/modules/07_insignia/components/report/Report_02.vue Normal file
View file

@ -0,0 +1,439 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
const store = useInsigniaDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const { typeReport, titleReport } = store;
const $q = useQuasar();
const myForm = ref<QForm>();
const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const dialog = ref<boolean>(false);
onMounted(async () => {
await fecthlistRound();
// const pdfData = usePDF(
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
// );
// setTimeout(() => {
// pdfSrc.value = pdfData.pdf.value;
// numOfPages.value = pdfData.pages.value;
// }, 1000);
// console.log(pdfData);
});
const splitterModel = ref(14);
const fileId = ref<string>("");
const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
const optionsReport = ref<any>([
{ id: 39, name: "รายงานขร.1" },
{ id: 40, name: "รายงานขร.2" },
{ id: 41, name: "รายงานขร.3" },
{ id: 42, name: "รายงานขร.4" },
]);
const selectList = ref<any>();
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
const nextPage = () => {
if (page.value < numOfPages.value) {
page.value++;
}
};
const backPage = () => {
if (page.value !== 1) {
page.value--;
}
};
const backHistory = () => {
window.history.back();
};
const fecthlistRound = async () => {
await http
.get(config.API.listRoundInsignia())
.then((res: any) => {
optionsList.value = res.data.result.map((e: any) => ({
id: e.period_id,
year: e.period_year,
name: e.period_name,
}));
})
.catch((err) => {
console.log(err);
messageError($q, err);
});
};
const updateSelect = () => {
conditionDocument("show");
};
const conditionDocument = (type: string) => {
myForm.value?.validate().then(async (success: boolean) => {
if (success) {
if (type == "show") {
await downloadReport("pdf", false);
} else {
// await downloadReport("pdf", false);
await downloadReport(type, true);
}
}
});
};
const showDocument = (url: any) => {
const pdfData = usePDF(url);
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
};
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const downloadReport = async (
type: string = "pdf",
download: boolean = true
) => {
showLoader();
await http
.get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
responseType: "blob",
})
.then(async (res) => {
if (download) {
downloadFile(res, `${titleReport} ${selectList.value.name}.${type}`);
} else {
const url = URL.createObjectURL(new Blob([res.data]));
// pdfSrc.value = "";
// numOfPages.value = 0;
showDocument(url);
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<div class="toptitle">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="backHistory"
/>
{{ titleReport }}
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md q-gutter-y-sm">
<q-toolbar style="padding: 0">
<q-form ref="myForm" class="row items-center">
<!-- <q-select
use-input
fill-input
hide-selected
class="q-mr-sm"
dense
outlined
v-model="selectReport"
:options="optionsReport"
:label="optionsReport.name"
option-value="id"
option-label="name"
style="width: 150px"
@update:model-value="updateSelect"
/> -->
<q-select
class="q-pa-none"
use-input
fill-input
hide-selected
dense
outlined
v-model="selectList"
:options="optionsList"
label="เลือกรอบ"
option-value="id"
option-label="name"
:rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
@update:model-value="updateSelect"
/>
</q-form>
<!-- style="width: 200px" -->
<q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="conditionDocument('pdf')"
>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="conditionDocument('docx')"
>
<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-item
clickable
v-close-popup
@click="conditionDocument('xlsx')"
>
<q-item-section avatar
><q-icon color="green" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xlsx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
unelevated
icon="mdi-eye"
color="primary"
label="แสดงรายงาน"
@click="conditionDocument('show')"
/>
<q-btn
unelevated
color="blue"
icon="mdi-fullscreen"
@click="dialog = true"
dense
/>
</div>
</q-toolbar>
<q-splitter
v-model="splitterModel"
horizontal
style="
height: 70vh;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
"
before-class="overflow-hidden disable"
separator-class="bg-white disabled"
>
<template v-slot:before>
<div class="q-px-sm">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
</template>
<template v-slot:default>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
</q-splitter>
</div>
</q-card>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
</template>
<style lang="scss" scope>
.disabled {
pointer-events: none;
}
</style>

14
src/modules/07_insignia/router.ts
View file

@ -7,6 +7,8 @@ const ReportView = () =>
import("../07_insignia/components/report/ReportView.vue");
const report_01 = () =>
import("../07_insignia/components/report/Report_01.vue");
const report_02 = () =>
import("../07_insignia/components/report/Report_02.vue");
const RecordInsignia = () =>
import("@/modules/07_insignia/views/ResultPage.vue");
const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
@ -23,7 +25,7 @@ const allocateOrdList = () =>
const VatInsignia = () =>
import("@/modules/07_insignia/components/VatInsignia.vue");
// ยืม - คืนเครื่องราช
// ยืม - คืนเครื่องราช
const insigniaBorrow = () =>
import("@/modules/07_insignia/components/5_Borrow/Main.vue");
export default [
@ -108,6 +110,16 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/report/report-02",
name: "report-report-02",
component: report_02,
meta: {
Auth: true,
Key: [8.5],
Role: "insignia",
},
},
{
path: "/insignia/manage/list-manage",
name: "insigniaManage",

59
src/modules/07_insignia/store.ts
View file

@ -1,27 +1,30 @@
import { defineStore } from "pinia";
import { ref, } from "vue";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const {
date2Thai
} = mixin;
const { date2Thai } = mixin;
export const useInsigniaDataStore = defineStore("insignia", () => {
let optionsTypeOc = ref<any>([]);
let typeOc = ref<string>("")
const agency = ref<string>('')
let rows = ref<any>([])
const listinsignia = ref<any>([])
let typeOc = ref<string>("");
const agency = ref<string>("");
let rows = ref<any>([]);
const listinsignia = ref<any>([]);
const typeinsignia = ref<number | string>("all");
let typeinsigniaOptions = ref<any>([{ id: "all", name: "ทั้งหมด" }]);
const typeReport = ref<string>("");
const titleReport = ref<string>("");
const setTypeandTitle = (type: string, title: string) => {
typeReport.value = type;
titleReport.value = title;
};
const fetchData = async (data: any) => {
if (data !== null) {
rows.value = await data.map((e: any) =>
({
rows.value = await data.map((e: any) => ({
id: e.id,
citizenId: e.citizenId,
profileId: e.profileId,
@ -34,26 +37,27 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
insigniaSend: e.requestInsignia,
insigniaLevel: e.level,
dateSend: date2Thai(e.requestDate),
requestNote: e.requestNote
}))
listinsignia.value = await rows.value
filtertypeInsignia()
} else rows.value = []
}
requestNote: e.requestNote,
}));
listinsignia.value = await rows.value;
filtertypeInsignia();
} else rows.value = [];
};
const fetchOption = (op: any) => {
if (agency.value !== null) {
typeOc.value = agency.value
optionsTypeOc.value = op.filter((e: any) => e.id == agency.value
)
} else { optionsTypeOc.value = op, typeOc.value = op[2].id }
}
typeOc.value = agency.value;
optionsTypeOc.value = op.filter((e: any) => e.id == agency.value);
} else {
(optionsTypeOc.value = op), (typeOc.value = op[2].id);
}
};
const filtertypeInsignia = async () => {
typeinsignia.value = "all"
typeinsignia.value = "all";
if (listinsignia.value.length !== 0) {
const double_name = [
...new Set(listinsignia.value.map((item: any) => item.insigniaSend)),
];
typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
for (let i = 1; i <= double_name.length; i++) {
const type = double_name[i - 1];
const listtype = {
@ -61,9 +65,9 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
name: type,
};
// typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
typeinsigniaOptions.value.push(listtype)
typeinsigniaOptions.value.push(listtype);
}
} else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
} else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
};
const searchFilterTable = async () => {
@ -88,5 +92,8 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
fetchData,
fetchOption,
searchFilterTable,
setTypeandTitle,
typeReport,
titleReport,
};
});

76
src/modules/07_insignia/storeAllocate.ts
View file

@ -7,80 +7,45 @@ const {
date2Thai,
} = mixin;
export const useResultDataStore = defineStore("insigniaResult", () => {
export const useAllocateDataStore = defineStore("insigniaallocate", () => {
const insigniaName = ref<string>('')
const insignia = ref<string>('')
const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }])
const insigniaOp2 = ref<any[]>([])
const insigniaType = ref<any>()
const invoiceType = ref<string>('all')
const invoiceTypeop = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ใบกำกับที่ค้างจ่าย", id: "noDate" }, { name: "ใบกำกับที่จ่ายแล้ว", id: "haveDate" }])
const rows = ref<any>([])
const listInsignia = ref<any>([])
const fetchDatainsignia = async (data: any) => {
insignia.value = ''
invoiceType.value = 'all'
insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }]
data.forEach((e: any) => {
insigniaOp.value.push({ name: e.name, id: e.id, type: e.insigniaType.id })
});
}
const fetchDatainsigniaType = async (data: any) => {
insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
}
const fetchlistinsignia = async (data: any) => {
const listinsignia = async (data: any) => {
rows.value = [];
let alllist = await data.map((e: any) => ({
let list = await data.map((e: any) => ({
id: e.id,
citizenId: e.citizenId,
prefix: e.prefix,
position: e.position,
status: status(e.status),
dateReceive: date2Thai(e.dateReceive),
name: e.fullName,
type: e.requestInsignia,
employeeType: profileType(e.profileType),
profileType: e.profileType,
page: e.page,
number: e.no,
vatnumber: e.number,
datepay: date2Thai(e.datePayment),
typepay: e.typePayment,
address: e.address,
}));
rows.value = alllist
listInsignia.value = alllist
selectInvoice(invoiceType.value)
insignia: e.insignia,
insigniaId: e.insigniaId,
total: e.total,
allocate: e.allocate,
remain: e.remain,
year: e.year,
}))
rows.value = list
listInsignia.value = list
}
const selectInvoice = (invoice: string) => {
console.log(invoice);
if (invoice === "noDate") {
let list = listInsignia.value.filter((e: any) => e.datepay === null)
rows.value = list
} else if (invoice === "haveDate") {
let list = listInsignia.value.filter((e: any) => e.datepay !== null)
rows.value = list
const selectInsignia = () => {
console.log(insignia.value);
if (insignia.value !== "") {
rows.value = listInsignia.value.filter((e: any) => e.insigniaId === insignia.value)
} else rows.value = listInsignia.value
}
const status = (val: string) => {
switch (val) {
case "PENDING":
return "รอบันทึกข้อมูล";
case "REJECT":
return "ยกเลิก";
case "DELETE":
return "ลบ";
case "DONE":
return "บันทึกลง ก.พ. 7 แล้ว";
}
}
const profileType = (val: string) => {
switch (val) {
case "officer":
@ -89,21 +54,16 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
return "ลูกจ้างประจำ";
}
}
return {
rows,
insignia,
insigniaOp,
insigniaOp2,
insigniaType,
invoiceType,
invoiceTypeop,
fetchDatainsignia,
fetchDatainsigniaType,
status,
listinsignia,
selectInsignia,
profileType,
fetchlistinsignia,
selectInvoice,
insigniaName
};
});

97
src/modules/07_insignia/storeBrrow.ts Normal file
View file

@ -0,0 +1,97 @@
import { defineStore } from "pinia";
import { ref, } from "vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const {
date2Thai,
} = mixin;
export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
const insignia = ref<string>('')
const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }])
const insigniaType = ref<any>()
const rows = ref<any>([])
const listInsignia = ref<any>([])
const fetchDataInsignia = async (data: any) => {
insignia.value = ''
insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }]
data.forEach((e: any) => {
insigniaOp.value.push({ name: e.name, id: e.id, type: e.insigniaType.id })
});
}
const fetchDatainsigniaType = async (data: any) => {
insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
}
const fetchlistinsignia = async (data: any) => {
rows.value = [];
let list = await data.map((e: any) => ({
id: e.id,
citizenId: e.citizenId,
prefix: e.prefix,
position: e.position,
status: status(e.status),
name: e.fullName,
type: e.requestInsignia,
requestInsigniaId: e.requestInsigniaId,
employeeType: profileType(e.profileType),
profileType: e.profileType,
page: e.page,
number: e.no,
vatnumber: e.number,
datepay: date2Thai(e.datePayment),
typepay: e.typePayment,
address: e.address,
borrowOrganization: e.borrowOrganization,
borrowDate: e.borrowDate !== null ? date2Thai(e.borrowDate) : '-',
returnOrganization: e.returnOrganization,
returnDate: e.returnDate !== null ? date2Thai(e.returnDate) : '-',
returnReason: e.returnReason !== null ? e.returnReason : '-',
}));
rows.value = list
listInsignia.value = list
// selectInvoice(invoiceType.value)
}
const status = (val: string) => {
switch (val) {
case "PENDING":
return "รอบันทึกข้อมูล";
case "REJECT":
return "ยกเลิก";
case "DELETE":
return "ลบ";
case "DONE":
return "บันทึกลง ก.พ. 7 แล้ว";
}
}
const selectInsignia = () => {
console.log(insignia.value);
rows.value = listInsignia.value.filter((e: any) => e.insigniaId === insignia.value)
}
const profileType = (val: string) => {
switch (val) {
case "officer":
return "ข้าราชการ กทม.สามัญ";
case "employee":
return "ลูกจ้างประจำ";
}
}
return {
rows,
listInsignia,
insignia,
insigniaOp,
insigniaType,
fetchDatainsigniaType,
fetchDataInsignia,
selectInsignia,
profileType,
fetchlistinsignia,
};
});

6
src/modules/07_insignia/storeResult.ts
View file

@ -5,11 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
} = mixin;
export const useResultDataStore = defineStore("insigniaResult", () => {

622
src/modules/08_registryEmployee/views/Detail.vue
View file

@ -6,633 +6,13 @@
v-model:statusEdit="statusEdit"
:profileType="profileType"
/> -->
<Information
v-model:statusEdit="statusEdit"
:fetchDataProfile="fetchData"
:statusAdd="true"
/>
<Information :statusAdd="true" />
</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-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-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<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()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
</div>
</div>
<q-space />
<!-- <q-btn
round
flat
:color="reasonStatus ? 'primary' : 'pink-5'"
@click="clickRetire()"
:icon="
reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
"
>
<q-tooltip>{{
reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
}}</q-tooltip>
</q-btn> -->
<!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="clickKp7()">
<q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="clickKp7Short()">
<q-item-section class="text-primary"
>ประวัติแบบย่อ</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</div>
</q-page-sticky>
</div>
<q-dialog v-model="dialog" persistent>
<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-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
:src="pdfSrc"
:currentpage="pdfCurrentPage"
:totalpage="pdfTotalPage"
></viewpdf> -->
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="dialogShort" persistent>
<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-card-section>
<q-card-section class="q-p-sm">
<!-- <viewpdf
:src="pdfSrcShort"
:currentpage="pdfCurrentPageShort"
:totalpage="pdfTotalPageShort"
></viewpdf> -->
</q-card-section>
</q-card>
</q-dialog>
<!-- Dialog เลือก Image -->
<q-dialog v-model="dialogImage" persistent>
<q-card style="width: 100vw; max-width: 60vw">
<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-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="col-3" @click="addNewImage">
<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"
>
<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 :class="getClass(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"
>
<q-btn
icon="delete"
unelevated
round
dense
@click="deletePhoto"
style="color: #ff8080"
/>
</div> -->
<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"
/>
</div>
</q-img>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<!-- <q-btn
flat
round
color="red"
@click="() => {}"
icon="mdi-delete-outline"
>
<q-tooltip>ลบรูปภาพ</q-tooltip>
</q-btn> -->
<q-btn
icon="check"
dense
flat
round
@click="selectAvatarHistory"
color="positive"
>
<q-tooltip>เลือกรูปภาพ</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import Information from "@/modules/08_registryEmployee/views/information.vue";
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const store = useDataStore();
const { changeTab } = store;
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
dialogMessage,
success,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const router = useRouter();
const imageUrl = ref<any>(null);
const inputImage = ref<any>(null);
const fullname = ref<string>("");
const position = ref<string>("นักจัดการงานทั่วไป");
const dialog = ref<boolean>(false);
const dialogShort = ref<boolean>(false);
const dialogLeave = ref<boolean>(false);
const dialogImage = ref<boolean>(false);
const loader = ref<boolean>(false); //รอโหลด
const statusEdit = ref<boolean>(false);
const activeImage = ref<any | null>(null);
const images = ref<any>([]);
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
// const profileId = ref<string>("");
const profileType = ref<string>("");
const leaveDate = ref<Date>(new Date());
const leaveDetail = ref<string>("");
const leaveNumberOrder = ref<string>("");
const leaveDateOrder = ref<Date>(new Date());
const reason = ref<string>("");
const reasonStatus = ref<boolean>(false);
const leaveReason = ref<string>("");
const reasonOptions = ref<DataOption[]>([
{
id: "retire",
name: "เกษียณอายุราชการ",
},
{
id: "resign",
name: "ลาออก",
},
{
id: "transfer",
name: "ให้โอน",
},
{
id: "death",
name: "ถึงแก่กรรม",
},
{
id: "layoff",
name: "ให้ออก",
},
{
id: "discharge",
name: "ปลดออก",
},
{
id: "dismiss",
name: "ไล่ออก",
},
// {
// id: "change",
// name: "เปลี่ยนประเภทข้าราชการ",
// },
{
id: "other",
name: "อื่นๆ",
},
]);
onMounted(async () => {
await checkProfileData();
await fetchData();
// await changeTab("information");
});
const fetchData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarId(profileId.value))
.then((res) => {
const data = res.data.result;
fullname.value = data.fullname;
imageUrl.value = data.avatar;
position.value = data.position;
profileType.value = data.profileType;
const reason = reasonOptions.value.filter(
(r: DataOption) => r.id == data.leaveReason
);
if (reason.length > 0) {
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
} else {
leaveReason.value = "";
}
reasonStatus.value = reason.length > 0 ? true : false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const checkProfileData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileCheckId(profileId.value))
.then((res) => {
let data = res.data.result;
if (data == false) router.push("/registry");
})
.catch((e) => {
router.push("/registry");
})
.finally(() => {
hideLoader();
});
}
};
const fetchAvatarHistory = async () => {
if (profileId.value !== "") {
showLoader();
await http
.get(config.API.profileAvatarHistoryId(profileId.value))
.then((res) => {
let data = res.data.result;
images.value = [];
data.map((e: any) => {
images.value.push({
id: e.id,
avatar: e.avatar,
avatarId: e.avatarId,
createdDate: new Date(e.createdDate),
isActive: e.isActive,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const uploadImage = async (e: any) => {
if (profileId.value !== "") {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
formData.append("FileData", input[0]);
showLoader();
await http
.post(config.API.profileAvatarId(profileId.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
dialogImage.value = false;
});
return;
}
}
};
const fetchDataDelete = async (id: string) => {
showLoader();
await http
.delete(config.API.profileAvatarHistoryId(id))
.then((res) => {
success($q, "ลบรูปภาพสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await clickImage();
// dialogImage.value = false;
});
};
const deletePhoto = async (id: string) => {
dialogMessage(
$q,
"ลบข้อมูล",
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
"delete",
undefined,
"red",
() => fetchDataDelete(id),
undefined,
false
);
};
const selectAvatarHistory = async () => {
if (activeImage.value == null) {
dialogMessage(
$q,
"ไม่สามารถเปลี่ยนรูปได้",
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
}
if (profileId.value !== "") {
showLoader();
await http
.put(config.API.profileAvatarId(profileId.value), {
avatar: activeImage.value.avatarId,
})
.then((res) => {
dialogImage.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
const imageActive = (n: any) => {
activeImage.value = n;
};
const imageClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders bg-grey-2 image-size-default": val,
"rounded-borders bg-grey-2 image-size-full": !val,
};
};
const getClass = (n: any) => {
const val = n == activeImage.value;
return {
"rounded-borders border-green shadow-1": val,
"rounded-borders shadow-1": !val,
};
};
const addNewImage = async () => {
inputImage.value.click();
await imageActive(null);
};
const clickImage = async () => {
await fetchAvatarHistory();
dialogImage.value = true;
};
const closeImage = () => {
dialogImage.value = false;
};
const closeLeave = () => {
dialogLeave.value = false;
};
const closeKp7 = () => {
dialog.value = false;
};
const closeKp7Short = () => {
dialogShort.value = false;
};
const downloadKP7 = () => {};
const downloadKP7Short = () => {};
const clickKp7 = async () => {
if (profileId.value !== "") {
window.open(config.API.profileReportId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileReportId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrc.value = "data:application/pdf;base64," + res.data;
// pdfCurrentPage.value = 1;
// pdfTotalPage.value = 7;
// dialog.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
const clickKp7Short = async () => {
if (profileId.value !== "") {
window.open(config.API.profileKp7ShortId(profileId.value));
}
// showLoader();
// await http
// .get(config.API.profileKp7ShortId(profileId.value))
// .then((res) => {
// if (res.data) {
// pdfSrcShort.value = "g==";
// pdfCurrentPageShort.value = 1;
// pdfTotalPageShort.value = 7;
// dialogShort.value = true;
// }
// })
// .catch((e) => {messageError($q, e);})
// .finally(() => {
// hideLoader();
// });
};
</script>
<style>
.image-size-default {

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

@ -392,6 +392,60 @@
/>
</div>
</q-card>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
@ -688,6 +742,9 @@ const visibleColumnsHistory = ref<String[]>([
"createdFullName",
"createdAt",
]);
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
onMounted(async () => {
await fetchPerson();
@ -729,6 +786,19 @@ const onCancel = async () => {
await fetchData();
};
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
};
const addNewImage = async () => {
inputImage.value.click();
};
/**
* get รายการ ข้อมูลเกี่ยวกับบุคคล
*/
@ -967,9 +1037,11 @@ const calRetire = async (birth: Date) => {
})
.catch((e: any) => {
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = dateBefore.value;
changeRetireText(date2Thai(retire));
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
// informaData.value.birthDate = dateBefore.value;
// changeRetireText(date2Thai(retire));
informaData.value.birthDate = null;
informaData.value.age = "";
})
.finally(() => {
hideLoader();
@ -1063,29 +1135,63 @@ const editData = async () => {
};
const addData = async () => {
const body = {
citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname,
lastName: informaData.value.lastname,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,
createdAt: new Date(),
age: null,
employeeType: informaData.value.employeeType,
employeeClass: informaData.value.employeeClass,
profileType: informaData.value.profileType,
createdFullName: "-",
};
// const formData = {
// citizenId: informaData.value.cardid,
// prefixId: informaData.value.prefixId,
// firstName: informaData.value.firstname,
// lastName: informaData.value.lastname,
// genderId: informaData.value.genderId,
// nationality: informaData.value.nationality,
// race: informaData.value.ethnicity,
// religionId: informaData.value.religionId,
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
// bloodGroupId: informaData.value.bloodId,
// relationshipId: informaData.value.statusId,
// telephoneNumber: informaData.value.tel,
// createdAt: new Date(),
// age: null,
// employeeType: informaData.value.employeeType,
// employeeClass: informaData.value.employeeClass,
// profileType: informaData.value.profileType,
// createdFullName: "-",
// };
const formData = new FormData();
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("citizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("prefixId", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("firstName", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("lastName", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("genderId", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("religionId", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append(
"birthDate",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("bloodGroupId", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("relationshipId", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("telephoneNumber", informaData.value.tel);
if (informaData.value.employeeType != undefined)
formData.append("employeeType", informaData.value.employeeType);
if (informaData.value.employeeClass != undefined)
formData.append("employeeClass", informaData.value.employeeClass);
showLoader();
await http
.post(config.API.profileEmployeeIn, body)
.post(config.API.profileEmployeeIn, formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
@ -1100,7 +1206,7 @@ const addData = async () => {
await clickBack();
hideLoader();
});
console.log(body);
// console.log(body);
hideLoader();
};

12
src/modules/09_coin/components/coinReport/coinReportDetail.vue
View file

@ -64,8 +64,7 @@ const backHistory = () => {
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md q-gutter-y-md">
<q-toolbar style="padding: 0" >
<q-toolbar style="padding: 0">
<q-select
dense
outlined
@ -77,8 +76,13 @@ const backHistory = () => {
/>
<q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
<q-btn outline color="primary" icon="mdi-arrow-down-bold-circle-outline" label="ดาวน์โหลด" />
<q-btn icon="mdi-eye-outline" color="primary" label="แสดงรางงาน" />
<q-btn
outline
color="primary"
icon="mdi-arrow-down-bold-circle-outline"
label="ดาวน์โหลด"
/>
<q-btn icon="mdi-eye-outline" color="primary" label="แสดงรายงาน" />
<!-- <q-btn
color="primary"
icon="mdi-fullscreen"

7
src/modules/09_coin/components/coinReport/coinReportMain.vue
View file

@ -2,7 +2,7 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รางงานเครื่องราชอิสริยาภรณ์
รายงานเครื่องราชอิสริยาภรณ์
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
@ -12,7 +12,8 @@
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
บัญชีแสดงจำนวนชั้นตราเหรียนจักรพรรดิมาลา ซึ่งขอพระราชทานให้เเก่ข้าราชการ
บัญชีแสดงจำนวนชั้นตราเหรียนจักรพรรดิมาลา
ซึ่งขอพระราชทานให้เเก่ข้าราชการ
</q-item-section>
</q-item>
@ -24,7 +25,6 @@
บันทึกรายชื่อข้าราชการผู้ขอพระราชทานเหรียญจักรพรรคดิมาลาและประวัติข้าราชการสามัญฯ
</q-item-section>
</q-item>
</div>
</q-card>
</div>
@ -34,5 +34,4 @@
.hover-green:hover {
background-color: $teal-1;
}
</style>