Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/components/Director/Form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted, computed } from "vue";
+import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,6 +14,7 @@ import type {
   ResponsePreson,
   tableType,
 } from "@/modules/11_discipline/interface/request/Director";
+import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /**
  * importComponenst
@@ -37,7 +38,7 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 const actionType = defineModel<string>("actionType", { default: "" });
 const props = defineProps({
   data: {
-    type: Object,
+    type: Object as PropType<FormData>,
     default: null,
   },
   onSubmit: {
@@ -47,7 +48,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["formDataReturn"]);
 
-const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false)); //อ่านอย่างเดียว
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const type = ref<string>("citizenId");
@@ -63,13 +64,12 @@ const typeOps = ref<typeOp[]>([
  */
 const formData = reactive<FormData>({
   personalId: "",
-  prefix: "",
-  firstname: "",
-  lastname: "",
-  position: "",
-  phone: "",
-  email: "",
-  qualification: "",
+  prefix: "", //คำนำหน้า
+  firstname: "", //ชื่อ
+  lastname: "", //นามสกุล
+  position: "", //ตำแหน่ง
+  phone: "", //เบอร์โทร
+  email: "", //อีเมล
 });
 
 /**
@@ -207,7 +207,7 @@ function searchInput() {
 /**
  * เลืือกชื่อกรรมการ
  */
-function returnDetail(data: any) {
+function returnDetail(data: ResponsePreson) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
   formData.lastname = data.lastName;
@@ -232,7 +232,7 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
@@ -244,7 +244,7 @@ watch(
   }
 );
 
-function fetchForm(data: any) {
+async function fetchForm(data: FormData) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstname;
   formData.lastname = data.lastname;
@@ -265,7 +265,7 @@ onMounted(() => {
     showLoader();
     setTimeout(async () => {
       await fetchForm(props.data);
-      await hideLoader();
+      hideLoader();
     }, 1000);
   }
 });
@@ -273,9 +273,9 @@ onMounted(() => {
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered>
-      <div class="col-12 row q-pa-md">
+      <q-card-section>
         <div class="row col-12 q-col-gutter-md">
-          <div class="col-12 q-gutter-y-sm" v-if="data === null">
+          <div class="col-12 q-col-gutter-y-sm" v-if="data === null">
             <div class="row q-col-gutter-md items-start">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
@@ -390,7 +390,7 @@ onMounted(() => {
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
@@ -398,6 +398,7 @@ onMounted(() => {
               </d-table>
             </div>
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -413,6 +414,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -428,6 +430,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -443,6 +446,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -458,6 +462,7 @@ onMounted(() => {
               lazy-rules
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -473,6 +478,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
+
           <div :class="actionType !== '' ? 'col-12' : 'col-3'">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -487,10 +493,11 @@ onMounted(() => {
             />
           </div>
         </div>
-      </div>
+      </q-card-section>
+
       <q-separator v-if="!isReadonly" />
-      <div class="row col-12 q-pa-sm" v-if="!isReadonly">
-        <q-space />
+
+      <q-card-actions align="right" v-if="!isReadonly">
         <q-btn
           for="ButtonOnSubmit"
           id="formSubmit"
@@ -499,7 +506,7 @@ onMounted(() => {
           type="onSubmit"
           ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
         >
-      </div>
+      </q-card-actions>
     </q-card>
   </q-form>