แก้ เพิ่มรายชื่อกรรมการ

src/modules/12_evaluatePersonal/components/Director/Form.vue

@@ -2,13 +2,20 @@
 import { ref, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+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";
+import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -40,6 +47,13 @@ const emit = defineEmits(["formDataReturn"]);
 //
 const idCard = ref<string>("");
 const idCardRef = ref<any>(null);
+const type = ref<string>("idcard");
+const search = ref<string>("");
+const typeOps = ref<typeOp[]>([
+  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "firstname", name: "ชื่อ" },
+  { id: "lastname", name: "นามสกุล" },
+]);
 
 /**
  * ข้อมูลทั้งก้อน form
@@ -52,8 +66,70 @@ const formData = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
+  qualification: "",
 });
 
+/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+const visibleColumnsRespondent = ref<string[]>([
+  "info",
+  "no",
+  // "idcard",
+  "name",
+  // "posNo",
+  "position",
+  // "positionLevel",
+  // "salary",
+  "organization",
+]);
+
+const columnsRespondent = ref<QTableProps["columns"]>([
+  {
+    name: "info",
+    align: "center",
+    label: "",
+    sortable: false,
+    field: "info",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -119,6 +195,8 @@ function addEmployee() {
 /**
  * ตรวจสอบข้อมูลก่อนส่งไปยัง api
  */
+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);
@@ -157,53 +235,181 @@ function inputEdit(val: boolean) {
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+/** update เมื่อเปลี่ยน option */
+function updateSelect() {
+  search.value = "";
+}
+
+async function searchInput() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    showLoader();
+    const body = {
+      fieldName: type.value,
+      keyword: search.value,
+    };
+    await http
+      .post(config.API.searchPersonal(), body)
+      .then((res) => {
+        const data = res.data.result;
+        const list = data.map((e: ResponsePreson) => ({
+          personId: e.personId,
+          idcard: e.idcard,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          name: `${e.prefix}${e.firstName}  ${e.lastName}`,
+          posNo: e.posNo ?? "-",
+          position: e.position ?? "-",
+          positionLevel: e.positionLevel ?? "-",
+          salary: e.salaries ?? "-",
+          organization: e.organization ?? "-",
+          phone: e.phone ?? "-",
+          email: e.email ?? "-",
+        }));
+
+        rows.value = list;
+      })
+      .catch((err) => {})
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+function returnDetail(data: any) {
+  formData.prefix = data.prefix;
+  formData.firstname = data.firstName;
+  formData.lastname = data.lastName;
+  formData.position = data.position;
+  formData.phone = data.phone;
+  formData.email = data.email;
+}
+
+/**
+ * function ดูประวัติแบบย่อย
+ * @param id  personId
+ */
+function onclickViewinfo(id: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
 </script>
 <template>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered>
       <div class="col-12 row q-pa-md">
         <div class="row q-col-gutter-md">
-          <div class="row col-12" v-if="data === null">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+          <div class="col-12 q-gutter-y-sm" v-if="data === null">
+            <div class="row q-col-gutter-md items-start">
+              <div class="col-12 col-sm-6 col-md-3">
+                <q-select
+                  label="ค้นหาจาก"
+                  v-model="type"
+                  :options="typeOps"
+                  emit-value
+                  dense
+                  @update:model-value="updateSelect"
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                />
+              </div>
+
+              <div class="col-12 col-sm-6 col-md-6">
+                <q-input
+                  ref="searchRef"
+                  v-model="search"
+                  outlined
+                  clearable
+                  hide-bottom-space
+                  dense
+                  label="คำค้น"
+                  :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
+                />
+              </div>
+
+              <div class="col-12 col-sm-6 col-md-3">
+                <q-btn
+                  color="primary"
+                  icon="search"
+                  label="ค้นหา"
+                  class="full-width q-pa-sm"
+                  @click="searchInput()"
+                >
+                </q-btn>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columnsRespondent"
+                :rows="rows"
+                row-key="personId"
+                flat
+                bordered
+                :paging="true"
+                dense
+                class="custom-header-table"
+                :visible-columns="visibleColumnsRespondent"
               >
-                ค้นหาบุคคลากรที่อยู่ในระบบ
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <div class="col-6">
-                  <q-input
-                    :class="inputEdit(isReadonly)"
-                    dense
-                    outlined
-                    v-model="idCard"
-                    label="เลขประจำตัวประชาชน"
-                    ref="idCardRef"
-                    for="idCardRef"
-                    hide-bottom-space
-                    mask="#-####-#####-##-#"
-                    :rules="[(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`]"
-                  />
-                </div>
-                <div class="col-2">
-                  <q-btn
-                    unelevated
-                    dense
-                    color="primary"
-                    class="q-px-md q-py-sm q-ml-sm"
-                    @click="addEmployee"
-                    label="เพิ่มบุคลากร"
-                    id="addCustomer"
-                  />
-                </div>
-              </div>
-            </q-card>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                      style="color: #000000; font-weight: 500"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                      @click="returnDetail(props.row)"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else-if="col.name == 'info'">
+                        <!-- <router-link
+                          target="_blank"
+                          :to="`/registry/${props.row.personId}`"
+                          > -->
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          color="info"
+                          icon="info"
+                          @click="onclickViewinfo(props.row.personId)"
+                        >
+                          <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                        </q-btn>
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
           </div>
+
           <div class="col-3">
             <q-input
               :class="inputEdit(isReadonly)"
@@ -302,4 +508,10 @@ function inputEdit(val: boolean) {
       </div>
     </q-card>
   </form>
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>