แกไข ชื่อ file
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6269464231
commit
6f5a408f9e
52 changed files with 132 additions and 64 deletions
288
src/modules/05_leave/components/Table.vue
Normal file
288
src/modules/05_leave/components/Table.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
/** import stort*/
|
||||
const leaveStore = useLeaveStore();
|
||||
const { filterOption } = leaveStore;
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const $q = useQuasar();
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
grid: Boolean,
|
||||
inputShow: Boolean,
|
||||
maxPage: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
leaveType: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่น emit ค่าที่กำหนด
|
||||
*/
|
||||
const emit = defineEmits([
|
||||
"update:filter",
|
||||
"update:Pagination",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
|
||||
const table = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ตั้งค่า pagination
|
||||
*/
|
||||
const currentPage = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: Number(props.pageSize),
|
||||
});
|
||||
|
||||
/** updateVisible*/
|
||||
function updateVisible(value: []) {
|
||||
emit("update:inputvisible", value);
|
||||
}
|
||||
|
||||
/** 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 updateFilter*/
|
||||
function filterTable() {
|
||||
emit("update:filter", year.value, type.value, status.value, filter.value);
|
||||
}
|
||||
|
||||
/** function updatePagination*/
|
||||
function updatePagination(p: number, ps: number) {
|
||||
emit("update:Pagination", p, ps);
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSize(newPageSize: any) {
|
||||
currentPage.value = 1;
|
||||
pagination.value.rowsPerPage = newPageSize.rowsPerPage;
|
||||
}
|
||||
|
||||
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
||||
updatePagination(currentPage.value, pagination.value.rowsPerPage);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-py-sm row">
|
||||
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
||||
<div class="items-center col-12 row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="filterTable"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(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>
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="type"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.typeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
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
|
||||
v-model="status"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.statusOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
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 />
|
||||
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:pagination="pagination"
|
||||
@update:pagination="updatePageSize"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(props.maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-table2 {
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue