เลื่อนเงืนเดือน

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-27 17:16:17 +07:00
parent 62b5651911
commit 1e25bfc4b6
6 changed files with 185 additions and 166 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue";
import { ref, watch, onMounted, reactive, computed } from "vue";
import type { QTableProps } from "quasar";
import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
@ -238,7 +238,6 @@ const columns = computed(() => {
: [];
return columnsss;
});
const visibleColumns = ref<string[]>(
store.roundMainCode === "APR"
? ["org", "total", "fifteenPercent", "chosen", "remaining", "totalBackup"]
@ -256,101 +255,101 @@ const visibleColumns = ref<string[]>(
: []
);
const gruup = ref<string>("กลุ่ม 1");
const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
const isLoad = ref<boolean>(true);
watch(
() => store.roundMainCode,
() => {
isLoad.value = false;
setTimeout(() => {
isLoad.value = true;
}, 200);
}
);
</script>
<template>
<!-- Card โควต -->
<q-toolbar class="q-pa-md">
<q-select
dense
outlined
v-model="gruup"
:options="options"
label="กลุ่ม"
style="width: 150px"
/>
</q-toolbar>
<div class="row col-12 q-pa-md bg-grey-2">
<div class="row col-12 q-col-gutter-sm">
<div
v-for="(item, index) in itemsCard"
:key="index"
:class="
store.roundMainCode === 'APR'
? 'col-6 col-sm-4 col-md-3 col-lg-2'
: 'col-3'
"
>
<q-card>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="">{{ item.lable }}</div>
</div>
<div :class="`text-${item.color} text-bold`">
{{ item.total ? item.total.toLocaleString() : 0 }}
<div v-if="isLoad">
<div class="row col-12 q-pa-md bg-grey-2">
<div class="row col-12 q-col-gutter-sm">
<div
v-for="(item, index) in itemsCard"
:key="index"
:class="
store.roundMainCode === 'APR'
? 'col-6 col-sm-4 col-md-3 col-lg-2'
: 'col-3'
"
>
<q-card>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="">{{ item.lable }}</div>
</div>
<div :class="`text-${item.color} text-bold`">
{{ item.total ? item.total.toLocaleString() : 0 }}
</div>
</div>
</div>
</q-card-section>
</q-card>
</q-card-section>
</q-card>
</div>
<!-- <div class="row col justify-end self-center">
<q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
<q-list>
<q-item
v-for="(item, index) in store.roundMainCode === 'APR'
? store.itemDownloadApr
: store.roundMainCode === 'OCT'
? store.itemDownloadOct
: []"
:key="index"
clickable
v-close-popup
@click="onClickDownload(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div> -->
</div>
<!-- <div class="row col justify-end self-center">
<q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
<q-list>
<q-item
v-for="(item, index) in store.roundMainCode === 'APR'
? store.itemDownloadApr
: store.roundMainCode === 'OCT'
? store.itemDownloadOct
: []"
:key="index"
clickable
v-close-popup
@click="onClickDownload(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div> -->
</div>
</div>
<q-separator />
<div class="col-12 q-pa-md">
<d-table
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="subject"
flat
bordered
dense
class="custom-header-table"
:visible-columns="visibleColumns"
>
<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">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<q-separator />
<div class="col-12 q-pa-md">
<d-table
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
>
<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">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</template>

View file

@ -256,7 +256,7 @@ const visibleColumns = ref<string[]>(
: []
);
const gruup = ref<string>("กลุ่ม 1");
const gruup = ref<string>("ทั้งหมด");
const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่ม 2"]);
</script>
@ -327,12 +327,10 @@ const options = ref(["ทั้งหมด", "กลุ่ม 1", "กลุ่
ref="table"
:columns="columns"
:rows="rows"
row-key="subject"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">

View file

@ -471,7 +471,7 @@ const updateIsShowRetire = async () => {
/>
</q-tabs>
<q-separator />
<q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
<q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1 q-pt-md">
<q-tab-panel
style="padding: 0px"
v-for="(item, index) in itemsTabGroup"