เพิ่มฟิลเตอร์

This commit is contained in:
setthawutttty 2025-02-21 13:57:53 +07:00
parent b925026c2f
commit 07962731fa
12 changed files with 403 additions and 36 deletions

View file

@ -17,6 +17,10 @@ interface ItemTabs {
name: string;
}
interface DataOptions{
id:string,
name:string
}
interface FormOrderPlacementMainData {
Order: string;
OrderNum: string;
@ -166,4 +170,5 @@ export type {
MemBerType,
PersonsAppointData,
FormDataAppoint,
DataOptions
};

View file

@ -6,6 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
import type {
FormPlacementMainData,
OpfillterTypeSt,
DataOptions,
} from "@/modules/05_placement/interface/request/Main";
import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
@ -357,6 +358,15 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
value: "ออกคำสั่งเสร็จแล้ว",
},
]);
const statusOp = ref<DataOptions[]>([]);
const statusMainOp = ref<DataOptions[]>([
{ id: "WAITTING", name: "รอดำเนินการ" },
{ id: "PENDING", name: "เลือกตำแหน่งแล้ว" },
{ id: "APPROVE", name: "อนุมัติ" },
{ id: "REJECT", name: "ไม่อนุมัติ" },
{ id: "REPORT", name: "ส่งรายชื่อไปออกคำสั่ง" },
{ id: "DONE", name: "ออกคำสั่งเสร็จแล้ว" },
]);
const statusText = (val: string) => {
switch (val) {
@ -377,6 +387,22 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
return "-";
}
};
/**
* Option Filter
* @param val
* @param update Function
*/
function filterOption(val: string, update: any) {
update(() => {
const needle = val.toLowerCase();
statusOp.value = statusMainOp.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
});
}
function statusProbationMain(val: number) {
switch (val) {
case 1:
@ -406,5 +432,8 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
statusText,
statusProbationMain,
optionStatusProbation,
statusOp,
statusMainOp,
filterOption,
};
});

View file

