dowload show report เครื่องราช
This commit is contained in:
Thanit Konmek
parent
4ca00ceadb
commit
257bb32247
9 changed files with 576 additions and 1589 deletions
|
|
@ -2,476 +2,13 @@
|
|||
<div class="col-12 row">
|
||||
<div class="row col-12" style="padding-top: 80px">
|
||||
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
||||
<Information
|
||||
v-model:statusEdit="statusEdit"
|
||||
:fetchDataProfile="fetchData"
|
||||
:statusAdd="true"
|
||||
/>
|
||||
<Information :statusAdd="true" />
|
||||
</div>
|
||||
</div>
|
||||
<q-page-sticky
|
||||
position="top"
|
||||
expand
|
||||
class="bg-grey-2 text-white"
|
||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||
>
|
||||
<div
|
||||
class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="bg-teal-1 full-height"
|
||||
color="primary"
|
||||
icon="mdi-chevron-left"
|
||||
dense
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-avatar
|
||||
v-if="imageUrl == null"
|
||||
size="65px"
|
||||
rounded
|
||||
class="containerimage"
|
||||
>
|
||||
<img
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="clickImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
<q-avatar v-else size="65px" rounded class="containerimage">
|
||||
<img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="clickImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
<div class="row items-center text-dark q-ml-md">
|
||||
<div class="column">
|
||||
<div class="text-bold q-pb-xs text-name">
|
||||
เพิ่มข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
</div>
|
||||
<q-dialog v-model="dialog" persistent>
|
||||
<q-card style="width: 90vw; max-width: 80vw">
|
||||
<q-card-section class="row items-center q-pb-xs col-12">
|
||||
<q-space />
|
||||
<q-btn
|
||||
@click="downloadKP7()"
|
||||
unelevated
|
||||
class="btn_purple q-mr-sm"
|
||||
label="ดาวน์โหลด ก.พ.7/ก.ก.1"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="closeKp7"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-p-sm"> </q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Dialog เลือก Image -->
|
||||
<q-dialog v-model="dialogImage" persistent>
|
||||
<q-card style="width: 100vw; max-width: 60vw">
|
||||
<q-card-section class="q-py-sm row">
|
||||
<div class="text-h6">เลือกรูปภาพ</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="closeImage"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
>
|
||||
<q-tooltip>ปิดหน้านี้</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="col-12 row">
|
||||
<div
|
||||
class="row wrap items-start col-12 q-col-gutter-sm"
|
||||
style="height: 320px; overflow: auto"
|
||||
>
|
||||
<div class="col-3" @click="addNewImage">
|
||||
<div
|
||||
style="
|
||||
height: 160px;
|
||||
max-width: 15vw;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="column rounded-borders cursor-pointer bg-active-image text-white"
|
||||
>
|
||||
<q-icon name="add" size="60px" color="white" />
|
||||
<strong>อัปโหลดรูปภาพ</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="n in images"
|
||||
:key="n"
|
||||
class="col-3"
|
||||
@click="imageActive(n)"
|
||||
>
|
||||
<div :class="getClass(n)">
|
||||
<q-img
|
||||
v-if="n.avatar != null"
|
||||
:src="n.avatar"
|
||||
:class="imageClass(n)"
|
||||
>
|
||||
<div
|
||||
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
|
||||
style="padding: 5px"
|
||||
>
|
||||
{{ date2Thai(n.createdDate) }}
|
||||
|
||||
<q-btn
|
||||
v-if="!n.isActive"
|
||||
icon="delete"
|
||||
unelevated
|
||||
dense
|
||||
@click="deletePhoto(n.id)"
|
||||
class="bg-white"
|
||||
style="color: #ff8080"
|
||||
/>
|
||||
</div>
|
||||
</q-img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
icon="check"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
@click="selectAvatarHistory"
|
||||
color="positive"
|
||||
>
|
||||
<q-tooltip>เลือกรูปภาพ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import Information from "@/modules/05_placement/components/Receive/information.vue";
|
||||
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
dialogMessage,
|
||||
success,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const imageUrl = ref<any>(null);
|
||||
const inputImage = ref<any>(null);
|
||||
const fullname = ref<string>("");
|
||||
const position = ref<string>("นักจัดการงานทั่วไป");
|
||||
const dialog = ref<boolean>(false);
|
||||
const dialogImage = ref<boolean>(false);
|
||||
const statusEdit = ref<boolean>(false);
|
||||
const activeImage = ref<any | null>(null);
|
||||
const images = ref<any>([]);
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
// const profileId = ref<string>("");
|
||||
const profileType = ref<string>("");
|
||||
const reasonStatus = ref<boolean>(false);
|
||||
const leaveReason = ref<string>("");
|
||||
const reasonOptions = ref<DataOption[]>([
|
||||
{
|
||||
id: "retire",
|
||||
name: "เกษียณอายุราชการ",
|
||||
},
|
||||
{
|
||||
id: "resign",
|
||||
name: "ลาออก",
|
||||
},
|
||||
{
|
||||
id: "transfer",
|
||||
name: "ให้โอน",
|
||||
},
|
||||
{
|
||||
id: "death",
|
||||
name: "ถึงแก่กรรม",
|
||||
},
|
||||
{
|
||||
id: "layoff",
|
||||
name: "ให้ออก",
|
||||
},
|
||||
{
|
||||
id: "discharge",
|
||||
name: "ปลดออก",
|
||||
},
|
||||
{
|
||||
id: "dismiss",
|
||||
name: "ไล่ออก",
|
||||
},
|
||||
// {
|
||||
// id: "change",
|
||||
// name: "เปลี่ยนประเภทข้าราชการ",
|
||||
// },
|
||||
{
|
||||
id: "other",
|
||||
name: "อื่นๆ",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await checkProfileData();
|
||||
await fetchData();
|
||||
// await changeTab("information");
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
if (profileId.value !== "") {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileAvatarId(profileId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
fullname.value = data.fullname;
|
||||
imageUrl.value = data.avatar;
|
||||
position.value = data.position;
|
||||
profileType.value = data.profileType;
|
||||
const reason = reasonOptions.value.filter(
|
||||
(r: DataOption) => r.id == data.leaveReason
|
||||
);
|
||||
if (reason.length > 0) {
|
||||
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
|
||||
} else {
|
||||
leaveReason.value = "";
|
||||
}
|
||||
reasonStatus.value = reason.length > 0 ? true : false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const checkProfileData = async () => {
|
||||
if (profileId.value !== "") {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileCheckId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
if (data == false) router.push("/registry");
|
||||
})
|
||||
.catch((e) => {
|
||||
router.push("/registry");
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAvatarHistory = async () => {
|
||||
if (profileId.value !== "") {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileAvatarHistoryId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
images.value = [];
|
||||
data.map((e: any) => {
|
||||
images.value.push({
|
||||
id: e.id,
|
||||
avatar: e.avatar,
|
||||
avatarId: e.avatarId,
|
||||
createdDate: new Date(e.createdDate),
|
||||
isActive: e.isActive,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const uploadImage = async (e: any) => {
|
||||
if (profileId.value !== "") {
|
||||
let input = e.target.files;
|
||||
if (input.length > 0) {
|
||||
const formData = new FormData();
|
||||
formData.append("FileData", input[0]);
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileAvatarId(profileId.value), formData)
|
||||
.then((res) => {})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
dialogImage.value = false;
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetchDataDelete = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.profileAvatarHistoryId(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบรูปภาพสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
await clickImage();
|
||||
// dialogImage.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const deletePhoto = async (id: string) => {
|
||||
dialogRemove($q, () => fetchDataDelete(id));
|
||||
};
|
||||
|
||||
const selectAvatarHistory = async () => {
|
||||
if (activeImage.value == null) {
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ไม่สามารถเปลี่ยนรูปได้",
|
||||
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
|
||||
"warning",
|
||||
undefined,
|
||||
"orange",
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (profileId.value !== "") {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileAvatarId(profileId.value), {
|
||||
avatar: activeImage.value.avatarId,
|
||||
})
|
||||
.then((res) => {
|
||||
dialogImage.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const imageActive = (n: any) => {
|
||||
activeImage.value = n;
|
||||
};
|
||||
|
||||
const imageClass = (n: any) => {
|
||||
const val = n == activeImage.value;
|
||||
return {
|
||||
"rounded-borders bg-grey-2 image-size-default": val,
|
||||
"rounded-borders bg-grey-2 image-size-full": !val,
|
||||
};
|
||||
};
|
||||
|
||||
const getClass = (n: any) => {
|
||||
const val = n == activeImage.value;
|
||||
return {
|
||||
"rounded-borders border-green shadow-1": val,
|
||||
"rounded-borders shadow-1": !val,
|
||||
};
|
||||
};
|
||||
|
||||
const addNewImage = async () => {
|
||||
inputImage.value.click();
|
||||
await imageActive(null);
|
||||
};
|
||||
|
||||
const clickImage = async () => {
|
||||
await fetchAvatarHistory();
|
||||
dialogImage.value = true;
|
||||
};
|
||||
|
||||
const closeImage = () => {
|
||||
dialogImage.value = false;
|
||||
};
|
||||
|
||||
const closeKp7 = () => {
|
||||
dialog.value = false;
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.image-size-default {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,58 @@
|
|||
<template>
|
||||
<q-page-sticky
|
||||
position="top"
|
||||
expand
|
||||
class="bg-grey-2 text-white"
|
||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||
>
|
||||
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="bg-teal-1 full-height"
|
||||
color="primary"
|
||||
icon="mdi-chevron-left"
|
||||
dense
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-avatar size="65px" rounded class="containerimage">
|
||||
<img
|
||||
v-if="image == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="addNewImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
|
||||
<div class="row items-center text-dark q-ml-md">
|
||||
<div class="column">
|
||||
<div class="text-bold q-pb-xs text-name">
|
||||
เพิ่มข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
|
|
@ -6,11 +60,9 @@
|
|||
icon="mdi-account"
|
||||
:save="saveData"
|
||||
:history="!statusAdd()"
|
||||
:disable="statusEdit"
|
||||
:cancel="onCancel"
|
||||
:historyClick="clickHistory"
|
||||
:addEmployee="statusAdd()"
|
||||
/>
|
||||
<!-- :disable="statusEdit" -->
|
||||
<q-separator />
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
|
|
@ -288,6 +340,12 @@
|
|||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val:string) =>
|
||||
val.length >= 10 ||
|
||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -350,32 +408,6 @@
|
|||
</div>
|
||||
</q-form>
|
||||
|
||||
<HistoryTable
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</HistoryTable>
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
|
|
@ -400,35 +432,23 @@ import type {
|
|||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
import { defaultInformation } from "@/modules/04_registry/components/profileType";
|
||||
import type {
|
||||
RequestItemsHistoryObject,
|
||||
Columns,
|
||||
} from "@/modules/04_registry/interface/request/Information";
|
||||
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
|
||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
fetchDataProfile: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
statusAdd: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -446,16 +466,16 @@ const {
|
|||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
|
||||
const inputImage = ref<any>(null);
|
||||
const image = ref<any>(null);
|
||||
const fileData = ref<any>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const defaultCitizenData = ref<string>("");
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
|
||||
const filterHistory = ref<string>(""); //search data table history
|
||||
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||
|
||||
const myform = ref<QForm | null>(null);
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
const same = ref<string>("0");
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
|
|
@ -488,206 +508,10 @@ const OpsFilter = ref<InformationOps>({
|
|||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
const columnsHistory = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขบัตรประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี เกิด",
|
||||
sortable: true,
|
||||
field: "birthDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "nationality",
|
||||
align: "left",
|
||||
label: "สัญชาติ",
|
||||
sortable: true,
|
||||
field: "nationality",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
emit("update:statusEdit", false);
|
||||
// emit("update:statusEdit", false);
|
||||
defaultAdd();
|
||||
});
|
||||
|
||||
|
|
@ -718,11 +542,38 @@ const defaultAdd = () => {
|
|||
// }
|
||||
};
|
||||
|
||||
const onCancel = async () => {
|
||||
if (myform.value != null) {
|
||||
myform.value.reset();
|
||||
const addNewImage = async () => {
|
||||
inputImage.value.click();
|
||||
};
|
||||
|
||||
const uploadImage = async (e: any) => {
|
||||
const input = e.target.files;
|
||||
if (input.length > 0) {
|
||||
const url = URL.createObjectURL(input[0]);
|
||||
image.value = url;
|
||||
fileData.value = input[0];
|
||||
}
|
||||
await fetchData();
|
||||
|
||||
// if (profileId.value !== "") {
|
||||
// let input = e.target.files;
|
||||
// if (input.length > 0) {
|
||||
// console.log(typeof input[0]);
|
||||
// const formData = new FormData();
|
||||
// formData.append("FileData", input[0]);
|
||||
// showLoader();
|
||||
// await http
|
||||
// .post(config.API.profileAvatarId(profileId.value), formData)
|
||||
// .then((res) => {})
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// await fetchData();
|
||||
// dialogImage.value = false;
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -833,52 +684,6 @@ const checkCitizen = async (id: string) => {
|
|||
/**
|
||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||
*/
|
||||
const clickHistory = async () => {
|
||||
modalHistory.value = true;
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rowsHistory.value = [];
|
||||
data.map((e: RequestItemsHistoryObject) => {
|
||||
rowsHistory.value.push({
|
||||
citizenId: e.citizenId,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
birthDate: new Date(e.birthDate),
|
||||
gender: e.gender,
|
||||
relationship: e.relationship,
|
||||
bloodGroup: e.bloodGroup,
|
||||
nationality: e.nationality,
|
||||
race: e.race,
|
||||
religion: e.religion,
|
||||
telephoneNumber: e.telephoneNumber,
|
||||
employeeType:
|
||||
e.employeeType == "gov"
|
||||
? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
: e.employeeType == "bkk"
|
||||
? "งบประมาณกรุงเทพมหานคร"
|
||||
: "-",
|
||||
employeeClass:
|
||||
e.employeeClass == "perm"
|
||||
? "ลูกจ้างประจำ"
|
||||
: e.employeeClass == "temp"
|
||||
? "ลูกจ้างชั่วคราว"
|
||||
: "-",
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
|
|
@ -942,11 +747,6 @@ const handleDate = async (modelData: Date) => {
|
|||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
const fetchDataComponent = async (modelData: Date) => {
|
||||
await props.fetchDataProfile();
|
||||
await fetchData();
|
||||
};
|
||||
|
||||
const calRetire = async (birth: Date) => {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
|
|
@ -963,9 +763,11 @@ const calRetire = async (birth: Date) => {
|
|||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = dateBefore.value;
|
||||
changeRetireText(date2Thai(retire));
|
||||
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = null;
|
||||
informaData.value.age = "";
|
||||
// dateBefore.value;
|
||||
// changeRetireText(null);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -973,93 +775,6 @@ const calRetire = async (birth: Date) => {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
if (route.params.id) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileInforId(route.params.id.toString()))
|
||||
.then(async (res: any) => {
|
||||
const data: ResponseObject = res.data.result;
|
||||
defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
|
||||
informaData.value.cardid = data.citizenId;
|
||||
informaData.value.prefix = "";
|
||||
informaData.value.prefixId = data.prefixId;
|
||||
informaData.value.firstname = data.firstName;
|
||||
informaData.value.lastname = data.lastName;
|
||||
informaData.value.birthDate = new Date(data.birthDate);
|
||||
informaData.value.genderId = data.genderId;
|
||||
informaData.value.bloodId = data.bloodGroupId;
|
||||
informaData.value.nationality = data.nationality;
|
||||
informaData.value.ethnicity = data.race;
|
||||
informaData.value.statusId = data.relationshipId;
|
||||
informaData.value.religionId = data.religionId;
|
||||
informaData.value.tel = data.telephoneNumber;
|
||||
informaData.value.age = data.age;
|
||||
informaData.value.employeeType = data.employeeType;
|
||||
informaData.value.employeeClass = data.employeeClass;
|
||||
informaData.value.profileType = data.profileType;
|
||||
dateBefore.value = new Date(data.birthDate);
|
||||
same.value = data.changeName == true ? "1" : "0";
|
||||
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
|
||||
if (
|
||||
data.profileType == "officer" &&
|
||||
columnsHistory.value.length >= 15
|
||||
) {
|
||||
columnsHistory.value.splice(13, 1);
|
||||
columnsHistory.value.splice(12, 1);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
// hideLoader();
|
||||
await props.fetchDataProfile();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const editData = async () => {
|
||||
showLoader();
|
||||
|
||||
const body: any = {
|
||||
citizenId: informaData.value.cardid,
|
||||
prefixId: informaData.value.prefixId,
|
||||
firstName: informaData.value.firstname,
|
||||
lastName: informaData.value.lastname,
|
||||
genderId: informaData.value.genderId,
|
||||
nationality: informaData.value.nationality,
|
||||
race: informaData.value.ethnicity,
|
||||
religionId: informaData.value.religionId,
|
||||
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
|
||||
bloodGroupId: informaData.value.bloodId,
|
||||
relationshipId: informaData.value.statusId,
|
||||
telephoneNumber: informaData.value.tel,
|
||||
createdAt: new Date(),
|
||||
age: null,
|
||||
employeeType: informaData.value.employeeType,
|
||||
employeeClass: informaData.value.employeeClass,
|
||||
profileType: informaData.value.profileType,
|
||||
createdFullName: "-",
|
||||
};
|
||||
|
||||
await http
|
||||
.put(config.API.profileInforId(route.params.id.toString()), body)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
edit.value = false;
|
||||
emit("update:statusEdit", false);
|
||||
await fetchData();
|
||||
await changeBirth(informaData.value.birthDate ?? new Date());
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const addData = async () => {
|
||||
showLoader();
|
||||
|
||||
|
|
@ -1079,30 +794,34 @@ const addData = async () => {
|
|||
// };
|
||||
|
||||
const formData = new FormData();
|
||||
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
||||
if (informaData.value.cardid != undefined)
|
||||
formData.append("CitizenId", informaData.value.cardid);
|
||||
formData.append("CitizenId", informaData.value.cardid);
|
||||
if (informaData.value.prefixId != undefined)
|
||||
formData.append("Prefix", informaData.value.prefixId);
|
||||
formData.append("Prefix", informaData.value.prefixId);
|
||||
if (informaData.value.firstname != undefined)
|
||||
formData.append("Firstname", informaData.value.firstname);
|
||||
formData.append("Firstname", informaData.value.firstname);
|
||||
if (informaData.value.lastname != undefined)
|
||||
formData.append("Lastname", informaData.value.lastname);
|
||||
formData.append("Lastname", informaData.value.lastname);
|
||||
if (informaData.value.genderId != undefined)
|
||||
formData.append("Gender", informaData.value.genderId);
|
||||
formData.append("Gender", informaData.value.genderId);
|
||||
if (informaData.value.nationality != undefined)
|
||||
formData.append("Nationality", informaData.value.nationality);
|
||||
formData.append("Nationality", informaData.value.nationality);
|
||||
if (informaData.value.ethnicity != undefined)
|
||||
formData.append("Race", informaData.value.ethnicity);
|
||||
formData.append("Race", informaData.value.ethnicity);
|
||||
if (informaData.value.religionId != undefined)
|
||||
formData.append("Religion", informaData.value.religionId);
|
||||
formData.append("Religion", informaData.value.religionId);
|
||||
if (informaData.value.birthDate != undefined)
|
||||
formData.append("DateOfBirth", dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()));
|
||||
formData.append(
|
||||
"DateOfBirth",
|
||||
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
|
||||
);
|
||||
if (informaData.value.bloodId != undefined)
|
||||
formData.append("BloodGroup", informaData.value.bloodId);
|
||||
formData.append("BloodGroup", informaData.value.bloodId);
|
||||
if (informaData.value.statusId != undefined)
|
||||
formData.append("Relationship", informaData.value.statusId);
|
||||
formData.append("Relationship", informaData.value.statusId);
|
||||
if (informaData.value.tel != undefined)
|
||||
formData.append("TelephoneNumber", informaData.value.tel);
|
||||
formData.append("TelephoneNumber", informaData.value.tel);
|
||||
|
||||
await http
|
||||
.post(config.API.receiveData(), formData)
|
||||
|
|
@ -1123,7 +842,7 @@ const saveData = async () => {
|
|||
if (myform.value != null) {
|
||||
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
||||
if (saveDataTest) {
|
||||
addData();
|
||||
addData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,6 +196,9 @@ const props = defineProps({
|
|||
roleUser: {
|
||||
type: String,
|
||||
},
|
||||
roundName: {
|
||||
type: String,
|
||||
},
|
||||
requestStatus: {
|
||||
type: String,
|
||||
},
|
||||
|
|
@ -359,13 +362,13 @@ const downloadFile = (response: any, filename: string) => {
|
|||
const downloadReport = async (type: string = "pdf") => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.reportInsignia("45", type, fileId.value), {
|
||||
.get(config.API.reportInsignia("45", type, props.roundId!), {
|
||||
responseType: "blob",
|
||||
})
|
||||
.then(async (res) => {
|
||||
downloadFile(
|
||||
res,
|
||||
`บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
|
||||
`บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -595,15 +598,31 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
|
|||
@update:model-value="DataStore.searchFilterTable"
|
||||
/>
|
||||
<div>
|
||||
<q-btn
|
||||
size="md"
|
||||
icon="mdi-download"
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
@click="downloadReport('pdf')"
|
||||
>
|
||||
<q-btn size="md" icon="mdi-download" flat round color="primary">
|
||||
<!-- @click="downloadReport('pdf')" -->
|
||||
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup @click="downloadReport('pdf')">
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="downloadReport('docx')">
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="downloadReport('xlsx')">
|
||||
<q-item-section avatar
|
||||
><q-icon color="green" name="mdi-file-excel"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .xlsx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="12px"
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ const fecthlistRound = async () => {
|
|||
// const lastIndex = optionRound.value.length;
|
||||
const lastValue = optionRound.value[0];
|
||||
round.value = lastValue.id.toString();
|
||||
roundName.value = lastValue.name;
|
||||
fecthStat(round.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -405,6 +406,7 @@ const requestSendNote = async () => {
|
|||
<tab1
|
||||
:tab="tab"
|
||||
:roundId="round"
|
||||
:roundName="roundName"
|
||||
:fecthInsigniaByOc="fecthInsigniaByOc"
|
||||
:role-user="roleUser"
|
||||
:request-status="requestStatus"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { useQuasar } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -18,20 +20,22 @@ const {
|
|||
} = mixin;
|
||||
const $q = useQuasar();
|
||||
|
||||
const myForm = ref<QForm>();
|
||||
const pdfSrc = ref<any>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const dialog = ref<boolean>(false);
|
||||
onMounted(async () => {
|
||||
const pdfData = usePDF(
|
||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
);
|
||||
await fecthlistRound();
|
||||
// const pdfData = usePDF(
|
||||
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
// );
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
console.log(pdfData);
|
||||
// setTimeout(() => {
|
||||
// pdfSrc.value = pdfData.pdf.value;
|
||||
// numOfPages.value = pdfData.pages.value;
|
||||
// }, 1000);
|
||||
// console.log(pdfData);
|
||||
});
|
||||
|
||||
const splitterModel = ref(14);
|
||||
|
|
@ -43,11 +47,9 @@ const optionsReport = ref<any>([
|
|||
{ id: 41, name: "รายงานขร.3" },
|
||||
{ id: 42, name: "รายงานขร.4" },
|
||||
]);
|
||||
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
|
||||
const optionsList = ref<any>([
|
||||
{ id: 1, name: "list 1" },
|
||||
{ id: 2, name: "list 2" },
|
||||
]);
|
||||
const selectList = ref<any>();
|
||||
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
|
|
@ -63,6 +65,44 @@ const backHistory = () => {
|
|||
window.history.back();
|
||||
};
|
||||
|
||||
const fecthlistRound = async () => {
|
||||
await http
|
||||
.get(config.API.listRoundInsignia())
|
||||
.then((res: any) => {
|
||||
optionsList.value = res.data.result.map((e: any) => ({
|
||||
id: e.period_id,
|
||||
year: e.period_year,
|
||||
name: e.period_name,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
|
||||
const conditionDocument = (type: string) => {
|
||||
myForm.value?.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
if (type == "show") {
|
||||
await downloadReport("pdf", false);
|
||||
} else {
|
||||
await downloadReport("pdf", false);
|
||||
await downloadReport(type, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const showDocument = (url: any) => {
|
||||
const pdfData = usePDF(url);
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const downloadFile = (response: any, filename: string) => {
|
||||
const link = document.createElement("a");
|
||||
var fileName = filename;
|
||||
|
|
@ -73,21 +113,34 @@ const downloadFile = (response: any, filename: string) => {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const downloadReport = async (type: string = "pdf") => {
|
||||
const downloadReport = async (
|
||||
type: string = "pdf",
|
||||
download: boolean = true
|
||||
) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.reportInsignia(
|
||||
selectReport.value.id.toString(),
|
||||
type,
|
||||
fileId.value
|
||||
selectList.value.id
|
||||
),
|
||||
{
|
||||
responseType: "blob",
|
||||
}
|
||||
)
|
||||
.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) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -116,39 +169,81 @@ const downloadReport = async (type: string = "pdf") => {
|
|||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md q-gutter-y-sm">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-select
|
||||
class="q-mr-sm"
|
||||
dense
|
||||
outlined
|
||||
v-model="selectReport"
|
||||
:options="optionsReport"
|
||||
:label="optionsReport.name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="selectList"
|
||||
:options="optionsList"
|
||||
:label="optionsList.name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<q-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 />
|
||||
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลด"
|
||||
@click="downloadReport('pdf')"
|
||||
/>
|
||||
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('pdf')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('docx')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('xlsx')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="green" name="mdi-file-excel"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .xlsx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
icon="mdi-eye"
|
||||
color="primary"
|
||||
label="แสดงรายงาน"
|
||||
@click="conditionDocument('show')"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
|
|
|
|||
|
|
@ -2,37 +2,57 @@
|
|||
import { ref, onMounted } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const store = useInsigniaDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
success,
|
||||
} = mixin;
|
||||
const { typeReport, titleReport } = store;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const myForm = ref<QForm>();
|
||||
const pdfSrc = ref<any>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const dialog = ref<boolean>(false);
|
||||
onMounted(async () => {
|
||||
const pdfData = usePDF(
|
||||
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
console.log(pdfData);
|
||||
onMounted(async () => {
|
||||
await fecthlistRound();
|
||||
// const pdfData = usePDF(
|
||||
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
// );
|
||||
|
||||
// setTimeout(() => {
|
||||
// pdfSrc.value = pdfData.pdf.value;
|
||||
// numOfPages.value = pdfData.pages.value;
|
||||
// }, 1000);
|
||||
// console.log(pdfData);
|
||||
});
|
||||
|
||||
const splitterModel = ref(14);
|
||||
const fileId = ref<string>("");
|
||||
const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
|
||||
const optionsReport = ref<any>([
|
||||
{ id: 39, name: "รายงานขร.1" },
|
||||
{ id: 40, name: "รายงานขร.2" },
|
||||
{ id: 41, name: "รายงานขร.3" },
|
||||
{ id: 42, name: "รายงานขร.4" },
|
||||
]);
|
||||
const selectList = ref<any>();
|
||||
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
|
||||
|
||||
const nextPage = () => {
|
||||
if (page.value < numOfPages.value) {
|
||||
|
|
@ -49,6 +69,44 @@ const backHistory = () => {
|
|||
window.history.back();
|
||||
};
|
||||
|
||||
const fecthlistRound = async () => {
|
||||
await http
|
||||
.get(config.API.listRoundInsignia())
|
||||
.then((res: any) => {
|
||||
optionsList.value = res.data.result.map((e: any) => ({
|
||||
id: e.period_id,
|
||||
year: e.period_year,
|
||||
name: e.period_name,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
|
||||
const conditionDocument = (type: string) => {
|
||||
myForm.value?.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
if (type == "show") {
|
||||
await downloadReport("pdf", false);
|
||||
} else {
|
||||
await downloadReport("pdf", false);
|
||||
await downloadReport(type, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const showDocument = (url: any) => {
|
||||
const pdfData = usePDF(url);
|
||||
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const downloadFile = (response: any, filename: string) => {
|
||||
const link = document.createElement("a");
|
||||
var fileName = filename;
|
||||
|
|
@ -59,14 +117,24 @@ const downloadFile = (response: any, filename: string) => {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const downloadReport = async (type: string = "pdf") => {
|
||||
const downloadReport = async (
|
||||
type: string = "pdf",
|
||||
download: boolean = true
|
||||
) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.reportInsignia(typeReport, type, fileId.value), {
|
||||
.get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
|
||||
responseType: "blob",
|
||||
})
|
||||
.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) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -95,20 +163,81 @@ const downloadReport = async (type: string = "pdf") => {
|
|||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md q-gutter-y-sm">
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-form ref="myForm" class="row items-center">
|
||||
<!-- <q-select
|
||||
use-input
|
||||
fill-input
|
||||
hide-selected
|
||||
class="q-mr-sm"
|
||||
dense
|
||||
outlined
|
||||
v-model="selectReport"
|
||||
:options="optionsReport"
|
||||
:label="optionsReport.name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
style="width: 150px"
|
||||
/> -->
|
||||
<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 />
|
||||
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลด"
|
||||
@click="downloadReport('pdf')"
|
||||
/>
|
||||
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('pdf')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('docx')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="conditionDocument('xlsx')"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="green" name="mdi-file-excel"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .xlsx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
icon="mdi-eye"
|
||||
color="primary"
|
||||
label="แสดงรายงาน"
|
||||
@click="conditionDocument('show')"
|
||||
/>
|
||||
<q-btn
|
||||
unelevated
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue