เพิ่ม ui หน้ารายการลา

2023-09-27 15:49:15 +07:00 · 2023-09-27 15:49:15 +07:00 · 060be9b843
commit 060be9b843
parent 7f0e41ff31
12 changed files with 938 additions and 16 deletions
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/componenst/ListCalendar.vue
@ -0,0 +1,97 @@
+<template>
+    <Table
+        :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :inputShow="true"
+        :grid="$q.screen.gt.xs ? false : true"
+        >
+        <template #columns="props">
+            <q-tr :props="props">
+                <q-td key="no" :props="props">
+                    {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="type" :props="props">
+                    {{ props.row.type }}
+                </q-td>
+                <q-td key="date" :props="props">
+                    {{ props.row.date }}
+                </q-td>
+                
+                <q-td key="status" :props="props">
+                    <div class="col-12 row items-center">
+                        <q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+                        <q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+                        <span class="q-pr-md">{{ props.row.status }}</span> 
+                        <q-space/>
+                        <q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก"  size="13px" class="q-px-sm" outline dense color="orange" />
+                    </div>
+                </q-td>
+
+                
+            </q-tr>
+        </template>
+    </Table>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import Table from "@/modules/05_leave/componenst/Table.vue"
+
+
+const filter = ref<string>("")
+const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
+const columns = ref<QTableProps["columns"]>([
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5%;",
+	},
+    {
+		name: "type",
+		align: "left",
+		label: "ประเภทการลา",
+		sortable: true,
+		field: "type",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "date",
+		align: "left",
+		label: "วันที่ยื่นใบลา",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "status",
+		align: "left",
+		label: "สถานะ",
+		sortable: true,
+		field: "status",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:10%;",
+	},
+])
+const rows = ref<any>([
+    {no:'1',date: '20  ก.ย. 2566',type: 'ลาป่วย',status: 'ใหม่' },
+    {no:'2',date: '19  ก.ย. 2566',type: 'ลาป่วย',status: 'อยู่ระหว่างดำเนินการ' },
+    {no:'3',date: '10  ก.ย. 2566',type: 'ลากิจส่วนตัว',status: 'อนุมัติ' },
+])
+const initialPagination = ref({
+	rowsPerPage: 0,
+})
+</script>