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

process จัดการคำขอเครื่องราช

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-24 17:37:06 +07:00
parent 4977ab5f7e
commit 2e2c4f6fb6
8 changed files with 348 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/api/07_insignia/api.insignia.ts
View file

@ -27,5 +27,7 @@ export default {
// record
noteround: () => `${insignia}/request/note`,
insigniaSendToDirector: (roundId: string, ocId: string) => `${insignia}/request/officer/approve/${roundId}/${ocId}`,
insigniaDirectorBackToEdit: (roundId: string, ocId: string) => `${insignia}/request/director/reject/${roundId}/${ocId}`,
insigniaDirectorApproved: (roundId: string, ocId: string) => `${insignia}/request/director/approve/${roundId}/${ocId}`,
};

38
src/components/Dialogs/Information.vue Normal file
View file

@ -0,0 +1,38 @@
<script setup lang="ts">
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
desc: {
type: String,
default: "",
},
clickClose: {
type: Function
}
});
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="clickClose" style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12">
{{ props.desc }}
</div>
</q-card-section>
<q-separator />
</q-card>
</q-dialog>
</template>

66
src/components/Dialogs/PopupReason.vue Normal file
View file

@ -0,0 +1,66 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const reason = ref<string>("");
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
label: {
type: String,
default: "",
},
clickClose: {
type: Function,
default: () => { }
},
savaForm: {
type: Function,
default: () => { }
}
});
const myForm = ref<any>();
const submit = () => {
myForm.value.validate().then((result: boolean) => {
if (result) {
props.savaForm(reason.value)
}
});
};
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="clickClose"
style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<q-card-section class="q-p-sm">
<div class="row col-12">
<q-input type="textarea" class="full-width inputgreen cursor-pointer" hide-bottom-space outlined dense
lazy-rules :rules="[(val) => !!val || `กรุณากรอก${label}`]" v-model="reason" :label="`${label}`" />
</div>
</q-card-section>
<q-separator />
<q-toolbar class="text-primary">
<q-space />
<q-btn label="บันทึก" color="secondary" @click="submit" />
</q-toolbar>
</q-form>
</q-card>
</q-dialog>
</template>

284
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -287,6 +287,7 @@ const clickAdd = async (id: string) => {
"ต้องการยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ นี้หรือไม่ ?"
);
};
const addlistperson = async (id: string) => {
showLoader();
let data = {
@ -333,6 +334,7 @@ const clickmodalEdit = (props: any) => {
fecthInsignia();
// fecthInsigniaType();
};
const clickSave = () => {
dialogConfirm(
$q,
@ -343,6 +345,7 @@ const clickSave = () => {
"ต้องการยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอนี้หรือไม่ ?"
);
};
const listEdit = async (profileId: string) => {
let data: any = {
insigniaId: insignia.value,
@ -368,6 +371,7 @@ const listEdit = async (profileId: string) => {
}
});
};
const clickReject = (profileId: string) => {
dialogConfirm(
$q,
@ -378,6 +382,7 @@ const clickReject = (profileId: string) => {
"ต้องการยืนยันการย้ายข้อมูลนี้หรือไม่ ?"
);
};
const listreject = async (profileId: string) => {
await http
.get(config.API.insigniaReject(profileId))
@ -398,6 +403,7 @@ const listreject = async (profileId: string) => {
}
});
};
const clickDelete = (profileId: string) => {
dialogRemove(
$q,
@ -408,6 +414,7 @@ const clickDelete = (profileId: string) => {
"ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
);
};
const listdelete = async (profileId: string) => {
await http
.get(config.API.insigniaDelete(profileId))
@ -428,6 +435,7 @@ const listdelete = async (profileId: string) => {
}
});
};
const insignia = ref<string>("");
const insigniaOptions = ref<any>([]);
const insigniaType = ref<string>("");
@ -477,127 +485,55 @@ const pagination2 = ref({
});
const paging = ref<boolean>(true);
const paging2 = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const paginationLabel2 = (start: string, end: string, total: string) => {
const paginationLabel2 = (start: number, end: number, total: number) => {
if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<!-- {{ DataStore.typeinsigniaOptions }} -->
<q-select
v-if="props.roleUser=='admin'"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
/>
<q-select
v-model="DataStore.typeinsignia"
label="ปรเภทเครื่องราชฯ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable"
/>
<q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
:options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="changtypeOc" />
<q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
:options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable" />
<div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickmodalAdd"
>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickmodalAdd">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
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="col-xs-12 col-sm-3 col-md-2"
/>
<q-select v-model="visibleColumns" 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="col-xs-12 col-sm-3 col-md-2" />
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="DataStore.rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" 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">
@ -607,11 +543,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click.stop="nextPage(props.row.profileId)"
>
<q-tr :props="props" class="cursor-pointer" @click.stop="nextPage(props.row.profileId)">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -643,63 +575,25 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
{{ props.row.dateSend }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense @click.stop>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 250px">
<q-item
clickable
v-close-popup
@click.stop="clickmodalEdit(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-item clickable v-close-popup @click.stop="clickmodalEdit(props.row)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
<q-icon color="primary" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section
>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
>
<q-item-section>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickReject(props.row.profileId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-item clickable v-close-popup @click.stop="clickReject(props.row.profileId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-tooltip>ไม่ยื่นขอ</q-tooltip>
<q-icon
color="blue"
size="xs"
name="mdi-alert-circle-outline"
/>
<q-icon color="blue" size="xs" name="mdi-alert-circle-outline" />
</q-item-section>
<q-item-section>ไม่ยื่นขอ</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.profileId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-item clickable v-close-popup @click.stop="clickDelete(props.row.profileId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-tooltip>ลบออก</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
@ -712,18 +606,11 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
<q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
@ -733,44 +620,21 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
<q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="modalAdd = false"
style="color: #ff8080; background-color: #ffdede"
/>
<q-btn icon="close" unelevated round dense @click="modalAdd = false"
style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<div class="q-pa-md">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
v-model="filterKeyword2"
>
<q-input borderless outlined dense debounce="300" placeholder="ค้นหา" style="width: 850px; max-width: auto"
v-model="filterKeyword2">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</q-toolbar>
<q-table
flat
bordered
dense
:rows="rows2"
:columns="columns2"
:filter="filterKeyword2"
row-key="name"
class="custom-header-table"
:pagination-label="paginationLabel2"
v-model:pagination="pagination2"
>
<q-table flat bordered dense :rows="rows2" :columns="columns2" :filter="filterKeyword2" row-key="name"
class="custom-header-table" :pagination-label="paginationLabel2" v-model:pagination="pagination2">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -796,27 +660,14 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
{{ props.row.organizationOrganization }}
</q-td>
<q-td>
<q-btn
outline
:props="props"
label="เพิ่ม"
class="text-teal-5"
@click="clickAdd(props.row.id)"
/>
<q-btn outline :props="props" label="เพิ่ม" class="text-teal-5" @click="clickAdd(props.row.id)" />
<q-tooltip>เพิ่ม</q-tooltip>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination2.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
<q-pagination v-model="pagination2.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
</template>
</q-table>
</div>
@ -827,39 +678,18 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
<q-dialog v-model="modalEdit" persistent>
<q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6"
>แก้ไขเครื่องราชฯ ที่ยื่นขอ
<q-toolbar-title class="text-h6">แก้ไขเครื่องราชฯ ที่ยื่นขอ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="modalEdit = false"
style="color: #ff8080; background-color: #ffdede"
/>
<q-btn icon="close" unelevated round dense @click="modalEdit = false"
style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<div class="q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col">
<q-select
v-model="insignia"
label="ชื่อเครื่องราชฯ"
dense
emit-value
map-options
:options="insigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<q-select v-model="insignia" label="ชื่อเครื่องราชฯ" dense emit-value map-options :options="insigniaOptions"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" style="min-width: 150px" />
</div>
<!-- <div class="col">
<q-select

145
src/modules/07_insignia/components/2_Manage/Tab2.vue
View file

@ -3,6 +3,7 @@ import { onMounted, ref, watch, reactive } from "vue";
import type { QTableProps } from "quasar";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
import { useRouter } from "vue-router";
import DialogInformation from "@/components/Dialogs/Information.vue";
const router = useRouter();
import http from "@/plugins/http";
@ -156,6 +157,7 @@ onMounted(async () => {
}
}
});
const changtypeOc = () => {
if (props.fecthInsigniaByOc) {
props.fecthInsigniaByOc(
@ -184,121 +186,66 @@ const pagination = ref({
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const dialogNote = ref<boolean>(false);
const dialogTitle = ref<string>("");
const dialogDesc = ref<string>("");
const showReson = (name: string, requestNote: string) => {
dialogTitle.value = 'หมายเหตุของ' + name;
dialogDesc.value = requestNote;
dialogNote.value = true;
}
const closeReson = () => {
dialogNote.value = false;
}
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<!-- {{ DataStore.typeinsigniaOptions }} -->
<div class="row col-12 q-col-gutter-sm">
<q-select
v-if="props.roleUser == 'admin'"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
/>
<q-select
v-model="DataStore.typeinsignia"
label="ปรเภทเครื่องราชฯ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable"
/>
<q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
:options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="changtypeOc" />
<q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
:options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
@update:model-value="DataStore.searchFilterTable" />
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
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="col-xs-12 col-sm-3 col-md-2"
/>
<q-select v-model="visibleColumns" 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="col-xs-12 col-sm-3 col-md-2" />
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="DataStore.rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" 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-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="nextPage(props.row.profileId)"
>
<q-tr :props="props" class="cursor-pointer" @click="nextPage(props.row.profileId)">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -327,21 +274,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
<q-td v-if="props.row.requestNote != ''" auto-width>
<q-btn dense size="12px" flat round color="blue" @click.stop
@click="showReson(props.row.name, props.row.requestNote)" icon="mdi-information-outline">
<q-tooltip>เหตุผลการไม่ยื่นขอ</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
<q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
</template>
</q-table>
<DialogInformation :modal="dialogNote" :title="dialogTitle" :desc="dialogDesc" :click-close="closeReson" />
</div>
</div>
</div>

13
src/modules/07_insignia/components/2_Manage/Tab3.vue
View file

@ -179,10 +179,15 @@ const pagination = ref({
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const dialogNote = ref<boolean>(false);
const showNote = (requestNote: string) => {
dialogNote.value = true;
}
</script>
<template>
<div class="col-12 row q-pa-md">
@ -285,6 +290,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<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-slot:body="props">
@ -321,6 +327,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
<q-td v-if="props.row.requestNote != ''" auto-width>
<q-btn dense size="12px" flat round color="blue" @click.stop @click="showNote(props.row.requestNote)" icon="mdi-information-outline">
<q-tooltip>เหตุผลการลบ</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">

193
src/modules/07_insignia/components/2_Manage/listManage.vue
View file

@ -13,13 +13,14 @@ import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue";
import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue";
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue";
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
import keycloak from "@/plugins/keycloak";
const roleUser = ref<string>("admin");
const DataStore = useInsigniaDataStore();
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
const { messageError, dialogConfirm, showLoader, hideLoader, success } =
mixin;
const router = useRouter();
const $q = useQuasar(); //ใช้ noti quasar
@ -156,6 +157,8 @@ const changround = async () => {
// // }
// // console.log(data);
// };
const requestNote = ref<string>("")
const requestStatus = ref<string>("")
const fecthInsigniaByOc = async (
roundId: string,
ocId: string,
@ -163,11 +166,14 @@ const fecthInsigniaByOc = async (
status: string
) => {
showLoader();
console.log("ocId===>", ocId);
// console.log("ocId===>", ocId);
await http
.get(config.API.insigniaList(roundId, ocId, role, status))
.then(async (res) => {
// console.log(res);
requestNote.value = res.data.result.requestNote;
requestStatus.value = res.data.result.requestStatus;
await DataStore.fetchData(res.data.result.items);
})
.catch((err) => {
@ -179,6 +185,84 @@ const fecthInsigniaByOc = async (
hideLoader();
});
};
const sendToDirector = async () => {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const modalPopupBackToEdit = ref<boolean>(false);
const popupBackToEdit = async () => {
modalPopupBackToEdit.value = true;
}
const closeModalPopupBackToEdit = async () => {
modalPopupBackToEdit.value = false;
}
const backToEdit = async (reason: string) => {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.put(config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency), {
reason: reason
})
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
closeModalPopupBackToEdit()
hideLoader();
});
},
'ยืนยันการตีกลับ',
'ต้องการยืนยันการตีกลับใช่หรือไม่?');
};
const directorApproved = async () => {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
.then(async () => {
success($q, "บันทึกสำเร็จ");
await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
})
.catch((err) => {
// console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
'ยืนยันการอนุมัติ',
'ต้องการยืนยันการอนุมัติใช่หรือไม่?');
};
</script>
<template>
@ -188,106 +272,73 @@ const fecthInsigniaByOc = async (
<q-card bordered class="row col-12 q-mt-sm">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<q-select
borderless
dense
v-model="round"
:options="optionRound"
map-options
emit-value
option-value="id"
option-label="name"
@update:model-value="changround"
/>
<q-select borderless dense v-model="round" :options="optionRound" map-options emit-value option-value="id"
option-label="name" @update:model-value="changround" />
</div>
<div class="col-12"><q-separator /></div>
<div v-if="roleUser == 'admin'" class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-sm fit">
<cardTop
:amount="stat.orgAllCount"
label="หน่วยงานทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.orgSendCount"
label="หน่วยงานที่ส่งรายชื่อเเล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.orgNoSendCount"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
color="#2EA0FF"
/>
<cardTop
:amount="stat.allUserUser"
label="จำนวนคนที่ยื่นขอ"
color="#4154B3"
/>
<cardTop :amount="stat.orgAllCount" label="หน่วยงานทั้งหมด" color="#016987" />
<cardTop :amount="stat.orgSendCount" label="หน่วยงานที่ส่งรายชื่อเเล้ว" color="#02A998" />
<cardTop :amount="stat.orgNoSendCount" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" color="#2EA0FF" />
<cardTop :amount="stat.allUserUser" label="จำนวนคนที่ยื่นขอ" color="#4154B3" />
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
<div v-if="roleUser == 'insignia1' && requestStatus == 'st4'" class="q-pa-md q-gutter-sm">
<q-banner inline-actions bordered class="bg-orange-1 text-orange border-orange">
<q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ {{ requestNote }}
</q-banner>
</div>
<div class="row col-12">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="pending" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
<q-tabs v-model="tab" dense class="text-grey" active-color="primary" active-class="bg-teal-1"
indicator-color="primary" align="left">
<q-tab name="pending" label="ผู้ที่ยื่นขอ" />
<q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
<q-tab name="delete" label="คนที่ถูกลบออก" />
<q-tab
v-if="roleUser == 'admin'"
name="organization"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
/>
<q-tab v-if="roleUser == 'admin'" name="organization" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
</q-tabs>
</div>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="pending" class="q-pa-none">
<tab1
:tab="tab"
:roundId="round"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
/>
<tab1 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
</q-tab-panel>
<q-tab-panel name="reject" class="q-pa-none">
<tab2
:tab="tab"
:roundId="round"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
/>
<tab2 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
</q-tab-panel>
<q-tab-panel name="delete" class="q-pa-none">
<tab3
:tab="tab"
:roundId="round"
:fecthInsigniaByOc="fecthInsigniaByOc"
:role-user="roleUser"
/>
<tab3 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
</q-tab-panel>
<q-tab-panel
v-if="roleUser == 'admin'"
name="organization"
class="q-pa-none"
>
<q-tab-panel v-if="roleUser == 'admin'" name="organization" class="q-pa-none">
<tab4 :tab="tab" :roundId="round" :role-user="roleUser" />
</q-tab-panel>
</q-tab-panels>
<q-toolbar class="q-py-md text-right">
<q-space />
<q-btn v-if="roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4')" dense unelevated label="บันทึกข้อมูล" color="public"
class="q-px-md" @click="sendToDirector" />
<q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="ตีกลับ" color="orange"
class="q-px-md" @click="popupBackToEdit" />
<q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="อนุมัติ" color="positive"
class="q-px-md q-ml-md" @click="directorApproved" />
</q-toolbar>
<DialogPopupReason :modal="modalPopupBackToEdit" title="หมายเหตุการตีกลับ" label="หมายเหตุ" :click-close="closeModalPopupBackToEdit"
:savaForm="backToEdit" />
</q-card>
</template>
<style lang="scss" scope>
.border-orange {
border: 1px solid #FFA800;
border-radius: 5px;
}
.filter-card {
background-color: #f1f1f1b0;
}

6
src/modules/07_insignia/store.ts
View file

@ -23,6 +23,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
rows.value = await data.map((e: any) =>
({
id: e.id,
citizenId: e.citizenId,
profileId: e.profileId,
name: e.fullName,
position: e.position,
@ -33,6 +34,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
insigniaSend: e.requestInsignia,
insigniaLevel: e.level,
dateSend: date2Thai(e.requestDate),
requestNote: e.requestNote
}))
listinsignia.value = await rows.value
filtertypeInsignia()
@ -49,7 +51,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
typeinsignia.value = "all"
if (listinsignia.value.length !== 0) {
const double_name = [
...new Set(listinsignia.value.map((item: any) => item.insigniaType)),
...new Set(listinsignia.value.map((item: any) => item.insigniaSend)),
];
typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
for (let i = 1; i <= double_name.length; i++) {
@ -70,7 +72,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
rows.value = listinsignia.value;
} else {
rows.value = listinsignia.value.filter(
(e: any) => e.insigniaType === typeinsignia.value
(e: any) => e.insigniaSend === typeinsignia.value
);
}
}