Refactoring code module 07_appealComplain

src/modules/07_appealComplain/views/Add.vue

@@ -2,9 +2,10 @@
 import { ref, onMounted, reactive } 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 Form from "@/modules/07_appealComplain/views/Form.vue";
 

src/modules/07_appealComplain/views/Edit.vue

@@ -2,25 +2,27 @@
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import genReport from "@/plugins/genreport";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import genReport from "@/plugins/genreport";
+
 import type {
   EditDataList,
   HistoryStatusType,
   FileObType,
 } from "@/modules/07_appealComplain/interface/response/mainType";
+
 import Form from "@/modules/07_appealComplain/views/Form.vue";
 
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-
-const id = ref<string>(route.params.id as string);
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
+const id = ref<string>(route.params.id as string);
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
   createdAt: "",
@@ -48,6 +50,8 @@ const data = reactive<EditDataList>({
   historyStatus: [historyStatusOb],
   disciplineComplaint_Appeal_Docs: [fileOb],
 });
+
+/** ดึงข้อมูล */
 function getData() {
   showLoader();
   http

src/modules/07_appealComplain/views/Form.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from "vue";
-import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
+
 import type { MyObjectAppealRef } from "@/modules/07_appealComplain/interface/request/appeal";
 import type {
   HistoryStatusType,
@@ -10,14 +12,12 @@ import type {
 } from "@/modules/07_appealComplain/interface/response/mainType";
 
 const $q = useQuasar();
-
-const isReadOnly = ref<boolean>(false);
-const printForm = ref<string>("");
 const mixin = useCounterMixin();
-const { dialogConfirm, modalWarning, showLoader, hideLoader, messageError } =
-  mixin;
+const { dialogConfirm } = mixin;
 const dataStore = useAppealComplainStore();
 
+const printForm = ref<string>("");
+const isReadOnly = ref<boolean>(false);
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
   createdAt: "",
@@ -103,6 +103,48 @@ function validateForm() {
   }
 }
 
+/**
+ * ฟังชั่น class input
+ * @param val
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * ดาวห์โหลด เอกสารเพิ่มเติม
+ * @param path ลิงค์เอกสาร
+ */
+function downLoadFile(path: string) {
+  window.open(path, "_blank");
+}
+
+/**
+ * download แบบฟอร์ม file
+ * @param fileName ชื่อไฟล์
+ */
+function filePrintDownload(fileName: string) {
+  props.getReport(fileName);
+}
+
+/**
+ * บันทึก form อุทธรณ์/ร้องทุกข์
+ * @param data ข้อมูล
+ */
+function onSubmit(data: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      props.onSubmit(data);
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
 watch(props.formProfile, () => {
   if (props.formProfile !== null) {
     formData.fullname = props.formProfile.fullname;
@@ -115,7 +157,6 @@ watch(props.formProfile, () => {
 
 watch(props.data, () => {
   isReadOnly.value = true;
-
   formData.id = props.data.id;
   formData.title = props.data.title;
   formData.description = props.data.description;
@@ -132,32 +173,6 @@ watch(props.data, () => {
     props.data.disciplineComplaint_Appeal_Docs;
   formData.historyStatus = props.data.historyStatus;
 });
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-function downLoadFile(path: string) {
-  window.open(path, "_blank");
-}
-
-function filePrintDownload(fileName: string) {
-  props.getReport(fileName);
-}
-
-function onSubmit(data: any) {
-  dialogConfirm(
-    $q,
-    async () => {
-      props.onSubmit(data);
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
 </script>
 <template>
   <div class="row">
@@ -220,7 +235,7 @@ function onSubmit(data: any) {
                     option-label="name"
                     option-value="id"
                     :options="dataStore.typeOptions"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภท'}`]"
                     lazy-rules
                     hide-bottom-space
                   />
@@ -231,7 +246,7 @@ function onSubmit(data: any) {
                     :readonly="isReadOnly"
                     ref="titleRef"
                     :rules="[
-                      (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
+                      (val:string) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
                     ]"
                     v-model="formData.title"
                     dense
@@ -248,7 +263,7 @@ function onSubmit(data: any) {
                     :readonly="isReadOnly"
                     ref="descriptionRef"
                     :rules="[
-                      (val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
+                      (val:string) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
                     ]"
                     v-model="formData.description"
                     dense
@@ -260,109 +275,7 @@ function onSubmit(data: any) {
                   />
                 </div>
               </div>
-
-              <!-- <div class="row q-col-gutter-x-sm">
-                <div class="col-6">
-                  <q-input
-                    :class="inputEdit(isReadOnly)"
-                    :readonly="isReadOnly"
-                    ref="ocRef"
-                    v-model="formData.oc"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
-                    lazy-rules
-                    label="สังกัด"
-                    hide-bottom-space
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    :class="inputEdit(isReadOnly)"
-                    :readonly="isReadOnly"
-                    ref="ocRef"
-                    v-model="formData.position"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
-                    lazy-rules
-                    label="สังกัด"
-                    hide-bottom-space
-                  />
-                </div>
-              </div> -->
-
-              <!-- <div class="row q-gutter-x-sm">
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.year"
-                    class="col-2"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                    :readonly="isReadOnly"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        :class="inputEdit(isReadOnly)"
-                        :readonly="isReadOnly"
-                        dense
-                        lazy-rules
-                        outlined
-                        :model-value="Number(formData.year) + 543"
-                        :label="`${'ปีงบประมาณ'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <div class="col-3">
-                  <q-input
-                    :class="inputEdit(isReadOnly)"
-                    :readonly="isReadOnly"
-                    ref="caseTypeRef"
-                    v-model="formData.caseType"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
-                    lazy-rules
-                    label="ประเภทคดี"
-                    hide-bottom-space
-                  />
-                </div>
-                <div class="col-3">
-                  <q-input
-                    :class="inputEdit(isReadOnly)"
-                    :readonly="isReadOnly"
-                    ref="caseNumberRef"
-                    v-model="formData.caseNumber"
-                    dense
-                    outlined
-                    :rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
-                    lazy-rules
-                    label="เลขที่คดี"
-                    hide-bottom-space
-                  />
-                </div>
-              </div> -->
               <div class="row" v-if="!isReadOnly">
-                <!-- multiple
-                    use-chips -->
                 <div class="col-12">
                   <q-file
                     ref="fileRef"

src/modules/07_appealComplain/views/Main.vue

@@ -4,12 +4,11 @@ import type { QTableProps } from "quasar";
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/02_transfer/store";
-import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
@@ -20,18 +19,18 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 
-const filterKeyword = ref<string>("");
-const dataStore = useAppealComplainStore();
-const transferData = useTransferDataStore();
-const { statusText } = transferData;
-const router = useRouter();
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const dataStore = useAppealComplainStore();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const filterKeyword = ref<string>("");
 const type = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   ...dataStore.typeOptions,
 ]);
+
 /**
  * ตั้งค่า pagination
  */
@@ -45,7 +44,6 @@ const pagination = ref({
 /**
  * เพิ่มหัวข้อตาราง
  */
-const filter = ref<string>("");
 
 const formData = reactive<FormType>({
   type: "ALL",
@@ -65,6 +63,7 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -161,7 +160,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 //นำข้อมูลมาแสดง
-const getData = async () => {
+async function getData() {
   showLoader();
   await http
     .get(
@@ -186,14 +185,14 @@ const getData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * กดเพื่อย้อนกลับ
  */
-const clickBack = () => {
+function clickBack() {
   router.push(`/`);
-};
+}
 
 /** ดึงข้อมูลเมื่อมีการปรับฟิลเตอร์ */
 function dataUpdate() {
@@ -205,6 +204,18 @@ function filterFn() {
   getData();
 }
 
+/**
+ * เปิดหน้าแก้ไข
+ * @param id id ของ บุคคล
+ */
+function editPage(id: string) {
+  router.push(`/appeal-complain/${id}`);
+}
+
+function redirectToPageadd() {
+  router.push(`/appeal-complain/add`);
+}
+
 watch(
   () => currentPage.value,
   () => {
@@ -222,19 +233,6 @@ watch(
   }
 );
 
-/**
- * เปิดหน้าแก้ไข
- * @param id id ของ บุคคล
- */
-function editPage(id: string) {
-  router.push(`/appeal-complain/${id}`);
-}
-
-function redirectToPageadd() {
-  // dataStore.rowsAdd = []
-  router.push(`/appeal-complain/add`);
-}
-
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */