ปรับ table ลงเวลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
9e3fb8bff7
commit
7d23bdc945
11 changed files with 309 additions and 267 deletions
|
|
@ -13,7 +13,6 @@ const workStore = useWorklistDataStore();
|
|||
|
||||
const { date2Thai } = mixin;
|
||||
const { searchDataFn, filterFn } = workStore;
|
||||
onMounted(() => {});
|
||||
|
||||
//ข้อมูล Table
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -90,6 +89,12 @@ const visibleColumns = ref<string[]>([
|
|||
"coordinatesOut",
|
||||
"status",
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
workStore.columns = columns.value;
|
||||
workStore.visibleColumns = visibleColumns.value;
|
||||
});
|
||||
|
||||
//DialogDetail
|
||||
const modal = ref<boolean>(false);
|
||||
const dataDetail = ref<any>([]);
|
||||
|
|
@ -108,96 +113,9 @@ const pagination = ref({
|
|||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="workStore.selectDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:model-value="
|
||||
workStore.selectDate !== null
|
||||
? date2Thai(workStore.selectDate)
|
||||
: null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="workStore.selectStatus"
|
||||
:options="workStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -209,8 +127,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:visible-columns="workStore.visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
|
|
@ -222,64 +139,38 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props" @click.prevent="clickDetail(props.row)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="fullName"
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.fullName }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeIn }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesIn"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latIn + " " + props.row.longIn
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="timeOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="coordinatesOut"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latOut + " " + props.row.longOut
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-td>
|
||||
<q-td
|
||||
key="status"
|
||||
:props="props"
|
||||
@click.prevent="clickDetail(props.row)"
|
||||
>
|
||||
{{ props.row.status }}
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'coordinatesIn'">
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latIn + " " + props.row.longIn
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'coordinatesOut'">
|
||||
<q-item style="padding: 0">
|
||||
<q-item-section>
|
||||
<q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
|
||||
<q-item-label caption lines="2">{{
|
||||
props.row.latOut + " " + props.row.longOut
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
|
|||
98
src/modules/09_leave/components/1_Work/ToolBar.vue
Normal file
98
src/modules/09_leave/components/1_Work/ToolBar.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<script setup lang="ts">
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
||||
|
||||
const workStore = useWorklistDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { filterFn, searchDataFn } = workStore;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="workStore.selectDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:model-value="
|
||||
workStore.selectDate !== null
|
||||
? date2Thai(workStore.selectDate)
|
||||
: null
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer text-primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="workStore.selectStatus"
|
||||
:options="workStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(workStore.selectDate, workStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="filterFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="workStore.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="workStore.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
q
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
//import Stores
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
|
@ -71,6 +70,11 @@ const visibleColumns = ref<string[]>([
|
|||
"status",
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
leaveStore.columns = columns.value;
|
||||
leaveStore.visibleColumns = visibleColumns.value;
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: 1,
|
||||
|
|
@ -85,89 +89,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectYear"
|
||||
:options="optionYear"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ปีงบประมาณ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectType"
|
||||
:options="leaveStore.optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
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></q-select
|
||||
>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-if="leaveStore.tab == '2'"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectStatus"
|
||||
:options="leaveStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'status')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -179,7 +100,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:visible-columns="leaveStore.visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
:loading="leaveStore.loadTable"
|
||||
|
|
@ -192,26 +113,20 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr
|
||||
:props="props"
|
||||
class="cursor-pointer"
|
||||
@click.prevent="router.push(`/leave/detail/${props.row.name}`)"
|
||||
>
|
||||
<q-td key="no" :props="props"> {{ props.rowIndex + 1 }} </q-td>
|
||||
<q-td key="leaveType" :props="props">
|
||||
{{ props.row.leaveType }}
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td key="Date" :props="props">
|
||||
{{ props.row.Date }}
|
||||
</q-td>
|
||||
<q-td key="timeOut" :props="props">
|
||||
{{ props.row.timeOut }}
|
||||
</q-td>
|
||||
<q-td key="status" :props="props">
|
||||
{{ props.row.status }}
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click.prevent="router.push(`/leave/detail/${props.row.name}`)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
|
|||
95
src/modules/09_leave/components/2_Leave/ToolBar.vue
Normal file
95
src/modules/09_leave/components/2_Leave/ToolBar.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<script setup lang="ts">
|
||||
//import Stores
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const { searchDataFn, filterOption } = leaveStore;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectYear"
|
||||
:options="leaveStore.optionYear"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ปีงบประมาณ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectType"
|
||||
:options="leaveStore.optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
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></q-select
|
||||
>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-if="leaveStore.tab == '2'"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.selectStatus"
|
||||
:options="leaveStore.optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="
|
||||
searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
|
||||
"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'status')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-2">
|
||||
<q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-select
|
||||
v-model="leaveStore.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="leaveStore.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
0
src/modules/09_leave/interface/request/work.ts
Normal file
0
src/modules/09_leave/interface/request/work.ts
Normal file
9
src/modules/09_leave/interface/response/leave.ts
Normal file
9
src/modules/09_leave/interface/response/leave.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
interface DataRows {
|
||||
leaveType: string
|
||||
name: string
|
||||
Date: string
|
||||
status: string
|
||||
}
|
||||
export type {
|
||||
DataRows
|
||||
}
|
||||
15
src/modules/09_leave/interface/response/work.ts
Normal file
15
src/modules/09_leave/interface/response/work.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
interface TableRows {
|
||||
fullName: string
|
||||
timeIn: string
|
||||
coordinatesIn: string
|
||||
latIn: string
|
||||
longIn: string
|
||||
timeOut: string
|
||||
coordinatesOut: string
|
||||
latOut: string
|
||||
longOut: string
|
||||
status: string
|
||||
}
|
||||
export type {
|
||||
TableRows
|
||||
}
|
||||
|
|
@ -3,6 +3,8 @@ import { ref } from "vue";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave"
|
||||
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -10,21 +12,23 @@ const { date2Thai, showLoader, hideLoader } = mixin;
|
|||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<string>("")
|
||||
const amounttab2 = ref<string>("")
|
||||
const amounttab1 = ref<number>(0)
|
||||
const amounttab2 = ref<number>(0)
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([])
|
||||
const rows = ref<any>([])
|
||||
const rows = ref<DataRows[]>([])
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const loadTable = ref<boolean>(false)
|
||||
async function fetchList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
async function fetchList(data: DataRows[]) {
|
||||
let datalist = data.map((e: DataRows) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
amounttab1.value = filteramounttab1.length
|
||||
amounttab2.value = datalist.length
|
||||
await fetchOption()
|
||||
|
|
@ -163,6 +167,9 @@ export const useLeavelistDataStore = defineStore("leave", () => {
|
|||
rows,
|
||||
fetchList,
|
||||
loadTable,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
//filter table
|
||||
filterTable,
|
||||
selectYear,
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
import type { TableRows } from "@/modules/09_leave/interface/response/work"
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
export const useWorklistDataStore = defineStore("work", () => {
|
||||
// ข้อมูลในตาราง
|
||||
const rows = ref<any>([])
|
||||
const dataMain = ref<any>([])
|
||||
function fetchList(data: any) {
|
||||
let datalist = data.map((e: any) => ({
|
||||
const rows = ref<TableRows[]>([])
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const dataMain = ref<TableRows[]>([])
|
||||
function fetchList(data: TableRows[]) {
|
||||
let datalist = data.map((e: TableRows) => ({
|
||||
fullName: e.fullName,
|
||||
timeIn: e.timeIn,
|
||||
coordinatesIn: e.coordinatesIn,
|
||||
|
|
@ -58,7 +62,7 @@ export const useWorklistDataStore = defineStore("work", () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
function filterFn(val: string, update: any) {
|
||||
function filterFn(val: string, update: Function) {
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
optionStatus.value = optionStatusMain.value;
|
||||
|
|
@ -86,6 +90,8 @@ export const useWorklistDataStore = defineStore("work", () => {
|
|||
return {
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
columns,
|
||||
visibleColumns,
|
||||
fetchList,
|
||||
//ค้นหาข้อมูล
|
||||
filterTable,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
|
||||
// importStroe
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
// importComponets
|
||||
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
|
||||
|
||||
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const { fetchList, clearFilter } = leaveStore;
|
||||
|
||||
|
|
@ -13,7 +15,7 @@ onMounted(() => {
|
|||
});
|
||||
// เรียกข้อมูลจาก API
|
||||
function fecthLeaveList() {
|
||||
const data = [
|
||||
const data: DataRows = [
|
||||
{
|
||||
leaveType: "ลาป่วย",
|
||||
name: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
|
|
@ -96,11 +98,13 @@ function changTab() {
|
|||
<q-tab-panels v-model="leaveStore.tab" animated>
|
||||
<q-tab-panel name="1">
|
||||
<!-- <TableList1 /> -->
|
||||
<ToolBar />
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2">
|
||||
<!-- <TabList2Vue /> -->
|
||||
<ToolBar />
|
||||
<TableList />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
||||
//import Components
|
||||
import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
|
||||
import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
|
||||
// import Type
|
||||
import type { TableRows } from "@/modules/09_leave/interface/response/work";
|
||||
// use Store
|
||||
const mixin = useCounterMixin();
|
||||
const workStore = useWorklistDataStore();
|
||||
|
|
@ -16,7 +19,7 @@ onMounted(() => {
|
|||
});
|
||||
//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
|
||||
function fecthWorkList() {
|
||||
const listData = [
|
||||
const listData: TableRows[] = [
|
||||
{
|
||||
fullName: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
timeIn: "8:04",
|
||||
|
|
@ -75,8 +78,7 @@ function fecthWorkList() {
|
|||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<TableList /></div
|
||||
<div class="q-pa-md"><ToolBar /> <TableList /></div
|
||||
></q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue