เเก้ไข UI detailLeave

comment code retirement

src/modules/09_leave/components/2_Leave/DetailLeave.vue

@@ -6,7 +6,8 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
-
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogReason1 from "@/components/Dialogs/PopupReason.vue";
 const APIDATA = useLeavelistDataStoreTest();
 
 /** importType */
@@ -35,6 +36,21 @@ const router = useRouter();
 const route = useRoute();
 const paramsId = route.params.id.toString();
 
+const modalApprove = ref(false);
+const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
+const dialogTitle = ref<string>("อนุมัติ");
+const closeDialog = () => {
+  modalApprove.value = false;
+};
+
+/** ฟังก์ชั่น อัปโหลด
+ * consolelog ไว้ก่อน
+ */
+const filesUpload = ref<any>(null);
+function upLoadFile() {
+  console.log("upload", filesUpload.value);
+}
+
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremData>({
   id: "", //Id การยื่นขอลา
@@ -212,61 +228,93 @@ function checkLeaveType(type: string) {
   }
 }
 
+/** Function dialog*/
+const openModal = async (data: string) => {
+  if (data === "approve") {
+    modalApprove.value = true;
+    dialogTitle.value = "อนุมัติ";
+  }
+  if (data === "UnApprove") {
+    modalApprove.value = true;
+    dialogTitle.value = "ไม่อนุมัติ";
+  }
+};
+
 /** Function Save*/
 function clickSave() {
-  dialogConfirm(
-    $q,
-    () => console.log("save"),
-    "ยืนยันการอนุมัติ",
-    "ต้องการยืนยันการอนุมัติใช่หรือไม่ ?"
-  );
-}
-
-/** Function Reject*/
-function clickReject() {
-  dialogConfirm(
-    $q,
-    () => console.log("reject"),
-    "ยืนยันการดำเนินการ",
-    "ต้องการยืนยันการดำเนินการนี้ใช่หรือไม่ ?"
-  );
+  if (dialogTitle.value === "อนุมัติ") {
+    dialogConfirm(
+      $q,
+      () => console.log("save1"),
+      "ยืนยันอนุมัติ",
+      "ต้องการยืนยันอนุมัติใช่หรือไม่ ?"
+    );
+    modalApprove.value = false;
+    console.log("Yes");
+  }
+  if (dialogTitle.value === "ไม่อนุมัติ") {
+    dialogConfirm(
+      $q,
+      () => console.log("save1"),
+      "ยืนยันไม่อนุมัติ",
+      "ต้องการยืนยันไม่อนุมัติใช่หรือไม่ ?"
+    );
+    modalApprove.value = false;
+    console.log("NOT");
+  }
 }
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <div class="q-mr-lg">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div class="q-mr-lg">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/leave-list`)"
+        />
+        รายละเอียดการลาของ {{ formData.fullname }}
+      </div>
+      <div>
+        <q-btn
+          icon="mdi-download"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div>
+      <q-space />
+      <q-file
+        v-model="filesUpload"
         dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.push(`/leave-list`)"
-      />
-      รายละเอียดการลาของ {{ formData.fullname }}
-    </div>
-    <div>
-      <q-btn
-        icon="mdi-download"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        label="อัพโหลดไฟล์"
+        outlined
+        class="col-xs-12 col-sm-3 col-md-2"
+        bg-color="white"
+        multiple
+        accept="application/pdf"
       >
+        <template v-slot:prepend>
+          <q-icon name="attach_file" color="primary" />
+        </template>
+      </q-file>
       <q-btn
-        icon="mdi-upload"
-        unelevated
-        round
-        dense
+        v-if="filesUpload"
         flat
-        color="blue-10"
-        class="q-mr-sm"
-        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+        round
+        color="primary"
+        icon="mdi-arrow-up-bold"
+        @click="upLoadFile"
+        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
       >
     </div>
   </div>
@@ -416,14 +464,29 @@ function clickReject() {
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ" @click="clickReject"
+      <q-btn
+        unelevated
+        color="orange-5"
+        label="ไม่อนุมัติ"
+        @click="openModal('UnApprove')"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
-      <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
+      <q-btn
+        unelevated
+        color="primary"
+        label="อนุมัติ"
+        @click="openModal('approve')"
         ><q-tooltip>อนุมัติ</q-tooltip>
       </q-btn>
     </div>
   </q-card>
+  <DialogReason
+    :modal="modalApprove"
+    :title="dialogTitle"
+    :click-close="closeDialog"
+    label="เหตุผล"
+    :savaForm="clickSave"
+  />
 </template>
 
 <style lang="scss" scoped>

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

@@ -219,13 +219,14 @@ watch(
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะเข้างาน</p>
-            <div class="row justify-between q-my-sm items-start">
+            <div class="justify-between q-my-sm items-start">
               <q-select
                 ref="checkInStatusRef"
                 for="checkInStatus"
                 emit-value
                 map-options
                 outlined
+                full-width
                 dense
                 v-model="SpecialTimeStore.checkInStatus"
                 :options="SpecialTimeStore.optionStatus"
@@ -242,7 +243,10 @@ watch(
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะออกงาน</p>
-            <div class="row justify-between q-my-sm items-start">
+            <div
+              class="justify-between q-my-sm items-start"
+              style="width: 100%"
+            >
               <q-select
                 ref="checkOutStatusRef"
                 for="checkOutStatus"
@@ -250,6 +254,7 @@ watch(
                 map-options
                 outlined
                 dense
+                full-width
                 v-model="SpecialTimeStore.checkOutStatus"
                 :options="SpecialTimeStore.optionStatus"
                 option-value="id"

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

@@ -80,7 +80,7 @@ onMounted(() => {
   </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">
+      <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
         <div class="text-dark col-12 text-weight-bold text-subtitle1">
           ค้นหารายชื่อ
         </div>
@@ -89,7 +89,7 @@ onMounted(() => {
             v-model="formData.cardId"
             outlined
             label="เลขบัตรประชาชน"
-            class="col-6 col-md-4 inputgreen"
+            class="col-6 col-md-4 bg-white inputgreen"
             dense
             hide-bottom-space
             maxlength="13"
@@ -98,7 +98,7 @@ onMounted(() => {
             v-model="formData.firstName"
             outlined
             label="ชื่อ"
-            class="col-5 col-md-3 inputgreen"
+            class="col-5 col-md-3 bg-white inputgreen"
             dense
             hide-bottom-space
           />
@@ -106,7 +106,7 @@ onMounted(() => {
             v-model="formData.lastName"
             outlined
             label="นามสกุล"
-            class="col-6 col-md-3 inputgreen"
+            class="col-6 col-md-3 bg-white inputgreen"
             dense
             hide-bottom-space
           />