GitHub
commit
5b22d85601
19 changed files with 1550 additions and 1997 deletions
|
|
@ -7,6 +7,7 @@ const appeal = `${env.API_URI}/discipline/complaint_appeal`;
|
||||||
const disciplineReport = `${env.API_URI}/discipline/report`;
|
const disciplineReport = `${env.API_URI}/discipline/report`;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
directorListMain: `${disciplineMain}/director/`,
|
||||||
directorList: (
|
directorList: (
|
||||||
page: number,
|
page: number,
|
||||||
pageSize: number,
|
pageSize: number,
|
||||||
|
|
@ -82,13 +83,8 @@ export default {
|
||||||
`${discipline}/director/${disciplineId}/${id}`,
|
`${discipline}/director/${disciplineId}/${id}`,
|
||||||
|
|
||||||
/** ผู้ถูกพักราชการ */
|
/** ผู้ถูกพักราชการ */
|
||||||
suspendMain: (
|
suspendMain: suspend,
|
||||||
page: number,
|
|
||||||
pageSize: number,
|
|
||||||
keyword: string,
|
|
||||||
type: string
|
|
||||||
) =>
|
|
||||||
`${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
|
|
||||||
suspendById: (id: string) => `${suspend}/${id}`,
|
suspendById: (id: string) => `${suspend}/${id}`,
|
||||||
|
|
||||||
suspendReport: () => `${suspend}/report`,
|
suspendReport: () => `${suspend}/report`,
|
||||||
|
|
@ -101,15 +97,7 @@ export default {
|
||||||
deleteFileResult: (id: string, docId: string) =>
|
deleteFileResult: (id: string, docId: string) =>
|
||||||
`${disciplineMain}/result/file/${id}/${docId}`,
|
`${disciplineMain}/result/file/${id}/${docId}`,
|
||||||
|
|
||||||
appealMainList: (
|
appealMainList: `${appeal}/admin?`,
|
||||||
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}`,
|
|
||||||
appealAdd: () => `${appeal}`,
|
appealAdd: () => `${appeal}`,
|
||||||
appealByID: (id: string) => `${appeal}/${id}`,
|
appealByID: (id: string) => `${appeal}/${id}`,
|
||||||
appealByIDGet: (id: string) => `${appeal}/admin/${id}`,
|
appealByIDGet: (id: string) => `${appeal}/admin/${id}`,
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
|
|
||||||
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||||
|
|
||||||
|
|
@ -25,51 +26,51 @@ const mixin = useCounterMixin();
|
||||||
const complainstStore = useComplainstDataStore();
|
const complainstStore = useComplainstDataStore();
|
||||||
const { fetchComplainst } = complainstStore;
|
const { fetchComplainst } = complainstStore;
|
||||||
const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
|
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 filterKeyword = ref<string>("");
|
||||||
|
|
||||||
const toptitle = ref<number>(0);
|
|
||||||
const statusFilter = ref<string>("NEW");
|
const statusFilter = ref<string>("NEW");
|
||||||
const option = ref<DataOption[]>(complainstStore.statusOptions);
|
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 = {
|
const body = {
|
||||||
page: page ? page : pagination.value.page,
|
...params.value,
|
||||||
pageSize: pagination.value.rowsPerPage,
|
|
||||||
keyword: filterKeyword.value.trim(),
|
keyword: filterKeyword.value.trim(),
|
||||||
status: statusFilter.value,
|
status: statusFilter.value,
|
||||||
...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
|
...(store.formComplaint.dateReceived?.[0] && {
|
||||||
...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
|
dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
|
||||||
...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
|
}),
|
||||||
...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
|
...(store.formComplaint.dateReceived?.[1] && {
|
||||||
...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
|
dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
|
||||||
...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
|
}),
|
||||||
...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[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();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.post(config.API.complaintList(), body)
|
.post(config.API.complaintList(), body)
|
||||||
//
|
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
totalList.value = Math.ceil(
|
const result = res.data.result;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
pagination.value.rowsNumber = result.total;
|
||||||
);
|
await fetchComplainst(result.data);
|
||||||
total.value = res.data.result.total;
|
|
||||||
toptitle.value = res.data.result.total;
|
|
||||||
const data = res.data.result.data;
|
|
||||||
await fetchComplainst(data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -102,13 +103,6 @@ function getSearch() {
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await getList();
|
await getList();
|
||||||
|
|
@ -119,99 +113,120 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการเรื่องร้องเรียน
|
รายการเรื่องร้องเรียน
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
<q-card flat bordered>
|
||||||
<div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
|
<div class="row q-col-gutter-sm q-pa-md">
|
||||||
<q-select
|
<div class="col-12">
|
||||||
v-model="statusFilter"
|
<div class="row q-col-gutter-sm">
|
||||||
label="สถานะ"
|
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||||
dense
|
<div class="row q-col-gutter-sm items-center">
|
||||||
outlined
|
<div class="col-xs-11">
|
||||||
emit-value
|
<q-select
|
||||||
map-options
|
v-model="statusFilter"
|
||||||
option-label="name"
|
label="สถานะ"
|
||||||
option-value="id"
|
dense
|
||||||
hide-selected
|
outlined
|
||||||
fill-input
|
emit-value
|
||||||
:options="option"
|
map-options
|
||||||
@update:model-value="getSearch()"
|
option-label="name"
|
||||||
use-input
|
option-value="id"
|
||||||
@filter="filterOptionFn"
|
hide-selected
|
||||||
>
|
fill-input
|
||||||
<template v-slot:no-option>
|
:options="option"
|
||||||
<q-item>
|
@update:model-value="getSearch()"
|
||||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
use-input
|
||||||
</q-item>
|
@filter="filterOptionFn"
|
||||||
</template>
|
>
|
||||||
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
<template v-slot:no-option>
|
||||||
<q-icon
|
<q-item>
|
||||||
name="cancel"
|
<q-item-section class="text-grey">
|
||||||
@click.stop.prevent="
|
ไม่มีข้อมูล
|
||||||
(option = complainstStore.statusOptions),
|
</q-item-section>
|
||||||
(statusFilter = 'ALL'),
|
</q-item>
|
||||||
getSearch()
|
</template>
|
||||||
"
|
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||||
class="cursor-pointer"
|
<q-icon
|
||||||
/>
|
name="cancel"
|
||||||
</template>
|
@click.stop.prevent="
|
||||||
</q-select>
|
(option = complainstStore.statusOptions),
|
||||||
|
(statusFilter = 'ALL'),
|
||||||
|
getSearch()
|
||||||
|
"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div
|
||||||
<q-btn
|
class="col-xs justify-center row"
|
||||||
v-if="checkPermission($route)?.attrIsCreate"
|
v-if="checkPermission($route)?.attrIsCreate"
|
||||||
id="addComplaints"
|
>
|
||||||
for="addComplaints"
|
<q-btn
|
||||||
dense
|
id="addComplaints"
|
||||||
flat
|
for="addComplaints"
|
||||||
round
|
dense
|
||||||
color="primary"
|
flat
|
||||||
icon="mdi-plus"
|
round
|
||||||
@click="redirectToPageadd()"
|
color="primary"
|
||||||
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
|
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>
|
</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
|
<div class="col-12">
|
||||||
id="visibleColumns"
|
<TableComplaint
|
||||||
for="visibleColumns"
|
v-model:pagination="pagination"
|
||||||
v-model="complainstStore.visibleColumns"
|
:on-request="onRequest"
|
||||||
multiple
|
/>
|
||||||
outlined
|
</div>
|
||||||
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>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,24 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import type { PropsTable } from "@/interface/index/PropsTable";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const complainstStore = useComplainstDataStore();
|
const complainstStore = useComplainstDataStore();
|
||||||
|
|
||||||
const total = defineModel<number>("total", { required: true });
|
const pagination = defineModel<PropsTable.Pagination>("pagination", {
|
||||||
const totalList = defineModel<number>("totalList", { required: true });
|
required: true,
|
||||||
const pagination = defineModel<any>("pagination", { required: true });
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:pagination"]);
|
const emit = defineEmits(["update:pagination"]);
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
getList: Function,
|
onRequest: {
|
||||||
filterTable: {
|
type: Function,
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
toptitle: {
|
|
||||||
type: Number,
|
|
||||||
require: true,
|
require: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
|
||||||
"dateConsideration",
|
"dateConsideration",
|
||||||
"status",
|
"status",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
/** หัวตาราง */
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
|
|
@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
name: "status",
|
name: "status",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "status",
|
field: "status",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
@ -124,12 +118,6 @@ function OpenEdit(id: string) {
|
||||||
router.push(`/discipline/complaints/${id}`);
|
router.push(`/discipline/complaints/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ส่งค่ากลับไปหน้าหลัก */
|
|
||||||
function updateProp(newPagination: any, page: number) {
|
|
||||||
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
|
||||||
emit("update:pagination", newPagination, page);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
|
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
|
||||||
* @param id ไอดีระบุ
|
* @param id ไอดีระบุ
|
||||||
|
|
@ -138,11 +126,6 @@ function onDetail(id: string) {
|
||||||
router.push(`/discipline/complaints-detail/${id}`);
|
router.push(`/discipline/complaints-detail/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePagination(newPagination: any) {
|
|
||||||
pagination.value.page = 1;
|
|
||||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
|
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
complainstStore.columns = columns.value;
|
complainstStore.columns = columns.value;
|
||||||
|
|
@ -151,7 +134,7 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<d-table
|
<p-table
|
||||||
id="table"
|
id="table"
|
||||||
ref="table"
|
ref="table"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
|
|
@ -164,7 +147,8 @@ onMounted(() => {
|
||||||
class="custom-header-table"
|
class="custom-header-table"
|
||||||
:visible-columns="complainstStore.visibleColumns"
|
:visible-columns="complainstStore.visibleColumns"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
@update:pagination="updatePagination"
|
v-model:pagination="pagination"
|
||||||
|
@request="props.onRequest"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
|
|
@ -207,11 +191,7 @@ onMounted(() => {
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{
|
{{ props.rowIndex + 1 }}
|
||||||
(pagination.page - 1) * pagination.rowsPerPage +
|
|
||||||
props.rowIndex +
|
|
||||||
1
|
|
||||||
}}
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
||||||
{{ props.row.title }}
|
{{ props.row.title }}
|
||||||
|
|
@ -222,21 +202,7 @@ onMounted(() => {
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:pagination="scope">
|
</p-table>
|
||||||
ทั้งหมด {{ 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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -9,39 +9,30 @@ import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
|
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
|
||||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
|
|
||||||
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
|
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 $q = useQuasar(); //ใช้ noti quasar
|
||||||
const store = useDisciplineMainStore();
|
const store = useDisciplineMainStore();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const dataInvestigate = useInvestigateFactStore();
|
const dataInvestigate = useInvestigateFactStore();
|
||||||
const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
|
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 filterKeyword = ref<string>("");
|
||||||
const filterRef = ref<HTMLInputElement | null>(null);
|
|
||||||
const statusFilter = ref<string>("NEW");
|
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 = {
|
const body = {
|
||||||
page: page ? page : pagination.value.page,
|
...params.value,
|
||||||
pageSize: pagination.value.rowsPerPage,
|
|
||||||
keyword: filterKeyword.value.trim(),
|
keyword: filterKeyword.value.trim(),
|
||||||
status: statusFilter.value,
|
status: statusFilter.value,
|
||||||
...(store.formInvestigateFacts.respondentType && {
|
...(store.formInvestigateFacts.respondentType && {
|
||||||
|
|
@ -82,14 +73,9 @@ async function getList(page?: number) {
|
||||||
await http
|
await http
|
||||||
.post(config.API.investigateMain(), body)
|
.post(config.API.investigateMain(), body)
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
totalList.value = Math.ceil(
|
const result = res.data.result;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
pagination.value.rowsNumber = result.total;
|
||||||
);
|
await dataInvestigate.fecthList(result.data);
|
||||||
total.value = res.data.result.total;
|
|
||||||
toptitle.value = res.data.result.total;
|
|
||||||
|
|
||||||
const data = res.data.result.data;
|
|
||||||
await dataInvestigate.fecthList(data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -104,7 +90,7 @@ async function getList(page?: number) {
|
||||||
* @param id ไอดีเฉพาะ รายบุคคล
|
* @param id ไอดีเฉพาะ รายบุคคล
|
||||||
*/
|
*/
|
||||||
async function editPage(id: string) {
|
async function editPage(id: string) {
|
||||||
dataInvestigate.tabMenu = await "investigatefacts";
|
dataInvestigate.tabMenu = "investigatefacts";
|
||||||
router.push(`/discipline/investigatefacts/${id}`);
|
router.push(`/discipline/investigatefacts/${id}`);
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
|
@ -112,7 +98,7 @@ async function editPage(id: string) {
|
||||||
* @param id ไอดีเฉพาะ รายบุคคล
|
* @param id ไอดีเฉพาะ รายบุคคล
|
||||||
*/
|
*/
|
||||||
async function detailPage(id: string) {
|
async function detailPage(id: string) {
|
||||||
dataInvestigate.tabMenu = await "investigatefacts";
|
dataInvestigate.tabMenu = "investigatefacts";
|
||||||
router.push(`/discipline-detail/investigatefacts/${id}`);
|
router.push(`/discipline-detail/investigatefacts/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,27 +115,12 @@ function filterOptionFn(val: string, update: Function) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePagination(newPagination: any) {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
|
||||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSerach() {
|
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
onMounted(() => {
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSerach();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า
|
|
||||||
* ส่งข้อมูลจำลองไปยัง store
|
|
||||||
*/
|
|
||||||
onMounted(async () => {
|
|
||||||
getList();
|
getList();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -158,173 +129,175 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการสืบสวนข้อเท็จจริง
|
รายการสืบสวนข้อเท็จจริง
|
||||||
</div>
|
</div>
|
||||||
<q-card 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 />
|
<q-card flat bordered>
|
||||||
<DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
|
<div class="row col-12 q-col-gutter-sm q-pa-md">
|
||||||
<q-input
|
<div class="col-12">
|
||||||
for="#search"
|
<div class="row q-col-gutter-sm">
|
||||||
standout
|
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||||
dense
|
<q-select
|
||||||
v-model="filterKeyword"
|
v-model="statusFilter"
|
||||||
ref="filterRef"
|
label="สถานะ"
|
||||||
outlined
|
dense
|
||||||
placeholder="ค้นหาเรื่องร้องเรียน"
|
outlined
|
||||||
@keydown.enter.prevent="getSerach()"
|
emit-value
|
||||||
>
|
map-options
|
||||||
<template v-slot:append>
|
hide-selected
|
||||||
<q-icon name="search" />
|
fill-input
|
||||||
</template>
|
option-label="name"
|
||||||
</q-input>
|
option-value="id"
|
||||||
|
:options="option"
|
||||||
<q-select
|
@update:model-value="getSearch()"
|
||||||
for="#select"
|
use-input
|
||||||
v-model="dataInvestigate.visibleColumns"
|
@filter="filterOptionFn"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<template v-slot:no-option>
|
||||||
</q-th>
|
<q-item>
|
||||||
<q-th auto-width />
|
<q-item-section class="text-grey">
|
||||||
</q-tr>
|
ไม่มีข้อมูล
|
||||||
</template>
|
</q-item-section>
|
||||||
<template v-slot:body="props">
|
</q-item>
|
||||||
<q-tr :props="props">
|
</template>
|
||||||
<q-td auto-width>
|
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||||
<q-btn
|
<q-icon
|
||||||
v-if="checkPermission($route)?.attrIsGet"
|
name="cancel"
|
||||||
flat
|
@click.stop.prevent="
|
||||||
dense
|
(option = dataInvestigate.statusOptions),
|
||||||
round
|
(statusFilter = 'ALL'),
|
||||||
color="info"
|
getSearch()
|
||||||
icon="mdi-eye"
|
"
|
||||||
@click="detailPage(props.row.id)"
|
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>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</q-btn>
|
</q-th>
|
||||||
<q-btn
|
<q-th auto-width />
|
||||||
v-if="
|
</q-tr>
|
||||||
checkPermission($route)?.attrIsGet &&
|
</template>
|
||||||
checkPermission($route)?.attrIsUpdate
|
<template v-slot:body="props">
|
||||||
"
|
<q-tr :props="props">
|
||||||
flat
|
<q-td auto-width>
|
||||||
dense
|
<q-btn
|
||||||
round
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
color="edit"
|
flat
|
||||||
icon="edit"
|
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)"
|
@click="editPage(props.row.id)"
|
||||||
>
|
>
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
{{ props.row.active }}
|
||||||
</q-btn>
|
</q-td>
|
||||||
</q-td>
|
</q-tr>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
</template>
|
||||||
<div v-if="col.name == 'no'">
|
</p-table>
|
||||||
{{
|
</div>
|
||||||
(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>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -2,25 +2,16 @@
|
||||||
import { onMounted, ref, watch } from "vue";
|
import { onMounted, ref, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
|
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
|
||||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
|
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 $q = useQuasar(); //ใช้ noti quasar
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
|
|
@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
|
||||||
const dataInvestigateDis = useInvestigateDisStore();
|
const dataInvestigateDis = useInvestigateDisStore();
|
||||||
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
|
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
|
||||||
const { fetchList } = dataInvestigateDis;
|
const { fetchList } = dataInvestigateDis;
|
||||||
|
const { pagination, params, onRequest } = usePagination(
|
||||||
|
"",
|
||||||
|
fetchListDisciplinary
|
||||||
|
);
|
||||||
|
|
||||||
const filter = ref<string>(""); //search data table
|
const filter = ref<string>(""); //search data table
|
||||||
|
|
||||||
const status = ref<string>("NEW");
|
const status = ref<string>("NEW");
|
||||||
async function fetchListDisciplinary(page?: number) {
|
|
||||||
|
async function fetchListDisciplinary() {
|
||||||
const body = {
|
const body = {
|
||||||
page: page ? page : pagination.value.page,
|
...params.value,
|
||||||
pageSize: pagination.value.rowsPerPage,
|
|
||||||
keyword: filter.value.trim(),
|
keyword: filter.value.trim(),
|
||||||
status: status.value,
|
status: status.value,
|
||||||
...(store.formInvestigateDisciplinary.respondentType && {
|
...(store.formInvestigateDisciplinary.respondentType && {
|
||||||
|
|
@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
|
||||||
await http
|
await http
|
||||||
.post(config.API.disciplineDisciplinary(), body)
|
.post(config.API.disciplineDisciplinary(), body)
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
const data = res.data.result.data;
|
const result = res.data.result;
|
||||||
totalList.value = Math.ceil(
|
pagination.value.rowsNumber = result.total;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
await fetchList(result.data);
|
||||||
);
|
|
||||||
total.value = res.data.result.total;
|
|
||||||
await fetchList(data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
|
||||||
getSearch();
|
getSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSearch(page?: number) {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
fetchListDisciplinary(page);
|
fetchListDisciplinary();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
* ส่งข้อมูลจำลองไปยัง store
|
* ส่งข้อมูลจำลองไปยัง store
|
||||||
*/
|
*/
|
||||||
|
|
@ -136,29 +121,26 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการสอบสวนความผิดทางวินัย
|
รายการสอบสวนความผิดทางวินัย
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
<q-card flat bordered>
|
||||||
<div>
|
<Table
|
||||||
<Table
|
style="max-height: 80vh"
|
||||||
style="max-height: 80vh"
|
:rows="dataInvestigateDis.rows"
|
||||||
:rows="dataInvestigateDis.rows"
|
:columns="dataInvestigateDis.columns"
|
||||||
:columns="dataInvestigateDis.columns"
|
:visible-columns="dataInvestigateDis.visibleColumns"
|
||||||
:visible-columns="dataInvestigateDis.visibleColumns"
|
v-model:inputfilter="filter"
|
||||||
v-model:inputfilter="filter"
|
v-model:inputvisible="dataInvestigateDis.visibleColumns"
|
||||||
v-model:inputvisible="dataInvestigateDis.visibleColumns"
|
:nornmalData="true"
|
||||||
:nornmalData="true"
|
:paging="true"
|
||||||
:paging="true"
|
:titleText="''"
|
||||||
:titleText="''"
|
v-model:pagination="pagination"
|
||||||
v-model:pagination="pagination"
|
:fetchListDisciplinary="fetchListDisciplinary"
|
||||||
v-model:total="total"
|
v-model:open-edit="openEdit"
|
||||||
v-model:total-list="totalList"
|
:open-detail="openDetail"
|
||||||
:fetchListDisciplinary="fetchListDisciplinary"
|
:filterStatus="filterStatus"
|
||||||
v-model:open-edit="openEdit"
|
:get-search="getSearch"
|
||||||
:open-detail="openDetail"
|
:on-request="onRequest"
|
||||||
:filterStatus="filterStatus"
|
>
|
||||||
:get-search="getSearch"
|
</Table>
|
||||||
>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,22 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, useAttrs, watch } from "vue";
|
import { ref, useAttrs } from "vue";
|
||||||
|
|
||||||
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
|
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
|
||||||
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
|
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
|
||||||
|
|
||||||
const total = defineModel<number>("total", { required: true });
|
import type { PropsTable } from "@/interface/index/PropsTable";
|
||||||
const totalList = defineModel<number>("totalList", { required: true });
|
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||||
const pagination = defineModel<any>("pagination", { required: true });
|
|
||||||
|
const pagination = defineModel<PropsTable.Pagination>("pagination", {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
|
||||||
const dataInvestigateDis = useInvestigateDisStore();
|
const dataInvestigateDis = useInvestigateDisStore();
|
||||||
const table = ref<any>(null);
|
|
||||||
const filterRef = ref<any>(null);
|
|
||||||
const attrs = ref<any>(useAttrs());
|
const attrs = ref<any>(useAttrs());
|
||||||
const paging = ref<boolean>(true);
|
|
||||||
const currentPage = ref<number>(1);
|
|
||||||
const statusFilter = ref<string>("NEW");
|
const statusFilter = ref<string>("NEW");
|
||||||
const option = ref<any[]>(dataInvestigateDis.statusOptions);
|
const option = ref<DataOption[]>(dataInvestigateDis.statusOptions);
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
count: Number,
|
count: Number,
|
||||||
|
|
@ -77,6 +76,10 @@ const props = defineProps({
|
||||||
type: Number,
|
type: Number,
|
||||||
require: true,
|
require: true,
|
||||||
},
|
},
|
||||||
|
onRequest: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
|
|
@ -94,18 +97,6 @@ function updateVisible(value: []) {
|
||||||
emit("update:inputvisible", 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() {
|
function dataUpdate() {
|
||||||
props.filterStatus(statusFilter.value);
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="q-pb-sm row q-col-gutter-sm items-center">
|
<div class="row q-col-gutter-sm q-pa-md">
|
||||||
<q-select
|
<div class="col-12">
|
||||||
v-model="statusFilter"
|
<div class="row q-col-gutter-sm">
|
||||||
label="สถานะ"
|
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||||
dense
|
<q-select
|
||||||
outlined
|
v-model="statusFilter"
|
||||||
emit-value
|
label="สถานะ"
|
||||||
hide-selected
|
dense
|
||||||
fill-input
|
outlined
|
||||||
map-options
|
emit-value
|
||||||
option-label="name"
|
hide-selected
|
||||||
option-value="id"
|
fill-input
|
||||||
:options="option"
|
map-options
|
||||||
@update:model-value="dataUpdate"
|
option-label="name"
|
||||||
use-input
|
option-value="id"
|
||||||
@filter="filterOptionFn"
|
:options="option"
|
||||||
>
|
@update:model-value="dataUpdate"
|
||||||
<template v-slot:no-option>
|
use-input
|
||||||
<q-item>
|
@filter="filterOptionFn"
|
||||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
>
|
||||||
</q-item>
|
<template v-slot:no-option>
|
||||||
</template>
|
<q-item>
|
||||||
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||||
<q-icon
|
</q-item>
|
||||||
name="cancel"
|
</template>
|
||||||
@click.stop.prevent="
|
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||||
(option = dataInvestigateDis.statusOptions),
|
<q-icon
|
||||||
(statusFilter = 'ALL'),
|
name="cancel"
|
||||||
dataUpdate()
|
@click.stop.prevent="
|
||||||
"
|
(option = dataInvestigateDis.statusOptions),
|
||||||
class="cursor-pointer"
|
(statusFilter = 'ALL'),
|
||||||
/>
|
dataUpdate()
|
||||||
</template>
|
"
|
||||||
</q-select>
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
<q-space />
|
</template>
|
||||||
<!-- ค้นหาข้อความใน table -->
|
</q-select>
|
||||||
<DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
|
</div>
|
||||||
<q-input
|
<q-space />
|
||||||
standout
|
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
|
||||||
dense
|
<div class="row q-col-gutter-sm items-center">
|
||||||
:model-value="inputfilter"
|
<!-- ค้นหาข้อความใน table -->
|
||||||
ref="filterRef"
|
<div class="col justify-center row">
|
||||||
@update:model-value="updateInput"
|
<DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
|
||||||
outlined
|
</div>
|
||||||
placeholder="ค้นหา"
|
<div class="col-7">
|
||||||
style="max-width: 200px"
|
<q-input
|
||||||
@keydown.enter.prevent="filterFn"
|
standout
|
||||||
>
|
dense
|
||||||
<template v-slot:append>
|
:model-value="inputfilter"
|
||||||
<q-icon name="search" />
|
ref="filterRef"
|
||||||
</template>
|
@update:model-value="updateInput"
|
||||||
<q-tooltip
|
outlined
|
||||||
transition-show="scale"
|
placeholder="ค้นหา"
|
||||||
transition-hide="scale"
|
@keydown.enter.prevent="filterFn"
|
||||||
class="text-body2"
|
>
|
||||||
>หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
|
<template v-slot:append>
|
||||||
ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
|
<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>
|
<template v-slot:header="props">
|
||||||
<!-- แสดงคอลัมน์ใน table -->
|
<q-tr :props="props">
|
||||||
<q-select
|
<q-th auto-width></q-th>
|
||||||
:model-value="inputvisible"
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
@update:model-value="updateVisible"
|
<span class="text-weight-medium" v-html="col.label" />
|
||||||
:display-value="$q.lang.table.columns"
|
</q-th>
|
||||||
multiple
|
</q-tr>
|
||||||
outlined
|
</template>
|
||||||
dense
|
<template v-slot:body="props">
|
||||||
:options="attrs.columns"
|
<q-tr :props="props">
|
||||||
options-dense
|
<q-td auto-width>
|
||||||
option-value="name"
|
<q-btn
|
||||||
map-options
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
emit-value
|
flat
|
||||||
style="min-width: 140px"
|
dense
|
||||||
>
|
round
|
||||||
</q-select>
|
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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss"></style>
|
||||||
.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>
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import config from "@/app.config";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
|
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
|
||||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
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";
|
import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
|
||||||
|
|
||||||
|
|
@ -19,23 +19,15 @@ const storeResult = useDisciplineResultStore();
|
||||||
const store = useDisciplineMainStore();
|
const store = useDisciplineMainStore();
|
||||||
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
|
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
|
||||||
const { fetchList } = storeResult;
|
const { fetchList } = storeResult;
|
||||||
|
const { pagination, params, onRequest } = usePagination("", fetchListResult);
|
||||||
|
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>("");
|
||||||
const status = ref<string>("DONE");
|
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 เรียกรายการสรุปผลการพิจารณาทางวินัย*/
|
/** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
|
||||||
async function fetchListResult(page?: number) {
|
async function fetchListResult() {
|
||||||
const body = {
|
const body = {
|
||||||
page: page ? page : pagination.value.page,
|
...params.value,
|
||||||
pageSize: pagination.value.rowsPerPage,
|
|
||||||
keyword: filter.value.trim(),
|
keyword: filter.value.trim(),
|
||||||
status: status.value,
|
status: status.value,
|
||||||
...(store.formResult.respondentType && {
|
...(store.formResult.respondentType && {
|
||||||
|
|
@ -77,12 +69,9 @@ async function fetchListResult(page?: number) {
|
||||||
await http
|
await http
|
||||||
.post(config.API.listResult(), body)
|
.post(config.API.listResult(), body)
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
const data = res.data.result.data;
|
const result = res.data.result;
|
||||||
totalList.value = Math.ceil(
|
pagination.value.rowsNumber = result.total;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
await fetchList(result.data);
|
||||||
);
|
|
||||||
total.value = res.data.result.total;
|
|
||||||
await fetchList(data);
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
|
|
@ -112,18 +101,11 @@ function filterStatus(statusReturn: string) {
|
||||||
getSearch();
|
getSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSearch(page?: number) {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
fetchListResult(page);
|
fetchListResult();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
* ส่งข้อมูลจำลองไปยัง store
|
* ส่งข้อมูลจำลองไปยัง store
|
||||||
*/
|
*/
|
||||||
|
|
@ -136,29 +118,25 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการสรุปผลการพิจารณาความผิดทางวินัย
|
รายการสรุปผลการพิจารณาความผิดทางวินัย
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
<q-card flat bordered>
|
||||||
<div>
|
<Table
|
||||||
<Table
|
style="max-height: 80vh"
|
||||||
style="max-height: 80vh"
|
:rows="storeResult.rows"
|
||||||
:rows="storeResult.rows"
|
:columns="storeResult.columns"
|
||||||
:columns="storeResult.columns"
|
:visible-columns="storeResult.visibleColumns"
|
||||||
:visible-columns="storeResult.visibleColumns"
|
v-model:inputfilter="filter"
|
||||||
v-model:inputfilter="filter"
|
v-model:inputvisible="storeResult.visibleColumns"
|
||||||
v-model:inputvisible="storeResult.visibleColumns"
|
:nornmalData="true"
|
||||||
:nornmalData="true"
|
:paging="true"
|
||||||
:paging="true"
|
:titleText="''"
|
||||||
:titleText="''"
|
:fetchListResult="fetchListResult"
|
||||||
:fetchListResult="fetchListResult"
|
:get-search="getSearch"
|
||||||
:get-search="getSearch"
|
v-model:open-edit="openEdit"
|
||||||
v-model:open-edit="openEdit"
|
v-model:open-detail="openDetail"
|
||||||
v-model:open-detail="openDetail"
|
:filterStatus="filterStatus"
|
||||||
:filterStatus="filterStatus"
|
v-model:pagination="pagination"
|
||||||
v-model:pagination="pagination"
|
:on-request="onRequest"
|
||||||
v-model:total="total"
|
/>
|
||||||
v-model:total-list="totalList"
|
|
||||||
>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,23 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, useAttrs, watch } from "vue";
|
import { ref, useAttrs } from "vue";
|
||||||
|
|
||||||
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
|
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
|
||||||
import { checkPermission } from "@/utils/permissions";
|
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";
|
import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
|
||||||
|
|
||||||
const total = defineModel<number>("total", { required: true });
|
const pagination = defineModel<PropsTable.Pagination>("pagination", {
|
||||||
const totalList = defineModel<number>("totalList", { required: true });
|
required: true,
|
||||||
const pagination = defineModel<any>("pagination", { required: true });
|
});
|
||||||
|
|
||||||
const store = useDisciplineResultStore();
|
const store = useDisciplineResultStore();
|
||||||
const table = ref<any>(null);
|
|
||||||
const filterRef = ref<any>(null);
|
|
||||||
const attrs = ref<any>(useAttrs());
|
const attrs = ref<any>(useAttrs());
|
||||||
const statusFilter = ref<string>("DONE");
|
const statusFilter = ref<string>("DONE");
|
||||||
|
|
||||||
const option = ref<any[]>(store.statusOptions);
|
const option = ref<DataOption[]>(store.statusOptions);
|
||||||
|
|
||||||
/** รับ props มาจากหน้าหลัก */
|
/** รับ props มาจากหน้าหลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -57,9 +58,12 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
defualt: false,
|
defualt: false,
|
||||||
},
|
},
|
||||||
|
onRequest: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const filter = ref<string>("");
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
"update:inputfilter",
|
"update:inputfilter",
|
||||||
"update:inputvisible",
|
"update:inputvisible",
|
||||||
|
|
@ -71,17 +75,6 @@ function updateVisible(value: []) {
|
||||||
emit("update:inputvisible", 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() {
|
function dataUpdate() {
|
||||||
props.filterStatus(statusFilter.value);
|
props.filterStatus(statusFilter.value);
|
||||||
}
|
}
|
||||||
|
|
@ -101,219 +94,171 @@ function filterFn() {
|
||||||
function filterOptionFn(val: string, update: Function) {
|
function filterOptionFn(val: string, update: Function) {
|
||||||
update(() => {
|
update(() => {
|
||||||
option.value = store.statusOptions.filter(
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="q-pb-sm row q-col-gutter-sm items-center">
|
<div class="row q-col-gutter-sm q-pa-md">
|
||||||
<div class="q-gutter-sm" v-if="nornmalData == true"></div>
|
<div class="col-12">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
<q-select
|
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||||
v-model="statusFilter"
|
<q-select
|
||||||
label="สถานะ"
|
v-model="statusFilter"
|
||||||
dense
|
label="สถานะ"
|
||||||
outlined
|
dense
|
||||||
emit-value
|
outlined
|
||||||
map-options
|
emit-value
|
||||||
hide-selected
|
map-options
|
||||||
fill-input
|
hide-selected
|
||||||
option-label="name"
|
fill-input
|
||||||
option-value="id"
|
option-label="name"
|
||||||
:options="option"
|
option-value="id"
|
||||||
@update:model-value="dataUpdate"
|
:options="option"
|
||||||
use-input
|
@update:model-value="dataUpdate"
|
||||||
@filter="filterOptionFn"
|
use-input
|
||||||
>
|
@filter="filterOptionFn"
|
||||||
<template v-slot:no-option>
|
>
|
||||||
<q-item>
|
<template v-slot:no-option>
|
||||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
<q-item>
|
||||||
</q-item>
|
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||||
</template>
|
</q-item>
|
||||||
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
</template>
|
||||||
<q-icon
|
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||||
name="cancel"
|
<q-icon
|
||||||
@click.stop.prevent="
|
name="cancel"
|
||||||
(option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
|
@click.stop.prevent="
|
||||||
"
|
(option = store.statusOptions),
|
||||||
class="cursor-pointer"
|
(statusFilter = 'ALL'),
|
||||||
/>
|
dataUpdate()
|
||||||
</template>
|
"
|
||||||
</q-select>
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
<q-space />
|
</template>
|
||||||
<DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
|
</q-select>
|
||||||
<q-input
|
</div>
|
||||||
standout
|
<q-space />
|
||||||
dense
|
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
|
||||||
:model-value="inputfilter"
|
<div class="row q-col-gutter-sm items-center">
|
||||||
ref="filterRef"
|
<div class="col justify-center row">
|
||||||
@keydown.enter.prevent="filterFn"
|
<DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
|
||||||
@update:model-value="updateInput"
|
</div>
|
||||||
outlined
|
<div class="col-7">
|
||||||
placeholder="ค้นหา"
|
<q-input
|
||||||
style="max-width: 200px"
|
standout
|
||||||
>
|
dense
|
||||||
<template v-slot:append>
|
:model-value="inputfilter"
|
||||||
<q-icon name="search" />
|
ref="filterRef"
|
||||||
</template>
|
@keydown.enter.prevent="filterFn"
|
||||||
<q-tooltip
|
@update:model-value="updateInput"
|
||||||
anchor="bottom left"
|
outlined
|
||||||
transition-show="scale"
|
placeholder="ค้นหา"
|
||||||
transition-hide="scale"
|
>
|
||||||
class="text-body2"
|
<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"
|
||||||
>
|
>
|
||||||
หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
|
<template v-slot:header="props">
|
||||||
หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
|
<q-tr :props="props">
|
||||||
>
|
<q-th auto-width></q-th>
|
||||||
</q-input>
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<q-select
|
<span class="text-weight-medium" v-html="col.label" />
|
||||||
:model-value="inputvisible"
|
</q-th>
|
||||||
@update:model-value="updateVisible"
|
</q-tr>
|
||||||
:display-value="$q.lang.table.columns"
|
</template>
|
||||||
multiple
|
<template v-slot:body="props">
|
||||||
outlined
|
<q-tr :props="props">
|
||||||
dense
|
<q-td auto-width>
|
||||||
:options="attrs.columns"
|
<q-btn
|
||||||
options-dense
|
flat
|
||||||
option-value="name"
|
round
|
||||||
map-options
|
dense
|
||||||
emit-value
|
icon="mdi-eye"
|
||||||
style="min-width: 140px"
|
color="info"
|
||||||
>
|
@click="openDetail(props.row.id)"
|
||||||
</q-select>
|
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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss"></style>
|
||||||
.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>
|
|
||||||
|
|
|
||||||
|
|
@ -19,32 +19,31 @@ const router = useRouter();
|
||||||
* @param id ระบุ บุคคล
|
* @param id ระบุ บุคคล
|
||||||
*/
|
*/
|
||||||
function onSubmit(formData: FormDataPost) {
|
function onSubmit(formData: FormDataPost) {
|
||||||
dialogConfirm($q, () => addData(formData));
|
dialogConfirm($q, async () => {
|
||||||
}
|
showLoader();
|
||||||
|
await http
|
||||||
function addData(formData: FormDataPost) {
|
.post(config.API.director(), {
|
||||||
showLoader();
|
personalId: formData.personalId ?? "",
|
||||||
http
|
prefix: formData.prefix,
|
||||||
.post(config.API.director(), {
|
firstName: formData.firstname,
|
||||||
personalId: formData.personalId ?? "",
|
lastName: formData.lastname,
|
||||||
prefix: formData.prefix,
|
position: formData.position,
|
||||||
firstName: formData.firstname,
|
email: formData.email,
|
||||||
lastName: formData.lastname,
|
phone: formData.phone,
|
||||||
position: formData.position,
|
qualification: formData.qualification,
|
||||||
email: formData.email,
|
rootDnaId: formData.rootDnaId,
|
||||||
phone: formData.phone,
|
})
|
||||||
qualification: formData.qualification,
|
.then(async () => {
|
||||||
rootDnaId: formData.rootDnaId,
|
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
})
|
await router.push(`/discipline/director`);
|
||||||
.then((res) => {
|
})
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
.catch((e) => {
|
||||||
})
|
messageError($q, e);
|
||||||
.catch((e) => {
|
})
|
||||||
messageError($q, e);
|
.finally(() => {
|
||||||
})
|
hideLoader();
|
||||||
.finally(async () => {
|
});
|
||||||
router.push(`/discipline/director`);
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { useRoute } from "vue-router";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
FormData,
|
FormData,
|
||||||
|
|
@ -18,15 +19,6 @@ import type {
|
||||||
|
|
||||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
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 route = useRoute();
|
||||||
const modalPersonal = ref<boolean>(false);
|
const modalPersonal = ref<boolean>(false);
|
||||||
const personId = ref<string>("");
|
const personId = ref<string>("");
|
||||||
|
|
@ -36,6 +28,7 @@ const search = ref<string>("");
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { messageError, showLoader, hideLoader } = mixin;
|
const { messageError, showLoader, hideLoader } = mixin;
|
||||||
|
const { pagination, params, onRequest } = usePagination("", getSearch);
|
||||||
|
|
||||||
/** รับ props มาจาก page หลัก */
|
/** รับ props มาจาก page หลัก */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -56,16 +49,8 @@ const typeOps = ref<typeOp[]>([
|
||||||
]);
|
]);
|
||||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||||
const emit = defineEmits(["formDataReturn"]);
|
const emit = defineEmits(["formDataReturn"]);
|
||||||
/**
|
|
||||||
* ข้อมูลเลขประจำตัวประชาชน
|
|
||||||
*/
|
|
||||||
//
|
|
||||||
const idCard = ref<string>("");
|
|
||||||
const idCardRef = ref<any>(null);
|
|
||||||
|
|
||||||
/**
|
/** ข้อมูลทั้งก้อน form*/
|
||||||
* ข้อมูลทั้งก้อน form
|
|
||||||
*/
|
|
||||||
const formData = reactive<FormData>({
|
const formData = reactive<FormData>({
|
||||||
personalId: "",
|
personalId: "",
|
||||||
prefix: "",
|
prefix: "",
|
||||||
|
|
@ -78,9 +63,7 @@ const formData = reactive<FormData>({
|
||||||
rootDnaId: "",
|
rootDnaId: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/** ตรวจสอบข้อมูลก่อนส่งไปยัง api*/
|
||||||
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
|
|
||||||
*/
|
|
||||||
const prefixRef = ref<object | null>(null);
|
const prefixRef = ref<object | null>(null);
|
||||||
const firstnameRef = ref<object | null>(null);
|
const firstnameRef = ref<object | null>(null);
|
||||||
const lastnameRef = ref<object | null>(null);
|
const lastnameRef = ref<object | null>(null);
|
||||||
|
|
@ -183,11 +166,8 @@ function updateSelect() {
|
||||||
|
|
||||||
/** ค้าหาข้อมูล */
|
/** ค้าหาข้อมูล */
|
||||||
async function searchInput() {
|
async function searchInput() {
|
||||||
searchRef.value.validate();
|
pagination.value.page = 1;
|
||||||
if (!searchRef.value.hasError) {
|
await getSearch();
|
||||||
pagination.value.page = 1;
|
|
||||||
await getSearch();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ดึงข้อมูล */
|
/** ดึงข้อมูล */
|
||||||
|
|
@ -195,44 +175,40 @@ async function getSearch() {
|
||||||
showLoader();
|
showLoader();
|
||||||
const body = {
|
const body = {
|
||||||
fieldName: type.value,
|
fieldName: type.value,
|
||||||
keyword: search.value,
|
keyword: search.value ? search.value.trim() : "",
|
||||||
system: (route.meta?.Key as string) || undefined,
|
system: (route.meta?.Key as string) || undefined,
|
||||||
};
|
};
|
||||||
await http
|
await http
|
||||||
.post(
|
.post(config.API.orgSearchPersonal(), body, { params: params.value })
|
||||||
config.API.orgSearchPersonal() +
|
|
||||||
`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
|
|
||||||
body
|
|
||||||
)
|
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
totalList.value = Math.ceil(
|
const result = res.data.result;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
pagination.value.rowsNumber = result.total;
|
||||||
);
|
if (result.data.length > 0) {
|
||||||
total.value = res.data.result.total;
|
rows.value = result.data.map((e: ResponsePreson) => ({
|
||||||
const data = res.data.result.data;
|
personId: e.id,
|
||||||
const list = data.map((e: ResponsePreson) => ({
|
idcard: e.citizenId,
|
||||||
personId: e.id,
|
prefix: e.prefix,
|
||||||
idcard: e.citizenId,
|
firstName: e.firstName,
|
||||||
prefix: e.prefix,
|
lastName: e.lastName,
|
||||||
firstName: e.firstName,
|
name: `${e.prefix ? e.prefix : ""}${
|
||||||
lastName: e.lastName,
|
e.firstName ? e.firstName : ""
|
||||||
name: `${e.prefix ? e.prefix : ""}${e.firstName ? e.firstName : ""} ${
|
} ${e.lastName ? e.lastName : ""}`,
|
||||||
e.lastName ? e.lastName : ""
|
posNo: e.posNo ?? "-",
|
||||||
}`,
|
position: e.position ?? "-",
|
||||||
posNo: e.posNo ?? "-",
|
positionLevel: e.positionLevel ?? "-",
|
||||||
position: e.position ?? "-",
|
salary: e.salaries ?? "-",
|
||||||
positionLevel: e.positionLevel ?? "-",
|
organization: e.organization ?? "-",
|
||||||
salary: e.salaries ?? "-",
|
phone: e.phone ?? "-",
|
||||||
organization: e.organization ?? "-",
|
email: e.email ?? "-",
|
||||||
phone: e.phone ?? "-",
|
rootDnaId: e.rootDnaId ?? "-",
|
||||||
email: e.email ?? "-",
|
}));
|
||||||
rootDnaId: e.rootDnaId ?? "-",
|
} else {
|
||||||
}));
|
rows.value = [];
|
||||||
|
}
|
||||||
rows.value = list;
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
|
rows.value = [];
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
|
|
@ -267,31 +243,23 @@ function updatemodalPersonal(modal: boolean) {
|
||||||
modalPersonal.value = modal;
|
modalPersonal.value = modal;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePagination(newPagination: any) {
|
|
||||||
pagination.value.page = 1;
|
|
||||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เช็คข้อมูลจาก props
|
* เช็คข้อมูลจาก props
|
||||||
* เมื่อมีข้อมูล
|
* เมื่อมีข้อมูล
|
||||||
* เก็บข้อมูลลง formData
|
* เก็บข้อมูลลง 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(
|
watch(
|
||||||
() => pagination.value.rowsPerPage,
|
() => props.data,
|
||||||
async () => {
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -343,7 +311,7 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 q-pt-sm">
|
<div class="col-12 q-pt-sm">
|
||||||
<d-table
|
<p-table
|
||||||
ref="table"
|
ref="table"
|
||||||
:columns="columnsRespondent"
|
:columns="columnsRespondent"
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
|
|
@ -352,26 +320,11 @@ watch(
|
||||||
bordered
|
bordered
|
||||||
:paging="true"
|
:paging="true"
|
||||||
dense
|
dense
|
||||||
class="custom-header-table"
|
|
||||||
:visible-columns="visibleColumnsRespondent"
|
:visible-columns="visibleColumnsRespondent"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
: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">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-th
|
<q-th
|
||||||
|
|
@ -393,11 +346,7 @@ watch(
|
||||||
@click="returnDetail(props.row)"
|
@click="returnDetail(props.row)"
|
||||||
>
|
>
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{
|
{{ props.rowIndex + 1 }}
|
||||||
(pagination.page - 1) * pagination.rowsPerPage +
|
|
||||||
props.rowIndex +
|
|
||||||
1
|
|
||||||
}}
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'info'">
|
<div v-else-if="col.name == 'info'">
|
||||||
<q-btn
|
<q-btn
|
||||||
|
|
@ -413,12 +362,12 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
{{ col.value }}
|
{{ col.value ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</p-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
|
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
|
||||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
|
|
||||||
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
|
import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
|
||||||
|
|
||||||
|
|
@ -21,6 +22,7 @@ const mainStore = useDisciplineMainStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
|
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
|
||||||
|
const { pagination, params, onRequest } = usePagination("", getList);
|
||||||
|
|
||||||
const titleInvestigate = ref<string>("");
|
const titleInvestigate = ref<string>("");
|
||||||
const personalId = ref<string>("");
|
const personalId = ref<string>("");
|
||||||
|
|
@ -36,33 +38,23 @@ const dataPopUp = ref<DirectorRowsResponse>();
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
const filterRef = ref<HTMLInputElement | null>(null);
|
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() {
|
async function getList() {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(
|
.get(
|
||||||
config.API.directorList(
|
config.API.directorListMain +
|
||||||
pagination.value.page,
|
`${mainStore.pathDirector(route.name as string)}`,
|
||||||
pagination.value.rowsPerPage,
|
{
|
||||||
filterKeyword.value.trim(),
|
params: {
|
||||||
mainStore.pathDirector(route.name as string)
|
...params.value,
|
||||||
)
|
keyword: filterKeyword.value.trim(),
|
||||||
|
},
|
||||||
|
}
|
||||||
)
|
)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const data = res.data.result.data;
|
const result = res.data.result;
|
||||||
totalList.value = Math.ceil(
|
pagination.value.rowsNumber = result.total;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
dataStore.fetchData(result.data);
|
||||||
);
|
|
||||||
total.value = res.data.result.total;
|
|
||||||
dataStore.fetchData(data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -77,38 +69,21 @@ async function getList() {
|
||||||
* @param id ไอดีของข้อมูล
|
* @param id ไอดีของข้อมูล
|
||||||
*/
|
*/
|
||||||
function clickDelete(id: string) {
|
function clickDelete(id: string) {
|
||||||
dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
|
dialogRemove($q, async () => {
|
||||||
}
|
showLoader();
|
||||||
|
await http
|
||||||
/**
|
.delete(config.API.directorbyId(id))
|
||||||
* ลบข้อมูล
|
.then(async () => {
|
||||||
* @param id type
|
await getList();
|
||||||
*/
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
async function deleteData(id: string) {
|
})
|
||||||
showLoader();
|
.catch((e) => {
|
||||||
await http
|
messageError($q, e);
|
||||||
.delete(config.API.directorbyId(id))
|
})
|
||||||
.then((res) => {
|
.finally(async () => {
|
||||||
success($q, "ลบข้อมูลสำเร็จ");
|
hideLoader();
|
||||||
})
|
});
|
||||||
.catch((e) => {
|
});
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetFilter() {
|
|
||||||
filterKeyword.value = "";
|
|
||||||
if (filterRef.value) {
|
|
||||||
filterRef.value.focus();
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterFn() {
|
|
||||||
getSearch();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openDetail(data: DirectorRowsResponse, typeChange: string) {
|
function openDetail(data: DirectorRowsResponse, typeChange: string) {
|
||||||
|
|
@ -132,210 +107,188 @@ function onEdit(id: string, check: boolean) {
|
||||||
isEdit.value = check;
|
isEdit.value = check;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePagination(newPagination: any) {
|
|
||||||
pagination.value.page = 1;
|
|
||||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSearch() {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/**เมื่อเริ่มโหลดหน้า
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
* ส่งข้อมูลจำลองไปยัง store
|
* ส่งข้อมูลจำลองไปยัง store
|
||||||
*/
|
*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getList();
|
getList();
|
||||||
// get ข้อมูลแล้วโยนใส่ store
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการชื่อกรรมการ
|
รายการชื่อกรรมการ
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
<q-card flat bordered>
|
||||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
<div class="col-12 q-pa-md q-col-gutter-sm">
|
||||||
<div>
|
<div class="col-12">
|
||||||
<q-btn
|
<div class="row q-col-gutter-sm">
|
||||||
v-if="checkPermission($route)?.attrIsCreate"
|
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||||
@click="$router.push(`/discipline/director/add`)"
|
<div class="row items-center">
|
||||||
flat
|
<q-btn
|
||||||
dense
|
v-if="checkPermission($route)?.attrIsCreate"
|
||||||
round
|
@click="$router.push(`/discipline/director/add`)"
|
||||||
color="primary"
|
flat
|
||||||
icon="mdi-plus"
|
dense
|
||||||
>
|
round
|
||||||
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
|
color="primary"
|
||||||
</q-btn>
|
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>
|
</div>
|
||||||
<q-space />
|
|
||||||
|
|
||||||
<q-input
|
<div class="col-12">
|
||||||
class="col-xs-12 col-sm-3 col-md-2"
|
<p-table
|
||||||
standout
|
:columns="dataStore.columns"
|
||||||
dense
|
:rows="dataStore.rows"
|
||||||
v-model="filterKeyword"
|
row-key="tb-list"
|
||||||
ref="filterRef"
|
flat
|
||||||
outlined
|
bordered
|
||||||
placeholder="ค้นหา"
|
:paging="true"
|
||||||
@keydown.enter.prevent="filterFn"
|
dense
|
||||||
>
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
<template v-slot:append>
|
:visible-columns="dataStore.visibleColumns"
|
||||||
<q-icon name="search" />
|
v-model:pagination="pagination"
|
||||||
</template>
|
@request="onRequest"
|
||||||
</q-input>
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
<q-select
|
<q-tr :props="props">
|
||||||
v-model="dataStore.visibleColumns"
|
<q-th auto-width />
|
||||||
multiple
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
outlined
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
dense
|
</q-th>
|
||||||
options-dense
|
</q-tr>
|
||||||
:display-value="$q.lang.table.columns"
|
</template>
|
||||||
emit-value
|
<template v-slot:body="props">
|
||||||
map-options
|
<q-tr :props="props">
|
||||||
:options="dataStore.columns"
|
<q-td auto-width>
|
||||||
option-value="name"
|
<q-btn
|
||||||
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
style="min-width: 140px"
|
dense
|
||||||
class="col-xs-12 col-sm-3 col-md-2"
|
flat
|
||||||
/>
|
round
|
||||||
</div>
|
color="info"
|
||||||
|
@click="onEdit(props.row.id, false)"
|
||||||
<div class="col-12">
|
icon="mdi-eye"
|
||||||
<d-table
|
>
|
||||||
:columns="dataStore.columns"
|
<q-tooltip>รายละเอียด</q-tooltip>
|
||||||
:rows="dataStore.rows"
|
</q-btn>
|
||||||
row-key="tb-list"
|
<q-btn
|
||||||
flat
|
v-if="
|
||||||
bordered
|
checkPermission($route)?.attrIsUpdate &&
|
||||||
:paging="true"
|
checkPermission($route)?.attrIsGet
|
||||||
dense
|
"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
dense
|
||||||
@update:pagination="updatePagination"
|
flat
|
||||||
:visible-columns="dataStore.visibleColumns"
|
round
|
||||||
>
|
color="edit"
|
||||||
<template v-slot:pagination="scope">
|
@click="onEdit(props.row.id, true)"
|
||||||
ทั้งหมด {{ total }} รายการ
|
icon="edit"
|
||||||
<q-pagination
|
>
|
||||||
v-model="pagination.page"
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
active-color="primary"
|
</q-btn>
|
||||||
color="dark"
|
<q-btn
|
||||||
:max="Number(totalList)"
|
v-if="checkPermission($route)?.attrIsDelete"
|
||||||
size="sm"
|
dense
|
||||||
boundary-links
|
flat
|
||||||
direction-links
|
round
|
||||||
:max-pages="5"
|
color="red"
|
||||||
@update:model-value="getList"
|
@click="clickDelete(props.row.id)"
|
||||||
></q-pagination>
|
icon="mdi-delete"
|
||||||
</template>
|
>
|
||||||
<template v-slot:header="props">
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||||
<q-tr :props="props">
|
</q-btn>
|
||||||
<q-th auto-width />
|
</q-td>
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<div v-if="col.name == 'no'">
|
||||||
</q-th>
|
{{ props.rowIndex + 1 }}
|
||||||
</q-tr>
|
</div>
|
||||||
</template>
|
<div
|
||||||
<template v-slot:body="props">
|
v-else-if="
|
||||||
<q-tr :props="props">
|
col.name == 'totalInvestigate' &&
|
||||||
<q-td auto-width>
|
props.row.totalInvestigate > 0
|
||||||
<q-btn
|
"
|
||||||
v-if="checkPermission($route)?.attrIsGet"
|
:class="
|
||||||
dense
|
checkPermission($route)?.attrIsGet
|
||||||
flat
|
? 'text-blue cursor-pointer'
|
||||||
round
|
: ''
|
||||||
color="info"
|
"
|
||||||
@click="onEdit(props.row.id, false)"
|
@click="
|
||||||
icon="mdi-eye"
|
checkPermission($route)?.attrIsGet
|
||||||
>
|
? openDetail(props.row, 'investigate')
|
||||||
<q-tooltip>รายละเอียด</q-tooltip>
|
: ''
|
||||||
</q-btn>
|
"
|
||||||
<q-btn
|
>
|
||||||
v-if="
|
{{ props.row.totalInvestigate }}
|
||||||
checkPermission($route)?.attrIsUpdate &&
|
</div>
|
||||||
checkPermission($route)?.attrIsGet
|
<div
|
||||||
"
|
v-else-if="
|
||||||
dense
|
col.name == 'totalDisciplinary' &&
|
||||||
flat
|
props.row.totalDisciplinary > 0
|
||||||
round
|
"
|
||||||
color="edit"
|
:class="
|
||||||
@click="onEdit(props.row.id, true)"
|
checkPermission($route)?.attrIsGet
|
||||||
icon="edit"
|
? 'text-blue cursor-pointer'
|
||||||
>
|
: ''
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
"
|
||||||
</q-btn>
|
@click="
|
||||||
<q-btn
|
checkPermission($route)?.attrIsGet
|
||||||
v-if="checkPermission($route)?.attrIsDelete"
|
? openDetail(props.row, 'disciplinary')
|
||||||
dense
|
: ''
|
||||||
flat
|
"
|
||||||
round
|
>
|
||||||
color="red"
|
{{ props.row.totalDisciplinary }}
|
||||||
@click="clickDelete(props.row.id)"
|
</div>
|
||||||
icon="mdi-delete"
|
<div v-else>
|
||||||
>
|
{{ col.value ?? "-" }}
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
</div>
|
||||||
</q-btn>
|
</q-td>
|
||||||
</q-td>
|
</q-tr>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
</template>
|
||||||
<div v-if="col.name == 'no'">
|
</p-table>
|
||||||
{{
|
</div>
|
||||||
(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>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
|
@ -7,33 +7,28 @@ import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
|
import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
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 {
|
import {
|
||||||
checkPermission,
|
checkPermission,
|
||||||
checkPermissionList,
|
checkPermissionList,
|
||||||
checkPermissionCreate,
|
checkPermissionCreate,
|
||||||
} from "@/utils/permissions";
|
} 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 */
|
/** use */
|
||||||
const dataStore = useDisciplineSuspendStore();
|
const dataStore = useDisciplineSuspendStore();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const mixin = useCounterMixin();
|
const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
|
||||||
const {
|
useCounterMixin();
|
||||||
messageError,
|
const { pagination, params, onRequest } = usePagination("", getList);
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
success,
|
|
||||||
date2Thai,
|
|
||||||
convertDateToAPI,
|
|
||||||
} = mixin;
|
|
||||||
|
|
||||||
const date = ref<any>(null);
|
const date = ref<any>(null);
|
||||||
const employeeClass = ref<string>("");
|
const employeeClass = ref<string>("");
|
||||||
|
|
@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
|
||||||
"no",
|
"no",
|
||||||
"profileType",
|
"profileType",
|
||||||
"title",
|
"title",
|
||||||
"name",
|
"firstName",
|
||||||
"position",
|
"position",
|
||||||
"positionType",
|
"positionType",
|
||||||
"positionLevel",
|
"positionLevel",
|
||||||
"organization",
|
"organization",
|
||||||
"dateTotal",
|
"startDateSuspend",
|
||||||
"descriptionSuspend",
|
"descriptionSuspend",
|
||||||
"status",
|
"status",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
const filterRef = ref<any>(null);
|
|
||||||
|
|
||||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
const rows2 = ref<dataType[]>([]);
|
const rows2 = ref<dataType[]>([]);
|
||||||
|
|
@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
name: "profileType",
|
name: "profileType",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ประเภทตำแหน่ง",
|
label: "ประเภทตำแหน่ง",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "profileType",
|
field: "profileType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "name",
|
name: "firstName",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ชื่อ - นามสกุล",
|
label: "ชื่อ - นามสกุล",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
|
@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "dateTotal",
|
name: "startDateSuspend",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
|
label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
|
@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
name: "status",
|
name: "status",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "status",
|
field: "status",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const openModal = () => (modal.value = true);
|
function 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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
|
/** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
|
||||||
|
|
@ -201,28 +182,22 @@ function openModalOrder() {
|
||||||
/** ดึงข้อมูลหน้าหลัก */
|
/** ดึงข้อมูลหน้าหลัก */
|
||||||
async function getList() {
|
async function getList() {
|
||||||
showLoader();
|
showLoader();
|
||||||
const params: Record<string, any> = {};
|
const paramsNew = {
|
||||||
if (date.value && date.value.length === 2) {
|
...params.value,
|
||||||
params.startDate = convertDateToAPI(date.value[0]);
|
keyword: filterKeyword.value.trim(),
|
||||||
params.endDate = convertDateToAPI(date.value[1]);
|
profileType: employeeClass.value,
|
||||||
}
|
...(date.value?.length === 2 && {
|
||||||
|
startDate: convertDateToAPI(date.value[0]),
|
||||||
|
endDate: convertDateToAPI(date.value[1]),
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
await http
|
await http
|
||||||
.get(
|
.get(config.API.suspendMain, { params: paramsNew })
|
||||||
config.API.suspendMain(
|
|
||||||
pagination.value.page,
|
|
||||||
pagination.value.rowsPerPage,
|
|
||||||
filterKeyword.value.trim(),
|
|
||||||
employeeClass.value
|
|
||||||
),
|
|
||||||
{ params }
|
|
||||||
)
|
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
const data = await res.data.result.data;
|
const result = await res.data.result;
|
||||||
totalList.value = Math.ceil(
|
pagination.value.rowsNumber = result.total;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
await dataStore.getData(result.data);
|
||||||
);
|
|
||||||
total.value = res.data.result.total;
|
|
||||||
await dataStore.getData(data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, 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() {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function convertType(val: string) {
|
function convertType(val: string) {
|
||||||
const data = val?.toLocaleUpperCase();
|
const data = val?.toLocaleUpperCase();
|
||||||
switch (data) {
|
switch (data) {
|
||||||
|
|
@ -275,221 +234,215 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายชื่อผู้ถูกพักราชการ
|
รายชื่อผู้ถูกพักราชการ
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm">
|
<q-card flat bordered>
|
||||||
<q-separator />
|
<div class="row q-pa-md q-col-gutter-sm">
|
||||||
<div class="row q-pa-md">
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row col-12 q-col-gutter-sm items-center">
|
<div class="row q-col-gutter-sm">
|
||||||
<div>
|
<div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
|
||||||
<q-select
|
<div class="row col-12 q-col-gutter-sm items-center">
|
||||||
v-model="employeeClass"
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
|
||||||
outlined
|
<q-select
|
||||||
dense
|
v-model="employeeClass"
|
||||||
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
|
|
||||||
outlined
|
outlined
|
||||||
:label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
|
dense
|
||||||
:model-value="
|
options-dense
|
||||||
date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
|
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>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<q-icon
|
<template #year-overlay-value="{ value }">{{
|
||||||
size="18px"
|
parseInt(value + 543)
|
||||||
name="event"
|
}}</template>
|
||||||
class="cursor-pointer"
|
<template #trigger>
|
||||||
color="primary"
|
<q-input
|
||||||
></q-icon>
|
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>
|
</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>
|
<template v-slot:append>
|
||||||
<q-icon
|
<q-icon name="search" />
|
||||||
v-if="date !== null"
|
|
||||||
name="clear"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click.prevent.stop="(date = null), getList()"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</div>
|
||||||
</datepicker>
|
<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>
|
||||||
<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>
|
||||||
|
|
||||||
<div class="col-12 q-pt-sm">
|
<div class="col-12">
|
||||||
<d-table
|
<p-table
|
||||||
:columns="dataStore.columns"
|
:columns="dataStore.columns"
|
||||||
:rows="dataStore.rows"
|
:rows="dataStore.rows"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:visible-columns="dataStore.visibleColumns"
|
:visible-columns="dataStore.visibleColumns"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
@update:pagination="updatePagination"
|
v-model:pagination="pagination"
|
||||||
>
|
@request="onRequest"
|
||||||
<template v-slot:pagination="scope">
|
>
|
||||||
ทั้งหมด {{ total }} รายการ
|
<template v-slot:header="props">
|
||||||
<q-pagination
|
<q-tr :props="props">
|
||||||
v-model="pagination.page"
|
<q-th auto-width />
|
||||||
active-color="primary"
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
color="dark"
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
:max="Number(totalList)"
|
</q-th>
|
||||||
size="sm"
|
</q-tr>
|
||||||
boundary-links
|
</template>
|
||||||
direction-links
|
<template v-slot:body="props">
|
||||||
:max-pages="5"
|
<q-tr :props="props">
|
||||||
@update:model-value="getList"
|
<q-td auto-width>
|
||||||
></q-pagination>
|
<q-btn
|
||||||
</template>
|
v-if="checkPermission($route)?.attrIsGet"
|
||||||
<template v-slot:header="props">
|
@click="
|
||||||
<q-tr :props="props">
|
router.push(`/discipline-suspend-detail/${props.row.id}`)
|
||||||
<q-th auto-width />
|
"
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
flat
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
dense
|
||||||
</q-th>
|
round
|
||||||
<!-- <q-th auto-width /> -->
|
color="info"
|
||||||
</q-tr>
|
icon="mdi-eye"
|
||||||
</template>
|
>
|
||||||
<template v-slot:body="props">
|
<q-tooltip>รายละเอียด</q-tooltip>
|
||||||
<q-tr :props="props">
|
</q-btn>
|
||||||
<q-td auto-width>
|
<q-btn
|
||||||
<q-btn
|
v-if="
|
||||||
v-if="checkPermission($route)?.attrIsGet"
|
checkPermission($route)?.attrIsUpdate &&
|
||||||
@click="
|
checkPermission($route)?.attrIsGet
|
||||||
router.push(`/discipline-suspend-detail/${props.row.id}`)
|
"
|
||||||
"
|
@click="router.push(`/discipline-suspend/${props.row.id}`)"
|
||||||
flat
|
flat
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
color="info"
|
color="edit"
|
||||||
icon="mdi-eye"
|
icon="edit"
|
||||||
>
|
>
|
||||||
<q-tooltip>รายละเอียด</q-tooltip>
|
<q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-btn
|
</q-td>
|
||||||
v-if="
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
checkPermission($route)?.attrIsUpdate &&
|
<div v-if="col.name == 'no'">
|
||||||
checkPermission($route)?.attrIsGet
|
{{ props.rowIndex + 1 }}
|
||||||
"
|
</div>
|
||||||
@click="router.push(`/discipline-suspend/${props.row.id}`)"
|
<div
|
||||||
flat
|
v-else-if="col.name === 'firstName'"
|
||||||
dense
|
class="table_ellipsis"
|
||||||
round
|
>
|
||||||
color="edit"
|
{{ props.row.prefix ? props.row.prefix : ""
|
||||||
icon="edit"
|
}}{{ props.row.firstName ? props.row.firstName : "" }}
|
||||||
>
|
{{ props.row.lastName ? props.row.lastName : "" }}
|
||||||
<q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
|
</div>
|
||||||
</q-btn>
|
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
||||||
</q-td>
|
{{ props.row.title ? props.row.title : "-" }}
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
</div>
|
||||||
<div v-if="col.name == 'no'">
|
<div v-else-if="col.name === 'profileType'">
|
||||||
{{
|
{{
|
||||||
(pagination.page - 1) * pagination.rowsPerPage +
|
props.row.profileType
|
||||||
props.rowIndex +
|
? convertType(props.row.profileType.toUpperCase())
|
||||||
1
|
: "-"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name === 'name'" class="table_ellipsis">
|
<div
|
||||||
{{ props.row.prefix ? props.row.prefix : ""
|
v-else-if="col.name === 'organization'"
|
||||||
}}{{ props.row.firstName ? props.row.firstName : "" }}
|
class="text-html"
|
||||||
{{ props.row.lastName ? props.row.lastName : "" }}
|
style="width: 250px"
|
||||||
</div>
|
>
|
||||||
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
{{ props.row.organization ? props.row.organization : "-" }}
|
||||||
{{ props.row.title ? props.row.title : "-" }}
|
</div>
|
||||||
</div>
|
<div v-else>
|
||||||
<div v-else-if="col.name === 'profileType'">
|
{{ col.value ?? "-" }}
|
||||||
{{
|
</div>
|
||||||
props.row.profileType
|
</q-td>
|
||||||
? convertType(props.row.profileType.toUpperCase())
|
</q-tr>
|
||||||
: "-"
|
</template>
|
||||||
}}
|
</p-table>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch, reactive } from "vue";
|
import { ref, onMounted, reactive } from "vue";
|
||||||
|
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
|
import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
|
||||||
import { checkPermission } from "@/utils/permissions";
|
import { checkPermission } from "@/utils/permissions";
|
||||||
import { calculateFiscalYear } from "@/utils/function";
|
import { calculateFiscalYear } from "@/utils/function";
|
||||||
|
import { usePagination } from "@/composables/usePagination";
|
||||||
|
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
import type { RowList } from "@/modules/11_discipline/interface/response/appealComplain";
|
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 $q = useQuasar();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { showLoader, messageError, hideLoader, dialogConfirm } = mixin;
|
const { showLoader, messageError, hideLoader } = mixin;
|
||||||
const mainStore = useDisciplineMainStore();
|
const mainStore = useDisciplineMainStore();
|
||||||
const modalStatusEdit = ref<boolean>(false);
|
|
||||||
/** stoer */
|
|
||||||
const dataStore = useAppealComplainStore();
|
const dataStore = useAppealComplainStore();
|
||||||
|
const { pagination, params, onRequest } = usePagination("", getData);
|
||||||
const { fetchAppealComplain } = dataStore;
|
const { fetchAppealComplain } = dataStore;
|
||||||
|
|
||||||
|
/** store */
|
||||||
|
const modalStatusEdit = ref<boolean>(false);
|
||||||
const type = ref<DataOption[]>([
|
const type = ref<DataOption[]>([
|
||||||
{ id: "ALL", name: "ทั้งหมด" },
|
{ id: "ALL", name: "ทั้งหมด" },
|
||||||
...dataStore.typeOptions,
|
...dataStore.typeOptions,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
const dataRow = ref<RowList[]>([]);
|
const dataRow = ref<RowList[]>([]);
|
||||||
|
|
||||||
const formData = reactive<any>({
|
const formData = reactive<any>({
|
||||||
type: "ALL",
|
type: "ALL",
|
||||||
status: "NEW",
|
status: "NEW",
|
||||||
year: calculateFiscalYear(new Date()).toString(),
|
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[]>([
|
const visibleColumns = ref<string[]>([
|
||||||
"no",
|
"no",
|
||||||
"profileType",
|
"profileType",
|
||||||
|
|
@ -63,8 +55,6 @@ const visibleColumns = ref<string[]>([
|
||||||
"lastUpdatedAt",
|
"lastUpdatedAt",
|
||||||
"status",
|
"status",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// หัวตาราง
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
|
|
@ -79,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
name: "profileType",
|
name: "profileType",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ประเภทตำแหน่ง",
|
label: "ประเภทตำแหน่ง",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "profileType",
|
field: "profileType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
@ -88,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
name: "type",
|
name: "type",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ประเภท",
|
label: "ประเภท",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "type",
|
field: "type",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
@ -110,8 +100,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "fullname",
|
field: "fullname",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "citizenId",
|
name: "citizenId",
|
||||||
|
|
@ -121,8 +109,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "citizenId",
|
field: "citizenId",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "year",
|
name: "year",
|
||||||
|
|
@ -132,8 +118,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "year",
|
field: "year",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "caseType",
|
name: "caseType",
|
||||||
|
|
@ -143,8 +127,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "caseType",
|
field: "caseType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "caseNumber",
|
name: "caseNumber",
|
||||||
|
|
@ -154,8 +136,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "caseNumber",
|
field: "caseNumber",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "description",
|
name: "description",
|
||||||
|
|
@ -165,8 +145,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "description",
|
field: "description",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "lastUpdatedAt",
|
name: "lastUpdatedAt",
|
||||||
|
|
@ -176,8 +154,6 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
field: "lastUpdatedAt",
|
field: "lastUpdatedAt",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "status",
|
name: "status",
|
||||||
|
|
@ -207,11 +183,6 @@ function editPage(id: string) {
|
||||||
router.push(`/discipline-appealcomplain/${id}`);
|
router.push(`/discipline-appealcomplain/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ดึงข้อมูลเมื่อ กด enter */
|
|
||||||
function filterFn() {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ปิด pop up */
|
/** ปิด pop up */
|
||||||
function close() {
|
function close() {
|
||||||
modalStatusEdit.value = false;
|
modalStatusEdit.value = false;
|
||||||
|
|
@ -221,22 +192,19 @@ function close() {
|
||||||
async function getData() {
|
async function getData() {
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.get(
|
.get(config.API.appealMainList, {
|
||||||
config.API.appealMainList(
|
params: {
|
||||||
formData.status,
|
...params.value,
|
||||||
formData.type,
|
status: formData.status,
|
||||||
formData.year,
|
type: formData.type,
|
||||||
pagination.value.page,
|
year: formData.year,
|
||||||
pagination.value.rowsPerPage,
|
keyword: filterKeyword.value,
|
||||||
filterKeyword.value
|
},
|
||||||
)
|
})
|
||||||
)
|
.then(async (res) => {
|
||||||
.then((res) => {
|
const result = res.data.result;
|
||||||
totalList.value = Math.ceil(
|
pagination.value.rowsNumber = result.total;
|
||||||
res.data.result.total / pagination.value.rowsPerPage
|
await fetchAppealComplain(result.data);
|
||||||
);
|
|
||||||
total.value = res.data.result.total;
|
|
||||||
fetchAppealComplain(res.data.result.data);
|
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -257,13 +225,8 @@ function yearAll() {
|
||||||
getSearch();
|
getSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ฟังชั่น เคลียฟิลเตอร์ */
|
const option = ref<DataOption[]>(dataStore.statusOptions);
|
||||||
function resetFilter() {
|
const optionType = ref<DataOption[]>(type.value);
|
||||||
filterKeyword.value = "";
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
const option = ref<any[]>(dataStore.statusOptions);
|
|
||||||
const optionType = ref<any[]>(type.value);
|
|
||||||
/**
|
/**
|
||||||
* function ค้นหาข้อมูลใน option
|
* function ค้นหาข้อมูลใน option
|
||||||
* @param val คำค้นหา
|
* @param val คำค้นหา
|
||||||
|
|
@ -272,7 +235,7 @@ const optionType = ref<any[]>(type.value);
|
||||||
function filterOptionFn(val: string, update: Function) {
|
function filterOptionFn(val: string, update: Function) {
|
||||||
update(() => {
|
update(() => {
|
||||||
option.value = dataStore.statusOptions.filter(
|
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) {
|
function filterOptionFnType(val: string, update: Function) {
|
||||||
update(() => {
|
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() {
|
function getSearch() {
|
||||||
pagination.value.page = 1;
|
pagination.value.page = 1;
|
||||||
getData();
|
getData();
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pagination.value.rowsPerPage,
|
|
||||||
async () => {
|
|
||||||
getSearch();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getData();
|
getData();
|
||||||
|
|
@ -317,283 +270,269 @@ onMounted(async () => {
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการอุทธรณ์/ร้องทุกข์
|
รายการอุทธรณ์/ร้องทุกข์
|
||||||
</div>
|
</div>
|
||||||
<q-card 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
|
<q-card flat bordered>
|
||||||
id="visibleColumns"
|
<div class="col-12 q-pa-md q-col-gutter-sm">
|
||||||
for="visibleColumns"
|
<div class="row q-col-gutter-sm">
|
||||||
v-model="dataStore.visibleColumns"
|
<div>
|
||||||
multiple
|
<q-btn
|
||||||
outlined
|
v-if="checkPermission($route)?.attrIsCreate"
|
||||||
dense
|
id="addComplaints"
|
||||||
options-dense
|
for="addComplaints"
|
||||||
:display-value="$q.lang.table.columns"
|
dense
|
||||||
emit-value
|
flat
|
||||||
map-options
|
round
|
||||||
:options="dataStore.columns"
|
color="primary"
|
||||||
option-value="name"
|
icon="mdi-plus"
|
||||||
style="min-width: 140px"
|
@click="redirectToPageadd()"
|
||||||
class="col-xs-12 col-sm-3 col-md-2"
|
><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
|
||||||
/>
|
>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
<q-space />
|
||||||
</div>
|
<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">
|
<q-select
|
||||||
<d-table
|
id="visibleColumns"
|
||||||
ref="table"
|
for="visibleColumns"
|
||||||
:columns="dataStore.columns"
|
v-model="dataStore.visibleColumns"
|
||||||
:rows="dataStore.rows"
|
multiple
|
||||||
row-key="id"
|
outlined
|
||||||
flat
|
dense
|
||||||
bordered
|
options-dense
|
||||||
:paging="true"
|
:display-value="$q.lang.table.columns"
|
||||||
dense
|
emit-value
|
||||||
class="custom-header-table"
|
map-options
|
||||||
:visible-columns="dataStore.visibleColumns"
|
:options="dataStore.columns"
|
||||||
:rows-per-page-options="[10, 25, 50, 100]"
|
option-value="name"
|
||||||
@update:pagination="updatePagination"
|
style="min-width: 140px"
|
||||||
>
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
<template v-slot:pagination="scope">
|
/>
|
||||||
ทั้งหมด {{ total }} รายการ
|
</div>
|
||||||
<q-pagination
|
<div class="col-12 row">
|
||||||
v-model="pagination.page"
|
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||||
active-color="primary"
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
color="dark"
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
|
||||||
:max="Number(totalList)"
|
<datepicker
|
||||||
size="sm"
|
v-model="formData.year"
|
||||||
boundary-links
|
class="col-2"
|
||||||
direction-links
|
:locale="'th'"
|
||||||
:max-pages="5"
|
autoApply
|
||||||
@update:model-value="getData"
|
year-picker
|
||||||
></q-pagination>
|
:enableTimePicker="false"
|
||||||
</template>
|
@update:model-value="dataUpdate"
|
||||||
<template v-slot:header="props">
|
>
|
||||||
<q-tr :props="props">
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<q-th auto-width></q-th>
|
<template #year-overlay-value="{ value }">{{
|
||||||
<q-th
|
parseInt(value + 543)
|
||||||
v-for="col in props.cols"
|
}}</template>
|
||||||
:key="col.name"
|
<template #trigger>
|
||||||
:props="props"
|
<q-input
|
||||||
style="color: #000000; font-weight: 500"
|
dense
|
||||||
>
|
outlined
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
:model-value="
|
||||||
</q-th>
|
formData.year === 0
|
||||||
</q-tr>
|
? 'ทั้งหมด'
|
||||||
</template>
|
: Number(formData.year) + 543
|
||||||
<template v-slot:body="props">
|
"
|
||||||
<q-tr :props="props">
|
:label="`${'ปีงบประมาณ'}`"
|
||||||
<q-td auto-width>
|
>
|
||||||
<q-btn
|
<template v-if="formData.year" v-slot:append>
|
||||||
v-if="checkPermission($route)?.attrIsGet"
|
<q-icon
|
||||||
id="addComplaints"
|
name="cancel"
|
||||||
for="addComplaints"
|
@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
|
dense
|
||||||
flat
|
outlined
|
||||||
round
|
emit-value
|
||||||
color="info"
|
map-options
|
||||||
icon="mdi-eye"
|
hide-selected
|
||||||
@click="redirectToPageDetail(props.row.id)"
|
fill-input
|
||||||
><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:options="optionType"
|
||||||
|
@update:model-value="dataUpdate"
|
||||||
|
use-input
|
||||||
|
@filter="filterOptionFnType"
|
||||||
>
|
>
|
||||||
<q-btn
|
<template v-if="formData.type !== 'ALL'" v-slot:append>
|
||||||
v-if="
|
<q-icon
|
||||||
checkPermission($route)?.attrIsUpdate &&
|
name="cancel"
|
||||||
checkPermission($route)?.attrIsGet
|
@click.stop.prevent="
|
||||||
"
|
(optionType = type), (formData.type = 'ALL'), dataUpdate()
|
||||||
id="addComplaints"
|
"
|
||||||
for="addComplaints"
|
class="cursor-pointer"
|
||||||
flat
|
/>
|
||||||
|
</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
|
dense
|
||||||
round
|
outlined
|
||||||
color="edit"
|
emit-value
|
||||||
icon="edit"
|
hide-selected
|
||||||
@click="editPage(props.row.id)"
|
fill-input
|
||||||
><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:options="option"
|
||||||
|
@update:model-value="dataUpdate"
|
||||||
|
use-input
|
||||||
|
@filter="filterOptionFn"
|
||||||
>
|
>
|
||||||
</q-td>
|
<template v-if="formData.status !== 'ALL'" v-slot:append>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<q-icon
|
||||||
<div v-if="col.name == 'no'">
|
name="cancel"
|
||||||
{{
|
@click.stop.prevent="
|
||||||
(pagination.page - 1) * pagination.rowsPerPage +
|
(option = dataStore.statusOptions),
|
||||||
props.rowIndex +
|
(formData.status = 'ALL'),
|
||||||
1
|
dataUpdate()
|
||||||
}}
|
"
|
||||||
</div>
|
class="cursor-pointer"
|
||||||
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
/>
|
||||||
{{ props.row.title }}
|
</template>
|
||||||
</div>
|
<template v-slot:no-option>
|
||||||
<div v-else-if="col.name === 'profileType'">
|
<q-item>
|
||||||
{{
|
<q-item-section class="text-grey">
|
||||||
props.row.profileType
|
ไม่มีข้อมูล
|
||||||
? mainStore.convertType(props.row.profileType)
|
</q-item-section>
|
||||||
: "-"
|
</q-item>
|
||||||
}}
|
</template>
|
||||||
</div>
|
</q-select>
|
||||||
<div
|
</div>
|
||||||
v-else-if="col.name === 'description'"
|
</div>
|
||||||
class="table_ellipsis"
|
</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 : "-" }}
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</div>
|
</q-th>
|
||||||
<div v-else>
|
</q-tr>
|
||||||
{{ col.value ?? "-" }}
|
</template>
|
||||||
</div>
|
<template v-slot:body="props">
|
||||||
</q-td>
|
<q-tr :props="props">
|
||||||
</q-tr>
|
<q-td auto-width>
|
||||||
</template>
|
<q-btn
|
||||||
</d-table>
|
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>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watchEffect } from "vue";
|
import { ref, watchEffect } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
@ -12,7 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dateThaiRange, convertDateToAPI } = mixin;
|
const { dateThaiRange } = mixin;
|
||||||
const store = useDisciplineMainStore();
|
const store = useDisciplineMainStore();
|
||||||
const complainstStore = useComplainstDataStore();
|
const complainstStore = useComplainstDataStore();
|
||||||
const investigateStore = useInvestigateFactStore();
|
const investigateStore = useInvestigateFactStore();
|
||||||
|
|
@ -34,7 +34,7 @@ function onClose() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function fnSearch() {
|
function fnSearch() {
|
||||||
props.getData?.(1);
|
props.getData?.();
|
||||||
onClose();
|
onClose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -75,18 +75,17 @@ watchEffect(() => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<q-btn
|
||||||
<q-btn
|
size="12px"
|
||||||
size="12px"
|
flat
|
||||||
flat
|
round
|
||||||
round
|
color="blue"
|
||||||
color="blue"
|
icon="mdi-filter-variant"
|
||||||
icon="mdi-filter-variant"
|
@click="onSearch"
|
||||||
@click="onSearch"
|
>
|
||||||
>
|
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
||||||
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
</q-btn>
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-card class="col-12" style="width: 400px">
|
<q-card class="col-12" style="width: 400px">
|
||||||
<q-form greedy @submit.prevent @validation-success="fnSearch">
|
<q-form greedy @submit.prevent @validation-success="fnSearch">
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ export const useAppealComplainStore = defineStore("AppealComplainStore", () => {
|
||||||
* จัดเรียงข้อมูล
|
* จัดเรียงข้อมูล
|
||||||
* @param data ข้อมูลที่รับมาจาก API
|
* @param data ข้อมูลที่รับมาจาก API
|
||||||
*/
|
*/
|
||||||
function fetchAppealComplain(data: MainList[]) {
|
async function fetchAppealComplain(data: MainList[]) {
|
||||||
let dataList: RowList[] = data.map((e: MainList) => ({
|
let dataList: RowList[] = data.map((e: MainList) => ({
|
||||||
id: e.id,
|
id: e.id,
|
||||||
profileId: e.profileId,
|
profileId: e.profileId,
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export const useDisciplineDirectorDataStore = defineStore(
|
||||||
const rows = ref<DirectorRowsResponse[]>([]);
|
const rows = ref<DirectorRowsResponse[]>([]);
|
||||||
const visibleColumns = ref<string[]>([
|
const visibleColumns = ref<string[]>([
|
||||||
"no",
|
"no",
|
||||||
"fullName",
|
"firstName",
|
||||||
"position",
|
"position",
|
||||||
"email",
|
"email",
|
||||||
"phone",
|
"phone",
|
||||||
|
|
@ -34,7 +34,7 @@ export const useDisciplineDirectorDataStore = defineStore(
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "fullName",
|
name: "firstName",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ชื่อ-นามสกุล",
|
label: "ชื่อ-นามสกุล",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
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 {
|
import type {
|
||||||
investigateDisDataRowType,
|
investigateDisDataRowType,
|
||||||
DataOption,
|
DataOption,
|
||||||
|
|
@ -81,7 +81,7 @@ export const useInvestigateDisStore = defineStore(
|
||||||
"offenseDetails",
|
"offenseDetails",
|
||||||
"disciplinaryFaultLevel",
|
"disciplinaryFaultLevel",
|
||||||
"disciplinaryCaseFault",
|
"disciplinaryCaseFault",
|
||||||
"disciplinaryDate",
|
"disciplinaryDateStart",
|
||||||
"dateReceived",
|
"dateReceived",
|
||||||
"status",
|
"status",
|
||||||
]);
|
]);
|
||||||
|
|
@ -113,8 +113,6 @@ export const useInvestigateDisStore = defineStore(
|
||||||
field: "respondentType",
|
field: "respondentType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "offenseDetails",
|
name: "offenseDetails",
|
||||||
|
|
@ -124,8 +122,6 @@ export const useInvestigateDisStore = defineStore(
|
||||||
field: "offenseDetails",
|
field: "offenseDetails",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "disciplinaryFaultLevel",
|
name: "disciplinaryFaultLevel",
|
||||||
|
|
@ -135,8 +131,6 @@ export const useInvestigateDisStore = defineStore(
|
||||||
field: "disciplinaryFaultLevel",
|
field: "disciplinaryFaultLevel",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "disciplinaryCaseFault",
|
name: "disciplinaryCaseFault",
|
||||||
|
|
@ -146,11 +140,9 @@ export const useInvestigateDisStore = defineStore(
|
||||||
field: "disciplinaryCaseFault",
|
field: "disciplinaryCaseFault",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "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",
|
align: "left",
|
||||||
label: "วันที่สอบสวน",
|
label: "วันที่สอบสวน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
|
@ -171,7 +163,7 @@ export const useInvestigateDisStore = defineStore(
|
||||||
name: "status",
|
name: "status",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "status",
|
field: "status",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export const useInvestigateFactStore = defineStore(
|
||||||
"respondentType",
|
"respondentType",
|
||||||
"offenseDetails",
|
"offenseDetails",
|
||||||
"investigationDetail",
|
"investigationDetail",
|
||||||
"dateInvestigate",
|
"investigationDateStart",
|
||||||
"investigationStatusResult",
|
"investigationStatusResult",
|
||||||
"dateReceived",
|
"dateReceived",
|
||||||
"status",
|
"status",
|
||||||
|
|
@ -101,8 +101,6 @@ export const useInvestigateFactStore = defineStore(
|
||||||
field: "respondentType",
|
field: "respondentType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "offenseDetails",
|
name: "offenseDetails",
|
||||||
|
|
@ -112,8 +110,6 @@ export const useInvestigateFactStore = defineStore(
|
||||||
field: "offenseDetails",
|
field: "offenseDetails",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "investigationDetail",
|
name: "investigationDetail",
|
||||||
|
|
@ -123,19 +119,15 @@ export const useInvestigateFactStore = defineStore(
|
||||||
field: "investigationDetail",
|
field: "investigationDetail",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "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",
|
align: "left",
|
||||||
label: "วันที่สืบสวน",
|
label: "วันที่สืบสวน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "dateInvestigate",
|
field: "dateInvestigate",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "investigationStatusResult",
|
name: "investigationStatusResult",
|
||||||
|
|
@ -145,8 +137,6 @@ export const useInvestigateFactStore = defineStore(
|
||||||
field: "investigationStatusResult",
|
field: "investigationStatusResult",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "dateReceived",
|
name: "dateReceived",
|
||||||
|
|
@ -156,8 +146,6 @@ export const useInvestigateFactStore = defineStore(
|
||||||
field: "dateReceived",
|
field: "dateReceived",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "status",
|
name: "status",
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export const useDisciplineResultStore = defineStore(
|
||||||
"offenseDetails",
|
"offenseDetails",
|
||||||
"disciplinaryFaultLevel",
|
"disciplinaryFaultLevel",
|
||||||
"disciplinaryCaseFault",
|
"disciplinaryCaseFault",
|
||||||
"disciplinaryDate",
|
"disciplinaryDateStart",
|
||||||
"resultDisciplineType",
|
"resultDisciplineType",
|
||||||
"resultTitleType",
|
"resultTitleType",
|
||||||
"resultOc",
|
"resultOc",
|
||||||
|
|
@ -77,8 +77,6 @@ export const useDisciplineResultStore = defineStore(
|
||||||
field: "respondentType",
|
field: "respondentType",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "offenseDetails",
|
name: "offenseDetails",
|
||||||
|
|
@ -88,8 +86,6 @@ export const useDisciplineResultStore = defineStore(
|
||||||
field: "offenseDetails",
|
field: "offenseDetails",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "disciplinaryFaultLevel",
|
name: "disciplinaryFaultLevel",
|
||||||
|
|
@ -99,8 +95,6 @@ export const useDisciplineResultStore = defineStore(
|
||||||
field: "disciplinaryFaultLevel",
|
field: "disciplinaryFaultLevel",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "disciplinaryCaseFault",
|
name: "disciplinaryCaseFault",
|
||||||
|
|
@ -110,11 +104,9 @@ export const useDisciplineResultStore = defineStore(
|
||||||
field: "disciplinaryCaseFault",
|
field: "disciplinaryCaseFault",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "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",
|
align: "left",
|
||||||
label: "วันที่สอบสวน",
|
label: "วันที่สอบสวน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
|
@ -162,7 +154,7 @@ export const useDisciplineResultStore = defineStore(
|
||||||
name: "status",
|
name: "status",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: false,
|
||||||
field: "status",
|
field: "status",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue