ปรับ เครื่องราชฯ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-06 12:02:13 +07:00
parent 388893395b
commit 981bab8061
4 changed files with 416 additions and 139 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch, reactive, computed, watchEffect } from "vue"; import { ref, onMounted, watch, reactive, computed, } from "vue";
import { useQuasar, QForm } from "quasar"; import { useQuasar, QForm } from "quasar";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
@ -505,11 +505,14 @@ onMounted(async () => {
} }
await getTable(); await getTable();
}); });
watchEffect(() => { // watch(rowsAll, () => {
if (getTable()) { // props.statCard();
props.statCard(); // });
} // watchEffect(() => {
}); // if (getTable()) {
// props.statCard();
// }
// });
const containStatus = ref<boolean>(false); const containStatus = ref<boolean>(false);
watch(containStatus, () => { watch(containStatus, () => {
@ -531,24 +534,27 @@ const savelist = () => {
}); });
if (personal_selected.value) { if (personal_selected.value) {
// console.log(personal_selected.value); // console.log(personal_selected.value);
dialogConfirm($q, async () => { dialogConfirm(
showLoader(); $q,
await http async () => {
.put(config.API.putPosition(examId), personal_selected.value) showLoader();
.then(() => { await http
success($q, "บันทึกสำเร็จ"); .put(config.API.putPosition(examId), personal_selected.value)
}) .then(() => {
.catch((e: any) => { success($q, "บันทึกสำเร็จ");
console.log(e); })
}) .catch((e: any) => {
.finally(async () => { console.log(e);
await getTable(); })
.finally(async () => {
await getTable();
hideLoader(); hideLoader();
}); });
}, },
"ยืนยันการส่งรายชื่อไปยังหน่วยงาน", "ยืนยันการส่งรายชื่อไปยังหน่วยงาน",
"ต้องการยืนยันการส่งรายชื่อไปยังหน่วยงานหรือไม่?") "ต้องการยืนยันการส่งรายชื่อไปยังหน่วยงานหรือไม่?"
);
} }
}; };
const handleModalAddListUpdate = (val: boolean) => { const handleModalAddListUpdate = (val: boolean) => {
@ -573,22 +579,47 @@ const paginationLabel = (start: number, end: number, total: number) => {
</script> </script>
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
<Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter" <Table
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" :contain-status="containStatus"
v-model:editvisible="editvisible" v-model:containfilter="containStatus" :rows="rows"
@update-modaladdlist="handleModalAddListUpdate" :history="true" :boss="true" :saveNoDraft="true" :columns="columns"
:role-admin="roleAdmin" :displayAdd="displayAdd" row-key="fullname"> :filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible"
v-model:containfilter="containStatus"
@update-modaladdlist="handleModalAddListUpdate"
:history="true"
:boss="true"
:saveNoDraft="true"
:role-admin="roleAdmin"
:displayAdd="displayAdd"
row-key="fullname"
>
<template #columns="props"> <template #columns="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)" <q-td
class="cursor-pointer"> v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props.row.personalId)"
class="cursor-pointer"
>
<template v-if="col.name === 'position'"> <template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</template> </template>
<template v-else-if="col.name === 'fullName'" class="table_ellipsis"> <template
v-else-if="col.name === 'fullName'"
class="table_ellipsis"
>
<q-item v-ripple> <q-item v-ripple>
<q-item-section avatar> <q-item-section avatar>
<img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" /> <img
v-if="props.row.avatar == null"
src="@/assets/avatar_user.jpg"
class="col-4 img-info"
/>
<img v-else :src="props.row.avatar" class="col-4 img-info" /> <img v-else :src="props.row.avatar" class="col-4 img-info" />
</q-item-section> </q-item-section>
@ -605,27 +636,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
</template> </template>
<template v-else-if="col.name === 'organizationName'"> <template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.orgName !== null || props.row.positionPath !== null <div
"> v-if="
props.row.orgName !== null || props.row.positionPath !== null
"
>
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.orgName !== null ? props.row.orgName : "-" }} {{ props.row.orgName !== null ? props.row.orgName : "-" }}
{{ {{
props.row.organizationShortName !== null props.row.organizationShortName !== null
? `(${props.row.organizationShortName})` ? `(${props.row.organizationShortName})`
: "" : ""
}} }}
</div> </div>
<div class="text-weight-light"> <div class="text-weight-light">
{{ {{
props.row.positionPath !== null props.row.positionPath !== null
? props.row.positionPath ? props.row.positionPath
: "-" : "-"
}} }}
{{ {{
props.row.positionNumber !== null props.row.positionNumber !== null
? `(${props.row.positionNumber})` ? `(${props.row.positionNumber})`
: "" : ""
}} }}
</div> </div>
</div> </div>
@ -637,14 +671,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
</div> </div>
</template> </template>
<template v-else-if="col.name === 'positionCandidate'"> <template v-else-if="col.name === 'positionCandidate'">
<div class="text-weight-medium" v-if="props.row.positionCandidate == null"> <div
class="text-weight-medium"
v-if="props.row.positionCandidate == null"
>
- -
</div> </div>
<div class="text-weight-medium" v-else> <div class="text-weight-medium" v-else>
{{ props.row.positionCandidate }} {{ props.row.positionCandidate }}
</div> </div>
</template> </template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'"> <template
v-else-if="col.name === 'reportingDate' && col.value !== '-'"
>
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.reportingDate }} {{ props.row.reportingDate }}
</div> </div>
@ -666,48 +705,121 @@ const paginationLabel = (start: number, end: number, total: number) => {
</template> </template>
</q-td> </q-td>
<q-td auto-width> <q-td auto-width>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense> <q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up"> <q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px"> <q-list dense style="min-width: 100px">
<q-item v-if="(roleAdmin && props.row.statusId === 'UN-CONTAIN') || <q-item
(props.row.draft === 'รอส่งตัว' && v-if="
props.row.statusId !== 'DISCLAIM') (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
" clickable v-close-popup @click="openAppointModal(props.row.personalId)"> (props.row.draft === 'รอส่งตัว' &&
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> props.row.statusId !== 'DISCLAIM')
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" /> "
clickable
v-close-popup
@click="openAppointModal(props.row.personalId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
</q-item-section> </q-item-section>
<q-item-section>เลอกหนวยงานทบบรรจ</q-item-section> <q-item-section>เลอกหนวยงานทบบรรจ</q-item-section>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup <q-item
@click="editDetail(props.row, 'deferment')"> v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> clickable
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" /> v-close-popup
@click="editDetail(props.row, 'deferment')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="blue"
size="xs"
name="mdi-account-alert-outline"
/>
</q-item-section> </q-item-section>
<q-item-section>ขอผอนผ</q-item-section> <q-item-section>ขอผอนผ</q-item-section>
</q-item> </q-item>
<q-item v-else-if="props.row.deferment === true && <q-item
props.row.statusId != 'DISCLAIM' v-else-if="
" clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')"> props.row.deferment === true &&
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> props.row.statusId != 'DISCLAIM'
<q-icon color="blue" size="xs" name="mdi-account-details-outline" /> "
clickable
v-close-popup
@click="editDetail(props.row, 'defermentInfo')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="blue"
size="xs"
name="mdi-account-details-outline"
/>
</q-item-section> </q-item-section>
<q-item-section>อมลการผอนผ</q-item-section> <q-item-section>อมลการผอนผ</q-item-section>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item v-if="props.row.statusId === 'UN-CONTAIN' || <q-item
props.row.statusId === 'PREPARE-CONTAIN' v-if="
" clickable v-close-popup @click="editDetail(props.row, 'disclaim')"> props.row.statusId === 'UN-CONTAIN' ||
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> props.row.statusId === 'PREPARE-CONTAIN'
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" /> "
clickable
v-close-popup
@click="editDetail(props.row, 'disclaim')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="pink"
size="xs"
name="mdi-account-cancel-outline"
/>
</q-item-section> </q-item-section>
<q-item-section>สละสทธ</q-item-section> <q-item-section>สละสทธ</q-item-section>
</q-item> </q-item>
<q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup <q-item
@click="editDetail(props.row, 'disclaimInfo')"> v-else-if="props.row.statusId === 'DISCLAIM'"
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> clickable
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" /> v-close-popup
@click="editDetail(props.row, 'disclaimInfo')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="pink"
size="xs"
name="mdi-account-cancel-outline"
/>
</q-item-section> </q-item-section>
<q-item-section>อมลการสละสทธ</q-item-section> <q-item-section>อมลการสละสทธ</q-item-section>
</q-item> </q-item>
@ -721,26 +833,58 @@ const paginationLabel = (start: number, end: number, total: number) => {
</q-form> </q-form>
<!-- เลอกหนวยงานทบรรจ --> <!-- เลอกหนวยงานทบรรจ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" <DialogOrgTree
:personal="personal" /> v-model:modal="appointModal"
:personalId="personalId"
:close="clickCloseModalTree"
:personal="personal"
/>
<!-- popup ขอผอนผ / สละสทธ --> <!-- popup ขอผอนผ / สละสทธ -->
<q-form ref="myForm"> <q-form ref="myForm">
<DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" /> <DialogCard
v-model:Modal="modal"
:personal-id="personalId"
:close="clickClose"
:validate="validateData"
/>
</q-form> </q-form>
<q-dialog v-model="modalDefermentDisclaim" persistent> <q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px"> <q-card style="width: 800px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ${Name}`" :close="clickClose" /> <DialogHeader
:title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ${Name}`"
:close="clickClose"
/>
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules <q-input
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote" :class="getClass(edit)"
:label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" /> hide-bottom-space
<q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined :outlined="edit"
use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple dense
@update:model-value="clickEditRow" class="q-py-sm"> lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:readonly="!edit"
:borderless="!edit"
v-model="userNote"
:label="`${'กรอกเหตุผล'}`"
@update:model-value="clickEditRow"
type="textarea"
/>
<q-file
v-if="getNumFile === 1"
v-model="files"
dense
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
outlined
use-chips
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
multiple
@update:model-value="clickEditRow"
class="q-py-sm"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
@ -748,7 +892,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" /> <DialogFooter
:editvisible="true"
:validate="validateData"
:save="modalDisclaim ? saveDisclaim : saveDeferment"
/>
</q-form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>
@ -757,7 +905,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
<q-dialog v-model="modalwaitInfo" persistent> <q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px"> <q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ${Name}`" :close="clickClose" /> <DialogHeader
:title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ${Name}`"
:close="clickClose"
/>
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<div class="row"> <div class="row">
@ -767,8 +918,17 @@ const paginationLabel = (start: number, end: number, total: number) => {
<div v-if="!modalDisclaim" class="row q-pt-md"> <div v-if="!modalDisclaim" class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลกฐาน</div> <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลกฐาน</div>
<div class="col-2 q-mt-sm"> <div class="col-2 q-mt-sm">
<q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download" <q-btn
target="_blank" /> type="a"
:href="dataInfo.reliefDoc"
color="primary"
flat
dense
round
size="14px"
icon="mdi-download"
target="_blank"
/>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
@ -780,30 +940,68 @@ const paginationLabel = (start: number, end: number, total: number) => {
<!-- dialog เพมรายช --> <!-- dialog เพมรายช -->
<q-dialog v-model="modaladdlist"> <q-dialog v-model="modaladdlist">
<q-card style="width: 900px; max-width: 80vw"> <q-card style="width: 900px; max-width: 80vw">
<DialogHeader title="ส่งรายชื่อไปยังหน่วยงาน" :close="clickCloseSendModal" /> <DialogHeader
title="ส่งรายชื่อไปยังหน่วยงาน"
:close="clickCloseSendModal"
/>
<q-separator /> <q-separator />
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div class="row justify-end"> <div class="row justify-end">
<div class="col-5"> <div class="col-5">
<q-toolbar style="padding: 0"> <q-toolbar style="padding: 0">
<q-input borderless outlined dense debounce="300" v-model="filterlistAdd" placeholder="ค้นหา" <q-input
style="width: 850px; max-width: auto"> borderless
outlined
dense
debounce="300"
v-model="filterlistAdd"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
</q-input> </q-input>
<q-select v-model="visibleColumnslist" multiple outlined dense options-dense <q-select
:display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name" v-model="visibleColumnslist"
options-cover style="min-width: 150px" class="gt-xs q-ml-sm" /> multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar> </q-toolbar>
</div> </div>
</div> </div>
<q-table flat bordered dense :rows="rowsFilter" :columns="columns" :filter="filterlistAdd" row-key="name" <q-table
class="custom-header-table" selection="multiple" v-model:selected="selected" :pagination-label="paginationLabel" flat
:visible-columns="visibleColumnslist"> bordered
dense
:rows="rowsFilter"
:columns="columns"
:filter="filterlistAdd"
row-key="name"
class="custom-header-table"
selection="multiple"
v-model:selected="selected"
:pagination-label="paginationLabel"
:visible-columns="visibleColumnslist"
>
<template v-slot:header-selection="scope"> <template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" /> <q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template> </template>
<!-- <template v-slot:body-selection="scope"> <!-- <template v-slot:body-selection="scope">
<q-checkbox <q-checkbox
@ -816,16 +1014,37 @@ const paginationLabel = (start: number, end: number, total: number) => {
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td> <q-td>
<q-checkbox keep-color color="primary" dense v-model="props.selected" /> <q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td> </q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props" class="cursor-pointer"> <q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
class="cursor-pointer"
>
<template v-if="col.name === 'position'"> <template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</template> </template>
<template v-else-if="col.name === 'fullName'" class="table_ellipsis"> <template
v-else-if="col.name === 'fullName'"
class="table_ellipsis"
>
<div class="row col-12 text-no-wrap items-center"> <div class="row col-12 text-no-wrap items-center">
<img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" /> <img
<img v-else :src="props.row.avatar" class="col-4 img-info" /> v-if="props.row.avatar == null"
src="@/assets/avatar_user.jpg"
class="col-4 img-info"
/>
<img
v-else
:src="props.row.avatar"
class="col-4 img-info"
/>
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium">{{ props.row.name }}</div> <div class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light"> <div class="text-weight-light">
@ -843,9 +1062,12 @@ const paginationLabel = (start: number, end: number, total: number) => {
</template> </template>
<template v-else-if="col.name === 'organizationName'"> <template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.orgName !== null || <div
props.row.positionPath !== null v-if="
"> props.row.orgName !== null ||
props.row.positionPath !== null
"
>
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ {{
@ -853,20 +1075,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
}} }}
{{ {{
props.row.organizationShortName !== null props.row.organizationShortName !== null
? `(${props.row.organizationShortName})` ? `(${props.row.organizationShortName})`
: "" : ""
}} }}
</div> </div>
<div class="text-weight-light"> <div class="text-weight-light">
{{ {{
props.row.positionPath !== null props.row.positionPath !== null
? props.row.positionPath ? props.row.positionPath
: "-" : "-"
}} }}
{{ {{
props.row.positionNumber !== null props.row.positionNumber !== null
? `(${props.row.positionNumber})` ? `(${props.row.positionNumber})`
: "" : ""
}} }}
</div> </div>
</div> </div>
@ -878,14 +1100,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
</div> </div>
</template> </template>
<template v-else-if="col.name === 'positionCandidate'"> <template v-else-if="col.name === 'positionCandidate'">
<div class="text-weight-medium" v-if="props.row.positionCandidate == null"> <div
class="text-weight-medium"
v-if="props.row.positionCandidate == null"
>
- -
</div> </div>
<div class="text-weight-medium" v-else> <div class="text-weight-medium" v-else>
{{ props.row.positionCandidate }} {{ props.row.positionCandidate }}
</div> </div>
</template> </template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'"> <template
v-else-if="col.name === 'reportingDate' && col.value !== '-'"
>
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.reportingDate }} {{ props.row.reportingDate }}
</div> </div>
@ -911,14 +1138,26 @@ const paginationLabel = (start: number, end: number, total: number) => {
</q-tr> </q-tr>
</template> </template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm" <q-pagination
boundary-links direction-links></q-pagination> v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> </template>
</q-table> </q-table>
</q-card-section> </q-card-section>
<q-card-actions align="right" class="bg-white text-teal"> <q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งรายชื่อ" @click="savelist" :disable="checkSelected" color="public" /> <q-btn
label="ส่งรายชื่อ"
@click="savelist"
:disable="checkSelected"
color="public"
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>

View file

@ -101,20 +101,20 @@ const fetchData = async () => {
.get(config.API.listRoundInsignia()) .get(config.API.listRoundInsignia())
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
rows.value = data.map((e: FormProprsalsRound2) =>({ rows.value = data.map((e: FormProprsalsRound2) => ({
period_id: e.period_id, period_id: e.period_id,
period_name: e.period_name, period_name: e.period_name,
period_year: e.period_year + 543, period_year: e.period_year + 543,
period_amount: e.period_amount, period_amount: e.period_amount,
period_start: e.period_start == null ? null : date2Thai(new Date(e.period_start)), period_start:
period_end: e.period_end == null ? null : date2Thai(new Date(e.period_end)), e.period_start == null ? null : date2Thai(new Date(e.period_start)),
period_isActive: e.period_isActive, period_end:
period_doc: e.period_doc, e.period_end == null ? null : date2Thai(new Date(e.period_end)),
period_status: e.period_status.result period_isActive: e.period_isActive,
}) period_doc: e.period_doc,
period_status: e.period_status.result,
); }));
console.log(rows.value) console.log(rows.value);
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -179,6 +179,16 @@ const getRequest = async (id: string) => {
await fetchData(); await fetchData();
}); });
}; };
// filename: string
const downloadFile = (response: any) => {
const link = document.createElement("a");
var fileName = "filename";
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
// //
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
@ -288,10 +298,18 @@ const paginationLabel = (start: string, end: string, total: string) => {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td key="period_name" :props="props" @click="clickEdit(props.row)"> <q-td
key="period_name"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.period_name }} {{ props.row.period_name }}
</q-td> </q-td>
<q-td key="period_year" :props="props" @click="clickEdit(props.row)"> <q-td
key="period_year"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.period_year }} {{ props.row.period_year }}
</q-td> </q-td>
<q-td <q-td
@ -301,10 +319,18 @@ const paginationLabel = (start: string, end: string, total: string) => {
> >
{{ props.row.period_start }} {{ props.row.period_start }}
</q-td> </q-td>
<q-td key="period_end" :props="props" @click="clickEdit(props.row)"> <q-td
key="period_end"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.period_end }} {{ props.row.period_end }}
</q-td> </q-td>
<q-td key="period_isActive" :props="props" @click="clickEdit(props.row)"> <q-td
key="period_isActive"
:props="props"
@click="clickEdit(props.row)"
>
<q-icon <q-icon
v-if="props.row.period_isActive == true" v-if="props.row.period_isActive == true"
name="mdi-close" name="mdi-close"
@ -358,9 +384,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
target="_blank" target="_blank"
round round
color="light-blue-8" color="light-blue-8"
:href="props.row.period_doc"
icon="mdi-file-download" icon="mdi-file-download"
@click="downloadFile(props.row.period_doc)"
> >
<!-- :href="props.row.period_doc" -->
<q-tooltip>ดาวนโหลดเอกสารประกอบ </q-tooltip> <q-tooltip>ดาวนโหลดเอกสารประกอบ </q-tooltip>
</q-btn> </q-btn>
</q-td> </q-td>

View file

@ -24,6 +24,7 @@ const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
const $q = useQuasar(); // noti quasar const $q = useQuasar(); // noti quasar
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const loadview = ref<boolean>(false);
const round = ref<string>(""); const round = ref<string>("");
const roundName = ref<string>(""); const roundName = ref<string>("");
const optionRound = ref<any>([]); const optionRound = ref<any>([]);
@ -39,7 +40,6 @@ const stat = ref<any>({
onMounted(async () => { onMounted(async () => {
await checkRole(); await checkRole();
await fecthlistRound(); await fecthlistRound();
await fecthAgency();
}); });
const checkRole = async () => { const checkRole = async () => {
@ -60,16 +60,19 @@ const checkRole = async () => {
const fecthlistRound = async () => { const fecthlistRound = async () => {
await http await http
.get(config.API.listRoundInsignia()) .get(config.API.listRoundInsignia())
.then((res: any) => { .then(async (res: any) => {
optionRound.value = res.data.result.map((e: any) => ({ optionRound.value = res.data.result.map((e: any) => ({
id: e.period_id, id: e.period_id,
year: e.period_year, year: e.period_year,
name: e.period_name, name: e.period_name,
})); }));
const lastValue = optionRound.value[0]; if (optionRound.value.length !== 0) {
round.value = lastValue.id.toString(); const lastValue = optionRound.value[0];
roundName.value = lastValue.name; round.value = lastValue.id.toString();
fecthStat(round.value); roundName.value = lastValue.name;
await fecthStat(round.value);
await fecthAgency();
}
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
@ -120,6 +123,7 @@ const fecthType = async () => {
name: e.organizationName, name: e.organizationName,
})); }));
DataStore.fetchOption(optiontypeOc.value); DataStore.fetchOption(optiontypeOc.value);
loadview.value = true;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -294,7 +298,7 @@ const requestSendNote = async () => {
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
รายชอขาราชการสามญฯ ทธนขอพระราชทานเครองราชอสรยาภรณ รายชอขาราชการสามญฯ ทธนขอพระราชทานเครองราชอสรยาภรณ
</div> </div>
<q-card bordered class="row col-12 q-mt-sm"> <q-card bordered class="row col-12 q-mt-sm" v-if="loadview">
<div class="row col-12 items-center bg-grey-1"> <div class="row col-12 items-center bg-grey-1">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div> <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<q-select <q-select
@ -351,6 +355,13 @@ const requestSendNote = async () => {
</div> </div>
</div> </div>
</q-card> </q-card>
<q-card v-else>
<div class="q-pa-md q-gutter-sm">
<q-banner inline-actions rounded class="bg-grey-1 text-center">
ไมอมลรอบการเสนอขอพระราชทานเครองราชอสรยาภรณ
</q-banner>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm" v-if="loading"> <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
<div <div

View file

@ -77,7 +77,7 @@ const clickOpenpopup = () => {
OrderTypeOption.value = props.OrderTypeOption.filter( OrderTypeOption.value = props.OrderTypeOption.filter(
(e: any) => e.name !== "ทั้งหมด" (e: any) => e.name !== "ทั้งหมด"
); );
reportType.value = OrderTypeOption.value[0].id; reportType.value = OrderTypeOption.value[0].name;
let currentDate = new Date(); let currentDate = new Date();
let currentYear = currentDate.getFullYear(); let currentYear = currentDate.getFullYear();
reportYear.value = currentYear; reportYear.value = currentYear;
@ -89,7 +89,7 @@ const clickSearch = async () => {
await myForm.value!.validate().then((result: boolean) => { await myForm.value!.validate().then((result: boolean) => {
if (result) { if (result) {
let body = { let body = {
commandTypeId: reportType.value, commandType: reportType.value,
year: reportYear.value, year: reportYear.value,
posno: reportNo.value, posno: reportNo.value,
}; };
@ -110,7 +110,7 @@ const clickSearch = async () => {
position: e.position, position: e.position,
})); }));
} else { } else {
notifyError($q, "ไม่มีข้อมูลที่ต้องการค้นหา"); // notifyError($q, "");
rows.value = []; rows.value = [];
} }
}) })
@ -188,7 +188,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
map-options map-options
:options="OrderTypeOption" :options="OrderTypeOption"
option-label="name" option-label="name"
option-value="id" option-value="name"
:label="`${' ประเภท'}`" :label="`${' ประเภท'}`"
> >
<template v-slot:no-option> <template v-slot:no-option>