hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ฟิลเตอร์ input ค้าง(ยืม-คืนเครื่องราชฯ) กำลังทำต่อ

Browse source
This commit is contained in:
setthawutttty 2023-09-28 17:14:37 +07:00
parent 8da73d1e17
commit 94e70ea205
7 changed files with 461 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -39,7 +39,8 @@ const organization = ref<string>("");
const dialogNote = ref<boolean>(false);
const dialogTitle = ref<string>("");
const dialogDesc = ref<string>("");
const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
const employeeClassOps = ref<any>(DataStore.employeeClassOps);
// แจ้งเตือน
const dialogWarn = ref<boolean>(false);
const checkboxData = ref<any>([
@ -57,6 +58,7 @@ const checkboxData = ref<any>([
]);
const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
const filterOrganizationOP = ref<any>([]);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
@ -286,6 +288,7 @@ onMounted(async () => {
DataStore.mainTab = props.tab;
}
}
filterOrganizationOP.value = organizationOptions.value;
});
// เช็คสถานนะแสดงปุ่มเพิ่ม
const checkStatus = computed(() => {
@ -298,8 +301,8 @@ const checkStatus = computed(() => {
});
// เลือกหน่วยงาน
const changtypeOc = () => {
if (props.fecthInsigniaByOc) {
props.fecthInsigniaByOc(
if (organization.value !== null) {
props.fecthInsigniaByOc?.(
props.roundId,
organization.value,
"officer",
@ -644,6 +647,41 @@ const clickCloseReson = () => {
const clickShowWarn = () => {
dialogWarn.value = true;
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'typeinsigniaOptions') {
DataStore.typeinsignia = ''
typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'employeeClassOps'){
DataStore.employeeClass = ''
employeeClassOps.value = DataStore.employeeClassOps.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'filterOrganizationOP'){
filterOrganizationOP.value = organizationOptions.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
const clearInsigniaFilters = (name: string) => {
if (name === "typeinsigniaOptions") {
DataStore.typeinsignia = "all";
typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
} else if (name === 'employeeClassOps') {
DataStore.employeeClass = "all";
employeeClassOps.value = DataStore.employeeClassOps;
}
};
</script>
<template>
@ -651,16 +689,18 @@ const clickShowWarn = () => {
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-4"
v-if="roleDataStore.adminRole"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
:options="filterOrganizationOP"
option-value="id"
option-label="name"
lazy-rules
use-input
hide-bottom-space
:readonly="false"
:borderless="false"
@ -668,18 +708,23 @@ const clickShowWarn = () => {
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
) "
/>
<q-select
class="col-1"
v-model="DataStore.typeinsignia"
label="ประเภทเครื่องราชฯ ที่ยืนขอ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
:options="typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
use-input
:readonly="false"
:borderless="false"
:outlined="true"
@ -691,9 +736,27 @@ const clickShowWarn = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
) "
>
<template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('typeinsigniaOptions'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
<div>
<q-select
class="col-2"
v-model="DataStore.employeeClass"
dense
outlined
@ -701,9 +764,10 @@ const clickShowWarn = () => {
hide-bottom-space
:label="`${'สถานภาพ'}`"
emit-value
use-input
map-options
option-label="name"
:options="DataStore.employeeClassOps"
:options="employeeClassOps"
option-value="id"
:readonly="false"
:borderless="false"
@ -714,7 +778,24 @@ const clickShowWarn = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
>
<template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('employeeClassOps'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div>
<q-btn

94
src/modules/07_insignia/components/2_Manage/Tab2.vue
View file

@ -27,6 +27,9 @@ const props = defineProps({
const organization = ref<string>("1");
const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
const filterOrganizationOP = ref<any>([]);
const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
const employeeClassOps = ref<any>(DataStore.employeeClassOps);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
@ -160,11 +163,12 @@ onMounted(async () => {
DataStore.mainTab = props.tab;
}
}
filterOrganizationOP.value = organizationOptions.value
});
// เลือกหน่วยงาน
const changtypeOc = () => {
if (props.fecthInsigniaByOc) {
props.fecthInsigniaByOc(
if (organization.value !== null) {
props.fecthInsigniaByOc?.(
props.roundId,
organization.value,
"officer",
@ -207,22 +211,57 @@ const showReson = (name: string, requestNote: string) => {
const closeReson = () => {
dialogNote.value = false;
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'typeinsigniaOptions') {
DataStore.typeinsignia = ''
typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'employeeClassOps'){
DataStore.employeeClass = ''
employeeClassOps.value = DataStore.employeeClassOps.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'filterOrganizationOP'){
filterOrganizationOP.value = organizationOptions.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
const clearInsigniaFilters = (name: string) => {
if (name === "typeinsigniaOptions") {
DataStore.typeinsignia = "all";
typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
} else if (name === 'employeeClassOps') {
DataStore.employeeClass = "all";
employeeClassOps.value = DataStore.employeeClassOps;
}
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-4"
v-if="roleDataStore.adminRole"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
:options="filterOrganizationOP"
option-value="id"
option-label="name"
lazy-rules
use-input
hide-bottom-space
:readonly="false"
:borderless="false"
@ -230,18 +269,23 @@ const closeReson = () => {
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
) "
/>
<q-select
class="col-1"
v-model="DataStore.typeinsignia"
label="ประเภทเครื่องราชฯ ที่ยืนขอ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
:options="typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
use-input
:readonly="false"
:borderless="false"
:outlined="true"
@ -253,9 +297,27 @@ const closeReson = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
) "
>
<template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('typeinsigniaOptions'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
<div>
<q-select
class="col-2"
v-model="DataStore.employeeClass"
dense
outlined
@ -263,9 +325,10 @@ const closeReson = () => {
hide-bottom-space
:label="`${'สถานภาพ'}`"
emit-value
use-input
map-options
option-label="name"
:options="DataStore.employeeClassOps"
:options="employeeClassOps"
option-value="id"
:readonly="false"
:borderless="false"
@ -276,7 +339,24 @@ const closeReson = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
>
<template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('employeeClassOps'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />

91
src/modules/07_insignia/components/2_Manage/Tab3.vue
View file

@ -26,7 +26,9 @@ const props = defineProps({
type: Function,
},
});
const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
const employeeClassOps = ref<any>(DataStore.employeeClassOps);
const filterOrganizationOP = ref<any>([]);
const organization = ref<string>("1");
const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
@ -160,6 +162,7 @@ onMounted(async () => {
DataStore.mainTab = props.tab;
}
}
filterOrganizationOP.value = organizationOptions.value
});
const changtypeOc = async () => {
if (props.fecthInsigniaByOc) {
@ -205,22 +208,57 @@ const showNote = (row: any) => {
const closeReson = () => {
dialogNote.value = false;
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'typeinsigniaOptions') {
DataStore.typeinsignia = ''
typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'employeeClassOps'){
DataStore.employeeClass = ''
employeeClassOps.value = DataStore.employeeClassOps.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
else if(name === 'filterOrganizationOP'){
filterOrganizationOP.value = organizationOptions.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
const clearInsigniaFilters = (name: string) => {
if (name === "typeinsigniaOptions") {
DataStore.typeinsignia = "all";
typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
} else if (name === 'employeeClassOps') {
DataStore.employeeClass = "all";
employeeClassOps.value = DataStore.employeeClassOps;
}
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-4"
v-if="roleDataStore.adminRole"
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
:options="filterOrganizationOP"
option-value="id"
option-label="name"
lazy-rules
use-input
hide-bottom-space
:readonly="false"
:borderless="false"
@ -228,18 +266,23 @@ const closeReson = () => {
:hide-dropdown-icon="false"
style="min-width: 150px"
@update:model-value="changtypeOc"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
) "
/>
<q-select
class="col-1"
v-model="DataStore.typeinsignia"
label="ประเภทเครื่องราชฯ ที่ยืนขอ"
dense
emit-value
map-options
:options="DataStore.typeinsigniaOptions"
:options="typeinsigniaOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
use-input
:readonly="false"
:borderless="false"
:outlined="true"
@ -251,9 +294,27 @@ const closeReson = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
) "
>
<template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('typeinsigniaOptions'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
<div>
<q-select
class="col-2"
v-model="DataStore.employeeClass"
dense
outlined
@ -261,9 +322,10 @@ const closeReson = () => {
hide-bottom-space
:label="`${'สถานภาพ'}`"
emit-value
use-input
map-options
option-label="name"
:options="DataStore.employeeClassOps"
:options="employeeClassOps"
option-value="id"
:readonly="false"
:borderless="false"
@ -274,7 +336,24 @@ const closeReson = () => {
DataStore.employeeClass
)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
>
<template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('employeeClassOps'),
DataStore.searchDataTable(
DataStore.typeinsignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />

40
src/modules/07_insignia/components/4_Allocate/Main.vue
View file

@ -41,6 +41,7 @@ const modal = ref<boolean>(false);
const action = ref<string>("");
const roundYear = ref<number>();
const insigniaOp = ref<any>([]);
const filterInsigniaOp = ref<any>({insigniaOp:[]})
const loadView = ref<boolean>(false);
onMounted(async () => {
@ -175,6 +176,7 @@ watch(tab, () => {
if (!a) {
DataStore.insignia = "";
}
filterInsigniaOp.value = insigniaOp.value
fecthlistInsignia();
});
@ -300,6 +302,25 @@ const resetFilter = () => {
filter.value = "";
filterRef.value!.focus();
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'filterInsigniaOp') {
DataStore.insignia = null as any
filterInsigniaOp.value = insigniaOp.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
const clearInsigniaFilters = (name: string) => {
if (name === "filterInsigniaOp") {
DataStore.insignia = '';
filterInsigniaOp.value = insigniaOp.value;
}
};
</script>
<template>
@ -368,15 +389,30 @@ const resetFilter = () => {
emit-value
map-options
option-label="name"
:options="insigniaOp"
:options="filterInsigniaOp"
option-value="id"
:readonly="false"
use-input
:borderless="false"
style="min-width: 200px"
@update:model-value="
DataStore.selectInsignia(DataStore.insignia)
"
/>
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'filterInsigniaOp'
) "
>
<template v-if="DataStore.insignia !== 'all'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
clearInsigniaFilters('filterInsigniaOp'),
DataStore.selectInsignia(DataStore.insignia)
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div>