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

Merge pull request #1468 from Frappet/SortDiscipline

Browse source 
Sort discipline
This commit is contained in:
Warunee Tamkoo 2025-10-09 16:46:39 +07:00 • committed by GitHub
commit 5b22d85601
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 1550 additions and 1997 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}`,

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>

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",