dowload show report เครื่องราช

This commit is contained in:
Thanit Konmek 2023-08-28 15:51:40 +07:00
parent 4ca00ceadb
commit 257bb32247
9 changed files with 576 additions and 1589 deletions

View file

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

View file

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