From 3d3013277b6cfd264ab2d52a0a60a0ff5a1c2039 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 9 Aug 2024 14:05:38 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?=20=3D>=20permission=20,=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Director/DialogDetail.vue      |  19 +-
 .../components/Director/Form.vue              | 175 +++++++-----------
 .../components/Director/MainPage.vue          |  47 +++--
 3 files changed, 109 insertions(+), 132 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue b/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
index 0ef78ff81..a65bbec0e 100644
--- a/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/DialogDetail.vue
@@ -12,12 +12,21 @@ import type { FormData } from "@/modules/11_discipline/interface/request/directo
 import DialogHeader from "@/components/DialogHeader.vue";
 import Form from "@/modules/12_evaluatePersonal/components/Director/Form.vue";
 
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader, dialogConfirm, success } =
   useCounterMixin();
 
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 const directorId = defineModel<string>("directorId", { required: true });
 const actionType = defineModel<string>("actionType", { required: true });
@@ -25,6 +34,7 @@ const props = defineProps({
   fetchDataList: { type: Function, required: true },
 });
 
+//  ชื่อ Dialog
 const title = computed(() =>
   actionType.value === "VIEW" ? "รายละเอียด" : "แก้ไขรายชื่อกรรมการ"
 );
@@ -44,7 +54,7 @@ const dataDettail = reactive<FormData>({
 });
 
 /**
- * ดึงค่าจาก api
+ * function fetch ช้อมูลชื่อกรรมการ
  */
 function fetchData() {
   showLoader();
@@ -66,6 +76,10 @@ function fetchData() {
     });
 }
 
+/**
+ * function ยืนยันการบันทึกการแก้ไขข้อมุล
+ * @param formData ข้อมุลชื่อกรรมการ
+ */
 function onSubmit(formData: FormData) {
   dialogConfirm($q, () => {
     showLoader();
@@ -92,6 +106,9 @@ function onSubmit(formData: FormData) {
   });
 }
 
+/**
+ * ปิด dialog
+ */
 function onCloseDialog() {
   modal.value = false;
 }
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index 1444e76c7..a30c4089e 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -1,39 +1,36 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importTypr
+ */
 import type { QTableProps } from "quasar";
 import type {
   FormData,
-  FormRef,
   typeOp,
   ResponsePreson,
   tableType,
 } from "@/modules/11_discipline/interface/request/director";
-import http from "@/plugins/http";
-import config from "@/app.config";
+
+/**
+ * importComponenst
+ */
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  dialogMessageNotify,
-  dialogConfirm,
-  success,
-  hideLoader,
-} = mixin;
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
 /**
  * รับ props มาจาก page หลัก
  */
@@ -48,16 +45,11 @@ const props = defineProps({
     default: () => "",
   },
 });
-// const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
-const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
 
