Refactor Code การทดลองปฏิบัติหน้าที่ราชการ

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -3,13 +3,30 @@ import { useRouter, useRoute } from "vue-router";
 import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
-// import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
 import { useCounterMixin } from "@/stores/mixin";
-import { date, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+
+const router = useRouter();
+const route = useRoute();
+const personalId = ref<string>(route.params.id as string);
+
 const $q = useQuasar(); //ใช้ noti quasar
+const rows = ref<FormProbationDetail[]>([]);
+const name = ref<string>("");
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const filterRef = ref<any>(null);
+const organization = ref<string>("");
+const avatarprofile = ref<string>("");
+const filterKeyword = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const probation_status = ref<any>();
+const probation_statusold = ref<string>("");
+
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -19,18 +36,6 @@ const {
   date2Thai,
   dialogConfirm,
 } = mixin;
-const router = useRouter();
-const route = useRoute();
-const personalId = ref<string>(route.params.id as string);
-
-const name = ref<string>("");
-const position_line = ref<string>("");
-const position_level = ref<string>("");
-const organization = ref<string>("");
-const probation_status = ref<any>();
-const probation_statusold = ref<string>("");
-const avatarprofile = ref<string>("");
-
 const visibleColumns = ref<string[]>([
   "no",
   "date_start",
@@ -85,7 +90,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<FormProbationDetail[]>([]);
 
 const probation_statusOP = ref<any>([
   {
@@ -126,10 +130,7 @@ const probation_statusOP = ref<any>([
   },
 ]);
 
-onMounted(async () => {
-  await getpersonalList();
-  await getAssignList();
-});
+
 const getAssignList = async () => {
   showLoader();
   await http
@@ -157,7 +158,6 @@ const getpersonalList = async () => {
     .get(config.API.personal(personalId.value))
     .then((res) => {
       const data = res.data.data;
-      // console.log(data);
       name.value = data.name;
       position_line.value = data.position_line;
       position_level.value = data.position_level;
@@ -199,30 +199,32 @@ const selectStatus = async () => {
     }
   );
 };
+// เปิดหน้ารายละเอียด
 const clickSelect = (id: string) => {
   router.push(`${route.fullPath}/${id}`);
 };
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
+// รีเซ็ตค่าในช่อง input 
 const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
 
-const attrs = ref<any>(useAttrs());
 const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const paging = ref<boolean>(true);
+
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+onMounted(async () => {
+  await getpersonalList();
+  await getAssignList();
+});
 </script>
 
 <template>
@@ -294,42 +296,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 emit-value
                 map-options
               />
-              <!-- <q-icon
-                size="20px"
-                v-if="probation_status === 'PENDING'"
-                name="mdi-timer-sand"
-                color="deep-orange"
-              />
-              <q-icon
-                size="20px"
-                v-else-if="probation_status === 'NO-PASS'"
-                name="mdi-close"
-                color="red"
-              />
-              <q-icon
-                size="20px"
-                v-else-if="probation_status === 'PROCESS'"
-                name="mdi-timer-sand"
-                color="deep-orange"
-              />
-              <q-icon
-                size="20px"
-                v-else-if="probation_status === 'PASS'"
-                name="mdi-check"
-                color="teal"
-              />
-              <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{
-                probation_status === "PENDING"
-                  ? "รอมอบหมายงาน"
-                  : probation_status === "NO-PASS"
-                  ? "ไม่ผ่านการทดลองงาน"
-                  : probation_status === "PROCESS"
-                  ? "อยู่ในระหว่างการทดลองงาน"
-                  : probation_status === "PASS"
-                  ? "ผ่านการทดลองงาน"
-                  : ""
-              }} -->
             </div>
           </div>
         </div>