แก้ ประวัติถือครองตำแหน่ง

src/modules/04_registryPerson/components/DialogHistory.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter,useRoute } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -11,10 +11,7 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { QForm } from "quasar";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
-import type {
-  HistoryPos,
-  Position,
-} from "@/modules/04_registryPerson/interface/response/History";
+import type { HistoryPos } from "@/modules/04_registryPerson/interface/response/History";
 
 /** import components*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -30,7 +27,9 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true }); //แสดง popup ประวัติถือครองตำแหน่ง
 
 //ตัวแปร
-const employeeClass = ref<string>(route.name == "registryNew" ? 'officer':'perm'); //ประเภทข้า่รายการ
+const employeeClass = ref<string>(
+  route.name == "registryNew" ? "officer" : "perm"
+); //ประเภทข้า่รายการ
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
@@ -43,8 +42,6 @@ const typeKeywordOps = ref<DataOption[]>([
   { id: "no", name: "ตำแหน่งเลขที่" },
   { id: "position", name: "ตำแหน่ง" },
 ]);
-const positionOps = ref<DataOption[]>([]);
-const options = ref<DataOption[]>([]);
 
 /** Table*/
 const columns = ref<QTableProps["columns"]>([
@@ -100,43 +97,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const rows = ref<HistoryPos[]>([]);
 
-/**  function fetch ข้อมูลตำแหน่ง ข้าราชการ*/
-function fecthPositionOfficer() {
-  http
-    .get(config.API.listPositionPathHistory)
-    .then((res) => {
-      let data = res.data.result.items;
-
-      positionOps.value = data.map((e: Position) => ({
-        id: e.id,
-        name: e.name,
-      }));
-      options.value = positionOps.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-/** function fetch ข้อมูลตำแหน่ง ลูกจ้างประจำ*/
-function fetchPositionPerm() {
-  http
-    .get(config.API.listPositionEmployeePositionHistory)
-    .then((res) => {
-      let data = res.data.result.items;
-      console.log(data);
-
-      positionOps.value = data.map((e: Position) => ({
-        id: e.id,
-        name: e.name,
-      }));
-      options.value = positionOps.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 /** function เปลี่ยนประเภท*/
 function changeEmployeeClass() {
   typeKeyword.value = "";
@@ -145,22 +105,6 @@ function changeEmployeeClass() {
   rows.value = [];
 }
 
-/**
- * function เลือกฟิลด์ที่จะค้นหา
- * @param typeKeyword  ประเภทฟิลด์
- */
-function selectTypeKeyword(typeKeyword: string) {
-  positionOps.value = [];
-  positionKeyword.value = "";
-  Keyword.value = "";
-
-  if (typeKeyword == "position" && employeeClass.value === "officer") {
-    fecthPositionOfficer();
-  } else if (typeKeyword == "position" && employeeClass.value === "perm") {
-    fetchPositionPerm();
-  }
-}
-
 /**
  * function ค้นหาประวัติถือครองตำแหน่ง
  * @param type ประเภทข่าราชการ
@@ -208,26 +152,6 @@ function clickSearch(type: string) {
   });
 }
 
-/**
- * function ค้นหาข่อมูล Optiion
- * @param val คำค้นหา
- * @param update function
- */
-function filterFn(val: string, update: Function) {
-  if (val === "") {
-    update(() => {
-      options.value = positionOps.value;
-    });
-    return;
-  } else {
-    update(() => {
-      options.value = positionOps.value.filter(
-        (e) => e.name.search(val) !== -1
-      );
-    });
-  }
-}
-
 /**
  * function redirect ไปทะเบียนประวัติ
  * @param id
@@ -261,7 +185,7 @@ function closeDialog() {
       <q-card-section class="q-pa-sm">
         <q-form ref="myForm">
           <div class="bg-grey-2 q-pa-sm">
-            <div class="row q-col-gutter-sm no-warp full-width">
+            <div class="row q-col-gutter-sm full-width">
               <div class="col-3">
                 <q-select
                   hide-bottom-space
@@ -300,7 +224,7 @@ function closeDialog() {
                   :label="`${' เลือกฟิลด์ที่จะค้น'}`"
                   use-input
                   input-debounce="0"
-                  @update:model-value="selectTypeKeyword(typeKeyword)"
+                  @update:model-value="(Keyword = ''), (positionKeyword = '')"
                 />
               </div>
               <div class="col-3" v-if="typeKeyword === 'no'">
@@ -312,40 +236,21 @@ function closeDialog() {
                   placeholder="ตำแหน่งเลขที่"
                   :rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่งเลขที่'}`]"
                   hide-bottom-space
-                  style="width: 250px"
                 />
               </div>
 
               <div class="col-3" v-if="typeKeyword === 'position'">
-                <q-select
-                  hide-bottom-space
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                <q-input
                   outlined
                   dense
-                  v-model="positionKeyword"
-                  emit-value
                   bg-color="white"
-                  map-options
-                  :options="options"
-                  option-label="name"
-                  option-value="id"
-                  :label="`${' เลือกตำแหน่ง'}`"
-                  use-input
-                  input-debounce="0"
-                  @filter="filterFn"
-                  style="width: 250px"
-                  behavior="menu"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template></q-select
-                >
+                  v-model="positionKeyword"
+                  placeholder="ตำแหน่ง"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่ง'}`]"
+                  hide-bottom-space
+                />
               </div>
-              <div :class="typeKeyword ? 'col-3':'col-3 offset-3'">
+              <div :class="typeKeyword ? 'col-3' : 'col-3 offset-3'">
                 <q-btn
                   class="on-right bg-white full-width"
                   outline