ประเมินบุคคล => permission ,รายการชื่อกรรมการ

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"