From 71b92a24b5e17525daee834fd0d6dc6a6d12cd28 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 2 Apr 2024 10:23:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3/=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=95=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9D?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B8=E0=B8=87=E0=B9=80=E0=B8=97=E0=B8=9E=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B2=E0=B8=99=E0=B8=84=E0=B8=A3=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B9=87=E0=B8=99=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=88=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   |  10 +-
 .../15_development/components/MainTab.vue     | 110 +++++++++++-------
 .../15_development/components/Target.vue      |   6 +-
 src/modules/15_development/views/MainPage.vue |  45 ++++++-
 4 files changed, 121 insertions(+), 50 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index ab7f6ee68..90d4dceeb 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@@ -40,7 +40,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
     <div class="row col-12 q-col-gutter-md q-pa-md">
       <div class="col-xs-6 col-sm-2 col-md-2">
         <datepicker
@@ -138,7 +138,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <q-separator />
+    <!-- <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn
         dense
@@ -151,8 +151,8 @@ onMounted(() => {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
-  </q-form>
+    </div> -->
+  <!-- </q-form> -->
 
   <DialogSelectAgency
     v-model:modal="modalDialogSelect"
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index ea947bb0a..caa909f52 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
@@ -8,56 +9,81 @@ import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue
 import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const tab = ref<string>("BasicInfo");
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      flat
-      round
-      dense
-      class="q-mr-sm"
-      icon="mdi-arrow-left"
-      color="primary"
-      @click="router.go(-1)"
-    />
-    {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
-  </div>
-
-  <q-card flat bordered class="col-12">
-    <q-tabs
-      v-model="tab"
-      dense
-      align="left"
-      inline-label
-      class="rounded-borders"
-      indicator-color="primary"
-      active-bg-color="teal-1"
-      active-class="text-primary"
-    >
-      <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
-      <q-tab name="Target" label="เป้าหมาย" />
-      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
-      <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
-      <q-tab name="Other" label="อื่นๆ" />
-    </q-tabs>
-    <q-separator />
-    <div class="q-pa-sm" style="padding: 0px">
-      <q-tab-panels v-model="tab" animated>
-        <q-tab-panel style="padding: 0px" name="BasicInfo">
-          <BasicInfo />
-        </q-tab-panel>
-        <q-tab-panel name="Target"> <Target /></q-tab-panel>
-        <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
-        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
-        <q-tab-panel name="Other"> <Other /> </q-tab-panel>
-      </q-tab-panels>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        flat
+        round
+        dense
+        class="q-mr-sm"
+        icon="mdi-arrow-left"
+        color="primary"
+        @click="router.go(-1)"
+      />
+      {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
+      <q-space />
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn> -->
     </div>
-  </q-card>
+
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="tab"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
+        <q-tab name="Target" label="เป้าหมาย" />
+        <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+        <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
+        <q-tab name="Other" label="อื่นๆ" />
+      </q-tabs>
+      <q-separator />
+      <div class="q-pa-sm" style="padding: 0px">
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel style="padding: 0px" name="BasicInfo">
+            <BasicInfo />
+          </q-tab-panel>
+          <q-tab-panel name="Target"> <Target /></q-tab-panel>
+          <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
+          <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
+          <q-tab-panel name="Other"> <Other /> </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-card>
+  </q-form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index eb8b87105..7b383b950 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -489,7 +489,8 @@ onMounted(() => {
                 hide-bottom-space
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
-                mask="#####"
+                mask="#"
+                reverse-fill-mask
                 :rules="[
               (val:string) =>
                 !!val || `${'กรุณากรอกจำนวน(คน)'}`,
@@ -545,7 +546,8 @@ onMounted(() => {
                 hide-bottom-space
                 v-model="formGroupRelate.amount"
                 label="จำนวน(คน)"
-                mask="#####"
+                mask="#"
+                reverse-fill-mask
                 :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกจำนวน(คน)'}`,
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index ca45a44e8..18efe50cb 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -47,6 +47,27 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["year", "name", "org"]);
 
+const itemDownload = ref<any>([
+  {
+    label: "ดาวน์โหลด 1",
+    value: "",
+    icon: "mdi-file-pdf-box",
+    color: "green",
+  },
+  {
+    label: "ดาวน์โหลด 2",
+    value: "",
+    icon: "mdi-file-table",
+    color: "red",
+  },
+  {
+    label: "ดาวน์โหลด 3",
+    value: "",
+    icon: "mdi-file-word",
+    color: "blue",
+  },
+]);
+
 function fetchListProject() {
   showLoader();
   const data = [
@@ -115,11 +136,33 @@ onMounted(() => {
           </q-input>
         </template>
       </datepicker>
-      <q-btn flat round dense icon="add" color="primary" @click="onClickAddOrView()">
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onClickAddOrView()"
+      >
         <q-tooltip>เพิ่ม</q-tooltip>
       </q-btn>
       <q-space />
       <div class="row q-gutter-sm">
+        <q-btn flat round color="primary" icon="mdi-download-outline">
+          <q-menu>
+            <q-list style="min-width: 100px" dense>
+              <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section :class="`text-${items.color}`">{{
+                  items.label
+                }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
         <q-input
           standout
           dense