fix: ปรับโหลด ขอโอน อุทรณ์/ร้องทุกข์ ขอลาออก
This commit is contained in:
setthawutttty
parent
2050ac6b9e
commit
04184c0d70
8 changed files with 113 additions and 56 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { is, useQuasar } from "quasar";
|
||||
import type { QForm, QTableProps } from "quasar";
|
||||
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 Workflow from "@/components/Workflow/Main.vue";
|
||||
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
|
@ -44,6 +46,7 @@ const id = ref<string>(
|
|||
? route.params.id.toString()
|
||||
: ""
|
||||
); //เก็บ id path
|
||||
const isLoad = ref<boolean>(false);
|
||||
const rowsApprover = ref<RowsType>();
|
||||
const myform = ref<QForm | null>(null); //form
|
||||
const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
|
||||
|
|
@ -201,7 +204,7 @@ function cancelResing() {
|
|||
* @param id ไอดีของข้อมูล
|
||||
*/
|
||||
async function fectDataresign(id: string) {
|
||||
showLoader();
|
||||
isLoad.value = true;
|
||||
await http
|
||||
.get(config.API.resingByidType(link.value, id))
|
||||
.then((res) => {
|
||||
|
|
@ -225,13 +228,12 @@ async function fectDataresign(id: string) {
|
|||
};
|
||||
files.value = data.docs;
|
||||
dataDetail.value = data;
|
||||
isLoad.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -318,6 +320,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-12 row q-col-gutter-sm q-pa-md">
|
||||
<q-input
|
||||
v-if="!isLoad"
|
||||
:class="
|
||||
routeName !== 'AddRetire'
|
||||
? 'col-md-9 col-xs-12'
|
||||
|
|
@ -332,7 +335,9 @@ onMounted(async () => {
|
|||
:readonly="routeName != 'AddRetire'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-md-9 col-xs-12 inputgreen" v-else>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
<!-- <datepicker
|
||||
:class="
|
||||
routeName !== 'AddRetire'
|
||||
|
|
@ -383,6 +388,7 @@ onMounted(async () => {
|
|||
</datepicker> -->
|
||||
|
||||
<datepicker
|
||||
v-if="!isLoad"
|
||||
:class="
|
||||
routeName !== 'AddRetire'
|
||||
? 'col-md-3 col-xs-12'
|
||||
|
|
@ -428,7 +434,11 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div v-else class="col-md-3 col-xs-12">
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
<q-select
|
||||
v-if="!isLoad"
|
||||
v-model="noteReason"
|
||||
:class="
|
||||
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
|
||||
|
|
@ -448,6 +458,9 @@ onMounted(async () => {
|
|||
]"
|
||||
>
|
||||
</q-select>
|
||||
<div v-else class="col-12">
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
<q-input
|
||||
:class="
|
||||
routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
|
||||
|
|
@ -595,6 +608,7 @@ onMounted(async () => {
|
|||
<q-separator />
|
||||
<div class="col-12 q-pa-sm">
|
||||
<d-table
|
||||
v-if="!isLoad"
|
||||
ref="table"
|
||||
:columns="columnsCommanders"
|
||||
:rows="rowsApprover?.commanders ?? []"
|
||||
|
|
@ -643,11 +657,11 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<SkeletonTable v-else :columns="columnsCommanders" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ผลการพิจารณาของผู้มีอำนาจ -->
|
||||
<div class="col-12 row" v-if="routeName != 'AddRetire'">
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div
|
||||
|
|
@ -662,7 +676,7 @@ onMounted(async () => {
|
|||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">ชื่อ - นามสกุล</div>
|
||||
<div class="col-12 text-detail">
|
||||
<div class="col-12 text-detail" v-if="!isLoad">
|
||||
{{
|
||||
rowsApprover &&
|
||||
rowsApprover.approvers &&
|
||||
|
|
@ -671,10 +685,11 @@ onMounted(async () => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="150px" />
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">สถานะ</div>
|
||||
<div class="col-12 text-detail">
|
||||
<div v-if="!isLoad" class="col-12 text-detail">
|
||||
{{
|
||||
rowsApprover &&
|
||||
rowsApprover.approvers &&
|
||||
|
|
@ -685,12 +700,13 @@ onMounted(async () => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="150px" />
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-top">
|
||||
วันสุดท้ายที่ยับยั้ง
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
<div v-if="!isLoad" class="col-12 text-detail">
|
||||
{{
|
||||
rowsApprover &&
|
||||
rowsApprover.approvers &&
|
||||
|
|
@ -701,12 +717,13 @@ onMounted(async () => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="150px" />
|
||||
</div>
|
||||
<div class="col-xs-12 row items-start">
|
||||
<div class="col-12 text-top">
|
||||
ความคิดเห็นและเหตุผล
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
<div v-if="!isLoad" class="col-12 text-detail">
|
||||
{{
|
||||
rowsApprover &&
|
||||
rowsApprover.approvers &&
|
||||
|
|
@ -715,6 +732,7 @@ onMounted(async () => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="150px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -751,6 +769,7 @@ onMounted(async () => {
|
|||
<q-separator />
|
||||
<div class="col-12 q-pa-sm">
|
||||
<d-table
|
||||
v-if="!isLoad"
|
||||
ref="table"
|
||||
:columns="columnsCommanders"
|
||||
:rows="rowsApprover?.cancelCommanders ?? []"
|
||||
|
|
@ -799,11 +818,11 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<SkeletonTable v-else :columns="columnsCommanders" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ผลการพิจารณาของผู้มีอำนาจ -->
|
||||
<div class="col-12 row" v-if="routeName != 'AddRetire'">
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -15,16 +15,21 @@ import type {
|
|||
MainListResponse,
|
||||
} from "@/modules/03_retire/interface/Main";
|
||||
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const link = ref<string>("");
|
||||
const dataStore = useDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||
const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
|
||||
mixin;
|
||||
const RestData = useRestDataStore();
|
||||
const { statusText } = RestData; //Func แปลง status to text
|
||||
|
||||
const isLoad = ref<boolean>(false);
|
||||
const rows = ref<MainList[]>([]);
|
||||
const rowsData = ref<MainList[]>([]);
|
||||
const filter = ref<string>("");
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
|
|
@ -91,11 +96,12 @@ const columns = ref<QTableProps["columns"]>([
|
|||
|
||||
/** ดึงข้อมูล */
|
||||
async function fectListleave() {
|
||||
isLoad.value = true;
|
||||
await http
|
||||
.get(config.API.listUserByType(link.value))
|
||||
.then(async (res) => {
|
||||
let data = await res.data.result;
|
||||
rows.value = data.map((e: MainListResponse) => ({
|
||||
const list = data.map((e: MainListResponse) => ({
|
||||
id: e.id,
|
||||
placeLeave: e.location,
|
||||
dateStartLeave: date2Thai(e.sendDate),
|
||||
|
|
@ -103,9 +109,13 @@ async function fectListleave() {
|
|||
status: e.status,
|
||||
statustext: statusText(e.status),
|
||||
}));
|
||||
rowsData.value = list;
|
||||
rows.value = list;
|
||||
isLoad.value = false;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
isLoad.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
|
@ -117,10 +127,13 @@ async function clickAdd() {
|
|||
router.push(`/retire/add`);
|
||||
}
|
||||
|
||||
/** ทำก่อน mounted */
|
||||
onBeforeMount(() => {
|
||||
showLoader();
|
||||
});
|
||||
function onSearch() {
|
||||
rows.value = onSearchDataTable(
|
||||
filter.value,
|
||||
rowsData.value,
|
||||
columns.value ? columns.value : []
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
|
|
@ -128,7 +141,6 @@ onBeforeMount(() => {
|
|||
onMounted(async () => {
|
||||
link.value = await dataStore.getProFileType();
|
||||
await fectListleave();
|
||||
hideLoader();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -161,15 +173,10 @@ onMounted(async () => {
|
|||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
@keydown.enter.prevent="onSearch"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
|
|
@ -193,6 +200,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div>
|
||||
<d-table
|
||||
v-if="!isLoad"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
|
|
@ -272,6 +280,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
<SkeletonTable v-else :columns="columns" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue