From f44399919c476e6e39637778748a18868486abb7 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 2 Nov 2023 17:32:57 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B9=81=E0=B8=9B=E0=B8=A5=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B9=83=E0=B8=8A?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  10 +-
 .../components/4_ChangeRound/DialogForm.vue   | 273 ++++++++++++++++++
 .../09_leave/interface/request/changeRound.ts |  21 ++
 .../interface/response/changeRound.ts         |  38 +++
 src/modules/09_leave/router.ts                |  11 +
 .../09_leave/stores/ChangeRoundStore.ts       | 187 ++++++++++++
 .../09_leave/views/ChangeRoundMain.vue        | 201 +++++++++++++
 7 files changed, 739 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
 create mode 100644 src/modules/09_leave/interface/request/changeRound.ts
 create mode 100644 src/modules/09_leave/interface/response/changeRound.ts
 create mode 100644 src/modules/09_leave/stores/ChangeRoundStore.ts
 create mode 100644 src/modules/09_leave/views/ChangeRoundMain.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a3533531f..553a0ecdc 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -384,18 +384,24 @@ const menuList = readonly<any[]>([
       },
       {
         key: 9.2,
+        label: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
+        path: "/change-round",
+        role: "leave",
+      },
+      {
+        key: 9.3,
         label: "รายการลงเวลาปฏิบัติงาน",
         path: "/work-list",
         role: "leave",
       },
       {
-        key: 9.3,
+        key: 9.4,
         label: "รายการลา",
         path: "/leave-list",
         role: "leave",
       },
       {
-        key: 9.4,
+        key: 9.5,
         label: "รายงานสถิติ",
         path: "/statistics-report",
         role: "leave",
diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
new file mode 100644
index 000000000..f5b42673a
--- /dev/null
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref, reactive, watchEffect, watch } from "vue";
+import type {
+  changeRoundEdit,
+  MyObjectRoundChangeRef,
+} from "@/modules/09_leave/interface/request/changeRound";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+const dataStore = useChangeRoundDataStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai } = mixin;
+
+const roundRef = ref<Object | null>(null);
+const resonRef = ref<Object | null>(null);
+const effectiveDateRef = ref<Object | null>(null);
+
+const formData = reactive<changeRoundEdit>({
+  round: "",
+  date: "",
+  reson: "",
+  effectiveDate: null,
+});
+
+const roundOp = ref([
+  {
+    id: "1",
+    name: "รอบ 1",
+  },
+  {
+    id: "2",
+    name: "รอบ 2",
+  },
+]);
+const objectRoundChange: MyObjectRoundChangeRef = {
+  round: roundRef,
+  effectiveDate: effectiveDateRef,
+};
+
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRoundChange) {
+    if (Object.prototype.hasOwnProperty.call(objectRoundChange, key)) {
+      const property = objectRoundChange[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log(hasError);
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      props.closeDialog?.();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+const props = defineProps({
+  modal: Boolean,
+  closeDialog: Function,
+  editCheck: String,
+  DataRow: Object,
+});
+
+function close() {
+  if (props.closeDialog) {
+    props.closeDialog();
+  }
+}
+watch(
+  () => props.modal,
+  (newDetailData, oldDetailData) => {
+    if (props.editCheck === "edit") {
+      formData.round = "";
+      formData.reson = "";
+      formData.effectiveDate = null;
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 800px">
+      <form @submit.prevent="validateForm">
+        <q-toolbar>
+          <q-toolbar-title
+            v-if="props.editCheck === 'edit'"
+            class="text-subtitle1 text-bold"
+            >เปลี่ยนรอบการลาของ
+            <span class="text-teal-6">{{
+              props.DataRow ? props.DataRow.fullName : ""
+            }}</span></q-toolbar-title
+          >
+          <q-toolbar-title
+            v-if="props.editCheck === 'history'"
+            class="text-subtitle1 text-bold"
+            >ประวัติการเปลี่ยนรอบการลงเวลา
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="close"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <div v-if="props.editCheck === 'edit'">
+          <q-separator color="grey-4" />
+          <q-card-section style="max-height: 50vh" class="scroll q-pa-none">
+            <div class="q-pa-md">
+              <div class="row">
+                <q-icon
+                  name="mdi-label-variant"
+                  class="cursor-pointer self-center"
+                  color="blue"
+                  size="md"
+                >
+                </q-icon>
+                <span class="self-center text-bold text-blue text-subtitle1"
+                  >รอบปัจจุบัน</span
+                >
+                <span class="self-center text-subtitle1 q-ml-sm">{{
+                  props.DataRow ? `${props.DataRow.currentRound} น.` : ""
+                }}</span>
+              </div>
+              <div class="row q-mt-sm justify-between">
+                <q-select
+                  v-model="formData.round"
+                  label="รอบที่ต้องการเปลี่ยน"
+                  dense
+                  ref="roundRef"
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบที่ต้องการเปลี่ยน']"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="roundOp"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :borderless="true"
+                  outlined
+                  style="width: 23.5rem"
+                />
+
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.effectiveDate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="inputDatereceive"
+                      outlined
+                      ref="effectiveDateRef"
+                      dense
+                      style="width: 23.5rem"
+                      class="datepicker "
+                      :model-value="
+                        formData.effectiveDate != null
+                          ? date2Thai(formData.effectiveDate)
+                          : null
+                      "
+                      label="วันที่ให้มีผล"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่ให้มีผล'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <q-input
+                class="col-12 bg-white"
+                outlined
+                stack-label
+                v-model="formData.reson"
+                label="เหตุผล"
+                hide-bottom-space
+                type="textarea"
+              ></q-input>
+            </div>
+          </q-card-section>
+        </div>
+        <q-separator color="grey-4" />
+        <div class="q-pa-xs">
+          <div class="row justify-end q-mr-sm q-py-sm">
+            <q-btn
+              v-if="props.editCheck === 'edit'"
+              id="onSubmit"
+              type="submit"
+              unelevated
+              label="บันทึก"
+              class="q-px-md items-center"
+              color="secondary"
+            />
+          </div>
+        </div>
+      </form>
+      <div v-if="props.editCheck === 'history'">
+        <div class="q-pa-md">
+          <d-table
+            ref="table"
+            :columns="dataStore.columnsHistory"
+            :rows="dataStore.rowsHistory"
+            row-key="id"
+            flat
+            bordered
+            :paging="false"
+            dense
+            class="custom-header-table"
+            :visible-columns="dataStore.visibleColumnsHistory"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  style="color: #000000; font-weight: 500"
+                >
+                  <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 == 'round'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_leave/interface/request/changeRound.ts b/src/modules/09_leave/interface/request/changeRound.ts
new file mode 100644
index 000000000..2e7ab8869
--- /dev/null
+++ b/src/modules/09_leave/interface/request/changeRound.ts
@@ -0,0 +1,21 @@
+interface dataPost {
+    cardId: string
+    firstName: string
+    lastName: string
+}
+interface changeRoundEdit {
+    round: string
+    date: string
+    reson: string
+    effectiveDate: Date | null
+}
+interface MyObjectRoundChangeRef {
+    round: object | null
+    effectiveDate: object | null
+    [key: string]: any;
+}
+export type {
+    dataPost,
+    changeRoundEdit,
+    MyObjectRoundChangeRef
+}
\ No newline at end of file
diff --git a/src/modules/09_leave/interface/response/changeRound.ts b/src/modules/09_leave/interface/response/changeRound.ts
new file mode 100644
index 000000000..bc5a0dc4c
--- /dev/null
+++ b/src/modules/09_leave/interface/response/changeRound.ts
@@ -0,0 +1,38 @@
+interface changeShow {
+    cardId: string
+    prefix: string
+    firstName: string
+    lastName: string
+    fullName: string
+    roundStart: string
+    roundEnd: string
+    currentRound: string
+    effectiveDate: string | null
+}
+interface dataRowChangeRound {
+    cardId: string
+    prefix: string
+    firstName: string
+    lastName: string
+    roundStart: string
+    roundEnd: string
+    effectiveDate: Date
+}
+interface dataRowChangeRoundHistory {
+    id: string
+    roundStart: string
+    roundEnd: string
+    effectiveDate: Date
+    reson: string | null
+}
+interface historyShow {
+    time: string
+    effectiveDate: string | null
+    reson: string | null
+}
+export type {
+    changeShow,
+    dataRowChangeRound,
+    dataRowChangeRoundHistory,
+    historyShow
+}
\ No newline at end of file
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 3636190f8..932fa9ded 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -4,6 +4,7 @@ const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
 const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
 const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
 const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
+const ChangeRoundMain = () => import("@/modules/09_leave/views/ChangeRoundMain.vue")
 
 export default [
     {
@@ -16,6 +17,16 @@ export default [
             Role: "coin",
         },
     },
+    {
+        path: "/change-round",
+        name: "/change-round",
+        component: ChangeRoundMain,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
     {
         path: "/work-list",
         name: "/work-list",
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
new file mode 100644
index 000000000..f6577f12a
--- /dev/null
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -0,0 +1,187 @@
+import { defineStore } from "pinia";
+import { ref, reactive } from "vue";
+import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const checkCilck = ref<boolean>(false)
+// store ลา >> รอบการปฏิบัติงาน
+export const useChangeRoundDataStore = defineStore(
+    "changeRoundDataStore",
+    () => {
+        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+        const visibleColumns = ref<string[]>([
+            "cardId",
+            "fullName",
+            "currentRound",
+            "effectiveDate"
+        ]);
+        const visibleColumnsHistory = ref<string[]>([
+            "round",
+            "time",
+            "effectiveDate",
+            "reson"
+        ]);
+
+        // หัวตาราง
+        const columns = ref<QTableProps["columns"]>([
+            {
+                name: "cardId",
+                align: "left",
+                label: "เลขบัตรประชาชน",
+                sortable: true,
+                field: "cardId",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "fullName",
+                align: "left",
+                label: "ชื่อ-นามสกุล",
+                sortable: true,
+                field: "fullName",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "currentRound",
+                align: "left",
+                label: "รอบปัจจุบัน",
+                sortable: true,
+                field: "currentRound",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "effectiveDate",
+                align: "left",
+                label: "วันที่มีผล",
+                sortable: true,
+                field: "effectiveDate",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+        ]);
+        const columnsHistory = ref<QTableProps["columns"]>([
+            {
+                name: "round",
+                align: "left",
+                label: "ครั้งที่",
+                sortable: true,
+                field: "round",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "time",
+                align: "left",
+                label: "รอบเวลา",
+                sortable: true,
+                field: "time",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "effectiveDate",
+                align: "left",
+                label: "วันที่มีผล",
+                sortable: true,
+                field: "effectiveDate",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+            {
+                name: "reson",
+                align: "left",
+                label: "เหตุผล",
+                sortable: true,
+                field: "reson",
+                headerStyle: "font-size: 14px",
+                style: "font-size: 14px",
+            },
+        ]);
+        const dataList = [
+            {
+                cardId: '3514210651232',
+                prefix: "นางสาว",
+                firstName: "กัณฐิมา",
+                lastName: "กาฬสินธุ์",
+                roundStart: "07:00",
+                roundEnd: "11:00",
+                effectiveDate: new Date("2023-11-01T03:08:43.217"),
+            },
+            {
+                cardId: '3514210651232',
+                prefix: "นางสาว",
+                firstName: "กัณฐิมา",
+                lastName: "กาฬสินธุ์",
+                roundStart: "13:00",
+                roundEnd: "16:00",
+                effectiveDate: new Date("2023-11-01T03:08:43.217"),
+            },
+            {
+                cardId: '1231231231234',
+                prefix: "นายสาว",
+                firstName: "test",
+                lastName: "test",
+                roundStart: "07:00",
+                roundEnd: "16:00",
+                effectiveDate: new Date("2023-11-01T03:08:43.217"),
+            },
+        ]
+
+        // ข้อมูลในตาราง
+        const rows = ref<changeShow[]>([]);
+        const rowsHistory = ref<historyShow[]>([]);
+        function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
+            let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
+                return {
+                    id: e.id,
+                    time: `${e.roundStart}-${e.roundEnd}`,
+                    effectiveDate: date2Thai(e.effectiveDate),
+                    reson: e.reson ?? '-'
+
+                };
+            });
+            rowsHistory.value = datalistHistory;
+        }
+
+        function fetchDataForCardId(cardId: string, check: string) {
+            if (cardId.length === 13) {
+                const data = dataList.filter((e) => e.cardId === cardId);
+                rows.value = data.map((e) => ({
+                    cardId: e.cardId,
+                    prefix: e.prefix,
+                    firstName: e.firstName,
+                    lastName: e.lastName,
+                    fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
+                    roundStart: e.roundStart,
+                    roundEnd: e.roundEnd,
+                    currentRound: `${e.roundStart}-${e.roundEnd}`,
+                    effectiveDate: date2Thai(e.effectiveDate),
+                }));
+            } else if (cardId === 'null') {
+                rows.value = []
+                checkCilck.value = false
+            } else if (check === 'click') {
+                checkCilck.value = true
+            }
+        }
+
+
+        return {
+            visibleColumns,
+            columns,
+            columnsHistory,
+            rows,
+            rowsHistory,
+            fetchDatainHistory,
+            visibleColumnsHistory,
+            dataList,
+            fetchDataForCardId,
+            checkCilck
+        };
+    }
+);
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
new file mode 100644
index 000000000..d5820cbf2
--- /dev/null
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, useAttrs, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+// ค้นหาในตาราง
+import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
+import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
+import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
+import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+const dataStore = useChangeRoundDataStore();
+const modal = ref<boolean>(false);
+const editCheck = ref<string>("");
+const DataRow = ref<any>();
+const formData = reactive<dataPost>({
+  cardId: "",
+  firstName: "",
+  lastName: "",
+});
+
+
+
+function Openmodal(check: string, detail: any) {
+  console.log(detail);
+  DataRow.value = detail;
+  modal.value = true;
+  editCheck.value = check;
+}
+function closeDialog() {
+  modal.value = false;
+}
+async function  searchcardid(){
+  const data = await dataStore.dataList.find((e) => e.cardId === formData.cardId)
+  if(data){
+    formData.firstName = data.firstName
+    formData.lastName = data.lastName
+  } else if(!data){
+    formData.firstName = ''
+    formData.lastName = ''
+    dataStore.fetchDataForCardId('null','notClick')
+  }
+}
+onMounted(() => {
+  dataStore.fetchDatainHistory([
+    {
+      id: "xxx1",
+      roundStart: "08:30",
+      roundEnd: "16:00",
+      effectiveDate: new Date("2023-11-01T03:08:43.217"),
+      reson: null,
+    },
+    {
+      id: "xxx2",
+      roundStart: "08:00",
+      roundEnd: "16:30",
+      effectiveDate: new Date("2023-11-01T03:08:43.217"),
+      reson: null,
+    },
+  ]);
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row col-12 q-mb-sm">
+      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg">
+        <span>DataTest #cardId: 3514210651232 / 1231231231234</span>
+        <div class="text-dark col-12 text-weight-bold text-subtitle1">
+          ค้นหารายชื่อ
+        </div>
+        <div class="row justify-between q-gutter-y-sm">
+          <q-input
+            v-model="formData.cardId"
+            outlined
+            label="เลขบัตรประชาชน"
+            class="bg-white col-6 col-md-4 inputgreen"
+            dense
+            maxlength="13"
+            @keyup="searchcardid"
+          />
+          <q-input
+            v-model="formData.firstName"
+            outlined
+            readonly
+            label="ชื่อ"
+            class="bg-white col-5 col-md-3 inputgreen"
+            dense
+          />
+          <q-input
+            v-model="formData.lastName"
+            outlined
+            readonly
+            label="นามสกุล"
+            class="bg-white col-6 col-md-3 inputgreen"
+            dense
+          />
+          <q-btn
+            @click="
+              dataStore.fetchDataForCardId(formData.cardId,'click')
+            "
+            for="#search"
+            dense
+            :disabled="!formData.cardId"
+            unelevated
+            color="primary"
+            class="q-px-sm col-5 col-md-1"
+            >ค้นหา</q-btn
+          >
+        </div>
+      </q-card>
+    </div>
+    <div v-if="formData.cardId && dataStore.checkCilck === true">
+      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold">ไม่พบข้อมูลบัตรประชาชนนี้</q-card>
+    </div>
+    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
+      <d-table
+        ref="table"
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        row-key="interrogated"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="dataStore.visibleColumns"
+
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th style="width: 200px" />
+          </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>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td style="width: 150px">
+              <div>
+                <q-btn
+                  flat
+                  icon="mdi-dots-vertical"
+                  color="grey-8"
+                  for="#cancel"
+                  dense
+                  round
+                  unelevated
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="Openmodal('edit', props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="Openmodal('history', props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+  <Dialogform
+    :modal="modal"
+    :closeDialog="closeDialog"
+    :editCheck="editCheck"
+    :DataRow="DataRow"
+  />
+</template>
+<style scoped lang="scss">
+.q-table tbody td:before.no-background {
+  background: none;
+}
+</style>