ลงเวลาพิเศษ

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -35,6 +35,8 @@ const formData = reactive<dataRowRound>({
   note: "",
   checkInStatus: "",
   checkOutStatus: "",
+  checkInEdit:false,
+  checkOutEdit:false
 });
 
 const objectRound: MyObjectRoundRef = {
@@ -58,7 +60,7 @@ function validateForm() {
   }
   if (hasError.every((result) => result === true)) {
     onSubmit();
-    console.log(hasError)
+    console.log(hasError);
   } else {
     console.log(hasError);
   }
@@ -129,6 +131,8 @@ watch(
         formData.checkIn = props.detailData.checkIn;
         formData.checkOut = props.detailData.checkOut;
         formData.note = props.detailData.note;
+        formData.checkInEdit = props.detailData.checkInEdit;
+        formData.checkOutEdit = props.detailData.checkOutEdit;
       }
     }
   }
@@ -197,76 +201,21 @@ watch(
                 </q-input>
               </template>
             </datepicker>
-            <div class="row justify-between q-my-sm items-start">
-              <p class="q-ma-none mt">เวลาเข้างาน</p>
-              <q-input
-                ref="checkInRef"
-                class="inputgreen"
-                dense
-                lazy-rules
-                borderless
-                outlined
-                v-model="formData.checkIn"
-                :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
-                  (val) => {
-                    if (val && formData.checkOut) {
-                      if (val > formData.checkOut) {
-                        return 'ต้องน้อยกว่าเวลาออกงาน';
-                      }
-                      if (val === formData.checkOut) {
-                        return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
-                      }
-                    }
-                    return true;
-                  },
-                ]"
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
-            </div>
-            <q-separator inset />
-            <div class="row items-start q-my-sm justify-between">
-              <p class="q-ma-none mt">เวลาออกงาน</p>
-              <q-input
-                ref="checkOutRef"
-                class="inputgreen"
-                dense
-                v-model="formData.checkOut"
-                lazy-rules
-                borderless
-                outlined
-                :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
-                  (val) => {
-                    if (val && formData.checkIn) {
-                      if (val < formData.checkIn) {
-                        return 'ต้องมากกว่าเวลาเข้างาน';
-                      }
-                      if (val === formData.checkIn) {
-                        return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
-                      }
-                    }
-                    return true;
-                  },
-                ]"
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
+            <div class="column">
+              <q-checkbox readonly :model-value="formData.checkInEdit" label="ขอแก้ไขเวลาช่วงเช้า" />
+              <q-checkbox readonly :model-value="formData.checkOutEdit" label="ขอแก้ไขเวลาช่วงบ่าย" />
             </div>
           </div>
           <div
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
-            <p style="color: #06884d; font-size: 16px">สถานะเข้างาน</p>
+            <p style="color: #06884d; font-size: 16px">สถานะช่วงเช้า</p>
             <div class="justify-between q-my-sm items-start">
               <q-select
                 ref="checkInStatusRef"
                 for="checkInStatus"
                 emit-value
-                :rules="[(val) => !!val || 'กรุณาเลือกสถานะเข้างาน']"
+                :rules="[(val) => !!val || 'กรุณาเลือกสถานะช่วงเช้า']"
                 hide-bottom-space
                 map-options
                 outlined
@@ -286,7 +235,7 @@ watch(
           <div
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
-            <p style="color: #06884d; font-size: 16px">สถานะออกงาน</p>
+            <p style="color: #06884d; font-size: 16px">สถานะช่วงบ่าย</p>
             <div
               class="justify-between q-my-sm items-start"
               style="width: 100%"
@@ -298,7 +247,7 @@ watch(
                 map-options
                 outlined
                 dense
-                :rules="[(val) => !!val || 'กรุณาเลือกสถานะออกงาน']"
+                :rules="[(val) => !!val || 'กรุณาเลือกสถานะช่วงบ่าย']"
                 hide-bottom-space
                 full-width
                 v-model="SpecialTimeStore.checkOutStatus"

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

@@ -13,6 +13,8 @@ interface dataRowRound {
   checkInStatus: string;
   checkOutStatus: string;
   note: string;
+  checkInEdit:boolean
+checkOutEdit:boolean
 }
 interface MyObjectRoundRef {
   checkIn: object | null;

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

@@ -78,11 +78,11 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
             timeMorning:
               e.startTimeMorning == null
                 ? "-"
-                : e.startTimeMorning + " - " + e.endTimeMorning,
+                : e.checkInEdit == true ? e.startTimeMorning + " - " + e.endTimeMorning:'-',
             timeAfternoon:
               e.startTimeAfternoon == null
                 ? "-"
-                : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
+                : e.checkOutEdit == true ? e.startTimeAfternoon + " - " + e.endTimeAfternoon:'-',
             startTimeMorning: e.startTimeMorning,
             endTimeMorning: e.endTimeMorning,
             startTimeAfternoon: e.startTimeAfternoon,