Refactoring code module 14_KPI

src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue

@@ -1,19 +1,33 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataOptionTechnique,
   ProjectYearOp,
 } from "@/modules/14_KPI/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const props = defineProps({
   getAll: Function,
 });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
@@ -79,6 +93,7 @@ const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   { value: "team_working", label: "การทำงานเป็นทีม (Team working)" },
   { value: "other1", label: "อื่น ๆ (ระบุ)" },
 ]);
+
 const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
   { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
@@ -119,16 +134,6 @@ const choiceOp = ref<DataOptionTechnique[]>([
   { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
   { value: "MANUAL", label: "กรอกเอง" },
 ]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
@@ -182,6 +187,7 @@ function close() {
   props.getAll?.();
 }
 
+/** บันทึกการพัฒนา */
 function onSubmit() {
   if (
     isDevelopment70.value == false &&
@@ -228,6 +234,80 @@ function onSubmit() {
     });
   }
 }
+
+const customPosition = () => ({ top: "385px", left: "410px" });
+
+/** ดึงข้อมูลจากปี */
+async function getDataByYear() {
+  if (formData.year) {
+    showLoader();
+    http
+      .get(config.API.developmentMain + `/done?year=${formData.year}`)
+      .then(async (res) => {
+        const data = await res.data.result.data;
+        projectOpMain.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * ดึงข้อมูลจากหัวข้อโครงการ
+ * @param val ข้อมูลจากปี
+ */
+function getProjectDetail(val: any) {
+  showLoader();
+  http
+    .get(config.API.developmentMain + `/tab3_1/${val.id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.name = val.projectName;
+      formData.group = data.group;
+      formData.isDevelopment70 = data.isDevelopment70;
+      formData.isDevelopment20 = data.isDevelopment20;
+      formData.isDevelopment10 = data.isDevelopment10;
+
+      development.value = data.developmentProjectTechniqueActuals;
+      reasonDevelopment70.value =
+        data.developmentProjectTechniqueActuals.includes("other1")
+          ? data.reasonDevelopment70
+          : "";
+      reasonDevelopment20.value =
+        data.developmentProjectTechniqueActuals.includes("other2")
+          ? data.reasonDevelopment20
+          : "";
+      reasonDevelopment10.value =
+        data.developmentProjectTechniqueActuals.includes("other3")
+          ? data.reasonDevelopment10
+          : "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  projectName.value = "";
+  update(() => {
+    projectOp.value = projectOpMain.value.filter(
+      (e: any) => e.projectName.search(val) !== -1
+    );
+  });
+}
+
 watch(
   () => id.value,
   (i) => {
@@ -280,73 +360,6 @@ watch(
     }
   }
 );
-
-const customPosition = () => ({ top: "385px", left: "410px" });
-async function getDataByYear() {
-  if (formData.year) {
-    showLoader();
-    http
-      .get(config.API.developmentMain + `/done?year=${formData.year}`)
-      .then(async (res) => {
-        const data = await res.data.result.data;
-        projectOpMain.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-}
-
-function getProjectDetail(val: any) {
-  showLoader();
-  http
-    .get(config.API.developmentMain + `/tab3_1/${val.id}`)
-    .then((res) => {
-      const data = res.data.result;
-      formData.name = val.projectName;
-      formData.group = data.group;
-      formData.isDevelopment70 = data.isDevelopment70;
-      formData.isDevelopment20 = data.isDevelopment20;
-      formData.isDevelopment10 = data.isDevelopment10;
-
-      development.value = data.developmentProjectTechniqueActuals;
-      reasonDevelopment70.value =
-        data.developmentProjectTechniqueActuals.includes("other1")
-          ? data.reasonDevelopment70
-          : "";
-      reasonDevelopment20.value =
-        data.developmentProjectTechniqueActuals.includes("other2")
-          ? data.reasonDevelopment20
-          : "";
-      reasonDevelopment10.value =
-        data.developmentProjectTechniqueActuals.includes("other3")
-          ? data.reasonDevelopment10
-          : "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function ค้นหาข้อมูลใน option
- * @param val คำค้นหา
- * @param update function
- */
-function filterOptionFn(val: string, update: Function) {
-  projectName.value = "";
-  update(() => {
-    projectOp.value = projectOpMain.value.filter(
-      (e: any) => e.projectName.search(val) !== -1
-    );
-  });
-}
 </script>
 <template>
   <q-dialog persistent v-model="modal">
@@ -539,19 +552,6 @@ function filterOptionFn(val: string, update: Function) {
                   </div>
                 </div>
               </div>
-
-              <!-- <q-checkbox
-                v-model="formData.isDevelopment70"
-                label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment20"
-                label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment10"
-                label="10 การฝึกอบรมอื่นๆ"
-              /> -->
             </div>
             <div class="col-12">
               <q-input