dowload show report เครื่องราช
This commit is contained in:
Thanit Konmek
parent
4ca00ceadb
commit
257bb32247
9 changed files with 576 additions and 1589 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
*/
|
*/
|
||||||
import env from "../index";
|
import env from "../index";
|
||||||
const insignia = `${env.API_URI}/insignia`;
|
const insignia = `${env.API_URI}/insignia`;
|
||||||
const report = `${env.API_URI}/report`;
|
const report = `${env.API_REPORT2_URI}/report`;
|
||||||
const Organization = `${env.API_URI}/Organization`;
|
const Organization = `${env.API_URI}/Organization`;
|
||||||
export default {
|
export default {
|
||||||
getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
|
getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
|
||||||
|
|
|
||||||
|
|
@ -2,476 +2,13 @@
|
||||||
<div class="col-12 row">
|
<div class="col-12 row">
|
||||||
<div class="row col-12" style="padding-top: 80px">
|
<div class="row col-12" style="padding-top: 80px">
|
||||||
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
||||||
<Information
|
<Information :statusAdd="true" />
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:fetchDataProfile="fetchData"
|
|
||||||
:statusAdd="true"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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 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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.image-size-default {
|
.image-size-default {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,58 @@
|
||||||
<template>
|
<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">
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
<HeaderTop
|
<HeaderTop
|
||||||
v-model:edit="edit"
|
v-model:edit="edit"
|
||||||
|
|
@ -6,11 +60,9 @@
|
||||||
icon="mdi-account"
|
icon="mdi-account"
|
||||||
:save="saveData"
|
:save="saveData"
|
||||||
:history="!statusAdd()"
|
:history="!statusAdd()"
|
||||||
:disable="statusEdit"
|
|
||||||
:cancel="onCancel"
|
|
||||||
:historyClick="clickHistory"
|
|
||||||
:addEmployee="statusAdd()"
|
:addEmployee="statusAdd()"
|
||||||
/>
|
/>
|
||||||
|
<!-- :disable="statusEdit" -->
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-form ref="myform" class="col-12">
|
<q-form ref="myform" class="col-12">
|
||||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||||
|
|
@ -288,6 +340,12 @@
|
||||||
v-model="informaData.tel"
|
v-model="informaData.tel"
|
||||||
:label="`${'เบอร์โทร'}`"
|
:label="`${'เบอร์โทร'}`"
|
||||||
mask="##########"
|
mask="##########"
|
||||||
|
:rules="[
|
||||||
|
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||||
|
(val:string) =>
|
||||||
|
val.length >= 10 ||
|
||||||
|
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||||
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -350,32 +408,6 @@
|
||||||
</div>
|
</div>
|
||||||
</q-form>
|
</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">
|
<div class="row col-12 q-pa-sm">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn
|
<q-btn
|
||||||
|
|
@ -400,35 +432,23 @@ import type {
|
||||||
DataOption,
|
DataOption,
|
||||||
} from "@/modules/04_registry/components/profileType";
|
} from "@/modules/04_registry/components/profileType";
|
||||||
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
||||||
import type {
|
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
|
||||||
RequestItemsHistoryObject,
|
|
||||||
Columns,
|
|
||||||
} from "@/modules/04_registry/interface/request/Information";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
|
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
|
||||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||||
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
|
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
|
||||||
import HistoryTable from "@/components/TableHistory.vue";
|
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||||
import type { QTableColumn, QForm } from "quasar";
|
import type { QForm } from "quasar";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
statusEdit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
fetchDataProfile: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
statusAdd: {
|
statusAdd: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["update:statusEdit"]);
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
@ -446,16 +466,16 @@ const {
|
||||||
|
|
||||||
const profileStore = useProfileDataStore();
|
const profileStore = useProfileDataStore();
|
||||||
const { changeRetireText, changeBirth } = profileStore;
|
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 edit = ref<boolean>(false);
|
||||||
const defaultCitizenData = ref<string>("");
|
const defaultCitizenData = ref<string>("");
|
||||||
const informaData = ref<Information>(defaultInformation);
|
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 myform = ref<QForm | null>(null);
|
||||||
const dateBefore = ref<Date>(new Date());
|
const dateBefore = ref<Date>(new Date());
|
||||||
const same = ref<string>("0");
|
|
||||||
const Ops = ref<InformationOps>({
|
const Ops = ref<InformationOps>({
|
||||||
prefixOps: [],
|
prefixOps: [],
|
||||||
prefixOldOps: [],
|
prefixOldOps: [],
|
||||||
|
|
@ -488,206 +508,10 @@ const OpsFilter = ref<InformationOps>({
|
||||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
{ 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 () => {
|
onMounted(async () => {
|
||||||
await fetchPerson();
|
await fetchPerson();
|
||||||
emit("update:statusEdit", false);
|
// emit("update:statusEdit", false);
|
||||||
defaultAdd();
|
defaultAdd();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -718,11 +542,38 @@ const defaultAdd = () => {
|
||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCancel = async () => {
|
const addNewImage = async () => {
|
||||||
if (myform.value != null) {
|
inputImage.value.click();
|
||||||
myform.value.reset();
|
};
|
||||||
|
|
||||||
|
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) => {
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||||
switch (refData) {
|
switch (refData) {
|
||||||
|
|
@ -942,11 +747,6 @@ const handleDate = async (modelData: Date) => {
|
||||||
await calRetire(modelData);
|
await calRetire(modelData);
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchDataComponent = async (modelData: Date) => {
|
|
||||||
await props.fetchDataProfile();
|
|
||||||
await fetchData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const calRetire = async (birth: Date) => {
|
const calRetire = async (birth: Date) => {
|
||||||
const body = {
|
const body = {
|
||||||
birthDate: dateToISO(birth),
|
birthDate: dateToISO(birth),
|
||||||
|
|
@ -963,9 +763,11 @@ const calRetire = async (birth: Date) => {
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||||
informaData.value.birthDate = dateBefore.value;
|
informaData.value.birthDate = null;
|
||||||
changeRetireText(date2Thai(retire));
|
informaData.value.age = "";
|
||||||
|
// dateBefore.value;
|
||||||
|
// changeRetireText(null);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
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 () => {
|
const addData = async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
|
|
||||||
|
|
@ -1079,30 +794,34 @@ const addData = async () => {
|
||||||
// };
|
// };
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
||||||
if (informaData.value.cardid != undefined)
|
if (informaData.value.cardid != undefined)
|
||||||
formData.append("CitizenId", informaData.value.cardid);
|
formData.append("CitizenId", informaData.value.cardid);
|
||||||
if (informaData.value.prefixId != undefined)
|
if (informaData.value.prefixId != undefined)
|
||||||
formData.append("Prefix", informaData.value.prefixId);
|
formData.append("Prefix", informaData.value.prefixId);
|
||||||
if (informaData.value.firstname != undefined)
|
if (informaData.value.firstname != undefined)
|
||||||
formData.append("Firstname", informaData.value.firstname);
|
formData.append("Firstname", informaData.value.firstname);
|
||||||
if (informaData.value.lastname != undefined)
|
if (informaData.value.lastname != undefined)
|
||||||
formData.append("Lastname", informaData.value.lastname);
|
formData.append("Lastname", informaData.value.lastname);
|
||||||
if (informaData.value.genderId != undefined)
|
if (informaData.value.genderId != undefined)
|
||||||
formData.append("Gender", informaData.value.genderId);
|
formData.append("Gender", informaData.value.genderId);
|
||||||
if (informaData.value.nationality != undefined)
|
if (informaData.value.nationality != undefined)
|
||||||
formData.append("Nationality", informaData.value.nationality);
|
formData.append("Nationality", informaData.value.nationality);
|
||||||
if (informaData.value.ethnicity != undefined)
|
if (informaData.value.ethnicity != undefined)
|
||||||
formData.append("Race", informaData.value.ethnicity);
|
formData.append("Race", informaData.value.ethnicity);
|
||||||
if (informaData.value.religionId != undefined)
|
if (informaData.value.religionId != undefined)
|
||||||
formData.append("Religion", informaData.value.religionId);
|
formData.append("Religion", informaData.value.religionId);
|
||||||
if (informaData.value.birthDate != undefined)
|
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)
|
if (informaData.value.bloodId != undefined)
|
||||||
formData.append("BloodGroup", informaData.value.bloodId);
|
formData.append("BloodGroup", informaData.value.bloodId);
|
||||||
if (informaData.value.statusId != undefined)
|
if (informaData.value.statusId != undefined)
|
||||||
formData.append("Relationship", informaData.value.statusId);
|
formData.append("Relationship", informaData.value.statusId);
|
||||||
if (informaData.value.tel != undefined)
|
if (informaData.value.tel != undefined)
|
||||||
formData.append("TelephoneNumber", informaData.value.tel);
|
formData.append("TelephoneNumber", informaData.value.tel);
|
||||||
|
|
||||||
await http
|
await http
|
||||||
.post(config.API.receiveData(), formData)
|
.post(config.API.receiveData(), formData)
|
||||||
|
|
@ -1123,7 +842,7 @@ const saveData = async () => {
|
||||||
if (myform.value != null) {
|
if (myform.value != null) {
|
||||||
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
||||||
if (saveDataTest) {
|
if (saveDataTest) {
|
||||||
addData();
|
addData();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -196,6 +196,9 @@ const props = defineProps({
|
||||||
roleUser: {
|
roleUser: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
roundName: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
requestStatus: {
|
requestStatus: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
|
@ -359,13 +362,13 @@ const downloadFile = (response: any, filename: string) => {
|
||||||
const downloadReport = async (type: string = "pdf") => {
|
const downloadReport = async (type: string = "pdf") => {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(config.API.reportInsignia("45", type, fileId.value), {
|
.get(config.API.reportInsignia("45", type, props.roundId!), {
|
||||||
responseType: "blob",
|
responseType: "blob",
|
||||||
})
|
})
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
downloadFile(
|
downloadFile(
|
||||||
res,
|
res,
|
||||||
`บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
|
`บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
|
|
@ -595,15 +598,31 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
|
||||||
@update:model-value="DataStore.searchFilterTable"
|
@update:model-value="DataStore.searchFilterTable"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<q-btn
|
<q-btn size="md" icon="mdi-download" flat round color="primary">
|
||||||
size="md"
|
<!-- @click="downloadReport('pdf')" -->
|
||||||
icon="mdi-download"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="primary"
|
|
||||||
@click="downloadReport('pdf')"
|
|
||||||
>
|
|
||||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
<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>
|
||||||
<q-btn
|
<q-btn
|
||||||
size="12px"
|
size="12px"
|
||||||
|
|
|
||||||
|
|
@ -74,6 +74,7 @@ const fecthlistRound = async () => {
|
||||||
// const lastIndex = optionRound.value.length;
|
// const lastIndex = optionRound.value.length;
|
||||||
const lastValue = optionRound.value[0];
|
const lastValue = optionRound.value[0];
|
||||||
round.value = lastValue.id.toString();
|
round.value = lastValue.id.toString();
|
||||||
|
roundName.value = lastValue.name;
|
||||||
fecthStat(round.value);
|
fecthStat(round.value);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
|
|
@ -405,6 +406,7 @@ const requestSendNote = async () => {
|
||||||
<tab1
|
<tab1
|
||||||
:tab="tab"
|
:tab="tab"
|
||||||
:roundId="round"
|
:roundId="round"
|
||||||
|
:roundName="roundName"
|
||||||
:fecthInsigniaByOc="fecthInsigniaByOc"
|
:fecthInsigniaByOc="fecthInsigniaByOc"
|
||||||
:role-user="roleUser"
|
:role-user="roleUser"
|
||||||
:request-status="requestStatus"
|
:request-status="requestStatus"
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ import { useQuasar } from "quasar";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type { QForm } from "quasar";
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const {
|
const {
|
||||||
date2Thai,
|
date2Thai,
|
||||||
|
|
@ -18,20 +20,22 @@ const {
|
||||||
} = mixin;
|
} = mixin;
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const myForm = ref<QForm>();
|
||||||
const pdfSrc = ref<any>();
|
const pdfSrc = ref<any>();
|
||||||
const numOfPages = ref<number>(0);
|
const numOfPages = ref<number>(0);
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1);
|
||||||
const dialog = ref<boolean>(false);
|
const dialog = ref<boolean>(false);
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const pdfData = usePDF(
|
await fecthlistRound();
|
||||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
// const pdfData = usePDF(
|
||||||
);
|
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||||
|
// );
|
||||||
|
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
pdfSrc.value = pdfData.pdf.value;
|
// pdfSrc.value = pdfData.pdf.value;
|
||||||
numOfPages.value = pdfData.pages.value;
|
// numOfPages.value = pdfData.pages.value;
|
||||||
}, 1000);
|
// }, 1000);
|
||||||
console.log(pdfData);
|
// console.log(pdfData);
|
||||||
});
|
});
|
||||||
|
|
||||||
const splitterModel = ref(14);
|
const splitterModel = ref(14);
|
||||||
|
|
@ -43,11 +47,9 @@ const optionsReport = ref<any>([
|
||||||
{ id: 41, name: "รายงานขร.3" },
|
{ id: 41, name: "รายงานขร.3" },
|
||||||
{ id: 42, name: "รายงานขร.4" },
|
{ id: 42, name: "รายงานขร.4" },
|
||||||
]);
|
]);
|
||||||
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
|
const selectList = ref<any>();
|
||||||
const optionsList = ref<any>([
|
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
|
||||||
{ id: 1, name: "list 1" },
|
|
||||||
{ id: 2, name: "list 2" },
|
|
||||||
]);
|
|
||||||
const nextPage = () => {
|
const nextPage = () => {
|
||||||
if (page.value < numOfPages.value) {
|
if (page.value < numOfPages.value) {
|
||||||
page.value++;
|
page.value++;
|
||||||
|
|
@ -63,6 +65,44 @@ const backHistory = () => {
|
||||||
window.history.back();
|
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 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 downloadFile = (response: any, filename: string) => {
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
var fileName = filename;
|
var fileName = filename;
|
||||||
|
|
@ -73,21 +113,34 @@ const downloadFile = (response: any, filename: string) => {
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadReport = async (type: string = "pdf") => {
|
const downloadReport = async (
|
||||||
|
type: string = "pdf",
|
||||||
|
download: boolean = true
|
||||||
|
) => {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(
|
.get(
|
||||||
config.API.reportInsignia(
|
config.API.reportInsignia(
|
||||||
selectReport.value.id.toString(),
|
selectReport.value.id.toString(),
|
||||||
type,
|
type,
|
||||||
fileId.value
|
selectList.value.id
|
||||||
),
|
),
|
||||||
{
|
{
|
||||||
responseType: "blob",
|
responseType: "blob",
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
downloadFile(res, `${selectReport.value.name}.${type}`);
|
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) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -116,39 +169,81 @@ const downloadReport = async (type: string = "pdf") => {
|
||||||
<q-card flat bordered class="col-12 q-mt-sm">
|
<q-card flat bordered class="col-12 q-mt-sm">
|
||||||
<div class="q-pa-md q-gutter-y-sm">
|
<div class="q-pa-md q-gutter-y-sm">
|
||||||
<q-toolbar style="padding: 0">
|
<q-toolbar style="padding: 0">
|
||||||
<q-select
|
<q-form ref="myForm" class="row items-center">
|
||||||
class="q-mr-sm"
|
<q-select
|
||||||
dense
|
use-input
|
||||||
outlined
|
fill-input
|
||||||
v-model="selectReport"
|
hide-selected
|
||||||
:options="optionsReport"
|
class="q-mr-sm"
|
||||||
:label="optionsReport.name"
|
dense
|
||||||
option-value="id"
|
outlined
|
||||||
option-label="name"
|
v-model="selectReport"
|
||||||
/>
|
:options="optionsReport"
|
||||||
<q-select
|
:label="optionsReport.name"
|
||||||
dense
|
option-value="id"
|
||||||
outlined
|
option-label="name"
|
||||||
v-model="selectList"
|
style="width: 150px"
|
||||||
:options="optionsList"
|
/>
|
||||||
:label="optionsList.name"
|
<q-select
|
||||||
option-value="id"
|
class="q-pa-none"
|
||||||
option-label="name"
|
use-input
|
||||||
/>
|
fill-input
|
||||||
|
hide-selected
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="selectList"
|
||||||
|
:options="optionsList"
|
||||||
|
label="เลือกรอบ"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
:rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
<!-- style="width: 200px" -->
|
||||||
<q-space />
|
<q-space />
|
||||||
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
||||||
<q-btn
|
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
|
||||||
outline
|
<q-menu>
|
||||||
color="primary"
|
<q-list style="min-width: 150px">
|
||||||
icon="download"
|
<q-item
|
||||||
label="ดาวน์โหลด"
|
clickable
|
||||||
@click="downloadReport('pdf')"
|
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
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
icon="mdi-eye"
|
icon="mdi-eye"
|
||||||
color="primary"
|
color="primary"
|
||||||
label="แสดงรายงาน"
|
label="แสดงรายงาน"
|
||||||
|
@click="conditionDocument('show')"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
|
|
|
||||||
|
|
@ -2,37 +2,57 @@
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
|
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
|
||||||
|
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type { QForm } from "quasar";
|
||||||
|
|
||||||
const store = useInsigniaDataStore();
|
const store = useInsigniaDataStore();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { messageError, showLoader, hideLoader } = mixin;
|
const {
|
||||||
|
date2Thai,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
dialogConfirm,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
const { typeReport, titleReport } = store;
|
const { typeReport, titleReport } = store;
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const myForm = ref<QForm>();
|
||||||
const pdfSrc = ref<any>();
|
const pdfSrc = ref<any>();
|
||||||
const numOfPages = ref<number>(0);
|
const numOfPages = ref<number>(0);
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1);
|
||||||
const dialog = ref<boolean>(false);
|
const dialog = ref<boolean>(false);
|
||||||
onMounted(async () => {
|
|
||||||
const pdfData = usePDF(
|
|
||||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
||||||
);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
onMounted(async () => {
|
||||||
pdfSrc.value = pdfData.pdf.value;
|
await fecthlistRound();
|
||||||
numOfPages.value = pdfData.pages.value;
|
// const pdfData = usePDF(
|
||||||
}, 1000);
|
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||||
console.log(pdfData);
|
// );
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// pdfSrc.value = pdfData.pdf.value;
|
||||||
|
// numOfPages.value = pdfData.pages.value;
|
||||||
|
// }, 1000);
|
||||||
|
// console.log(pdfData);
|
||||||
});
|
});
|
||||||
|
|
||||||
const splitterModel = ref(14);
|
const splitterModel = ref(14);
|
||||||
const fileId = ref<string>("");
|
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 = () => {
|
const nextPage = () => {
|
||||||
if (page.value < numOfPages.value) {
|
if (page.value < numOfPages.value) {
|
||||||
|
|
@ -49,6 +69,44 @@ const backHistory = () => {
|
||||||
window.history.back();
|
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 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 downloadFile = (response: any, filename: string) => {
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
var fileName = filename;
|
var fileName = filename;
|
||||||
|
|
@ -59,14 +117,24 @@ const downloadFile = (response: any, filename: string) => {
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadReport = async (type: string = "pdf") => {
|
const downloadReport = async (
|
||||||
|
type: string = "pdf",
|
||||||
|
download: boolean = true
|
||||||
|
) => {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(config.API.reportInsignia(typeReport, type, fileId.value), {
|
.get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
|
||||||
responseType: "blob",
|
responseType: "blob",
|
||||||
})
|
})
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
downloadFile(res, ` ${titleReport}.${type}`);
|
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) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -95,20 +163,81 @@ const downloadReport = async (type: string = "pdf") => {
|
||||||
<q-card flat bordered class="col-12 q-mt-sm">
|
<q-card flat bordered class="col-12 q-mt-sm">
|
||||||
<div class="q-pa-md q-gutter-y-sm">
|
<div class="q-pa-md q-gutter-y-sm">
|
||||||
<q-toolbar style="padding: 0">
|
<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"
|
||||||
|
/> -->
|
||||||
|
<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 || 'กรุณาเลือกรอบ']"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
<!-- style="width: 200px" -->
|
||||||
<q-space />
|
<q-space />
|
||||||
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
||||||
<q-btn
|
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
|
||||||
outline
|
<q-menu>
|
||||||
color="primary"
|
<q-list style="min-width: 150px">
|
||||||
icon="download"
|
<q-item
|
||||||
label="ดาวน์โหลด"
|
clickable
|
||||||
@click="downloadReport('pdf')"
|
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
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
icon="mdi-eye"
|
icon="mdi-eye"
|
||||||
color="primary"
|
color="primary"
|
||||||
label="แสดงรายงาน"
|
label="แสดงรายงาน"
|
||||||
|
@click="conditionDocument('show')"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
|
|
|
||||||
|
|
@ -6,633 +6,13 @@
|
||||||
v-model:statusEdit="statusEdit"
|
v-model:statusEdit="statusEdit"
|
||||||
:profileType="profileType"
|
:profileType="profileType"
|
||||||
/> -->
|
/> -->
|
||||||
<Information
|
<Information :statusAdd="true" />
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:fetchDataProfile="fetchData"
|
|
||||||
:statusAdd="true"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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 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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.image-size-default {
|
.image-size-default {
|
||||||
|
|
|
||||||
|
|
@ -392,6 +392,60 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</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>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
|
|
@ -688,6 +742,9 @@ const visibleColumnsHistory = ref<String[]>([
|
||||||
"createdFullName",
|
"createdFullName",
|
||||||
"createdAt",
|
"createdAt",
|
||||||
]);
|
]);
|
||||||
|
const inputImage = ref<any>(null);
|
||||||
|
const image = ref<any>(null);
|
||||||
|
const fileData = ref<any>(null);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchPerson();
|
await fetchPerson();
|
||||||
|
|
@ -729,6 +786,19 @@ const onCancel = async () => {
|
||||||
await fetchData();
|
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 รายการ ข้อมูลเกี่ยวกับบุคคล
|
* get รายการ ข้อมูลเกี่ยวกับบุคคล
|
||||||
*/
|
*/
|
||||||
|
|
@ -967,9 +1037,11 @@ const calRetire = async (birth: Date) => {
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||||
informaData.value.birthDate = dateBefore.value;
|
// informaData.value.birthDate = dateBefore.value;
|
||||||
changeRetireText(date2Thai(retire));
|
// changeRetireText(date2Thai(retire));
|
||||||
|
informaData.value.birthDate = null;
|
||||||
|
informaData.value.age = "";
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
|
|
@ -1063,29 +1135,63 @@ const editData = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const addData = async () => {
|
const addData = async () => {
|
||||||
const body = {
|
// const formData = {
|
||||||
citizenId: informaData.value.cardid,
|
// citizenId: informaData.value.cardid,
|
||||||
prefixId: informaData.value.prefixId,
|
// prefixId: informaData.value.prefixId,
|
||||||
firstName: informaData.value.firstname,
|
// firstName: informaData.value.firstname,
|
||||||
lastName: informaData.value.lastname,
|
// lastName: informaData.value.lastname,
|
||||||
genderId: informaData.value.genderId,
|
// genderId: informaData.value.genderId,
|
||||||
nationality: informaData.value.nationality,
|
// nationality: informaData.value.nationality,
|
||||||
race: informaData.value.ethnicity,
|
// race: informaData.value.ethnicity,
|
||||||
religionId: informaData.value.religionId,
|
// religionId: informaData.value.religionId,
|
||||||
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
|
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
|
||||||
bloodGroupId: informaData.value.bloodId,
|
// bloodGroupId: informaData.value.bloodId,
|
||||||
relationshipId: informaData.value.statusId,
|
// relationshipId: informaData.value.statusId,
|
||||||
telephoneNumber: informaData.value.tel,
|
// telephoneNumber: informaData.value.tel,
|
||||||
createdAt: new Date(),
|
// createdAt: new Date(),
|
||||||
age: null,
|
// age: null,
|
||||||
employeeType: informaData.value.employeeType,
|
// employeeType: informaData.value.employeeType,
|
||||||
employeeClass: informaData.value.employeeClass,
|
// employeeClass: informaData.value.employeeClass,
|
||||||
profileType: informaData.value.profileType,
|
// profileType: informaData.value.profileType,
|
||||||
createdFullName: "-",
|
// 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();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.post(config.API.profileEmployeeIn, body)
|
.post(config.API.profileEmployeeIn, formData)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
})
|
})
|
||||||
|
|
@ -1100,7 +1206,7 @@ const addData = async () => {
|
||||||
await clickBack();
|
await clickBack();
|
||||||
hideLoader();
|
hideLoader();
|
||||||
});
|
});
|
||||||
console.log(body);
|
// console.log(body);
|
||||||
hideLoader();
|
hideLoader();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue