แก้ฟิลเตอร์ สรรหา

This commit is contained in:
setthawutttty 2025-02-26 16:04:28 +07:00
parent 3bfb6687e8
commit 50e5652b43
13 changed files with 216 additions and 104 deletions

View file

@ -25,7 +25,7 @@ const props = defineProps({
const $q = useQuasar();
const mixin = useCounterMixin(); //
const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
const { date2Thai, modalDelete, modalConfirm, dateToISO, success,onSearchDataTable } = mixin;
const store = useExamDataStore();
const { examData, changeExamColumns } = store;
const id = ref<string>("");
@ -58,6 +58,7 @@ const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const total = ref<string>("-");
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);
const filter = ref<string>(""); //search data table
const { messageError, showLoader, hideLoader } = mixin;
@ -260,6 +261,11 @@ const fetchData = async () => {
startDate: new Date(r.durationStart),
endDate: new Date(r.durationEnd),
});
rowsData.value.push({
...r,
startDate: new Date(r.durationStart),
endDate: new Date(r.durationEnd),
});
calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
(d) => {
yearDiff = yearDiff + d.yearDiff;
@ -554,6 +560,14 @@ const getClass = (val: boolean) => {
"full-width cursor-pointer": !val,
};
};
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
</script>
<template>
@ -561,7 +575,8 @@ const getClass = (val: boolean) => {
<Table
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -9,8 +9,9 @@ const filterRef = ref<any>(null);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const filter = defineModel<string>("filter", { required: true });
const props = defineProps({
onSearch: Function,
count: Number,
pass: Number,
notpass: Number,
@ -133,21 +134,15 @@ function resetFilter() {
<q-input
standout
dense
:model-value="inputfilter"
v-model="filter"
ref="filterRef"
@update:model-value="updateInput"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
@keydown.enter="props.onSearch?.()"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon name="search" />
</template>
</q-input>
<!-- แสดงคอลมนใน table -->

View file

@ -5,6 +5,7 @@ import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
const attrs = ref<any>(useAttrs());
const filter = defineModel<string>("filter", { required: true });
const table = ref<any>(null);
const filterRef = ref<any>(null);
const editBtn = ref<boolean>(false);
@ -13,6 +14,7 @@ const initialPagination = ref<Pagination>({
});
const props = defineProps({
onSearch: Function,
inputfilter: String,
name: String,
icon: String,
@ -61,9 +63,6 @@ const emit = defineEmits([
"update:editvisible",
]);
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
@ -106,22 +105,15 @@ const resetFilter = () => {
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
v-model="filter"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
@keydown.enter="props.onSearch?.(name)"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon name="search" />
</template>
</q-input>
<!-- แสดงคอลมนใน table -->

View file

@ -3,6 +3,8 @@ import { ref, useAttrs, watch } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
const filter = defineModel<string>("filter", { required: true });
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
@ -12,6 +14,7 @@ const initialPagination = ref<Pagination>({
});
const props = defineProps({
onSearch: Function,
inputfilter: String,
iconLeft: Boolean,
name: String,
@ -110,21 +113,15 @@ function resetFilter() {
<q-input
standout
dense
:model-value="inputfilter"
v-model="filter"
ref="filterRef"
@update:model-value="updateInput"
@keydown.enter="onSearch"
outlined
placeholder="ค้นหา"
style="max-width: 200px"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon name="search" />
</template>
</q-input>
<!-- แสดงคอลมนใน table -->

View file

@ -17,7 +17,8 @@ const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
mixin;
const year = ref<string>("");
const round = ref<string>("");
@ -26,6 +27,7 @@ const count = ref<number>(0);
const pass = ref<number>(0);
const notpass = ref<number>(0);
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);
const importId = ref<string>(route.params.id as string); // Period Import Id
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([
@ -359,6 +361,7 @@ async function fetchData() {
});
}
rows.value = result;
rowsData.value = result;
}
})
.catch((e) => {
@ -398,6 +401,14 @@ async function candidateToPlacement() {
.onDismiss(() => {});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -459,7 +470,8 @@ onMounted(async () => {
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -4,8 +4,13 @@ import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import Table from "@/modules/03_recruiting/components/Table.vue";
const mixin = useCounterMixin();
const { onSearchDataTable } = mixin;
const $q = useQuasar(); // show dialog
const router = useRouter();
const file = ref<boolean>(true);
@ -104,6 +109,7 @@ const columns = ref<QTableProps["columns"]>([
* @param id
*/
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);
function clickEdit(id: string) {
router.push(`/compete/import/${id}`);
@ -127,6 +133,14 @@ function remove() {
})
.onDismiss(() => {});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
@ -137,7 +151,8 @@ function remove() {
<Table
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
@ -208,5 +223,4 @@ function remove() {
</q-card>
</template>
<style></style>

View file

@ -23,7 +23,7 @@ import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const { success, dateText, showLoader, hideLoader, messageError } = mixin;
const { success, dateText, showLoader, hideLoader, messageError,onSearchDataTable } = mixin;
const router = useRouter();
const name = ref<string>("");
@ -50,6 +50,7 @@ const textTittle = ref<string>("");
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const rows = ref<ResponseRecruitPeriod[]>([]);
const rowsData = ref<ResponseRecruitPeriod[]>([]);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
@ -182,6 +183,7 @@ async function fetchData() {
}
rows.value = result;
rowsData.value = result;
})
.catch((e) => {
messageError($q, e);
@ -432,6 +434,14 @@ async function checkSave() {
});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
/** ดึงข้อมูล เมื่อโหลดหน้า component */
onMounted(async () => {
hideLoader();
@ -449,7 +459,8 @@ onMounted(async () => {
style="max-height: 80vh"
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -17,7 +17,8 @@ const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
mixin;
const year = ref<string>("2566");
const round = ref<string>("1");
@ -208,6 +209,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const rows = ref<RecruitDetailResponse[]>([]);
const rowsData = ref<RecruitDetailResponse[]>([]);
/**
* ไปหนารายละเอยด ดการรอบคดเลอกคนพการ
@ -293,6 +295,7 @@ async function fetchData() {
}
rows.value = result;
rowsData.value = result;
if (result.length > 0) name.value = result[0].exam_name as string;
round.value = _data.round;
year.value = _data.year;
@ -335,6 +338,14 @@ async function candidateToPlacement() {
.onDismiss(() => {});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -397,7 +408,8 @@ onMounted(async () => {
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -24,8 +24,15 @@ import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const router = useRouter();
const mixin = useCounterMixin();
const { success, dateText, messageError, showLoader, hideLoader, date2Thai } =
mixin;
const {
success,
dateText,
messageError,
showLoader,
hideLoader,
date2Thai,
onSearchDataTable,
} = mixin;
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
@ -41,6 +48,7 @@ const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const modalHistory = ref<boolean>(false); //modal
const rows = ref<any[]>([]);
const rowsData = ref<any[]>([]);
const filter = ref<string>(""); //search data table
const filterHistory = ref<string>(""); //search data table
const textTittle = ref<string>("");
@ -218,6 +226,7 @@ async function fetchData() {
}
rows.value = result;
rowsData.value = result;
})
.catch((e) => {
messageError($q, e);
@ -405,6 +414,14 @@ async function checkSave() {
});
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -420,7 +437,8 @@ onMounted(async () => {
style="max-height: 80vh"
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -17,9 +17,11 @@ import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/respo
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
mixin;
const rows = ref<ResponsePeriodExam[]>([]);
const rowsData = ref<ResponsePeriodExam[]>([]);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
@ -123,50 +125,52 @@ async function fetchData() {
.then((res) => {
const data = res.data.result;
rows.value = [];
data.map((r: RequestPeriodExam) => {
rows.value.push({
id: r.id,
name: r.name,
checkDocument: r.checkDocument,
checkDisability: r.checkDisability,
round: r.round,
yearly: r.year,
fee: r.fee,
announcementExam: r.announcementExam,
dateAnnounce:
r.announcementDate !== null ? new Date(r.announcementDate) : null,
dateAnnouncement:
r.announcementStartDate !== null && r.announcementEndDate !== null
? [
new Date(r.announcementStartDate),
new Date(r.announcementEndDate),
]
: null,
dateRegister:
r.registerStartDate !== null && r.registerEndDate !== null
? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
: null,
dateExam: r.examDate !== null ? new Date(r.examDate) : null,
datePayment:
r.paymentStartDate !== null && r.paymentEndDate !== null
? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
: null,
organizationName: {
id: r.organizationId,
name: r.organizationName,
},
organizationShortName: {
id: r.organizationCodeId,
name: r.organizationCodeName,
},
positionExam: [],
pay: r.bankExam.length > 0 ? "payment2" : "payment1",
bankExam: [],
editor: r.detail,
note: r.note,
category: r.category,
});
});
rowsData.value = [];
const list = data.map((r: RequestPeriodExam) => ({
id: r.id,
name: r.name,
checkDocument: r.checkDocument,
checkDisability: r.checkDisability,
round: r.round,
yearly: r.year,
fee: r.fee,
announcementExam: r.announcementExam,
dateAnnounce:
r.announcementDate !== null ? new Date(r.announcementDate) : null,
dateAnnouncement:
r.announcementStartDate !== null && r.announcementEndDate !== null
? [
new Date(r.announcementStartDate),
new Date(r.announcementEndDate),
]
: null,
dateRegister:
r.registerStartDate !== null && r.registerEndDate !== null
? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
: null,
dateExam: r.examDate !== null ? new Date(r.examDate) : null,
datePayment:
r.paymentStartDate !== null && r.paymentEndDate !== null
? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
: null,
organizationName: {
id: r.organizationId,
name: r.organizationName,
},
organizationShortName: {
id: r.organizationCodeId,
name: r.organizationCodeName,
},
positionExam: [],
pay: r.bankExam.length > 0 ? "payment2" : "payment1",
bankExam: [],
editor: r.detail,
note: r.note,
category: r.category,
}));
rows.value = list;
rowsData.value = list;
})
.catch((e) => {
messageError($q, e);
@ -195,6 +199,14 @@ function dateThaiRange(val: [Date, Date]) {
}
}
function onSearch() {
rows.value = onSearchDataTable(
filter.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -208,7 +220,8 @@ onMounted(async () => {
<data-table
:rows="rows"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -33,12 +33,14 @@ const {
messageError,
showLoader,
hideLoader,
onSearchDataTable
} = mixin;
const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const examData = ref<ResponsePeriodExam[]>([]);
const examDataData = ref<ResponsePeriodExam[]>([]);
const visibleColumns = ref<String[]>([
"no",
"announcementExam",
@ -215,6 +217,7 @@ async function fetchData() {
});
}
examData.value = result;
examDataData.value = result;
})
.catch((e) => {
messageError($q, e);
@ -283,6 +286,14 @@ function openDetail(col: ResponsePeriodExam) {
router.push(`/qualify/period-detail/${col.id}`);
}
function onSearch() {
examData.value = onSearchDataTable(
filter.value,
examDataData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
hideLoader();
await fetchData();
@ -298,7 +309,8 @@ onMounted(async () => {
style="max-height: 80vh"
:rows="examData"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"

View file

@ -33,6 +33,7 @@ const {
hideLoader,
dialogConfirm,
dialogRemove,
onSearchDataTable,
} = mixin;
const previous = ref<boolean>(false);
@ -66,7 +67,9 @@ const districtOptions = ref<DataOption[]>([]);
const subdistrictOptionsMain = ref<zipCodeOption[]>([]);
const subdistrictOptions = ref<zipCodeOption[]>([]);
const cmsGoverment = ref<CmsTable[]>([]);
const cmsGovermentData = ref<CmsTable[]>([]);
const cmsAgency = ref<CmsTable[]>([]);
const cmsAgencyData = ref<CmsTable[]>([]);
const web = ref<WebType>({
by: "",
thai: "",
@ -435,6 +438,7 @@ async function fetchData() {
address.value.districtId = data.districtId;
address.value.subdistrictId = data.subDistrictId;
cmsGoverment.value = [];
cmsGovermentData.value = [];
if (data.cmsGovernments.length > 0) {
let setData: CmsTable[] = [];
data.cmsGovernments.map((r: CmsTable) => {
@ -447,9 +451,11 @@ async function fetchData() {
});
});
cmsGoverment.value = setData;
cmsGovermentData.value = setData;
}
cmsAgency.value = [];
cmsAgencyData.value = [];
if (data.cmsAgencys.length > 0) {
let setData: CmsTable[] = [];
data.cmsAgencys.map((r: CmsTable) => {
@ -462,6 +468,7 @@ async function fetchData() {
});
});
cmsAgency.value = setData;
cmsAgencyData.value = setData;
}
})
.catch((e: any) => {
@ -770,6 +777,22 @@ function filterSelector(val: string, update: Function, refData: string) {
}
}
function onSearch(type: string) {
if (type == "ส่วนราชการ") {
cmsGoverment.value = onSearchDataTable(
filter.value,
cmsGovermentData.value,
columns.value ? columns.value : []
);
} else if (type == "หน่วยงาน") {
cmsAgency.value = onSearchDataTable(
filterAgency.value,
cmsAgencyData.value,
columns.value ? columns.value : []
);
}
}
onMounted(async () => {
await fetchData();
await fetchProvince();
@ -1176,7 +1199,8 @@ onMounted(async () => {
<ProfileTable
:rows="cmsGoverment"
:columns="columns"
:filter="filter"
v-model:filter="filter"
:onSearch="onSearch"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
@ -1221,8 +1245,9 @@ onMounted(async () => {
<div class="col-12 rounded-borders bg-white q-mt-md">
<ProfileTable
:rows="cmsAgency"
:onSearch="onSearch"
:columns="columns"
:filter="filterAgency"
v-model:filter="filterAgency"
:visible-columns="visibleColumnsAgency"
v-model:inputfilter="filterAgency"
v-model:inputvisible="visibleColumnsAgency"