From e4e4b1881f49b05be85dd6a5110accc38ecccf4f Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 18 Dec 2023 11:10:28 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=95=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 706 +++++++++++++---------------
 1 file changed, 320 insertions(+), 386 deletions(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 3c66341..d1d601f 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,431 +1,365 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
+import http from "@/plugins/http"
+import config from "@/app.config"
 
-import type { QTableProps } from "quasar";
+import type { QTableProps } from "quasar"
 
-import CalendarView from "@/modules/05_leave/components/Calendar.vue";
-import ListView from "@/modules/05_leave/components/ListCalendar.vue";
+import CalendarView from "@/modules/05_leave/components/Calendar.vue"
+import ListView from "@/modules/05_leave/components/ListCalendar.vue"
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
-const mixin = useCounterMixin();
-const leaveStore = useLeaveStore();
-const { showLoader, hideLoader, messageError } = mixin;
+const mixin = useCounterMixin()
+const leaveStore = useLeaveStore()
+const { showLoader, hideLoader, messageError } = mixin
 
-const router = useRouter();
-const $q = useQuasar();
+const router = useRouter()
+const $q = useQuasar()
 
-const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
+const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
 
-const itemPie = ref<any>([]);
+const itemPie = ref<any>([])
 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: "leaveTypeName",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "leaveTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveLimit",
-    align: "left",
-    label: "โควตาวันลา",
-    sortable: true,
-    field: "leaveLimit",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveExtend",
-    align: "left",
-    label: "ทดวันลา",
-    sortable: true,
-    field: "leaveExtend",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leavePercent",
-    align: "left",
-    label: "ใช้ไป (%)",
-    sortable: true,
-    field: "leavePercent",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveCountSend",
-    align: "left",
-    label: "จำนวนยื่นขอลา (วัน)",
-    sortable: true,
-    field: "leaveCountSend",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveCountApprove",
-    align: "left",
-    label: "จำนวนที่อนุมัติ (วัน)",
-    sortable: true,
-    field: "leaveCountApprove",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveCountReject",
-    align: "left",
-    label: "จำนวนที่ไม่อนุมัติ (วัน)",
-    sortable: true,
-    field: "leaveCountReject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "leaveCountDelete",
-    align: "left",
-    label: "จำนวนที่ยกเลิก (วัน)",
-    sortable: true,
-    field: "leaveCountDelete",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-]);
-const row = ref<any>([]);
-const pagination = ref({ rowsPerPage: 10 });
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5%;",
+	},
+	{
+		name: "leaveTypeName",
+		align: "left",
+		label: "ประเภทการลา",
+		sortable: true,
+		field: "leaveTypeName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "leaveLimit",
+		align: "left",
+		label: "โควตาวันลา",
+		sortable: true,
+		field: "leaveLimit",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "leaveExtend",
+		align: "left",
+		label: "วันลาสะสม",
+		sortable: true,
+		field: "leaveExtend",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+
+	{
+		name: "leaveCountSend",
+		align: "left",
+		label: "จำนวนยื่นขอลา (วัน)",
+		sortable: true,
+		field: "leaveCountSend",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "leaveCountApprove",
+		align: "left",
+		label: "จำนวนที่อนุมัติ (วัน)",
+		sortable: true,
+		field: "leaveCountApprove",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "leaveCountReject",
+		align: "left",
+		label: "จำนวนที่ไม่อนุมัติ (วัน)",
+		sortable: true,
+		field: "leaveCountReject",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "leaveCountDelete",
+		align: "left",
+		label: "จำนวนที่ยกเลิก (วัน)",
+		sortable: true,
+		field: "leaveCountDelete",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+])
+const row = ref<any>([])
+const pagination = ref({ rowsPerPage: 15 })
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  // modalStatsTable.value = true;
-  showLoader();
-  await http
-    .get(config.API.leaveStats())
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      const stat = filterLeaveType.value.map((e) => {
-        return data
-          .filter((el: any) => el.leaveTypeName === e)
-          .map((el: any) => ({
-            text: el.leaveTypeName,
-            color:
-              el.leaveTypeName === "ลาป่วย"
-                ? "text-pink-5"
-                : el.leaveTypeName === "ลากิจส่วนตัว"
-                ? "text-deep-purple"
-                : "text-indigo",
-            value: el.leavePercent,
-            all: el.leaveLimit,
-            use: el.leaveCountApprove,
-            remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
-          }));
-      });
-      stat.forEach((item) => itemPie.value.push(...item));
-      row.value = data.map((e: any) => ({
-        leaveTypeName: e.leaveTypeName,
-        leaveLimit: e.leaveLimit,
-        leaveExtend: e.leaveExtend,
-        leavePercent: e.leavePercent,
-        leaveCountSend: e.leaveCountSend,
-        leaveCountApprove: e.leaveCountApprove,
-        leaveCountReject: e.leaveCountReject,
-        leaveCountDelete: e.leaveCountDelete,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	// modalStatsTable.value = true;
+	showLoader()
+	await http
+		.get(config.API.leaveStats())
+		.then(res => {
+			const data = res.data.result
+			console.log(data)
+			const stat = filterLeaveType.value.map(e => {
+				return data
+					.filter((el: any) => el.leaveTypeName === e)
+					.map((el: any) => ({
+						text: el.leaveTypeName,
+						color: el.leaveTypeName === "ลาพักผ่อน" ? "text-pink-5" : el.leaveTypeName === "ลากิจส่วนตัว" ? "text-deep-purple" : "text-indigo",
+						value: el.leavePercent,
+						all: el.leaveLimit,
+						use: el.leaveCountApprove,
+						remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
+					}))
+			})
+			stat.forEach(item => itemPie.value.push(...item))
+			row.value = data.map((e: any) => ({
+				leaveTypeName: e.leaveTypeName,
+				leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
+				leaveExtend: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveExtend : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
+				leavePercent: e.leavePercent,
+				leaveCountSend: e.leaveCountSend,
+				leaveCountApprove: e.leaveCountApprove,
+				leaveCountReject: e.leaveCountReject,
+				leaveCountDelete: e.leaveCountDelete,
+			}))
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
-const modalStatsTable = ref<boolean>(false);
+const modalStatsTable = ref<boolean>(false)
 function onClickOpenStat() {
-  modalStatsTable.value = true;
+	modalStatsTable.value = true
 }
 
 /** function redirectTo  ยื่นใบลา*/
 async function addAbsence() {
-  router.push(`/leave/add`);
+	router.push(`/leave/add`)
 }
 
 onMounted(async () => {
-  await fetchStatsTable();
-});
+	await fetchStatsTable()
+})
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.go(-1)"
-        />
-        <div>รายการลา</div>
-      </div>
-    </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+				<div>รายการลา</div>
+			</div>
+		</div>
 
-    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-      <!-- สถิติการลา -->
-      <div class="col-12 row">
-        <q-card bordered class="col-12 row caedNone">
-          <q-card class="row col-12 items-center q-px-md q-py-sm">
-            <div class="text-weight-bold">สถิติการลา</div>
-            <q-space />
-            <q-btn
-              dense
-              flat
-              class="text-blue"
-              icon="mdi-chart-line-variant"
-              @click="onClickOpenStat"
-              label="ตารางสถิติการลา"
-            />
-          </q-card>
-          <div
-            bordered
-            class="col-4 row justify-center q-px-md q-pb-md"
-            v-for="(item, index) in itemPie"
-            :key="index"
-          >
-            <q-card
-              bordered
-              flat
-              class="col-12 row q-pt-md justify-center shadow-0"
-            >
-              <q-knob
-                readonly
-                v-model="item.value"
-                show-value
-                size="70px"
-                :thickness="0.15"
-                track-color="grey-3"
-                :class="`${item.color}`"
-              >
-                <span class="text-subtitle2 text-weight-bold"
-                  >{{ item.value }}%</span
-                >
-              </q-knob>
-              <div class="col-12 text-center text-weight-medium q-py-xs">
-                {{ item.text }}
-              </div>
-              <div
-                class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop"
-              >
-                <div class="col-4 column q-pa-xs text-center">
-                  <span class="text-weight-bold">{{ item.all }}</span>
-                  <span class="text-grey-7 text-caption">ได้รับ</span>
-                </div>
-                <q-separator vertical />
-                <div class="col-4 column q-pa-xs text-center">
-                  <span class="text-weight-bold">{{ item.use }}</span>
-                  <span class="text-grey-7 text-caption">ใช้ไป</span>
-                </div>
-                <q-separator vertical />
-                <div class="col-4 column q-pa-xs text-center">
-                  <span class="text-weight-bold">{{ item.remain }}</span>
-                  <span class="text-grey-7 text-caption">คงเหลือ</span>
-                </div>
-              </div>
-            </q-card>
-          </div>
-        </q-card>
-      </div>
+		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+			<!-- สถิติการลา -->
+			<div class="col-12 row">
+				<q-card bordered class="col-12 row caedNone">
+					<q-card class="row col-12 items-center q-px-md q-py-sm">
+						<div class="text-weight-bold">สถิติการลา</div>
+						<q-space />
+						<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="onClickOpenStat" label="ตารางสถิติการลา" />
+					</q-card>
 
-      <div class="row col-12 q-col-gutter-sm">
-        <!-- แสดงปฏิทิน -->
-        <div class="col-12 row">
-          <q-card bordered class="q-pa-md col-12">
-            <div class="row col-12">
-              <div class="row items-center">
-                <div class="q-ml-sm">
-                  <q-btn
-                    round
-                    dense
-                    flat
-                    size="13px"
-                    class="q-px-sm"
-                    @click="addAbsence"
-                  >
-                    <q-icon name="mdi-plus" size="22px" color="blue" />
-                    <q-tooltip>ยื่นใบลา</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <q-space />
-              <div class="justify-center row items-center">
-                <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
-                <q-tabs
-                  v-model="leaveStore.tabValue"
-                  indicator-color="transparent"
-                  align="left"
-                  active-color="activetab"
-                  class="text-nativetab"
-                  inline-label
-                  dense
-                >
-                  <q-btn
-                    name="calendar"
-                    round
-                    size="12px"
-                    flat
-                    icon="mdi-calendar-month"
-                    @click="leaveStore.tabValue = 'calendar'"
-                    :color="
-                      leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
-                    "
-                    class="q-mr-sm"
-                  >
-                    <q-tooltip>ปฏิทิน</q-tooltip>
-                  </q-btn>
-                  <q-separator vertical inset />
-                  <q-btn
-                    name="list"
-                    round
-                    size="12px"
-                    flat
-                    icon="mdi-format-list-bulleted"
-                    @click="leaveStore.tabValue = 'list'"
-                    :color="
-                      leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
-                    "
-                    class="q-ml-sm"
-                  >
-                    <q-tooltip>รายการ</q-tooltip>
-                  </q-btn>
-                </q-tabs>
-              </div>
-            </div>
-            <div class="col-12">
-              <CalendarView v-if="leaveStore.tabValue === 'calendar'" />
-            </div>
+					<div bordered class="col-6 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
+						<q-card bordered flat class="col-8 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลาพักผ่อน'">
+							<q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`" v-if="item.text === 'ลาพักผ่อน'">
+								<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
+							</q-knob>
+							<div class="col-12 text-center text-weight-medium q-py-xs">
+								{{ "ลาพักผ่อน" }}
+							</div>
+						</q-card>
+						<q-card bordered flat class="col-4 row justify-center shadow-0" v-if="item.text === 'ลาพักผ่อน'">
+							<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-right borderTop">
+								<div class="col-12 column q-pa-xs text-center">
+									<span class="text-grey-7 text-caption">ได้รับ</span>
+									<span class="text-weight-bold">{{ item.all }}</span>
 
-            <div class="col-12">
-              <ListView v-if="leaveStore.tabValue === 'list'" />
-            </div>
-          </q-card>
-        </div>
-      </div>
-    </div>
-  </div>
+									<q-separator horizontal />
+									<span class="text-grey-7 text-caption">ใช้ไป</span>
+									<span class="text-weight-bold">{{ item.use }}</span>
 
-  <!-- modal ตารางสถิติการลา -->
-  <q-dialog v-model="modalStatsTable" persistent>
-    <q-card style="min-width: 85%">
-      <q-card-section class="row items-center q-pa-sm">
-        <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="q-p-md row">
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="row"
-          :columns="columns"
-          row-key="leaveTypeName"
-          class="custom-table2 col-12"
-          hide-bottom
-          v-model:pagination="pagination"
-        >
-          <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 v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
+									<q-separator horizontal />
+									<span class="text-grey-7 text-caption">คงเหลือ</span>
+									<span class="text-weight-bold">{{ item.remain }}</span>
+								</div>
+							</div>
+						</q-card>
+					</div>
+					<div bordered class="col-6 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
+						<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลาป่วย'">
+							<div class="col-4 row q-pa-xs text-center">
+								{{ "ลาป่วย" }}
+							</div>
+							<div class="col-6 row q-pa-xs text-center">
+								<span class="text-weight-bold">{{ item.use }}</span>
+								<span class="text-grey-7 text-caption">ใช้ไป</span>
+							</div>
+						</q-card>
+						<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0" v-if="item.text === 'ลากิจส่วนตัว'">
+							<div class="col-4 row q-pa-xs text-center">
+								{{ "ลากิจส่วนตัว" }}
+							</div>
+							<div class="col-6 row q-pa-xs text-center">
+								<span class="text-weight-bold">{{ item.use }}</span>
+								<span class="text-grey-7 text-caption">ใช้ไป</span>
+							</div>
+						</q-card>
+					</div>
+				</q-card>
+			</div>
 
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr></template
-          ></q-table
-        >
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+			<div class="row col-12 q-col-gutter-sm">
+				<!-- แสดงปฏิทิน -->
+				<div class="col-12 row">
+					<q-card bordered class="q-pa-md col-12">
+						<div class="row col-12">
+							<div class="row items-center">
+								<div class="q-ml-sm">
+									<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
+										<q-icon name="mdi-plus" size="22px" color="blue" />
+										<q-tooltip>ยื่นใบลา</q-tooltip>
+									</q-btn>
+								</div>
+							</div>
+							<q-space />
+							<div class="justify-center row items-center">
+								<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+								<q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
+									<q-btn
+										name="calendar"
+										round
+										size="12px"
+										flat
+										icon="mdi-calendar-month"
+										@click="leaveStore.tabValue = 'calendar'"
+										:color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
+										class="q-mr-sm"
+									>
+										<q-tooltip>ปฏิทิน</q-tooltip>
+									</q-btn>
+									<q-separator vertical inset />
+									<q-btn
+										name="list"
+										round
+										size="12px"
+										flat
+										icon="mdi-format-list-bulleted"
+										@click="leaveStore.tabValue = 'list'"
+										:color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
+										class="q-ml-sm"
+									>
+										<q-tooltip>รายการ</q-tooltip>
+									</q-btn>
+								</q-tabs>
+							</div>
+						</div>
+						<div class="col-12">
+							<CalendarView v-if="leaveStore.tabValue === 'calendar'" />
+						</div>
+
+						<div class="col-12">
+							<ListView v-if="leaveStore.tabValue === 'list'" />
+						</div>
+					</q-card>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- modal ตารางสถิติการลา -->
+	<q-dialog v-model="modalStatsTable" persistent>
+		<q-card style="min-width: 85%">
+			<q-card-section class="row items-center q-pa-sm">
+				<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
+				<q-space />
+				<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="q-p-md row">
+				<q-table flat bordered dense :rows="row" :columns="columns" row-key="leaveTypeName" class="custom-table2 col-12" hide-bottom v-model:pagination="pagination">
+					<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 v-if="col.name == 'no'">
+									{{ props.rowIndex + 1 }}
+								</div>
+								<div v-else>
+									{{ col.value }}
+								</div>
+							</q-td>
+						</q-tr></template
+					></q-table
+				>
+			</q-card-section>
+		</q-card>
+	</q-dialog>
 </template>
 
 <style lang="scss" scoped>
 .borderTop {
-  border-top: 1px solid #ededed;
-  border-bottom: 1px solid #ededed;
+	border-top: 1px solid #ededed;
+	border-bottom: 1px solid #ededed;
 }
 .custom-table2 {
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
+	.q-table tr:nth-child(odd) td {
+		background: white;
+	}
 
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
+	.q-table tr:nth-child(even) td {
+		background: #f8f8f8;
+	}
 
-  .q-table thead tr {
-    background: #ecebeb;
-  }
+	.q-table thead tr {
+		background: #ecebeb;
+	}
 
-  .q-table thead tr th {
-    position: sticky;
-  }
+	.q-table thead tr th {
+		position: sticky;
+	}
 
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
+	.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;
-  }
+	.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;
-  }
+	/* 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;
-  }
+	.q-table thead tr:first-child th {
+		top: 0;
+	}
 }
 </style>