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

Merge branch 'fix/delete_minDate' into dev
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m18s
Details

Browse source 
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-10-14 11:59:37 +07:00
commit ee5836541a
57 changed files with 2618 additions and 3249 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/api/11_discipline/api.discipline.ts
View file

@ -7,6 +7,7 @@ const appeal = `${env.API_URI}/discipline/complaint_appeal`;
const disciplineReport = `${env.API_URI}/discipline/report`;
export default {
directorListMain: `${disciplineMain}/director/`,
directorList: (
page: number,
pageSize: number,
@ -82,13 +83,8 @@ export default {
`${discipline}/director/${disciplineId}/${id}`,
/** ผู้ถูกพักราชการ */
suspendMain: (
page: number,
pageSize: number,
keyword: string,
type: string
) =>
`${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
suspendMain: suspend,
suspendById: (id: string) => `${suspend}/${id}`,
suspendReport: () => `${suspend}/report`,
@ -101,15 +97,7 @@ export default {
deleteFileResult: (id: string, docId: string) =>
`${disciplineMain}/result/file/${id}/${docId}`,
appealMainList: (
status: string,
type: string,
year: number,
page: number,
pageSize: number,
keyword: string
) =>
`${appeal}/admin?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
appealMainList: `${appeal}/admin?`,
appealAdd: () => `${appeal}`,
appealByID: (id: string) => `${appeal}/${id}`,
appealByIDGet: (id: string) => `${appeal}/admin/${id}`,

1
src/components/TablePagination.vue
View file

@ -11,7 +11,6 @@
:pagination-label="paginationLabel"
v-model:pagination="pagination"
@request="onRequest"
:grid="!$q.screen.gt.xs"
:rows-per-page-options="[10, 25, 50, 100]"
:loading="loading"
>

6
src/composables/usePagination.ts
View file

@ -34,7 +34,11 @@ export function usePagination(
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
pagination.value = { ...newPagination };
if (fetchFunction) {
if (
fetchFunction &&
pagination.value.rowsNumber &&
pagination.value.rowsNumber > 0
) {
await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
}
}

91
src/modules/03_recruiting/components/DialogCandidates.vue Normal file
View file

@ -0,0 +1,91 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const { date2Thai, dateToISO } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
const props = defineProps({
onSubmit: { type: Function, require: true },
});
const date = ref<Date>(new Date()); // วันที่บัญชีใช้ได้ตั้งแต่
/** ฟังก์ชันบันทึกข้อมูลวันที่ */
function onSubmit() {
if (!date.value) return;
const dateISO = dateToISO(date.value);
props.onSubmit?.(dateISO);
}
/** ฟังก์ชันปิดโมดัล */
function closeModal() {
modal.value = false;
}
/** watch modal รีเซ็ตวันที่ */
watch(modal, (value) => {
if (value) date.value = new Date();
});
</script>
<template>
<q-dialog v-model="modal" persistent class="q-pt-none">
<q-card style="min-width: 450px">
<q-form @submit.prevent="onSubmit">
<DialogHeader :tittle="title" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="col-12">
<datepicker
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="dateRef"
outlined
dense
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
label="วันที่บัญชีใช้ได้ตั้งแต่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn color="public" label="บันทึก" type="submit" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped></style>

67
src/modules/03_recruiting/views/01_compete/Detail.vue
View file

@ -6,14 +6,16 @@ import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import genReportXLSX from "@/plugins/genreportxlsx";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
import genReportXLSX from "@/plugins/genreportxlsx";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogCandidates from "@/modules/03_recruiting/components/DialogCandidates.vue";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
@ -58,9 +60,9 @@ const visibleColumns = ref<String[]>([
"examAttribute",
"examScore",
"examResult",
"exam_order",
"applyDate",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "examID",
@ -269,7 +271,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "examResult",
align: "center",
label: "ผลคะแนนสอบ",
label: "ผลการสอบ",
sortable: false,
field: "examResult",
headerStyle: "font-size: 14px",
@ -280,6 +282,15 @@ const columns = ref<QTableProps["columns"]>([
sensitivity: "base",
}),
},
{
name: "exam_order",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "exam_order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "applyDate",
align: "left",
@ -295,6 +306,7 @@ const columns = ref<QTableProps["columns"]>([
}),
},
]);
const modalCandidates = ref(false); // dialog บรรจุผู้ผ่านการสอบแข่งขัน
function clickDetail(examID: string) {
router.push(`/compete/import/${importId.value}/${examID}`);
@ -401,7 +413,19 @@ async function fetchData() {
});
}
async function candidateToPlacement() {
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
/**
* ฟังก์ชันยืนยันการบันทึกส่งบรรจุผู้ผ่านการสอบแข่งขัน
* @param date วันที่บัญชีใช้ได้ตั้งแต่
*/
function onSubmitCandidates(date: Date) {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
@ -414,28 +438,28 @@ async function candidateToPlacement() {
.onOk(async () => {
showLoader();
await http
.get(config.API.periodRecruitToPlacement(importId.value))
.then((res) => {
.post(config.API.periodRecruitToPlacement(importId.value), {
accountStartDate: date,
})
.then(() => {
success($q, "นำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ");
modalCandidates.value = false;
router.go(-1);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
router.go(-1);
});
})
.onCancel(() => {})
.onDismiss(() => {});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
/** ฟังก์ชันเปิดโมดัลสำหรับผู้ส่งผ่านการสอบแข่งขัน */
function openModalCandidates() {
modalCandidates.value = true;
}
onMounted(async () => {
@ -443,6 +467,7 @@ onMounted(async () => {
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -464,7 +489,7 @@ onMounted(async () => {
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
@click="openModalCandidates"
>
<q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
</q-btn>
@ -491,6 +516,7 @@ onMounted(async () => {
</q-menu>
</q-btn>
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
<div class="col-12">
<Table
@ -556,8 +582,11 @@ onMounted(async () => {
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else-if="col.name == 'exam_order'">
{{ col.value ? col.value : " " }}
</div>
<div v-else>
{{ col.value }}
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
@ -565,6 +594,12 @@ onMounted(async () => {
</Table>
</div>
</q-card>
<DialogCandidates
:title="'ส่งผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ'"
v-model:modal="modalCandidates"
:on-submit="onSubmitCandidates"
/>
</template>
<style></style>

40
src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
View file

@ -12,6 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import DialogCandidates from "@/modules/03_recruiting/components/DialogCandidates.vue";
import Table from "@/modules/03_recruiting/components/Table.vue";
import genReportXLSX from "@/plugins/genreportxlsx";
@ -58,6 +59,7 @@ const visibleColumns = ref<String[]>([
"examAttribute",
"examScore",
"examResult",
"exam_order",
"applyDate",
]);
const columns = ref<QTableProps["columns"]>([
@ -210,7 +212,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "examResult",
align: "left",
label: "ผลคะแนนสอบ",
label: "ผลการสอบ",
sortable: true,
field: "examResult",
headerStyle: "font-size: 14px",
@ -218,6 +220,15 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "exam_order",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "exam_order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "applyDate",
align: "left",
@ -339,7 +350,7 @@ async function fetchData() {
}
/** บรรจุผู้ผ่านการคัดเลือกผู้พิการ */
async function candidateToPlacement() {
async function onSubmitCandidates() {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
@ -353,15 +364,16 @@ async function candidateToPlacement() {
showLoader();
await http
.get(config.API.periodDisableToPlacement(importId.value))
.then((res) => {
.then(() => {
success($q, "นำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ");
modalCandidates.value = false;
router.go(-1);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
router.go(-1);
});
})
.onCancel(() => {})
@ -376,6 +388,13 @@ function onSearch() {
);
}
const modalCandidates = ref(false); // dialog บรรจุผู้ผ่านการสอบแข่งขัน
/** ฟังก์ชันเปิดโมดัลสำหรับผู้ส่งผ่านคัดเลือก */
function openModalCandidates() {
modalCandidates.value = true;
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -403,7 +422,7 @@ onMounted(async () => {
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
@click="openModalCandidates"
>
<q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
</q-btn>
@ -495,8 +514,11 @@ onMounted(async () => {
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else-if="col.name == 'exam_order'">
{{ col.value ? col.value : " " }}
</div>
<div v-else>
{{ col.value }}
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
@ -504,6 +526,12 @@ onMounted(async () => {
</Table>
</div>
</q-card>
<DialogCandidates
:title="'ส่งผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ'"
v-model:modal="modalCandidates"
:on-submit="onSubmitCandidates"
/>
</template>
<style></style>

4
src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
View file

@ -1154,7 +1154,7 @@ onMounted(async () => {
</div>
<label class="col-1 flex justify-center items-center">/</label>
<div class="col-5">
<!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
<!-- :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']" -->
<datepicker
menu-class-name="modalfix"
v-model="formData.commandYear"
@ -1178,7 +1178,7 @@ onMounted(async () => {
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
label="ปี พ.ศ."
>
<template v-slot:prepend>
<q-icon

4
src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
View file

@ -1118,7 +1118,7 @@ onMounted(async () => {
</div>
<label class="col-1 flex justify-center items-center">/</label>
<div class="col-5">
<!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
<!-- :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']" -->
<datepicker
menu-class-name="modalfix"
v-model="formData.commandYear"
@ -1142,7 +1142,7 @@ onMounted(async () => {
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
label="ปี พ.ศ."
>
<template v-slot:prepend>
<q-icon

4
src/modules/04_registryPerson/views/edit/components/FormPosition.vue
View file

@ -253,8 +253,8 @@ function classInput(val: boolean) {
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
:rules="isAddPosition ? [(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`] : []"
label="ปี พ.ศ."
:rules="isAddPosition ? [(val:string) => !!val || 'กรุณากรอกปี พ.ศ.'] : []"
clearable
@clear="formData.commandYear = null"
>

2
src/modules/04_registryPerson/views/edit/components/Table.vue
View file

@ -1112,7 +1112,7 @@ onMounted(async () => {
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
label="ปี พ.ศ."
clearable
@clear="formData.commandYear = null"
@update:model-value="onUpdateData"

2
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -1679,6 +1679,7 @@ onMounted(async () => {
<DialogHeader :tittle="`เลือกวันรายงานตัว`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<!-- :min-date="new Date()" -->
<datepicker
menu-class-name="modalfix"
v-model="reportingDate"
@ -1687,7 +1688,6 @@ onMounted(async () => {
borderless
:enableTimePicker="false"
week-start="0"
:min-date="new Date()"
>
<template #year="{ year }">
{{ year + 543 }}

2
src/modules/05_placement/components/probation/MainSurvey.vue
View file

@ -156,7 +156,7 @@ onMounted(async () => {
outlined
hide-bottom-space
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
:label="`${'ปีพ.ศ.'}`"
:label="`${'ปี พ.ศ.'}`"
>
</q-input>
</template>

2
src/modules/06_retirement/views/01_retirement.vue
View file

@ -248,7 +248,7 @@ onMounted(async () => {
:model-value="
fiscalyear === null ? 'ทั้งหมด' : Number(fiscalyear) + 543
"
:label="`${'ปีพ.ศ.'}`"
:label="`${'ปี พ.ศ.'}`"
>
</q-input>
</template>

297
src/modules/09_leave/components/02_WorkList/!DialogReport.vue Normal file
View file

@ -0,0 +1,297 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/
import type {
DataOption,
DataDateMonthObject,
} from "@/modules/09_leave/interface/index/Main";
/** importComponents*/
import Header from "@/components/DialogHeader.vue";
/** use*/
const mixin = useCounterMixin();
const $q = useQuasar();
const { date2Thai, monthYear2Thai, dateToISO, messageError } = mixin;
// const apiGenReport =
// "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
const props = defineProps({
modal: {
type: Boolean,
requier: true,
default: false,
},
close: {
type: Function,
requier: true,
},
});
const loadingBtn = ref<boolean>(true);
const filterType = ref<string>("DAY");
const filterTypeMain = ref<DataOption[]>([
{ id: "DAY", name: "รายวัน" },
{ id: "MONTH", name: "รายเดือน" },
]);
const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
const date = ref<Date>(new Date());
const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(),
year: new Date().getFullYear(),
});
const detailReport = ref<any>();
/** function อัปเดทรายงานสถิติการลา*/
async function updateFilterType() {
filterType.value === "DAY"
? updateDte()
: filterType.value === "MONTH"
? updateMonth()
: false;
}
/** function อัปเดทวัน*/
async function updateDte() {
const body = {
startDate: dateToISO(date.value),
endDate: dateToISO(date.value),
type: filterType.value,
};
fetchReportTimeRecords(body);
}
/** function อัปเดทเดือน*/
async function updateMonth() {
const mount = dateMonth.value.month + 1;
// วันเริ่มต้นของเดือน
const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
// วันสิ้นสุดของเดือนถัดไป
const lastDay = new Date(dateMonth.value.year, mount, 0);
const body = {
startDate: dateToISO(firstDay),
endDate: dateToISO(lastDay),
type: filterType.value,
};
fetchReportTimeRecords(body);
}
/**
* function เรียกข้อมูลรายงานสถิติการลา
* @param body วันเรื่มต้นและสิ้นสุด
*/
async function fetchReportTimeRecords(body: any) {
loadingBtn.value = true;
await http
.post(config.API.leaveReportTimeRecords(), body)
.then((res) => {
const data = res.data.result;
detailReport.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
setTimeout(() => {
loadingBtn.value = false;
}, 500);
});
}
/**
* function filterOption
* @param val คำค้นหา
* @param update functoin
*/
function filterFnOptions(val: any, update: Function) {
update(() => {
filterTypeOption.value = filterTypeMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
/**
* function เรียกไฟล์ XLSX
* @param data ข้อมูลรายงานสถิติการลา
*/
async function genReportXLSX(data: any) {
await axios
.post(`${config.API.reportTemplate}/xlsx`, data, {
headers: {
accept:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"content-Type": "application/json",
},
responseType: "blob",
})
.then(async (res) => {
const blob = new Blob([res.data]);
await downloadReport(blob, "xlsx");
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
});
}
/**
*
* @param data ข้อมูลรายงานสถิติการลา
* @param type นามสกุลไฟล์
*/
async function downloadReport(data: any, type: string) {
const link = document.createElement("a");
var fileName = "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน";
link.href = window.URL.createObjectURL(new Blob([data]));
link.setAttribute("download", `${fileName}.${type}`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function monthYearThai(val: DataDateMonthObject) {
if (val == null) return "";
else return monthYear2Thai(val.month, val.year);
}
watch(
() => props.modal,
() => {
filterType.value = "DAY";
date.value = new Date();
props.modal && updateFilterType();
}
);
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 700px; max-width: 100vw">
<Header :close="props.close" :tittle="'รายงานสถิติการลงเวลา'" />
<q-separator />
<q-card-section class="q-pt-none" style="padding: 0px">
<div class="q-pa-sm q-gutter-y-sm">
<q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
<div class="q-pr-xs col-4">
<q-select
class="bg-white"
outlined
dense
v-model="filterType"
:options="filterTypeOption"
emit-value
map-options
option-label="name"
option-value="id"
@update:model-value="updateFilterType"
@filter="(inputValue: any,
doneFn: Function) => filterFnOptions(inputValue, doneFn,)"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="q-pr-xs col-4" v-if="filterType === 'DAY'">
<datepicker
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="updateDte"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="bg-white"
outlined
dense
borderless
:model-value="date ? date2Thai(date) : null"
:label="`${'วันที่'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="q-pr-xs col-4" v-if="filterType === 'MONTH'">
<datepicker
v-model="dateMonth"
:locale="'th'"
autoApply
month-picker
:enableTimePicker="false"
@update:model-value="updateMonth"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="bg-white"
outlined
dense
borderless
:label="`${'เดือน'}`"
:model-value="monthYearThai(dateMonth)"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
></q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="q-pr-xs col-4">
<q-btn
:loading="loadingBtn"
:disable="loadingBtn"
color="primary"
icon="download"
label="ดาวน์โหลดรายงาน"
@click="genReportXLSX(detailReport)"
style="width: 100%"
>
<q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
</q-btn>
</div>
</q-toolbar>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>

3
src/modules/09_leave/components/02_WorkList/DialogDetail.vue
View file

@ -188,7 +188,8 @@ watch(
formData.checkOutLocationName = stores.formData.checkOutLocationName;
}
}
}
},
{ deep: true }
);
</script>

3
src/modules/09_leave/components/02_WorkList/DialogMap.vue
View file

@ -2,9 +2,6 @@
import { ref, watch } from "vue";
import { loadModules } from "esri-loader";
// const apiKey = ref<string>(
// "YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg"
// );
const props = defineProps({
modal: {
type: Boolean,

92
src/modules/09_leave/components/02_WorkList/Tab1.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { usePagination } from "@/composables/usePagination";
/** importType*/
import type { QTableProps } from "quasar";
@ -20,20 +22,21 @@ import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
useCounterMixin();
const { pagination, params, onRequest } = usePagination(
"",
fetchListTimeRecord
);
/** ตัวแปร querySting*/
const total = ref<number>(0);
const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const maxPage = ref<number>(1);
const filetStatus = ref<string>("ALL");
const roleStatus = ref<string>("ALL");
const keyword = ref<string>(""); //keyword ค้นหา
const filetStatus = ref<string>("ALL"); //*สถานะ
const roleStatus = ref<string>("ALL"); //*ประเภทตำแหน่ง
/** ข้อมูลตาราง*/
const rows = ref<TableRowsTime[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -112,7 +115,7 @@ const columns = ref<QTableProps["columns"]>([
name: "checkOutStatus",
align: "left",
label: "สถานะ",
sortable: true,
sortable: false,
field: "checkOutStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -129,33 +132,31 @@ const visibleColumns = ref<string[]>([
"checkOutLocation",
"checkOutStatus",
]);
const rows = ref<TableRowsTime[]>([]);
/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาที่ประมวลผลแล้ว*/
async function fetchListTimeRecord() {
rows.value = [];
showLoader();
const date = new Date(workStore.selectDate as string | Date);
const querySting = {
...params.value,
startDate: dateToISO(date), //*วันที่เริ่ม
endDate: dateToISO(date), //*วันที่สิ้นสุด
status: filetStatus.value, //*สถานะ
page: page.value, //*หน้า
pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
keyword: keyword.value.trim(), //keyword ค้นหา
profileType: roleStatus.value.trim(), //keyword ค้นหา
};
showLoader();
await http
.get(
config.API.timeRecord() +
`?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}&profileType=${querySting.profileType}`
)
.get(config.API.timeRecord(), {
params: {
...querySting,
},
})
.then((res) => {
total.value = res.data.result.total;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
const datalist: TableRowsTime[] = res.data.result.data.map(
(e: DataResTime) => ({
const result = res.data.result;
pagination.value.rowsNumber = result.total;
if (result.data.length > 0) {
rows.value = result.data.map((e: DataResTime) => ({
id: e.id,
fullName: e.fullName,
profileType: e.profileType,
@ -175,35 +176,21 @@ async function fetchListTimeRecord() {
checkOutStatus: e.checkOutStatus
? workStore.convertSatatus(e.checkOutStatus)
: "-",
})
);
rows.value = datalist;
}));
}
})
.catch((err) => {
messageError($q, err);
rows.value = [];
})
.finally(() => {
hideLoader();
});
}
/**
* function updatePaging และเรียกข้อมูลอีกรอบ
* @param params pagin
* @param currentPage page
* @param key คำค้นหา
* @param status สถานะ
*/
async function updatePaging(
params: any,
currentPage: number,
key: string,
status: string
) {
page.value = currentPage;
rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
keyword.value = key ?? keyword.value;
filetStatus.value = status ?? filetStatus.value;
/** ฟังก์ชันค้นหาข้อมูล */
async function onSearchData() {
pagination.value.page = 1;
await fetchListTimeRecord();
}
@ -214,22 +201,23 @@ onMounted(async () => {
await fetchListTimeRecord();
});
</script>
<template>
<!-- Toolbar -->
<ToolBar
:filetStatus="filetStatus"
@update:pagination="updatePaging"
v-model:filetStatus="filetStatus"
v-model:role-status="roleStatus"
v-model:keyword="keyword"
:on-search-data="onSearchData"
/>
<!-- ตาราง -->
<TableList
:total="total"
:rows="rows.length > 0 ? rows : []"
v-model:page="page"
:rowsPerPage="rowsPerPage"
:maxPage="maxPage"
@update:pagination="updatePaging"
:tab="'time-record'"
:fetchData="fetchListTimeRecord"
:on-request="onRequest"
v-model:pagination="pagination"
/>
</template>

108
src/modules/09_leave/components/02_WorkList/Tab2.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { usePagination } from "@/composables/usePagination";
/** importType*/
import type { QTableProps } from "quasar";
@ -20,14 +22,18 @@ import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
/** useStore */
const total = ref<number>(0);
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
const roleStatus = ref<string>("ALL");
const $q = useQuasar(); //ใช้ noti quasar
const workStore = useWorklistDataStore();
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetchListLogRecord);
/** ตัวแปร QueryString*/
const keyword = ref<string>("");
const roleStatus = ref<string>("ALL");
/** ข้อมูลตาราง*/
const rows = ref<TableRows[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -102,66 +108,55 @@ const visibleColumns = ref<string[]>([
"checkOutTime",
"checkOutLocation",
]);
const rows = ref<TableRows[]>([]);
/** ตัวแปร QueryString*/
const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const maxPage = ref<number>(1);
/** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
async function fetchListLogRecord() {
rows.value = [];
showLoader();
const date = new Date(workStore.selectDate as string | Date);
await http
.get(
config.API.logRecord() +
`?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
page.value
}&pageSize=${rowsPerPage.value}&keyword=${keyword.value}&profileType=${
roleStatus.value
}`
)
.get(config.API.logRecord(), {
params: {
...params.value,
startDate: dateToISO(date), //*วันที่เริ่ม
endDate: dateToISO(date), //*วันที่สิ้นสุด
keyword: keyword.value.trim(), //keyword ค้นหา
profileType: roleStatus.value.trim(), //keyword ค้นหา
},
})
.then((res) => {
total.value = res.data.result.total;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
id: e.id,
profileType: e.profileType,
fullName: e.fullName,
checkInDate: e.checkInDate && date2Thai(e.checkInDate),
checkInTime: e.checkInTime ? e.checkInTime : "-",
checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
checkInLat: e.checkInLat ? e.checkInLat : "",
checkInLon: e.checkInLon ? e.checkInLon : "",
checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
checkOutLat: e.checkOutLat ? e.checkOutLat : "",
checkOutLon: e.checkOutLon ? e.checkOutLon : "",
}));
rows.value = datalist;
const result = res.data.result;
pagination.value.rowsNumber = result.total;
if (result.data.length > 0) {
rows.value = result.data.map((e: DataResLog) => ({
id: e.id,
profileType: e.profileType,
fullName: e.fullName,
checkInDate: e.checkInDate && date2Thai(e.checkInDate),
checkInTime: e.checkInTime ? e.checkInTime : "-",
checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
checkInLat: e.checkInLat ? e.checkInLat : "",
checkInLon: e.checkInLon ? e.checkInLon : "",
checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
checkOutLat: e.checkOutLat ? e.checkOutLat : "",
checkOutLon: e.checkOutLon ? e.checkOutLon : "",
}));
}
})
.catch((err) => {
messageError($q, err);
rows.value = [];
})
.finally(() => {
hideLoader();
});
}
/**
* function ค้นหาตามหน้าที่เลือก
* @param params pagination
* @param currentPage page
* @param key keyword ค้นหา
*/
async function updatePagingProp(params: any, currentPage: number, key: string) {
page.value = currentPage;
rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
keyword.value = key ?? keyword.value;
/*** ฟังก์ชันค้นหาข้อมูล */
async function onSearchData() {
pagination.value.page = 1;
await fetchListLogRecord();
}
@ -174,18 +169,17 @@ onMounted(async () => {
</script>
<template>
<ToolBarDate
:keyword="keyword"
@update:pagination="updatePagingProp"
v-model:keyword="keyword"
v-model:role-status="roleStatus"
:on-search-data="onSearchData"
/>
<TableList
:total="total"
:rows="rows.length > 0 ? rows : []"
v-model:page="page"
:rowsPerPage="rowsPerPage"
:maxPage="maxPage"
@update:pagination="updatePagingProp"
:tab="'log-record'"
:fetchData="fetchListLogRecord"
:on-request="onRequest"
v-model:pagination="pagination"
/>
</template>

108
src/modules/09_leave/components/02_WorkList/TableList.vue
View file

@ -1,38 +1,26 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
import type { PropsTable } from "@/interface/index/PropsTable";
import type { DataWorkList } from "@/modules/09_leave/interface/index/Main";
/** importComponents */
import DialogDetail from "@/modules/09_leave/components/02_WorkList/DialogDetail.vue";
import DialogEdit from "@/modules/09_leave/components/02_WorkList/DialogEdit.vue";
const workStore = useWorklistDataStore();
const currentPage = defineModel<number>("page", {
default: 1,
const pagination = defineModel<PropsTable.Pagination>("pagination", {
required: true,
});
const props = defineProps({
rows: {
type: Object,
require: true,
},
// page: {
// type: Number,
// require: true,
// },
rowsPerPage: {
type: Number,
require: true,
},
maxPage: {
type: Number,
require: true,
},
total: {
type: Number,
require: true,
},
tab: {
type: String,
require: true,
@ -41,48 +29,30 @@ const props = defineProps({
type: Function,
require: true,
},
onRequest: {
type: Function,
require: true,
},
});
const emit = defineEmits(["update:pagination"]);
/** ข้อมูล popup */
const modal = ref<boolean>(false);
const dataDetail = ref<any>();
const modalEdit = ref<boolean>(false);
/** pagination */
// const currentPage = ref<number>(1);
const pagination = ref({
descending: false,
page: Number(currentPage.value),
rowsPerPage: props.rowsPerPage,
});
/**
* function อัปเดท props
* @param newPagination paging
* @param page หน้าปัจุบัน
*/
function updateProp(newPagination: any, page: number) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, page);
}
const typeTab = ref<string>("");
const modal = ref<boolean>(false); //modal แสดงรายละเอียด
const dataDetail = ref<DataWorkList>(); //ข้อมูลรายละเอียด
const modalEdit = ref<boolean>(false); //modal แก้ไขข้อมูล
const typeTab = ref<string>(""); //ประเภท tab
/**
* Function openPopup และแสดงรายละเอียด
* @param data ข้อมูลรายละเอียด
*/
function clickDetail(data: any) {
function clickDetail(data: DataWorkList) {
typeTab.value = props.tab as string;
modal.value = true;
dataDetail.value = data;
}
function onClickEdit(data: any) {
function onClickEdit(data: DataWorkList) {
modalEdit.value = !modalEdit.value;
dataDetail.value = modalEdit.value ? data : [];
dataDetail.value = modalEdit.value ? data : undefined;
}
/** Function ปิด popup */
@ -90,27 +60,13 @@ function closeDetail() {
modal.value = false;
}
/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
updateProp(pagination.value, currentPage.value);
});
/**
* function updatePageSize
* @param newPagination PageSize
*/
function updateRowsPerPagen(newPagination: any) {
pagination.value.rowsPerPage = newPagination.rowsPerPage;
currentPage.value = 1;
}
onMounted(() => {
typeTab.value = props.tab as string;
});
</script>
<template>
<d-table
<p-table
ref="table"
:columns="workStore.columns"
:rows="props.rows"
@ -120,9 +76,9 @@ onMounted(() => {
dense
class="custom-header-table"
:visible-columns="workStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
:pagination="pagination"
@update:pagination="updateRowsPerPagen"
:rows-per-page-options="[1, 10, 25, 50, 100]"
v-model:pagination="pagination"
@request="props.onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -164,11 +120,7 @@ onMounted(() => {
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'checkInLocation'">
<q-item style="padding: 0">
@ -203,19 +155,7 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(props.maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</p-table>
<DialogDetail
:modal="modal"

48
src/modules/09_leave/components/02_WorkList/ToolBar.vue
View file

@ -13,23 +13,24 @@ const workStore = useWorklistDataStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const filetStatus = defineModel<string>("filetStatus", {
required: true,
});
const roleStatus = defineModel<string>("roleStatus", {
required: true,
});
const keyword = defineModel<string>("keyword", {
required: true,
});
/** props จาก Tab 1*/
const props = defineProps({
filetStatus: {
type: String,
onSearchData: {
type: Function,
require: true,
},
});
const emit = defineEmits(["update:pagination"]);
/** ตัแปร filter**/
const filetStatus = ref<string>(
props.filetStatus?.toString() || "default-value"
);
const roleStatus = defineModel<string>("roleStatus", { required: true });
const keyword = ref<string>("");
const optionMain = ref<DataOption[]>([
{ id: "ALL", name: "ทั้งหมด" },
{ id: "NORMAL", name: "ปกติ" },
@ -45,20 +46,9 @@ const roleMainOp = ref<DataOption[]>([
const option = ref<DataOption[]>(optionMain.value);
const roleOp = ref<DataOption[]>(roleMainOp.value);
/**
* function updateProps
* @param newPagination paging
* @param keyword คำค้น
* @param status สถานะ
*/
function updateProp(newPagination: any, keyword: string, status: string) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, 1, keyword, status);
}
/** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
function filterFn() {
updateProp([], keyword.value, filetStatus.value);
props.onSearchData?.();
}
/**
@ -70,13 +60,13 @@ function filterOptionFn(val: string, update: Function, type?: string) {
if (type == "role") {
update(() => {
roleOp.value = roleMainOp.value.filter(
(e: any) => e.name.search(val) !== -1
(e: DataOption) => e.name.search(val) !== -1
);
});
} else {
update(() => {
option.value = optionMain.value.filter(
(e: any) => e.name.search(val) !== -1
(e: DataOption) => e.name.search(val) !== -1
);
});
}
@ -92,7 +82,7 @@ function calculateMaxDate() {
<template>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-4 col-md-2">
<datepicker
v-model="workStore.selectDate"
:locale="'th'"
@ -127,7 +117,7 @@ function calculateMaxDate() {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-12 col-sm- col-md-3">
<q-select
for="selectStatus"
emit-value
@ -162,7 +152,7 @@ function calculateMaxDate() {
</template>
</q-select>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-4 col-md-2">
<q-select
for="selectStatus"
emit-value
@ -197,7 +187,7 @@ function calculateMaxDate() {
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-5 col-md-2">
<q-input
for="filterTable"
dense

32
src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
View file

@ -16,9 +16,13 @@ const emit = defineEmits(["update:pagination"]);
/** ตัวแปร filter*/
const roleStatus = defineModel<string>("roleStatus", { required: true });
const keyword = ref<string>("");
const pagination = ref({
page: 1,
const keyword = defineModel<string>("keyword", { required: true });
const props = defineProps({
onSearchData: {
type: Function,
require: true,
},
});
const roleMainOp = ref<DataOption[]>([
@ -28,16 +32,6 @@ const roleMainOp = ref<DataOption[]>([
]);
const roleOp = ref<DataOption[]>(roleMainOp.value);
/**
* function updateProps
* @param newPagination paging
* @param keyword คำค้นหา
*/
function updateProp(newPagination: any, keyword: string) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, 1, keyword);
}
/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
function calculateMaxDate() {
const today = new Date();
@ -45,9 +39,9 @@ function calculateMaxDate() {
return today;
}
/** function ค้นหาข้อมูล แล้ว อัปเดท Props*/
/** function ค้นหาข้อมูล */
function filterFn() {
updateProp(pagination.value, keyword.value);
props.onSearchData?.();
}
/**
@ -58,7 +52,7 @@ function filterFn() {
function filterOptionFn(val: string, update: Function) {
update(() => {
roleOp.value = roleMainOp.value.filter(
(e: any) => e.name.search(val) !== -1
(e: DataOption) => e.name.search(val) !== -1
);
});
}
@ -66,7 +60,7 @@ function filterOptionFn(val: string, update: Function) {
<template>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-6 col-md-2">
<datepicker
v-model="workStore.selectDate"
:locale="'th'"
@ -101,7 +95,7 @@ function filterOptionFn(val: string, update: Function) {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-12 col-sm-6 col-md-3">
<q-select
for="selectStatus"
emit-value
@ -136,7 +130,7 @@ function filterOptionFn(val: string, update: Function) {
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-5 col-md-2">
<q-input
for="filterTable"
dense

239
src/modules/09_leave/components/04_SpecialTime/Table.vue
View file

@ -1,239 +0,0 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
/** import Stoer*/
import { useCounterMixin } from "@/stores/mixin";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
const attrs = ref<any>(useAttrs());
const SpecialTimeStore = useSpecialTimeStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const { searchFilterTable } = SpecialTimeStore;
/** props*/
const props = defineProps({
count: Number,
pass: Number,
notpass: Number,
inputfilter: String,
name: String,
icon: String,
inputvisible: Array,
editvisible: Boolean,
add: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
nornmalData: {
type: Boolean,
defualt: true,
},
conclude: {
type: Boolean,
defualt: false,
},
});
/**emit Function*/
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const table = ref<any>(null);
const filterRef = ref<any>(null);
/** pagination*/
const paging = ref<boolean>(true);
const pagination = ref({
descending: false,
page: 1,
rowsPerPage: 10,
});
function paginationLabel(start: string, end: string, total: string) {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
}
/**
* function update filter
* @param value คำค้นหา
*/
function updateInput(value: string | number | null) {
emit("update:inputfilter", value);
}
/**
* function updateVisible
* @param value ค่า Visible
*/
function updateVisible(value: []) {
emit("update:inputvisible", value);
}
function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<!-- -->
<div class="q-gutter-sm" v-if="nornmalData == true">
<datepicker
v-model="SpecialTimeStore.selectDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="selectDate"
dense
outlined
:model-value="
SpecialTimeStore.selectDate !== null
? date2Thai(SpecialTimeStore.selectDate)
: null
"
hide-bottom-space
:label="`${'วันที่'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer text-primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-space />
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
class="col-xs-12 col-sm-3 col-md-2"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2 gt-xs"
>
<template> </template>
</q-select>
</div>
<d-table
ref="table"
flat
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
: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" v-html="col.label" />
</q-th>
<q-th auto-width />
<q-th auto-width />
<q-th auto-width v-if="nornmalData == true" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</d-table>
</template>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-table2 {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

16
src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
View file

@ -690,11 +690,9 @@ onMounted(async () => {
@click="
onClickDownloadFile(
formData.id,
checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
? formData.leaveTypeName
: formData.hajjDayStatus
? 'ลาประกอบพิธีฮัจญ์'
: 'ลาอุปสมบท',
formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName,
typeDocx
)
"
@ -710,11 +708,9 @@ onMounted(async () => {
@click="
onClickDownloadFile(
formData.id,
checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
? formData.leaveTypeName
: formData.hajjDayStatus
? 'ลาประกอบพิธีฮัจญ์'
: 'ลาอุปสมบท',
formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName,
typePdf
)
"

8
src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
View file

@ -504,7 +504,9 @@ onMounted(async () => {
@click="
onClickDownloadFile(
formData.id,
'ยกเลิก' + formData.leaveTypeName,
'ยกเลิก' + formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName,
typeDocx
)
"
@ -520,7 +522,9 @@ onMounted(async () => {
@click="
onClickDownloadFile(
formData.id,
'ยกเลิก' + formData.leaveTypeName,
'ยกเลิก' + formData.leaveSubTypeName
? formData.leaveSubTypeName
: formData.leaveTypeName,
typePdf
)
"

133
src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
View file

@ -5,29 +5,32 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";
import type { QTableColumn } from "quasar";
import type {
DataOption,
DataPagination,
} from "@/modules/09_leave/interface/index/Main";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import type {
DataLeaveType,
DataLeaveBeginning,
} from "@/modules/09_leave/interface/response/leaveHistory";
import DialogHeader from "@/components/DialogHeader.vue";
import { max } from "moment";
/** useStore*/
const $q = useQuasar();
const route = useRoute();
const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
const { findYear } = useLeaveHistoryDataStore();
const { dialogConfirm, showLoader, success, messageError, hideLoader } =
useCounterMixin();
const { pagination, params, onRequest } = usePagination("", () =>
onSearchData(false)
);
const modal = defineModel<boolean>("modal", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const rowData = defineModel<DataLeaveBeginning>("rowData", {
@ -42,18 +45,13 @@ const formFilter = reactive({
citizenId: "",
type: "citizenId",
keyword: "",
page: 1,
pageSize: 10,
});
const searchTypeOption = ref<DataOption[]>([
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
{ id: "firstName", name: "ชื่อ" },
{ id: "lastName", name: "นามสกุล" },
{ id: "fullName", name: "ชื่อ-นามสกุล" },
]);
const rows = ref<DataLeaveBeginning[]>([]);
const selected = ref<DataLeaveBeginning[]>([]);
const total = ref<number>(0);
const maxPage = ref<number>(0);
const columns = ref<QTableColumn[]>([
{
name: "citizenId",
@ -65,13 +63,16 @@ const columns = ref<QTableColumn[]>([
style: "font-size: 14px",
},
{
name: "fullName",
name: "firstName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`;
},
},
]);
@ -96,9 +97,7 @@ async function onSubmit() {
: `${config.API.leaveBeginning}/${rowId.value}`;
const method = !isStatusEdit.value ? "post" : "put";
await http[method](pathAPI, {
profileId: !isStatusEdit.value
? selected.value[0].profileId
: profileId.value,
profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value,
leaveTypeId: formData.leaveTypeId,
leaveYear: formData.leaveYear,
leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
@ -123,25 +122,24 @@ async function onSubmit() {
/** ฟังก์ชันเรียกรายชื่อคน*/
async function fetchDataPerson() {
await http
.post(config.API.leaveSearch(), {
citizenId:
formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
firstname:
formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
page: formFilter.page, //หน้า
pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
})
.then((res) => {
const data = res.data.result;
rows.value = data.data;
total.value = data.total;
maxPage.value = Math.ceil(data.total / formFilter.pageSize);
})
.catch((e) => {
messageError($q, e);
});
try {
const res = await http.post(
config.API.orgSearchPersonal(),
{
fieldName: formFilter.type,
keyword: formFilter.keyword.trim(),
system: (route.meta?.Key as string) || undefined,
},
{
params: params.value,
}
);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rows.value = result.data;
} catch (e) {
messageError($q, e);
}
}
/**
@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) {
try {
showLoader();
if (newSearch) {
formFilter.page = 1;
pagination.value.page = 1;
}
await fetchDataPerson();
} finally {
@ -176,28 +174,25 @@ async function onSearchData(newSearch: boolean) {
}
}
/**
* ฟังก์ชันอัปเดทรายการแถวต่อหน้า
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: DataPagination) {
formFilter.pageSize = newPagination.rowsPerPage;
}
/** ฟังก์ชันปิด Dialog*/
function onClose() {
modal.value = false;
formFilter.citizenId = "";
formFilter.type = "citizenId";
formFilter.keyword = "";
formFilter.page = 1;
formFilter.pageSize = 10;
formData.leaveTypeId = "";
formData.leaveYear = calculateFiscalYear(new Date());
formData.leaveDays = "";
formData.leaveDaysUsed = "";
rows.value = [];
selected.value = [];
pagination.value = {
page: 1,
rowsPerPage: 10,
rowsNumber: 0,
sortBy: "",
descending: false,
};
}
/**
@ -243,14 +238,6 @@ function classInput(val: boolean) {
};
}
/** Hook*/
watch(
() => formFilter.pageSize,
() => {
modal.value && onSearchData(true);
}
);
watch(modal, async (val) => {
if (val) {
try {
@ -259,8 +246,6 @@ watch(modal, async (val) => {
filterLeaveTypeData(),
isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
]);
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
@ -278,10 +263,14 @@ watch(modal, async (val) => {
/>
<q-separator />
<q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
<div class="row col-12 q-gutter-sm">
<q-card-section
:horizontal="$q.screen.gt.md"
class="q-pa-none"
style="height: 50vh"
>
<div class="row col-12 no-wrap full-height">
<!-- รายชื่อ -->
<div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
<div class="col-8 overflow-auto q-pa-md" v-if="!isStatusEdit">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6 col-md-3">
<q-select
@ -321,11 +310,11 @@ watch(modal, async (val) => {
</div>
<div class="col-12 q-pt-sm">
<d-table
<p-table
ref="table"
:columns="columns"
:rows="rows"
row-key="profileId"
row-key="id"
flat
bordered
:paging="true"
@ -333,7 +322,8 @@ watch(modal, async (val) => {
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
v-model:selected="selected"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -369,29 +359,14 @@ watch(modal, async (val) => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total.toLocaleString() }} รายการ
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="onSearchData(false)"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</div>
<q-separator vertical />
<!-- input -->
<div class="q-pa-md col">
<div class="col overflow-hidden q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12">
<datepicker

60
src/modules/09_leave/interface/index/Main.ts
View file

@ -18,4 +18,62 @@ interface DataPagination {
rowsPerPage: number;
sortBy: string;
}
export type { DataOption, DataOption2, DataDateMonthObject, DataPagination };
interface DataWorkList {
checkInDate: string;
checkInLat: number;
checkInLocation: string;
checkInLon: number;
checkInStatus: string;
checkInTime: string;
checkOutDate: string;
checkOutLat: number;
checkOutLocation: string;
checkOutLon: number;
checkOutStatus: string;
checkOutTime: string;
fullName: string;
id: string;
profileType: string;
}
interface DataSpecialTime {
checkDate: string;
checkIn: string;
checkInEdit: boolean;
checkInStatus: string;
checkInTime: string;
checkOut: string;
checkOutEdit: boolean;
checkOutStatus: string;
checkOutTime: string;
createdAt: string;
date: string;
dateFix: string;
description: string;
endTimeAfternoon: string;
endTimeMorning: string;
firstName: string;
fullName: string;
id: string;
lastName: string;
latitude: number;
longitude: number;
poi: string;
prefix: string;
reason: string;
startTimeAfternoon: string;
startTimeMorning: string;
status: string;
statusSort: number;
timeAfternoon: string;
timeMorning: string;
}
export type {
DataOption,
DataOption2,
DataDateMonthObject,
DataPagination,
DataWorkList,
DataSpecialTime,
};

16
src/modules/09_leave/stores/ChangeRoundStore.ts
View file

@ -43,7 +43,7 @@ export const useChangeRoundDataStore = defineStore(
name: "cardId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
sortable: false,
field: "cardId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -52,7 +52,7 @@ export const useChangeRoundDataStore = defineStore(
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
sortable: false,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -61,7 +61,7 @@ export const useChangeRoundDataStore = defineStore(
name: "currentRound",
align: "left",
label: "รอบปัจจุบัน",
sortable: true,
sortable: false,
field: "currentRound",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -70,7 +70,7 @@ export const useChangeRoundDataStore = defineStore(
name: "effectiveDate",
align: "left",
label: "วันที่มีผล",
sortable: true,
sortable: false,
field: "effectiveDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -81,7 +81,7 @@ export const useChangeRoundDataStore = defineStore(
name: "round",
align: "left",
label: "ครั้งที่",
sortable: true,
sortable: false,
field: "round",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -90,7 +90,7 @@ export const useChangeRoundDataStore = defineStore(
name: "time",
align: "left",
label: "รอบเวลา",
sortable: true,
sortable: false,
field: "time",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -99,7 +99,7 @@ export const useChangeRoundDataStore = defineStore(
name: "effectiveDate",
align: "left",
label: "วันที่มีผล",
sortable: true,
sortable: false,
field: "effectiveDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -108,7 +108,7 @@ export const useChangeRoundDataStore = defineStore(
name: "reson",
align: "left",
label: "เหตุผล",
sortable: true,
sortable: false,
field: "reson",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

228
src/modules/09_leave/stores/SpecialTimeStore.ts
View file

@ -1,142 +1,9 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader } = mixin;
export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
const rows = ref<any[]>([]);
const selectDate = ref<Date | null>(new Date());
const fiscalYear = ref<string | null>("0");
const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
const DataUpdate = (filterYear: string) => {
DataMainUpdate.value = [];
if (filterYear === "") {
DataMainUpdate.value = DataMainOrig.value;
}
};
const checkInStatus = ref<String>("ปกติ");
const checkOutStatus = ref<String>("ปกติ");
// paging
const toDay = ref<Date>(new Date());
const monthToday = toDay.value.getMonth();
const yearToday = toDay.value.getFullYear();
console.log(monthToday + 1);
const month = ref<number>(monthToday + 1);
const year = ref<number>(yearToday);
const page = ref<number>(1);
const total = ref<number>(0);
const pageSize = ref<number>(10);
const filter = ref<string>(""); //search data table
const maxPage = ref<number>(0);
/**
* ฟังชั้นเรียกดูข้อมูล
*/
const fetchData = async () => {
showLoader();
await http
.get(
config.API.specialTime() +
`?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
)
.then(async (res) => {
let data = res.data.result.data;
total.value = res.data.result.total;
maxPage.value = await Math.ceil(total.value / pageSize.value);
rows.value = [];
data.map((e: any) => {
rows.value.push({
id: e.id,
fullname: e.fullName,
date: date2Thai(new Date(e.createdAt), false, true),
dateFix: date2Thai(new Date(e.checkDate)),
timeMorning:
e.startTimeMorning == null
? "-"
: e.checkInEdit == true
? e.startTimeMorning + " - " + e.endTimeMorning
: "-",
timeAfternoon:
e.startTimeAfternoon == null
? "-"
: e.checkOutEdit == true
? e.startTimeAfternoon + " - " + e.endTimeAfternoon
: "-",
startTimeMorning: e.startTimeMorning,
endTimeMorning: e.endTimeMorning,
startTimeAfternoon: e.startTimeAfternoon,
endTimeAfternoon: e.endTimeAfternoon,
checkIn: e.checkInTime,
checkOut: e.checkOutTime,
status: e.status,
checkInStatus: convertStatus(e.checkInStatus),
checkOutStatus: convertStatus(e.checkOutStatus),
reason: e.reason,
description: e.description,
checkInEdit: e.checkInEdit,
checkOutEdit: e.checkOutEdit,
});
});
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
console.log(month.value);
});
};
/**
* ฟังก์ชั่น api เปลี่ยนหน้า
* @param pageVal page
* @param pageSizeVal pagesize
*/
async function changePage(pageVal: number, pageSizeVal: number) {
page.value = await pageVal;
pageSize.value = await pageSizeVal;
console.log(pageSize.value);
fetchData();
console.log("page");
}
//--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async (searchDate: any) => {
rows.value = [];
if (fiscalYear.value !== undefined && searchDate.value !== null) {
await DataUpdate(searchDate.value === "0" ? "all" : searchDate.value!);
let filteredData = DataMainOrig.value;
if (searchDate.value !== "0") {
filteredData = filteredData.filter(
(item: DataRows) => item.date === searchDate.value
);
console.log(searchDate.value);
}
const dataArr = filteredData.map((e: any) => ({
fullname: e.fullname,
date: date2Thai(new Date(e.date)),
dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
type: e.type,
reason: e.reason,
timeStamp: e.timeStamp,
}));
rows.value = dataArr;
}
};
const optionStatus = ref<DataOption[]>([
{ id: "NORMAL", name: "ปกติ" },
{ id: "LATE", name: "สาย" },
@ -144,82 +11,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
{ id: "NOT_COMPLETE", name: "ปฏิบัติงานไม่ครบตามกำหนดเวลา" },
]);
const visibleColumns = ref<String[]>([
"no",
"fullname",
"date",
"dateFix",
"timeMorning",
"timeAfternoon",
"description",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "center",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date",
align: "left",
label: "วันที่ยื่นเรื่อง",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateFix",
align: "left",
label: "วันที่ขอแก้ไข",
sortable: true,
field: "dateFix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "timeMorning",
align: "left",
label: "ช่วงเช้า",
sortable: true,
field: "timeMorning",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "timeAfternoon",
align: "left",
label: "ช่วงบ่าย",
sortable: true,
field: "timeAfternoon",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "description",
align: "left",
label: "เหตุผล",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// convertSatatus
function convertStatus(val: string) {
const value = val ? val.toUpperCase() : null;
@ -236,26 +27,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
}
return {
// fecthList,
rows,
visibleColumns,
columns,
DataMain,
searchFilterTable,
selectDate,
checkInStatus,
checkOutStatus,
optionStatus,
fetchData,
changePage,
total,
maxPage,
year,
page,
pageSize,
month,
filter,
convertStatus,
// changeMonth,
};
});

11
src/modules/09_leave/stores/WorkStore.ts
View file

@ -6,11 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import type { FormDetail } from "@/modules/09_leave/interface/response/work";
export const useWorklistDataStore = defineStore("work", () => {
/** รายการลงเวลาปฏิบัติงาน */
const tabs = ref<string>("1");
/** ข้อมูล Table */
const mixin = useCounterMixin()
const { date2Thai } = mixin
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const columns = ref<QTableProps["columns"]>([]);
const visibleColumns = ref<string[]>([]);
@ -95,11 +97,12 @@ export const useWorklistDataStore = defineStore("work", () => {
formData.checkOutLocationName = data.checkOutLocationName;
}
return {
tabs,
columns,
visibleColumns,
selectDate,
convertSatatus,
getData,
formData
formData,
};
});

79
src/modules/09_leave/views/02_WorkingMain.vue
View file

@ -1,65 +1,50 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, toRefs } from "vue";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
/** import Components */
import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
const tab = ref("1");
const stores = useWorklistDataStore();
const modalReport = ref<boolean>(false);
function onClickOpenDialog() {
modalReport.value = !modalReport.value;
}
const { tabs } = toRefs(stores);
</script>
<template>
<div class="row">
<span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
<q-space />
<!-- <q-btn
</div>
<q-card bordered flat>
<q-tabs
v-model="tabs"
dense
flat
class="text-blue"
label="รายงานสถิติการลงเวลา"
@click="onClickOpenDialog"
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tooltip>รายงานสถิติการลงเวลา</q-tooltip>
</q-btn> -->
</div>
<q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
<q-tab name="2" label="รายการลงเวลา" />
</q-tabs>
<div>
<q-card bordered flat>
<q-tabs
v-model="tab"
dense
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
<q-tab name="2" label="รายการลงเวลา" />
</q-tabs>
<q-separator />
<div class="q-pa-sm">
<q-tab-panels v-model="tabs" animated>
<q-tab-panel name="1">
<Tab1 />
</q-tab-panel>
<q-separator />
<div class="q-pa-sm">
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="1">
<Tab1 />
</q-tab-panel>
<q-tab-panel name="2">
<Tab2 />
</q-tab-panel>
</q-tab-panels>
</div>
</q-card>
</div>
<!-- <DialogReport :modal="modalReport" :close="onClickOpenDialog" /> -->
<q-tab-panel name="2">
<Tab2 />
</q-tab-panel>
</q-tab-panels>
</div>
</q-card>
</template>
<style scoped></style>

333
src/modules/09_leave/views/04_SpecialTimeMain.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
@ -8,11 +8,10 @@ import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
import { checkPermission } from "@/utils/permissions";
import { usePagination } from "@/composables/usePagination";
import type {
DataDateMonthObject,
DetailData,
} from "@/modules/09_leave/interface/request/specialTime";
import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
import type { DataSpecialTime } from "@/modules/09_leave/interface/index/Main";
import DialogReason from "@/components/Dialogs/PopupReason.vue";
import DialogApprove from "@/modules/09_leave/components/04_SpecialTime/DialogApprove.vue";
@ -29,20 +28,22 @@ const {
date2Thai,
dialogConfirm,
} = mixin;
const { pagination, params, onRequest } = usePagination("", fetchData);
const emit = defineEmits(["update:change-page"]);
const rows = ref<any[]>([]);
const toDay = ref<Date>(new Date());
const monthToday = toDay.value.getMonth();
const yearToday = toDay.value.getFullYear();
const month = ref<number>(monthToday + 1);
const year = ref<number>(yearToday);
const description = ref<string>('')
const description = ref<string>("");
/**ตัวแปรที่ใช้ */
const modalUnapprove = ref<boolean>(false);
const modalApprove = ref<boolean>(false);
const detailData = ref<DetailData[]>([]);
const detailData = ref<DataSpecialTime>();
const editCheck = ref<string>("");
const dialogTitle = ref<string>("");
const dialogDesc = ref<string>("");
@ -58,26 +59,16 @@ const dateMonth = ref<DataDateMonthObject>({
year: new Date().getFullYear(),
});
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const rows = ref<DataSpecialTime[]>([]);
const visibleColumns = ref<String[]>([
"no",
"fullname",
"date",
"dateFix",
"timeMorning",
"timeAfternoon",
"fullName",
"createdAt",
"checkDate",
"startTimeMorning",
"startTimeAfternoon",
"description",
]);
const columns = ref<QTableProps["columns"]>([
@ -91,16 +82,16 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "fullname",
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "date",
name: "createdAt",
align: "left",
label: "วันที่ยื่นเรื่อง",
sortable: true,
@ -109,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "dateFix",
name: "checkDate",
align: "left",
label: "วันที่ขอแก้ไข",
sortable: true,
@ -118,7 +109,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "timeMorning",
name: "startTimeMorning",
align: "left",
label: "ช่วงเช้า",
sortable: true,
@ -127,7 +118,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "timeAfternoon",
name: "startTimeAfternoon",
align: "left",
label: "ช่วงบ่าย",
sortable: true,
@ -146,6 +137,54 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/** ฟังก์ชั่นเรียกดูข้อมูลรายการลงเวลากรณีพิเศษ */
async function fetchData() {
showLoader();
await http
.get(config.API.specialTime(), {
params: {
...params.value,
year: year.value,
month: month.value,
keyword: filterKeyword.value.trim(),
},
})
.then(async (res) => {
const result = await res.data.result;
pagination.value.rowsNumber = result.total;
if (result.data.length > 0) {
rows.value = result.data.map((e: DataSpecialTime) => ({
...e,
date: date2Thai(new Date(e.createdAt), false, true),
dateFix: date2Thai(new Date(e.checkDate)),
timeMorning:
e.startTimeMorning == null
? "-"
: e.checkInEdit == true
? e.startTimeMorning + " - " + e.endTimeMorning
: "-",
timeAfternoon:
e.startTimeAfternoon == null
? "-"
: e.checkOutEdit == true
? e.startTimeAfternoon + " - " + e.endTimeAfternoon
: "-",
checkIn: e.checkInTime,
checkOut: e.checkOutTime,
checkInStatus: store.convertStatus(e.checkInStatus),
checkOutStatus: store.convertStatus(e.checkOutStatus),
}));
}
})
.catch((e) => {
rows.value = [];
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชั่นไม่อนุมัติ
* @param fullname ชื่อ
@ -158,43 +197,39 @@ async function unapprove(fullname: string, personId: string) {
modalUnapprove.value = true;
}
/** function openDialog */
function openModal(
data: any,
check: string,
date: string,
dateFix: string,
personId: string,
detail: string,
) {
id.value = personId;
/**
* ฟังก์ชั่นอนุมัติ
* @param data ข้อมูล
*/
function openModal(data: DataSpecialTime) {
id.value = data.id;
dateDialog.value = data.date;
description.value = data.description;
dateFixDialog.value = data.dateFix;
editCheck.value = data.status;
detailData.value = data;
modalApprove.value = true;
dateDialog.value = date;
description.value= detail
dateFixDialog.value = dateFix;
editCheck.value = check;
if (check === "PENDING") {
detailData.value = data;
}
}
/** function closeDialog */
/** ฟังก์ชั่นปิด Dialog */
function closeDialog() {
modalUnapprove.value = false;
modalApprove.value = false;
description.value = '';
description.value = "";
editCheck.value = "PENDING";
}
/** API reject */
/**
* ฟังก์ชั่นบันทึกข้อมูลไม่อนุมัติ
* @param reason เหตุผลที่ไม่อนุมัติ
*/
async function clickSave(reason: string) {
dialogConfirm($q, async () => {
showLoader();
const body = {
reason: reason,
};
await http
.put(config.API.specialTimeReject(id.value), body)
.put(config.API.specialTimeReject(id.value), {
reason: reason,
})
.then(async () => {
await fetchData();
success($q, "บันทึกข้อมูลสำเร็จ");
@ -219,97 +254,22 @@ async function updateMonth(e: DataDateMonthObject) {
dateYear.value = year.value;
month.value = dateMonth.value.month + 1;
year.value = dateMonth.value.year;
getSearch();
onSearchData();
}
}
//แปลงเดือนเป็นไทย
function monthYearThai(val: any) {
function monthYearThai(val: DataDateMonthObject) {
if (val == null) return "";
else return monthYear2Thai(val.month, val.year);
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
/** ฟังก์ชั่นค้นหาข้อมูล */
function onSearchData() {
pagination.value.page = 1;
fetchData();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**
* ฟังชั้นเรียกดูข้อมูล
*/
async function fetchData() {
showLoader();
await http
.get(
config.API.specialTime() +
`?year=${year.value}&month=${month.value}&page=${
pagination.value.page
}&pageSize=${
pagination.value.rowsPerPage
}&keyword=${filterKeyword.value.trim()}`
)
.then(async (res) => {
let data = await res.data.result.data;
total.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
rows.value = [];
data.map((e: any) => {
rows.value.push({
id: e.id,
fullname: e.fullName,
date: date2Thai(new Date(e.createdAt), false, true),
dateFix: date2Thai(new Date(e.checkDate)),
timeMorning:
e.startTimeMorning == null
? "-"
: e.checkInEdit == true
? e.startTimeMorning + " - " + e.endTimeMorning
: "-",
timeAfternoon:
e.startTimeAfternoon == null
? "-"
: e.checkOutEdit == true
? e.startTimeAfternoon + " - " + e.endTimeAfternoon
: "-",
startTimeMorning: e.startTimeMorning,
endTimeMorning: e.endTimeMorning,
startTimeAfternoon: e.startTimeAfternoon,
endTimeAfternoon: e.endTimeAfternoon,
checkIn: e.checkInTime,
checkOut: e.checkOutTime,
status: e.status,
checkInStatus: store.convertStatus(e.checkInStatus),
checkOutStatus: store.convertStatus(e.checkOutStatus),
reason: e.reason,
description: e.description,
checkInEdit: e.checkInEdit,
checkOutEdit: e.checkOutEdit,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**Hook */
onMounted(async () => {
//อัพเดทเป็นวันปัจจุบันเมื่อเข้าหน้านี้
@ -326,9 +286,10 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการลงเวลากรณีพิเศษ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<q-card flat bordered class="col-12 q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="q-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<datepicker
v-model="dateMonth"
:locale="'th'"
@ -347,7 +308,6 @@ onMounted(async () => {
dense
outlined
hide-bottom-space
style="width: 130px"
>
<template v-slot:prepend>
<q-icon
@ -363,39 +323,38 @@ onMounted(async () => {
</div>
<q-space />
<div class="col-xs-12 col-sm-3 col-md-2">
<q-input
standout
dense
v-model="filterKeyword"
outlined
placeholder="ค้นหาชื่อ-นามสกุล"
@keydown.enter.prevent="onSearchData()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหาชื่อ-นามสกุล"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon name="search" />
</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"
style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2"
/>
<div 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"
/>
</div>
</div>
<div class="col-12">
<d-table
<p-table
:columns="columns"
:rows="rows"
row-key="id"
@ -405,7 +364,8 @@ onMounted(async () => {
dense
:visible-columns="visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -428,7 +388,7 @@ onMounted(async () => {
class="q-px-md"
dense
unelevated
@click="unapprove(props.row.fullname, props.row.id)"
@click="unapprove(props.row.fullName, props.row.id)"
>ไม่อนุมัติ</q-btn
>
<q-btn
@ -441,18 +401,10 @@ onMounted(async () => {
class="q-px-md q-ml-sm"
dense
unelevated
@click="
openModal(
props.row,
'PENDING',
props.row.date,
props.row.dateFix,
props.row.id,
props.row.description
)
"
>อนุมัติ</q-btn
@click="openModal(props.row)"
>
อนุมัติ
</q-btn>
<q-badge
v-if="props.row.status == 'APPROVE'"
@ -471,11 +423,7 @@ onMounted(async () => {
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'description'"
@ -489,22 +437,7 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchData()"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</q-card>

250
src/modules/09_leave/views/07_LeaveHistoryMain.vue
View file

@ -1,18 +1,17 @@
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import { reactive, ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { updateCurrentPage } from "@/utils/function";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";
import type { QTableColumn } from "quasar";
import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
import type {
DataLeaveType,
DataLeaveBeginning,
@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm
const $q = useQuasar();
const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
const { findYear } = useLeaveHistoryDataStore();
const { showLoader, hideLoader, messageError, dialogRemove, success } =
useCounterMixin();
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
"",
() => onSearchData(false)
);
const formFilter = reactive({
year: calculateFiscalYear(new Date()),
type: "00000000-0000-0000-0000-000000000000",
page: 1,
pageSize: 10,
keyword: "",
});
const leaveTypeOptions = ref<DataLeaveType[]>([]);
const rows = ref<DataLeaveBeginning[]>([]);
const total = ref<number>(0);
const maxPage = ref<number>(0);
const columns = ref<QTableColumn[]>([
{
name: "fullName",
@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() {
await http
.post(config.API.leaveBeginning + `/list`, {
...formFilter,
...params.value,
keyword: formFilter.keyword.trim(),
})
.then((res) => {
const data = res.data.result;
rows.value = data.data;
total.value = data.total;
maxPage.value = Math.ceil(data.total / formFilter.pageSize);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rows.value = result.data;
})
.catch((err) => {
messageError($q, err);
@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) {
try {
showLoader();
if (newSearch) {
formFilter.page = 1;
pagination.value.page = 1;
}
await fetchDataLeaveBeginning();
} finally {
@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) {
await http
.delete(config.API.leaveBeginning + `/${id}`)
.then(async () => {
formFilter.page = await updateCurrentPage(
formFilter.page,
maxPage.value,
rows.value.length
);
await checkAndUpdatePage(rows.value.length);
await fetchDataLeaveBeginning();
success($q, "ลบข้อมูลสำเร็จ");
})
@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) {
});
}
/**
* ฟังก์ชันอัปเดทรายการแถวต่อหน้า
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: DataPagination) {
formFilter.pageSize = newPagination.rowsPerPage;
}
/** Hook*/
watch(
() => formFilter.pageSize,
() => {
onSearchData(true);
}
);
onMounted(async () => {
try {
showLoader();
await fetchLeaveType();
await fetchDataLeaveBeginning();
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
@ -242,67 +218,69 @@ onMounted(async () => {
<q-card flat bordered class="q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="row q-col-gutter-y-sm">
<div class="row q-col-gutter-sm items-center">
<datepicker
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="onSearchData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="Number(formFilter.year) + 543"
:label="`${'ปีงบประมาณ'}`"
bg-color="white"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
emit-value
map-options
outlined
dense
option-value="id"
option-label="name"
label="ประเภทการลา"
use-input
v-model="formFilter.type"
hide-selected
fill-input
:options="leaveTypeOptions"
@update:model-value="onSearchData()"
@filter="(inputValue:string,
doneFn:Function) => filterOptionFn(inputValue,doneFn)"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
<div>
<div class="row q-col-gutter-sm">
<div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-4 col-md-4">
<datepicker
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="onSearchData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="Number(formFilter.year) + 543"
:label="`${'ปีงบประมาณ'}`"
bg-color="white"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-7 col-md-4">
<q-select
emit-value
map-options
outlined
dense
option-value="id"
option-label="name"
label="ประเภทการลา"
use-input
v-model="formFilter.type"
hide-selected
fill-input
:options="leaveTypeOptions"
@update:model-value="onSearchData()"
@filter="(inputValue:string,
doneFn:Function) => filterOptionFn(inputValue,doneFn)"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-xs-12 col-sm-1 col-md-4 items-center">
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
dense
@ -318,39 +296,42 @@ onMounted(async () => {
</div>
<q-space />
<div class="row q-col-gutter-sm">
<q-input
standout
dense
v-model="formFilter.keyword"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="onSearchData()"
>
<template v-slot:append>
<q-icon name="search" />
</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"
style="min-width: 140px"
/>
<div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-7 col-md-8">
<q-input
standout
dense
v-model="formFilter.keyword"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="onSearchData()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-5 col-md-4">
<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"
style="min-width: 140px"
/>
</div>
</div>
</div>
</div>
<div class="col-12">
<d-table
<p-table
ref="table"
:columns="columns"
:rows="rows"
@ -360,7 +341,8 @@ onMounted(async () => {
dense
class="custom-header-table"
:visible-columns="visibleColumns"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -409,21 +391,7 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total.toLocaleString() }} รายการ
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="onSearchData(false)"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</div>
</q-card>

271
src/modules/11_discipline/components/1_Complaint/MainPage.vue
View file

@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { usePagination } from "@/composables/usePagination";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
@ -25,51 +26,51 @@ const mixin = useCounterMixin();
const complainstStore = useComplainstDataStore();
const { fetchComplainst } = complainstStore;
const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
const { pagination, params, onRequest } = usePagination("", getList);
const filterRef = ref<HTMLInputElement | null>(null);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const toptitle = ref<number>(0);
const statusFilter = ref<string>("NEW");
const option = ref<DataOption[]>(complainstStore.statusOptions);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/** ดึงข้อมูล เรื่องร้องเรียน */
async function getList(page?: number) {
async function getList() {
const body = {
page: page ? page : pagination.value.page,
pageSize: pagination.value.rowsPerPage,
...params.value,
keyword: filterKeyword.value.trim(),
status: statusFilter.value,
...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
...(store.formComplaint.dateReceived?.[0] && {
dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
}),
...(store.formComplaint.dateReceived?.[1] && {
dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
}),
...(store.formComplaint.respondentType && {
respondentType: store.formComplaint.respondentType,
}),
...(store.formComplaint.offenseDetails && {
offenseDetails: store.formComplaint.offenseDetails,
}),
...(store.formComplaint.levelConsideration && {
levelConsideration: store.formComplaint.levelConsideration,
}),
...(store.formComplaint.dateConsideration?.[0] && {
dateConsiderationStart: convertDateToAPI(
store.formComplaint.dateConsideration[0]
),
}),
...(store.formComplaint.dateConsideration?.[1] && {
dateConsiderationEnd: convertDateToAPI(
store.formComplaint.dateConsideration[1]
),
}),
};
showLoader();
await http
.post(config.API.complaintList(), body)
//
.then(async (res) => {
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
toptitle.value = res.data.result.total;
const data = res.data.result.data;
await fetchComplainst(data);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await fetchComplainst(result.data);
})
.catch((e) => {
messageError($q, e);
@ -102,13 +103,6 @@ function getSearch() {
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
await getList();
@ -119,99 +113,120 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการเรื่องร้องเรียน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
hide-selected
fill-input
:options="option"
@update:model-value="getSearch()"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = complainstStore.statusOptions),
(statusFilter = 'ALL'),
getSearch()
"
class="cursor-pointer"
/>
</template>
</q-select>
<q-card flat bordered>
<div class="row q-col-gutter-sm q-pa-md">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
<div class="row q-col-gutter-sm items-center">
<div class="col-xs-11">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
hide-selected
fill-input
:options="option"
@update:model-value="getSearch()"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = complainstStore.statusOptions),
(statusFilter = 'ALL'),
getSearch()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
id="addComplaints"
for="addComplaints"
dense
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
>
<div
class="col-xs justify-center row"
v-if="checkPermission($route)?.attrIsCreate"
>
<q-btn
id="addComplaints"
for="addComplaints"
dense
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
>
</div>
</div>
</div>
<q-space />
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<div class="col justify-center row">
<DialogSearchAdvanced :get-data="() => getSearch()" />
</div>
<div class="col-7">
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหาเรื่องร้องเรียน"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-4">
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="complainstStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="complainstStore.columns"
option-value="name"
/>
</div>
</div>
</div>
</div>
</div>
<q-space />
<DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหาเรื่องร้องเรียน"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="complainstStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="complainstStore.columns"
option-value="name"
style="min-width: 140px"
/>
</div>
<div class="col-12">
<TableComplaint
:filter-table="filterTable"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:toptitle="toptitle"
:get-list="getList"
/>
<div class="col-12">
<TableComplaint
v-model:pagination="pagination"
:on-request="onRequest"
/>
</div>
</div>
</q-card>
</template>

60
src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
View file

@ -1,28 +1,24 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import type { QTableProps } from "quasar";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useRouter } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import type { PropsTable } from "@/interface/index/PropsTable";
const router = useRouter();
const complainstStore = useComplainstDataStore();
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const pagination = defineModel<PropsTable.Pagination>("pagination", {
required: true,
});
const emit = defineEmits(["update:pagination"]);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
getList: Function,
filterTable: {
type: String,
default: "",
},
toptitle: {
type: Number,
onRequest: {
type: Function,
require: true,
},
});
@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
"dateConsideration",
"status",
]);
/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -124,12 +118,6 @@ function OpenEdit(id: string) {
router.push(`/discipline/complaints/${id}`);
}
/** ส่งค่ากลับไปหน้าหลัก */
function updateProp(newPagination: any, page: number) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, page);
}
/**
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
* @param id ไอดีระบุ
@ -138,11 +126,6 @@ function onDetail(id: string) {
router.push(`/discipline/complaints-detail/${id}`);
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
onMounted(() => {
complainstStore.columns = columns.value;
@ -151,7 +134,7 @@ onMounted(() => {
</script>
<template>
<d-table
<p-table
id="table"
ref="table"
:columns="columns"
@ -164,7 +147,8 @@ onMounted(() => {
class="custom-header-table"
:visible-columns="complainstStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="props.onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -207,11 +191,7 @@ onMounted(() => {
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
@ -222,21 +202,7 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="props.getList?.()"
></q-pagination>
</template>
</d-table>
</p-table>
</template>
<style scoped></style>

385
src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
View file

@ -9,39 +9,30 @@ import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { checkPermission } from "@/utils/permissions";
import { usePagination } from "@/composables/usePagination";
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
const $q = useQuasar(); //ใช้ noti quasar
const store = useDisciplineMainStore();
const mixin = useCounterMixin();
const dataInvestigate = useInvestigateFactStore();
const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
const { pagination, params, onRequest } = usePagination("", getList);
const option = ref<any[]>(dataInvestigate.statusOptions);
const attrs = ref<any>(useAttrs());
const option = ref<DataOption[]>(dataInvestigate.statusOptions);
/** ค้นหาข้อมูลในตาราง */
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const statusFilter = ref<string>("NEW");
const toptitle = ref<number>(0);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const attrs = ref<any>(useAttrs());
/** ดึงข้อมูลบสวน */
async function getList(page?: number) {
async function getList() {
const body = {
page: page ? page : pagination.value.page,
pageSize: pagination.value.rowsPerPage,
...params.value,
keyword: filterKeyword.value.trim(),
status: statusFilter.value,
...(store.formInvestigateFacts.respondentType && {
@ -82,14 +73,9 @@ async function getList(page?: number) {
await http
.post(config.API.investigateMain(), body)
.then(async (res) => {
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
toptitle.value = res.data.result.total;
const data = res.data.result.data;
await dataInvestigate.fecthList(data);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await dataInvestigate.fecthList(result.data);
})
.catch((e) => {
messageError($q, e);
@ -104,7 +90,7 @@ async function getList(page?: number) {
* @param id ไอดีเฉพาะ รายบุคคล
*/
async function editPage(id: string) {
dataInvestigate.tabMenu = await "investigatefacts";
dataInvestigate.tabMenu = "investigatefacts";
router.push(`/discipline/investigatefacts/${id}`);
}
/**
@ -112,7 +98,7 @@ async function editPage(id: string) {
* @param id ไอดีเฉพาะ รายบุคคล
*/
async function detailPage(id: string) {
dataInvestigate.tabMenu = await "investigatefacts";
dataInvestigate.tabMenu = "investigatefacts";
router.push(`/discipline-detail/investigatefacts/${id}`);
}
@ -129,27 +115,12 @@ function filterOptionFn(val: string, update: Function) {
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSerach() {
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSerach();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(async () => {
onMounted(() => {
getList();
});
</script>
@ -158,173 +129,175 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการสืบสวนข้อเท็จจริง
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="option"
@update:model-value="getSerach()"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataInvestigate.statusOptions),
(statusFilter = 'ALL'),
getSerach()
"
class="cursor-pointer"
/>
</template>
</q-select>
<q-space />
<DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหาเรื่องร้องเรียน"
@keydown.enter.prevent="getSerach()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
for="#select"
v-model="dataInvestigate.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataInvestigate.columns"
option-value="name"
style="min-width: 140px"
/>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
row-key="interrogated"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="dataInvestigate.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
<q-card flat bordered>
<div class="row col-12 q-col-gutter-sm q-pa-md">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="option"
@update:model-value="getSearch()"
use-input
@filter="filterOptionFn"
>
<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">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
dense
round
color="info"
icon="mdi-eye"
@click="detailPage(props.row.id)"
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataInvestigate.statusOptions),
(statusFilter = 'ALL'),
getSearch()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<div class="col justify-center row">
<DialogSearchAdvanced :get-data="() => getSearch()" />
</div>
<div class="col-7">
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหาเรื่องร้องเรียน"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-4">
<q-select
for="#select"
v-model="dataInvestigate.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataInvestigate.columns"
option-value="name"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p-table
ref="table"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
row-key="interrogated"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="dataInvestigate.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@request="onRequest"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsGet &&
checkPermission($route)?.attrIsUpdate
"
flat
dense
round
color="edit"
icon="edit"
<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">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
dense
round
color="info"
icon="mdi-eye"
@click="detailPage(props.row.id)"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsGet &&
checkPermission($route)?.attrIsUpdate
"
flat
dense
round
color="edit"
icon="edit"
@click="editPage(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
<q-td
auto-width
style="font-size: 14px; width: 10%"
@click="editPage(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td
auto-width
style="font-size: 14px; width: 10%"
@click="editPage(props.row.id)"
>
{{ props.row.active }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getList()"
></q-pagination>
</template>
</d-table>
{{ props.row.active }}
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
</q-card>
</template>

88
src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
View file

@ -2,25 +2,16 @@
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import { usePagination } from "@/composables/usePagination";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const $q = useQuasar(); //ใช้ noti quasar
const router = useRouter();
const mixin = useCounterMixin();
@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
const dataInvestigateDis = useInvestigateDisStore();
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
const { fetchList } = dataInvestigateDis;
const { pagination, params, onRequest } = usePagination(
"",
fetchListDisciplinary
);
const filter = ref<string>(""); //search data table
const status = ref<string>("NEW");
async function fetchListDisciplinary(page?: number) {
async function fetchListDisciplinary() {
const body = {
page: page ? page : pagination.value.page,
pageSize: pagination.value.rowsPerPage,
...params.value,
keyword: filter.value.trim(),
status: status.value,
...(store.formInvestigateDisciplinary.respondentType && {
@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
await http
.post(config.API.disciplineDisciplinary(), body)
.then(async (res) => {
const data = res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
await fetchList(data);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await fetchList(result.data);
})
.catch((e) => {
messageError($q, e);
@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
getSearch();
}
function getSearch(page?: number) {
function getSearch() {
pagination.value.page = 1;
fetchListDisciplinary(page);
fetchListDisciplinary();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
@ -136,29 +121,26 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการสอบสวนความผิดทางวินัย
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
style="max-height: 80vh"
:rows="dataInvestigateDis.rows"
:columns="dataInvestigateDis.columns"
:visible-columns="dataInvestigateDis.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="dataInvestigateDis.visibleColumns"
:nornmalData="true"
:paging="true"
:titleText="''"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:fetchListDisciplinary="fetchListDisciplinary"
v-model:open-edit="openEdit"
:open-detail="openDetail"
:filterStatus="filterStatus"
:get-search="getSearch"
>
</Table>
</div>
<q-card flat bordered>
<Table
style="max-height: 80vh"
:rows="dataInvestigateDis.rows"
:columns="dataInvestigateDis.columns"
:visible-columns="dataInvestigateDis.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="dataInvestigateDis.visibleColumns"
:nornmalData="true"
:paging="true"
:titleText="''"
v-model:pagination="pagination"
:fetchListDisciplinary="fetchListDisciplinary"
v-model:open-edit="openEdit"
:open-detail="openDetail"
:filterStatus="filterStatus"
:get-search="getSearch"
:on-request="onRequest"
>
</Table>
</q-card>
</template>

394
src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
View file

@ -1,23 +1,22 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import { ref, useAttrs } from "vue";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { checkPermission } from "@/utils/permissions";
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
import type { PropsTable } from "@/interface/index/PropsTable";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
const pagination = defineModel<PropsTable.Pagination>("pagination", {
required: true,
});
const dataInvestigateDis = useInvestigateDisStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const currentPage = ref<number>(1);
const statusFilter = ref<string>("NEW");
const option = ref<any[]>(dataInvestigateDis.statusOptions);
const option = ref<DataOption[]>(dataInvestigateDis.statusOptions);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
count: Number,
@ -77,6 +76,10 @@ const props = defineProps({
type: Number,
require: true,
},
onRequest: {
type: Function,
require: true,
},
});
const emit = defineEmits([
@ -94,18 +97,6 @@ function updateVisible(value: []) {
emit("update:inputvisible", value);
}
function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
props.fetchListDisciplinary?.();
}
function updateProp(newPagination: any, page: number) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, page);
}
function dataUpdate() {
props.filterStatus(statusFilter.value);
}
@ -126,215 +117,166 @@ function filterOptionFn(val: string, update: Function) {
);
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm items-center">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
hide-selected
fill-input
map-options
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataInvestigateDis.statusOptions),
(statusFilter = 'ALL'),
dataUpdate()
"
class="cursor-pointer"
/>
</template>
</q-select>
<q-space />
<!-- ค้นหาข้อความใน table -->
<DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
</template>
<q-tooltip
transition-show="scale"
transition-hide="scale"
class="text-body2"
>หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
<div class="row q-col-gutter-sm q-pa-md">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
hide-selected
fill-input
map-options
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataInvestigateDis.statusOptions),
(statusFilter = 'ALL'),
dataUpdate()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<!-- ค้นหาข้อความใน table -->
<div class="col justify-center row">
<DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
</div>
<div class="col-7">
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
</template>
<q-tooltip
transition-show="scale"
transition-hide="scale"
class="text-body2"
>หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
>
</q-input>
</div>
<div class="col-4">
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p-table
ref="table"
flat
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@request="props.onRequest"
>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 140px"
>
</q-select>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" />
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
dense
round
icon="mdi-eye"
color="info"
@click="openDetail(props.row.id)"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
flat
dense
round
icon="edit"
color="edit"
@click="openEdit(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'title' || col.name === 'disciplinaryCaseFault'
? 'table_ellipsis'
: ''
"
>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
<d-table
ref="table"
flat
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="props.fetchListDisciplinary?.()"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" />
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
dense
round
icon="mdi-eye"
color="info"
@click="openDetail(props.row.id)"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
flat
dense
round
icon="edit"
color="edit"
@click="openEdit(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</template>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-table2 {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style lang="scss"></style>

78
src/modules/11_discipline/components/4_Result/MainPage.vue
View file

@ -8,7 +8,7 @@ import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import { usePagination } from "@/composables/usePagination";
import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
@ -19,23 +19,15 @@ const storeResult = useDisciplineResultStore();
const store = useDisciplineMainStore();
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
const { fetchList } = storeResult;
const { pagination, params, onRequest } = usePagination("", fetchListResult);
const filter = ref<string>("");
const status = ref<string>("DONE");
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
async function fetchListResult(page?: number) {
async function fetchListResult() {
const body = {
page: page ? page : pagination.value.page,
pageSize: pagination.value.rowsPerPage,
...params.value,
keyword: filter.value.trim(),
status: status.value,
...(store.formResult.respondentType && {
@ -77,12 +69,9 @@ async function fetchListResult(page?: number) {
await http
.post(config.API.listResult(), body)
.then(async (res) => {
const data = res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
await fetchList(data);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await fetchList(result.data);
})
.catch((err) => {
messageError($q, err);
@ -112,18 +101,11 @@ function filterStatus(statusReturn: string) {
getSearch();
}
function getSearch(page?: number) {
function getSearch() {
pagination.value.page = 1;
fetchListResult(page);
fetchListResult();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
@ -136,29 +118,25 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการสรุปผลการพิจารณาความผิดทางวินัย
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
style="max-height: 80vh"
:rows="storeResult.rows"
:columns="storeResult.columns"
:visible-columns="storeResult.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="storeResult.visibleColumns"
:nornmalData="true"
:paging="true"
:titleText="''"
:fetchListResult="fetchListResult"
:get-search="getSearch"
v-model:open-edit="openEdit"
v-model:open-detail="openDetail"
:filterStatus="filterStatus"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
>
</Table>
</div>
<q-card flat bordered>
<Table
style="max-height: 80vh"
:rows="storeResult.rows"
:columns="storeResult.columns"
:visible-columns="storeResult.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="storeResult.visibleColumns"
:nornmalData="true"
:paging="true"
:titleText="''"
:fetchListResult="fetchListResult"
:get-search="getSearch"
v-model:open-edit="openEdit"
v-model:open-detail="openDetail"
:filterStatus="filterStatus"
v-model:pagination="pagination"
:on-request="onRequest"
/>
</q-card>
</template>

395
src/modules/11_discipline/components/4_Result/Table.vue
View file

@ -1,22 +1,23 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import { ref, useAttrs } from "vue";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { checkPermission } from "@/utils/permissions";
import type { PropsTable } from "@/interface/index/PropsTable";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const pagination = defineModel<PropsTable.Pagination>("pagination", {
required: true,
});
const store = useDisciplineResultStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
const statusFilter = ref<string>("DONE");
const option = ref<any[]>(store.statusOptions);
const option = ref<DataOption[]>(store.statusOptions);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -57,9 +58,12 @@ const props = defineProps({
type: Boolean,
defualt: false,
},
onRequest: {
type: Function,
required: true,
},
});
const filter = ref<string>("");
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
@ -71,17 +75,6 @@ function updateVisible(value: []) {
emit("update:inputvisible", value);
}
function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
props.getSearch?.();
}
function updatePaging(p: number, pS: number, key: string) {
emit("update:queryString", p, pS, key);
}
function dataUpdate() {
props.filterStatus(statusFilter.value);
}
@ -101,219 +94,171 @@ function filterFn() {
function filterOptionFn(val: string, update: Function) {
update(() => {
option.value = store.statusOptions.filter(
(e: any) => e.name.search(val) !== -1
(e: DataOption) => e.name.search(val) !== -1
);
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm items-center">
<div class="q-gutter-sm" v-if="nornmalData == true"></div>
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
"
class="cursor-pointer"
/>
</template>
</q-select>
<q-space />
<DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@keydown.enter.prevent="filterFn"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
>
<template v-slot:append>
<q-icon name="search" />
</template>
<q-tooltip
anchor="bottom left"
transition-show="scale"
transition-hide="scale"
class="text-body2"
<div class="row q-col-gutter-sm q-pa-md">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="statusFilter !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = store.statusOptions),
(statusFilter = 'ALL'),
dataUpdate()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<div class="col justify-center row">
<DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
</div>
<div class="col-7">
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@keydown.enter.prevent="filterFn"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</template>
<q-tooltip
anchor="bottom left"
transition-show="scale"
transition-hide="scale"
class="text-body2"
>
หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
>
</q-input>
</div>
<div class="col-4">
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p-table
ref="table"
flat
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@request="props.onRequest"
>
หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
>
</q-input>
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 140px"
>
</q-select>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" />
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
flat
round
dense
icon="mdi-eye"
color="info"
@click="openDetail(props.row.id)"
v-if="checkPermission($route)?.attrIsGet"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
flat
round
dense
icon="edit"
color="edit"
@click="openEdit(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'title' || col.name === 'disciplinaryCaseFault'
? 'table_ellipsis'
: ''
"
>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
<d-table
ref="table"
flat
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" />
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
flat
round
dense
icon="mdi-eye"
color="info"
@click="openDetail(props.row.id)"
v-if="checkPermission($route)?.attrIsGet"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
flat
round
dense
icon="edit"
color="edit"
@click="openEdit(props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title ?? "-" }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="props.fetchListResult?.()"
></q-pagination>
</template>
</d-table>
</template>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-table2 {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
}
.q-table td:nth-of-type(2) {
z-index: 3 !important;
}
.q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) {
position: sticky;
left: 0;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style lang="scss"></style>

51
src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
View file

@ -19,32 +19,31 @@ const router = useRouter();
* @param id ระบุ บุคคล
*/
function onSubmit(formData: FormDataPost) {
dialogConfirm($q, () => addData(formData));
}
function addData(formData: FormDataPost) {
showLoader();
http
.post(config.API.director(), {
personalId: formData.personalId ?? "",
prefix: formData.prefix,
firstName: formData.firstname,
lastName: formData.lastname,
position: formData.position,
email: formData.email,
phone: formData.phone,
qualification: formData.qualification,
rootDnaId: formData.rootDnaId,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
router.push(`/discipline/director`);
});
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.director(), {
personalId: formData.personalId ?? "",
prefix: formData.prefix,
firstName: formData.firstname,
lastName: formData.lastname,
position: formData.position,
email: formData.email,
phone: formData.phone,
qualification: formData.qualification,
rootDnaId: formData.rootDnaId,
})
.then(async () => {
await success($q, "บันทึกข้อมูลสำเร็จ");
await router.push(`/discipline/director`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
</script>
<template>

149
src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
View file

@ -7,6 +7,7 @@ import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { usePagination } from "@/composables/usePagination";
import type {
FormData,
@ -18,15 +19,6 @@ import type {
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const route = useRoute();
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
@ -36,6 +28,7 @@ const search = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const { pagination, params, onRequest } = usePagination("", getSearch);
/** รับ props มาจาก page หลัก */
const props = defineProps({
@ -56,16 +49,8 @@ const typeOps = ref<typeOp[]>([
]);
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const emit = defineEmits(["formDataReturn"]);
/**
* ข้อมูลเลขประจำตัวประชาชน
*/
//
const idCard = ref<string>("");
const idCardRef = ref<any>(null);
/**
* ข้อมูลทั้งก้อน form
*/
/** ข้อมูลทั้งก้อน form*/
const formData = reactive<FormData>({
personalId: "",
prefix: "",
@ -78,9 +63,7 @@ const formData = reactive<FormData>({
rootDnaId: "",
});
/**
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
*/
/** ตรวจสอบข้อมูลก่อนส่งไปยัง api*/
const prefixRef = ref<object | null>(null);
const firstnameRef = ref<object | null>(null);
const lastnameRef = ref<object | null>(null);
@ -183,11 +166,8 @@ function updateSelect() {
/** ค้าหาข้อมูล */
async function searchInput() {
searchRef.value.validate();
if (!searchRef.value.hasError) {
pagination.value.page = 1;
await getSearch();
}
pagination.value.page = 1;
await getSearch();
}
/** ดึงข้อมูล */
@ -195,44 +175,40 @@ async function getSearch() {
showLoader();
const body = {
fieldName: type.value,
keyword: search.value,
keyword: search.value ? search.value.trim() : "",
system: (route.meta?.Key as string) || undefined,
};
await http
.post(
config.API.orgSearchPersonal() +
`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
body
)
.post(config.API.orgSearchPersonal(), body, { params: params.value })
.then((res) => {
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
const data = res.data.result.data;
const list = data.map((e: ResponsePreson) => ({
personId: e.id,
idcard: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
name: `${e.prefix ? e.prefix : ""}${e.firstName ? e.firstName : ""} ${
e.lastName ? e.lastName : ""
}`,
posNo: e.posNo ?? "-",
position: e.position ?? "-",
positionLevel: e.positionLevel ?? "-",
salary: e.salaries ?? "-",
organization: e.organization ?? "-",
phone: e.phone ?? "-",
email: e.email ?? "-",
rootDnaId: e.rootDnaId ?? "-",
}));
rows.value = list;
const result = res.data.result;
pagination.value.rowsNumber = result.total;
if (result.data.length > 0) {
rows.value = result.data.map((e: ResponsePreson) => ({
personId: e.id,
idcard: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
name: `${e.prefix ? e.prefix : ""}${
e.firstName ? e.firstName : ""
} ${e.lastName ? e.lastName : ""}`,
posNo: e.posNo ?? "-",
position: e.position ?? "-",
positionLevel: e.positionLevel ?? "-",
salary: e.salaries ?? "-",
organization: e.organization ?? "-",
phone: e.phone ?? "-",
email: e.email ?? "-",
rootDnaId: e.rootDnaId ?? "-",
}));
} else {
rows.value = [];
}
})
.catch((err) => {
messageError($q, err);
rows.value = [];
})
.finally(() => {
hideLoader();
@ -267,31 +243,23 @@ function updatemodalPersonal(modal: boolean) {
modalPersonal.value = modal;
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
/**
* เช็คข้อมูลจาก props
* เมื่อมีข้อมูล
* เก็บข้อมูลลง formData
*/
watch(props.data, async () => {
formData.prefix = props.data.prefix;
formData.firstname = props.data.firstname;
formData.lastname = props.data.lastname;
formData.position = props.data.position;
formData.phone = props.data.phone;
formData.email = props.data.email;
formData.qualification = props.data.qualification;
});
watch(
() => pagination.value.rowsPerPage,
() => props.data,
async () => {
await getSearch();
}
formData.prefix = props.data.prefix;
formData.firstname = props.data.firstname;
formData.lastname = props.data.lastname;
formData.position = props.data.position;
formData.phone = props.data.phone;
formData.email = props.data.email;
formData.qualification = props.data.qualification;
},
{ deep: true }
);
</script>
@ -343,7 +311,7 @@ watch(
</div>
<div class="col-12 q-pt-sm">
<d-table
<p-table
ref="table"
:columns="columnsRespondent"
:rows="rows"
@ -352,26 +320,11 @@ watch(
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumnsRespondent"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getSearch"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
@ -393,11 +346,7 @@ watch(
@click="returnDetail(props.row)"
>
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'info'">
<q-btn
@ -413,12 +362,12 @@ watch(
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</p-table>
</div>
</div>

433
src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { usePagination } from "@/composables/usePagination";
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
@ -21,6 +22,7 @@ const mainStore = useDisciplineMainStore();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
const { pagination, params, onRequest } = usePagination("", getList);
const titleInvestigate = ref<string>("");
const personalId = ref<string>("");
@ -36,33 +38,23 @@ const dataPopUp = ref<DirectorRowsResponse>();
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
async function getList() {
showLoader();
await http
.get(
config.API.directorList(
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value.trim(),
mainStore.pathDirector(route.name as string)
)
config.API.directorListMain +
`${mainStore.pathDirector(route.name as string)}`,
{
params: {
...params.value,
keyword: filterKeyword.value.trim(),
},
}
)
.then((res) => {
const data = res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
dataStore.fetchData(data);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
dataStore.fetchData(result.data);
})
.catch((e) => {
messageError($q, e);
@ -77,38 +69,21 @@ async function getList() {
* @param id ไอดีของข้อมูล
*/
function clickDelete(id: string) {
dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
}
/**
* ลบข้อมูล
* @param id type
*/
async function deleteData(id: string) {
showLoader();
await http
.delete(config.API.directorbyId(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getList();
});
}
function resetFilter() {
filterKeyword.value = "";
if (filterRef.value) {
filterRef.value.focus();
getSearch();
}
}
function filterFn() {
getSearch();
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.directorbyId(id))
.then(async () => {
await getList();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
});
}
function openDetail(data: DirectorRowsResponse, typeChange: string) {
@ -132,210 +107,188 @@ function onEdit(id: string, check: boolean) {
isEdit.value = check;
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(() => {
getList();
// get ข้อมูลแล้วโยนใส่ store
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการชื่อกรรมการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
@click="$router.push(`/discipline/director/add`)"
flat
dense
round
color="primary"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
</q-btn>
<q-card flat bordered>
<div class="col-12 q-pa-md q-col-gutter-sm">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
<div class="row items-center">
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
@click="$router.push(`/discipline/director/add`)"
flat
dense
round
color="primary"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<div class="col-7">
<q-input
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="getSearch"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-5">
<q-select
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataStore.columns"
option-value="name"
/>
</div>
</div>
</div>
</div>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataStore.columns"
option-value="name"
style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="tb-list"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getList"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="info"
@click="onEdit(props.row.id, false)"
icon="mdi-eye"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
dense
flat
round
color="edit"
@click="onEdit(props.row.id, true)"
icon="edit"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div
v-else-if="
col.name == 'totalInvestigate' &&
props.row.totalInvestigate > 0
"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'investigate')
: ''
"
>
{{ props.row.totalInvestigate }}
</div>
<div
v-else-if="
col.name == 'totalDisciplinary' &&
props.row.totalDisciplinary > 0
"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'disciplinary')
: ''
"
>
{{ props.row.totalDisciplinary }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<div class="col-12">
<p-table
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="tb-list"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="info"
@click="onEdit(props.row.id, false)"
icon="mdi-eye"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
dense
flat
round
color="edit"
@click="onEdit(props.row.id, true)"
icon="edit"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="
col.name == 'totalInvestigate' &&
props.row.totalInvestigate > 0
"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'investigate')
: ''
"
>
{{ props.row.totalInvestigate }}
</div>
<div
v-else-if="
col.name == 'totalDisciplinary' &&
props.row.totalDisciplinary > 0
"
:class="
checkPermission($route)?.attrIsGet
? 'text-blue cursor-pointer'
: ''
"
@click="
checkPermission($route)?.attrIsGet
? openDetail(props.row, 'disciplinary')
: ''
"
>
{{ props.row.totalDisciplinary }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
</q-card>

515
src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
@ -7,33 +7,28 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
import type {
dataType,
DataOption,
} from "@/modules/11_discipline/interface/response/suspend";
import type { QTableProps } from "quasar";
import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
import { usePagination } from "@/composables/usePagination";
import {
checkPermission,
checkPermissionList,
checkPermissionCreate,
} from "@/utils/permissions";
import type { QTableProps } from "quasar";
import type {
dataType,
DataOption,
} from "@/modules/11_discipline/interface/response/suspend";
import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
/** use */
const dataStore = useDisciplineSuspendStore();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const {
messageError,
showLoader,
hideLoader,
success,
date2Thai,
convertDateToAPI,
} = mixin;
const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
useCounterMixin();
const { pagination, params, onRequest } = usePagination("", getList);
const date = ref<any>(null);
const employeeClass = ref<string>("");
@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
"no",
"profileType",
"title",
"name",
"firstName",
"position",
"positionType",
"positionLevel",
"organization",
"dateTotal",
"startDateSuspend",
"descriptionSuspend",
"status",
]);
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const rows2 = ref<dataType[]>([]);
@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
name: "profileType",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
sortable: false,
field: "profileType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "name",
name: "firstName",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "dateTotal",
name: "startDateSuspend",
align: "left",
label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
sortable: true,
@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const openModal = () => (modal.value = true);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
function resetFilter() {
filterKeyword.value = "";
filterRef.value.focus();
getSearch();
function openModal() {
modal.value = true;
}
/** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@ -201,28 +182,22 @@ function openModalOrder() {
/** ดึงข้อมูลหน้าหลัก */
async function getList() {
showLoader();
const params: Record<string, any> = {};
if (date.value && date.value.length === 2) {
params.startDate = convertDateToAPI(date.value[0]);
params.endDate = convertDateToAPI(date.value[1]);
}
const paramsNew = {
...params.value,
keyword: filterKeyword.value.trim(),
profileType: employeeClass.value,
...(date.value?.length === 2 && {
startDate: convertDateToAPI(date.value[0]),
endDate: convertDateToAPI(date.value[1]),
}),
};
await http
.get(
config.API.suspendMain(
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value.trim(),
employeeClass.value
),
{ params }
)
.get(config.API.suspendMain, { params: paramsNew })
.then(async (res) => {
const data = await res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
await dataStore.getData(data);
const result = await res.data.result;
pagination.value.rowsNumber = result.total;
await dataStore.getData(result.data);
})
.catch((e) => {
messageError($q, e);
@ -232,27 +207,11 @@ async function getList() {
});
}
function filterFn() {
getSearch();
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
function convertType(val: string) {
const data = val?.toLocaleUpperCase();
switch (data) {
@ -275,221 +234,215 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายชื่อผู้ถูกพักราชการ
</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<q-card flat bordered>
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<div class="row col-12 q-col-gutter-sm items-center">
<div>
<q-select
v-model="employeeClass"
outlined
dense
options-dense
emit-value
map-options
:options="employeeClassOption"
option-value="id"
option-label="name"
label="ประเภทตำแหน่ง"
style="min-width: 200px"
@update:model-value="getList"
/>
</div>
<div>
<datepicker
v-model="date"
:locale="'th'"
autoApply
range
:enableTimePicker="false"
@update:model-value="getList()"
style="min-width: 280px"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="bg-white"
dense
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
<div class="row col-12 q-col-gutter-sm items-center">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<q-select
v-model="employeeClass"
outlined
:label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
:model-value="
date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
"
dense
options-dense
emit-value
map-options
:options="employeeClassOption"
option-value="id"
option-label="name"
label="ประเภทตำแหน่ง"
@update:model-value="getList"
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<datepicker
v-model="date"
:locale="'th'"
autoApply
range
:enableTimePicker="false"
@update:model-value="getList()"
>
<template v-slot:prepend>
<q-icon
size="18px"
name="event"
class="cursor-pointer"
color="primary"
></q-icon>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="bg-white"
dense
outlined
:label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
:model-value="
date
? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
: ''
"
>
<template v-slot:prepend>
<q-icon
size="18px"
name="event"
class="cursor-pointer"
color="primary"
></q-icon>
</template>
<template v-slot:append>
<q-icon
v-if="date !== null"
name="clear"
class="cursor-pointer"
@click.prevent.stop="(date = null), getList()"
/>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-1 row justify-center">
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermissionList(['COMMAND']) &&
checkPermissionCreate('COMMAND')
"
@click="openModalOrder"
flat
round
dense
color="primary"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
</q-btn>
</div>
</div>
</div>
<q-space />
<div class="col-xs-12 col-sm-4 col-md-5 col-lg-4">
<div class="row q-col-gutter-sm items-center">
<div class="col-7">
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="getSearch"
>
<template v-slot:append>
<q-icon
v-if="date !== null"
name="clear"
class="cursor-pointer"
@click.prevent.stop="(date = null), getList()"
/>
<q-icon name="search" />
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-5">
<q-select
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
/>
</div>
</div>
</div>
<div>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermissionList(['COMMAND']) &&
checkPermissionCreate('COMMAND')
"
@click="openModalOrder"
flat
round
dense
color="primary"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
for="#search"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="id"
:visible-columns="dataStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getList"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<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">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
@click="
router.push(`/discipline-suspend-detail/${props.row.id}`)
"
flat
dense
round
color="info"
icon="mdi-eye"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
@click="router.push(`/discipline-suspend/${props.row.id}`)"
flat
dense
round
color="edit"
icon="edit"
>
<q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name === 'name'" class="table_ellipsis">
{{ props.row.prefix ? props.row.prefix : ""
}}{{ props.row.firstName ? props.row.firstName : "" }}
{{ props.row.lastName ? props.row.lastName : "" }}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title ? props.row.title : "-" }}
</div>
<div v-else-if="col.name === 'profileType'">
{{
props.row.profileType
? convertType(props.row.profileType.toUpperCase())
: "-"
}}
</div>
<div
v-else-if="col.name === 'organization'"
class="text-html"
style="width: 250px"
>
{{ props.row.organization ? props.row.organization : "-" }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<div class="col-12">
<p-table
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="id"
:visible-columns="dataStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
@click="
router.push(`/discipline-suspend-detail/${props.row.id}`)
"
flat
dense
round
color="info"
icon="mdi-eye"
>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
@click="router.push(`/discipline-suspend/${props.row.id}`)"
flat
dense
round
color="edit"
icon="edit"
>
<q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'firstName'"
class="table_ellipsis"
>
{{ props.row.prefix ? props.row.prefix : ""
}}{{ props.row.firstName ? props.row.firstName : "" }}
{{ props.row.lastName ? props.row.lastName : "" }}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title ? props.row.title : "-" }}
</div>
<div v-else-if="col.name === 'profileType'">
{{
props.row.profileType
? convertType(props.row.profileType.toUpperCase())
: "-"
}}
</div>
<div
v-else-if="col.name === 'organization'"
class="text-html"
style="width: 250px"
>
{{ props.row.organization ? props.row.organization : "-" }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
</q-card>

627
src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { ref, onMounted, reactive } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
import { checkPermission } from "@/utils/permissions";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";
import type { QTableProps } from "quasar";
import type { RowList } from "@/modules/11_discipline/interface/response/appealComplain";
@ -20,35 +21,26 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { showLoader, messageError, hideLoader, dialogConfirm } = mixin;
const { showLoader, messageError, hideLoader } = mixin;
const mainStore = useDisciplineMainStore();
const modalStatusEdit = ref<boolean>(false);
/** stoer */
const dataStore = useAppealComplainStore();
const { pagination, params, onRequest } = usePagination("", getData);
const { fetchAppealComplain } = dataStore;
/** store */
const modalStatusEdit = ref<boolean>(false);
const type = ref<DataOption[]>([
{ id: "ALL", name: "ทั้งหมด" },
...dataStore.typeOptions,
]);
const filterKeyword = ref<string>("");
const dataRow = ref<RowList[]>([]);
const formData = reactive<any>({
type: "ALL",
status: "NEW",
year: calculateFiscalYear(new Date()).toString(),
});
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"profileType",
@ -63,8 +55,6 @@ const visibleColumns = ref<string[]>([
"lastUpdatedAt",
"status",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -79,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
name: "profileType",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
sortable: false,
field: "profileType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -88,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
name: "type",
align: "left",
label: "ประเภท",
sortable: true,
sortable: false,
field: "type",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -110,8 +100,6 @@ const columns = ref<QTableProps["columns"]>([
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "citizenId",
@ -121,8 +109,6 @@ const columns = ref<QTableProps["columns"]>([
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "year",
@ -132,8 +118,6 @@ const columns = ref<QTableProps["columns"]>([
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "caseType",
@ -143,8 +127,6 @@ const columns = ref<QTableProps["columns"]>([
field: "caseType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "caseNumber",
@ -154,8 +136,6 @@ const columns = ref<QTableProps["columns"]>([
field: "caseNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "description",
@ -165,8 +145,6 @@ const columns = ref<QTableProps["columns"]>([
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdatedAt",
@ -176,8 +154,6 @@ const columns = ref<QTableProps["columns"]>([
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
@ -207,11 +183,6 @@ function editPage(id: string) {
router.push(`/discipline-appealcomplain/${id}`);
}
/** ดึงข้อมูลเมื่อ กด enter */
function filterFn() {
getSearch();
}
/** ปิด pop up */
function close() {
modalStatusEdit.value = false;
@ -221,22 +192,19 @@ function close() {
async function getData() {
showLoader();
await http
.get(
config.API.appealMainList(
formData.status,
formData.type,
formData.year,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value
)
)
.then((res) => {
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
fetchAppealComplain(res.data.result.data);
.get(config.API.appealMainList, {
params: {
...params.value,
status: formData.status,
type: formData.type,
year: formData.year,
keyword: filterKeyword.value,
},
})
.then(async (res) => {
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await fetchAppealComplain(result.data);
})
.catch((e) => {
messageError($q, e);
@ -257,13 +225,8 @@ function yearAll() {
getSearch();
}
/** ฟังชั่น เคลียฟิลเตอร์ */
function resetFilter() {
filterKeyword.value = "";
getSearch();
}
const option = ref<any[]>(dataStore.statusOptions);
const optionType = ref<any[]>(type.value);
const option = ref<DataOption[]>(dataStore.statusOptions);
const optionType = ref<DataOption[]>(type.value);
/**
* function ค้นหาข้อมูลใน option
* @param val คำค้นหา
@ -272,7 +235,7 @@ const optionType = ref<any[]>(type.value);
function filterOptionFn(val: string, update: Function) {
update(() => {
option.value = dataStore.statusOptions.filter(
(e: any) => e.name.search(val) !== -1
(e: DataOption) => e.name.search(val) !== -1
);
});
}
@ -284,27 +247,17 @@ function filterOptionFn(val: string, update: Function) {
*/
function filterOptionFnType(val: string, update: Function) {
update(() => {
optionType.value = type.value.filter((e: any) => e.name.search(val) !== -1);
optionType.value = type.value.filter(
(e: DataOption) => e.name.search(val) !== -1
);
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getData();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
getData();
@ -317,283 +270,269 @@ onMounted(async () => {
<div class="toptitle text-dark col-12 row items-center">
รายการอุทธรณ์/ร้องทุกข์
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-mb-sm q-col-gutter-sm">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
id="addComplaints"
for="addComplaints"
dense
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
>
</div>
<q-space />
<q-input
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataStore.columns"
option-value="name"
style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 row q-mb-sm">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<div class="col-2">
<datepicker
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="dataUpdate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="
formData.year === 0
? 'ทั้งหมด'
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formData.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-2">
<q-select
v-model="formData.type"
label="ประเภท"
dense
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="optionType"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFnType"
>
<template v-if="formData.type !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(optionType = type), (formData.type = 'ALL'), dataUpdate()
"
class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-3">
<q-select
v-model="formData.status"
label="สถานะ"
dense
outlined
emit-value
hide-selected
fill-input
map-options
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
<template v-if="formData.status !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataStore.statusOptions),
(formData.status = 'ALL'),
dataUpdate()
"
class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-card flat bordered>
<div class="col-12 q-pa-md q-col-gutter-sm">
<div class="row q-col-gutter-sm">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
id="addComplaints"
for="addComplaints"
dense
flat
round
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
>
</div>
</q-card>
</div>
<q-space />
<q-input
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="getSearch"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<div class="col-12">
<d-table
ref="table"
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getData"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
id="addComplaints"
for="addComplaints"
<q-select
id="visibleColumns"
for="visibleColumns"
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataStore.columns"
option-value="name"
style="min-width: 140px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 row">
<q-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
<datepicker
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="dataUpdate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="
formData.year === 0
? 'ทั้งหมด'
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formData.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
<q-select
v-model="formData.type"
label="ประเภท"
dense
flat
round
color="info"
icon="mdi-eye"
@click="redirectToPageDetail(props.row.id)"
><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
outlined
emit-value
map-options
hide-selected
fill-input
option-label="name"
option-value="id"
:options="optionType"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFnType"
>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
id="addComplaints"
for="addComplaints"
flat
<template v-if="formData.type !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(optionType = type), (formData.type = 'ALL'), dataUpdate()
"
class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
<q-select
v-model="formData.status"
label="สถานะ"
dense
round
color="edit"
icon="edit"
@click="editPage(props.row.id)"
><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
outlined
emit-value
hide-selected
fill-input
map-options
option-label="name"
option-value="id"
:options="option"
@update:model-value="dataUpdate"
use-input
@filter="filterOptionFn"
>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
</div>
<div v-else-if="col.name === 'profileType'">
{{
props.row.profileType
? mainStore.convertType(props.row.profileType)
: "-"
}}
</div>
<div
v-else-if="col.name === 'description'"
class="table_ellipsis"
<template v-if="formData.status !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(option = dataStore.statusOptions),
(formData.status = 'ALL'),
dataUpdate()
"
class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</q-card>
</div>
<div class="col-12">
<p-table
ref="table"
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
{{ props.row.description ? props.row.description : "-" }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
id="addComplaints"
for="addComplaints"
dense
flat
round
color="info"
icon="mdi-eye"
@click="redirectToPageDetail(props.row.id)"
><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
>
<q-btn
v-if="
checkPermission($route)?.attrIsUpdate &&
checkPermission($route)?.attrIsGet
"
id="addComplaints"
for="addComplaints"
flat
dense
round
color="edit"
icon="edit"
@click="editPage(props.row.id)"
><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name === 'title'" class="table_ellipsis">
{{ props.row.title }}
</div>
<div v-else-if="col.name === 'profileType'">
{{
props.row.profileType
? mainStore.convertType(props.row.profileType)
: "-"
}}
</div>
<div
v-else-if="col.name === 'description'"
class="table_ellipsis"
>
{{ props.row.description ? props.row.description : "-" }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
</p-table>
</div>
</div>
</q-card>

2
src/modules/11_discipline/components/9_DisciplineReport/Main.vue
View file

@ -508,7 +508,7 @@ onMounted(async () => {
dense
borderless
:model-value="Number(year) + 543"
:label="`${'ปีพ.ศ.'}`"
:label="`${'ปี พ.ศ.'}`"
>
<template v-slot:prepend>
<q-icon

29
src/modules/11_discipline/components/DialogSearchAdvanced.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, watchEffect } from "vue";
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
@ -12,7 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
const route = useRoute();
const mixin = useCounterMixin();
const { dateThaiRange, convertDateToAPI } = mixin;
const { dateThaiRange } = mixin;
const store = useDisciplineMainStore();
const complainstStore = useComplainstDataStore();
const investigateStore = useInvestigateFactStore();
@ -34,7 +34,7 @@ function onClose() {
}
function fnSearch() {
props.getData?.(1);
props.getData?.();
onClose();
}
@ -75,18 +75,17 @@ watchEffect(() => {
});
</script>
<template>
<div>
<q-btn
size="12px"
flat
round
color="blue"
icon="mdi-filter-variant"
@click="onSearch"
>
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
</q-btn>
</div>
<q-btn
size="12px"
flat
round
color="blue"
icon="mdi-filter-variant"
@click="onSearch"
>
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
</q-btn>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 400px">
<q-form greedy @submit.prevent @validation-success="fnSearch">

2
src/modules/11_discipline/store/AppealComplainStore.ts
View file

@ -63,7 +63,7 @@ export const useAppealComplainStore = defineStore("AppealComplainStore", () => {
* จัดเรียงข้อมูล
* @param data ข้อมูลที่รับมาจาก API
*/
function fetchAppealComplain(data: MainList[]) {
async function fetchAppealComplain(data: MainList[]) {
let dataList: RowList[] = data.map((e: MainList) => ({
id: e.id,
profileId: e.profileId,

4
src/modules/11_discipline/store/DirectorStore.ts
View file

@ -14,7 +14,7 @@ export const useDisciplineDirectorDataStore = defineStore(
const rows = ref<DirectorRowsResponse[]>([]);
const visibleColumns = ref<string[]>([
"no",
"fullName",
"firstName",
"position",
"email",
"phone",
@ -34,7 +34,7 @@ export const useDisciplineDirectorDataStore = defineStore(
style: "font-size: 14px",
},
{
name: "fullName",
name: "firstName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,

16
src/modules/11_discipline/store/InvestigateDisStore.ts
View file

@ -4,7 +4,7 @@ import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { Persons } from "@/modules/11_discipline/interface/request/Disciplinary";
import type { Persons } from "@/modules/11_discipline/interface/request/disciplinary";
import type {
investigateDisDataRowType,
DataOption,
@ -81,7 +81,7 @@ export const useInvestigateDisStore = defineStore(
"offenseDetails",
"disciplinaryFaultLevel",
"disciplinaryCaseFault",
"disciplinaryDate",
"disciplinaryDateStart",
"dateReceived",
"status",
]);
@ -113,8 +113,6 @@ export const useInvestigateDisStore = defineStore(
field: "respondentType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "offenseDetails",
@ -124,8 +122,6 @@ export const useInvestigateDisStore = defineStore(
field: "offenseDetails",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryFaultLevel",
@ -135,8 +131,6 @@ export const useInvestigateDisStore = defineStore(
field: "disciplinaryFaultLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryCaseFault",
@ -146,11 +140,9 @@ export const useInvestigateDisStore = defineStore(
field: "disciplinaryCaseFault",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryDate",
name: "disciplinaryDateStart",
align: "left",
label: "วันที่สอบสวน",
sortable: true,
@ -171,7 +163,7 @@ export const useInvestigateDisStore = defineStore(
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

16
src/modules/11_discipline/store/InvestigateFactStore.ts
View file

@ -67,7 +67,7 @@ export const useInvestigateFactStore = defineStore(
"respondentType",
"offenseDetails",
"investigationDetail",
"dateInvestigate",
"investigationDateStart",
"investigationStatusResult",
"dateReceived",
"status",
@ -101,8 +101,6 @@ export const useInvestigateFactStore = defineStore(
field: "respondentType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "offenseDetails",
@ -112,8 +110,6 @@ export const useInvestigateFactStore = defineStore(
field: "offenseDetails",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "investigationDetail",
@ -123,19 +119,15 @@ export const useInvestigateFactStore = defineStore(
field: "investigationDetail",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateInvestigate",
name: "investigationDateStart",
align: "left",
label: "วันที่สืบสวน",
sortable: true,
field: "dateInvestigate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "investigationStatusResult",
@ -145,8 +137,6 @@ export const useInvestigateFactStore = defineStore(
field: "investigationStatusResult",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateReceived",
@ -156,8 +146,6 @@ export const useInvestigateFactStore = defineStore(
field: "dateReceived",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",

14
src/modules/11_discipline/store/ResultStore.ts
View file

@ -42,7 +42,7 @@ export const useDisciplineResultStore = defineStore(
"offenseDetails",
"disciplinaryFaultLevel",
"disciplinaryCaseFault",
"disciplinaryDate",
"disciplinaryDateStart",
"resultDisciplineType",
"resultTitleType",
"resultOc",
@ -77,8 +77,6 @@ export const useDisciplineResultStore = defineStore(
field: "respondentType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "offenseDetails",
@ -88,8 +86,6 @@ export const useDisciplineResultStore = defineStore(
field: "offenseDetails",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryFaultLevel",
@ -99,8 +95,6 @@ export const useDisciplineResultStore = defineStore(
field: "disciplinaryFaultLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryCaseFault",
@ -110,11 +104,9 @@ export const useDisciplineResultStore = defineStore(
field: "disciplinaryCaseFault",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "disciplinaryDate",
name: "disciplinaryDateStart",
align: "left",
label: "วันที่สอบสวน",
sortable: true,
@ -162,7 +154,7 @@ export const useDisciplineResultStore = defineStore(
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",

6
src/modules/15_development/components/Record.vue
View file

@ -340,7 +340,11 @@ onMounted(() => {
</q-icon>
</div>
<div v-else-if="col.name === 'org'" class="table_ellipsis">
<div
v-else-if="col.name === 'org'"
class="text-html"
style="min-width: 200px"
>
{{ col.value ? col.value : "-" }}
</div>
<div v-else>

8
src/modules/18_command/components/DialogCreateCommand.vue
View file

@ -438,8 +438,8 @@ watch(
:model-value="
commandYear == null ? null : commandYear + 543
"
:label="`${'พ.ศ.'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
label="ปี พ.ศ."
:rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
>
<template v-slot:prepend>
<q-icon
@ -478,8 +478,8 @@ watch(
outlined
hide-bottom-space
:model-value="commandYear == null ? null : commandYear + 543"
:label="`${'พ.ศ.'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
label="ปี พ.ศ."
:rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
>
<template v-slot:prepend>
<q-icon

4
src/modules/18_command/components/DialogCreateCommandORG.vue
View file

@ -431,8 +431,8 @@ watch(modal, async () => {
:model-value="
commandYear == null ? null : commandYear + 543
"
:label="`${'พ.ศ.'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
label="ปี พ.ศ."
:rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
>
<template v-slot:prepend>
<q-icon

4
src/modules/18_command/components/Main/DialogFormCommand.vue
View file

@ -182,8 +182,8 @@ watch(modal, () => {
:model-value="
commandYear == null ? null : commandYear + 543
"
:label="`${'พ.ศ.'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
label="ปี พ.ศ."
:rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
>
<template v-slot:prepend>
<q-icon

2
src/modules/18_command/components/Step/1_Detail.vue
View file

@ -210,7 +210,7 @@ onMounted(async () => {
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
label="ปี พ.ศ."
>
<template v-slot:prepend>
<q-icon

5
src/modules/18_command/views/lists.vue
View file

@ -6,7 +6,6 @@ import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
import { usePagination } from "@/composables/usePagination";
import { calculateFiscalYear } from "@/utils/function";
import http from "@/plugins/http";
import config from "@/app.config";
@ -37,7 +36,7 @@ const tabsManu = ref<ItemTabs[]>([
]);
//ฟอร์มช้อมูลการค้นหา
const queryParams = reactive<FormQuery>({
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
year: new Date().getFullYear(), //พ.ศ.
keyword: "", //คำค้นหา
commandTypeId: "",
});
@ -126,7 +125,7 @@ onMounted(async () => {
:model-value="
queryParams.year == null ? null : queryParams.year + 543
"
:label="`${'ปีงบประมาณ'}`"
label="ปี พ.ศ."
>
<template v-slot:prepend>
<q-icon