แก้ UI การลา

This commit is contained in:
Warunee Tamkoo 2023-11-03 15:08:53 +07:00
parent d697086bb8
commit 494f9571b9
6 changed files with 211 additions and 381 deletions

View file

@ -15,30 +15,30 @@ onMounted(() => {
});
// API
function fecthLeaveList() {
const data: DataRows = [
const data = [
{
leaveType: "ลาป่วย",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "",
status: "1",
Date: "2023-11-03",
status: "NEW",
},
{
leaveType: "ลากิจส่วนตัว",
name: "นายนครชัย วันดี",
Date: "",
status: "3",
Date: "2023-11-01",
status: "APPROVE",
},
{
leaveType: "ลากิจส่วนตัว",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "",
status: "2",
Date: "2023-11-02",
status: "PENDING",
},
{
leaveType: "ลาป่วย",
name: "นายปิยรมย์ ศิริธาราฟ",
Date: "",
status: "2",
Date: "2023-11-01",
status: "PENDING",
},
];
fetchList(data); // stores
@ -52,65 +52,9 @@ function changTab() {
<template>
<div class="toptitle text-dark col-12 row items-center">รายการลา</div>
<div>
<!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
<q-card bordered flat>
<q-tabs
v-model="leaveStore.tab"
dense
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab
@click="changTab"
name="1"
label="รายการลาที่อยู่ระหว่างดำเนินการ"
>
<q-badge
color="grey-4"
:class="
leaveStore.tab == '1'
? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl'
"
:label="leaveStore.amounttab1"
rounded
/>
</q-tab>
<q-tab @click="changTab" name="2" label="รายการลาทั้งหมด">
<q-badge
color="grey-4"
:class="
leaveStore.tab == '2'
? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl'
"
:label="leaveStore.amounttab2"
rounded
/>
</q-tab>
</q-tabs>
<q-separator />
<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>
<!-- </q-card> -->
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<ToolBar />
<TableList />
</q-card>
</div>
</template>
<style scoped></style>