Refactoring code module 02_transfer

src/modules/02_transfer/interface/Main.ts

@@ -0,0 +1,53 @@
+interface TransferMain {
+  id: string;
+  date: string;
+  status: string;
+  statustext: string;
+  position: string;
+  noPos: string;
+  rootShortNameOld: string;
+  level: string;
+  salary: number;
+  transfer: string;
+}
+
+interface TransferList {
+  id: string;
+  profileId: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  rootOld: string;
+  rootOldId: string;
+  rootShortNameOld: string;
+  child1Old: string | null;
+  child1OldId: string | null;
+  child1ShortNameOld: string | null;
+  child2Old: string | null;
+  child2OldId: string | null;
+  child2ShortNameOld: string | null;
+  child3Old: string | null;
+  child3OldId: string | null;
+  child3ShortNameOld: string | null;
+  child4Old: string | null;
+  child4OldId: string | null;
+  child4ShortNameOld: string | null;
+  posMasterNoOld: number;
+  posTypeOldId: string;
+  posTypeNameOld: string;
+  posLevelOldId: string;
+  posLevelNameOld: string;
+  createdAt: Date | null;
+  organization: string;
+  reason: string;
+  status: string;
+  date: string | null;
+  salary: number | null;
+  positionTypeOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  organizationPositionOld: string;
+  isActive: boolean;
+}
+
+export type { TransferList, TransferMain };

src/modules/02_transfer/views/AddTransfer.vue

@@ -2,47 +2,27 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { QForm } from "quasar";
 
-const router = useRouter();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const myform = ref<QForm | null>(null);
-const {
-  fails,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogMessageNotify,
-} = mixin;
-
-/**
- * ตัวแปรที่ใช้งาน
- */
 const route = useRoute();
-const files = ref<any>();
-const tranferOrg = ref("");
-const noteReason = ref("");
-const id = ref<string>("");
-const nameFile = ref<string>("");
-const routeName = router.currentRoute.value.name;
+const router = useRouter();
+const mixin = useCounterMixin();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
-  if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
-    fecthDataTransfer(id.value);
-  }
-});
+const id = ref<string>(""); //id path
+const files = ref<any>(); //ไฟล์
+const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
+const noteReason = ref<string>(""); //เหตุผล
+const routeName = router.currentRoute.value.name; //ชื่อ path
 
-const saveData = async () => {
+/** Dialog Save */
+async function saveData() {
   dialogConfirm(
     $q,
     () => {
@@ -51,12 +31,10 @@ const saveData = async () => {
     "ยืนยันการยื่นข้อมูลการโอน",
     "ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
   );
-};
+}
 
-/**
- * ฟังก์ชั่นสร้างขอโอน
- */
-const createTransfer = async () => {
+/** ฟังก์ชั่นสร้างขอโอน */
+async function createTransfer() {
   showLoader();
   const formData = new FormData();
   formData.append("Organization", tranferOrg.value);
@@ -74,13 +52,13 @@ const createTransfer = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fecthDataTransfer = async (id: string) => {
+async function fecthDataTransfer(id: string) {
   showLoader();
   await http
     .get(config.API.transferByid(id))
@@ -96,25 +74,25 @@ const fecthDataTransfer = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
- * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ * Func เปิดไฟล์
+ * @param url URL File
  */
-const fileDocDataUpload = ref<File[]>([]);
-const filesNull = () => {
-  files.value = null;
-};
-//อัปโหลดไฟล์
-const fileUploadDoc = async (file: any) => {
-  fileDocDataUpload.value.push(file);
-  nameFile.value = file[0].name;
-  files.value = file;
-};
-
 function fileOpen(url: string) {
   window.open(url, "_blank");
 }
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(() => {
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fecthDataTransfer(id.value);
+  }
+});
 </script>
 
 <template>

src/modules/02_transfer/views/Main.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/02_transfer/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import Table from "@/components/Table.vue";
-const currentPage = ref<number>(1);
-const transferData = useTransferDataStore();
-const { statusText } = transferData;
-const router = useRouter();
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/02_transfer/store";
+
+import type { QTableProps } from "quasar";
+import type {
+  TransferList,
+  TransferMain,
+} from "@/modules/02_transfer/interface/Main";
+
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
+const transferData = useTransferDataStore();
+
+const { statusText } = transferData;
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 const pagination = ref({
@@ -22,11 +28,9 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-/**
- * เพิ่มหัวข้อตาราง
- */
+
+const rows = ref<TransferMain[]>([]);
 const filter = ref<string>("");
-const rows = ref<any>([]);
 const visibleColumns = ref<String[]>([
   "no",
   "date",
@@ -112,28 +116,22 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fecthListTransfer();
-});
-
 //นำข้อมูลมาแสดง
-const fecthListTransfer = async () => {
+async function fecthListTransfer() {
   showLoader();
   await http
     .get(config.API.listUserTransfer())
-    .then((res: any) => {
+    .then((res) => {
       let data = res.data.result;
-      rows.value = data.map((e: any) => ({
+      rows.value = data.map((e: TransferList) => ({
         id: e.id,
         date: date2Thai(e.createdAt),
         status: e.status,
         statustext: statusText(e.status),
         position: e.organizationPositionOld,
-        noPos: e.posNo,
-        level: e.positionLevel,
+        noPos: e.positionNumberOld,
+        rootShortNameOld: e.rootShortNameOld,
+        level: e.positionLevelOld,
         salary: e.salary,
         transfer: e.organization,
       }));
@@ -144,21 +142,28 @@ const fecthListTransfer = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
  */
-const clickAdd = async () => {
+async function clickAdd() {
   router.push(`/transfer/add`);
-};
+}
 
 /**
  * กดเพื่อย้อนกลับ
  */
-const clickBack = () => {
+function clickBack() {
   router.push(`/`);
-};
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fecthListTransfer();
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -284,8 +289,23 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
-                      {{ col.value }}
+                    <div v-else-if="col.name == 'noPos'">
+                      {{
+                        props.row.rootShortNameOld && props.row.noPos
+                          ? `${props.row.rootShortNameOld}${props.row.noPos}`
+                          : "-"
+                      }}
+                    </div>
+                    <div v-else-if="col.name == 'salary'">
+                      {{
+                        props.row.salary
+                          ? props.row.salary.toLocaleString()
+                          : "-"
+                      }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
                     </div>
                   </q-td>
                 </q-tr>