Refactoring code module 15_development

src/modules/15_development/views/EmployeeHistory.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useRoute, useRouter } from "vue-router";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 import type {
   NewPagination,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
 
-/** importStore*/
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
 /** use*/
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const store = useDevelopmentDataStore();
-const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
-const maxPage = ref<number>(1);
+
+const maxPage = ref<number>(1); // จำนวนหน้า
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const formFilter = reactive({
   root: null,
@@ -317,10 +318,6 @@ onMounted(() => {
             />
           </template>
         </q-select>
-
-        <!-- <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-          <q-tooltip>เพิ่ม</q-tooltip>
-        </q-btn> -->
       </q-toolbar>
       <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
         <q-space />

src/modules/15_development/views/History.vue

@@ -2,9 +2,13 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -17,17 +21,10 @@ import type {
 } from "@/modules/15_development/interface/index/Main";
 import type { ResHistory } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importStore
- */
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
-
 /** use*/
+const $q = useQuasar();
 const router = useRouter();
 const store = useDevelopmentDataStore();
-const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const formFilter = reactive({
@@ -42,9 +39,8 @@ const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
 /**
  * ข้อมูล Table
  */
-
 const rows = ref<DataHistory[]>([]);
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {

src/modules/15_development/views/MainPage.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import genReportXLSX from "@/plugins/genreportxlsx";
-
 import { useRoute, useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useStructureTree } from "@/stores/structureTree";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type {
   DataOption,
   NewPagination,
+  OrgTree,
 } from "@/modules/15_development/interface/index/Main";
 import type {
   FormQueryListProject,
@@ -23,14 +26,7 @@ import type {
   DataTree,
 } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
@@ -46,16 +42,16 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
-const node = ref<any>([]);
+const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
 const expanded = ref<string[]>([]);
 const expandedDialog = ref<string[]>([]);
 
-const filter = ref<string>("");
-const filterMain = ref<string>("");
-const splitterModel = ref<number>(60);
-const modal = ref<boolean>(false);
+const filter = ref<string>(""); //ค้นหา เพิ่มโครงการ/หลักสูตรการฝึกอบรม
+const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
+const splitterModel = ref<number>(60); //แบ่ง ส่วน
+const modal = ref<boolean>(false); // ตัวแปร dialog
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-const totalPage = ref<number>(1);
+const totalPage = ref<number>(1); // จำนวนข้อมูลที่มี
 
 const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
@@ -269,14 +265,6 @@ function onRedirectToRecordPage(id: string) {
   router.push(`/development/record/${id}`);
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchListProject();
-  }
-);
-
 /**
  * function redirect หน้าบันทึกผล
  * @param id โครงการ
@@ -285,6 +273,14 @@ function onDetail(id: string) {
   router.push(`/development-detail/${id}`);
 }
 
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchListProject();
+  }
+);
+
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(() => {
   fetchActive();

src/modules/15_development/views/RecordPage.vue

@@ -2,21 +2,16 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import env from "@/api/index";
-
-/**
- * importComponents
- */
-import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
-import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import Record from "@/modules/15_development/components/Record.vue";
+import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
 
 /**
  * use
@@ -31,13 +26,13 @@ const { showLoader, hideLoader, messageError, dialogConfirm, success } =
 /**
  * ตัวแปร
  */
-const projectId = ref<string>(route.params.id.toLocaleString());
-const tab = ref<string>("IN");
-const title = ref<string>("");
-const isLoadPage = ref<boolean>(false);
-const files = ref<any>(null);
-const listPerson = ref<ResRecord[]>([]);
-const modalAddPerson = ref<boolean>(false);
+const projectId = ref<string>(route.params.id.toLocaleString()); //id route
+const tab = ref<string>("IN"); //tab
+const title = ref<string>(""); // หัวข้อ
+const isLoadPage = ref<boolean>(false); // เช็คโหลดหน้า
+const files = ref<any>(null); // ไฟล์
+const listPerson = ref<ResRecord[]>([]); // ตัวแปร เก็บบุคคล
+const modalAddPerson = ref<boolean>(false); // ตัวแปร dialog เพิ่มบุคคล
 
 /**
  * function fetch ข้อมูลเบื้องต้น

src/modules/15_development/views/Scholarship.vue

@@ -2,9 +2,11 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
 import type {
@@ -14,7 +16,6 @@ import type {
 } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();