fix(complaints):sort
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
433de546a2
commit
5825f72e26
3 changed files with 167 additions and 187 deletions
|
|
@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
|
||||
|
||||
|
|
@ -25,51 +26,51 @@ const mixin = useCounterMixin();
|
|||
const complainstStore = useComplainstDataStore();
|
||||
const { fetchComplainst } = complainstStore;
|
||||
const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
|
||||
const { pagination, params, onRequest } = usePagination("", getList);
|
||||
|
||||
const filterRef = ref<HTMLInputElement | null>(null);
|
||||
const filterTable = ref<string>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
|
||||
const toptitle = ref<number>(0);
|
||||
const statusFilter = ref<string>("NEW");
|
||||
const option = ref<DataOption[]>(complainstStore.statusOptions);
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
/** ดึงข้อมูล เรื่องร้องเรียน */
|
||||
async function getList(page?: number) {
|
||||
async function getList() {
|
||||
const body = {
|
||||
page: page ? page : pagination.value.page,
|
||||
pageSize: pagination.value.rowsPerPage,
|
||||
...params.value,
|
||||
keyword: filterKeyword.value.trim(),
|
||||
status: statusFilter.value,
|
||||
...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
|
||||
...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
|
||||
...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
|
||||
...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
|
||||
...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
|
||||
...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
|
||||
...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
|
||||
...(store.formComplaint.dateReceived?.[0] && {
|
||||
dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
|
||||
}),
|
||||
...(store.formComplaint.dateReceived?.[1] && {
|
||||
dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
|
||||
}),
|
||||
...(store.formComplaint.respondentType && {
|
||||
respondentType: store.formComplaint.respondentType,
|
||||
}),
|
||||
...(store.formComplaint.offenseDetails && {
|
||||
offenseDetails: store.formComplaint.offenseDetails,
|
||||
}),
|
||||
...(store.formComplaint.levelConsideration && {
|
||||
levelConsideration: store.formComplaint.levelConsideration,
|
||||
}),
|
||||
...(store.formComplaint.dateConsideration?.[0] && {
|
||||
dateConsiderationStart: convertDateToAPI(
|
||||
store.formComplaint.dateConsideration[0]
|
||||
),
|
||||
}),
|
||||
...(store.formComplaint.dateConsideration?.[1] && {
|
||||
dateConsiderationEnd: convertDateToAPI(
|
||||
store.formComplaint.dateConsideration[1]
|
||||
),
|
||||
}),
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.complaintList(), body)
|
||||
//
|
||||
.then(async (res) => {
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / pagination.value.rowsPerPage
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
toptitle.value = res.data.result.total;
|
||||
const data = res.data.result.data;
|
||||
await fetchComplainst(data);
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
await fetchComplainst(result.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -102,13 +103,6 @@ function getSearch() {
|
|||
getList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
|
||||
onMounted(async () => {
|
||||
await getList();
|
||||
|
|
@ -119,99 +113,120 @@ onMounted(async () => {
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการเรื่องร้องเรียน
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
|
||||
<q-select
|
||||
v-model="statusFilter"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
hide-selected
|
||||
fill-input
|
||||
:options="option"
|
||||
@update:model-value="getSearch()"
|
||||
use-input
|
||||
@filter="filterOptionFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(option = complainstStore.statusOptions),
|
||||
(statusFilter = 'ALL'),
|
||||
getSearch()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-card flat bordered>
|
||||
<div class="row q-col-gutter-sm q-pa-md">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-xs-11">
|
||||
<q-select
|
||||
v-model="statusFilter"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
hide-selected
|
||||
fill-input
|
||||
:options="option"
|
||||
@update:model-value="getSearch()"
|
||||
use-input
|
||||
@filter="filterOptionFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-if="statusFilter !== 'ALL'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(option = complainstStore.statusOptions),
|
||||
(statusFilter = 'ALL'),
|
||||
getSearch()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsCreate"
|
||||
id="addComplaints"
|
||||
for="addComplaints"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-plus"
|
||||
@click="redirectToPageadd()"
|
||||
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
|
||||
>
|
||||
<div
|
||||
class="col-xs-1"
|
||||
v-if="checkPermission($route)?.attrIsCreate"
|
||||
>
|
||||
<q-btn
|
||||
id="addComplaints"
|
||||
for="addComplaints"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-plus"
|
||||
@click="redirectToPageadd()"
|
||||
><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-6"></div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-1">
|
||||
<DialogSearchAdvanced :get-data="() => getSearch()" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<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-5">
|
||||
<q-select
|
||||
id="visibleColumns"
|
||||
for="visibleColumns"
|
||||
v-model="complainstStore.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="complainstStore.columns"
|
||||
option-value="name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
|
||||
<q-input
|
||||
for="#search"
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหาเรื่องร้องเรียน"
|
||||
@keydown.enter.prevent="getSearch()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
id="visibleColumns"
|
||||
for="visibleColumns"
|
||||
v-model="complainstStore.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="complainstStore.columns"
|
||||
option-value="name"
|
||||
style="min-width: 140px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<TableComplaint
|
||||
:filter-table="filterTable"
|
||||
v-model:pagination="pagination"
|
||||
v-model:total="total"
|
||||
v-model:total-list="totalList"
|
||||
:toptitle="toptitle"
|
||||
:get-list="getList"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<TableComplaint
|
||||
v-model:pagination="pagination"
|
||||
:on-request="onRequest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import type { PropsTable } from "@/interface/index/PropsTable";
|
||||
|
||||
const router = useRouter();
|
||||
const complainstStore = useComplainstDataStore();
|
||||
|
||||
const total = defineModel<number>("total", { required: true });
|
||||
const totalList = defineModel<number>("totalList", { required: true });
|
||||
const pagination = defineModel<any>("pagination", { required: true });
|
||||
const pagination = defineModel<PropsTable.Pagination>("pagination", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:pagination"]);
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
getList: Function,
|
||||
filterTable: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
toptitle: {
|
||||
type: Number,
|
||||
onRequest: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
|
|||
"dateConsideration",
|
||||
"status",
|
||||
]);
|
||||
|
||||
/** หัวตาราง */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -124,12 +118,6 @@ function OpenEdit(id: string) {
|
|||
router.push(`/discipline/complaints/${id}`);
|
||||
}
|
||||
|
||||
/** ส่งค่ากลับไปหน้าหลัก */
|
||||
function updateProp(newPagination: any, page: number) {
|
||||
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
||||
emit("update:pagination", newPagination, page);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
|
||||
* @param id ไอดีระบุ
|
||||
|
|
@ -138,11 +126,6 @@ function onDetail(id: string) {
|
|||
router.push(`/discipline/complaints-detail/${id}`);
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: any) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
|
||||
onMounted(() => {
|
||||
complainstStore.columns = columns.value;
|
||||
|
|
@ -151,7 +134,7 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<d-table
|
||||
<p-table
|
||||
id="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -164,7 +147,8 @@ onMounted(() => {
|
|||
class="custom-header-table"
|
||||
:visible-columns="complainstStore.visibleColumns"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="props.onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -207,11 +191,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(pagination.page - 1) * pagination.rowsPerPage +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'title'" class="table_ellipsis">
|
||||
{{ props.row.title }}
|
||||
|
|
@ -222,21 +202,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="props.getList?.()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -75,18 +75,17 @@ watchEffect(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-filter-variant"
|
||||
@click="onSearch"
|
||||
>
|
||||
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-filter-variant"
|
||||
@click="onSearch"
|
||||
>
|
||||
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 400px">
|
||||
<q-form greedy @submit.prevent @validation-success="fnSearch">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue