refactor+component รายการรับโอน

src/modules/05_placement/components/Receive/Dialogbody.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseRow } from "@/modules/05_placement/interface/response/Receive";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<ResponseRow[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+  "dateText",
+  "statusText",
+]);
+//หัวตาราง
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับโอน",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  fecthlistRecevice: Function,
+  nextPage: Function,
+  rows2: Array,
+  filterKeyword2: String,
+});
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r: any) => r.personalId);
+  const body = {
+    id,
+  };
+  showLoader();
+  await http
+    .post(config.API.receiveReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
+      props.clickClose?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.fecthlistRecevice?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งรับโอน" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2"
+                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto" >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                </template>
+              </q-input>
+              <q-select v-model="visibleColumns2" multiple outlined dense options-dense
+                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2"
+                option-value="name" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2"
+          row-key="personalId" flat :visible-columns="visibleColumns2" selection="multiple"
+          v-model:selected="selected" >
+          <template v-slot:header-selection="scope">
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+          </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 key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="citizenId" :props="props" @click="props.nextPage(props.row)" >
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="fullname" :props="props" @click="props.nextPage(props.row)" >
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="organizationName" :props="props" @click="props.nextPage(props.row)" >
+                <div v-if=" props.row.orgName !== null || props.row.positionPath !== null " >
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
+                      {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="birthday" :props="props" @click="props.nextPage(props.row)" >
+                {{ props.row.birthday }}
+              </q-td>
+              <q-td key="dateText" :props="props" @click="props.nextPage(props.row)" >
+                {{ props.row.dateText }}
+              </q-td>
+              <q-td key="statusText" :props="props" @click="props.nextPage(props.row)" >
+                {{ props.row.statusText }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" @click="saveOrder" :disable="checkSelected" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -87,8 +87,7 @@ const positionLevelOld = ref<string>("");
 const posNo = ref<string>("");
 const salary = ref<number>(0);
 const avatar = ref<string>("");
-// const organization = ref<string>("");
+
-// const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
 const informaData = ref<Information>(defaultInformation);
@@ -127,11 +126,6 @@ const OpsFilter = ref<InformationOps>({
   ],
 });
 
-onMounted(async () => {
-  await fetchPerson();
-  await getData();
-});
-
 const fetchPerson = async () => {
   showLoader();
   await http
@@ -189,9 +183,7 @@ const fetchPerson = async () => {
       OpsFilter.value.religionOps = optionreligions;
     })
     .catch((e: any) => {})
-    .finally(() => {
+    .finally(() => {});
-      //   hideLoader();
-    });
 };
 
 const getData = async () => {
@@ -200,7 +192,6 @@ const getData = async () => {
     .get(config.API.receiveDataId(paramsId.toString()))
     .then(async (res: any) => {
       const data = res.data.result;
-      console.log(data);
       let list: any[] = [];
       if (data.docs.length > 0) {
         data.docs.map((doc: any) => {
@@ -213,7 +204,9 @@ const getData = async () => {
       rows.value = list;
       profileId.value = data.profileId;
       avatar.value = data.avatar ?? "";
-      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
+        data.lastname ?? "-"
+      }`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
@@ -285,13 +278,11 @@ const changeCardID = async (value: string | number | null) => {
   if (value != null && typeof value == "string") {
     if (value.length == 13 && value != defaultCitizenData.value) {
       await checkCitizen(value);
-      //   informaData.value.cardid = defaultCitizenData.value;
     }
   }
 };
 
 const checkCitizen = async (id: string) => {
-  console.log("String");
   showLoader();
   await http
     .get(config.API.profileCitizenId(id))
@@ -387,7 +378,6 @@ const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
   };
-  //   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
   showLoader();
   await http
     .post(config.API.profileCalRetire, body)
@@ -454,8 +444,6 @@ const saveData = async () => {
   await http
     .put(config.API.receiveDataId(route.params.id.toString()), body)
     .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -474,6 +462,10 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+onMounted(async () => {
+  await fetchPerson();
+  await getData();
+});
 </script>
 
 <template>
@@ -496,15 +488,6 @@ const getClass = (val: boolean) => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <!-- <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${paramsId}`)"
-      /> -->
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -599,18 +582,14 @@ const getClass = (val: boolean) => {
                 @update:model-value="changeCardID"
                 lazy-rules
                 :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-              (val:string) =>
+                (val:string) => val.length >= 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]"
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]"
                 :readonly="!edit"
                 :borderless="!edit"
                 label="เลขประจำตัวประชาชน"
                 maxlength="13"
                 mask="#############"
               />
-              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
             </div>
             <div class="col-xs-6 col-sm-3 col-md-3">
               <selector
@@ -632,12 +611,9 @@ const getClass = (val: boolean) => {
                 :label="`${'คำนำหน้าชื่อ'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any,
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' ) "
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                        ) "
               />
             </div>
-
             <div class="col-xs-6 col-sm-3 col-md-3">
               <q-input
                 :class="getClass(edit)"
@@ -749,9 +725,7 @@ const getClass = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
-                @filter="(inputValue:any,
+                @filter="(inputValue:any,doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps') "
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                        ) "
               />
             </div>
             <div class="col-xs-6 col-sm-2 col-md-2">
@@ -774,9 +748,7 @@ const getClass = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
-                @filter="(inputValue:any,
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps' ) "
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                        ) "
               />
             </div>
             <div class="col-xs-6 col-sm-2 col-md-2">
@@ -897,10 +869,7 @@ const getClass = (val: boolean) => {
                 :label="`${'ประเภทการจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any,
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) " />
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                        ) "
-              />
             </div>
             <div
               class="col-xs-6 col-sm-3 col-md-3"
@@ -925,10 +894,7 @@ const getClass = (val: boolean) => {
                 :label="`${'ประเภทลูกจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any,
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) " />
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                        ) "
-              />
             </div>
             <div class="col-xs-12">
               <div class="text-weight-bold text-grey">
@@ -1009,19 +975,6 @@ const getClass = (val: boolean) => {
               />
             </div>
             <div class="col-xs-6 col-sm-3">
-              <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
               <CurrencyInput
                 v-model="salary"
                 :edit="edit"

src/modules/05_placement/components/Receive/receiveMain.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-
+import Dialogbody from "@/modules/05_placement/components/Receive/Dialogbody.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -18,25 +18,34 @@ import type {
   ResponseRow,
 } from "@/modules/05_placement/interface/response/Receive";
 
-const id = ref<string>("");
 const $q = useQuasar();
 const router = useRouter();
+const rows2 = ref<ResponseRow[]>([]);
+const modal = ref<boolean>(false);
+const modalupload = ref<boolean>(false);
+const modalTree = ref<boolean>(false);
+const myForm = ref<any>();
+const personal = ref<any[]>([]);
+const personalId = ref<string>("");
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const files = ref<any>();
+const listRecevice = ref<any[]>([]);
+const filters = ref<ResponseRow[]>([]);
+const rows = ref<ResponseRow[]>([]);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const transferStore = useTransferDataStore();
 const { statusText } = transferStore;
 const {
   showLoader,
   hideLoader,
-  dialogMessage,
   success,
   messageError,
   date2Thai,
   dialogRemove,
 } = mixin;
 
-const selected = ref<ResponseRow[]>([]);
-
-const modal = ref<boolean>(false);
 const popup = () => {
   const row = filters.value.filter(
     (r: ResponseRow) =>
@@ -48,12 +57,7 @@ const popup = () => {
   rows2.value = row;
   modal.value = true;
 };
-
+//คอลัม
-const modalupload = ref<boolean>(false);
-
-const modalTree = ref<boolean>(false);
-const personal = ref<any[]>([]);
-const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -63,51 +67,7 @@ const visibleColumns = ref<string[]>([
   "dateText",
   "statusText",
 ]);
-
+// หัวตาราง
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "birthday",
-  "dateText",
-  "statusText",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const files = ref<any>();
-const nameFile = ref<string>("");
-const fileUpload = ref<any>([]);
-const fileDocDataUpload = ref<File[]>([]);
-const listRecevice = ref<any[]>([]);
-const filters = ref<ResponseRow[]>([]);
-const rows = ref<ResponseRow[]>([
-  // {
-  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //   citizenId: "1234444332222",
-  //   fullname: "นางสาวอย พชช",
-  //   organizationName: "นักจัดการงานทั่วไป",
-  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-  //   organizationShortName: "สกจ.",
-  //   positionNumber: "กก. 1",
-  //   positionPath: "นักจัดการงานทั่วไป",
-  //   birthday: dateText(new Date("1989-09-03")),
-  // },
-]);
-const rows2 = ref<ResponseRow[]>([
-  //   {
-  //     personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //     citizenId: "1234444332222",
-  //     fullname: "นางสาวอย พชช",
-  //     organizationName: "นักจัดการงานทั่วไป",
-  //     orgName: "กลุ่มงานช่วยนักบริหาร",
-  //     organizationShortName: "สกจ.",
-  //     positionNumber: "กก. 1",
-  //     positionPath: "นักจัดการงานทั่วไป",
-  //     birthday: dateText(new Date("1989-09-03")),
-  //   },
-]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -186,91 +146,8 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationName",
-    align: "left",
-    label: "หน่วยงานที่รับโอน",
-    sortable: true,
-    field: "organizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthday",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthday",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateText",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "dateText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
-  },
-  {
-    name: "statusText",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statusText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
 
-onMounted(() => {
+ //save file
-  fecthlistRecevice();
-});
-const myForm = ref<any>();
 const SaveData = async () => {
   myForm.value.validate().then((result: boolean) => {
     if (result) {
@@ -299,7 +176,6 @@ const fecthlistRecevice = async () => {
     .then((res: any) => {
       const response = res.data.result;
       listRecevice.value = response;
-      //   console.log(response);
       let list: ResponseRow[] = [];
       response.map((e: ResponseData) => {
         list.push({
@@ -337,76 +213,42 @@ const fecthlistRecevice = async () => {
     });
 };
 
-// const fileUploadDoc = async (val: any) => {
+// รีเซ็ตค่าในฟิลเตอร์
-//   nameFile.value = val[0].name;
-//   fileUpload.value = val;
-// };
-
-// const addUpload = async () => {
-//   if (fileUpload.value.length > 0) {
-//     const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
-//     const newFile = new File(blob, nameFile.value, {
-//       type: fileUpload.value[0].type,
-//     });
-//     const formData = new FormData();
-//     formData.append("", newFile);
-//     showLoader();
-//     await http
-//       .put(config.API.receiveFile(personalId.value), formData)
-//       .then(() => {
-//         success($q, "บันทึกข้อมูลสำเร็จ");
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(async () => {
-//         hideLoader();
-//       });
-//   }
-// };
-
 const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
-
+// ไปหน้าเพิ่มข้อมูล
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
 const add = () => {
   router.push(`/receive/add`);
 };
-
+// ปิดโมเดล
 const clickClose = () => {
   modal.value = false;
+  filterKeyword2.value = "";
 };
+// ปิดโมเดลอัปเดตไฟล์
 const clickCloseUpload = () => {
   modalupload.value = false;
   files.value = null
 };
-
+// ปิดโมเดลโครงสร้าง
 const openModalTree = (id: string) => {
   personalId.value = id;
-  console.log(personalId.value);
-
   personal.value = listRecevice.value.filter((e: any) => e.id === id);
   modalTree.value = true;
 };
-
+// เปิดโมเดลไฟล์
 const openUpload = (id: string) => {
   personalId.value = id;
   modalupload.value = true;
-  console.log(personalId.value);
 };
-
+// ยินยันลบ
 const openDelete = (id: string) => {
   dialogRemove($q, async () => await fetchDataDelete(id));
 };
-
+// ลบข้อมูล
 const fetchDataDelete = async (id: string) => {
   showLoader();
   await http
@@ -423,41 +265,22 @@ const fetchDataDelete = async (id: string) => {
     });
 };
 
+// เปิดโมเดล โครงสร้าง
 const closeModalTree = async () => {
   await fecthlistRecevice();
   modalTree.value = false;
 };
 
+// ไปหน้ารายละเอียด
 const nextPage = (row: any) => {
   router.push({
     path: `/receive/${row.personalId}`,
   });
 };
 
-const saveOrder = async () => {
+onMounted(() => {
-  const id = selected.value.map((r: any) => r.personalId);
+  fecthlistRecevice();
-  const body = {
+});
-    id,
-  };
-
-  showLoader();
-  await http
-    .post(config.API.receiveReport, body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
-      clickClose();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fecthlistRecevice();
-      hideLoader();
-      
-    });
-};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
@@ -469,65 +292,26 @@ const saveOrder = async () => {
           <q-btn flat round color="primary" @click="add" icon="mdi-plus">
             <q-tooltip>เพิ่มข้อมูล</q-tooltip>
           </q-btn>
-
+          <q-btn size="14px" flat round color="add" icon="mdi-account-arrow-right" @click="popup()" >
-          <q-btn
-            @click="popup()"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
-
           <q-space />
-          <q-input
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword"
-            class="col-xs-12 col-sm-3 col-md-2"
+            ref="filterRef" outlined debounce="300" placeholder="ค้นหา" >
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
-
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense
-          <q-select
+            :display-value="$q.lang.table.columns" emit-value map-options
-            v-model="visibleColumns"
+            :options="columns" option-value="name" options-cover style="min-width: 150px"
-            multiple
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table
+          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="fullname"
-            :columns="columns"
+            :visible-columns="visibleColumns" >
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="fullname"
-            :visible-columns="visibleColumns"
-          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -541,53 +325,22 @@ const saveOrder = async () => {
                 <q-td key="no" :props="props" @click="nextPage(props.row)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
+                <q-td key="citizenId" :props="props" @click="nextPage(props.row)" >
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
                   {{ props.row.citizenId }}
                 </q-td>
-                <q-td
+                <q-td key="fullname" :props="props" @click="nextPage(props.row)" >
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
+                <q-td key="organizationName" :props="props" @click="nextPage(props.row)" >
-                  key="organizationName"
+                  <div v-if=" props.row.orgName !== null || props.row.positionPath !== null " >
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
                     <div class="col-4">
                       <div class="text-weight-medium">
-                        {{
+                        {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                          props.row.orgName !== null ? props.row.orgName : "-"
+                        {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
-                            : ""
-                        }}
                       </div>
                       <div class="text-weight-light">
-                        {{
+                        {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
-                          props.row.positionPath !== null
+                        {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
-                            ? props.row.positionPath
-                            : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
-                            ? `(${props.row.positionNumber})`
-                            : ""
-                        }}
                       </div>
                     </div>
                   </div>
@@ -597,119 +350,46 @@ const saveOrder = async () => {
                     </div>
                   </div>
                 </q-td>
-                <q-td
+                <q-td key="birthday" :props="props" @click="nextPage(props.row)" >
-                  key="birthday"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
                   {{ props.row.birthday }}
                 </q-td>
-                <q-td
+                <q-td key="dateText" :props="props" @click="nextPage(props.row)" >
-                  key="dateText"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
                   {{ props.row.dateText }}
                 </q-td>
-                <q-td
+                <q-td key="statusText" :props="props" @click="nextPage(props.row)" >
-                  key="statusText"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
+                  <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7"
-                    icon="mdi-dots-vertical"
+                    flat round dense >
-                    size="12px"
+                    <q-menu transition-show="jump-down" transition-hide="jump-up" >
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
                       <q-list dense style="min-width: 100px">
-                        <q-item
+                        <q-item clickable v-close-popup @click="openModalTree(props.row.personalId)"
-                          clickable
+                          :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
-                          v-close-popup
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
-                          @click="openModalTree(props.row.personalId)"
+                            <q-icon :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'primary' "
-                          :disable="
+                              size="xs" name="mdi-bookmark-outline" />
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'primary'
-                              "
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
                           </q-item-section>
                           <q-item-section
                             >เลือกหน่วยงานที่รับโอน</q-item-section
                           >
                         </q-item>
-                        <q-item
+                        <q-item clickable v-close-popup
-                          clickable
+                          @click="openUpload(props.row.personalId)" :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' ">
-                          v-close-popup
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
-                          @click="openUpload(props.row.personalId)"
+                            <q-icon size="xs" name="attach_file"
-                          :disable="
+                              :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'blue' " />
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'blue'
-                              "
-                              size="xs"
-                              name="attach_file"
-                            />
                           </q-item-section>
                           <q-item-section>อัปโหลดเอกสาร</q-item-section>
                         </q-item>
-                        <q-item
+                        <q-item clickable v-close-popup @click="openDelete(props.row.personalId)"
-                          clickable
+                          :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
-                          v-close-popup
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
-                          @click="openDelete(props.row.personalId)"
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
                             <q-tooltip>ลบข้อมูล</q-tooltip>
                             <q-icon
                               :color="
                                 props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
+                                props.row.status == 'DONE' ? 'grey' : 'red' "
-                                  ? 'grey'
-                                  : 'red'
-                              "
                               size="xs"
                               name="mdi-delete"
                             />
@@ -728,166 +408,14 @@ const saveOrder = async () => {
     </div>
   </q-card>
 
-  <q-dialog v-model="modal">
+  <Dialogbody
-    <q-card style="width: 1200px; max-width: 80vw">
+    v-model:Modal="modal"
-      <DialogHeader title="ส่งไปออกคำสั่งรับโอน" :close="clickClose" />
+    :clickClose="clickClose"
-      <q-separator />
+    :rows2="rows2"
-      <q-card-section class="q-pt-none">
+    v-model:filterKeyword2="filterKeyword2"
-        <div class="row justify-end">
+    :fecthlistRecevice="fecthlistRecevice"
-          <div class="col-5">
+    :nextPage="nextPage"
-            <q-toolbar style="padding: 0">
+  />
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="personalId"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <!-- <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </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 key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props" @click="nextPage(props.row)">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props" @click="nextPage(props.row)">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td
-                key="organizationName"
-                :props="props"
-                @click="nextPage(props.row)"
-              >
-                <div
-                  v-if="
-                    props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                  "
-                >
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                      {{
-                        props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
-                      }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{
-                        props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
-                      }}
-                      {{
-                        props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
-                </div>
-              </q-td>
-              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
-                {{ props.row.birthday }}
-              </q-td>
-              <q-td key="dateText" :props="props" @click="nextPage(props.row)">
-                {{ props.row.dateText }}
-              </q-td>
-              <q-td
-                key="statusText"
-                :props="props"
-                @click="nextPage(props.row)"
-              >
-                {{ props.row.statusText }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="saveOrder"
-          :disable="checkSelected"
-          color="public"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
   <q-dialog v-model="modalupload">
     <q-card style="width: 600px">
       <DialogHeader title="อัปโหลดเอกสาร" :close="clickCloseUpload" />
@@ -895,19 +423,10 @@ const saveOrder = async () => {
       <q-card-section class="q-py-sm">
         <div class="col-12 row items-center q-col-gutter-sm">
           <div class="col-12">
-            <q-file
+            <q-file ref="myForm" outlined dense v-model="files" label="อัปโหลดเอกสาร" lazy-rules
-              ref="myForm"
+              :rules="[(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']" hide-bottom-space >
-              outlined
-              dense
-              v-model="files"
-              label="อัปโหลดเอกสาร"
-              lazy-rules
-              :rules="[(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']"
-              hide-bottom-space
-              >
               <template v-slot:prepend>
                 <q-icon name="attach_file" />
-
               </template>
             </q-file>
           </div>
@@ -916,13 +435,7 @@ const saveOrder = async () => {
       <q-separator />
       <div class="row q-px-sm q-py-xs">
         <q-space />
-        <q-btn
+        <q-btn flat round color="public" @click="SaveData()" icon="mdi-content-save-outline" >
-          flat
-          round
-          color="public"
-          @click="SaveData()"
-          icon="mdi-content-save-outline"
-        >
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </div>
@@ -935,6 +448,5 @@ const saveOrder = async () => {
     :personal="personal"
     :personalId="personalId"
   />
-  <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>

src/modules/05_placement/components/Receive/receiveModal.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useQuasar, QForm } from "quasar";
 import { onMounted, reactive, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -21,12 +22,47 @@ const {
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
 
+const id = ref<string>("");
+const search = ref<string>("");
+const selected = ref<string>("");
+const personal = ref<any>();
+const treeData = ref<Array<any>>([]);
+const expanded = ref<string[]>([]);
+const filterRef = ref<any>(null);
+const dataRespone = ref<any>();
+const selectedFile = ref<string>("");
 const checkValidate = ref<boolean>(false);
 const myFormPosition = ref<any>();
-const selected = ref<string>("");
+const editDataStatus = ref<boolean>(false);
-const selectedFile = ref<string>("");
+const placementPosition = ref<any>([]);
-const dataRespone = ref<any>();
 
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+// สายงาน
+const positionLineOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+// ระดับ
+const positionLevelOptions = ref<Object[]>([ { label: "", value: "" } ]);
+
+const props = defineProps({
+  personalId: String,
+  modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("close modal"),
+  },
+  personal: Object,
+});
 // Set form field
 let dataForm = reactive({
   personalId: "",
@@ -37,16 +73,8 @@ let dataForm = reactive({
   positionLineId: "",
   positionPathSideId: "",
   positionTypeId: "",
-  // salaryAmount: null,
-  // mouthSalaryAmount: null,
-  // positionSalaryAmount: null,
 });
 
-onMounted(async () => {
-  await fetchPublishFile();
-  await loadTreeData();
-  await fetchplacementPosition();
-});
 const fetchPublishFile = async () => {
   await http
     .get(config.API.getPublishFileHistory)
@@ -63,7 +91,6 @@ const fetchPublishFile = async () => {
 };
 
 // โหลดข้อมูลโครงสร้างจาก json
-const treeData = ref<Array<any>>([]);
 const loadTreeData = async () => {
   expanded.value = [];
   await http
@@ -71,7 +98,6 @@ const loadTreeData = async () => {
     .then((res: any) => {
       treeData.value = res.data;
       dataRespone.value = res.data;
-
       // Filter objects with "name" null
       const filteredData = res.data.filter(filterByPersonIdNull);
       treeData.value = filteredData;
@@ -85,7 +111,6 @@ const loadTreeData = async () => {
 };
 
 function filterByPersonIdNull(obj: any) {
-  // console.log(obj);
   if (obj.name === null && obj.isCondition != true) {
     return true;
   }
@@ -97,7 +122,6 @@ function filterByPersonIdNull(obj: any) {
 }
 
 // โหลด position
-const placementPosition = ref<any>([]);
 const fetchplacementPosition = async () => {
   await http
     .get(config.API.receiveDataPosition())
@@ -109,45 +133,22 @@ const fetchplacementPosition = async () => {
     });
 };
 
-const search = ref<string>("");
-//reset Tree Filter
-const filterRef = ref<any>(null);
-// const resetFilter = () => {
-//   search.value = "";
-//   filterRef.value.focus();
-// };
-
-const props = defineProps({
-  personalId: String,
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-
 const myFilterMethod = (node: any, filter: string) => {
   const filt = filter;
-
   return (
-    // ((node.name && node.name == null) || !node.name) &&
     (node.name && node.name.indexOf(filt) > -1) ||
     (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
     (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
     (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
+    (node.governmentCode && node.governmentCode.toString().indexOf(filt) > -1) ||
-      node.governmentCode.toString().indexOf(filt) > -1) ||
     (node.agency && node.agency.indexOf(filt) > -1) ||
     (node.government && node.government.indexOf(filt) > -1) ||
     (node.department && node.department.indexOf(filt) > -1) ||
     (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
+    (node.organizationShortName && node.organizationShortName.indexOf(filt) > -1) ||
-      node.organizationShortName.indexOf(filt) > -1) ||
     (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
     (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
+    (node.executivePositionSide && node.executivePositionSide.indexOf(filt) > -1) ||
-      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
@@ -160,17 +161,14 @@ const validateData = async () => {
     }
   });
 };
-const id = ref<string>("");
-const saveAppoint = async () => {
-  console.log("save", dataForm);
 
+const saveAppoint = async () => {
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (props.personalId !== undefined) {
       id.value = props.personalId.toString();
     }
     if (result) {
       const dataAppoint = await {
-        // personalId: props.personalId,
         recruitDate: dataForm.containDate,
         posNoId: dataForm.posNoId,
         positionId: dataForm.positionId,
@@ -178,16 +176,11 @@ const saveAppoint = async () => {
         positionLineId: dataForm.positionLineId,
         positionPathSideId: dataForm.positionPathSideId,
         positionTypeId: dataForm.positionTypeId,
-        // salaryAmount: dataForm.salaryAmount,
-        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
-        // positionSalaryAmount: dataForm.positionSalaryAmount,
       };
-      console.log("save appoint===>", dataAppoint);
       showLoader();
       await http
         .put(config.API.receivePosition(id.value), dataAppoint)
         .then((res) => {
-          console.log("respone=>", res);
           success($q, "บันทึกสำเร็จ");
         })
         .catch((e) => {
@@ -195,7 +188,6 @@ const saveAppoint = async () => {
         })
         .finally(async () => {
           await closeAndClear();
-          // await resetFilter();
           await fetchPublishFile();
           await loadTreeData();
           await fetchplacementPosition();
@@ -205,11 +197,6 @@ const saveAppoint = async () => {
   });
 };
 
-const editDataStatus = ref<boolean>(false);
-const clickEditRow = () => {
-  editDataStatus.value = true;
-};
-
 const closeModal = () => {
   if (editDataStatus.value == true) {
     dialogConfirm(
@@ -238,58 +225,11 @@ const closeAndClear = async () => {
   dataForm.positionLineId = "";
   dataForm.positionPathSideId = "";
   dataForm.positionTypeId = "";
-  // dataForm.salaryAmount = null;
-  // dataForm.mouthSalaryAmount = null;
-  // dataForm.positionSalaryAmount = null;
 };
-// ตำแหน่งเลขที่
+
-const posNoOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ตำแหน่ง
-const positionOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ด้าน/สาขา
-const positionPathSideOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ตำแหน่งประเภท
-const positionTypeOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// สายงาน
-const positionLineOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
-// ระดับ
-const positionLevelOptions = ref<Object[]>([
-  {
-    label: "",
-    value: "",
-  },
-]);
 
 const selectedPosition = async (data: any) => {
-  console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
-    // console.log("selecteds", data);
-
     editDataStatus.value = true;
     selected.value = data.keyId;
 
@@ -370,51 +310,39 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-  console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
   const num = placementPosition.value.findIndex((e: string) => e === val);
   return num;
 };
-const personal = ref<any>();
-const expanded = ref<string[]>([]);
 
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
-  console.log(props.personal);
 
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
       personal.value = data;
     });
-    console.log("personal", personal.value);
   }
-  // console.log("draft===>", personal.value.draft);
 
   if (personal.value) {
-    // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-      // console.log(findData);
 
       if (findData != null) {
-        // console.log("findData===>", findData);
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));
         }
       }
     });
-    // loadTreeData();
-    // selectedPosition(findData.children.children.children)
   }
 });
 
 function findByPerson(element: any): any {
-  // console.log("searchTree element===>", element)
   if (
     element.positionNumId &&
     element.positionLineId === personal.value.positionLineId &&
@@ -434,6 +362,11 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  await fetchplacementPosition();
+});
 </script>
 
 <template>
@@ -480,10 +413,6 @@ function findByPerson(element: any): any {
                             <div class="text-weight-medium">
                               {{ prop.node.organizationName }}
                             </div>
-
-                            <!--แสดง Total Count PositionNum-->
-                            <!-- <q-badge rounded color="grey-2" text-color="dark"
-                                                            :label="prop.node.totalPositionCount" /> -->
                             <q-badge
                               v-if="prop.node.totalPositionVacant > 0"
                               rounded
@@ -613,8 +542,7 @@ function findByPerson(element: any): any {
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
+                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,]"
-        ]"
                             :label="`${'วันที่รายงานตัว'}`"
                             hide-bottom-space
                           >
@@ -719,55 +647,6 @@ function findByPerson(element: any): any {
                         map-options
                       />
                     </div>
-                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
-                      <q-separator inset size="2px" class="q-my-md" />
-                    </div> -->
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.salaryAmount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.positionSalaryAmount"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
-
-                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        v-model="dataForm.mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div> -->
                   </div>
                 </q-scroll-area>
               </q-card>
@@ -801,6 +680,5 @@ function findByPerson(element: any): any {
   background: #a3d3fb48 !important;
   font-weight: 600;
   border: 1px solid rgba(175, 185, 196, 0.217);
-  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
 }
 </style>