แก้ไขตาม task
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bf8fb777cf
commit
90a47d43ad
26 changed files with 2652 additions and 228 deletions
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
194
src/modules/09_leave/components/2_Leave/DetailLeave.vue
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id;
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="q-mr-xl">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave-list`)"
|
||||
/>
|
||||
รายละเอียดการลาของ {{ paramsId }}
|
||||
</div>
|
||||
<div class="q-ml-xl">
|
||||
<q-btn
|
||||
icon="mdi-download"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
icon="mdi-upload"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="blue-10"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="q-pa-md">
|
||||
<q-banner inline-actions rounded class="bg-grey-2">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6"
|
||||
>ประเภทการลา</q-item-section
|
||||
>
|
||||
<q-item-section class="text-primary"> ลาป่วย </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="text-grey-6">
|
||||
ชื่อ - นามสกุล</q-item-section
|
||||
>
|
||||
|
||||
<q-item-section> {{ paramsId }} </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-blue-10">10</div>
|
||||
<div class="text-subtitle2">โควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
8
|
||||
</div>
|
||||
<div class="text-subtitle2">ลาป่วยไปแล้ว</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">2</div>
|
||||
<div class="text-subtitle2">คงเหลือโควต้าลาป่วย</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<div class="row q-gutter-md q-mt-md">
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
|
||||
<q-item-section> บ้าน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>รับเงินเดือน</q-item-section
|
||||
>
|
||||
<q-item-section> รับเงินเดือน </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มต้น</q-item-section
|
||||
>
|
||||
<q-item-section> 14 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
วัน เดือน ปีเริ่มสิ้นสุด</q-item-section
|
||||
>
|
||||
<q-item-section> 15 ก.ค. 2556 </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>จำนวนวันที่ลา</q-item-section
|
||||
>
|
||||
<q-item-section> 1 </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> สถานที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>หมายเลขที่ติดต่อขณะลา</q-item-section
|
||||
>
|
||||
<q-item-section> หมายเลขที่ติดต่อขณะลา </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5"
|
||||
>สถานะการพิจารณา</q-item-section
|
||||
>
|
||||
<q-item-section> ขอยกเลิก </q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-h5"> เอกสารแบบ</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
ไม่พบเอกสาร</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn color="orange-5" label="ไม่อนุมัติ"
|
||||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn color="primary" label="อนุมัติ"
|
||||
><q-tooltip>อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped></style>
|
||||
235
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
235
src/modules/09_leave/components/2_Leave/TableList.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
q
|
||||
<script setup lang="ts">
|
||||
import { ref } 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";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
const { optionYear, searchDataFn, filterOption } = leaveStore;
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveType",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Date",
|
||||
align: "left",
|
||||
label: "วันที่ยืนใบลา",
|
||||
sortable: true,
|
||||
field: "Date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"leaveType",
|
||||
"name",
|
||||
"Date",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
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">
|
||||
<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"
|
||||
:rows="leaveStore.rows"
|
||||
:filter="leaveStore.filterTable"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
:loading="leaveStore.loadTable"
|
||||
>
|
||||
<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"
|
||||
@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-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:loading>
|
||||
<q-inner-loading showing color="primary" />
|
||||
</template>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue