fix loading Skeleton
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ff6101067e
commit
016132096e
63 changed files with 3468 additions and 3452 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,7 +167,7 @@ function onSearch() {
|
|||
|
||||
onMounted(async () => {
|
||||
link.value = await dataPerson.getProFileType();
|
||||
getData();
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -244,7 +208,9 @@ onMounted(async () => {
|
|||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
<d-table
|
||||
v-else
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
40
src/modules/10_registry/components/skeleton/Address.vue
Normal 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
103
src/modules/10_registry/components/skeleton/Family.vue
Normal 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
110
src/modules/10_registry/components/skeleton/Government.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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="
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue