From 55885fb81c86ab5f281f67b98ab0f2f821a667f7 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 10 Jun 2024 13:51:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Tab/Dialog/DialogEvalute.vue   | 336 +++++++++---------
 1 file changed, 175 insertions(+), 161 deletions(-)

diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
index 19557760b..2cc624911 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
@@ -16,6 +16,7 @@ import type {
 } from "@/modules/14_KPI/interface/index/Main";
 import { useRouter } from "vue-router";
 
+const searchRules = ref<boolean>(false);
 const selected = ref<any[]>([]);
 const personId = ref<string>("");
 const modalPersonal = ref<boolean>(false);
@@ -30,8 +31,16 @@ const typeOps = ref<typeOp[]>([
 ]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm,dialogMessageNotify } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dialogConfirm,
+  dialogMessageNotify,
+  findOrgName,
+  findPosMasterNo,
+} = mixin;
 
 const router = useRouter();
 
@@ -81,31 +90,29 @@ function onCloseDialog() {
   modalDialog.value = false;
   formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
   yearDialog.value = new Date().getFullYear();
+  rows.value = [];
+  formRound.evaluatorId = "";
+  formRound.commanderId = "";
+  formRound.commanderHighId = "";
+  selected.value=[]
+  search.value = ''
+  type.value = 'idcard'
 }
 
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
 const visibleColumnsRespondent = ref<string[]>([
-  "info",
   "no",
   // "idcard",
   "name",
   // "posNo",
   "position",
+  "positionType",
   // "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",
@@ -133,6 +140,15 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "organization",
     align: "left",
@@ -207,25 +223,31 @@ function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
-    showLoader();
-    const body = {
-      fieldName: type.value,
-      keyword: search.value,
-    };
-    await http
-      .post(config.API.orgSearchPersonal(), body)
-      .then((res) => {
-        const data = res.data.result;
+async function searchInput(check: boolean) {
+  if (check) {
+    searchRules.value = check;
+    searchRef.value.validate();
+    if (!searchRef.value.hasError) {
+      showLoader();
+      const body = {
+        fieldName: type.value,
+        keyword: search.value,
+      };
+      await http
+        .post(config.API.orgSearchPersonal(), body)
+        .then((res) => {
+          const data = res.data.result;
 
-        rows.value = data;
-      })
-      .catch((err) => {})
-      .finally(() => {
-        hideLoader();
-      });
+          rows.value = data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          hideLoader();
+        });
+    }
+    setTimeout(() => {
+      searchRules.value = false;
+    }, 100);
   }
 }
 
@@ -234,15 +256,6 @@ function updateSelect() {
   search.value = "";
 }
 
-/**
- * function ดูประวัติแบบย่อย
- * @param id  personId
- */
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
 function getOrgOp() {
   http
     .get(config.API.Kpiorg)
@@ -267,12 +280,11 @@ function getOrgOp() {
     .finally(() => {});
 }
 
-
 function onSubmit() {
-  if(selected.value.length == 0){
-    dialogMessageNotify($q,'กรุณาเลือกรายการ ข้าราชการ 1 บุคคล')
-  }else{
-const dataProfile = selected.value[0]
+  if (selected.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกรายการ ข้าราชการ 1 บุคคล");
+  } else {
+    const dataProfile = selected.value[0];
     dialogConfirm($q, () => {
       showLoader();
       http
@@ -280,7 +292,8 @@ const dataProfile = selected.value[0]
           kpiPeriodId: formRound.kpiPeriodId.id,
           profileId: dataProfile.id,
           evaluatorId: formRound.evaluatorId,
-          commanderId: formRound.commanderId == "" ? null : formRound.commanderId,
+          commanderId:
+            formRound.commanderId == "" ? null : formRound.commanderId,
           commanderHighId:
             formRound.commanderHighId == "" ? null : formRound.commanderHighId,
         })
@@ -325,6 +338,123 @@ watch(
         <q-separator />
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
           <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-9">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <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-9">
+                  <q-input
+                    ref="searchRef"
+                    v-model="search"
+                    outlined
+                    clearable
+                    hide-bottom-space
+                    dense
+                    label="คำค้น"
+                    :rules="[
+                      (val) => !!val || !searchRules || `กรุณากรอกคำค้น`,
+                    ]"
+                  >
+                    <template v-slot:after>
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-py-sm q-px-md"
+                        @click="searchInput(true)"
+                      >
+                      </q-btn>
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12 q-pt-sm">
+                  <d-table
+                    ref="table"
+                    :columns="columnsRespondent"
+                    :rows="rows"
+                    row-key="id"
+                    flat
+                    bordered
+                    selection="single"
+                    v-model:selected="selected"
+                    :paging="true"
+                    dense
+                    class="custom-header-table"
+                    :visible-columns="visibleColumnsRespondent"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width></q-th>
+                        <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>
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </q-td>
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else-if="col.name == 'positionType'">
+                            {{
+                              props.row.positionTypeName
+                                ? props.row.positionTypeName
+                                : ""
+                            }}{{
+                              props.row.positionLevelName
+                                ? ` (${props.row.positionLevelName})`
+                                : ""
+                            }}
+                          </div>
+                          <div
+                            v-else-if="col.name == 'organization'"
+                            class="table_ellipsis"
+                          >
+                            {{ findOrgName(props.row) }}
+                          </div>
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+            </div>
             <div class="col-12 col-md-3 bg-grey-2">
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="col-12">
@@ -488,122 +618,6 @@ watch(
                 </div>
               </div>
             </div>
-
-            <div class="col-12 col-md-9">
-              <div class="row q-pa-md q-col-gutter-sm">
-                <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-9">
-                  <q-input
-                    ref="searchRef"
-                    v-model="search"
-                    outlined
-                    clearable
-                    hide-bottom-space
-                    dense
-                    label="คำค้น"
-                    :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-                  >
-                    <template v-slot:after>
-                      <q-btn
-                        color="primary"
-                        icon="search"
-                        label="ค้นหา"
-                        class="full-width q-py-sm q-px-md"
-                        @click="searchInput()"
-                      >
-                      </q-btn>
-                    </template>
-                  </q-input>
-                </div>
-                <div class="col-12 q-pt-sm">
-                  <d-table
-                    ref="table"
-                    :columns="columnsRespondent"
-                    :rows="rows"
-                    row-key="id"
-                    flat
-                    bordered
-                    selection="single"
-                    v-model:selected="selected"
-                    :paging="true"
-                    dense
-                    class="custom-header-table"
-                    :visible-columns="visibleColumnsRespondent"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th auto-width></q-th>
-                        <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>
-                          <q-checkbox
-                            keep-color
-                            color="primary"
-                            dense
-                            v-model="props.selected"
-                          />
-                        </q-td>
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <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>
           </div>
         </q-card-section>
         <q-separator />