UI รอบการปฏิบัติงาน

src/modules/09_leave/components/3_WorkTime/DialogForm.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, watchEffect, watch } from "vue";
-import type { formData } from "@/modules/09_leave/interface/request/workTime";
+import type { dataRowRound } from "@/modules/09_leave/interface/response/round.ts";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-const formData = reactive<formData>({
+const formData = reactive<dataRowRound>({
-  morning: "07:30",
+  am: "",
-  morningEnd: "12:00",
+  amOut: "",
-  afternoon: "12:00",
+  pm: "",
-  afternoonEnd: "15:30",
+  pmOut: "",
-  reason: "",
+  note: "",
   status: false,
 });
 
 const props = defineProps({
   modal: Boolean,
-  editCheck: Boolean,
+  editCheck: String,
   closeDialog: Function,
   detailData: Object,
 });
@@ -23,8 +23,35 @@ function clickSave() {
   if (props.closeDialog) {
     props.closeDialog();
   }
-  console.log("save", formData);
 }
+function close() {
+  if (props.closeDialog) {
+    props.closeDialog();
+  }
+}
+watch(
+  () => props.modal,
+  (newDetailData, oldDetailData) => {
+    console.log(props.editCheck)
+    if (props.editCheck === 'add') {
+      formData.am = "";
+      formData.amOut = "";
+      formData.pm = "";
+      formData.pmOut = "";
+      formData.note = "";
+      formData.status = false;
+    } else {
+      if(props.detailData){
+        formData.am = props.detailData.am;
+        formData.amOut = props.detailData.amOut;
+        formData.pm = props.detailData.pm;
+        formData.pmOut = props.detailData.pmOut;
+        formData.note = props.detailData.note;
+        formData.status = props.detailData.status;
+      }
+    }
+  }
+);
 </script>
 
 <template>
@@ -32,32 +59,32 @@ function clickSave() {
     <q-card style="min-width: 350px" class="bg-grey-11">
       <DialogHeader
         :tittle="
-          !editCheck
+          props.editCheck === 'add'
             ? 'เพิ่มรอบการปฏิบัติงาน'
             : props.detailData
             ? `แก้ไขรอบ ${props.detailData.round}`
             : ''
         "
-        :close="closeDialog"
+        :close="close"
       />
       <q-separator color="grey-4" />
 
       <div
         class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
       >
-        <p style="color: #21ba45; font-size: 16px">ครึ่งเช้า</p>
+        <p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
         <div class="row justify-between q-my-sm items-center">
           <p class="q-ma-none">เวลาเข้างาน</p>
           <q-input
             class="inputgreen"
-            :outlined="!$props.editCheck"
+            :readonly="props.editCheck === 'edit'"
+            :outlined="props.editCheck === 'add'"
             dense
             lazy-rules
             borderless
-            v-model="formData.morning"
+            v-model="formData.am"
             hide-bottom-space
-            type="text"
+            type="time"
-          
           />
         </div>
         <q-separator inset />
@@ -65,31 +92,33 @@ function clickSave() {
           <p class="q-ma-none">เวลาออกงาน</p>
           <q-input
             class="inputgreen"
-            :outlined="!$props.editCheck"
+            :readonly="props.editCheck === 'edit'"
+            :outlined="props.editCheck === 'add'"
             dense
-            v-model="formData.morningEnd"
+            v-model="formData.amOut"
             lazy-rules
             borderless
             hide-bottom-space
-            type="text"
+            type="time"
           />
         </div>
       </div>
       <div
         class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
       >
-        <p style="color: #21ba45; font-size: 16px">ครึ่งบ่าย</p>
+        <p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
         <div class="row justify-between q-my-sm items-center">
           <p class="q-ma-none">เวลาเข้างาน</p>
           <q-input
             class="inputgreen"
-            :outlined="!$props.editCheck"
+            :readonly="props.editCheck === 'edit'"
+            :outlined="props.editCheck === 'add'"
             dense
             lazy-rules
             borderless
-            v-model="formData.afternoon"
+            v-model="formData.pm"
             hide-bottom-space
-            type="text"
+            type="time"
           />
         </div>
         <q-separator inset />
@@ -97,13 +126,14 @@ function clickSave() {
           <p class="q-ma-none">เวลาออกงาน</p>
           <q-input
             class="inputgreen"
-            :outlined="!$props.editCheck"
+            :readonly="props.editCheck === 'edit'"
+            :outlined="props.editCheck === 'add'"
             dense
-            v-model="formData.afternoonEnd"
+            v-model="formData.pmOut"
             lazy-rules
             borderless
             hide-bottom-space
-            type="text"
+            type="time"
           />
         </div>
       </div>
@@ -111,7 +141,7 @@ function clickSave() {
         class="col-12 bg-white q-ma-md"
         outlined
         stack-label
-        v-model="formData.reason"
+        v-model="formData.note"
         label="คำอธิบาย"
         hide-bottom-space
         type="textarea"
@@ -138,19 +168,22 @@ function clickSave() {
             @click="clickSave"
             color="secondary"
             icon="mdi-content-save-outline"
-            ><q-tooltip>{{ !props.editCheck ? 'บันทึกข้อมูล':'บันทึกแก้ไขข้อมูล' }}</q-tooltip></q-btn
+            ><q-tooltip>{{
+              props.editCheck === 'add' ? "บันทึกข้อมูล" : "บันทึกแก้ไขข้อมูล"
+            }}</q-tooltip></q-btn
           >
         </div>
       </div>
     </q-card>
   </q-dialog>
 </template>
+
 <style scoped lang="scss">
 .border_custom {
   border-radius: 6px !important;
   border: 1px solid #e1e1e1;
 }
-$toggle-background-color-on: #24b047;
+$toggle-background-color-on: #06884d;
 $toggle-background-color-off: darkgray;
 $toggle-control-color: white;
 $toggle-width: 40px;

src/modules/09_leave/components/3_WorkTime/MainPage.vue

@@ -1,211 +0,0 @@
-<script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
-
-import router from "@/router";
-import { useQuasar } from "quasar";
-import DialogForm from '@/modules/09_leave/components/3_WorkTime/DialogForm.vue'
-import { useWorkTimeStore } from "@/modules/09_leave/stores/WorkTimeStore";
-const dataWorkTime = useWorkTimeStore();
-const { fecthList } = dataWorkTime;
-
-const $q = useQuasar(); //ใช้ noti quasar
-const modal = ref<boolean>(false)
-const detailData = ref<any>()
-const editCheck = ref<boolean>(false)
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-
-function openModal(data:any,check:boolean){
- modal.value = true
- editCheck.value = check
- detailData.value = data
-};
-
-function closeDialog(){
-  modal.value = false
-  editCheck.value = false
-}
-onMounted(() => {
-  fecthList([
-    {
-      morning: "07:30",
-      morningEnd: "12:00",
-      afternoon: "13:00",
-      afternoonEnd: "15:30",
-      reason: "",
-      status: 1,
-    },
-    {
-      morning: "08:30",
-      morningEnd: "12:00",
-      afternoon: "13:00",
-      afternoonEnd: "15:30",
-      reason: "",
-      status: 0,
-    },
-    {
-      morning: "09:30",
-      morningEnd: "12:00",
-      afternoon: "13:00",
-      afternoonEnd: "15:30",
-      reason: "",
-      status: 1,
-    },
-    {
-      morning: "10:30",
-      morningEnd: "12:00",
-      afternoon: "13:00",
-      afternoonEnd: "15:30",
-      reason: "",
-      status: 1,
-    },
-  ]);
-});
-</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-col-gutter-sm q-mb-sm">
-      <div>
-        <q-btn
-          for="#addInvestigatefacts"
-          @click="openModal(null,false)"
-          size="12px"
-          flat
-          round
-          color="add"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มรอบการปฏิบัติงาน</q-tooltip>
-        </q-btn>
-      </div>
-      <q-space />
-
-      <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        debounce="300"
-        placeholder="ค้นหา"
-      >
-        <template v-slot:append>
-          <q-icon v-if="filterKeyword == ''" name="search" />
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-
-      <q-select
-        for="#select"
-        v-model="dataWorkTime.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataWorkTime.columns"
-        option-value="name"
-        options-cover
-        style="min-width: 150px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
-    </div>
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataWorkTime.columns"
-        :rows="dataWorkTime.rows"
-        :filter="filterKeyword"
-        row-key="interrogated"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        v-bind="attrs"
-        :visible-columns="dataWorkTime.visibleColumns"
-        :pagination-label="paginationLabel"
-        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"
-              style="color: #000000; font-weight: 500;padding-top: 16px;padding-bottom: 16px;"
-            >
-              <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" @click.prevent="openModal(props.row,true)">
-              <div v-if="col.name === 'status'">
-                <q-icon
-                  v-if="props.row.status === 1"
-                  name="mdi-check"
-                  size="sm"
-                  color="positive"
-                />
-                <q-icon
-                  v-if="props.row.status === 0"
-                  name="mdi-close"
-                  size="sm"
-                  color="grey"
-                />
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-<DialogForm 
-  :modal="modal"
-  :closeDialog="closeDialog"
-  :editCheck="editCheck"
-  :detailData="detailData"
-/>
-</template>
-<style scoped lang="scss">
-.q-table tbody td:before.no-background {
-  background: none;
-}
-</style>

src/modules/09_leave/interface/response/round.ts

@@ -5,7 +5,15 @@ interface RoundRows {
     email: string;
     phone: string;
 }
-
+interface dataRowRound {
+    am:string
+    amOut:string
+    pm:string
+    pmOut:string
+    note:string
+    status:boolean
+}
 export type {
-    RoundRows
+    RoundRows,
+    dataRowRound
 };

src/modules/09_leave/router.ts

@@ -4,7 +4,6 @@ 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 workingtime = () => import('@/modules/09_leave/components/3_WorkTime/MainPage.vue')
 
 export default [
     {
@@ -57,15 +56,6 @@ export default [
             Role: "coin",
         },
     },
-    {
+
-        path: "/workingtime",
-        name: "/working-time",
-        component: workingtime,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
-    },
 
 ]

src/modules/09_leave/stores/RoundStores.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { RoundRows } from "@/modules/09_leave/interface/response/round.ts";
+import type { dataRowRound } from "@/modules/09_leave/interface/response/round.ts";
 import type { QTableProps } from "quasar";
 
 // store ลา >> รอบการปฏิบัติงาน
@@ -9,7 +9,6 @@ export const useRoundDataStore = defineStore(
   () => {
     //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
     const visibleColumns = ref<string[]>([
-      "no",
       "round",
       "am",
       "amOut",
@@ -21,15 +20,6 @@ export const useRoundDataStore = defineStore(
 
     // หัวตาราง
     const columns = ref<QTableProps["columns"]>([
-      {
-        name: "no",
-        align: "left",
-        label: "ลำดับ",
-        sortable: false,
-        field: "no",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
       {
         name: "round",
         align: "left",
@@ -86,7 +76,7 @@ export const useRoundDataStore = defineStore(
       },
       {
         name: "status",
-        align: "left",
+        align: "center",
         label: "สถานะการใช้งาน",
         sortable: true,
         field: "status",
@@ -96,9 +86,20 @@ export const useRoundDataStore = defineStore(
     ]);
 
     // ข้อมูลในตาราง
-    const rows = ref<RoundRows[]>([]);
+    const rows = ref<dataRowRound[]>([]);
-    function fetchData(data: RoundRows[]) {
+    function fetchData(data: dataRowRound[]) {
-      rows.value = data
+      let datalist: dataRowRound[] = data.map((e: dataRowRound) => {
+        return {
+            round:`${e.am}-${e.pmOut}`,
+            am: e.am,
+            amOut: e.amOut,
+            pm: e.pm,
+            pmOut: e.pmOut,
+            note: e.note === '' ? '-':e.note,
+            status: e.status,
+        };
+    });
+    rows.value = datalist;
 }
 
     return {

src/modules/09_leave/views/RoundMain.vue

@@ -1,95 +1,89 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+
+import router from "@/router";
 import { useQuasar } from "quasar";
-import { useRoundDataStore } from '@/modules/09_leave/stores/RoundStores.ts'
+import DialogForm from '@/modules/09_leave/components/3_WorkTime/DialogForm.vue'
-import DialogHeader from "@/components/information/DialogHeader.vue";
+import { useRoundDataStore } from '@/modules/09_leave/stores/RoundStores'
-
+const dataStore = useRoundDataStore();
-const $q = useQuasar();
+const { fetchData } = dataStore;
-const dataStore = useRoundDataStore()
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-} = mixin;
-
-onMounted(() => {
-  // get ข้อมูลแล้วโยนใส่ store
-  dataStore.fetchData([
-    {
-      round: "07:30 - 15:30",
-      am: "07:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      note: "-",
-      status: true,
-    },
-    {
-      round: "08:30 - 16:30",
-      am: "08:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "16:30",
-      note: "-",
-      status: false,
-    },
-    {
-      round: "09:00 - 17:00",
-      am: "09:00",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "17:00",
-      note: "-",
-      status: false,
-    },
-  ])
-});
 
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false)
+const detailData = ref<any>()
+const editCheck = ref<string>('')
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
-function resetFilter() {
+const resetFilter = () => {
   filterKeyword.value = "";
   if (filterRef.value) {
     filterRef.value.focus();
   }
 };
 
-// กำหนด pagination
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
   page: 1,
-  rowsPerPage: 25,
+  rowsPerPage: 10,
 });
-
+const paginationLabel = (start: string, end: string, total: string) => {
-const mode = ref("add");
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-const modal = ref(false);
+  else return start + "-" + end + " ใน " + total;
-const roundTime = ref<string>("");
-const am = ref("");
-const amOut = ref("");
-const pm = ref("");
-const pmOut = ref("");
-const note = ref("");
-const status = ref(false);
-
-function clickAdd() {
-  mode.value = "add";
-  modal.value = true;
 };
 
-const clickEdit = async (val: string) => {
+function openModal(data:any,check:string){
-  mode.value = "edit"; 
+  console.log(check)
-  modal.value = true;
+ modal.value = true
-  roundTime.value = val;
+ editCheck.value = check
+ if(check === 'edit'){
+  detailData.value = data
+ }
 };
 
-/**
+function closeDialog(){
- * กดปิด dialog
- */
- const clickClose = async () => {
   modal.value = false
-};
+  editCheck.value = 'add'
+}
+onMounted(() => {
+  dataStore.fetchData([
+    {
+      am: "07:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "15:30",
+      note: "",
+      status: true,
+    },
+    {
+      am: "08:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "15:30",
+      note: "",
+      status: false,
+    },
+    {
+      am: "09:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "15:30",
+      note: "",
+      status: true,
+    },
+    {
+      am: "10:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "15:30",
+      note: "",
+      status: true,
+    },
+  ]);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -98,62 +92,103 @@ const clickEdit = async (val: string) => {
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
-          <q-btn @click="clickAdd" size="12px" flat round color="add" icon="mdi-plus">
+        <q-btn
+          for="#addInvestigatefacts"
+          @click="openModal(null,'add')"
+          size="12px"
+          flat
+          round
+          color="add"
+          icon="mdi-plus"
+        >
           <q-tooltip>เพิ่มรอบการปฏิบัติงาน</q-tooltip>
         </q-btn>
       </div>
       <q-space />
 
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+      <q-input
-          debounce="300" placeholder="ค้นหา">
+        for="#search"
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+      >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
         </template>
       </q-input>
 
-        <q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
+      <q-select
-          :display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
+        for="#select"
-          options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
     </div>
-
     <div class="col-12">
       <d-table
+        ref="table"
         :columns="dataStore.columns"
         :rows="dataStore.rows"
         :filter="filterKeyword"
-          row-key="tb-list" 
+        row-key="interrogated"
         flat
         bordered
         :paging="true"
         dense
+        class="custom-header-table"
+        v-bind="attrs"
+        :visible-columns="dataStore.visibleColumns"
+        :pagination-label="paginationLabel"
         v-model:pagination="pagination"
-          :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">
+            <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" @click="clickEdit(props.row.round)">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click.prevent="openModal(props.row,'edit')">
-                <div v-if="col.name == 'no'">
+              <div v-if="col.name === 'status'" class="text-center">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-if="col.name == 'status'" class="">
                 <q-icon
-                    v-if="col.value == false"
+                  v-if="props.row.status === true"
-                    name="mdi-close"
+                  name="mdi-check"
-                    color="grey-6"
+                  size="sm"
-                    class="text-h5"
+                  color="positive"
                 />
                 <q-icon
-                    v-else
+                  v-if="props.row.status === false"
-                    name="mdi-check"
+                  name="mdi-close"
-                    color="positive"
+                  size="sm"
-                    class="text-h5"
+                  color="grey"
                 />
               </div>
               <div v-else>
@@ -165,52 +200,15 @@ const clickEdit = async (val: string) => {
       </d-table>
     </div>
   </q-card>
-  <!-- popup Edit window-->
+<DialogForm 
-  <q-dialog v-model="modal" persistent>
+  :modal="modal"
-    <q-card style="width: 30%">
+  :closeDialog="closeDialog"
-      <q-form ref="myForm">
+  :editCheck="editCheck"
-        <DialogHeader
+  :detailData="detailData"
-          :tittle="
-            mode == 'add'
-              ? 'เพิ่มรอบการปฏิบัติงาน'
-              : 'แก้ไขรอบการ '+ `${roundTime}`
-          "
-          :close="clickClose" />
-        <q-separator />
-        <div class="q-pa-sm row">
-          <q-card bordered class="row col-12 q-pa-sm q-mb-sm">
-            <div class="col-12 text-primary text-weight-medium q-pb-sm">ครึ่งเช้า</div>
-            <div class="col-12 row q-col-gutter-sm">
-              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="am"  type="time" label="เวลาเข้างาน" />
-              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="amOut"  type="time" label="เวลาออกงาน" />
-            </div>
-          </q-card>
-          <q-card bordered class="row col-12 q-pa-sm q-mb-sm">
-            <div class="col-12 text-primary text-weight-medium q-pb-sm">ครึ่งบ่าย</div>
-            <div class="col-12 row q-col-gutter-sm">
-              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="pm"  type="time" label="เวลาเข้างาน" />
-              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="pmOut"  type="time" label="เวลาออกงาน" />
-            </div>
-          </q-card>
-          <div class="col-12 q-mb-sm">
-            <q-input class="bg-white" dense outlined v-model="note" type="textarea" label="คำอธิบาย" />
-          </div>
-          <q-card bordered class="row col-12 q-pa-sm items-center">
-            <div class="text-weight-medium text-dark text-subtitle2 text-primary">สถานะการใช้งาน</div>
-            <q-space/>
-            <q-toggle
-              v-model="status"
-              color="primary"
-              left-label
 />
-          </q-card>
-        </div>
-        <q-separator />
-        <div class="q-pa-sm row col-12">
-          <q-space/>
-          <q-btn dense class="q-px-md" unelevated color="public" label="บันทึก" />
-        </div>
-      </q-form>
-    </q-card>
-  </q-dialog>
 </template>
+<style scoped lang="scss">
+.q-table tbody td:before.no-background {
+  background: none;
+}
+</style>