@ -17,12 +17,14 @@ import DialogOrders from "@/modules/05_placement/components/Transfer/DialogOrder
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { statusText } = useTransferDataStore();
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
mixin;
const modal = ref<boolean>(false); //
const dataTransfer = ref<ResponseData[]>([]); //
const status = ref<string>("");
//Table
const rows = ref<ResponseData[]>([]); //
@ -123,7 +125,7 @@ const visibleColumns = ref<string[]>([
async function fetchData() {
showLoader();
await http
.get(config.API.transfer)
.get(config.API.transfer + `?status=${status.value}`)
.then(async (res) => {
const data = await res.data.result;
rows.value = data;
@ -185,7 +187,42 @@ onMounted(async () => {
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-12 q-col-gutter-sm">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),fetchData()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), fetchData()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="openModalOrder"

View file

@ -23,8 +23,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const transferStore = useTransferDataStore();
const { statusText } = transferStore;
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
showLoader,
hideLoader,
@ -35,6 +35,7 @@ const {
onSearchDataTable,
} = mixin;
const status = ref<string>("");
const dataRecevice = ref<ResponseData[]>([]); //
const filters = ref<ResponseRow[]>([]); //
const dataRows = ref<ResponseRow>(); //
@ -166,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
async function fecthlistRecevice() {
showLoader();
await http
.get(config.API.receiveData())
.get(config.API.receiveData() + `?status=${status.value}`)
.then(async (res) => {
const data = await res.data.result;
dataRecevice.value = data;
@ -353,7 +354,42 @@ onMounted(async () => {
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-12 q-gutter-sm">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),fecthlistRecevice()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), fecthlistRecevice()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
flat

View file

@ -18,8 +18,8 @@ import Dialogbody from "@/modules/05_placement/components/Help-Government/Dialog
const $q = useQuasar();
const router = useRouter();
const transferStore = useTransferDataStore();
const { statusText } = transferStore;
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
@ -34,6 +34,8 @@ const {
} = mixin;
/** Table*/
const status = ref<string>("");
const modal = ref<boolean>(false); // popup ;
const filterKeyword = ref<string>(""); //
const filterKeyword2 = ref<string>(""); //
@ -182,7 +184,7 @@ const visibleColumns = ref<string[]>([
async function getData() {
showLoader();
await http
.get(config.API.officerMain())
.get(config.API.officerMain() + `?status=${status.value}`)
.then(async (res) => {
const data = await res.data.result;
rows.value = data;
@ -268,7 +270,42 @@ onMounted(async () => {
<q-card flat bordered class="col-12">
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),getData()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), getData()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="openModalOrder"

View file

@ -18,7 +18,8 @@ import Dialogbody from "@/modules/05_placement/components/Repatriate/DialogOrder
const $q = useQuasar();
const router = useRouter();
const { statusText } = useTransferDataStore();
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
date2Thai,
messageError,
@ -31,6 +32,7 @@ const {
} = useCounterMixin();
const modal = ref<boolean>(false); //
const status = ref<string>("");
// Table
const filterKeyword = ref<string>(""); //
@ -152,7 +154,7 @@ function openDetail(id: string) {
async function getData() {
showLoader();
await http
.get(config.API.repatriationMain())
.get(config.API.repatriationMain()+`?status=${status.value}`)
.then(async (res) => {
const data = await res.data.result;
rows.value = data;
@ -231,7 +233,42 @@ onMounted(async () => {
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),getData()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), getData()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
flat

View file

@ -22,8 +22,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เ
const $q = useQuasar();
const router = useRouter();
const storeFn = useTransferDataStore();
const { statusText } = storeFn;
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
showLoader,
hideLoader,
@ -34,6 +34,8 @@ const {
onSearchDataTable,
} = useCounterMixin();
const status = ref<string>("");
const modal = ref<boolean>(false); // popup
const modalTree = ref<boolean>(false); // popup - -
const posType = ref<string>(""); //
@ -176,7 +178,7 @@ const pagination = ref({
async function fecthlistappointment() {
showLoader();
await http
.get(config.API.appointmentMain())
.get(config.API.appointmentMain()+`?status=${status.value}`)
.then((res) => {
let response = res.data.result;
listRecevice.value = response;
@ -316,6 +318,41 @@ onMounted(async () => {
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12 q-col-gutter-sm">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),fecthlistappointment()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), fecthlistappointment()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"

View file

@ -20,8 +20,8 @@ import Dialogbody from "@/modules/05_placement/components/AppointEmployee/Dialog
const $q = useQuasar();
const router = useRouter();
const storeFn = useTransferDataStore();
const { statusText } = storeFn;
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const mixin = useCounterMixin(); //
const {
showLoader,
@ -33,6 +33,8 @@ const {
onSearchDataTable,
} = mixin;
const status = ref<string>("");
const personalId = ref<string>("");
const modal = ref<boolean>(false); // popup
const modalTree = ref<boolean>(false); // popup
@ -173,7 +175,7 @@ const columns = ref<QTableProps["columns"]>([
async function fecthlistappointment() {
showLoader();
await http
.get(config.API.appointEmployee())
.get(config.API.appointEmployee()+`?status=${status.value}`)
.then(async (res) => {
let response = await res.data.result;
listRecevice.value = response;
@ -314,7 +316,42 @@ onMounted(async () => {
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),fecthlistappointment()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), fecthlistappointment()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="popup()"
@ -528,7 +565,9 @@ onMounted(async () => {
/>
<DialogOrgSelectEmployee
:title="`เลือกหน่วยงานที่รับ${typeModal !== 'MOVE'? `การปรับระดับชั้นงาน`:`ย้าย`}`"
:title="`เลือกหน่วยงานที่รับ${
typeModal !== 'MOVE' ? `การปรับระดับชั้นงาน` : `ย้าย`
}`"
v-model:modal="modalTree"
v-model:type="typeModal"
:pos-type="posType"

View file

@ -19,8 +19,8 @@ import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue
/** use*/
const $q = useQuasar();
const router = useRouter();
const storeFn = useTransferDataStore();
const { statusText } = storeFn;
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
showLoader,
hideLoader,
@ -32,6 +32,7 @@ const {
} = useCounterMixin();
const modal = ref<boolean>(false);
const status = ref<string>("");
/** Table*/
const rows = ref<listMain[]>([]); //
@ -133,7 +134,7 @@ const pagination = ref({
async function fecthlistOthet() {
showLoader();
await http
.get(config.API.otherMain())
.get(config.API.otherMain() + `?status=${status.value}`)
.then((res) => {
let response = res.data.result;
rows.value = response;
@ -221,7 +222,42 @@ onMounted(() => {
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),fecthlistOthet()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), fecthlistOthet()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="popup()"

View file

@ -18,7 +18,8 @@ import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOr
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const transferStore = useTransferDataStore();
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
date2Thai,
messageError,
@ -28,8 +29,9 @@ const {
onSearchDataTable,
dialogRemove,
} = mixin;
const { statusText } = transferStore;
const modal = ref<boolean>(false);
const status = ref<string>("WAITTING");
/** คอลัมน์ที่แสดง */
const visibleColumns = ref<string[]>([
@ -154,7 +156,7 @@ function openModalOrder() {
async function getData() {
showLoader();
await http
.get(config.API.retirementOut+`/officer`)
.get(config.API.retirementOut + `/officer?status=${status.value}`)
.then((res: any) => {
const data = res.data.result;
rows.value = data;
@ -214,7 +216,42 @@ onMounted(async () => {
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),getData()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), getData()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="openModalOrder"

View file

@ -18,7 +18,8 @@ import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOr
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const transferStore = useTransferDataStore();
const store = useTransferDataStore();
const { statusText, filterOption } = useTransferDataStore();
const {
date2Thai,
messageError,
@ -28,8 +29,9 @@ const {
onSearchDataTable,
dialogRemove,
} = mixin;
const { statusText } = transferStore;
const modal = ref<boolean>(false);
const status = ref<string>("WAITTING");
/** คอลัมน์ที่แสดง */
const visibleColumns = ref<string[]>([
@ -154,7 +156,7 @@ function openModalOrder() {
async function getData() {
showLoader();
await http
.get(config.API.retirementOut + `/employee`)
.get(config.API.retirementOut + `/employee?status=${status.value}`)
.then((res: any) => {
const data = res.data.result;
rows.value = data;
@ -216,7 +218,42 @@ onMounted(async () => {
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<div class="row">
<div class="col-2">
<q-select
:model-value="status ? status : 'ทั้งหมด'"
outlined
dense
label="สถานะ"
:options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
emit-value
map-options
option-label="name"
option-value="id"
fill-input
use-input
hide-selected
bg-color="white"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
@update:model-value="(value:string)=>{(status = value),getData()}"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
<template v-if="status" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = ''), getData()"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-select>
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="openModalOrder"

View file

@ -111,9 +111,9 @@ const retireTypeOpsMain = ref<DataOption[]>([
const retireTypeOpsMainEMP = ref<DataOption[]>([
{ id: "RETIRE", name: "เกษียณ" },
{ id: "RETIRE_RESIGN", name: "ลาออก" },
{ id: "RETIRE_RESIGN_EMP", name: "ลาออก" },
{ id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
{ id: "RETIRE_RESIGN_EMP", name: "ให้ออกจากราชการ" },
{ id: "RETIRE_OUT_EMP", name: "ให้ออกจากราชการ" },
]);
const visibleColumns = ref<string[]>([