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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2025-08-06 14:40:54 +07:00
commit e9504b30b1
64 changed files with 3479 additions and 3455 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/SkeletonTable.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from "vue";
import { ref } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
@ -8,29 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
required: true,
});
/** จำนวนคอลัมน์ */
const skeletonColumns = computed(() => columns.value?.length || 5);
const rows = ref<Array<{ id: string; name: string }>>([
{
id: "",
name: "",
},
]);
/** ตัวอย่างการใช้งาน */
/// <SkeletonTable v-if="isLoading" :columns="columns" />
</script>
<template>
<q-markup-table flat bordered>
<thead>
<tr>
<th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
<q-skeleton type="text" />
</th>
</tr>
</thead>
<d-table
flat
bordered
:columns="columns"
:rows="rows"
row-key="id"
hide-pagination
>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
<q-skeleton type="text" width="80px" />
</div>
</q-td>
</q-tr>
</template>
<tbody>
<tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
<td v-for="(col, idx) in skeletonColumns" :key="idx">
<q-skeleton type="text" width="80px" />
</td>
</tr>
</tbody>
</q-markup-table>
<template v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section>
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label class="text-dark text-weight-medium">
<q-skeleton type="text" />
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</template>

23
src/components/Workflow/Main.vue
View file

@ -10,7 +10,6 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
import type { DataListState } from "@/components/Workflow/interface/response/Main";
import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
import Keycloak from "keycloak-js";
const $q = useQuasar();
const { dialogConfirm, showLoader, hideLoader, messageError } =
@ -31,6 +30,7 @@ const stateId = ref<string>(""); //id state ปัจุบัน
const state = ref<number>(1); //state ปัจุบัน
const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
const KeycloakId = ref<string>("");
const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
const permission = ref<Permission>({
isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@ -48,6 +48,7 @@ const itemState = ref<DataListState[]>([]);
/** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
async function fetchCheckState() {
isLoading.value = true;
await http
.post(config.API.workflow + `check-user-now`, {
refId: id,
@ -74,6 +75,9 @@ async function fetchCheckState() {
})
.catch(() => {
isPermission.value = false;
})
.finally(() => {
isLoading.value = false;
});
}
@ -129,7 +133,22 @@ defineExpose({
<div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
</div>
<div class="col-12"><q-separator /></div>
<q-card-section>
<q-card-section class="col-12 q-px-lg q-py-md" v-if="isLoading">
<q-timeline color="primary">
<q-timeline-entry
v-for="(step, index) in 4"
:key="index"
:icon="`mdi-numeric-${index + 1}`"
color="grey-4"
>
<template #title>
<q-skeleton type="rect" width="150px" height="20px" />
</template>
</q-timeline-entry>
</q-timeline>
</q-card-section>
<q-card-section v-else>
<div class="q-px-lg q-py-md">
<q-timeline color="primary">
<q-timeline-entry

63
src/modules/01_dashboard/views/Dashboard.vue
View file

@ -26,8 +26,9 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
const fullname = ref<string>(""); // ชื่อผู้ใช้
const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
// รายการเมนูหลักของระบบ
const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
// รายการเมนูหลักของระบบ
const filteredItems = computed(() => {
const isOfficer = dataStore.officerType === "OFFICER";
const conditions: Record<string, boolean> = {
@ -148,7 +149,10 @@ const items = ref<MenuMainList[]>([
* @param index หน้าที่โหลดข้อมูล
*/
const fetchlistInbox = async (index: number) => {
index === 1 && showLoader();
if (index === 1) {
isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
}
index != 0 &&
(await http
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
@ -173,7 +177,7 @@ const fetchlistInbox = async (index: number) => {
}
})
.finally(() => {
hideLoader();
isLoadingInbox.value = false;
}));
};
@ -249,11 +253,17 @@ const totalInbox = ref<number>(0); // จำนวนข้อความทั
*/
async function onLoad(index: number, done: Function) {
const num = index === 1 ? 0 : index++;
if (inboxList.value.length < totalInbox.value) {
setTimeout(() => {
fetchlistInbox(num);
done();
}, 3000);
try {
// ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
if (inboxList.value.length >= totalInbox.value) {
done(true);
return;
}
await fetchlistInbox(num);
done();
} catch (error) {
done(true);
}
}
@ -284,7 +294,16 @@ onMounted(async () => {
v-for="(item, j) in filteredItems"
:key="j"
>
<q-card bordered @click="goToPage(item.path)" class="noactive col-12">
<q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
<q-skeleton width="100%" height="180px" />
</q-card>
<q-card
v-else
bordered
@click="goToPage(item.path)"
class="noactive col-12"
>
<div class="col-12">
<q-avatar
:color="item.color"
@ -323,12 +342,28 @@ onMounted(async () => {
กล่องข้อความ
</div>
<q-space />
<div class="text-grey-5" style="font-size: 12px">
<div v-if="isLoadingInbox">
<q-skeleton type="text" width="80px" />
</div>
<div v-else class="text-grey-5" style="font-size: 12px">
ทั้งหมด {{ totalInbox }} ข้อความ
</div>
</div>
<div
v-if="totalInbox != 0"
class="q-pa-sm"
v-if="isLoadingInbox"
style="height: calc(100% - 60px)"
>
<div v-for="(item, index) in 3">
<q-skeleton type="text" width="10%" class="text-subtitle1" />
<q-skeleton type="text" width="50%" class="text-subtitle1" />
<q-skeleton type="text" class="text-caption" />
</div>
</div>
<div
v-if="totalInbox != 0 && !isLoadingInbox"
ref="scrollTargetRef"
style="max-height: 90%; overflow: auto"
>
@ -400,7 +435,11 @@ onMounted(async () => {
</q-infinite-scroll>
</div>
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
<q-banner
rounded
class="bg-amber-1 text-center q-mx-sm"
v-else-if="totalInbox === 0 && !isLoadingInbox"
>
<div class="text-yellow-10">
<q-icon
name="mdi-alert-box"

32
src/modules/05_leave/components/Calendar.vue
View file

@ -26,7 +26,7 @@ import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
const $q = useQuasar();
const store = useLeaveStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
const { messageError, monthYear2Thai } = mixin;
const emit = defineEmits(["update:dateYear"]);
const mainData = ref<DataCalendar[]>([]);
@ -37,10 +37,10 @@ const leaveId = ref<string>("");
/** filter calendar left */
const filterLists = ref<any>([]);
const filterVal = ref<any>([keycloakId.value]);
const isLoading = ref<boolean>(false);
const isLoadingHoliday = ref<boolean>(false);
/**
* Option ของปฏิทิน
*/
/** Option ของปฏิทิน */
const fullCalendar = ref<any>(); //ref calendar
const calendarOptions = ref<any>({
plugins: [
@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
/** function เรียกข้อมูล calendar*/
async function fetchDataCalendar() {
isLoading.value = true;
await http
.post(config.API.leaveCalendar(), {
year: dateMonth.value.year,
@ -119,6 +120,9 @@ async function fetchDataCalendar() {
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
isLoading.value = false;
});
}
@ -126,6 +130,7 @@ async function fetchDataCalendar() {
* fetch วันหยุดในปฏิทิน
*/
async function fetchData() {
isLoadingHoliday.value = true;
await http
.get(
config.API.listHolidayHistoryYearMonth(
@ -154,6 +159,9 @@ async function fetchData() {
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoadingHoliday.value = false;
});
}
@ -193,7 +201,6 @@ async function updateMonth() {
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
@ -215,7 +222,6 @@ async function onClickClose() {
watch(
() => filterVal.value,
async () => {
showLoader();
const eventData = filterVal.value.map((item: any) => {
return mainData.value
.filter(
@ -236,14 +242,13 @@ watch(
const allEventData = [].concat(...eventData);
calendarOptions.value.events = allEventData;
await fetchData();
hideLoader();
}
);
/**Hook */
onMounted(async () => {
try {
showLoader();
isLoading.value = true;
// เรียกข้อมูล keycloakId
const user = await tokenParsed();
keycloakId.value = await (user ? user.sub : "");
@ -253,7 +258,7 @@ onMounted(async () => {
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
isLoading.value = false;
}
});
</script>
@ -262,7 +267,8 @@ onMounted(async () => {
<div class="row">
<div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
<q-card class="col-12" flat bordered>
<q-scroll-area style="height: 38vw">
<q-skeleton height="100%" square v-if="isLoading" />
<q-scroll-area style="height: 38vw" v-else>
<div class="q-gutter-sm col-12">
<q-list class="rounded-borders q-pt-sm" dense>
<q-item
@ -333,7 +339,13 @@ onMounted(async () => {
</q-card>
<div class="main-content">
<q-skeleton
height="100%"
square
v-if="isLoading || isLoadingHoliday"
/>
<FullCalendar
v-else
ref="fullCalendar"
class="demo-app-calendar"
:options="calendarOptions"

26
src/modules/05_leave/components/DialogDetail.vue
View file

@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
leaveRangeEnd: "",
leaveDirectorComment: "",
});
const isLoading = ref<boolean>(false);
/** form ขอยกเลิก*/
const formDelete = reactive<FormDelete>({
@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
* @param id การลา
*/
async function fetchDataDetail(id: string) {
showLoader();
isLoading.value = true;
await http
.get(config.API.leaveUserId(id), {})
.then((res) => {
@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
checkForm.value = "FormHajj";
} else if (type === "LV-007") {
checkForm.value = "FormCheckSelect";
} else if (
type === "LV-008" &&
formData.leaveSubTypeName === "ศึกษาต่อ"
) {
} else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
checkForm.value = "FormStudy";
} else if (
(type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
* @param id ยกเลิกการลา
*/
async function fetchDataCancelDetail(id: string) {
showLoader();
isLoading.value = true;
await http
.get(config.API.leaveCancelById(id))
.then((res) => {
@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -401,7 +399,8 @@ async function onSubmit() {
formData.append("doc", formDelete.doc);
await http
.post(config.API.leaveCancelById(id), formData)
.then(() => {
.then(async () => {
await props.fetchDataTable?.();
success($q, "บันทึกข้อมูลสำเร็จ");
props.onClickClose?.();
})
@ -409,7 +408,6 @@ async function onSubmit() {
messageError($q, err);
})
.finally(() => {
props.fetchDataTable?.();
hideLoader();
});
}
@ -445,7 +443,9 @@ watch(
<q-separator />
<q-card-section class="scroll" style="max-height: 60vh">
<div class="row">
<q-skeleton height="400px" square v-if="isLoading" />
<div class="row" v-else>
<div
flat
:class="
@ -571,6 +571,7 @@ watch(
label="ยืนยัน"
unelevated
color="secondary"
:loading="isLoading"
@click="onClickSave"
/>
</q-card-section>
@ -584,7 +585,8 @@ watch(
<q-separator />
<q-card-section class="q-p-md row q-gutter-y-md">
<div flat class="col-12">
<q-skeleton height="400px" width="100%" square v-if="isLoading" />
<div flat class="col-12" v-else>
<div class="col-12 q-col-gutter-sm row items-center"></div>
<FormCancel :data="formDataCancle" />
</div>

27
src/modules/05_leave/components/ListView.vue
View file

@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL");
const filter = ref<string>("");
const isLoading = ref<boolean>(false);
/** pagination*/
const maxPage = ref<number>(1);
@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
const total = ref<number>(0);
/** function เรียกข้อมูลการลา*/
async function fetchDataTable() {
showLoader();
isLoading.value = true;
const body = {
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
type: LeaveData.type, //*Id ประเภทการลา
@ -59,7 +60,7 @@ async function fetchDataTable() {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -128,10 +129,10 @@ async function onClickClose() {
*/
async function updateFilterTable(y: number, t: string, s: string, k: string) {
if (t && s) {
year.value = await y;
type.value = await t;
status.value = await s;
filter.value = await k;
year.value = y;
type.value = t;
status.value = s;
filter.value = k;
await fetchDataTable();
}
}
@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
* @param ps แถวต่อหน้า
*/
async function updatePagination(p: number, ps: number) {
(page.value = await p), (pageSize.value = await ps);
(page.value = p), (pageSize.value = ps);
await fetchDataTable();
}
@ -168,15 +169,8 @@ function convert(val: any) {
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => {
try {
showLoader();
await fectOptionType();
await fetchDataTable();
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
await fectOptionType();
await fetchDataTable();
});
</script>
<template>
@ -194,6 +188,7 @@ onMounted(async () => {
:pageSize="pageSize"
:leaveType="leaveType"
:total="total"
:isloadingData="isLoading"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">

12
src/modules/05_leave/components/Table.vue
View file

@ -3,6 +3,7 @@ import { ref, useAttrs, watch } from "vue";
import { useQuasar } from "quasar";
import { useLeaveStore } from "@/modules/05_leave/store";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const attrs = ref<any>(useAttrs());
@ -15,7 +16,6 @@ const props = defineProps({
pass: Number,
notpass: Number,
total: Number,
name: String,
icon: String,
inputvisible: Array,
@ -34,6 +34,10 @@ const props = defineProps({
type: Object,
require: true,
},
isloadingData: {
type: Boolean,
default: false,
},
});
/**
@ -48,9 +52,7 @@ const emit = defineEmits([
const table = ref<any>(null);
/**
* ตั้งค่า pagination
*/
/** ตั้งค่า pagination*/
const currentPage = ref<number>(1);
const pagination = ref({
sortBy: "dateSendLeave",
@ -235,7 +237,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
</q-card>
</div>
<div>
<SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
<d-table
v-else
ref="table"
flat
bordered

12
src/modules/05_leave/views/Main.vue
View file

@ -118,11 +118,11 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const isloading = ref<boolean>(false);
const isloadingSummary = ref<boolean>(false);
/** function เรียกข้อมูลตารางสถิติการลา*/
async function fetchStatsTable() {
isloading.value = true;
isloadingSummary.value = true;
await http
.get(config.API.leaveStats())
.then((res) => {
@ -171,11 +171,12 @@ async function fetchStatsTable() {
leaveCountReject: e.leaveCountReject,
leaveCountDelete: e.leaveCountDelete,
}));
isloading.value = false;
})
.catch((err) => {
messageError($q, err);
isloading.value = true;
})
.finally(() => {
isloadingSummary.value = false;
});
}
@ -215,7 +216,7 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11 row">
<!-- สถิติการลา -->
<div class="col-12 row q-pb-sm">
<q-card bordered class="col-12 row" v-if="!isloading">
<q-card bordered class="col-12 row" v-if="!isloadingSummary">
<div class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถิติการลา</div>
<q-space />
@ -278,6 +279,7 @@ onMounted(async () => {
</q-card>
</div>
</div>
<div class="col-6 row">
<div
bordered

9
src/modules/06_evaluate/components/EvaluateStepMain.vue
View file

@ -198,7 +198,7 @@ const formDataStep1 = ref<PersonInformation>();
* @param id id ประเมิน
*/
async function fetchDataStep1(id: string) {
showLoader();
// showLoader();
showLoadStatus.value = false;
await http
.get(config.API.evaluationCheckspecByid(id))
@ -211,9 +211,6 @@ async function fetchDataStep1(id: string) {
})
.finally(() => {
showLoadStatus.value = true;
setTimeout(() => {
hideLoader();
}, 3000);
});
}
@ -581,7 +578,9 @@ async function saveStep7() {
.then(() => {
route.params.id && fetchCheckStep(route.params.id.toString());
})
.catch(() => {})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});

39
src/modules/06_evaluate/components/ExpertPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
@ -25,11 +25,12 @@ const formData = reactive<FormCommandSe>({
commanderAbovePosition: "",
});
/**
* ยืนยันการบันทึกข้อมูล
*/
const isLoading = ref(false);
/** ยืนยันการบันทึกข้อมูล */
function onSubmit() {
dialogConfirm($q, () => {
dialogConfirm($q, async () => {
showLoader();
const body = {
...formData,
citizenId: dataPerson.formData.citizenId,
@ -40,8 +41,7 @@ function onSubmit() {
posNo: dataPerson.formData.posNo,
birthDate: dataPerson.formData.birthDate,
};
showLoader();
http
await http
.post(config.API.evaluationExpertise, body)
.then((res) => {
router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
@ -55,12 +55,10 @@ function onSubmit() {
});
}
/**
* fetch รายชื่อ ผู้บังคับบัญชาชั้นต้น,
*/
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูลรายชื่อ ผู้บังคับบัญชาชั้นต้น */
async function getData() {
isLoading.value = true;
await http
.get(config.API.orgSearchCommander())
.then(async (res) => {
const data = await res.data.result;
@ -74,12 +72,12 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
onMounted(() => {
getData();
onMounted(async () => {
await getData();
});
</script>
@ -103,7 +101,14 @@ onMounted(() => {
</div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
<div class="col-12">
<q-card bordered>
<q-skeleton
v-if="isLoading"
height="230px"
square
style="border-radius: 8px"
/>
<q-card bordered v-else>
<div class="col-12 row q-pa-md q-col-gutter-y-md">
<div class="col-12">
<q-card bordered class="col-12">

1626
src/modules/06_evaluate/components/ExpertPageDetail.vue
View file

File diff suppressed because it is too large Load diff

19
src/modules/06_evaluate/components/PopupPosition.vue
View file

@ -16,6 +16,7 @@ const { showLoader, hideLoader, messageError, formatDatePosition } =
const modal = defineModel<boolean>("modal", { required: true });
const isLoading = ref<boolean>(false);
const cardData = ref<CardDataPos[]>([
{
label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@ -36,7 +37,7 @@ function onClosePopup() {
}
async function fetchDataPosition() {
showLoader();
isLoading.value = true;
await http
.get(config.API.salaryTenurePosition(""))
.then((res) => {
@ -76,7 +77,7 @@ async function fetchDataPosition() {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -98,7 +99,19 @@ watch(modal, (v) => {
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm q-pb-sm">
<div class="col" v-for="(item, index) in cardData" :key="index">
<q-skeleton
v-if="isLoading"
type="Qcard"
width="100%"
height="240px"
/>
<div
v-else
class="col"
v-for="(item, index) in cardData"
:key="index"
>
<q-card bordered class="col-12" style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
{{ item.label }}

7
src/modules/06_evaluate/components/TableListEvaluate.vue
View file

@ -8,6 +8,7 @@ import config from "@/app.config";
import http from "@/plugins/http";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";
import SkeletonTable from "@/components/SkeletonTable.vue";
/** use*/
const $q = useQuasar();
@ -37,6 +38,10 @@ const props = defineProps({
type: Function,
require: true,
},
isLoading: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:pagination"]);
@ -135,7 +140,9 @@ onMounted(() => {
</script>
<template>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
ref="table"
flat
bordered

12
src/modules/06_evaluate/components/step/step1.vue
View file

@ -37,6 +37,7 @@ const formData = reactive<FormSpec>({
isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
});
const isLoading = ref<boolean>(false);
/** function อัปเดทตรวจสอบคุณสมบัติ*/
async function updateValue() {
@ -48,6 +49,7 @@ async function updateValue() {
* @param data ตรวจสอบคุณสมบัติ
*/
async function fetchCheckSpec(data: PersonInformation) {
isLoading.value = true;
formData.isEducationalQft = data.isEducationalQft;
formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
formData.isOperatingExp = data.isOperatingExp;
@ -55,6 +57,7 @@ async function fetchCheckSpec(data: PersonInformation) {
formData.isHaveSpecificQft = data.isHaveSpecificQft;
formData.isHaveProLicense = data.isHaveProLicense;
formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
isLoading.value = false;
}
/**
@ -87,7 +90,14 @@ onMounted(() => {
</script>
<template>
<div class="q-pa-sm">
<q-skeleton
v-if="isLoading"
class="q-mb-md"
type="Qcard"
width="100%"
height="100%"
/>
<div class="q-pa-sm" v-else>
<q-list dense>
<q-item v-ripple class="listItem">
<q-item-section avatar>

583
src/modules/06_evaluate/components/step/step2.vue
View file

@ -52,6 +52,7 @@ const formTemplates = ref<any[]>([
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_006",
@ -60,6 +61,7 @@ const formTemplates = ref<any[]>([
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_008",
@ -68,6 +70,7 @@ const formTemplates = ref<any[]>([
fileName: "4-แบบประเมินคุณลักษณะบุคคล",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_010",
@ -76,6 +79,7 @@ const formTemplates = ref<any[]>([
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
downloadFile: "",
file: null,
isLoading: false,
},
]);
@ -96,6 +100,7 @@ const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
const profile = ref<any>();
const isLoading = ref<boolean>(false);
/** function ไปหน้าต่อไปของรายงาน */
function nextPage() {
@ -201,8 +206,9 @@ async function uploadfile(uploadUrl: string, file: any) {
* function fecth รายชื่อผู้เซ็นเอกสาร
* @param id evaluate ID
*/
function fetcheSigner(id: string) {
http
async function fetcheSigner(id: string) {
isLoading.value = true;
await http
.get(config.API.evaluationSignerDoc1(id))
.then((res) => {
const data = res.data.result;
@ -220,9 +226,12 @@ function fetcheSigner(id: string) {
formCommand.subject = data.subject;
store.statusUpload = true;
})
.catch(() => {
.catch(async () => {
store.statusUpload = false;
getCommander();
await getCommander();
})
.finally(() => {
isLoading.value = false;
});
}
@ -247,6 +256,11 @@ async function fetchCheckSpec(id: string) {
* @param fileName ชื่อไฟล์
*/
async function downloadFile(fileName: string) {
const loadingKey = formTemplates.value.findIndex(
(item) => item.fileName === fileName
);
formTemplates.value[loadingKey].isLoading = true;
await http
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
.then((res) => {
@ -264,6 +278,7 @@ async function downloadFile(fileName: string) {
};
emit("update:form", formCommand, ref);
formTemplates.value[loadingKey].isLoading = false;
});
}
@ -316,29 +331,16 @@ watch(
/**lifecycle Hooks*/
onMounted(async () => {
const user = await tokenParsed();
try {
showLoader();
await Promise.all([
fetcheSigner(evaluateId.value),
fetchCheckSpec(evaluateId.value),
formTemplates.value.forEach((e) => {
downloadFile(e.fileName);
}),
// downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
// downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
// downloadFile(
// "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
// ),
// downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
// downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
// downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
]);
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
});
</script>
@ -347,7 +349,8 @@ onMounted(async () => {
<div class="col-12 q-pa-sm">
<!-- ผลงาน -->
<div class="col-12">
<q-card bordered class="cardSp1 col-12">
<q-skeleton type="Qcard" height="100px" v-if="isLoading" class="q-mb-sm" />
<q-card v-else bordered class="cardSp1 col-12">
<div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
ผลงาน
</div>
@ -422,7 +425,8 @@ onMounted(async () => {
<!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12">
<q-card bordered class="cardSp1 col-12">
<q-skeleton type="Qcard" height="200px" v-if="isLoading" />
<q-card v-else bordered class="cardSp1 col-12">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เลือกผู้เซ็นเอกสาร
</div>
@ -573,14 +577,16 @@ onMounted(async () => {
</div>
<!-- v-if="store.statusUpload -->
<div class="row q-col-gutter-sm">
<div class="row q-col-gutter-sm q-mt-sm">
<div
class="col-6"
v-if="store.currentStep === 2"
v-for="(item, index) in formTemplates"
:key="index"
>
<q-card bordered class="cardSp1">
<q-skeleton type="Qcard" height="100px" v-if="item.isLoading" />
<q-card bordered class="cardSp1" v-else>
<div
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
>
@ -662,541 +668,6 @@ onMounted(async () => {
</div>
</q-card>
</div>
<!-- แบบพิจารณาคุณสมบัติบุคคล -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
>
<div>แบบพิจารณาคุณสมบัติบุคคล</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_005',
'template-1',
'แบบพิจารณาคุณสมบัติบุคคล'
)
"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile1 != ''"
:href="downloadFile1"
target="_blank"
class="q-ml-sm"
color="blue"
flat
dense
icon="visibility"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<q-file
ref="fileEvaluation1Ref"
v-model="fileEvaluation1"
:disable="!store.statusUpload"
class="col-xs-12 col-sm-12"
label="อัปโหลดไฟล์"
outlined
dense
lazy-rules
hide-bottom-space
accept=".pdf"
:rules="
downloadFile1 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'1-แบบพิจารณาคุณสมบัติบุคคล',
fileEvaluation1
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</div>
</q-card>
</div> -->
<!-- แบบแสดงรายละเอียดการเสนอผลงาน -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
>
<div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_006',
'template-2',
'แบบแสดงรายละเอียดการเสนอผลงาน'
)
"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile2 != ''"
:href="downloadFile2"
target="_blank"
class="q-ml-sm"
color="blue"
flat
dense
icon="visibility"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<q-file
ref="fileEvaluation2Ref"
v-model="fileEvaluation2"
:disable="!store.statusUpload"
class="col-12"
outlined
dense
label="อัปโหลดไฟล์"
lazy-rules
accept=".pdf"
hide-bottom-space
:rules="
downloadFile2 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'2-แบบแสดงรายละเอียดการเสนอผลงาน',
fileEvaluation2
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</div>
</q-card>
</div> -->
<!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
>
<div>
แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
(เอกสารแบบ ก.)
</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_007',
'template-3',
'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
)
"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div v-if="downloadFile3 != ''">
<q-btn
:href="downloadFile3"
target="_blank"
flat
dense
icon="visibility"
class="q-ml-sm"
color="blue"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<q-file
ref="fileEvaluation3Ref"
v-model="fileEvaluation3"
:disable="!store.statusUpload"
class="col-12"
outlined
dense
lazy-rules
hide-bottom-space
accept=".pdf"
:rules="
downloadFile3 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
fileEvaluation3
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div> -->
<!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
>
<div class="col-7">
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_009',
'template-5',
'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
)
"
><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile5 != ''"
:href="downloadFile5"
target="_blank"
flat
dense
icon="visibility"
class="q-ml-sm"
color="blue"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<q-file
ref="fileEvaluation5Ref"
v-model="fileEvaluation5"
:disable="!store.statusUpload"
class="col-12"
outlined
dense
lazy-rules
accept=".pdf"
hide-bottom-space
label="อัปโหลดไฟล์"
:rules="
downloadFile5 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
fileEvaluation5
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div> -->
<!-- แบบประเมินคุณลักษณะบุคคล -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
>
<div>แบบประเมินคุณลักษณะบุคคล</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_008',
'template-4',
'แบบประเมินคุณลักษณะบุคคล'
)
"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile4 != ''"
:href="downloadFile4"
target="_blank"
flat
dense
icon="visibility"
class="q-ml-sm"
color="blue"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<q-file
ref="fileEvaluation4Ref"
v-model="fileEvaluation4"
:disable="!store.statusUpload"
class="col-12"
outlined
dense
lazy-rules
hide-bottom-space
accept=".pdf"
label="อัปโหลดไฟล์"
:rules="
downloadFile4 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
:disable="!store.statusUpload"
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'4-แบบประเมินคุณลักษณะบุคคล',
fileEvaluation4
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div> -->
<!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
<!-- <div class="col-6" v-if="store.currentStep === 2">
<q-card bordered class="cardSp1">
<div
class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
>
<div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
<q-space />
<div>
<q-btn
flat
dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'EV1_010',
'template-6',
'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
)
"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile6 != ''"
:href="downloadFile6"
target="_blank"
flat
dense
icon="visibility"
class="q-ml-sm"
color="blue"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<q-file
ref="fileEvaluation6Ref"
v-model="fileEvaluation6"
:disable="!store.statusUpload"
class="col-12"
outlined
hide-bottom-space
dense
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile6 === ''
? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 1',
evaluateId,
'6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
fileEvaluation6
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div> -->
</div>
</div>

19
src/modules/06_evaluate/components/step/step3.vue
View file

@ -13,7 +13,7 @@ const $q = useQuasar();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const route = useRoute();
const { showLoader, hideLoader, messageError } = mixin;
const { messageError } = mixin;
/** id ประเมิน*/
const evaluateId = ref<string>(route.params.id.toString());
@ -21,6 +21,7 @@ const evaluateId = ref<string>(route.params.id.toString());
/** emit*/
const emit = defineEmits(["update:file"]);
const isLoading = ref(false);
const selectedItem = ref(1);
const formTemplates = ref([
{
@ -55,8 +56,10 @@ function handleItemClick(itemNumber: number) {
* function เรีกยเอกสาร
* @param fileName ชื่อเอกสาร
*/
async function fetchDocument(fileName: string) {
showLoader();
async function fetchDocument(fileName: string, forceDownload = false) {
if (forceDownload) {
isLoading.value = true;
}
evaluateId.value &&
(await http
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
@ -67,7 +70,7 @@ async function fetchDocument(fileName: string) {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
}));
}
@ -95,7 +98,10 @@ async function downloadFile(url: string) {
/** HooK lifecycle*/
onMounted(async () => {
await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
await fetchDocument(
formTemplates.value[selectedItem.value - 1].fileName,
true
);
});
</script>
@ -111,7 +117,8 @@ onMounted(async () => {
@click="handleItemClick(index + 1)"
class="cursor-pointer"
>
<q-item-section>{{ item.title }}</q-item-section>
<q-skeleton v-if="isLoading" type="text" width="100%" />
<q-item-section v-else>{{ item.title }}</q-item-section>
</q-item>
</q-list>
</template>

22
src/modules/06_evaluate/components/step/step4.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { is, useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
@ -23,6 +23,7 @@ const formTemplates = ref<any[]>([
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_006",
@ -31,6 +32,7 @@ const formTemplates = ref<any[]>([
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_008",
@ -39,6 +41,7 @@ const formTemplates = ref<any[]>([
fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
downloadFile: "",
file: null,
isLoading: false,
},
{
code: "EV1_010",
@ -47,6 +50,7 @@ const formTemplates = ref<any[]>([
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
downloadFile: "",
file: null,
isLoading: false,
},
]);
@ -181,6 +185,10 @@ async function uploadfile(uploadUrl: string, file: any) {
* @param fileName ชื่อไฟล์
*/
async function downloadFile(fileName: string) {
const loadingKey = formTemplates.value.findIndex(
(item) => item.fileName === fileName
);
formTemplates.value[loadingKey].isLoading = true;
await http
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
.then((res) => {
@ -190,13 +198,15 @@ async function downloadFile(fileName: string) {
if (index !== -1) {
formTemplates.value[index].downloadFile = res.data.downloadUrl;
}
})
.finally(() => {
formTemplates.value[loadingKey].isLoading = false;
});
}
/**lifecycle Hooks*/
onMounted(async () => {
try {
showLoader();
await Promise.all([
fetcheSigner(evaluateId.value),
fetchCheckSpec(evaluateId.value),
@ -206,8 +216,6 @@ onMounted(async () => {
]);
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
});
</script>
@ -226,7 +234,13 @@ onMounted(async () => {
<div class="row q-col-gutter-sm q-pa-sm">
<div class="col-6" v-for="(item, index) in formTemplates" :key="index">
<q-skeleton
type="Qcard"
:height="store.currentStep !== 4 ? '50px' : '100px'"
v-if="item.isLoading"
/>
<q-card
v-else
bordered
class="cardSp1"
v-if="

35
src/modules/06_evaluate/components/step/step5.vue
View file

@ -12,7 +12,7 @@ import type { FileObject } from "@/modules/06_evaluate/interface/main";
const $q = useQuasar();
const mixins = useCounterMixin();
const route = useRoute();
const { date2Thai, success, showLoader, hideLoader } = mixins;
const { date2Thai, success, showLoader, hideLoader, messageError } = mixins;
/** id ประเมิน*/
const evaluateId = ref<string>(route.params.id.toString());
@ -20,6 +20,7 @@ const evaluateId = ref<string>(route.params.id.toString());
const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
const statusFile = ref<boolean>(false);
const isLoading = ref<boolean>(false);
/** เอกสารประกาศผลการคัดเลือกบุคคล*/
const items = ref<FileObject[]>([
@ -44,22 +45,16 @@ const items = ref<FileObject[]>([
]);
/** fuinction เรียกข้อมูลลิงก์ดาวนฺโหลด*/
function onClickfetchDocument(fileName: string, type: string) {
async function onClickfetchDocument(fileName: string, type: string) {
if (evaluateId.value) {
showLoader();
http
await http
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
.then((res) => {
const downloadUrl = res.data.downloadUrl;
type === "COPPY" && coppyLink(downloadUrl);
type === "CHECK" && (statusFile.value = true);
})
.catch(() => {})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 1500);
});
.catch(() => {});
}
}
@ -71,9 +66,10 @@ async function coppyLink(link: string) {
}
/** function เรียกข้อมูลวันที่ประกาศ*/
function fetchCheckDate() {
async function fetchCheckDate() {
isLoading.value = true;
evaluateId.value &&
http
(await http
.get(config.API.evaluationCheckDate(evaluateId.value))
.then((res) => {
const data = res.data.result;
@ -82,7 +78,12 @@ function fetchCheckDate() {
endDate.setDate(endDate.getDate() + 30);
dateEndAnnounce.value = date2Thai(endDate);
})
.catch(() => {});
.catch((err) => {
messageError($q, err);
})
.finally(() => {
isLoading.value = false;
}));
}
/** Hook lifecycle*/
@ -91,10 +92,16 @@ onMounted(async () => {
await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
});
</script>
`
<template>
<div class="row col-12 q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-skeleton
v-if="isLoading"
type="Qcard"
style="width: 100%; height: 300px"
/>
<div v-else class="row col-12 q-col-gutter-sm">
<div class="col-12 text-center">
<q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
<div class="text-weight-bold">

93
src/modules/06_evaluate/components/step/step6.vue
View file

@ -50,6 +50,10 @@ const formCommand = reactive<FormCommand>({
const modalView = ref<boolean>(false);
const isLoading = ref<boolean>(false); // ใช้สำหรับเช็คการโหลดไฟล์
const isLoadingFile = ref<boolean>(false);
const isLoadingDate = ref<boolean>(false);
/** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
function updateInput(value: any) {
const ref = {
@ -85,16 +89,18 @@ async function fetchPathUpload(
showLoader();
await http
.post(config.API.loadPathDocument(volume, id), body)
.then((res) => {
.then(async (res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
@ -129,7 +135,7 @@ async function uploadfile(uploadUrl: string, file: any) {
* @param id ประเมิน
*/
async function fetcheSigner(id: string) {
showLoader();
isLoading.value = true;
await http
.get(config.API.evaluationSignerDoc2(id))
.then((res) => {
@ -148,40 +154,43 @@ async function fetcheSigner(id: string) {
formCommand.author = data.authorDoc2;
formCommand.subject = data.subjectDoc2;
formCommand.assignedPosition = data.assignedPosition;
assignedPosLevel.value = data.assignedPosLevel;
store.statusUpload6 = data.isUpdated;
})
.catch((err) => {
messageError($q, err);
// store.statusUpload6 = false;
// getCommander();
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
const dateEndPrepareDoc2 = ref<string | null>(date2Thai(new Date()));
/** functoin เรียกข้อมูลวันสุดท้ายของการส่งผลงาน*/
async function fetchCheckDate() {
evaluateId.value &&
(await http
.get(config.API.evaluationCheckDate(evaluateId.value))
.then((res) => {
const data = res.data.result;
if (!evaluateId.value) return;
isLoadingDate.value = true;
await http
.get(config.API.evaluationCheckDate(evaluateId.value))
.then((res) => {
const data = res.data.result;
const endDate = new Date(data.dateEndAnnounce);
endDate.setDate(endDate.getDate() + 180);
dateEndPrepareDoc2.value = date2Thai(endDate);
})
.catch((err) => {}));
const endDate = new Date(data.dateEndAnnounce);
endDate.setDate(endDate.getDate() + 180);
dateEndPrepareDoc2.value = date2Thai(endDate);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
isLoadingDate.value = false;
});
}
const downloadUrl = ref<string>("");
/** function เช็คไฟล์อัปโหลด*/
async function checkDoc() {
isLoadingFile.value = true;
await http
.get(
config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
@ -195,26 +204,10 @@ async function checkDoc() {
};
emit("update:form", formCommand, ref);
isLoadingFile.value = false;
});
}
// function getCommander() {
// http
// .get(config.API.searchCommander)
// .then((res) => {
// const data = res.data.result;
// formCommand.commanderFullname = data.commanderFullname;
// formCommand.commanderPosition = data.commanderPosition;
// formCommand.commanderAboveFullname = data.commanderAboveFullname;
// formCommand.commanderAbovePosition = data.commanderAbovePosition;
// formCommand.commanderOrg = data.commanderOrg;
// formCommand.commanderAboveOrg = data.commanderAboveOrg;
// })
// .catch((e) => {
// messageError($q, e);
// });
// }
function onAddSubject() {
formCommand.subject.push("");
}
@ -256,9 +249,10 @@ onMounted(async () => {
<template>
<div class="row col-12 q-pa-sm">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div class="col-12 text-center">
<q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
<q-skeleton v-if="isLoadingDate" type="Qcard" height="50px" />
<q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
@ -268,7 +262,14 @@ onMounted(async () => {
<!-- ผลงาน -->
<div class="col-12">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
<q-card
v-else
bordered
class="shadow-0"
style="border: 1px solid #d6dee1"
>
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm">
@ -372,7 +373,13 @@ onMounted(async () => {
<!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
<q-card
v-else
bordered
class="shadow-0"
style="border: 1px solid #d6dee1"
>
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เลือกผู้เซ็นเอกสาร
</div>
@ -541,7 +548,13 @@ onMounted(async () => {
<!-- อัปไฟล์ -->
<div class="col-12" v-if="store.currentStep === 6">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<q-skeleton type="Qcard" height="100px" v-if="isLoadingFile" />
<q-card
v-else
bordered
class="shadow-0"
style="border: 1px solid #d6dee1"
>
<div class="col-12 row bg-grey-1">
<div class="text-weight-medium q-py-sm q-px-md">เอกสารเล่ม 2</div>
<q-space />

41
src/modules/06_evaluate/components/step/step7.vue
View file

@ -13,7 +13,7 @@ import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();
const { showLoader, hideLoader, messageError } = mixin;
const { messageError } = mixin;
/** emit*/
const emit = defineEmits(["update:file"]);
@ -22,28 +22,25 @@ const emit = defineEmits(["update:file"]);
const evaluateId = ref<string>(route.params.id.toString());
const selectedItem = ref(1);
const isLoading = ref(false);
/** function เรีกยเอกสาร*/
async function fetchDocument() {
showLoader();
evaluateId.value &&
(await http
.get(
config.API.loadFileDocument(
"เล่ม 2",
evaluateId.value,
"1-เอกสารเล่ม 2"
)
)
.then(async (res) => {
await downloadFile(res.data.downloadUrl);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
}));
if (!evaluateId.value) return;
isLoading.value = true;
await http
.get(
config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
)
.then(async (res) => {
await downloadFile(res.data.downloadUrl);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
isLoading.value = false;
});
}
/**
@ -84,7 +81,9 @@ onMounted(async () => {
active-class="text-primary"
class="cursor-pointer"
>
<q-item-section>เอกสารเล่ม 2</q-item-section>
<q-skeleton v-if="isLoading" type="text" width="100%" />
<q-item-section v-else>เอกสารเล่ม 2</q-item-section>
</q-item>
</q-list>
</template>

19
src/modules/06_evaluate/components/step/step8.vue
View file

@ -107,9 +107,11 @@ async function uploadfile(uploadUrl: string, file: any) {
}
const downloadUrl = ref<string>("");
const isLoadingFile = ref<boolean>(false);
/** function เช็คไฟล์อัปโหลด*/
function checkDoc() {
http
async function checkDoc() {
isLoadingFile.value = true;
await http
.get(
config.API.loadFileDocument(
"เล่ม 2",
@ -119,6 +121,9 @@ function checkDoc() {
)
.then((res: any) => {
downloadUrl.value = res.data.downloadUrl;
})
.finally(() => {
isLoadingFile.value = false;
});
}
@ -148,12 +153,9 @@ async function fetcheSigner(id: string) {
/** lifecycleHook*/
onMounted(async () => {
try {
showLoader();
await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
});
</script>
@ -178,7 +180,12 @@ onMounted(async () => {
(store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
"
>
<q-card class="shadow-0" bordered>
<q-skeleton
type="Qcard"
:height="store.currentStep !== 8 ? '50px' : '100px'"
v-if="isLoadingFile"
/>
<q-card v-else class="shadow-0" bordered>
<div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
<div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
<q-space />

42
src/modules/06_evaluate/components/viewstep/popupHistory.vue
View file

@ -9,12 +9,15 @@ import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import HeaderDialog from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const route = useRoute();
const mixins = useCounterMixin();
const { showLoader, hideLoader, date2Thai, messageError } = mixins;
const isLoading = ref<boolean>(false);
const evaluateId = computed(() => {
const id = route.params.id ? route.params.id.toString() : "";
return id;
@ -85,7 +88,7 @@ async function fetchListHistory(id: string) {
minute: "2-digit",
second: "2-digit",
};
showLoader();
isLoading.value = true;
await http
.get(config.API.evaluationHistory(id))
.then((res) => {
@ -104,7 +107,7 @@ async function fetchListHistory(id: string) {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -124,7 +127,9 @@ watch(
<q-card-section>
<div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
<div class="col-12">
<q-table
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
ref="table"
flat
bordered
@ -161,7 +166,7 @@ watch(
</q-td>
</q-tr>
</template>
</q-table>
</d-table>
</div>
</div>
</q-card-section>
@ -169,31 +174,4 @@ watch(
</q-dialog>
</template>
<style lang="scss" scoped>
.custom-header-table {
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style lang="scss" scoped></style>

8
src/modules/06_evaluate/components/viewstep/tableStep1.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts">
import SkeletonTable from "@/components/SkeletonTable.vue";
const props = defineProps({
columns: {
type: Array as () => any[],
@ -8,12 +10,18 @@ const props = defineProps({
type: Array as () => any[],
require: true,
},
isLoading: {
type: Boolean,
default: false,
},
});
</script>
<template>
<div class="q-pa-sm row col-12">
<SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
<d-table
v-else
ref="table"
flat
bordered

263
src/modules/06_evaluate/components/viewstep/viewStep1.vue
View file

@ -2,7 +2,7 @@ div
<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { is, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -21,6 +21,7 @@ import type {
/** importComponents*/
import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
import HeaderDialog from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
/** use*/
const mixin = useCounterMixin();
@ -29,8 +30,7 @@ const storeEva = useEvaluateStore();
const storeData = useDataStore();
const $q = useQuasar();
const route = useRoute();
const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
mixin;
const { messageError, date2Thai, findOrgNameHtml } = mixin;
const {
columnsCertificates,
columnSalaries,
@ -76,8 +76,19 @@ const formDetail = reactive<any>({
honor: [],
});
const isLoading = reactive({
loadDetail: false,
loadEducation: false,
loadCertificate: false,
loadSalary: false,
loadTraining: false,
loadAssessment: false,
loadExperience: false,
});
/** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
async function fetchDetail() {
isLoading.loadDetail = true;
try {
if (!storeData.dataprofilePosition) {
const res = await http.get(config.API.profilePosition());
@ -87,6 +98,8 @@ async function fetchDetail() {
}
} catch (error) {
messageError($q, error);
} finally {
isLoading.loadDetail = false;
}
}
@ -109,58 +122,113 @@ async function updateFormDetail(data: DataProfile) {
formDetail.posExecutive = data.posExecutiveName;
formDetail.positionArea = data.positionArea;
await fetchDataAllDetail();
emit("update:formDeital", formDetail);
}
async function fetchDataAllDetail() {
// ดึงข้อมูลประวัติการศึกษา
http.get(config.API.dataUserEducations).then((res) => {
formDetail.educations = res.data.result;
});
isLoading.loadEducation = true;
http
.get(config.API.dataUserEducations)
.then((res) => {
formDetail.educations = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.then(() => {
isLoading.loadEducation = false;
});
// ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
http.get(config.API.dataUserCertificate("certificate")).then((res) => {
formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
certificateNo: e.certificateNo,
certificateType: e.certificateType,
expireDate: e.expireDate,
issueDate: e.issueDate,
issuer: e.issuer,
}));
});
isLoading.loadCertificate = true;
http
.get(config.API.dataUserCertificate("certificate"))
.then((res) => {
formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
certificateNo: e.certificateNo,
certificateType: e.certificateType,
expireDate: e.expireDate,
issueDate: e.issueDate,
issuer: e.issuer,
}));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadCertificate = false;
});
// ดึงข้อมูลประวัติการรับราชการ
http.get(config.API.dataUserSalaryPosition).then((res) => {
formDetail.salaries = res.data.result;
});
isLoading.loadSalary = true;
http
.get(config.API.dataUserSalaryPosition)
.then((res) => {
formDetail.salaries = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadSalary = false;
});
// ดึงข้อมูลประวัติการฝึกอบรมดูงาน
http.get(config.API.dataUserCertificate("training")).then((res) => {
formDetail.trainings = res.data.result.map((e: any) => ({
dateOrder: e.dateOrder,
department: e.department,
duration: e.duration,
endDate: e.endDate,
name: e.name,
numberOrder: e.numberOrder,
place: e.place,
startDate: e.startDate,
topic: e.topic,
yearly: e.yearly,
}));
});
isLoading.loadTraining = true;
http
.get(config.API.dataUserCertificate("training"))
.then((res) => {
formDetail.trainings = res.data.result.map((e: any) => ({
dateOrder: e.dateOrder,
department: e.department,
duration: e.duration,
endDate: e.endDate,
name: e.name,
numberOrder: e.numberOrder,
place: e.place,
startDate: e.startDate,
topic: e.topic,
yearly: e.yearly,
}));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadTraining = false;
});
http.get(config.API.dataUserPerformance).then((res) => {
formDetail.assessments = res.data.result.map((e: any) => ({
...e,
isAdd: false,
}));
});
// ดึงข้อมูลประสบการณ์ในการปฏิบัติงาน
isLoading.loadExperience = true;
http
.get(config.API.dataUserPerformance)
.then((res) => {
formDetail.assessments = res.data.result.map((e: any) => ({
...e,
isAdd: false,
}));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadExperience = false;
});
http.get(config.API.dataUserPortfolio).then((res) => {
formDetail.experience = res.data.result;
});
// ดึงข้อมูลผลงานที่เคยเสนอขอ
isLoading.loadExperience = true;
http
.get(config.API.dataUserPortfolio)
.then((res) => {
formDetail.experience = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadExperience = false;
});
}
/**
@ -168,40 +236,52 @@ async function fetchDataAllDetail() {
* @param id ประเมิน
*/
async function fetchCheckSpec(data: any) {
formDetail.userId = data.id;
formDetail.citizenId = data.citizenId;
formDetail.prefix = data.prefix;
formDetail.fullName = data.fullName;
formDetail.position = data.position;
formDetail.oc = data.oc;
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
formDetail.positionLevel = data.positionLevel;
formDetail.posNo = data.posNo;
formDetail.birthDate = data.birthDate;
formDetail.educations = data.educations;
formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
certificateNo: e.certificateNo,
certificateType: e.certificateType,
expireDate: date2Thai(e.expireDate),
issueDate: date2Thai(e.issueDate),
issuer: e.issuer,
}));
formDetail.salaries = data.salaries;
formDetail.trainings = data.trainings.map((e: any) => ({
dateOrder: date2Thai(e.dateOrder),
department: e.department,
duration: e.duration,
endDate: date2Thai(e.endDate),
name: e.name,
numberOrder: e.numberOrder,
place: e.place,
startDate: date2Thai(e.startDate),
topic: e.topic,
yearly: e.yearly,
}));
formDetail.assessments = data.performances;
formDetail.experience = data.portfolios;
isLoading.loadEducation = true;
isLoading.loadCertificate = true;
isLoading.loadSalary = true;
isLoading.loadTraining = true;
isLoading.loadExperience = true;
try {
formDetail.userId = data.id;
formDetail.citizenId = data.citizenId;
formDetail.prefix = data.prefix;
formDetail.fullName = data.fullName;
formDetail.position = data.position;
formDetail.oc = data.oc;
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
formDetail.positionLevel = data.positionLevel;
formDetail.posNo = data.posNo;
formDetail.birthDate = data.birthDate;
formDetail.educations = data.educations;
formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
certificateNo: e.certificateNo,
certificateType: e.certificateType,
expireDate: date2Thai(e.expireDate),
issueDate: date2Thai(e.issueDate),
issuer: e.issuer,
}));
formDetail.salaries = data.salaries;
formDetail.trainings = data.trainings.map((e: any) => ({
dateOrder: date2Thai(e.dateOrder),
department: e.department,
duration: e.duration,
endDate: date2Thai(e.endDate),
name: e.name,
numberOrder: e.numberOrder,
place: e.place,
startDate: date2Thai(e.startDate),
topic: e.topic,
yearly: e.yearly,
}));
formDetail.assessments = data.performances;
formDetail.experience = data.portfolios;
} finally {
isLoading.loadEducation = false;
isLoading.loadCertificate = false;
isLoading.loadSalary = false;
isLoading.loadTraining = false;
isLoading.loadExperience = false;
}
}
/**
@ -218,6 +298,7 @@ function formattedNumber(x: number) {
/** get data */
function getData() {
isLoading.loadDetail = true;
http
.get(config.API.dataUserGovernment)
.then(async (res) => {
@ -229,6 +310,9 @@ function getData() {
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.loadDetail = false;
});
}
@ -298,7 +382,6 @@ function onDeletePerformance(index: number) {
onMounted(async () => {
try {
showLoader();
const promises = [];
if (route.name === "evaluate-add") {
@ -315,7 +398,6 @@ onMounted(async () => {
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
});
</script>
@ -327,7 +409,10 @@ onMounted(async () => {
:style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
>
<div class="row col-12">
<q-card class="col-12 cardSp1" bordered>
<div class="col-12" v-if="isLoading.loadDetail">
<q-skeleton type="Qcard" height="200px" class="q-mb-md" />
</div>
<q-card v-else class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
</div>
@ -430,7 +515,10 @@ onMounted(async () => {
</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="col-12" v-if="isLoading.loadEducation">
<q-skeleton type="Qcard" height="200px" class="q-mb-md" />
</div>
<q-card v-else class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
</div>
@ -571,6 +659,7 @@ onMounted(async () => {
class="col-12"
:columns="columnsCertificates"
:row="formDetail.certificates"
:is-loading="isLoading.loadCertificate"
/>
</q-card>
@ -579,8 +668,14 @@ onMounted(async () => {
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-10">
<SkeletonTable
v-if="isLoading.loadSalary"
:columns="columnSalaries"
/>
<d-table
v-else
ref="table"
row-key="id"
flat
@ -637,6 +732,7 @@ onMounted(async () => {
class="col-12"
:columns="columnTraining"
:row="formDetail.trainings"
:is-loading="isLoading.loadTraining"
/>
</q-card>
@ -649,6 +745,7 @@ onMounted(async () => {
class="col-12"
:columns="columnExperience"
:row="formDetail.experience"
:is-loading="isLoading.loadExperience"
/>
</q-card>
@ -671,7 +768,13 @@ onMounted(async () => {
<div class="col-12"><q-separator /></div>
<div class="col-10">
<div class="q-pa-sm row col-12">
<SkeletonTable
v-if="isLoading.loadExperience"
:columns="columnAssessments"
class="col-12"
/>
<d-table
v-else
flat
bordered
:columns="columnAssessments"

9
src/modules/06_evaluate/views/EvaluateMain.vue
View file

@ -23,9 +23,10 @@ const mixin = useCounterMixin();
const store = useEvaluateStore();
const dataStore = useDataStore();
const router = useRouter();
const { showLoader, hideLoader, messageError } = mixin;
const { messageError } = mixin;
/** ตัวแปร*/
const isLoading = ref<boolean>(false);
const modal = ref<boolean>(false);
const menu = ref<ListMenu>();
const listMenu = ref<ListMenu[]>([
@ -73,7 +74,8 @@ function openExpert() {
/** function เรียกรายการประเมิน*/
async function fetchEvaluteList() {
showLoader();
isLoading.value = true;
const body = {
page: pagination.value.page,
pageSize: pagination.value.rowsPerPage,
@ -93,7 +95,7 @@ async function fetchEvaluteList() {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -326,6 +328,7 @@ onMounted(async () => {
v-model:total="total"
v-model:total-list="totalList"
v-model:pagination="pagination"
:isLoading="isLoading"
/>
</div>
</q-card>

93
src/modules/10_registry/01_Information/01_Information.vue
View file

@ -1,19 +1,20 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
import { is, useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
/** import Type */
import type { InformationData } from "@/interface/Main";
const link = ref<string>("");
/** import Component */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
const $q = useQuasar();
const dataStore = useDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
@ -21,16 +22,23 @@ const {
date2Thai,
dialogConfirm,
success,
} = mixin;
const editPhone = ref<boolean>(false);
const editEmail = ref<boolean>(false);
const rowsHistory = ref<any[]>([]);
const rowsHistoryData = ref<any[]>([]);
const modalHistory = ref<boolean>(false);
const phone = ref<string>("");
const email = ref<string>("");
} = useCounterMixin();
const link = ref<string>(""); // link สำหรับดึงข้อมูล
const editPhone = ref<boolean>(false); // แก้ไขเบอร์โทร
const editEmail = ref<boolean>(false); // แก้ไขอีเมล
const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข
const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข (สำหรับ filter)
const modalHistory = ref<boolean>(false); // เปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว
const phone = ref<string>(""); // เบอร์โทร
const email = ref<string>(""); // อีเมล
const isLoading = ref<boolean>(false); // ตัวแปรโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // ตัวแปรโหลดข้อมูลประวัติการแก้ไข
const mainEmail = ref<string>(""); // อีเมลหลัก
const mainPhone = ref<string>(""); // เบอร์โทรหลัก
const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
const isValidEmail = ref<boolean>(true); // validate อีเมล
const emailVerify = ref<string | null>(null); // สถานะการยืนยันอีเมล
/** ตัวแปรข้อมูล */
const formDataInformation = reactive<InformationData>({
rank: "", //ยศ
@ -48,8 +56,6 @@ const formDataInformation = reactive<InformationData>({
phone: "", //เบอร์โทร
email: "",
});
const emailVerify = ref<string | null>(null);
const visibleColumnsHistory = ref<string[]>([
"citizenId",
"prefix",
@ -237,27 +243,19 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory() {
modalHistory.value = true;
}
const mainEmail = ref<string>("");
const mainPhone = ref<string>("");
/** ตรวจสอบอีเมล */
const isCheckEmail = computed(() => {
return mainEmail.value === formDataInformation.email ? true : false;
});
/** ตรวจสอบเบอร์โทร */
const isCheckPhone = computed(() => {
console.log("mainPhone", mainPhone.value);
console.log("formDataInformation", formDataInformation.phone);
return mainPhone.value === formDataInformation.phone ? true : false;
});
/** get data */
/** ฟังก์ชันดึงข้อมูลประวัติส่วนตัว */
async function getData() {
showLoader();
isLoading.value = true;
await http
.get(config.API.dataUserInformationByType(link.value))
.then(async (res) => {
@ -285,24 +283,27 @@ async function getData() {
phone.value = data.phone;
emailVerify.value = data.statusEmail;
hideLoader();
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
.finally(() => {
isLoading.value = false;
});
}
/** get history */
function getHistory() {
/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
const url =
dataStore.officerType == "OFFICER"
? config.API.dataUserInformatioHistory("")
: config.API.dataUserInformatioHistory("-employee");
showLoader();
http
await http
.get(url)
.then((res) => {
const data = res.data.result;
@ -313,14 +314,16 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
const isValidEmail = ref<boolean>(true); // validate อีเมล
/** ฟังก์ชันเปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว */
function onHistory() {
modalHistory.value = true;
}
/** บันทึกเบอร์โทร */
/** ฟังก์ชันบันทึกเบอร์โทร */
async function onSavePhone() {
if (!formDataInformation.phone || formDataInformation.phone.length != 10) {
isValidPhone.value = false;
@ -353,7 +356,7 @@ async function onSavePhone() {
}
}
/** บันทึก email */
/** ฟังก์ชันบันทึก email */
async function onSaveEmail() {
if (!formDataInformation.email) {
isValidEmail.value = false;
@ -388,6 +391,7 @@ onMounted(async () => {
await getData();
});
</script>
<template>
<div class="col-12">
<q-toolbar class="q-px-none">
@ -402,13 +406,17 @@ onMounted(async () => {
dense
round
size="14px"
:loading="isLoading"
@click="onHistory"
>
<q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
</q-btn>
</q-toolbar>
<q-card bordered class="bg-grey-1 q-pa-md">
<div class="row">
<div v-if="isLoading">
<q-skeleton height="160px" />
</div>
<div v-else class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-4 text-grey-6 text-weight-medium">
@ -670,5 +678,6 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>

329
src/modules/10_registry/01_Information/02_ChangeName.vue
View file

@ -1,33 +1,29 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import http from "@/plugins/http";
import config from "@/app.config";
/** import type*/
import { useQuasar, type QTableProps } from "quasar";
import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
const link = ref<string>("");
/** import component */
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const rows = ref<ChangNameRows[]>([]);
const rowsData = ref<ChangNameRows[]>([]);
const idByrow = ref<string>("");
const filter = ref<string>("");
const rowsHistory = ref<ChangNameRows[]>([]);
const rowsHistoryData = ref<ChangNameRows[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
const rows = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
const rowsData = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุลสำหรับค้นหา
const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
const visibleColumns = ref<string[]>([
"prefix",
"firstName",
@ -98,93 +94,10 @@ const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"prefix",
"firstName",
"lastName",
"status",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
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: "status",
align: "left",
label: "สถานะการเปลี่ยนชื่อ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByrow.value = id;
}
/** get data */
/** ฟังก์ชันดึงข้อมูลประวัติการเปลี่ยนชื่อ */
async function getData() {
showLoader();
http
isLoading.value = true;
await http
.get(config.API.dataUserChangeNameByType(link.value))
.then((res) => {
const data = res.data.result;
@ -195,33 +108,11 @@ async function getData() {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
});
}
/** get history */
function getHistory() {
showLoader();
http
.get(
config.API.dataUserChangeNameHistoryByType(link.value) +
`/${idByrow.value}`
)
.then((res) => {
const data = res.data.result;
rowsHistory.value = data;
rowsHistoryData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -230,9 +121,10 @@ function onSearch() {
);
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
/***
* ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
* @param profileId รหัสโปรไฟล์ของผู้ใช้
*/
async function onDownloadFile(id: string, profileId: string) {
showLoader();
@ -263,8 +155,8 @@ onMounted(async () => {
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -301,97 +193,96 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows.length !== 0 ? rows : []"
:columns="columns"
:grid="!mode"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id, props.row.profileId)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-td auto-width>
<q-btn
color="green"
flat
dense
round
class="absolute_button"
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id, props.row.profileId)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section>
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<div v-if="isLoading">
<SkeletonTable :columns="columns" />
</div>
<div class="col-12" v-else>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows.length !== 0 ? rows : []"
:columns="columns"
:grid="!mode"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-if="mode" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="green"
flat
dense
round
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id, props.row.profileId)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-td auto-width>
<q-btn
color="green"
flat
dense
round
class="absolute_button"
icon="mdi-file-document-outline"
@click="onDownloadFile(props.row.id, props.row.profileId)"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</q-td>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section>
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
</div>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
:getData="getHistory"
:rows="rowsHistory"
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

128
src/modules/10_registry/01_Information/03_Address.vue
View file

@ -6,8 +6,8 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
/** import type */
import type {
Address,
Provinces,
@ -15,28 +15,26 @@ import type {
SubDistricts,
} from "@/modules/10_registry/interface/response/01_Information";
//history dialog
/** import component */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonAddress from "@/modules/10_registry/components/skeleton/Address.vue";
const link = ref<string>("");
const store = useRegistryInFormationStore();
const dataStore = useDataStore();
const rowsHistory = ref<any[]>([]);
const rowsHistoryData = ref<any[]>([]);
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const dataStore = useDataStore();
const { messageError, date2Thai } = useCounterMixin();
const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูลที่อยู่
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลที่อยู่
const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติที่อยู่
const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติที่อยู่สำหรับค้นหา
const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติที่อยู่
const formData = reactive({
registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
registrationProvince: "", //จังหวัด
registrationDistrict: "", //เขต / อำเภอ
registrationSubDistrict: "", //แขวง / ตำบล
registrationZipCode: "", //รหัสไปรษณีย์
currentAddress: "", //ที่อยู่ปัจจุบัน
currentProvince: "", //จังหวัด
currentDistrict: "", //เขต / อำเภอ
@ -44,11 +42,11 @@ const formData = reactive({
currentZipCode: "", //รหัสไปรษณีย์
});
const provinceData = ref<Provinces[]>([]);
const districtRegistration = ref<Districts[]>([]);
const districtCurrent = ref<Districts[]>([]);
const subDistrictRegistration = ref<SubDistricts[]>([]);
const subDistrictCurrent = ref<SubDistricts[]>([]);
const provinceData = ref<Provinces[]>([]); // ข้อมูลจังหวัด
const districtRegistration = ref<Districts[]>([]); // เขต / อำเภอตามทะเบียนบ้าน
const districtCurrent = ref<Districts[]>([]); // เขต / อำเภอปัจจุบัน
const subDistrictRegistration = ref<SubDistricts[]>([]); // แขวง / ตำบลตามทะเบียนบ้าน
const subDistrictCurrent = ref<SubDistricts[]>([]); // แขวง / ตำบลปัจจุบัน
const visibleColumnsHistory = ref<string[]>([
"currentAddress",
@ -65,7 +63,6 @@ const visibleColumnsHistory = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "registrationAddress",
@ -217,21 +214,18 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory() {
modalHistory.value = true;
}
/** get data */
/** ฟังก์ชันดึงข้อมูลที่อยู่ */
async function getData() {
showLoader();
http
await http
.get(config.API.dataUserAddressByType(link.value))
.then((res) => {
.then(async (res) => {
const data: Address = res.data.result;
fetchDistrict(data.registrationProvinceId, "1");
fetchDistrict(data.currentProvinceId, "2");
fetchSubDistrict(data.registrationDistrictId, "1");
fetchSubDistrict(data.currentDistrictId, "2");
await Promise.all([
fetchDistrict(data.registrationProvinceId, "1"),
fetchDistrict(data.currentProvinceId, "2"),
fetchSubDistrict(data.registrationDistrictId, "1"),
fetchSubDistrict(data.currentDistrictId, "2"),
]);
formData.registrationAddress = data.registrationAddress;
formData.registrationProvince = data.registrationProvinceId;
@ -247,42 +241,41 @@ async function getData() {
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
});
}
/** get history */
function getHistory() {
/** ฟังก์ชันดึงข้อมูลประวัติที่อยู่ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
const url =
dataStore.officerType == "OFFICER"
? config.API.dataUserHistory("")
: config.API.dataUserHistory("-employee");
showLoader();
http
await http
.get(url)
.then((res) => {
const data = res.data.result;
rowsHistory.value = data;
console.log("🚀 ~ .then ~ data:", data);
rowsHistoryData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
*function fetch ข้อมูลจังหวัด
*/
function fetchProvince() {
http
function onHistory() {
modalHistory.value = true;
}
/** ฟังก์ชันดึงข้อมูลจังหวัด */
async function fetchProvince() {
await http
.get(config.API.profileNewProvince)
.then((res) => {
const data = res.data.result;
@ -294,13 +287,13 @@ function fetchProvince() {
}
/**
* function fetch ข้อมูลอำเภอ
* ฟังก์ชันดึงข้อมูลอำเภอ
* @param id จังหวัด
* @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
*/
function fetchDistrict(id: string | null, position: string) {
async function fetchDistrict(id: string | null, position: string) {
if (!id) return;
http
await http
.get(config.API.profileNewDistrictByPId(id))
.then((res) => {
const data = res.data.result.districts;
@ -316,13 +309,13 @@ function fetchDistrict(id: string | null, position: string) {
}
/**
* function fetch ข้อมูลอำเภ
* ฟังก์ชันดึงข้อมูลอำเภอ
* @param id อำเภอ
* @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
*/
function fetchSubDistrict(id: string | null, position: string) {
async function fetchSubDistrict(id: string | null, position: string) {
if (!id) return;
http
await http
.get(config.API.profileNewSubDistrictByDId(id))
.then((res) => {
const data = res.data.result.subDistricts;
@ -338,8 +331,8 @@ function fetchSubDistrict(id: string | null, position: string) {
}
/**
* function แปลงชื้่อจังหวัด
* @param id
* ฟังก์ชันแปลงชื้่อจังหวัด
* @param id รหัสจังหวัด
*/
function convertProvinceName(id: string) {
const province = provinceData.value.find((e: Provinces) => e.id === id);
@ -347,8 +340,8 @@ function convertProvinceName(id: string) {
}
/**
* function แปลงชื้่ออำเภอ
* @param id
* ฟังก์ชันแปลงชื้่ออำเภอ
* @param id รหัสอำเภอ
*/
function convertDistrictName(id: string, type: string) {
const data =
@ -358,8 +351,8 @@ function convertDistrictName(id: string, type: string) {
}
/**
* function แปลงชื้่อตำบล
* @param id
* ฟังก์ชัน แปลงชื้่อตำบล
* @param id รหัสตำบล
*/
function convertSubDistrictName(id: string, type: string) {
const data =
@ -369,9 +362,14 @@ function convertSubDistrictName(id: string, type: string) {
}
onMounted(async () => {
isLoading.value = true;
link.value = await dataStore.getProFileType();
await fetchProvince();
await getData();
try {
await fetchProvince();
await getData();
} finally {
isLoading.value = false;
}
});
</script>
<template>
@ -386,6 +384,7 @@ onMounted(async () => {
dense
round
size="14px"
:loading="isLoading"
@click="onHistory"
>
<q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
@ -402,7 +401,8 @@ onMounted(async () => {
</q-item>
<q-separator />
<q-card-section>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<SkeletonAddress v-if="isLoading" />
<div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
ที่อยู่ตามทะเบียนบ้าน
@ -481,7 +481,8 @@ onMounted(async () => {
</q-item>
<q-separator />
<q-card-section>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<SkeletonAddress v-if="isLoading" />
<div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
ที่อยู่ปัจจุบัน
@ -547,5 +548,6 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>

97
src/modules/10_registry/01_Information/04_Family.vue
View file

@ -1,33 +1,28 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";
import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonFamily from "@/modules/10_registry/components/skeleton/Family.vue";
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const idFamily = ref<string>("");
const store = useRegistryInFormationStore();
const dataStore = useDataStore();
const rowsHistory = ref<any[]>([]);
const rowsHistoryData = ref<any[]>([]);
const { messageError, date2Thai } = useCounterMixin();
const typeForm = ref<string>("");
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const fatherData = reactive<any>({
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลครอบครัว
const idFamily = ref<string>(""); // ID ของครอบครัว
const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติครอบครัว
const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติครอบครัวสำหรับค้นหา
const typeForm = ref<string>(""); // ประเภทของข้อมูลที่แสดง (father, mother, couple, children)
const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติครอบครัว
const fatherData = reactive({
isLive: null,
citizenId: "",
prefix: "",
@ -36,7 +31,7 @@ const fatherData = reactive<any>({
job: "",
profileId: "",
});
const motherData = reactive<any>({
const motherData = reactive({
isLive: null,
citizenId: "",
prefix: "",
@ -45,7 +40,7 @@ const motherData = reactive<any>({
job: "",
profileId: "",
});
const coupleData = reactive<any>({
const coupleData = reactive({
isLive: null,
citizenId: "",
prefix: "",
@ -56,7 +51,6 @@ const coupleData = reactive<any>({
statusMarital: "",
profileId: "",
});
const childData = ref<FormChildren[]>([]);
const visibleColumnsHistory = ref<string[]>([
@ -161,21 +155,26 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
const checkFatherData = ref<boolean>(false);
const checkMotherData = ref<boolean>(false);
const checkCoupleData = ref<boolean>(false);
const checkChildData = ref<boolean>(false);
const checkFatherData = ref<boolean>(false); // สถานะการมีข้อมูลบิดา
const checkMotherData = ref<boolean>(false); // สถานะการมีข้อมูลมารดา
const checkCoupleData = ref<boolean>(false); // สถานะการมีข้อมูลคู่สมรส
const checkChildData = ref<boolean>(false); // สถานะการมีข้อมูลบุตร
function onHistory(type: string, id: string) {
modalHistory.value = true;
typeForm.value = type;
idFamily.value = id ? id : "user";
}
const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
const isLoading = reactive({
father: false,
mother: false,
couple: false,
});
/** get data */
/**
* ฟังก์ชันดึงข้อมูลสมาชิกในครอบครัว
* @param type ประเภทข้อมูล (father, mother, couple, children)
*/
async function getData(type: string) {
showLoader();
http
(isLoading as any)[type] = true;
await http
.get(config.API.dataUserFamilyByType(link.value, type))
.then((res) => {
const data = res.data.result;
@ -219,14 +218,24 @@ async function getData(type: string) {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
(isLoading as any)[type] = false;
});
}
/** get history */
function getHistory() {
/**
* ฟังก์ชันเปิดประวัติการแก้ไขข้อมูล
* @param type ประเภทข้อมูล (father, mother, couple, children)
* @param id ID ของครอบครัว (ใช้สำหรับบุตร)
*/
function onHistory(type: string, id: string) {
modalHistory.value = true;
typeForm.value = type;
idFamily.value = id ? id : "user";
}
/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูล */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
const url =
@ -238,8 +247,7 @@ function getHistory() {
idFamily.value
);
showLoader();
http
await http
.get(url)
.then((res) => {
const data = res.data.result;
@ -261,7 +269,7 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
@ -292,12 +300,14 @@ onMounted(async () => {
flat
dense
round
:isLoading="isLoading.father"
size="14px"
@click="onHistory('father', '')"
>
<q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
</q-btn>
<div class="col-12">
<SkeletonFamily v-if="isLoading.father" :type="'father'" />
<div class="col-12" v-else>
<q-card bordered class="bg-grey-1 q-pa-sm">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@ -366,11 +376,13 @@ onMounted(async () => {
dense
round
size="14px"
:isLoading="isLoading.mother"
@click="onHistory('mother', '')"
>
<q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
</q-btn>
<div class="col-12">
<SkeletonFamily v-if="isLoading.mother" :type="'mother'" />
<div v-else class="col-12">
<q-card bordered class="bg-grey-1 q-pa-sm">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@ -441,12 +453,14 @@ onMounted(async () => {
flat
dense
round
:isLoading="isLoading.couple"
size="14px"
@click="onHistory('couple', '')"
>
<q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
</q-btn>
<div class="col-12">
<SkeletonFamily v-if="isLoading.couple" :type="'couple'" />
<div v-else class="col-12">
<q-card bordered class="bg-grey-1 q-pa-sm">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
@ -632,6 +646,7 @@ onMounted(async () => {
? columnsHistory
: columnsHistory?.filter((e) => e.name !== 'lastNameOld')
"
:is-loading="isLoadingHistory"
/>
</template>

119
src/modules/10_registry/01_Information/05_Educations.vue
View file

@ -1,35 +1,33 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useDataStore } from "@/stores/data";
//history dialog
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";
import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const rows = ref<EducationProfile[]>([]);
const rowsData = ref<EducationProfile[]>([]);
const rowsHistory = ref<EducationProfile[]>([]);
const rowsHistoryData = ref<EducationProfile[]>([]);
const idByRow = ref<string>("");
const filter = ref<string>("");
const mode = ref<boolean>($q.screen.gt.xs);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const { messageError, date2Thai, onSearchDataTable } = mixin;
const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติการศึกษา
const rows = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษา
const rowsData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหา
const rowsHistory = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับแสดงในโมดัล
const rowsHistoryData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหาในโมดัล
const idByRow = ref<string>(""); // ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติการศึกษา
const visibleColumns = ref<string[]>([
"educationLevel",
"institute",
@ -266,10 +264,26 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const pagination = ref({
// sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"educationLevel",
"institute",
"degree",
"field",
"gpa",
"country",
"duration",
"durationYear",
"other",
"fundName",
"isEducation",
"isHigh",
"endDate",
"startDate",
"finishDate",
"note",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "educationLevel",
@ -486,37 +500,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<string[]>([
"educationLevel",
"institute",
"degree",
"field",
"gpa",
"country",
"duration",
"durationYear",
"other",
"fundName",
"isEducation",
"isHigh",
"endDate",
"startDate",
"finishDate",
"note",
"lastUpdateFullName",
"lastUpdatedAt",
]);
/** เปิด dialog ประวัติ */
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
/** ฟังก์ชันดึงข้อมูลการศึกษา */
async function getData() {
showLoader();
http
isLoading.value = true;
await http
.get(config.API.dataUserEducationsByType(link.value))
.then((res) => {
const data = res.data.result;
@ -527,16 +515,25 @@ async function getData() {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
isLoading.value = false;
});
}
/**
* เปิด dialog ประวัติการศึกษา
* @param id ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get history */
function getHistory() {
showLoader();
http
async function getHistory() {
isLoadingHistory.value = true
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserEducationsHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -547,10 +544,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันค้นหาข้อมูลการศึกษา */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -561,7 +559,6 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
await getData();
});
</script>
@ -603,7 +600,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -614,7 +614,6 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -687,6 +686,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขประวัติการศึกษา'"
@ -695,6 +695,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>

77
src/modules/10_registry/01_Information/06_Ability.vue
View file

@ -1,33 +1,35 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
/** import type */
import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
const link = ref<string>("");
const rows = ref<AbilityRows[]>([]);
const rowsData = ref<AbilityRows[]>([]);
const rowsHistory = ref<AbilityRows[]>([]);
const rowsHistoryData = ref<AbilityRows[]>([]);
const idByRow = ref<string>("");
const filter = ref<string>("");
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลความสามารถพิเศษ
const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติ
const rows = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษ
const rowsData = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษสำหรับค้นหา
const rowsHistory = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษ
const rowsHistoryData = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษสำหรับค้นหา
const idByRow = ref<string>(""); // id ของแถวที่เลือก
const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
const modalHistory = ref<boolean>(false); // สถานะการแสดง modal ประวัติการแก้ไข
const visibleColumns = ref<string[]>([
"field",
"detail",
@ -187,14 +189,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
showLoader();
isLoading.value = true;
http
.get(config.API.dataUserAbilityByType(link.value))
.then((res) => {
@ -206,16 +203,25 @@ async function getData() {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันเปิด modal ประวัติการแก้ไขความสามารถพิเศษ
* @param id ID ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไขความสามารถพิเศษ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserAbilityHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -226,10 +232,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันค้นหาข้อมูล */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -241,6 +248,7 @@ function onSearch() {
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
* @param profileId ID ของโปรไฟล์ที่ต้องการโหลด
*/
async function onDownloadFile(id: string, profileId: string) {
showLoader();
@ -272,7 +280,6 @@ onMounted(async () => {
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -309,7 +316,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -422,6 +432,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขความสามารถพิเศษ'"
@ -430,8 +441,10 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

67
src/modules/10_registry/02_Government/01_Government.vue
View file

@ -7,30 +7,26 @@ import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import type {
ProfileAppointment,
FormDataGovernment,
} from "@/modules/10_registry/interface/index/Main";
//history dialog
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import GovernmentSkeleton from "@/modules/10_registry/components/skeleton/Government.vue";
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const dataPerson = useDataStore();
const checkType = ref<boolean>(
dataPerson.officerType == "OFFICER" ? true : false
);
const store = useRegistryInFormationStore();
const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
const { messageError, date2Thai, dateToISO } = useCounterMixin();
const rowsHistory = ref<ProfileAppointment[]>([]);
const rowsHistoryData = ref<ProfileAppointment[]>([]);
const modalHistory = ref<boolean>(false);
const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดประวัติข้อมูล
const rowsHistory = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
const rowsHistoryData = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
const modalHistory = ref<boolean>(false); //สถานะการเปิด modal ประวัติข้อมูล
/** ตัวแปรข้อมูล */
const formData = reactive<FormDataGovernment>({
org: "",
positionField: "",
@ -138,7 +134,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
]);
/** ไม่เเน่ใจ ใช้เเบบไหน คอมเม้นไว้ก่อน */
// const columnsHistory = ref<QTableProps["columns"]>([
// {
// name: "oc",
@ -343,15 +338,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// ]);
const checkType = ref<boolean>(
dataPerson.officerType == "OFFICER" ? true : false
);
function onHistory() {
modalHistory.value = true;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserGovernmentByType(link.value))
.then((res) => {
const data = res.data.result;
@ -378,18 +372,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
/** ฟังก์ชันเปิด modal ประวัติข้อมูล */
function onHistory() {
modalHistory.value = true;
}
/** ฟังก์ชันดึงประวัติข้อมูลราชการ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
const url =
dataPerson.officerType == "OFFICER"
? config.API.dataUserGovernmentHistory("")
: config.API.dataUserGovernmentHistory("-employee");
showLoader();
http
await http
.get(url)
.then((res) => {
const data = res.data.result;
@ -400,13 +401,13 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
@ -421,12 +422,15 @@ onMounted(async () => {
dense
round
size="14px"
:isLoading="isLoading"
@click="onHistory"
>
<q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
</q-btn>
</q-toolbar>
<q-card bordered class="bg-grey-1 q-pa-md">
<GovernmentSkeleton v-if="isLoading" />
<q-card v-else bordered class="bg-grey-1 q-pa-md">
<div class="row q-col-gutter-y-sm">
<div class="col-12 col-sm-12 col-md-6">
<div class="row q-col-gutter-y-sm">
@ -584,5 +588,6 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>

91
src/modules/10_registry/02_Government/02_Discipline.vue
View file

@ -1,38 +1,36 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
useCounterMixin();
const rows = ref<DisciplineDetail[]>([]);
const rowsData = ref<DisciplineDetail[]>([]);
const idByRow = ref<string>("");
const filter = ref<string>("");
const rowsHistory = ref<DisciplineDetail[]>([]);
const rowsHistoryData = ref<DisciplineDetail[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const fileGroup = ref<string>("เอกสารวินัย");
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลประเภทโปรไฟล์
const isLoading = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลหลัก
const isLoadingHistory = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลประวัติการแก้ไข;
const rows = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่จะแสดงในตาราง
const rowsData = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่ใช้สำหรับค้นหา
const idByRow = ref<string>(""); // ใช้เก็บ ID ของแถวที่ถูกเลือก
const filter = ref<string>(""); // ตัวแปรสำหรับค้นหาในตาราง
const rowsHistory = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไข
const rowsHistoryData = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไขที่ใช้สำหรับค้นหา
const fileGroup = ref<string>("เอกสารวินัย"); // กลุ่มไฟล์ที่ใช้สำหรับดาวน์โหลด
const modalHistory = ref<boolean>(false); // ใช้สำหรับเปิด/ปิด modal ประวัติการแก้ไข
const visibleColumns = ref<string[]>([
"level",
"detail",
@ -142,15 +140,10 @@ const pagination = ref({
sortBy: "lastUpdatedAt",
});
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลวินัย */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserDisciplineByType(link.value))
.then((res) => {
const data = res.data.result;
@ -161,14 +154,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* เปิด modal ประวัติการแก้ไข
* @param id ID ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserDisciplineHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -179,15 +183,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
* @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
* @param profileId ID ของโปรไฟล์
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
}
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -198,7 +215,7 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
getData();
await getData();
});
</script>
<template>
@ -237,7 +254,9 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -349,6 +368,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขวินัย'"
@ -357,6 +377,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumns"
:columns="columns"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

89
src/modules/10_registry/02_Government/03_Leave.vue
View file

@ -1,34 +1,32 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const idByRow = ref<string>("");
const rows = ref<LeaveFormType[]>([]);
const rowsData = ref<LeaveFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<any[]>([]);
const rowsHistoryData = ref<any[]>([]);
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลการลา
const isLoading = ref<boolean>(false); // สำหรับการโหลดข้อมูลการลา
const isLoadingHistory = ref<boolean>(false); // สำหรับการโหลดประวัติการลา
const rows = ref<LeaveFormType[]>([]); // ข้อมูลการลา
const rowsData = ref<LeaveFormType[]>([]); // ข้อมูลการลา (สำหรับค้นหา)
const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาข้อมูลการลา
const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดูประวัติการลา
const rowsHistory = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา
const rowsHistoryData = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา (สำหรับค้นหา)
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับการเปิดปิด modal ประวัติการลา
const visibleColumns = ref<string[]>([
"no",
"typeLeave",
@ -39,7 +37,6 @@ const visibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -136,7 +133,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"no",
"typeLeave",
@ -243,15 +239,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลการลา */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserLeaveByType(link.value))
.then((res) => {
const data = res.data.result;
@ -275,14 +266,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันสำหรับเปิด modal ประวัติการลา
* @param id ID ของการลา
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการลา */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserLeaveHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -306,10 +308,15 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับแสดงสถานะการลา
* @param val ค่าสถานะการลา
* @return สถานะการลาในรูปแบบข้อความ
*/
function statusLeave(val: string) {
switch (val) {
case "waitting":
@ -325,6 +332,11 @@ function statusLeave(val: string) {
}
}
/**
* ฟังก์ชันสำหรับแปลงช่วงวันที่เป็นรูปแบบไทย
* @param val ช่วงวันที่ที่ต้องการแปลงเป็นรูปแบบไทย
* @return ช่วงวันที่ในรูปแบบไทย
*/
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
} else if (date2Thai(val[0]) === date2Thai(val[1])) {
@ -334,6 +346,7 @@ function dateThaiRange(val: [Date, Date]) {
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -344,11 +357,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1">การลา</span>
@ -383,7 +395,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -494,6 +509,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขการลา'"
@ -503,6 +519,7 @@ onMounted(async () => {
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:type="'Leave'"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

99
src/modules/10_registry/02_Government/04_Duty.vue
View file

@ -1,35 +1,36 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
const link = ref<string>("");
const dataStore = useDataStore();
const idByRow = ref<string>("");
const rows = ref<DutyFormType[]>([]);
const rowsData = ref<DutyFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<DutyFormType[]>([]);
const rowsHistoryData = ref<DutyFormType[]>([]);
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);
const mixin = useCounterMixin();
const dataStore = useDataStore();
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
useCounterMixin();
const mode = ref<any>($q.screen.gt.xs); // true = desktop, false = mobile
const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
const rows = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงในตาราง
const rowsData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในตาราง
const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดึงประวัติ
const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงประวัติ
const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในประวัติ
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไข
const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
const visibleColumns = ref<string[]>([
"dateStart",
"dateEnd",
@ -137,7 +138,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"dateStart",
"dateEnd",
@ -243,17 +243,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ");
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลปฏิบัติราชการ */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserDutyByType(link.value))
.then((res) => {
const data = res.data.result;
@ -264,14 +257,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไข
* @param id ID ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserDutyHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -282,15 +286,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับดาวน์โหลดไฟล์
* @param id ID ของแถวที่เลือก
* @param profileId ID ของโปรไฟล์ที่เลือก
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง*/
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -301,11 +318,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -342,7 +358,9 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -464,6 +482,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

89
src/modules/10_registry/02_Government/05_Actposition.vue
View file

@ -1,36 +1,36 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataStore = useDataStore();
const idByRow = ref<string>("");
const rows = ref<DutyFormType[]>([]);
const rowsData = ref<DutyFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<DutyFormType[]>([]);
const rowsHistoryData = ref<DutyFormType[]>([]);
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const dataStore = useDataStore();
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const modalHistory = ref<boolean>(false);
const mode = ref<boolean>($q.screen.gt.xs); // true if screen is larger than xs
const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
const isLoading = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดประวัติ
const rows = ref<DutyFormType[]>([]); // ข้อมูลที่แสดงในตาราง
const rowsData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหา
const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
const idByRow = ref<string>(""); // id ของแถวที่ถูกเลือกเพื่อดูประวัติ
const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหาในประวัติ
const modalHistory = ref<boolean>(false); // แสดงหรือซ่อน modal ประวัติการแก้ไข
const checkType = ref<boolean>(
dataStore.officerType == "OFFICER" ? true : false
);
/** ตัวแปรข้อมูล */
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
@ -103,10 +103,6 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"dateStart",
"dateEnd",
@ -116,7 +112,6 @@ const visibleColumnsHistory = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "dateStart",
@ -188,16 +183,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
format: (v) => date2Thai(v, false, true),
},
]);
const pagination = ref({
sortBy: "lastUpdatedAt",
});
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserActpositionByType(link.value))
.then((res) => {
const data = res.data.result;
@ -208,14 +201,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* เปิด modal ประวัติการแก้ไข
* @param id ID ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserActpositionHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -226,10 +230,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันสำหรับค้นหาข้อมูล */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -240,12 +245,11 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -282,7 +286,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -363,6 +370,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขรักษาการในตำแหน่ง'"
@ -371,6 +379,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>

81
src/modules/10_registry/02_Government/06_Assistance.vue
View file

@ -1,33 +1,35 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const link = ref<string>("");
const dataStore = useDataStore();
const idByRow = ref<string>("");
const rows = ref<DutyFormType[]>([]);
const rowsData = ref<DutyFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<DutyFormType[]>([]);
const rowsHistoryData = ref<DutyFormType[]>([]);
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล ถ้าเป็นมือถือจะเป็น false;
const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
const rows = ref<DutyFormType[]>([]); // ข้อมูลตารางหลัก
const rowsData = ref<DutyFormType[]>([]); // ข้อมูลตารางหลักสำหรับค้นหา
const filter = ref<string>(""); // ตัวแปรค้นหา
const idByRow = ref<string>(""); // ตัวแปรเก็บ id ของแถวที่เลือกเพื่อดูประวัติ
const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไขสำหรับค้นหา
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
const visibleColumns = ref<string[]>([
"commandName",
"agency",
@ -135,7 +137,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"commandName",
"agency",
@ -241,15 +242,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูลช่วยราชการ */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserAssistanceByType(link.value))
.then((res) => {
const data = res.data.result;
@ -260,14 +256,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันเปิด modal ดูประวัติการแก้ไข
* @param id ID ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserAssistanceHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -278,13 +285,14 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันโหลไฟลเอกสารหลักฐาน
* @param id รายการที่ต้องการโหลด
* @param profileId ID ของโปรไฟล์
*/
async function onDownloadFile(id: string, profileId: string) {
showLoader();
@ -310,6 +318,7 @@ async function onDownloadFile(id: string, profileId: string) {
});
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -320,11 +329,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataStore.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1">ช่วยราชการ</span>
@ -359,7 +367,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -469,6 +480,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขรายการช่วยราชการ'"
@ -477,6 +489,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

189
src/modules/10_registry/02_Government/07_Position.vue
View file

@ -1,49 +1,49 @@
<script setup lang="ts">
import { useQuasar, type QTableColumn } from "quasar";
import { ref, onMounted, computed } from "vue";
import { ref, onMounted, computed, reactive } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useGovernmentPosDataStore } from "@/modules/10_registry/store/Position";
import type {
SalaryFormType,
CardDataPos,
} from "@/modules/10_registry/interface/index/Main";
import type { DataCommandCode } from "@/modules/10_registry/interface/response/Main";
//history dialog
/**import components*/
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const dataPerson = useDataStore();
const store = useGovernmentPosDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
date2Thai,
onSearchDataTable,
formatDatePosition,
findOrgName,
findOrgNameHtml,
} = mixin;
} = useCounterMixin();
const idByRow = ref<string>("");
const rows = ref<SalaryFormType[]>([]);
const rowsData = ref<SalaryFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<SalaryFormType[]>([]);
const rowsHistoryData = ref<SalaryFormType[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const checkType = ref<boolean>(
dataPerson.officerType == "OFFICER" ? true : false
);
const modalHistory = ref<boolean>(false);
); // เช็คประเภทผู้ใช้งาน
const mode = ref<boolean>($q.screen.gt.xs); // เช็คขนาดหน้าจอ ถ้าเป็นขนาดใหญ่กว่า xs จะเป็นโหมดแสดงตาราง
const isLoading = reactive({
position: false, // เช็คสถานะการโหลดข้อมูลตำแหน่ง
tenure: false, // เช็คสถานะการโหลดข้อมูลระยะเวลาดำรงตำแหน่ง
});
const isLoadingHistory = ref<boolean>(false); // เช็คสถานะการโหลดข้อมูลประวัติ
const link = ref<string>(""); // link สำหรับดึงข้อมูล
const rows = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่ง
const rowsData = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่งสำหรับค้นหา
const idByRow = ref<string>(""); // id ของแถวที่ต้องการดูประวัติ
const filter = ref<string>(""); // ค่าที่กรอกใน input ค้นหา
const rowsHistory = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่ง
const rowsHistoryData = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่งสำหรับค้นหา
const modalHistory = ref<boolean>(false); // เปิดปิด dialog ประวัติ
const cardData = ref<CardDataPos[]>([
{
label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@ -58,7 +58,6 @@ const cardData = ref<CardDataPos[]>([
data: [],
},
]);
const baseColumns = ref<QTableColumn[]>([
{
name: "commandDateAffect",
@ -315,7 +314,6 @@ const baseVisibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = computed<QTableColumn[]>(() => {
if (!checkType.value) {
if (baseColumns.value) {
@ -349,59 +347,9 @@ const columnsHistory = computed<QTableColumn[]>(() => {
});
const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
/** เปิด dialog ประวัติ*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
.get(config.API.dataUserPosition(link.value))
.then((res) => {
const data = res.data.result;
rows.value = data;
rowsData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** get history */
function getHistory() {
showLoader();
http
.get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
rowsHistory.value = data;
rowsHistoryData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
/** ฟังก์ชันดึงข้อมูลระยะเวลาดำรงตำแหน่ง */
async function fetchDataTenure() {
console.log(link.value);
isLoading.tenure = true;
await http
.get(config.API.salaryTenurePosition(link.value))
.then((res) => {
@ -440,40 +388,78 @@ async function fetchDataTenure() {
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
isLoading.tenure = false;
});
}
/** function fetch ข้อมูลประเภทคำสั่ง*/
async function fetchDataCommandCode() {
if (store.commandCodeData.length > 0) return false;
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
isLoading.position = true;
await http
.get(config.API.orgCommandCode)
.get(config.API.dataUserPosition(link.value))
.then((res) => {
const data = res.data.result;
const DataCommandCode = data.filter((e: DataCommandCode) =>
store.positionCode.includes(e.code)
);
const options = DataCommandCode.map((e: DataCommandCode) => ({
id: e.code.toString(),
name: e.name,
}));
store.commandCodeData = options;
rows.value = data;
rowsData.value = data;
})
.catch((err) => {
messageError($q, err);
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoading.position = false;
});
}
/**
* เปิด dialog ประวัติ
* @param id id ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันดึงข้อมูลประวัติ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
rowsHistory.value = data;
rowsHistoryData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
link.value = await dataPerson.getProFileType();
if (link.value === "-employee") {
cardData.value.splice(2, 1);
try {
link.value = await dataPerson.getProFileType();
if (link.value === "-employee") {
cardData.value.splice(2, 1);
}
await Promise.all([getData(), fetchDataTenure()]);
} catch (error) {
messageError($q, error);
}
getData();
fetchDataTenure();
fetchDataCommandCode();
});
</script>
@ -492,7 +478,15 @@ onMounted(async () => {
</div>
<div class="col-12"><q-separator /></div>
<q-card-section class="q-pt-none" style="min-height: 200px">
<li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
<q-skeleton
v-if="isLoading.tenure"
type="text"
class="q-mb-sm"
style="width: 100%"
/>
<li v-else v-for="data in item.data">
{{ data.name }} {{ data.time }}
</li>
</q-card-section>
</q-card>
</div>
@ -532,7 +526,9 @@ onMounted(async () => {
</div>
<div class="col-12 q-mt-sm">
<SkeletonTable v-if="isLoading.position" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -664,6 +660,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

132
src/modules/10_registry/03_Salary/01_Salary.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useQuasar, type QTableColumn } from "quasar";
import { ref, onMounted, computed } from "vue";
import { useQuasar, type QTableColumn } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -9,40 +9,33 @@ import { useDataStore } from "@/stores/data";
import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const dataPerson = useDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
date2Thai,
onSearchDataTable,
findOrgName,
findOrgNameHtml,
} = mixin;
const idByRow = ref<string>("");
const rows = ref<SalaryFormType[]>([]);
const rowsData = ref<SalaryFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<SalaryFormType[]>([]);
const rowsHistoryData = ref<SalaryFormType[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const checkType = ref<boolean>(
dataPerson.officerType == "OFFICER" ? true : false
);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
} = useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
const link = ref<string>(""); //ลิงค์ประเภทข้อมูล
const isLoading = ref<boolean>(false); //โหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //โหลดประวัติ
const rows = ref<SalaryFormType[]>([]); //ข้อมูลตาราง
const rowsData = ref<SalaryFormType[]>([]); //ข้อมูล (ค้นหา)
const filter = ref<string>(""); //ตัวกรองข้อมูล
const idByRow = ref<string>(""); //id ของแถวที่เลือก
const rowsHistory = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ
const rowsHistoryData = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ (ค้นหา)
const modalHistory = ref<boolean>(false); //เปิดปิด dialog ประวัติ
const salaryText = computed(() => {
return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
});
const baseColumns = ref<QTableColumn[]>([
{
name: "commandDateAffect",
@ -330,20 +323,6 @@ const visibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = computed(() => {
if (link.value === "-employee") {
if (baseColumns.value) {
return baseColumns.value.filter(
(column) =>
column.name !== "positionSalaryAmount" &&
column.name !== "mouthSalaryAmount"
);
}
}
return baseColumns.value;
});
const visibleColumnsHistory = ref<string[]>([
"commandDateAffect",
"posNumCodeSit",
@ -363,20 +342,6 @@ const visibleColumnsHistory = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = computed(() => {
if (link.value === "-employee") {
if (baseColumnsHistory.value) {
return baseColumnsHistory.value.filter(
(column: QTableColumn) =>
column.name !== "positionSalaryAmount" &&
column.name !== "mouthSalaryAmount"
);
}
}
return baseColumns.value;
});
const baseColumnsHistory = ref<QTableColumn[]>([
{
name: "commandDateAffect",
@ -639,16 +604,36 @@ const baseColumnsHistory = ref<QTableColumn[]>([
},
]);
/** เปิด dialog ประวัติ*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
const columns = computed(() => {
if (link.value === "-employee") {
if (baseColumns.value) {
return baseColumns.value.filter(
(column) =>
column.name !== "positionSalaryAmount" &&
column.name !== "mouthSalaryAmount"
);
}
}
return baseColumns.value;
});
/** get data */
function getData() {
showLoader();
http
const columnsHistory = computed(() => {
if (link.value === "-employee") {
if (baseColumnsHistory.value) {
return baseColumnsHistory.value.filter(
(column: QTableColumn) =>
column.name !== "positionSalaryAmount" &&
column.name !== "mouthSalaryAmount"
);
}
}
return baseColumns.value;
});
/*** ฟังก์ชันสำหรับดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserSalaryByType(link.value))
.then((res) => {
const data = res.data.result;
@ -659,13 +644,24 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
/**
* ฟังก์ชันสำหรับเปิด dialog ประวัติการแก้ไข
* @param id id ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
http
.get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
.then((res) => {
@ -677,10 +673,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -691,11 +688,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none">
<span class="text-blue-6 text-weight-bold text-body1">{{
@ -732,7 +728,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -851,6 +850,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="`ประวัติแก้ไข${salaryText}`"
@ -859,8 +859,10 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

98
src/modules/10_registry/03_Salary/02_Nopaid.vue
View file

@ -1,37 +1,39 @@
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const rows = ref<NopaidFormType[]>([]);
const rowsData = ref<NopaidFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<NopaidFormType[]>([]);
const rowsHistoryData = ref<NopaidFormType[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const dataPerson = useDataStore();
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
useCounterMixin();
const modalHistory = ref<boolean>(false);
const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
const link = ref<string>(""); //ประเภทของโปรไฟล์
const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดข้อมูลประวัติ
const rows = ref<NopaidFormType[]>([]); //ข้อมูลที่แสดงในตาราง
const rowsData = ref<NopaidFormType[]>([]); //ข้อมูลที่ใช้สำหรับค้นหาในตาราง
const filter = ref<string>(""); //ตัวกรองสำหรับค้นหาในตาราง
const idByRow = ref<string>(""); // รหัสของแถวที่ถูกเลือกสำหรับประวัติ
const rowsHistory = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่แสดงในตาราง
const rowsHistoryData = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่ใช้สำหรับค้นหาในตาราง
const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติ
// ข้อความสำหรับแสดงในหัวตาราง
const salaryText = computed(() => {
return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
});
const visibleColumns = ref<string[]>([
"date",
"detail",
@ -41,7 +43,6 @@ const visibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "date",
@ -128,7 +129,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"date",
"reference",
@ -138,7 +138,6 @@ const visibleColumnsHistory = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "date",
@ -221,18 +220,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`); // กลุ่มไฟล์สำหรับเอกสารบันทึก
const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserNopaidByType(link.value))
.then((res) => {
const data = res.data.result;
@ -243,14 +236,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันสำหรับเปิดประวัติการแก้ไข
* @param id รหัสของแถวที่ถูกเลือกสำหรับประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(
config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
)
@ -263,15 +267,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับดาวน์โหลดไฟล์
* @param id รหัสของแถวที่ถูกเลือกสำหรับดาวน์โหลด
* @param profileId รหัสโปรไฟล์ของผู้ใช้
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูล */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -282,11 +299,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1">{{
@ -323,7 +339,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -448,6 +467,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

98
src/modules/10_registry/04_Achievement/01_Certificate.vue
View file

@ -1,37 +1,35 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
const dataPerson = useDataStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
useCounterMixin();
const idByRow = ref<string>("");
const rows = ref<CertificateDetail[]>([]);
const rowsData = ref<CertificateDetail[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<CertificateDetail[]>([]);
const rowsHistoryData = ref<CertificateDetail[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
const rows = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพ
const rowsData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
const rowsHistory = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพ
const rowsHistoryData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขใบอนุญาต
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
@ -126,7 +124,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"certificateType",
"issuer",
@ -218,18 +215,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ"); //กลุ่มไฟล์สำหรับดาวน์โหลด
const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลใบอนุญาตประกอบวิชาชีพ */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserCertificateByType(link.value, "certificate"))
.then((res) => {
const data = res.data.result;
@ -240,14 +231,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันสำหรับเปิด modal แสดงประวัติการแก้ไขใบอนุญาต
* @param id ID ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขใบอนุญาต */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(
config.API.dataUserCertificateHistoryByType(
link.value,
@ -264,15 +266,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับดาวน์โหลดไฟล์
* @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
* @param profileId ID ของโปรไฟล์
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -283,11 +298,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none">
<span class="text-blue-6 text-weight-bold text-body1"
@ -324,7 +338,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -445,6 +462,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

77
src/modules/10_registry/04_Achievement/02_Training.vue
View file

@ -1,34 +1,33 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";
import type { TrainingFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const rows = ref<TrainingFormType[]>([]);
const rowsData = ref<TrainingFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<TrainingFormType[]>([]);
const rowsHistoryData = ref<TrainingFormType[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const dataPerson = useDataStore();
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
const isLoading = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูลประวัติ
const rows = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
const rowsData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าการค้นหา
const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
const rowsHistory = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน
const rowsHistoryData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงานที่ใช้ในการค้นหา
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขการฝึกอบรม/ดูงาน
const visibleColumns = ref<string[]>([
"name", // ชื่อโครงงาน
"topic", // หัวข้อ
@ -187,7 +186,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"name", // ชื่อโครงงาน
"topic", // หัวข้อ
@ -343,15 +341,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserCertificateByType(link.value, "training"))
.then((res) => {
const data = res.data.result;
@ -362,14 +356,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* เปิด modal แสดงประวัติการแก้ไขการฝึกอบรม/ดูงาน
* @param id ID ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(
config.API.dataUserCertificateHistoryByType(
link.value,
@ -386,10 +391,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -400,11 +406,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -441,7 +446,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -517,6 +525,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
@ -525,8 +534,10 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

98
src/modules/10_registry/04_Achievement/03_Insignia.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -10,27 +10,26 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const rows = ref<InsigniaFormType[]>([]);
const rowsData = ref<InsigniaFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<InsigniaFormType[]>([]);
const rowsHistoryData = ref<InsigniaFormType[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const dataPerson = useDataStore();
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
useCounterMixin();
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
const isLoading = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูลประวัติ
const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
const rows = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ
const rowsData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ ที่ใช้ในการค้นหา
const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าค้นหา
const rowsHistory = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ
const rowsHistoryData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ ที่ใช้ในการค้นหา
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขเครื่องราชฯ
const visibleColumns = ref<String[]>([
"insignia",
"insigniaType",
@ -239,7 +238,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"insignia",
"insigniaType",
@ -433,18 +431,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const fileGroup = ref<string>("เครื่องราชฯ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
const fileGroup = ref<string>("เครื่องราชฯ");
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลเครื่องราชฯ */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserCertificateByType(link.value, "insignia"))
.then((res) => {
const data = res.data.result;
@ -455,14 +447,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไขเครื่องราชฯ
* @param id ID ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขเครื่องราชฯ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(
config.API.dataUserCertificateHistoryByType(
link.value,
@ -479,15 +482,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับดาวน์โหลดไฟล์
* @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
* @param profileId ID ของโปรไฟล์
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -498,11 +514,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -539,7 +554,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -674,8 +692,10 @@ onMounted(async () => {
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:type="'insignia'"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

97
src/modules/10_registry/04_Achievement/04_Honor.vue
View file

@ -1,38 +1,36 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const store = useRegistryInFormationStore();
const rows = ref<HonorFormData[]>([]);
const rowsData = ref<HonorFormData[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<HonorFormData[]>([]);
const rowsHistoryData = ref<HonorFormData[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const dataPerson = useDataStore();
const { getPathUploadFlie } = useRegistryDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
useCounterMixin();
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
const link = ref<string>(""); //ลิงก์สำหรับดึงข้อมูล
const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
const rows = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณ
const rowsData = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณที่ใช้ในการค้นหา
const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
const rowsHistory = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณ
const rowsHistoryData = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณที่ใช้ในการค้นหา
const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขประกาศเกียรติคุณ
const visibleColumns = ref<String[]>([
"issuer",
"detail",
@ -127,7 +125,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"issuer",
"detail",
@ -219,18 +216,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const fileGroup = ref<string>("ประกาศเกียรติคุณ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
const fileGroup = ref<string>("ประกาศเกียรติคุณ");
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันสำหรับดึงข้อมูลประกาศเกียรติคุณ */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserCertificateByType(link.value, "honor"))
.then((res) => {
const data = res.data.result;
@ -241,18 +232,30 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/**
* เปิด modal ประวัติการแก้ไข
* @param id ID ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get history */
function getHistory() {
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
const url =
dataPerson.officerType == "OFFICER"
? config.API.dataUserHonorHistory("honor", "", idByRow.value)
: config.API.dataUserHonorHistory("honor", "-employee", idByRow.value);
showLoader();
http
await http
.get(url)
.then((res) => {
const data = res.data.result;
@ -263,15 +266,28 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันสำหรับดาวน์โหลดไฟล์
* @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
* @param profileId id ของโปรไฟล์
*/
async function onDownloadFile(id: string, profileId: string) {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
showLoader();
try {
const data = await getPathUploadFlie(fileGroup.value, profileId, id);
window.open(data.downloadUrl, "_blank");
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -282,11 +298,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
@ -323,7 +338,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -445,6 +463,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

85
src/modules/10_registry/04_Achievement/05_Assessments.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
@ -12,31 +12,28 @@ import type {
DataOption,
} from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const rows = ref<AssessmentsFormType[]>([]);
const rowsData = ref<AssessmentsFormType[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<AssessmentsFormType[]>([]);
const rowsHistoryData = ref<AssessmentsFormType[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const dataPerson = useDataStore();
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
const rows = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมา
const rowsData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมาไว้สำหรับค้นหา
const filter = ref<string>(""); //ตัวแปรเก็บค่าค้นหา
const idByRow = ref<string>(""); //ตัวแปรเก็บ id ของแถวที่เลือก
const rowsHistory = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไข
const rowsHistoryData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไขไว้สำหรับค้นหา
const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการ
const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
const periodOp = ref<DataOption[]>([
{ id: "OCT", name: "ตุลาคม" },
{ id: "APR", name: "เมษายน" },
]);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
const columns = ref<QTableProps["columns"]>([
{
name: "date",
@ -328,7 +325,6 @@ const visibleColumnsHistory = ref<string[]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumns = ref<string[]>([
"point1Total",
"year",
@ -344,15 +340,10 @@ const visibleColumns = ref<string[]>([
"lastUpdatedAt",
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserCertificateByType(link.value, "assessments"))
.then((res) => {
const data = res.data.result;
@ -363,14 +354,25 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันเปิด modal ประวัติการแก้ไข
* @param id - id ของแถวที่เลือก
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(
config.API.dataUserCertificateHistoryByType(
link.value,
@ -387,10 +389,14 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/**
* ฟังก์ชันตรวจสอบช่วงคะแนน
* @param val - ค่าที่ต้องการตรวจสอบ
*/
function textRangePoint(val: number | undefined) {
if (val == undefined) val = -1;
if (val < 60.0) return "(คะแนนต่ำกว่าร้อยละ 60.00)";
@ -401,6 +407,10 @@ function textRangePoint(val: number | undefined) {
else return "";
}
/**
* ฟังก์ชันตรวจสอบคะแนน
* @param val - ค่าที่ต้องการตรวจสอบ
*/
function textPoint(val: number | undefined) {
if (val == undefined) val = -1;
if (val < 60.0) return "ต้องปรับปรุง";
@ -440,6 +450,7 @@ onMounted(async () => {
v-model="filter"
label="ค้นหา"
style="max-width: 200px"
@keydown.enter.prevent="onSearch"
>
<template v-slot:append>
<q-icon name="search" />
@ -461,7 +472,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -545,6 +559,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
@ -553,8 +568,10 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>
.absolute_button {
position: absolute;

83
src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
View file

@ -1,34 +1,28 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const typeIDP = ref<string>("");
const link = ref<string>("");
const dataPerson = useDataStore();
const idByRow = ref<string>("");
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);
const filter = ref<string>("");
const rowsHistory = ref<any[]>([]);
const rowsHistoryData = ref<any[]>([]);
const $q = useQuasar();
const mode = ref<boolean>($q.screen.gt.xs);
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const modalDevelop = ref<boolean>(false);
const kpiDevelopmentId = ref<string>("");
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const dataPerson = useDataStore();
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล
const typeIDP = ref<string>(""); // ประเภทการพัฒนา
const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูล
const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
const rows = ref<any[]>([]); // ข้อมูลที่แสดงในตาราง
const rowsData = ref<any[]>([]); // ข้อมูลทั้งหมดที่ใช้สำหรับการค้นหา
const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
const modalDevelop = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด Dialog การพัฒนารายบุคคล
const kpiDevelopmentId = ref<string>(""); // ตัวแปรสำหรับเก็บ ID การพัฒนารายบุคคล
const visibleColumns = ref<string[]>([
"no",
"name",
@ -39,7 +33,6 @@ const visibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -130,21 +123,15 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const paginationPlan = ref({
page: 1,
rowsPerPage: 10,
});
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.developmentUserByType(link.value))
.then((res) => {
const data = res.data.result;
@ -155,31 +142,7 @@ function getData() {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** get history */
function getHistory() {
showLoader();
http
.get(
config.API.dataUserCertificateHistoryByType(
link.value,
"assessments",
idByRow.value
)
)
.then((res) => {
const data = res.data.result;
rowsHistory.value = data;
rowsHistoryData.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -193,6 +156,7 @@ function openDialogDevelop(data: any) {
typeIDP.value = data.type;
}
/** ฟังก์ชันค้นหาข้อมูล */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -203,12 +167,13 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12" v-if="dataPerson.officerType == 'OFFICER'">
<!-- v-if="dataPerson.officerType == 'OFFICER'" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1"
>การพัฒนารายบุคคล (Individual Development Plan)</span
@ -244,7 +209,9 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered

67
src/modules/10_registry/05_Other/01_Other.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { is, useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
@ -9,16 +9,16 @@ import { useDataStore } from "@/stores/data";
import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
const link = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const dataPerson = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
mixin;
const isLoading = ref<boolean>(false);
const isLoadingHistory = ref<boolean>(false);
const idByRow = ref<string>("");
const rows = ref<OtherFormType[]>([]);
const rowsData = ref<OtherFormType[]>([]);
@ -26,10 +26,7 @@ const filter = ref<string>("");
const rowsHistory = ref<OtherFormType[]>([]);
const rowsHistoryData = ref<OtherFormType[]>([]);
const mode = ref<boolean>($q.screen.gt.xs);
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const visibleColumns = ref<string[]>([
"date",
"detail",
@ -85,7 +82,6 @@ const columns = ref<QTableProps["columns"]>([
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const visibleColumnsHistory = ref<string[]>([
"date",
"detail",
@ -139,15 +135,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูล */
async function getData() {
isLoading.value = true;
await http
.get(config.API.dataUserOtherByType(link.value))
.then((res) => {
const data = res.data.result;
@ -156,14 +147,27 @@ function getData() {
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {
isLoading.value = false;
});
}
/** get history */
function getHistory() {
showLoader();
http
/**
* ฟังก์ชันเปิดโมดัลดูประวัติ
* @param id ID ของแถวที่ต้องการดูประวัติ
*/
function onHistory(id: string) {
modalHistory.value = true;
idByRow.value = id;
}
/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูลอื่นๆ */
async function getHistory() {
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
.get(config.API.dataUserOtherHistoryByType(link.value, idByRow.value))
.then((res) => {
const data = res.data.result;
@ -174,10 +178,11 @@ function getHistory() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadingHistory.value = false;
});
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -188,11 +193,10 @@ function onSearch() {
onMounted(async () => {
link.value = await dataPerson.getProFileType();
getData();
await getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none">
<span class="text-blue-6 text-weight-bold text-body1">ข้อมูลอื่นๆ</span>
@ -227,7 +231,10 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -310,6 +317,7 @@ onMounted(async () => {
</template>
</d-table>
</div>
<DialogHistory
v-model:modal="modalHistory"
:title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
@ -318,6 +326,7 @@ onMounted(async () => {
:rows-data="rowsHistoryData"
:visibleColumns="visibleColumnsHistory"
:columns="columnsHistory"
:is-loading="isLoadingHistory"
/>
</template>
<style scoped>

46
src/modules/10_registry/05_Other/02_File.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import { ref, reactive, onMounted } from "vue";
import { is, useQuasar } from "quasar";
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
const fileList = ref<FileFormType[]>([]);
const store = useRegistryInFormationStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const store = useRegistryInFormationStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const isLoading = ref<boolean>(false);
const fileList = ref<FileFormType[]>([]);
function onHistory() {
modalHistory.value = true;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูลไฟล์ */
async function getData() {
isLoading.value = true;
await http
.get(
config.API.fileByFileUser(
"ระบบทะเบียนประวัติ",
@ -41,9 +35,7 @@ function getData() {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 1500);
isLoading.value = false;
});
}
@ -51,9 +43,9 @@ function getData() {
* ดาวน์โหลดลิงค์ไฟล์
* @param fileName file name
*/
function downloadFile(fileName: string) {
async function downloadFile(fileName: string) {
showLoader();
http
await http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
.finally(() => {
hideLoader();
});
}
@ -78,8 +70,8 @@ onMounted(() => {
getData();
});
</script>
<template>
<!-- v-if="mode" -->
<div class="col-12">
<q-toolbar class="q-px-none q-mt-md">
<span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
@ -89,7 +81,12 @@ onMounted(() => {
ไฟล์เอกสารหลักฐาน
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div v-if="isLoading" class="col-12 q-pa-sm">
<q-skeleton type="QSlider" />
</div>
<div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
@ -124,6 +121,7 @@ onMounted(() => {
</q-card>
</div>
</template>
<style scoped>
.absolute_button {
position: absolute;

38
src/modules/10_registry/05_Other/03_FileOther.vue
View file

@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
const fileList = ref<FileFormType[]>([]);
const store = useRegistryInFormationStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const store = useRegistryInFormationStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const modalHistory = ref<boolean>(false);
/** ตัวแปรข้อมูล */
const isLoading = ref<boolean>(false);
const fileList = ref<FileFormType[]>([]);
function onHistory() {
modalHistory.value = true;
}
/** get data */
function getData() {
showLoader();
http
/** ฟังก์ชันดึงข้อมูลไฟล์ */
async function getData() {
isLoading.value = true;
await http
.get(
config.API.fileByFileUser(
"ระบบทะเบียนประวัติ",
@ -41,9 +35,7 @@ function getData() {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 1500);
isLoading.value = false;
});
}
@ -51,9 +43,9 @@ function getData() {
* ดาวน์โหลดลิงค์ไฟล์
* @param fileName file name
*/
function downloadFile(fileName: string) {
async function downloadFile(fileName: string) {
showLoader();
http
await http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
.finally(() => {
hideLoader();
});
}
@ -89,7 +81,11 @@ onMounted(() => {
ไฟล์เอกสาร ก.พ.7
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div v-if="isLoading" class="col-12 q-pa-sm">
<q-skeleton type="QSlider" />
</div>
<div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item

317
src/modules/10_registry/Dialog/DialogHistory.vue
View file

@ -1,35 +1,48 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const type = ref<string>("");
const mixin = useCounterMixin();
const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
/** import type */
import type { QTableProps } from "quasar";
const filter = ref<string>("");
/** import component */
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const rows = defineModel<any>("rows");
const rowsData = defineModel<any>("rowsData");
const columns = defineModel<QTableProps["columns"]>("columns");
const visibleColumns = defineModel<string[]>("visibleColumns");
const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
/** define model */
const modal = defineModel<boolean>("modal", { required: true }); // modal visibility
const isLoading = defineModel<boolean>("isLoading", { required: true }); // loading state
const title = defineModel<string>("title", { required: true }); // dialog title
const rows = defineModel<any[]>("rows"); // data rows for the table
const rowsData = defineModel<any[]>("rowsData"); // raw data for the table
const columns = defineModel<QTableProps["columns"]>("columns"); // table columns definition
const visibleColumns = defineModel<string[]>("visibleColumns"); // visible columns in the table
/** define props */
const props = defineProps({
getData: Function, // function to fetch data
type: String, // type of data (e.g., "Leave", "insignia")
});
const type = ref<string>(""); // ประเภทของข้อมูล
const filter = ref<string>(""); // filter input for searching
const pagination = ref({
sortBy: "lastUpdatedAt",
});
const props = defineProps({
getData: Function,
type: String,
});
/** ปิด Dialog และรีเซ็ตค่า */
function close() {
modal.value = false;
filter.value = "";
}
/**
* ฟังก์ชันแปลงวันที่เป็นรูปแบบไทย
* @param val - date range value
*/
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
} else if (date2Thai(val[0]) === date2Thai(val[1])) {
@ -39,6 +52,10 @@ function dateThaiRange(val: [Date, Date]) {
}
}
/**
* ฟังก์ชันแปลงสถานะการลาเป็นข้อความที่
* @param val สถานะการลา
*/
function statusLeave(val: string) {
switch (val) {
case "waitting":
@ -54,10 +71,11 @@ function statusLeave(val: string) {
}
}
/** ฟังก์ชันค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
rowsData.value ? rowsData.value : [],
columns.value ? columns.value : []
);
}
@ -111,141 +129,148 @@ watch(
/>
</div>
</div>
<div v-if="isLoading">
<SkeletonTable :columns="columns" />
</div>
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<div v-else class="col-12">
<d-table
flat
dense
bordered
virtual-scroll
:rows="rows"
:columns="columns"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'insignia' && type == 'insignia'">
{{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}
</div>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="(col, index) in props.cols" :key="col.name">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'insignia' && type == 'insignia'">
{{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}
</div>
<div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status' && type == 'Leave'">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div v-else-if="col.name == 'organization'">
{{
props.row
? findOrgNameHtml({
root: props.row.orgRoot,
child1: props.row.orgChild1,
child2: props.row.orgChild2,
child3: props.row.orgChild3,
child4: props.row.orgChild4,
})
: "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
>
<q-card bordered flat class="q-pt-md">
<q-list dense>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section
v-if="col.name == 'insignia' && type == 'insignia'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{
props.row.insignia
? `${props.row.insignia.name} `
: "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}</q-item-label
<div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}
</div>
<div v-else-if="col.name == 'status' && type == 'Leave'">
{{ props.row.status ? statusLeave(props.row.status) : "-" }}
</div>
<div v-else-if="col.name == 'organization'">
{{
props.row
? findOrgNameHtml({
root: props.row.orgRoot,
child1: props.row.orgChild1,
child2: props.row.orgChild2,
child3: props.row.orgChild3,
child4: props.row.orgChild4,
})
: "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
>
<q-card bordered flat class="q-pt-md">
<q-list dense>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section
v-if="col.name == 'insignia' && type == 'insignia'"
class="fix_top"
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'dateLeave' && type == 'Leave'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}</q-item-label
<q-item-label class="text-dark text-weight-medium">
{{
props.row.insignia
? `${props.row.insignia.name} `
: "-"
}}{{
props.row.insignia.shortName
? `(${props.row.insignia.shortName})`
: ""
}}</q-item-label
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'dateLeave' && type == 'Leave'"
class="fix_top"
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'status' && type == 'Leave'"
class="fix_top"
>
<q-item-label class="text-dark text-weight-medium">
{{
props.row.status ? statusLeave(props.row.status) : "-"
}}</q-item-label
<q-item-label class="text-dark text-weight-medium">
{{
dateThaiRange([
props.row.dateStartLeave,
props.row.dateEndLeave,
])
}}</q-item-label
>
</q-item-section>
<q-item-section
v-else-if="col.name == 'status' && type == 'Leave'"
class="fix_top"
>
</q-item-section>
<q-item-section v-else class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
<q-item-label class="text-dark text-weight-medium">
{{
props.row.status
? statusLeave(props.row.status)
: "-"
}}</q-item-label
>
</q-item-section>
<q-item-section v-else class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
</div>
</q-card-section>
</q-card>
</q-dialog>

55
src/modules/10_registry/components/DialogAddRequestEdit.vue
View file

@ -12,9 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
/** use*/
const $q = useQuasar();
const link = ref<string>("");
const store = useRequestEditStore();
@ -22,24 +20,23 @@ const dataStore = useDataStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
/**
* props
*/
/** props*/
const modalInfo = ref<boolean>(false);
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
fetchData: { type: Function, requied: true },
fetchData: { type: Function, required: true },
});
const isReadOnly = ref<boolean>(false);
const profileId = ref<string>("");
const isReadOnly = ref<boolean>(false); // อ่านข้อมูลได้อย่างเดียว
const profileId = ref<string>(""); // profileId ของผู้ยื่นคำร้องq
const formData = reactive({
topic: "",
detail: "",
document: null,
});
const topicOption = ref<string[]>(store.optionTopic);
const topicOption = ref<string[]>(store.optionTopic); // ตัวเลือกเรื่องที่ต้องการแก้ไข
/** function ปิด Dialog และเคลียร์ข้อมูล */
function closeDialog() {
modal.value = false;
formData.topic = "";
@ -47,9 +44,7 @@ function closeDialog() {
formData.document = null;
}
/**
* function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
*/
/** function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล */
function onSubmit() {
dialogConfirm(
$q,
@ -65,17 +60,18 @@ function onSubmit() {
})
.then(async (res) => {
if (formData.document) {
createURLUpload(res.data.result, formData.document);
await createURLUpload(res.data.result, formData.document);
} else {
formData.document = null;
await props.fetchData?.();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
hideLoader();
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
@ -86,10 +82,12 @@ function onSubmit() {
/**
* function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
* @param id คำร้องขอแก้ไขข้อมูล
* @param file ไฟล์ที่อัปโหลด
*/
function createURLUpload(id: string, file: any) {
async function createURLUpload(id: string, file: any) {
const fileName = { fileName: file.name };
http
await http
.post(
config.API.file(
"ระบบทะเบียนประวัติ",
@ -108,7 +106,7 @@ function createURLUpload(id: string, file: any) {
res.data[key]?.fileName !== ""
);
foundKey &&
uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
})
.catch((err) => {
messageError($q, err);
@ -117,32 +115,29 @@ function createURLUpload(id: string, file: any) {
/**
* function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
* @param uploadUrl URL สำหรับอัปโหลดไฟล์
* @param file ไฟล์ที่อัปโหลด
*/
function uploadFileDoc(uploadUrl: string, file: any) {
showLoader();
axios
async function uploadFileDoc(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async (res) => {
.then(async () => {
await props.fetchData?.();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {
hideLoader();
});
}
/**
* class input
* @param val
* function สำหรับจัดการ class ของ input
* @param val ค่าที่ใช้ในการกำหนด class
*/
function classInput(val: boolean) {
return {
@ -164,9 +159,7 @@ function filterOption(val: string, update: Function) {
});
}
/**
* function fetch profileId
*/
/** function fetch profileId */
async function fetchProfile() {
try {
isReadOnly.value = dataStore.officerType === "OFFICER";

40
src/modules/10_registry/components/skeleton/Address.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
ที่อยู่ตามทะเบียนบ้าน
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</div>
</template>

103
src/modules/10_registry/components/skeleton/Family.vue Normal file
View file

@ -0,0 +1,103 @@
<script setup lang="ts">
const type = defineModel("type", {
type: String,
default: "",
});
</script>
<template>
<div class="col-12" v-if="type === 'couple'">
<q-card bordered class="bg-grey-1 q-pa-sm">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
สถานภาพการสมรส
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
เลขประจำตัวประชาชน
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
สถานภาพการมีชีวิต
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12" v-else>
<q-card bordered class="bg-grey-1 q-pa-sm">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
เลขประจำตัวประชาชน
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
สถานภาพการมีชีวิต
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</div>
</div>
</q-card>
</div>
</template>

110
src/modules/10_registry/components/skeleton/Government.vue Normal file
View file

@ -0,0 +1,110 @@
<template>
<q-card bordered class="bg-grey-1 q-pa-md">
<div class="row q-col-gutter-y-sm">
<div class="col-12 col-sm-12 col-md-6">
<div class="row q-col-gutter-y-sm">
<div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
<div class="col-7 text-html">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-5 text-grey-6 text-weight-medium">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-5 text-grey-6 text-weight-medium">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6">
<div class="row q-col-gutter-y-sm">
<div class="col-5 text-grey-6 text-weight-medium">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-5 text-grey-6 text-weight-medium">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
<div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
</div>
</div>
<q-separator class="q-my-md" />
<div class="row">
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-6 text-grey-6 text-weight-medium">
วันที่สั่งบรรจุ
</div>
<div class="col-6">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
<div class="row">
<div class="col-6 text-grey-6 text-weight-medium">
วันที่เริ่มปฏิบัติราชการ
</div>
<div class="col-6">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
<div class="row">
<div class="col-6 text-grey-6 text-weight-medium">
วันครบเกษียณอายุ
</div>
<div class="col-6">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
<div class="row">
<div class="col-6 text-grey-6 text-weight-medium">
วันที่เกษียณอายุราชการตามกฏหมาย
</div>
<div class="col-6">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
<div class="row">
<div class="col-5 text-grey-6 text-weight-medium">
อายุราชการเกื้อกูล
</div>
<div class="col-7">
<q-skeleton class="q-mb-sm" type="text" />
</div>
</div>
</div>
</div>
</q-card>
</template>

12
src/modules/10_registry/tabs/01_information.vue
View file

@ -2,12 +2,12 @@
import { useRouter } from "vue-router";
/** component */
import Information from "@/modules/10_registry/01_Information/01_Information.vue";
import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
import Address from "@/modules/10_registry/01_Information/03_Address.vue";
import Family from "@/modules/10_registry/01_Information/04_Family.vue";
import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
import Information from "@/modules/10_registry/01_Information/01_Information.vue"; //ปรับข้อมูลส่วนตัว
import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue"; //เปลี่ยนชื่อ-นามสกุล
import Address from "@/modules/10_registry/01_Information/03_Address.vue"; //ที่อยู่
import Family from "@/modules/10_registry/01_Information/04_Family.vue"; //ข้อมูลครอบครัว
import Educations from "@/modules/10_registry/01_Information/05_Educations.vue"; //ข้อมูลการศึกษา
import Ability from "@/modules/10_registry/01_Information/06_Ability.vue"; //ความสามารถ
const router = useRouter();
</script>

140
src/modules/10_registry/views/main.vue
View file

@ -1,44 +1,51 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import genReport from "@/plugins/genreport";
import { ref, computed, onMounted } from "vue";
import { useQuasar } from "quasar";
//หน้าเมนู
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useRouter } from "vue-router";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";
/** import components */
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
const store = useRegistryInFormationStore();
const $q = useQuasar();
const dataStore = useDataStore();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const router = useRouter();
const tab = ref<string>("information");
const store = useRegistryInFormationStore();
const dataStore = useDataStore();
const { messageError, showLoader, hideLoader } = useCounterMixin();
const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์
/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
const salaryText = computed(() => {
return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
});
const sizeImg = ref<string>("");
function onResize(size: any) {
/**
* ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
* @param size ขนาดที่ได้จาก q-resize-observer
*/
function onResize(size: { width: number; height: number }) {
const width = size.width > 100 ? 100 : size.width;
sizeImg.value = `${width}px`;
}
function onMobile(type: string) {
router.push(`/registry/${type}`);
}
/**
* ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
* @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
* FULL: ก.พ.7/ก.ก.1
* SHORT: ประวัติแบบย่อ
*/
async function onClickDownloadKp7(type: string) {
showLoader();
const url =
@ -66,19 +73,19 @@ async function onClickDownloadKp7(type: string) {
});
}
/**
* ฟังชั่นกลับหน้าหลัก
*/
/** ฟังชั่นกลับหน้าหลัก*/
const clickBack = () => {
router.push(`/`);
};
/**
* function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
*/
/** ฟังก์ชัน redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล*/
function redirectToPagePetition() {
router.push(`/registry/request-edit`);
}
function onMobile(type: string) {
router.push(`/registry/${type}`);
}
</script>
<template>
@ -106,7 +113,40 @@ function redirectToPagePetition() {
</div>
<div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
<div class="col-3">
<q-card bordered>
<q-card v-if="dataStore.isLoadingProfile" bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
<div class="absolute-center">
<q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
</div>
</div>
<div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
<q-skeleton type="text" width="120px" />
<q-skeleton type="text" width="150px" />
<q-skeleton type="text" width="100px" />
<q-skeleton type="text" width="50px" />
</div>
</q-card-section>
<q-list separator class="q-mt-md">
<q-item v-for="i in 2" :key="i">
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
</q-list>
<q-card-section class="q-gutter-y-sm">
<q-skeleton type="QBtn" class="full-width" height="48px" />
<q-skeleton type="QBtn" class="full-width" height="48px" />
</q-card-section>
</q-card>
<q-card v-else bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
@ -220,8 +260,6 @@ function redirectToPagePetition() {
<q-separator />
<!-- รายการเเต่ละหน้า -->
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="information">
<InformationPage />
@ -248,7 +286,41 @@ function redirectToPagePetition() {
</div>
<div v-else>
<q-card bordered>
<q-card v-if="dataStore.isLoadingProfile" bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
<div class="absolute-center">
<q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
</div>
</div>
<div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
<q-skeleton type="text" width="120px" />
<q-skeleton type="text" width="150px" />
<q-skeleton type="text" width="100px" />
<q-skeleton type="text" width="50px" />
</div>
<div class="row justify-center q-gutter-x-lg">
<q-skeleton type="QRadio" size="48px" />
<q-skeleton type="QRadio" size="48px" />
</div>
<q-list separator class="q-mt-md">
<q-item v-for="i in 5" :key="i">
<q-item-section>
<q-skeleton type="text" width="120px" height="16px" />
</q-item-section>
<q-item-section avatar>
<q-skeleton type="QIcon" size="24px" />
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
<q-card v-else bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">

59
src/modules/10_registry/views/requestEditDetail.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
@ -37,8 +37,11 @@ const statusOptionMain = ref<DataOption[]>(
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
async function fetchData() {
showLoader();
// showLoader();
isLoading.value = true;
await http
.get(config.API.requestEditByType(link.value) + `${requestId.value}`)
.then(async (res) => {
@ -56,9 +59,10 @@ async function fetchData() {
})
.catch((err) => {
messageError($q, err);
hideLoader();
})
.finally(() => {});
.finally(() => {
isLoading.value = false;
});
}
const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
@ -154,7 +158,37 @@ onMounted(async () => {
</div>
</div>
<div class="col-12"><q-separator /></div>
<q-card-section class="col-12">
<q-card-section v-if="isLoading" class="col-12">
<div class="row q-col-gutter-sm">
<!-- วันที่ยื่นขอ Skeleton -->
<div class="col-md-2 col-xs-12">
<q-skeleton type="QInput" height="40px" />
</div>
<!-- เรื่อง Skeleton -->
<div class="col-md-10 col-xs-12">
<q-skeleton type="QInput" height="40px" />
</div>
<!-- รายละเอียด Skeleton -->
<div class="col-12">
<q-skeleton type="QInput" height="160px" />
</div>
<!-- ไฟล์ Skeleton -->
<div class="col-12 q-mt-md">
<q-skeleton
type="rect"
width="120px"
height="20px"
class="q-mb-sm"
/>
</div>
</div>
</q-card-section>
<q-card-section v-else class="col-12">
<div class="row q-col-gutter-sm">
<!-- วันที่ยื่นขอ -->
<div class="col-md-2 col-xs-12">
@ -265,7 +299,19 @@ onMounted(async () => {
<div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
</div>
<div class="col-12"><q-separator /></div>
<q-card-section class="col-12">
<q-card-section v-if="isLoading" class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-skeleton type="QInput" height="40px" />
</div>
<div class="col-12">
<q-skeleton type="QInput" height="160px" />
</div>
</div>
</q-card-section>
<q-card-section v-else class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-md-12">
<q-select
@ -312,6 +358,7 @@ onMounted(async () => {
<div class="col-12 q-mt-sm">
<Workflow
v-if="dataStore.officerType && requestId"
ref="workflowRef"
:id="requestId"
:sys-name="

163
src/modules/10_registry/views/requestEditMain.vue
View file

@ -6,10 +6,10 @@ import http from "@/plugins/http";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
*/
/**importType*/
import type { QTableProps } from "quasar";
import type {
DataOption,
@ -17,39 +17,26 @@ import type {
} from "@/modules/10_registry/interface/index/Main";
import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
/**
* importComponents
*/
/** importComponents*/
import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
/**
* importStore
*/
import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
/** use */
const $q = useQuasar();
const store = useRequestEditStore();
const link = ref<string>("");
const router = useRouter();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, dialogRemove, success } =
useCounterMixin();
const { messageError } = useCounterMixin();
/**
* ตัวแปร
*/
/** ตัวแปร*/
const modalPetiton = ref<boolean>(false);
const status = ref<string>("");
const keyword = ref<string>("");
const statusOption = ref<DataOption[]>(store.optionStatus);
const isLoading = ref<boolean>(false);
/**
* Table
*/
/** Table*/
const rows = ref<DataRequest[]>([]);
const page = ref<number>(1);
const pageSize = ref<number>(10);
@ -124,32 +111,26 @@ const visibleColumns = ref<string[]>([
"remark",
]);
/**
* function กลับไปหน้าทะเบียนประวัติ
*/
/** function กลับไปหน้าทะเบียนประวัติ*/
function onclickBackPage() {
router.push(`/registry`);
}
/**
* function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
*/
/** function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล*/
function onClickAdd() {
modalPetiton.value = true;
}
/**
* function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
*/
function fetchListRequset() {
/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
async function fetchListRequset() {
let queryParams = {
page: page.value,
pageSize: pageSize.value,
status: status.value,
keyword: keyword.value,
};
showLoader();
http
isLoading.value = true;
await http
.get(config.API.requestEditByType(link.value) + `user`, {
params: queryParams,
})
@ -163,21 +144,17 @@ function fetchListRequset() {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/**
* function เลือกสถานะคำร้อง
*/
/** function เลือกสถานะคำร้อง*/
function updateStatusValue() {
page.value = 1;
fetchListRequset();
}
/**
* function เคลียร์ข้อมูลสถานะคำร้อง
*/
/** function เคลียร์ข้อมูลสถานะคำร้อง*/
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
@ -197,80 +174,15 @@ function filterOption(val: string, update: Function) {
});
}
/**
* function อัพเดทขนาดหน้าใน pagination
* @param newPagination ข้อมูลใหม่ของ pagination
*/
function updatePageSizePagination(newPagination: NewPagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* function หาชื่อไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
*/
function onDownloadFile(id: string) {
showLoader();
http
.get(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id
)
)
.then((res) => {
if (res.data.length !== 0) {
downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
}
/**
* function โหลดไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
* @param fileName ชื่อไฟล์
*/
function downloadUrl(id: string, fileName: string) {
http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id,
fileName
)
)
.then((res) => {
window.open(res.data.downloadUrl, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
// function onDeleteLidt(id: string) {
// dialogRemove($q, () => {
// showLoader();
// http
// .delete(config.API.requestEdit + `${id}`)
// .then(async (res) => {
// await fetchListRequset();
// await success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((err) => {
// messageError($q, err);
// hideLoader();
// });
// });
// }
watch(
() => pageSize.value,
() => {
@ -381,7 +293,9 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
:columns="columns"
:rows="rows"
row-key="id"
@ -411,36 +325,11 @@ onMounted(async () => {
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<!-- <div v-else-if="col.name === 'document'">
<q-btn
icon="mdi-download"
round
dense
flat
color="primary"
size="12px"
@click.stop.pervent="onDownloadFile(props.row.id)"
>
<q-tooltip>หลักฐานอ้างอิง</q-tooltip>
</q-btn>
</div> -->
<div v-else class="table_ellipsis2">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<!-- <q-td>
<q-btn
v-if="props.row.status === 'PENDING'"
flat
round
color="red"
icon="mdi-delete"
size="12px"
@click="onDeleteLidt(props.row.id)"
>
<q-tooltip>ลบคำร้องขอแก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td> -->
</q-tr>
</template>
<template v-slot:pagination="scope">

65
src/modules/12_organization/views/main.vue
View file

@ -29,6 +29,7 @@ const dataSource = ref(); // ข้อมูล Chart
const idActive = ref<string>("");
const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
const scrollContainer = ref<HTMLElement | null>(null);
const isLoading = ref<boolean>(false);
/**
* สร้าง Path Breadcrumbs
@ -150,7 +151,7 @@ async function fetchStructChart(
type: string,
status: boolean = false
) {
showLoader();
isLoading.value = true;
await http
.get(config.API.orgStructChart(id, type))
.then((res) => {
@ -168,7 +169,7 @@ async function fetchStructChart(
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -236,7 +237,19 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
<div class="col-12 row">
<q-card bordered class="col-12 row caedNone">
<div class="q-pa-sm row wrap items-center">
<!-- Skeleton สำหรับ Toolbar -->
<div v-if="isLoading" class="q-pa-sm row wrap items-center col-12">
<q-skeleton type="circle" size="40px" />
<q-skeleton type="circle" size="40px" class="q-ml-sm" />
<q-skeleton
type="rect"
width="300px"
height="40px"
class="q-ml-md"
/>
</div>
<div v-else class="q-pa-sm row wrap items-center">
<q-btn
flat
:diasble="isLoadBtn"
@ -276,7 +289,53 @@ onMounted(async () => {
<q-separator />
</div>
<!-- Organization Chart Skeleton -->
<div
v-if="isLoading"
class="q-pt-md col-12"
style="height: 70vh; overflow: hidden"
>
<div class="row justify-center q-mb-lg">
<!-- Main Department Skeleton -->
<div class="col-auto">
<q-skeleton
type="rect"
width="300px"
height="80px"
class="rounded-borders"
/>
</div>
</div>
<!-- Sub Departments Skeleton -->
<div class="row justify-center q-col-gutter-md">
<div v-for="i in 5" :key="i" class="col-auto">
<div class="column items-center">
<q-skeleton
type="rect"
width="200px"
height="60px"
class="rounded-borders q-mb-md"
/>
<!-- Sub Items Skeleton -->
<div class="column q-gutter-xs">
<q-skeleton
v-for="j in 3"
:key="j"
type="rect"
width="180px"
height="35px"
class="rounded-borders"
/>
</div>
</div>
</div>
</div>
</div>
<div
v-else
id="structChart"
ref="scrollContainer"
style="

145
src/modules/13_portfolio/views/Add.vue
View file

@ -13,9 +13,7 @@ const router = useRouter();
const mixin = useCounterMixin();
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
/**
* ตัวแปรที่ใช้งาน
*/
/** ตัวแปรที่ใช้งาน */
const route = useRoute();
const files = ref<any>();
const name = ref<string>("");
@ -24,60 +22,74 @@ const id = ref<string>("");
const routeName = router.currentRoute.value.name;
const fileList = ref<any[]>([]);
const saveData = async () => {
dialogConfirm(
$q,
() => {
createTransfer();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
);
};
/**
* ฟังก์ชั่นสร้างขอโอน
*/
const createTransfer = async () => {
showLoader();
await http
.post(config.API.portfolio, { name: name.value, detail: detail.value })
.then(async (res) => {
uploadFiles(res.data.result);
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
};
const isLoading = ref<boolean>(false);
const isLoadingFile = ref<boolean>(false);
/**
* ฟังก์ชั่นเรียกข้อมูลจาก Api
* @param id ไอดีของข้อมูล
*/
const fecthData = async (id: string) => {
showLoader();
async function fetchData(id: string) {
isLoading.value = true;
await http
.get(config.API.portfolioId(id))
.then((res: any) => {
.then(async (res) => {
let data = res.data.result;
name.value = data.name;
detail.value = data.detail;
fetchFile();
})
.catch((e: any) => {
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {
isLoading.value = false;
});
};
}
/** ฟังก์ชั่นรายการเอกสาร */
async function fetchFile() {
isLoadingFile.value = true;
await http
.get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
.then((res) => {
fileList.value = res.data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoadingFile.value = false;
});
}
function onSubmit() {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.post(config.API.portfolio, { name: name.value, detail: detail.value })
.then(async (res) => {
await uploadFiles(res.data.result);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
);
}
/**
* function อัปโหลดไฟล์
* ฟังก์ชั่นอัปโหลดไฟล์
* @param id ผลงาน
*/
function uploadFiles(id: string) {
showLoader();
http
async function uploadFiles(id: string) {
await http
.post(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id), {
replace: true,
fileList: [
@ -92,23 +104,21 @@ function uploadFiles(id: string) {
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
foundKey && (await uploadFileURL(res.data[foundKey]?.uploadUrl));
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
/**
* function บันทึกไฟล์
* ฟังก์ชั่นบันทึกไฟล์
* @param uploadUrl บันทึกไฟล์
*/
function uploadFileURL(uploadUrl: string) {
async function uploadFileURL(uploadUrl: string) {
const Data = new FormData();
Data.append("file", files.value);
showLoader();
axios
await axios
.put(uploadUrl, files.value, {
headers: {
"Content-Type": files.value.type,
@ -122,29 +132,10 @@ function uploadFileURL(uploadUrl: string) {
messageError($q, e);
})
.finally(() => {
hideLoader();
files.value = null;
});
}
/**
*function fetch รายการเอกสาร
*/
function fetchFile() {
showLoader();
http
.get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
.then((res) => {
fileList.value = res.data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
* @param fileName ชื่อไฟล์
@ -165,13 +156,11 @@ function fileOpen(fileName: string) {
});
}
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(() => {
/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
onMounted(async () => {
if (route.params.id !== undefined) {
id.value = route.params.id.toString();
fecthData(id.value);
await Promise.all([fetchData(id.value), fetchFile()]);
}
});
</script>
@ -197,9 +186,17 @@ onMounted(() => {
class="col-12"
greedy
@submit.prevent
@validation-success="saveData"
@validation-success="onSubmit"
>
<q-card bordered>
<q-card bordered v-if="isLoading">
<div class="q-pa-md">
<div class="q-gutter-md">
<q-skeleton height="40px" />
<q-skeleton height="150px" />
</div>
</div>
</q-card>
<q-card bordered v-else>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<div class="col-12 row q-pa-sm q-col-gutter-sm">
@ -246,6 +243,7 @@ onMounted(() => {
<q-icon name="attach_file" /> </template
></q-file>
</div>
<div class="col-12 row" v-if="routeName != 'addPortfolio'">
<q-card bordered flat class="full-width">
<div
@ -256,7 +254,8 @@ onMounted(() => {
</div>
</div>
<q-separator />
<q-list separator>
<q-skeleton v-if="isLoadingFile" type="QSlider" />
<q-list v-else separator>
<q-item v-for="file in fileList" :key="file.key">
<q-item-section>
{{ file.fileName }}

42
src/modules/13_portfolio/views/Main.vue
View file

@ -9,6 +9,9 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
@ -27,9 +30,8 @@ const pagination = ref({
page: 1,
rowsPerPage: 10,
});
/**
* เพิ่มหัวข้อตาราง
*/
const isLoading = ref<boolean>(false);
const filter = ref<string>("");
const rows = ref<PortfolioRowsType[]>([]);
const rowsData = ref<PortfolioRowsType[]>([]);
@ -64,9 +66,9 @@ const columns = ref<QTableProps["columns"]>([
},
]);
//นำข้อมูลมาแสดง
/** ฟังก์ชั่นนำข้อมูลรายการเอกสาร/ผลงาน */
async function fecthList() {
showLoader();
isLoading.value = true;
await http
.get(config.API.portfolio)
.then((res) => {
@ -77,20 +79,16 @@ async function fecthList() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
/**
* ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
*/
/** ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน*/
async function clickAdd() {
router.push(`/portfolio/add`);
}
/**
* ฟังก์ชั่นกดย้อนกลับ
*/
/** ฟังก์ชั่นกดย้อนกลับ*/
function clickBack() {
router.push(`/`);
}
@ -100,21 +98,25 @@ function clickBack() {
* @param id id row
*/
function onDelete(id: string) {
dialogRemove($q, () => {
dialogRemove($q, async () => {
showLoader();
http
await http
.delete(config.API.portfolioId(id))
.then((res) => {
.then(async () => {
await fecthList();
success($q, "ลบข้อมูลสำเร็จ");
fecthList();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
@ -123,9 +125,7 @@ function onSearch() {
);
}
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
/** Hook Lifecycle */
onMounted(async () => {
await fecthList();
});
@ -198,7 +198,9 @@ onMounted(async () => {
</q-select>
</div>
</div>
<div>
<SkeletonTable v-if="isLoading" :columns="columns" />
<div class="col-12" v-else>
<d-table
flat
bordered

57
src/modules/14_IDP/views/main.vue
View file

@ -10,20 +10,18 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const store = useIndividualDevelopmentPlan();
const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
const idRow = ref<string>("");
const isEdit = ref<boolean>(false);
const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
const isLoading = ref<boolean>(false);
const filterKeyword = ref<string>("");
const status = ref<string>("ALL"); // สถานะคำร้อง
const statusOptions = ref<DataOption[]>(store.optionStatus);
/** pagination */
const rows = ref<RowsListMain[]>([]);
const total = ref<number>(0);
const totalList = ref<number>(1);
@ -33,7 +31,6 @@ const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"name",
@ -157,14 +154,6 @@ function filterOption(val: string, update: Function) {
});
}
/**
* function เคลียร์ข้อมูลสถานะคำร้อง
*/
function clearStatus() {
status.value = "ALL";
statusOptions.value = store.optionStatus;
}
/** ฟังชั่น เปิด popup */
function openAdd() {
router.push("/idp-registry");
@ -172,21 +161,24 @@ function openAdd() {
function onDelete(id: string) {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.developmentRequest + `/${id}`)
.then(async (res) => {
success($q, "ลบข้อมูลสำเร็จ");
.then(async () => {
await getListData();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
.finally(() => {
hideLoader();
});
});
}
/** list รายการ */
async function getListData() {
showLoader();
isLoading.value = true;
await http
.get(
config.API.developmentRequest +
@ -199,31 +191,33 @@ async function getListData() {
totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
total.value = dataTotal;
rows.value = data;
hideLoader();
})
.catch((e) => {
hideLoader();
messageError($q, e);
})
.finally(() => {});
.finally(() => {
isLoading.value = false;
});
}
/**
* function หาชื่อไฟล์
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
*/
function onDownloadFile(id: string) {
async function onDownloadFile(id: string) {
showLoader();
http
await http
.get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
.then((res) => {
.then(async (res) => {
if (res.data.length !== 0) {
downloadUrl(id, res.data[0].fileName);
await downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
@ -233,8 +227,8 @@ function onDownloadFile(id: string) {
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
* @param fileName ชื่อไฟล์
*/
function downloadUrl(id: string, fileName: string) {
http
async function downloadUrl(id: string, fileName: string) {
await http
.get(
config.API.fileByFile(
"IDP",
@ -248,9 +242,6 @@ function downloadUrl(id: string, fileName: string) {
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
@ -374,8 +365,10 @@ onMounted(async () => {
/>
</div>
<div>
<div class="col-12">
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
:columns="columns"
:rows="rows"
row-key="id"

45
src/modules/14_IDP/views/registry.vue
View file

@ -17,13 +17,14 @@ import type {
} from "@/modules/14_IDP/interface/Main";
const $q = useQuasar();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const dataStore = useDataStore();
const idRow = ref<string>("");
const router = useRouter();
const route = useRoute();
const dataStore = useDataStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const idRow = ref<string>("");
const isLoading = ref<boolean>(false);
const isReadOnly = ref<boolean>(false);
const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
const requestId = ref<string>(
@ -204,7 +205,7 @@ function downloadUrl(id: string, fileName: string) {
}
function onSubmit() {
dialogConfirm($q, () => {
dialogConfirm($q, async () => {
showLoader();
const body = {
name: formData.topic,
@ -219,16 +220,17 @@ function onSubmit() {
isDevelopment10: isDevelopment10.value,
developmentProjects: formData.development,
};
http
await http
.post(config.API.developmentRequest, body)
.then(async (res) => {
await createURLUpload(res.data.result, formData.document);
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
.finally(() => {
hideLoader();
});
});
}
@ -256,7 +258,6 @@ async function createURLUpload(id: string, file: any) {
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
@ -270,21 +271,18 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
"Content-Type": file.type,
},
})
.then(async (res) => {
.then(async () => {
success($q, `บันทึกข้อมูลสำเร็จ`);
router.push("/idp");
hideLoader();
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
});
}
function getDetail() {
showLoader();
http
async function getDetail() {
isLoading.value = true;
await http
.get(config.API.developmentRequest + `/user/${idRow.value}`)
.then((res) => {
const data = res.data.result;
@ -301,7 +299,7 @@ function getDetail() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
@ -339,7 +337,13 @@ onMounted(() => {
<q-card bordered>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card-section>
<div class="row q-col-gutter-sm">
<div v-if="isLoading" class="q-gutter-md">
<q-skeleton height="150px" />
<q-skeleton height="150px" />
<q-skeleton height="150px" />
</div>
<div v-else class="row q-col-gutter-sm">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12">
@ -539,6 +543,7 @@ onMounted(() => {
</div>
</div>
</q-card-section>
<q-separator v-if="!isEdit" />
<q-card-actions align="right" v-if="!isEdit">
<q-btn label="บันทึก" color="secondary" type="submit"

9
src/stores/data.ts
View file

@ -9,6 +9,8 @@ import { useCounterMixin } from "./mixin";
import type { ProfileData, DataProfile } from "@/interface/Main";
export const useDataStore = defineStore("dataMain", () => {
const isLoadingMenu = ref<boolean>(false);
const isLoadingProfile = ref<boolean>(false);
const dataProfile = ref<any>();
const storeRegistry = useRegistryInFormationStore();
const $q = useQuasar();
@ -102,6 +104,7 @@ export const useDataStore = defineStore("dataMain", () => {
}
async function getData(dataPerson: any) {
isLoadingProfile.value = true;
const data = await dataPerson;
dataprofilePosition.value = data;
profileId.value = data.profileId;
@ -130,9 +133,11 @@ export const useDataStore = defineStore("dataMain", () => {
formData.org = findOrgName(data);
storeRegistry.profileId = data.profileId;
storeRegistry.citizenId = data.citizenId;
isLoadingProfile.value = false;
}
async function getProFileType() {
isLoadingMenu.value = true;
if (officerType.value == "") {
await http
.get(config.API.proFileType)
@ -144,6 +149,8 @@ export const useDataStore = defineStore("dataMain", () => {
messageError($q, e);
});
}
isLoadingMenu.value = false;
return convertEmType(officerType.value);
}
@ -172,6 +179,8 @@ export const useDataStore = defineStore("dataMain", () => {
dataProfile,
profileId,
dataprofilePosition,
isLoadingMenu,
isLoadingProfile,
};
});