-/**
- * ข้อมูลเลขประจำตัวประชาชน
- */
-//
-const idCard = ref<string>("");
-const idCardRef = ref<any>(null);
+const isReadonly = computed(() => (actionType.value === "VIEW" ? true : false));
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
 const type = ref<string>("citizenId");
 const search = ref<string>("");
 const typeOps = ref<typeOp[]>([
@@ -80,19 +72,18 @@ const formData = reactive<FormData>({
   qualification: "",
 });
 
-/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+/**
+ * ตารางผู้ถูกร้องเรียน
+ */
+const searchRef = ref<any>(null);
+const rows = ref<tableType[]>([]);
 const visibleColumnsRespondent = ref<string[]>([
   "info",
   "no",
-  // "idcard",
   "name",
-  // "posNo",
   "position",
-  // "positionLevel",
-  // "salary",
   "organization",
 ]);
-
 const columnsRespondent = ref<QTableProps["columns"]>([
   {
     name: "info",
@@ -140,72 +131,33 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
- * เช็คข้อมูลจาก props
- * เมื่อมีข้อมูล
- * เก็บข้อมูลลง formData
+ * บันทึกข้อมูล
  */
-// watch(props.data, async () => {
-//   // console.log("data==>", props.data)
-//   formData.prefix = props.data.prefix;
-//   formData.firstname = props.data.firstname;
-//   formData.lastname = props.data.lastname;
-//   formData.position = props.data.position;
-//   formData.phone = props.data.phone;
-//   formData.email = props.data.email;
-// });
+function onSubmit() {
+  props.onSubmit(formData);
+}
 
 /**
- * ตรวจสอบข้อมูลก่อนส่งไปยัง api
+ * update เมื่อเปลี่ยน option
  */
-const rows = ref<tableType[]>([]);
-const searchRef = ref<any>(null);
-const prefixRef = ref<object | null>(null);
-const firstnameRef = ref<object | null>(null);
-const lastnameRef = ref<object | null>(null);
-const positionRef = ref<object | null>(null);
-const phoneRef = ref<object | null>(null);
-const emailRef = ref<object | null>(null);
-const formRef: FormRef = {
-  prefix: prefixRef,
-  firstname: firstnameRef,
-  lastname: lastnameRef,
-  position: positionRef,
-  phone: phoneRef,
-  email: emailRef,
-};
-
-/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    props.onSubmit(formData);
-  }
-}
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-/** update เมื่อเปลี่ยน option */
 function updateSelect() {
   search.value = "";
 }
 
-async function searchInput() {
+/**
+ * ค้นหารายชื่อ
+ */
+function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
     showLoader();
@@ -213,7 +165,7 @@ async function searchInput() {
       fieldName: type.value,
       keyword: search.value,
     };
-    await http
+    http
       .post(
         config.API.orgSearchPersonal() +
           `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
@@ -225,7 +177,6 @@ async function searchInput() {
           res.data.result.total / pagination.value.rowsPerPage
         );
         total.value = res.data.result.total;
-
         const list = data.map((e: ResponsePreson) => ({
           personId: e.id,
           idcard: e.citizenId,
@@ -244,13 +195,18 @@ async function searchInput() {
 
         rows.value = list;
       })
-      .catch((err) => {})
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 }
 
+/**
+ * เลืือกชื่อกรรมการ
+ */
 function returnDetail(data: any) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
@@ -269,9 +225,13 @@ function onclickViewinfo(id: string) {
   personId.value = id;
 }
 
+/**
+ * เปิด,ปิด  popup ทะเบียนประวัติ
+ */
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
+
 function updatePagination(newPagination: any) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
@@ -279,8 +239,8 @@ function updatePagination(newPagination: any) {
 
 watch(
   () => pagination.value.rowsPerPage,
-  async () => {
-    await searchInput();
+  () => {
+    searchInput();
   }
 );
 
@@ -293,6 +253,13 @@ function fetchForm(data: any) {
   formData.email = data.email;
 }
 
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
 onMounted(() => {
   if (props.data) {
     showLoader();
@@ -304,7 +271,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <form @submit.prevent.stop="onValidate">
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered>
       <div class="col-12 row q-pa-md">
         <div class="row col-12 q-col-gutter-md">
@@ -331,10 +298,10 @@ onMounted(() => {
                   v-model="search"
                   outlined
                   clearable
+                  @clear="search = ''"
                   hide-bottom-space
                   dense
                   label="คำค้น"
-                  :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
                 />
               </div>
 
@@ -408,10 +375,6 @@ onMounted(() => {
                         }}
                       </div>
                       <div v-else-if="col.name == 'info'">
-                        <!-- <router-link
-                          target="_blank"
-                          :to="`/registry/${props.row.personId}`"
-                          > -->
                         <q-btn
                           dense
                           flat
@@ -531,12 +494,12 @@ onMounted(() => {
           id="formSubmit"
           color="secondary"
           label="บันทึก"
-          @click.stop="onValidate"
+          type="onSubmit"
           ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
         >
       </div>
     </q-card>
-  </form>
+  </q-form>
 
   <PopupPersonal
     :modal="modalPersonal"
diff --git a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
index 68150bff9..17a5ba6ea 100644
--- a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
@@ -38,6 +38,9 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+/**
+ * function fetch ข้อมูลรายการชื่อกรรมการ
+ */
 function getList() {
   showLoader();
   http
@@ -55,33 +58,32 @@ function getList() {
 }
 
 /**
- * ลบข้อมูล
+ * ยืนยัน การลบข้อมูลรายการชื่อกรรมการ
  * @param id ไอดีของข้อมูล
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.evaluateDirectorById(id))
+      .then(async () => {
+        getList();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
- * ลบข้อมูล
- * @param id type
+ * function ดูรายละเอียดของข้อมูล
+ * @param id รายการชื่อกรรมการ
+ * @param type  ดูรายละเอียด,แก้ไขข้อมูล
  */
-function deleteData(id: string) {
-  showLoader();
-  http
-    .delete(config.API.evaluateDirectorById(id))
-    .then(async () => {
-      getList();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 function onOpenDetail(id: string, type: string) {
   directorId.value = id;
   actionType.value = type;
@@ -101,10 +103,6 @@ function resetFilter() {
   }
 }
 
-function filterFn() {
-  getList();
-}
-
 onMounted(() => {
   getList();
 });
@@ -137,7 +135,6 @@ onMounted(() => {
         outlined
         debounce="300"
         placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />