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

fix: ปรับโหลด ขอโอน อุทรณ์/ร้องทุกข์ ขอลาออก

Browse source
This commit is contained in:
setthawutttty 2025-08-06 14:40:36 +07:00
parent 2050ac6b9e
commit 04184c0d70
8 changed files with 113 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/modules/02_transfer/views/AddTransfer.vue
View file

@ -15,7 +15,7 @@ const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin; const { success, messageError, dialogConfirm ,showLoader,hideLoader} = mixin;
const id = ref<string>( const id = ref<string>(
router.currentRoute.value.name === "addTransfer" router.currentRoute.value.name === "addTransfer"
@ -23,6 +23,7 @@ const id = ref<string>(
: route.params.id.toString() : route.params.id.toString()
); //id path ); //id path
const isLoading = ref<boolean>(false);
const files = ref<any>(); //ไฟล์ const files = ref<any>(); //ไฟล์
const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
const noteReason = ref<string>(""); //เหตุผล const noteReason = ref<string>(""); //เหตุผล
@ -42,7 +43,7 @@ async function saveData() {
/** ฟังก์ชั่นสร้างขอโอน */ /** ฟังก์ชั่นสร้างขอโอน */
async function createTransfer() { async function createTransfer() {
showLoader(); showLoader()
const formData = new FormData(); const formData = new FormData();
formData.append("Organization", tranferOrg.value); formData.append("Organization", tranferOrg.value);
formData.append("Reason", noteReason.value); formData.append("Reason", noteReason.value);
@ -51,14 +52,14 @@ async function createTransfer() {
.post(config.API.listtransfer(), formData) .post(config.API.listtransfer(), formData)
.then((res) => { .then((res) => {
router.push(`/transfer/` + res.data.result); router.push(`/transfer/` + res.data.result);
hideLoader()
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
hideLoader()
}) })
.finally(() => { .finally(() => {});
hideLoader();
});
} }
/** /**
@ -66,7 +67,7 @@ async function createTransfer() {
* @param id ไอดีของข้อมูล * @param id ไอดีของข้อมูล
*/ */
async function fecthDataTransfer(id: string) { async function fecthDataTransfer(id: string) {
showLoader(); isLoading.value = true;
await http await http
.get(config.API.transferByid(id)) .get(config.API.transferByid(id))
.then((res: any) => { .then((res: any) => {
@ -74,13 +75,13 @@ async function fecthDataTransfer(id: string) {
tranferOrg.value = data.organization; tranferOrg.value = data.organization;
noteReason.value = data.reason; noteReason.value = data.reason;
files.value = data.docs; files.value = data.docs;
isLoading.value = false;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
isLoading.value = false;
}) })
.finally(() => { .finally(() => {});
hideLoader();
});
} }
/** /**
@ -129,6 +130,7 @@ onMounted(() => {
<div class="row"> <div class="row">
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<q-input <q-input
v-if="!isLoading"
:class=" :class="
routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen' routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
" "
@ -140,8 +142,11 @@ onMounted(() => {
:readonly="routeName != 'addTransfer'" :readonly="routeName != 'addTransfer'"
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
/> />
<div class="col-12" v-else>
<q-skeleton type="QInput" height="40px" />
</div>
<q-input <q-input
v-if="!isLoading"
:class=" :class="
routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen' routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
" "
@ -154,7 +159,9 @@ onMounted(() => {
:readonly="routeName != 'addTransfer'" :readonly="routeName != 'addTransfer'"
:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
/> />
<div class="col-12" v-else>
<q-skeleton type="QInput" height="120px" />
</div>
<div class="col-12 row" v-if="routeName == 'addTransfer'"> <div class="col-12 row" v-if="routeName == 'addTransfer'">
<q-file <q-file
v-model="files" v-model="files"

15
src/modules/02_transfer/views/Main.vue
View file

@ -14,14 +14,15 @@ import type {
TransferMain, TransferMain,
} from "@/modules/02_transfer/interface/Main"; } from "@/modules/02_transfer/interface/Main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const transferData = useTransferDataStore(); const transferData = useTransferDataStore();
const { statusText } = transferData; const { statusText } = transferData;
const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } = const { date2Thai, messageError, onSearchDataTable } = mixin;
mixin;
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "desc",
@ -30,6 +31,7 @@ const pagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
const isLoading = ref<boolean>(false);
const rows = ref<TransferMain[]>([]); const rows = ref<TransferMain[]>([]);
const rowsData = ref<TransferMain[]>([]); const rowsData = ref<TransferMain[]>([]);
const filter = ref<string>(""); const filter = ref<string>("");
@ -120,7 +122,7 @@ const columns = ref<QTableProps["columns"]>([
//นำข้อมูลมาแสดง //นำข้อมูลมาแสดง
async function fecthListTransfer() { async function fecthListTransfer() {
showLoader(); isLoading.value = true;
await http await http
.get(config.API.listUserTransfer()) .get(config.API.listUserTransfer())
.then((res) => { .then((res) => {
@ -139,12 +141,11 @@ async function fecthListTransfer() {
})); }));
rows.value = listData; rows.value = listData;
rowsData.value = listData; rowsData.value = listData;
isLoading.value = false;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
}) isLoading.value = false;
.finally(() => {
hideLoader();
}); });
} }
@ -246,6 +247,7 @@ onMounted(async () => {
</div> </div>
<div> <div>
<d-table <d-table
v-if="!isLoading"
flat flat
bordered bordered
dense dense
@ -339,6 +341,7 @@ onMounted(async () => {
</div> </div>
</template> </template>
</d-table> </d-table>
<SkeletonTable v-else :columns="columns" />
</div> </div>
</q-card> </q-card>
</div> </div>

43
src/modules/03_retire/views/addRetire.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { is, useQuasar } from "quasar";
import type { QForm, QTableProps } from "quasar"; import type { QForm, QTableProps } from "quasar";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
@ -20,6 +20,8 @@ import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
import Header from "@/components/DialogHeader.vue"; import Header from "@/components/DialogHeader.vue";
import Workflow from "@/components/Workflow/Main.vue"; import Workflow from "@/components/Workflow/Main.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -44,6 +46,7 @@ const id = ref<string>(
? route.params.id.toString() ? route.params.id.toString()
: "" : ""
); //เก็บ id path ); //เก็บ id path
const isLoad = ref<boolean>(false);
const rowsApprover = ref<RowsType>(); const rowsApprover = ref<RowsType>();
const myform = ref<QForm | null>(null); //form const myform = ref<QForm | null>(null); //form
const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
@ -201,7 +204,7 @@ function cancelResing() {
* @param id ไอดีของข้อมูล * @param id ไอดีของข้อมูล
*/ */
async function fectDataresign(id: string) { async function fectDataresign(id: string) {
showLoader(); isLoad.value = true;
await http await http
.get(config.API.resingByidType(link.value, id)) .get(config.API.resingByidType(link.value, id))
.then((res) => { .then((res) => {
@ -225,13 +228,12 @@ async function fectDataresign(id: string) {
}; };
files.value = data.docs; files.value = data.docs;
dataDetail.value = data; dataDetail.value = data;
isLoad.value = false;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(() => {});
hideLoader();
});
} }
/** /**
@ -318,6 +320,7 @@ onMounted(async () => {
<div class="col-12 row q-col-gutter-sm q-pa-md"> <div class="col-12 row q-col-gutter-sm q-pa-md">
<q-input <q-input
v-if="!isLoad"
:class=" :class="
routeName !== 'AddRetire' routeName !== 'AddRetire'
? 'col-md-9 col-xs-12' ? 'col-md-9 col-xs-12'
@ -332,7 +335,9 @@ onMounted(async () => {
:readonly="routeName != 'AddRetire'" :readonly="routeName != 'AddRetire'"
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
/> />
<div class="col-md-9 col-xs-12 inputgreen" v-else>
<q-skeleton type="QInput" height="40px" />
</div>
<!-- <datepicker <!-- <datepicker
:class=" :class="
routeName !== 'AddRetire' routeName !== 'AddRetire'
@ -383,6 +388,7 @@ onMounted(async () => {
</datepicker> --> </datepicker> -->
<datepicker <datepicker
v-if="!isLoad"
:class=" :class="
routeName !== 'AddRetire' routeName !== 'AddRetire'
? 'col-md-3 col-xs-12' ? 'col-md-3 col-xs-12'
@ -428,7 +434,11 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div v-else class="col-md-3 col-xs-12">
<q-skeleton type="QInput" height="40px" />
</div>
<q-select <q-select
v-if="!isLoad"
v-model="noteReason" v-model="noteReason"
:class=" :class="
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen' routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@ -448,6 +458,9 @@ onMounted(async () => {
]" ]"
> >
</q-select> </q-select>
<div v-else class="col-12">
<q-skeleton type="QInput" height="40px" />
</div>
<q-input <q-input
:class=" :class="
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen' routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@ -595,6 +608,7 @@ onMounted(async () => {
<q-separator /> <q-separator />
<div class="col-12 q-pa-sm"> <div class="col-12 q-pa-sm">
<d-table <d-table
v-if="!isLoad"
ref="table" ref="table"
:columns="columnsCommanders" :columns="columnsCommanders"
:rows="rowsApprover?.commanders ?? []" :rows="rowsApprover?.commanders ?? []"
@ -643,11 +657,11 @@ onMounted(async () => {
</q-tr> </q-tr>
</template> </template>
</d-table> </d-table>
<SkeletonTable v-else :columns="columnsCommanders" />
</div> </div>
</q-card> </q-card>
</div> </div>
<!-- ผลการพิจารณาของผู้มีอำนาจ -->
<div class="col-12 row" v-if="routeName != 'AddRetire'"> <div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm"> <q-card bordered class="row col-12 text-dark q-mt-sm">
<div <div
@ -662,7 +676,7 @@ onMounted(async () => {
<div class="col-12 row bg-white q-col-gutter-md"> <div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-6 row items-start"> <div class="col-xs-6 row items-start">
<div class="col-12 text-top">ชื่อ - นามสกุล</div> <div class="col-12 text-top">ชื่อ - นามสกุล</div>
<div class="col-12 text-detail"> <div class="col-12 text-detail" v-if="!isLoad">
{{ {{
rowsApprover && rowsApprover &&
rowsApprover.approvers && rowsApprover.approvers &&
@ -671,10 +685,11 @@ onMounted(async () => {
: "-" : "-"
}} }}
</div> </div>
<q-skeleton v-else type="text" width="150px" />
</div> </div>
<div class="col-xs-6 row items-start"> <div class="col-xs-6 row items-start">
<div class="col-12 text-top">สถานะ</div> <div class="col-12 text-top">สถานะ</div>
<div class="col-12 text-detail"> <div v-if="!isLoad" class="col-12 text-detail">
{{ {{
rowsApprover && rowsApprover &&
rowsApprover.approvers && rowsApprover.approvers &&
@ -685,12 +700,13 @@ onMounted(async () => {
: "-" : "-"
}} }}
</div> </div>
<q-skeleton v-else type="text" width="150px" />
</div> </div>
<div class="col-xs-6 row items-start"> <div class="col-xs-6 row items-start">
<div class="col-12 text-top"> <div class="col-12 text-top">
วันสุดท้ายที่ยับยั้ง วันสุดท้ายที่ยับยั้ง
</div> </div>
<div class="col-12 text-detail"> <div v-if="!isLoad" class="col-12 text-detail">
{{ {{
rowsApprover && rowsApprover &&
rowsApprover.approvers && rowsApprover.approvers &&
@ -701,12 +717,13 @@ onMounted(async () => {
: "-" : "-"
}} }}
</div> </div>
<q-skeleton v-else type="text" width="150px" />
</div> </div>
<div class="col-xs-12 row items-start"> <div class="col-xs-12 row items-start">
<div class="col-12 text-top"> <div class="col-12 text-top">
ความคิดเห็นและเหตุผล ความคิดเห็นและเหตุผล
</div> </div>
<div class="col-12 text-detail"> <div v-if="!isLoad" class="col-12 text-detail">
{{ {{
rowsApprover && rowsApprover &&
rowsApprover.approvers && rowsApprover.approvers &&
@ -715,6 +732,7 @@ onMounted(async () => {
: "-" : "-"
}} }}
</div> </div>
<q-skeleton v-else type="text" width="150px" />
</div> </div>
</div> </div>
</div> </div>
@ -751,6 +769,7 @@ onMounted(async () => {
<q-separator /> <q-separator />
<div class="col-12 q-pa-sm"> <div class="col-12 q-pa-sm">
<d-table <d-table
v-if="!isLoad"
ref="table" ref="table"
:columns="columnsCommanders" :columns="columnsCommanders"
:rows="rowsApprover?.cancelCommanders ?? []" :rows="rowsApprover?.cancelCommanders ?? []"
@ -799,11 +818,11 @@ onMounted(async () => {
</q-tr> </q-tr>
</template> </template>
</d-table> </d-table>
<SkeletonTable v-else :columns="columnsCommanders" />
</div> </div>
</q-card> </q-card>
</div> </div>
<!-- ผลการพิจารณาของผู้มีอำนาจ -->
<div class="col-12 row" v-if="routeName != 'AddRetire'"> <div class="col-12 row" v-if="routeName != 'AddRetire'">
<q-card bordered class="row col-12 text-dark q-mt-sm"> <q-card bordered class="row col-12 text-dark q-mt-sm">
<div <div

37
src/modules/03_retire/views/main.vue
View file

@ -15,16 +15,21 @@ import type {
MainListResponse, MainListResponse,
} from "@/modules/03_retire/interface/Main"; } from "@/modules/03_retire/interface/Main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const link = ref<string>(""); const link = ref<string>("");
const dataStore = useDataStore(); const dataStore = useDataStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin; const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
mixin;
const RestData = useRestDataStore(); const RestData = useRestDataStore();
const { statusText } = RestData; //Func แปลง status to text const { statusText } = RestData; //Func แปลง status to text
const isLoad = ref<boolean>(false);
const rows = ref<MainList[]>([]); const rows = ref<MainList[]>([]);
const rowsData = ref<MainList[]>([]);
const filter = ref<string>(""); const filter = ref<string>("");
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "desc",
@ -91,11 +96,12 @@ const columns = ref<QTableProps["columns"]>([
/** ดึงข้อมูล */ /** ดึงข้อมูล */
async function fectListleave() { async function fectListleave() {
isLoad.value = true;
await http await http
.get(config.API.listUserByType(link.value)) .get(config.API.listUserByType(link.value))
.then(async (res) => { .then(async (res) => {
let data = await res.data.result; let data = await res.data.result;
rows.value = data.map((e: MainListResponse) => ({ const list = data.map((e: MainListResponse) => ({
id: e.id, id: e.id,
placeLeave: e.location, placeLeave: e.location,
dateStartLeave: date2Thai(e.sendDate), dateStartLeave: date2Thai(e.sendDate),
@ -103,9 +109,13 @@ async function fectListleave() {
status: e.status, status: e.status,
statustext: statusText(e.status), statustext: statusText(e.status),
})); }));
rowsData.value = list;
rows.value = list;
isLoad.value = false;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
isLoad.value = false;
}) })
.finally(() => {}); .finally(() => {});
} }
@ -117,10 +127,13 @@ async function clickAdd() {
router.push(`/retire/add`); router.push(`/retire/add`);
} }
/** ทำก่อน mounted */ function onSearch() {
onBeforeMount(() => { rows.value = onSearchDataTable(
showLoader(); filter.value,
}); rowsData.value,
columns.value ? columns.value : []
);
}
/** /**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@ -128,7 +141,6 @@ onBeforeMount(() => {
onMounted(async () => { onMounted(async () => {
link.value = await dataStore.getProFileType(); link.value = await dataStore.getProFileType();
await fectListleave(); await fectListleave();
hideLoader();
}); });
</script> </script>
<template> <template>
@ -161,15 +173,10 @@ onMounted(async () => {
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
style="max-width: 200px" style="max-width: 200px"
@keydown.enter.prevent="onSearch"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="filter == ''" name="search" /> <q-icon name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template> </template>
</q-input> </q-input>
<!-- แสดงคอลัมน์ใน table --> <!-- แสดงคอลัมน์ใน table -->
@ -193,6 +200,7 @@ onMounted(async () => {
</div> </div>
<div> <div>
<d-table <d-table
v-if="!isLoad"
flat flat
bordered bordered
dense dense
@ -272,6 +280,7 @@ onMounted(async () => {
</div> </div>
</template> </template>
</d-table> </d-table>
<SkeletonTable v-else :columns="columns" />
</div> </div>
</q-card> </q-card>
</div> </div>

8
src/modules/07_appealComplain/views/Add.vue
View file

@ -21,6 +21,7 @@ const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const storeData = useDataStore(); const storeData = useDataStore();
const isLoad = ref<boolean>(false)
const { findOrgName, success, messageError, showLoader, hideLoader } = mixin; const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
const formProfile = reactive<FormProfile>({ const formProfile = reactive<FormProfile>({
@ -34,15 +35,18 @@ const formProfile = reactive<FormProfile>({
/** ดึงข้อมูลจาก keycloak*/ /** ดึงข้อมูลจาก keycloak*/
async function getProFile() { async function getProFile() {
try { try {
showLoader(); isLoad.value = true
if (!storeData.dataprofilePosition) { if (!storeData.dataprofilePosition) {
const res = await http.get(config.API.profilePosition()); const res = await http.get(config.API.profilePosition());
await updateFormProfile(res.data.result); await updateFormProfile(res.data.result);
isLoad.value = false
} else { } else {
await updateFormProfile(storeData.dataprofilePosition); await updateFormProfile(storeData.dataprofilePosition);
isLoad.value = false
} }
} catch (error) { } catch (error) {
messageError($q, error); messageError($q, error);
isLoad.value = false
} finally { } finally {
hideLoader(); hideLoader();
} }
@ -113,7 +117,7 @@ onMounted(() => {
/> />
เพิ่มอุทธรณ์/ร้องทุกข์ เพิ่มอุทธรณ์/ร้องทุกข์
</div> </div>
<Form :on-submit="onSubmit" :form-profile="formProfile" /> <Form :on-submit="onSubmit" :form-profile="formProfile" v-model:isLoad="isLoad"/>
</div> </div>
</div> </div>
</template> </template>

11
src/modules/07_appealComplain/views/Edit.vue
View file

@ -22,6 +22,7 @@ const route = useRoute();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin; const { messageError, showLoader, hideLoader } = mixin;
const isLoad = ref<boolean>(false);
const id = ref<string>(route.params.id as string); const id = ref<string>(route.params.id as string);
const historyStatusOb = reactive<HistoryStatusType>({ const historyStatusOb = reactive<HistoryStatusType>({
status: "", status: "",
@ -53,7 +54,7 @@ const data = reactive<EditDataList>({
/** ดึงข้อมูล */ /** ดึงข้อมูล */
function getData() { function getData() {
showLoader(); isLoad.value = true;
http http
.get(config.API.appealByID(id.value)) .get(config.API.appealByID(id.value))
.then((res) => { .then((res) => {
@ -73,13 +74,13 @@ function getData() {
data.disciplineComplaint_Appeal_Docs = data.disciplineComplaint_Appeal_Docs =
dataList.disciplineComplaint_Appeal_Docs; dataList.disciplineComplaint_Appeal_Docs;
data.historyStatus = dataList.historyStatus; data.historyStatus = dataList.historyStatus;
isLoad.value = false;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
isLoad.value = false;
}) })
.finally(() => { .finally(() => {});
hideLoader();
});
} }
/** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์ /** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์
@ -122,7 +123,7 @@ onMounted(() => {
/> />
แก้ไขอุทธรณ์/ร้องทุกข์ แก้ไขอุทธรณ์/ร้องทุกข์
</div> </div>
<Form :data="data" :get-report="getReport" /> <Form :data="data" :get-report="getReport" v-model:is-load="isLoad"/>
</div> </div>
</div> </div>
</template> </template>

9
src/modules/07_appealComplain/views/Form.vue
View file

@ -17,6 +17,7 @@ const mixin = useCounterMixin();
const { dialogConfirm } = mixin; const { dialogConfirm } = mixin;
const dataStore = useAppealComplainStore(); const dataStore = useAppealComplainStore();
const isLoad = defineModel<boolean>("isLoad", { required: true });
const printForm = ref<string>(""); const printForm = ref<string>("");
const isReadOnly = ref<boolean>(false); const isReadOnly = ref<boolean>(false);
const historyStatusOb = reactive<HistoryStatusType>({ const historyStatusOb = reactive<HistoryStatusType>({
@ -237,6 +238,7 @@ watch(
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-xs-12 col-md-3"> <div class="col-xs-12 col-md-3">
<q-select <q-select
v-if="!isLoad"
:class="inputEdit(isReadOnly)" :class="inputEdit(isReadOnly)"
:readonly="isReadOnly" :readonly="isReadOnly"
ref="typeRef" ref="typeRef"
@ -253,9 +255,11 @@ watch(
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
/> />
<q-skeleton v-else type="QSelect" height="40px" />
</div> </div>
<div class="col-xs-12 col-md-3"> <div class="col-xs-12 col-md-3">
<q-input <q-input
v-if="!isLoad"
:class="inputEdit(isReadOnly)" :class="inputEdit(isReadOnly)"
:readonly="isReadOnly" :readonly="isReadOnly"
ref="titleRef" ref="titleRef"
@ -268,11 +272,13 @@ watch(
label="เรื่องอุทธรณ์/ร้องทุกข์" label="เรื่องอุทธรณ์/ร้องทุกข์"
hide-bottom-space hide-bottom-space
/> />
<q-skeleton v-else type="QInput" height="40px" />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<q-input <q-input
v-if="!isLoad"
:class="inputEdit(isReadOnly)" :class="inputEdit(isReadOnly)"
:readonly="isReadOnly" :readonly="isReadOnly"
ref="descriptionRef" ref="descriptionRef"
@ -287,11 +293,13 @@ watch(
rows="5" rows="5"
hide-bottom-space hide-bottom-space
/> />
<q-skeleton v-else type="QInput" height="120px" />
</div> </div>
</div> </div>
<div class="row" v-if="!isReadOnly"> <div class="row" v-if="!isReadOnly">
<div class="col-12"> <div class="col-12">
<q-file <q-file
v-if="!isLoad"
ref="fileRef" ref="fileRef"
v-model="formData.files" v-model="formData.files"
label="อัปโหลดเอกสารหลักฐาน" label="อัปโหลดเอกสารหลักฐาน"
@ -301,6 +309,7 @@ watch(
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> />
<q-skeleton v-else type="QInput" height="40px" />
</div> </div>
</div> </div>
<q-card bordered class="col-12 row" v-if="isReadOnly"> <q-card bordered class="col-12 row" v-if="isReadOnly">

17
src/modules/07_appealComplain/views/Main.vue
View file

@ -13,6 +13,8 @@ import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType"; import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
import type { DataOption } from "@/modules/07_appealComplain/interface/index/main"; import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -25,6 +27,7 @@ const type = ref<DataOption[]>([
...dataStore.typeOptions, ...dataStore.typeOptions,
]); ]);
const isload = ref<boolean>(false);
const total = ref<number>(0); const total = ref<number>(0);
const totalList = ref<number>(1); const totalList = ref<number>(1);
const pagination = ref({ const pagination = ref({
@ -154,7 +157,7 @@ const columns = ref<QTableProps["columns"]>([
//นำข้อมูลมาแสดง //นำข้อมูลมาแสดง
async function getData() { async function getData() {
showLoader(); isload.value = true;
await http await http
.get( .get(
config.API.appealMainList( config.API.appealMainList(
@ -166,20 +169,20 @@ async function getData() {
filterKeyword.value filterKeyword.value
) )
) )
.then((res) => { .then(async (res) => {
totalList.value = Math.ceil( totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage res.data.result.total / pagination.value.rowsPerPage
); );
total.value = res.data.result.total; total.value = res.data.result.total;
let data = res.data.result.data; let data = res.data.result.data;
dataStore.fetchAppealComplain(data); await dataStore.fetchAppealComplain(data);
isload.value = false;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
isload.value = false;
}) })
.finally(() => { .finally(() => {});
hideLoader();
});
} }
/** /**
@ -374,7 +377,9 @@ onMounted(async () => {
/> />
<div class="col-12"> <div class="col-12">
<SkeletonTable v-if="isload" :columns="dataStore.columns" />
<d-table <d-table
v-else
flat flat
bordered bordered
dense dense