ผูก API รายการลา (user) *รอ ข้อมูล
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8cd87660d8
commit
60ddcf5789
7 changed files with 269 additions and 189 deletions
|
|
@ -1,10 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, reactive, onMounted } from "vue";
|
||||
import { ref, useAttrs, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeaveStore();
|
||||
const { filterSelector, searchFilterTable } = leaveStore;
|
||||
const { messageError } = mixin;
|
||||
const { fetchLeaveType, filterOption } = leaveStore;
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
|
||||
|
|
@ -26,7 +36,7 @@ const props = defineProps({
|
|||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
inputfilter: String,
|
||||
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
|
|
@ -39,25 +49,40 @@ const props = defineProps({
|
|||
* ฟังก์ชั่น emit ค่าที่กำหนด
|
||||
*/
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:filter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
const updateInput = (value: string | number | null) => {
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
|
||||
const updateVisible = (value: []) => {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
|
||||
/**
|
||||
* reset ค่าที่ค้นหา
|
||||
*/
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
/** filter */
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
const type = ref<string>("00000000-0000-0000-0000-000000000000");
|
||||
const status = ref<string>("ALL");
|
||||
const filter = ref<string>("");
|
||||
|
||||
function filterTable() {
|
||||
emit("update:filter", year.value, type.value, status.value, filter.value);
|
||||
}
|
||||
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await fetchLeaveType(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-py-sm row">
|
||||
|
|
@ -66,13 +91,13 @@ const resetFilter = () => {
|
|||
<datepicker
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
menu-class-name="modalfix"
|
||||
v-model="leaveStore.fiscalYearyear"
|
||||
v-model="year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="searchFilterTable"
|
||||
@update:modelValue="filterTable"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -83,7 +108,7 @@ const resetFilter = () => {
|
|||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(leaveStore.fiscalYearyear) + 543"
|
||||
:model-value="Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -97,33 +122,11 @@ const resetFilter = () => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-select
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.fiscalYearyear"
|
||||
:label="`${'ปี พ.ศ.'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.fiscalyearOP"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
|
||||
) "
|
||||
/> -->
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveType"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
|
||||
v-model="type"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
|
|
@ -133,17 +136,22 @@ const resetFilter = () => {
|
|||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
|
||||
) "
|
||||
/>
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveStatus"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
v-model="status"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
|
|
@ -153,18 +161,25 @@ const resetFilter = () => {
|
|||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveStatusOption'
|
||||
) "
|
||||
/>
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
@keydown.enter.prevent="filterTable"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
|
|
@ -172,12 +187,12 @@ const resetFilter = () => {
|
|||
style="max-width: 150px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue