ปรับวินัย

This commit is contained in:
setthawutttty 2023-12-27 15:50:41 +07:00
parent 117cc8aeb8
commit 5c1b67a642
12 changed files with 161 additions and 190 deletions

View file

@ -592,8 +592,6 @@ onMounted(() => {
:readonly="isReadonly"
hide-bottom-space
v-model="formData.description"
:rules="[(val) => !!val || 'กรุณาการข้อมูล']"
lazy-rules
label="รายละเอียดเรื่องร้องเรียน"
type="textarea"
rows="5"
@ -668,10 +666,6 @@ onMounted(() => {
emit-value
hide-bottom-space
map-options
:rules="[
(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`,
]"
lazy-rules
@update:model-value="
selectLevel(formData.levelConsideration);
changeFormData();
@ -712,10 +706,6 @@ onMounted(() => {
:readonly="isReadonly"
label="วันที่กำหนดพิจารณา"
hide-bottom-space
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่กำหนดพิจารณา'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
@ -746,8 +736,6 @@ onMounted(() => {
emit-value
hide-bottom-space
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
@ -785,11 +773,6 @@ onMounted(() => {
: null
"
label="วันที่แจ้งเตือนล่วงหน้า"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่วงหน้า'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
@ -820,10 +803,6 @@ onMounted(() => {
hide-bottom-space
emit-value
map-options
:rules="[
(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`,
]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
@ -838,8 +817,6 @@ onMounted(() => {
v-model="formData.appellant"
:readonly="isReadonly"
label="ผู้ร้องเรียน"
:rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
lazy-rules
hide-bottom-space
type="textarea"
rows="5"
@ -856,10 +833,6 @@ onMounted(() => {
outlined
hide-bottom-space
v-model="formData.result"
:rules="[
(val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
]"
lazy-rules
label="ผลการตรวจสอบเรื่องร้องเรียน"
type="textarea"
rows="5"

View file

@ -22,13 +22,13 @@ const router = useRouter();
/** stoer */
const complainstStore = useComplainstDataStore();
const { fetchComplainst } = complainstStore;
const filterRef = ref<HTMLInputElement | null>(null);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const statusFilter = ref<string>('ALL')
const statusFilter = ref<string>("ALL");
async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
rowsPerPage.value = rowPerpage;
@ -69,8 +69,16 @@ function filterFn() {
getList();
}
function dataUpdate(){
console.log(statusFilter.value)
function dataUpdate() {
console.log(statusFilter.value);
}
function resetFilter() {
filterKeyword.value = "";
if (filterRef.value) {
filterRef.value.focus();
getList();
}
}
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
@ -80,7 +88,9 @@ onMounted(async () => {
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">รายการเรองรองเรยน</div>
<div class="toptitle text-dark col-12 row items-center">
รายการเรองรองเรยน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-2">
@ -113,18 +123,25 @@ onMounted(async () => {
<q-space />
<q-input
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
id="filterTable"
for="filterTable"
standout
dense
outlined
v-model="filterKeyword"
label="ค้นหา"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>

View file

@ -638,8 +638,6 @@ onMounted(async () => {
map-options
hide-bottom-space
:options="investigateFactStore.respondentTypeOps"
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
lazy-rules
@filter="(inputValue: any,
doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
)"
@ -676,8 +674,6 @@ onMounted(async () => {
v-model="formData.organizationId"
:options="investigateFactStore.organizationIdOp"
label="เลือกสำนักงาน"
:rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
@ -808,11 +804,7 @@ onMounted(async () => {
outlined
hide-bottom-space
dense
lazy-rules
ref="investigationDetailRef"
:rules="[
(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
]"
v-model="formData.investigationDetail"
:options="investigateFactStore.investigationDetailOp"
label="ลักษณะการสืบสวน"
@ -852,12 +844,6 @@ onMounted(async () => {
hide-bottom-space
:label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
type="textarea"
:rules="[
(val) =>
formData.investigationDetail === 'OTHER'
? !!val || 'กรุณากรอกรายการอื่นๆ'
: true,
]"
@update:model-value="changeFormData()"
/>
</div>
@ -922,7 +908,6 @@ onMounted(async () => {
for="#daysExtend"
outlined
dense
lazy-rules
ref="daysExtendRef"
v-model="formData.investigationDaysExtend"
:options="investigateFactStore.daysExtendOp"
@ -930,11 +915,6 @@ onMounted(async () => {
emit-value
hide-bottom-space
map-options
:rules="[
(val) =>
(!!val && val != 0) ||
`${'กรุณาเลือกจำนวนวันที่ต้องการขยาย'}`,
]"
option-label="name"
option-value="id"
use-input
@ -981,7 +961,6 @@ onMounted(async () => {
"
outlined
dense
lazy-rules
borderless
hide-bottom-space
:model-value="
@ -991,11 +970,6 @@ onMounted(async () => {
)
: null
"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
]"
:label="`${'วันที่เริ่มการสืบสวน'}`"
>
<template v-slot:prepend>
@ -1047,7 +1021,6 @@ onMounted(async () => {
"
outlined
dense
lazy-rules
hide-bottom-space
borderless
:model-value="
@ -1055,11 +1028,6 @@ onMounted(async () => {
? date2Thai(formData.investigationDateEnd as Date)
: null
"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสืบสวน'}`"
>
<template v-slot:prepend>
@ -1220,10 +1188,8 @@ onMounted(async () => {
outlined
ref="investigationDescriptionRef"
dense
lazy-rules
borderless
v-model="formData.investigationDescription"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
type="textarea"
@ -1254,12 +1220,8 @@ onMounted(async () => {
outlined
dense
:readonly="isReadonly"
lazy-rules
ref="investigationStatusResultRef"
v-model="formData.investigationStatusResult"
:rules="[
(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
]"
:options="mainStore.statusResultOptions"
label="ผลการสืบสวน"
emit-value
@ -1295,10 +1257,6 @@ onMounted(async () => {
dense
ref="investigationCauseTextRef"
v-model="formData.investigationCauseText"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
]"
:options="mainStore.causeTextOptions"
label="ร้ายแรง/ไม่ร้ายแรง"
emit-value
@ -1325,10 +1283,8 @@ onMounted(async () => {
ref="resultRef"
:readonly="isReadonly"
dense
lazy-rules
borderless
v-model="formData.result"
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
hide-bottom-space
:label="`${'เหตุผล'}`"
type="textarea"
@ -1468,8 +1424,6 @@ onMounted(async () => {
v-model="formData.documentFile"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
clearable
>

View file

@ -18,13 +18,14 @@ const $q = useQuasar(); //ใช้ noti quasar
/** ค้นหาข้อมูลในตาราง */
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const resetFilter = () => {
function resetFilter() {
filterKeyword.value = "";
if (filterRef.value) {
filterRef.value.focus();
getList();
}
};
const statusFilter = ref<string>('ALL')
}
const statusFilter = ref<string>("ALL");
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
@ -90,8 +91,12 @@ async function editPage(id: string) {
router.push(`/discipline/investigatefacts/${id}`);
}
function dataUpdate(){
console.log(statusFilter.value)
function dataUpdate() {
console.log(statusFilter.value);
}
function filterFn() {
getList();
}
/**
@ -133,6 +138,7 @@ onMounted(async () => {
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
@ -168,7 +174,6 @@ onMounted(async () => {
ref="table"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
:filter="filterKeyword"
row-key="interrogated"
flat
bordered
@ -214,10 +219,10 @@ onMounted(async () => {
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
(currentPage - 1) * Number(pagination.rowsPerPage) +
props.rowIndex +
1
}}
</div>
<div>
{{ col.value }}

View file

@ -19,28 +19,23 @@ const { fetchList } = dataInvestigateDis;
const rowsPerPage = ref<number>(10);
const $q = useQuasar(); // show dialog
const router = useRouter();
const filter = ref<string>(""); //search data table
const page = ref<number>(1);
const maxPage = ref<number>(1);
async function fetchListDisciplinary() {
showLoader();
await http
.get(
config.API.disciplineDisciplinary() +
`?page=${page.value}&pageSize=${rowsPerPage.value}`
`?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filter.value}`
)
.then((res) => {
const data = res.data.result.data;
maxPage.value = Math.ceil(
res.data.result.total / rowsPerPage.value
);
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
fetchList(data);
})
.catch((err) => {
})
.catch((err) => {})
.finally(() => {
hideLoader();
});
@ -78,7 +73,6 @@ onMounted(async () => {
style="max-height: 80vh"
:rows="dataInvestigateDis.rows"
:columns="dataInvestigateDis.columns"
:filter="filter"
:visible-columns="dataInvestigateDis.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="dataInvestigateDis.visibleColumns"
@ -89,6 +83,7 @@ onMounted(async () => {
:rowsPerPage="rowsPerPage"
:page="page"
:maxPage="maxPage"
:fetchListDisciplinary="fetchListDisciplinary"
@update:pagination="updatePagingProp"
v-model:open-edit="openEdit"
>

View file

@ -9,7 +9,7 @@ const filterRef = ref<any>(null);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const currentPage = ref<number>(1);
const statusFilter = ref<string>('ALL')
const statusFilter = ref<string>("ALL");
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -29,6 +29,10 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetchListDisciplinary: {
type: Function,
default: () => console.log("not function"),
},
nornmalData: {
type: Boolean,
defualt: true,
@ -86,6 +90,7 @@ function resetFilter() {
// reset X
emit("update:inputfilter", "");
filterRef.value.focus();
props.fetchListDisciplinary?.();
}
function updateProp(newPagination: any, page: number) {
@ -108,28 +113,31 @@ watch(
}
);
function dataUpdate(){
console.log(statusFilter.value)
function dataUpdate() {
console.log(statusFilter.value);
}
function filterFn() {
props.fetchListDisciplinary?.();
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<div class="col-2">
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="dataInvestigateDis.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<q-select
v-model="statusFilter"
label="สถานะ"
dense
outlined
emit-value
map-options
option-label="name"
option-value="id"
:options="dataInvestigateDis.statusOptions"
@update:model-value="dataUpdate"
/>
</div>
<q-space />
<!-- นหาขอความใน table -->
<q-input
@ -143,6 +151,7 @@ console.log(statusFilter.value)
placeholder="ค้นหา"
style="max-width: 200px"
class="col-xs-12 col-sm-3 col-md-2"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />

View file

@ -8,7 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
import DialogHistory from '@/modules/11_discipline/components/4_Result/DialogHistory.vue'
import DialogHistory from "@/modules/11_discipline/components/4_Result/DialogHistory.vue";
import type {
FormData,
@ -45,8 +45,8 @@ const consideredAgency = ref<string>("");
const organizationOption = ref<DataOption[]>([]);
/** ตัวแปร ref สำหรับแสดง validate */
const detailRef = ref<Object | null>(null);
const modalHistory = ref<boolean>(false)
const personalId = ref<string>('')
const modalHistory = ref<boolean>(false);
const personalId = ref<string>("");
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -233,15 +233,14 @@ function confirmDelete(docid: string) {
});
}
function openDetial(id:string){
personalId.value = id
modalHistory.value = true
function openDetial(id: string) {
personalId.value = id;
modalHistory.value = true;
}
function closeDetail(){
modalHistory.value = false
function closeDetail() {
modalHistory.value = false;
}
</script>
<template>
<div class="row q-col-gutter-sm">
@ -276,8 +275,6 @@ function closeDetail(){
map-options
hide-bottom-space
:options="dataStore.complainantoptions"
:rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
lazy-rules
@update:model-value="selectComplainant(respondentType)"
@filter="(inputValue: any,
doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
@ -311,8 +308,6 @@ function closeDetail(){
v-model="organizationId"
:options="organizationOption"
label="เลือกสำนักงาน"
:rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
lazy-rules
/>
</div>
<div class="row col-12" v-if="respondentType === 'PERSON'">
@ -347,7 +342,6 @@ function closeDetail(){
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{
col.label
@ -361,21 +355,23 @@ function closeDetail(){
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'" @click="openDetial(props.row.id)">
<div
v-if="col.name == 'no'"
@click="openDetial(props.row.id)"
>
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'info'">
<router-link
target="_blank"
:to="`/registry/${props.row.personId}`"
><q-icon name="info" color="info" size="sm"
><q-tooltip
>อมลในทะเบยนประว</q-tooltip
>
</q-icon></router-link
>
target="_blank"
:to="`/registry/${props.row.personId}`"
><q-icon name="info" color="info" size="sm"
><q-tooltip
>อมลในทะเบยนประว</q-tooltip
>
</q-icon></router-link
>
</div>
<div
v-else-if="col.name === 'organization'"
@ -405,8 +401,6 @@ function closeDetail(){
for="#detail"
label="สรุปผลการพิจารณา"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
@ -456,7 +450,6 @@ function closeDetail(){
<template #trigger>
<q-input
dense
lazy-rules
:class="inputEdit(isReadonly)"
outlined
:model-value="
@ -514,7 +507,6 @@ function closeDetail(){
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
clearable
>
@ -582,10 +574,9 @@ function closeDetail(){
</div>
</div>
<DialogHistory
:modal="modalHistory"
:close="closeDetail"
:person-id="personalId"
<DialogHistory
:modal="modalHistory"
:close="closeDetail"
:person-id="personalId"
/>
</template>

View file

@ -92,12 +92,12 @@ onMounted(async () => {
:paging="true"
:titleText="''"
:page="page"
:fetchListResult="fetchListResult"
:pageSize="pageSize"
:maxPage="maxPage"
@update:queryString="updateQueryString"
v-model:open-edit="openEdit"
>
</Table>
</div>
</q-card>

View file

@ -22,6 +22,10 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetchListResult: {
type: Function,
default: () => console.log("not function"),
},
openEdit: {
type: Function,
default: () => console.log("not function"),
@ -68,6 +72,7 @@ function resetFilter() {
// reset X
emit("update:inputfilter", "");
filterRef.value.focus();
props.fetchListResult?.();
}
function updateRowsPerPage(newPagination: any) {
@ -75,10 +80,6 @@ function updateRowsPerPage(newPagination: any) {
currentPage.value = 1;
}
function filterFn() {
updatePaging(1, Number(pagination.value.rowsPerPage), filter.value);
}
function updatePaging(p: number, pS: number, key: string) {
emit("update:queryString", p, pS, key);
}
@ -95,6 +96,13 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
function dataUpdate() {
console.log(statusFilter.value);
}
function updateInput(value: string | number | null) {
emit("update:inputfilter", value);
}
function filterFn() {
props.fetchListResult?.();
}
</script>
<template>
@ -118,18 +126,19 @@ function dataUpdate() {
<q-input
standout
dense
v-model="filter"
:model-value="inputfilter"
ref="filterRef"
@keydown.enter.prevent="filterFn"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
class="col-xs-12 col-sm-3 col-md-2"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="filter !== ''"
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"

View file

@ -5,7 +5,7 @@ import { useQuasar } from "quasar";
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
import config from "@/app.config";
import http from "@/plugins/http";
import DialogTotal from '@/modules/11_discipline/components/6_BasicInformation/Director/DialogInvestigateTotal.vue'
import DialogTotal from "@/modules/11_discipline/components/6_BasicInformation/Director/DialogInvestigateTotal.vue";
const $q = useQuasar();
const dataStore = useDisciplineDirectorDataStore();
@ -103,12 +103,12 @@ function resetFilter() {
filterKeyword.value = "";
if (filterRef.value) {
filterRef.value.focus();
getList();
}
}
function filterFn() {
getList();
console.log("enter", filterKeyword.value);
}
function openDetail(title: string) {
@ -116,8 +116,8 @@ function openDetail(title: string) {
modalDetail.value = true;
}
function closeDetail(){
modalDetail.value = false
function closeDetail() {
modalDetail.value = false;
}
/**
* งขอมลจำลองไปย store
@ -190,7 +190,6 @@ onMounted(() => {
<d-table
:columns="dataStore.columns"
:rows="dataStore.rows"
:filter="filterKeyword"
row-key="tb-list"
flat
bordered

View file

@ -129,10 +129,11 @@ const columns = ref<QTableProps["columns"]>([
const openModal = () => (modal.value = true);
const closeModal = () => (modal.value = false);
const resetFilter = () => {
function resetFilter(){
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
getList()
};
const currentPage = ref<number>(1);
@ -228,6 +229,10 @@ watch(
}
);
function filterFn() {
getList();
}
/** เรียกใช้งานเมื่อเริ่มหน้าเว็ป */
onMounted(() => {
getList();
@ -257,25 +262,27 @@ onMounted(() => {
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="dataStore.visibleColumns"
@ -298,7 +305,6 @@ onMounted(() => {
<d-table
:columns="dataStore.columns"
:rows="dataStore.rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"

View file

@ -236,6 +236,12 @@ function yearAll() {
formData.year = 0;
getData();
}
function resetFilter(){
filterKeyword.value = "";
getData()
};
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
getData();
@ -341,18 +347,25 @@ onMounted(async () => {
<q-space />
<q-input
for="#search"
class="col-xs-12 col-sm-3 col-md-2"
id="filterTable"
for="filterTable"
standout
dense
outlined
v-model="filterKeyword"
label="ค้นหา"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>