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

ปรับ Code การลาลงเวลา

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-25 13:18:11 +07:00
parent d150dedb81
commit 99419877c4
42 changed files with 123 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

262
src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
View file

@ -1,262 +0,0 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import type {
DateFilter,
QuerySting,
} from "@/modules/09_leave/interface/request/leave";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
/** importStores*/
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
const querySting = defineModel<QuerySting>("querySting", { required: true });
const $q = useQuasar();
const leaveStore = useLeavelistDataStore();
const props = defineProps({
dataToobar: Array,
getSearch: Function,
getList: Function,
});
/** Option*/
const optionTypeMain = ref<DataOption[]>([]);
const optionType = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([
{
id: "ALL",
name: "ทั้งหมด",
},
{
id: "NEW",
name: "ใหม่",
},
{
id: "PENDING",
name: "กำลังดำเนินการ",
},
{
id: "APPROVE",
name: "อนุมัติ",
},
{
id: "REJECT",
name: "ไม่อนุมัติ",
},
]);
const optionStatus2 = ref<DataOption[]>([
{
id: "ALL",
name: "ทั้งหมด",
},
{
id: "NEW",
name: "ใหม่",
},
{
id: "APPROVE",
name: "อนุมัติ",
},
{
id: "REJECT",
name: "ไม่อนุมัติ",
},
]);
const optionStatusMain = ref<DataOption[]>(
leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
);
/**
* ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
* @param val คำที่ค้นหา
* @param update Function
* @param name ประเภทของ Select
*/
function filterOption(val: string, update: any, name: string) {
update(() => {
const needle = val.toLowerCase();
if (name === "type") {
optionType.value = optionTypeMain.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
} else if (name === "status") {
optionStatus.value = optionStatusMain.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
});
}
watch(
async () => props.dataToobar,
() => {
if (props.dataToobar) {
const data = props.dataToobar;
leaveStore.leaveType = data;
optionTypeMain.value = [
{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
];
const option = data.map((e: any) => ({
id: e.id,
name: e.name,
}));
optionTypeMain.value.push(...option);
optionType.value = optionTypeMain.value;
}
}
);
</script>
<template>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="querySting.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="props.getSearch?.()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="Number(querySting.year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
for="selectType"
emit-value
map-options
outlined
dense
v-model="querySting.type"
:options="optionType"
option-value="id"
option-label="name"
label="ประเภทการลา"
@update:model-value="props.getSearch?.()"
use-input
@filter="
(inputValue:any, doneFn:Function) =>
filterOption(inputValue, doneFn, 'type')
"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template
v-if="
querySting.type !== '00000000-0000-0000-0000-000000000000'
"
v-slot:append
>
<q-icon
name="cancel"
@click.stop.prevent="
(optionType = optionTypeMain),
(querySting.type =
'00000000-0000-0000-0000-000000000000'),
props.getSearch?.()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
for="selectStatus"
emit-value
map-options
outlined
dense
v-model="querySting.status"
:options="optionStatus"
option-value="id"
option-label="name"
label="สถานะ"
@update:model-value="props.getSearch?.()"
use-input
@filter="
(inputValue:any, doneFn:Function) =>
filterOption(inputValue, doneFn, 'status')
"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
<template v-if="querySting.status !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(optionStatus = optionStatusMain),
(querySting.status = 'ALL'),
props.getSearch?.()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />
<div class="col-xs-12 col-sm-3 col-md-2">
<q-input
for="filterTable"
dense
outlined
v-model="querySting.keyword"
label="ค้นหา"
@keydown.enter.prevent="props.getSearch?.()"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
for="visibleColumns"
v-model="leaveStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
style="min-width: 140px"
:options="leaveStore.columns"
option-value="name"
/>
</div>
</div>
</template>