From 9cf7251404046db20ccddd189ee439106bf10cdc Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 9 May 2024 16:15:58 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9E=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=95=E0=B8=99=E0=B9=80=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/KPI/api.kpis.ts                       |   1 +
 .../08_KPI/components/Tab/01_Assessment.vue   | 184 +++++++++---
 .../components/Tab/Dialog/DialogDevelop.vue   | 123 ++++++--
 .../03_DialogEvalutionDevelop.vue             | 277 ++++++++++++++++++
 4 files changed, 530 insertions(+), 55 deletions(-)
 create mode 100644 src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 7dcac38..2ec25e7 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -36,4 +36,5 @@ export default {
   kpiEvaluationCheck: `${kpiEvaluation}/check`,
 
   /**ประเมิน*/
+  kpiAchievementDevelop:`${kpiAchievement}/development`
 };
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 77115fb..7c5fadb 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, computed, watch, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRoute } from "vue-router";
 
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
-import DialogDevelop from '@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue'
-
+import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
+import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -18,7 +18,6 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
-
 const indicatorScore = defineModel("indicatorScore", {
   type: Number,
   default: 0,
@@ -30,13 +29,21 @@ const competencyScore = defineModel("competencyScore", {
 const dataListCriteria = ref<ListCriteria[]>([]);
 
 const rows = ref<any[]>([]);
+const modalEvaluate = ref<boolean>(false);
 const modalCriteria = ref<boolean>(false);
 const modalDevelop = ref<boolean>(false);
-const editDevelop = ref<boolean>(false);
+const idEditDevelop = ref<string>("");
 const $q = useQuasar();
 const route = useRoute();
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
-const { hideLoader, messageError, date2Thai } = useCounterMixin();
+const {
+  hideLoader,
+  messageError,
+  date2Thai,
+  success,
+  showLoader,
+  dialogRemove,
+} = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -49,7 +56,11 @@ const totalResults1 = ref<number>(0);
 const totalResults2 = ref<number>(0);
 const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
-
+const formData = reactive({
+  isDevelopment70: false,
+  isDevelopment20: false,
+  isDevelopment10: false,
+});
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -249,21 +260,58 @@ watch(
 );
 
 function onAdd() {
-  modalDevelop.value = true
-  editDevelop.value = false
+  modalDevelop.value = true;
 }
 
 function onEdit(id: string) {
-  modalDevelop.value = true
-  editDevelop.value = true
+  modalDevelop.value = true;
+  idEditDevelop.value = id;
+}
+
+function getDevelop() {
+  http
+    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    });
+}
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiAchievementDevelop + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getAll();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+async function getAll() {
+  await getCriteria();
+  await fetchListPlanned();
+  await fetchListRole();
+  await fetchAssigned();
+  await getDevelop();
+}
+
+function onEvaluate() {
+  modalEvaluate.value = true;
 }
 
-function onDelete(id: string) {}
 onMounted(() => {
   getCriteria();
   fetchListPlanned();
   fetchListRole();
   fetchAssigned();
+  getDevelop();
   setTimeout(() => {
     hideLoader();
   }, 1000);
@@ -367,18 +415,18 @@ onMounted(() => {
             </div>
 
             <q-space />
-            <!-- <q-btn
-            v-if="!isReadonly"
-            flat
-            round
-            icon="mdi-clipboard-check-outline"
-            color="blue-5"
-            size="12px"
-            dense
-            @click="onEvaluate(item.id)"
-          >
-            <q-tooltip>ประเมิน</q-tooltip>
-          </q-btn> -->
+            <q-btn
+              v-if="!isReadonly"
+              flat
+              round
+              icon="mdi-clipboard-check-outline"
+              color="blue-5"
+              size="12px"
+              dense
+              @click="onEvaluate()"
+            >
+              <q-tooltip>ประเมิน</q-tooltip>
+            </q-btn>
           </div>
         </q-card-section>
         <q-card-section class="q-pa-sm">
@@ -405,20 +453,70 @@ onMounted(() => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  class="vertical-top"
+                >
                   <div v-if="col.name == 'createDate'">
                     {{ col.value ? date2Thai(col.value) : "-" }}
                   </div>
 
-                  <div v-else-if="col.name == 'summary'">
-                    {{
-                      props.row.point !== 0
-                        ? (props.row.point / 5) * props.row.weight
-                        : "-"
-                    }}
+                  <div v-else-if="col.name == 'develop'">
+                    <div class="column">
+                      <q-checkbox
+                        size="xs"
+                        :model-value="props.row.isDevelopment70"
+                        label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                      />
+                      <q-checkbox
+                        size="xs"
+                        :model-value="props.row.isDevelopment20"
+                        label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                      />
+                      <q-checkbox
+                        size="xs"
+                        :model-value="props.row.isDevelopment10"
+                        label="10 การฝึกอบรมอื่นๆ"
+                      />
+                    </div>
+                  </div>
+                  <div v-else-if="col.name == 'achievement'">
+                    <q-btn-group outline>
+                      <q-btn
+                        outline
+                        color="grey-6"
+                        label="0"
+                        :class="props.row.summary == 0 && 'active'"
+                        ><q-tooltip>{{
+                          props.row.achievement0
+                        }}</q-tooltip></q-btn
+                      >
+                      <q-btn
+                        outline
+                        color="grey-6"
+                        label="5"
+                        :class="props.row.summary == 5 && 'active'"
+                        ><q-tooltip>{{
+                          props.row.achievement5
+                        }}</q-tooltip></q-btn
+                      >
+                      <q-btn
+                        outline
+                        color="grey-6"
+                        label="10"
+                        :class="props.row.summary == 10 && 'active'"
+                        ><q-tooltip>{{
+                          props.row.achievement10
+                        }}</q-tooltip></q-btn
+                      >
+                    </q-btn-group>
+                  </div>
+                  <div v-else-if="col.name === 'summary'">
+                    {{ props.row.summary ? props.row.summary : 0 }}
                   </div>
                   <div v-else>
-                    {{ col.value }}
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
                 <q-td v-if="!isReadonly">
@@ -462,8 +560,17 @@ onMounted(() => {
     v-model:dataListCriteria="dataListCriteria"
   />
 
-  <DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop"/>
+  <DialogDevelop
+    v-model:modal="modalDevelop"
+    v-model:id="idEditDevelop"
+    :get-all="getAll"
+  />
 
+  <DialogEvalutionDevelop
+    v-model:modal="modalEvaluate"
+    v-model:data="rows"
+    :get-all="getAll"
+  />
 </template>
 
 <style scoped>
@@ -510,5 +617,16 @@ onMounted(() => {
   .q-table thead tr:first-child th {
     top: 0;
   }
+
+  .q-btn-group--outline > .q-btn-item:not(:last-child):before {
+    border-right: 1px solid #c4c4c4;
+  }
+  .q-btn-group--outline > .q-btn-item.active {
+    color: #2196f3 !important;
+    background-color: #fff;
+  }
+  .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+    border: 1px solid #2196f3;
+  }
 }
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 68a7e16..06c42f2 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
-import { ref, reactive } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -8,14 +8,25 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 
-const route = useRoute()
-const idKpi = ref<string>(route.params.id.toLocaleString())
+const props = defineProps({
+  getAll:Function
+})
+const route = useRoute();
+const idKpi = ref<string>(route.params.id.toLocaleString());
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, dialogConfirm, messageError } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
 const modal = defineModel<boolean>("modal", { required: true });
-const isEdit = defineModel<boolean>("isEdit", { required: true });
+const id = defineModel<string>("id", { required: true });
 
 const formData = reactive({
   name: "",
@@ -30,7 +41,7 @@ const formData = reactive({
 });
 function close() {
   modal.value = false;
-  isEdit.value = false;
+  id.value = "";
 
   formData.name = "";
   formData.group = [];
@@ -43,32 +54,82 @@ function close() {
   formData.achievement5 =
     "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
   formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
+  props.getAll?.()
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    const body = {
-      name: formData.name,
-      target: formData.target,
-      summary: 0,
-      achievement10: formData.achievement10,
-      achievement5: formData.achievement5,
-      achievement0: formData.achievement0,
-      isDevelopment70: formData.isDevelopment70,
-      isDevelopment20: formData.isDevelopment20,
-      isDevelopment10: formData.isDevelopment10,
-      kpiUserEvaluationId: idKpi.value,
-    };
-    http
-  });
+  if (
+    formData.isDevelopment70 == false &&
+    formData.isDevelopment20 == false &&
+    formData.isDevelopment10 == false
+  ) {
+    dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
+  } else {
+    dialogConfirm($q, () => {
+      const url = id.value
+        ? config.API.kpiAchievementDevelop + `/${id.value}`
+        : config.API.kpiAchievementDevelop;
+      const body = {
+        name: formData.name,
+        target: formData.target,
+        achievement10: formData.achievement10,
+        achievement5: formData.achievement5,
+        achievement0: formData.achievement0,
+        isDevelopment70: formData.isDevelopment70,
+        isDevelopment20: formData.isDevelopment20,
+        isDevelopment10: formData.isDevelopment10,
+        kpiUserEvaluationId: idKpi.value,
+      };
+      showLoader();
+      http[id.value ? "put" : "post"](url, body)
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
 }
+watch(
+  () => id.value,
+  (i) => {
+    if (i) {
+      showLoader();
+      http
+        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
+        .then((res) => {
+          const data = res.data.result;
+          formData.name = data.name;
+          formData.group = data.group;
+          formData.target = data.target;
+          formData.isDevelopment70 = data.isDevelopment70;
+          formData.isDevelopment20 = data.isDevelopment20;
+          formData.isDevelopment10 = data.isDevelopment10;
+          formData.achievement10 = data.achievement10;
+          formData.achievement5 = data.achievement5;
+          formData.achievement0 = data.achievement0;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">
     <q-card style="width: 80%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
-          :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
+          :tittle="`${id ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
           :close="close"
         />
         <q-separator />
@@ -79,11 +140,17 @@ function onSubmit() {
                 v-model="formData.name"
                 outlined
                 dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา'}`,]"
+                lazy-rules
+                hide-bottom-space
                 class="inputgreen"
                 label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
               >
               </q-input>
             </div>
+            <div class="col-12">
+              <span class="text-grey-6 text-weight-medium">วิธีการพัฒนา</span>
+            </div>
             <div class="column">
               <q-checkbox
                 v-model="formData.isDevelopment70"
@@ -106,6 +173,9 @@ function onSubmit() {
                 type="textarea"
                 dense
                 class="inputgreen"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
+                lazy-rules
+                hide-bottom-space
               ></q-input>
             </div>
             <div class="col-12">
@@ -129,6 +199,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>
@@ -144,6 +217,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>
@@ -159,6 +235,9 @@ function onSubmit() {
                       outlined
                       dense
                       label="เกณฑ์การประเมิน"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
+                      lazy-rules
+                      hide-bottom-space
                     ></q-input>
                   </div>
                 </div>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
new file mode 100644
index 0000000..4f2fe3c
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref } from "vue";
+
+const props = defineProps({
+  getAll: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogMessageNotify,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any[]>("data", { required: true });
+const summary = ref<number | null>(null);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "develop",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "develop",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการนำไปพัฒนางาน",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "achievement",
+    align: "left",
+    label: "เกณฑ์การประเมินผลการพัฒนา",
+    sortable: true,
+    field: "achievement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onSubmit() {
+  const data = rows.value.map((i: any) => ({
+    id: i.id,
+    point: i.summary,
+    summary: i.summary,
+  }));
+  showLoader();
+  http
+    .post(config.API.kpiAchievementDevelop + `/point`, data)
+    .then((res) => {
+      success($q, "บันทึกข้อมลสำเร็จ");
+      close();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function close() {
+  modal.value = false;
+  rows.value = [];
+  props.getAll?.();
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent style="width: 60vw">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="ประเมิน" :close="close" />
+        <q-separator />
+        <q-card-section style="min-height: 70vh">
+          <div class="col-12 q-pa-sm">
+            <q-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              dense
+              hide-pagination
+              class="custom-table2"
+              :rows-per-page-options="[20]"
+              no-data-label="ไม่มีข้อมูล"
+            >
+              <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.id"
+                    class="vertical-top"
+                  >
+                    <div v-if="col.name == 'develop'">
+                      <div class="column">
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment70"
+                          label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment20"
+                          label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment10"
+                          label="10 การฝึกอบรมอื่นๆ"
+                        />
+                      </div>
+                    </div>
+                    <div v-else-if="col.name === 'summary'">
+                      {{ props.row.summary ? props.row.summary : 0 }}
+                    </div>
+
+                    <div v-else-if="col.name == 'achievement'">
+                      <q-btn-group outline>
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="0"
+                          :class="props.row.summary == 0 && 'active'"
+                          @click="props.row.summary = 0"
+                          ><q-tooltip>{{
+                            props.row.achievement0
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="5"
+                          :class="props.row.summary == 5 && 'active'"
+                          @click="props.row.summary = 5"
+                          ><q-tooltip>{{
+                            props.row.achievement5
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="10"
+                          :class="props.row.summary == 10 && 'active'"
+                          @click="props.row.summary = 10"
+                          ><q-tooltip>{{
+                            props.row.achievement10
+                          }}</q-tooltip></q-btn
+                        >
+                      </q-btn-group>
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .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;
+  }
+
+  /* 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-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #fff;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+}
+</style>