Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/components/Detail/Tab1.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
+import { onBeforeMount, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -25,17 +28,17 @@ import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/
 import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";
 
 /** importStor*/
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const $q = useQuasar();
 const route = useRoute();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const $q = useQuasar();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
+/**
+ * props
+ */
 const props = defineProps({
   data: {
     type: Object,
@@ -44,34 +47,19 @@ const props = defineProps({
 });
 
 const id = ref<string>(route.params.id as string); // id รายการประเมิน
-const isLoadView = ref<boolean>(false);
-
-const modalHistory = ref<boolean>(false);
+const isLoadView = ref<boolean>(false); //แสดง view
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการประเมิน
+// ข้อมูลผู้เซ็นเอกสาร
 const formCommand = reactive<FormCommand>({
-  elementaryFullName: "",
-  elementaryPosition: "",
-  abovelevelFullname: "",
-  abovelevelPosition: "",
+  elementaryFullName: "", //ชื่อผู้บังคับบัญชาชั้นต้น
+  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
+  abovelevelFullname: "", //ชื่อผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 
-const elementaryFullNameRef = ref<object | null>(null);
-const elementaryPositonRef = ref<object | null>(null);
-const abovelevelFullnameRef = ref<object | null>(null);
-const abovelevelPositionRef = ref<object | null>(null);
-
-function updateformCommand(val: any, ref: any) {
-  formCommand.elementaryFullName = val.elementaryFullName;
-  formCommand.elementaryPosition = val.elementaryPosition;
-  formCommand.abovelevelFullname = val.abovelevelFullname;
-  formCommand.abovelevelPosition = val.abovelevelPosition;
-
-  elementaryFullNameRef.value = ref.elementaryFullNameRef;
-  elementaryPositonRef.value = ref.elementaryPositonRef;
-  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
-  abovelevelPositionRef.value = ref.abovelevelPositionRef;
-}
-
-/** function เช็คขั้นตอน*/
+/**
+ * ฟังก์ชันเช็คขั้นตอนการประเมิน
+ */
 async function fetchCheckStep() {
   isLoadView.value = false;
   showLoader();
@@ -114,12 +102,28 @@ async function fetchCheckStep() {
     });
 }
 
-/** function เปิด,ปิด ประวัติการประเมิน*/
+/**
+ * ฟังก์ชันเปิด,ปิด popup ประวัติการประเมิน
+ */
 function onClickPopupHistory() {
   modalHistory.value = !modalHistory.value;
 }
 
-onMounted(async () => {
+/**
+ * ฟังก์ชันอัปเดทข้อมูลผู้เซ็นเอกสาร
+ * @param val ข้อมูลผู้เซ็นเอกสาร
+ */
+function updateformCommand(val: FormCommand) {
+  formCommand.elementaryFullName = val.elementaryFullName;
+  formCommand.elementaryPosition = val.elementaryPosition;
+  formCommand.abovelevelFullname = val.abovelevelFullname;
+  formCommand.abovelevelPosition = val.abovelevelPosition;
+}
+
+/**
+ * ทำงานเมือ Components ถูกเรียกใช้งาน
+ */
+onBeforeMount(async () => {
   await fetchCheckStep();
 });
 </script>
@@ -196,14 +200,11 @@ onMounted(async () => {
           class="col-xs-12 col-sm-7 row"
           v-if="store.step === 1 || store.step === 3 || store.step === 7"
         >
-          <!-- <q-card flat bordered class="col-12"> -->
           <div class="col-12">
             <ViewStep1 v-if="store.step === 1" :data="data" />
             <ViewStep3 v-if="store.step === 3" />
             <ViewStep7 v-if="store.step === 7" />
           </div>
-          <!-- <q-card-section> </q-card-section -->
-          <!-- ></q-card> -->
         </div>
       </div>
     </div>