Refactoring code module 11_discipline

2024-09-19 16:37:16 +07:00 · 2024-09-19 16:37:16 +07:00 · 9653ae78cb
commit 9653ae78cb
parent 202fbf27b6
58 changed files with 1021 additions and 1305 deletions
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
-import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
 import { useRouter } from "vue-router";
+
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
+
 const router = useRouter();

 /** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useQuasar } from "quasar";
 import { ref, watch, type PropType } from "vue";

-import { useQuasar } from "quasar";
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import type { CalendarOptions } from "@fullcalendar/core";
@ -34,7 +34,7 @@ const props = defineProps({
    default: false,
  },
  close: {
-    type: Boolean,
+    type: Function,
    default: true,
  },
 });
@ -162,7 +162,7 @@ watch(
          unelevated
          round
          dense
-          @click="props.close"
+          @click="props.close?.()"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue
@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 import type { CalendarOptions } from "@fullcalendar/core";
+
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
-import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;

 const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;

 /**
 * Option ของปฏิทิน
@ -128,6 +129,44 @@ const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);

+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const dateYear = ref<number>(new Date().getFullYear());
+async function updateMonth(e: DataDateMonthObject) {
+  if (e != null) {
+    dateYear.value = e.year;
+
+    changCalendar();
+  }
+}
+
+/**
+ * ฟังก์ชั่นยกเลิก model
+ * @param text
+ */
+async function cancel(text: string) {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = true;
+}
+/**
+ * ฟังก์ชั่นเปิด model
+ * @param text
+ */
+async function view(text: string) {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = false;
+}
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
 async function fetchCalendar() {
  showLoader();
  await http
@ -151,74 +190,16 @@ async function fetchCalendar() {
    });
 }

+function changCalendar() {
+  fetchCalendar();
+}
+
 /**
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
 onMounted(async () => {
  fetchCalendar();
 });
-
-function changCalendar() {
-  fetchCalendar();
-}
-
-/**
- * ฟังก์ชั่นยกเลิก model
- * @param text
- */
-const cancel = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-};
-/**
- * ฟังก์ชั่นเปิด model
- * @param text
- */
-const view = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = false;
-};
-
-// filter calendar left
-const filterLists = ref<any[]>([
-  {
-    id: "x1",
-    name: "นางสาววารุณี แต้มคู",
-    color: "green",
-  },
-  {
-    id: "x2",
-    name: "นางสาวสมศรี ใจดี",
-    color: "grey",
-  },
-  {
-    id: "x3",
-    name: "นายสมชาย สุขใจ",
-    color: "grey",
-  },
-]);
-const filterVal = ref(["x1"]);
-
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-
-const dateYear = ref<number>(new Date().getFullYear());
-const updateMonth = async (e: DataDateMonthObject) => {
-  if (e != null) {
-    dateYear.value = e.year;
-
-    changCalendar();
-  }
-};
-
-const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 </script>
 <template>
  <div class="q-ma-sm">
@ -418,13 +399,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
  display: flex;
  justify-content: center;
  align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  font-weight: bold;
-  color: white !important;
-  background: #17a259; */
 }

 .fc-day-today .fc-daygrid-day-frame {
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@ -5,11 +5,9 @@ import { useRouter, useRoute } from "vue-router";

 import http from "@/plugins/http";
 import config from "@/app.config";
-
-/**import component*/
-import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
-import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
-import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

 import type {
  PersonsArray,
@ -23,20 +21,19 @@ import type {
 import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";

 import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
+import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
+import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
+import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย

-/**import store*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
-import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
-
-const mainStore = useDisciplineMainStore();
-const isSaveInfo = ref<boolean>(false);
 const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
 const mixin = useCounterMixin();
 const store = useInvestigateDisStore();
 const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
-const router = useRouter();
-const route = useRoute();
+const mainStore = useDisciplineMainStore();
+
+const isSaveInfo = ref<boolean>(false);
 const checkRoutePermisson = ref<boolean>(
  route.name == "disciplineDisciplinaryDetail"
 );
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch, computed } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
-import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
-/**import type*/
 import moment from "moment";

+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
+
 import type {
  FormData,
-  DisciplinaryRef,
  Director,
  PersonsArray,
 } from "@/modules/11_discipline/interface/request/disciplinary";
@ -21,29 +22,19 @@ import type {
  responseType,
  directorType,
 } from "@/modules/11_discipline/interface/index/Main";
-import type { DataOptionRes } from "@/modules/11_discipline/interface/response/Main";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";

-/** import components*/
+import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
+import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
+import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 import Table from "@/modules/11_discipline/components/DirectorTable.vue";
 import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";

-/** import store*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
-import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
-import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
-import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
-
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
-const isSaveInfo = defineModel<boolean>("isSaveInfo");
-const calendarModal = ref<boolean>(false);
-const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
-const modalPopup = ref<boolean>(false);
+const $q = useQuasar();
+const route = useRoute();
 const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
 const mainStore = useDisciplineMainStore();
@ -58,9 +49,13 @@ const {
  success,
 } = mixin;

-const route = useRoute();
-const router = useRouter();
-const $q = useQuasar();
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+const isSaveInfo = defineModel<boolean>("isSaveInfo");
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
+const modalPopup = ref<boolean>(false);
+
 const checkRoutePermisson = ref<boolean>(
  route.name == "disciplineDisciplinaryDetail"
 );
@ -77,7 +72,6 @@ const dutyVal = ref<string>();
 const commandNoVal = ref<string>();

 const id = ref<string>(route.params.id as string);
-const isUpdate = ref<boolean>(false);
 const type = ref<string>("");
 const modal = ref<boolean>(false);
 const rows = ref<Director[]>([]);
@ -408,18 +402,6 @@ function handleSave(returnData: any) {
  toggleModal();
 }

-/**
- * เช็คข้อมูลจาก props
- * เมื่อมีข้อมูล
- * เก็บข้อมูลลง formData
- */
-watch(
-  () => props.data,
-  async () => {
-    await fetchDatadetail();
-  }
-);
-
 /** function เรียกรายชื่อหน่วยงาน*/
 /** ดึงข้อมูล active */
 async function getActive() {
@ -523,11 +505,6 @@ const organization = ref<OptionData>();
 async function selectComplainant(val: string) {
  formData.organizationId = "";
  formData.consideredAgency = "";
-  // if (val === "0") {
-  //   await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
-  // } else if (val === "1") {
-  //   await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
-  // }
 }

 /** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
@ -670,14 +647,6 @@ watch(
    }
  }
 );
-watch(
-  () => formData.disciplinaryFaultLevel,
-  () => {
-    if (formData.disciplinaryFaultLevel !== "อื่นๆ") {
-      formData.disciplinaryFaultLevelOther = "";
-    }
-  }
-);

 function deletePerson(id: string) {
  changeFormData();
@ -738,6 +707,27 @@ function filterOptionFnCauseText(val: string, update: Function) {
  });
 }

+watch(
+  () => formData.disciplinaryFaultLevel,
+  () => {
+    if (formData.disciplinaryFaultLevel !== "อื่นๆ") {
+      formData.disciplinaryFaultLevelOther = "";
+    }
+  }
+);
+
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
+watch(
+  () => props.data,
+  async () => {
+    await fetchDatadetail();
+  }
+);
+
 /** Hook */
 onMounted(async () => {
  mainStore.rowsAdd = [];
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@ -2,23 +2,21 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-
-import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+
+const router = useRouter();
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
 const { fetchList } = dataInvestigateDis;
+
 const rowsPerPage = ref<number>(10);
-const $q = useQuasar(); // show dialog
-const router = useRouter();
 const filter = ref<string>(""); //search data table
 const page = ref<number>(1);
 const maxPage = ref<number>(1);
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, useAttrs, watch } from "vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";

 const dataInvestigateDis = useInvestigateDisStore();
@ -112,21 +111,6 @@ function updateProp(newPagination: any, page: number) {
  emit("update:pagination", newPagination, page);
 }

-watch(
-  () => currentPage.value,
-  () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
 function dataUpdate() {
  props.filterStatus(statusFilter.value);
 }
@ -148,6 +132,21 @@ function filterOptionFn(val: string, update: Function) {
    );
  });
 }
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
 </script>

 <template>