From ca91efbaa50d16cd2afb953cb8548708314baa98 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 7 Jun 2023 13:42:11 +0700
Subject: [PATCH] modal-detail

---
 .../05_placement/components/DialogFooter.vue  |  90 ++
 .../05_placement/components/DialogHeader.vue  |  27 +
 .../components/PlacementTable.vue             | 124 ++-
 .../components/PlacementTableView.vue         | 781 +++++++++---------
 .../interface/request/placement.ts            |  16 +-
 src/modules/05_placement/store.ts             |  29 +-
 6 files changed, 634 insertions(+), 433 deletions(-)
 create mode 100644 src/modules/05_placement/components/DialogFooter.vue
 create mode 100644 src/modules/05_placement/components/DialogHeader.vue

diff --git a/src/modules/05_placement/components/DialogFooter.vue b/src/modules/05_placement/components/DialogFooter.vue
new file mode 100644
index 000000000..a99ee7515
--- /dev/null
+++ b/src/modules/05_placement/components/DialogFooter.vue
@@ -0,0 +1,90 @@
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn
+      v-if="!editvisible"
+      flat
+      round
+      :disabled="editvisible"
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <!-- <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn> -->
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+</script>
diff --git a/src/modules/05_placement/components/DialogHeader.vue b/src/modules/05_placement/components/DialogHeader.vue
new file mode 100644
index 000000000..93aa1f86e
--- /dev/null
+++ b/src/modules/05_placement/components/DialogHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{ tittle }}</q-toolbar-title>
+    <q-btn
+    icon="close"
+    unelevated
+    round
+    dense
+    @click="close"
+    style="color: #ff8080; background-color: #ffdede"
+      />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index ea850ef46..963a53664 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -3,11 +3,65 @@ import { ref, defineComponent, h } from "vue";
 import Table from "@/modules/05_placement/components/PlacementTableView.vue";
 import { useQuasar, QForm } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
+import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
+const visibleColumns = ref<String[]>([]);
+const store = usePlacementDataStore();
+const filter = ref<string>("");
+const { placementData } = store;
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const position = ref<number>();
+const Name = ref<string>();
+const ExamOrder = ref<number>();
+const Unit = ref<string>();
+const ReportingDate = ref<string>();
+const BMAOfficer = ref<boolean>();
+const Status = ref<string>();
+const checkList = ref<string>();
 
+  const $q = useQuasar(); // show dialog
+
+const selectData = (props: TableName) => {
+  if (editvisible.value == true) {
+    editRow.value = false;
+    modalEdit.value = true;
+    modal.value = false;
+    edit.value = true;
+    position.value = props.position;
+    Name.value = props.Name;
+    ExamOrder.value = props.ExamOrder;
+    Unit.value = props.Unit;
+    ReportingDate.value = props.ReportingDate;
+    BMAOfficer.value = props.BMAOfficer;
+    Status.value = props.Status;
+    checkList.value = props.checkList;
+  }else{
+    editRow.value = false;
+    modalEdit.value = true;
+    modal.value = true;
+    edit.value = true;
+  }
+};
+
+placementData.mappingPosition.columns.length == 0
+  ? (visibleColumns.value = [
+      "position",
+      "Name",
+      "ExamOrder",
+      "Unit",
+      "ReportingDate",
+      "BMAOfficer",
+      "Status",
+      "checkList",
+    ])
+  : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -66,7 +120,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "center",
+    align: "left",
     label: "ข้าราชการฯ กทม.",
     sortable: true,
     field: "BMAOfficer",
@@ -77,7 +131,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "Status",
-    align: "center",
+    align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
     field: "Status",
@@ -87,7 +141,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rows = [
+const rows = ref<TableName[]>([
   {
     position: 1,
     Name: "setthawut",
@@ -96,6 +150,7 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
+    checkList:null
   },
   {
     position: 1,
@@ -105,6 +160,7 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
+    checkList:null
   },
   {
     position: 1,
@@ -114,8 +170,9 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
+    checkList:null
   },
-  
+
   {
     position: 1,
     Name: "setthawut",
@@ -124,17 +181,20 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
+    checkList:null
   },
-  
+
   {
     position: 1,
-    Name: "setthawut",
+    Name: "tee",
     ExamOrder: 1,
     Unit: "chamomind",
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-  },{
+    checkList:null
+  },
+  {
     position: 1,
     Name: "setthawut",
     ExamOrder: 1,
@@ -142,18 +202,37 @@ const rows = [
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
+    checkList:null
   },
-
-];
+]);
 const clickCancel = async () => {
   editvisible.value = false;
 };
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+    });
+  } else {
+    modal.value = false;
+  }
+};
 </script>
 <template>
   <q-form ref="myForm">
     <Table
       :rows="rows"
       :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
       v-model:editvisible="editvisible"
       :cancel="clickCancel"
       :history="true"
@@ -208,7 +287,7 @@ const clickCancel = async () => {
           </q-td>
           <q-td auto-width>
             <div v-if="props.row.Status === 'บรรจุเเล้ว'">
-                <div></div>
+              <div></div>
             </div>
             <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
               <q-btn
@@ -218,7 +297,6 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
-                
               />
               <q-btn
                 color="red"
@@ -227,11 +305,9 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                
               />
             </div>
             <div v-else align="right">
-
               <q-btn
                 color="red"
                 flat
@@ -239,7 +315,6 @@ const clickCancel = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                
               />
             </div>
           </q-td>
@@ -247,4 +322,25 @@ const clickCancel = async () => {
       </template>
     </Table>
   </q-form>
+    <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader
+          :tittle="`รายละเอียดของ`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+     text
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :save="clickSave"
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/modules/05_placement/components/PlacementTableView.vue b/src/modules/05_placement/components/PlacementTableView.vue
index 5e6687ca8..f8efb9b9d 100644
--- a/src/modules/05_placement/components/PlacementTableView.vue
+++ b/src/modules/05_placement/components/PlacementTableView.vue
@@ -1,425 +1,398 @@
 <template>
-    <div class="q-px-md q-pb-md">
-      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+  <div class="q-px-md q-pb-md">
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+      <q-btn
+        size="12px"
+        v-if="!editvisible"
+        flat
+        round
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
+        @click="clickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="editvisible"
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="clickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <div class="q-px-sm">
         <q-btn
-          v-if="!editvisible == true && publicNoBtn == false"
-          flat
-          round
-          :disabled="editvisible == true"
-          :color="editvisible == true ? 'grey-7' : 'primary'"
-          @click="edit"
-          icon="mdi-pencil-outline"
-        >
-        
-          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-        </q-btn>
-        <q-btn
-          v-else
           flat
           round
           :disabled="editvisible == false"
-          :outline="editvisible == false"
-          :color="editvisible == false ? 'grey-7' : 'red'"
-          @click="cancel()"
-          icon="mdi-undo"
+          :color="editvisible == false ? 'grey-7' : 'public'"
+          @click="add"
+          icon="mdi-content-save-outline"
         >
-          <q-tooltip>ยกเลิก</q-tooltip>
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
-        <div class="q-px-sm">
-          <q-btn
-            flat
-            round
-            :disabled="editvisible == false"
-            :color="editvisible == false ? 'grey-7' : 'public'"
-            @click="add"
-            icon="mdi-content-save-outline"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </div>
-
-
-  
-        <q-space />
-        <div class="items-center" style="display: flex">
-
-          <div
-            class="row items-center"
-            style="display: flex"
-            v-if="publicData == false && publicNoBtn == false"
-          >
-
-          </div>
-
-          <q-input
-            standout
-            dense
-            :model-value="inputfilter"
-            ref="filterRef"
-            @update:model-value="updateInput"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="inputfilter == ''" name="search" />
-              <q-icon
-                v-if="inputfilter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดง table ใน คอลัมน์ -->
-          <q-select
-            :model-value="inputvisible"
-            @update:model-value="updateVisible"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="attrs.columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
       </div>
-      <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
-      <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
-        <span class="text-subtitle1">{{ titleText }}</span>
-        <!-- <q-select
-          :model-value="inputvisibleFilter"
-          :options="optionsFilter"
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        /> -->
-        <q-select
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <div
+          class="row items-center"
+          style="display: flex"
+          v-if="publicData == false && publicNoBtn == false"
+        ></div>
+
+        <q-input
+          standout
           dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
           outlined
-          :model-value="inputvisibleFilter"
-          :options="optionsFilter"
-          class="col-xs-12 col-sm-4 col-md-3"
-          option-value="id"
-          option-label="name"
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+        <!-- แสดง table ใน คอลัมน์ -->
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
           map-options
           emit-value
-          @update:model-value="updateVisibleFilter"
-          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
         />
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            :model-value="inputfilter"
-            ref="filterRef"
-            @update:model-value="updateInput"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="inputfilter == ''" name="search" />
-              <q-icon
-                v-if="inputfilter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            :model-value="inputvisible"
-            @update:model-value="updateVisible"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="attrs.columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
       </div>
-      <q-table
-        ref="table"
-        flat
-        bordered
-        class="custom-header-table"
-        v-bind="attrs"
-        virtual-scroll
-        :virtual-scroll-sticky-size-start="48"
-        dense
-        :pagination-label="paginationLabel"
-        :pagination="initialPagination"
-        :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
-      >
-        <!-- :pagination="initialPagination" -->
-        <!-- :rows-per-page-options="[0]" -->
-        <template v-slot:header="props">
-          <q-tr :props="props">
-  
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th
-              auto-width
-              v-if="
-                editvisible == true || nextPageVisible == true || history == true
-              "
-            />
-            
-          </q-tr>
-          
-        </template>
-        <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
-        <template #body="props" >
-          <slot v-bind="props" name="columns"></slot>
-        </template>
-      </q-table>
     </div>
-    
-  </template>
-  <script setup lang="ts">
-  import { ref, useAttrs } from "vue";
-  import { useCounterMixin } from "@/stores/mixin";
-  import { useQuasar } from "quasar";
-  
-  const $q = useQuasar();
-  const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-  const { dialogMessage } = mixin;
-  
-  const attrs = ref<any>(useAttrs());
-  const table = ref<any>(null);
-  const filterRef = ref<any>(null);
-  const modalPublish = ref<boolean>(false);
-  const modalDelete = ref<boolean>(false);
-  const props = defineProps({
-    inputfilter: String,
-    inputvisible: Array,
-    inputvisibleFilter: String,
-    editvisible: Boolean,
-    titleText: String,
-    optionsFilter: {
-      type: Array,
-      defualt: [],
-    },
-    boss: {
-      type: Boolean,
-      defualt: false,
-    },
-    saveNoDraft: {
-      type: Boolean,
-      defualt: false,
-    },
-    history: {
-      type: Boolean,
-      defualt: false,
-    },
-    paging: {
-      type: Boolean,
-      defualt: false,
-    },
-    nornmalData: {
-      type: Boolean,
-      defualt: false,
-    },
-    nextPageVisible: {
-      type: Boolean,
-      defualt: false,
-    },
-    publicData: {
-      type: Boolean,
-      defualt: true,
-      required: false,
-    },
-    updateData: {
-      type: Boolean,
-      defualt: true,
-      required: false,
-    },
-    publicNoBtn: {
-      type: Boolean,
-      defualt: false,
-    },
-    add: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    edit: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    save: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    deleted: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    cancel: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    publish: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-    validate: {
-      type: Function,
-      default: () => console.log("not function"),
-    },
-  });
-  const initialPagination = ref<any>({
-    //   descending: false,
-    rowsPerPage: props.paging == true ? 25 : 0,
-  });
-  
-  const emit = defineEmits([
-    "update:inputfilter",
-    "update:inputvisible",
-    "update:editvisible",
-    "update:titleText",
-    "update:inputvisibleFilter",
-  ]);
-  
-  const updateEdit = (value: any) => {
-    emit("update:editvisible", value);
-  };
-  const updateInput = (value: any) => {
-    emit("update:inputfilter", value);
-  };
-  const updateVisible = (value: any) => {
-    emit("update:inputvisible", value);
-  };
-  const updateVisibleFilter = (value: any) => {
-    emit("update:inputvisibleFilter", value);
-  };
-  
-  const paginationLabel = (start: string, end: string, total: string) => {
-    if (props.paging == true)
-      return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-    else return start + "-" + end + " ใน " + total;
-  };
-  
-  const checkSave = () => {
-    props.validate();
-    props.save();
-    //   if (myForm.value !== null) {
-    //     myForm.value.validate().then((success) => {
-    //       if (success) {
-    //       }
-    //     });
-    //   }
-  };
-  
-  const publishModal = () => {
-    props.validate();
-    const filter = attrs.value.rows.filter((r: any) => r.name == "");
-  
-    if (filter.length == 0 || attrs.value.rows.length == 0) {
-      // modalPublish.value = true;
-      dialogMessage(
-        $q,
-        "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
-        "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
-        "public",
-        "เผยแพร่",
-        "public",
-        props.publish,
-        undefined
-      );
-    }
-  };
-  
-  const DeleteModal = () => {
-    //   modalDelete.value = true;
+
+    <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
+      <span class="text-subtitle1">{{ titleText }}</span>
+
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+        <!-- แสดงคอลัมน์ใน table -->
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      :pagination="initialPagination"
+      :rows-per-page-options="[0]"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width v-if="history == true" />
+        </q-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage } = mixin;
+const editvisible = ref<boolean>(false);
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const modalPublish = ref<boolean>(false);
+const modalDelete = ref<boolean>(false);
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  inputvisibleFilter: String,
+  editvisible: Boolean,
+  titleText: String,
+  optionsFilter: {
+    type: Array,
+    defualt: [],
+  },
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false,
+  },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  publish: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const initialPagination = ref<any>({
+  //   descending: false,
+  rowsPerPage: props.paging == true ? 25 : 0,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:titleText",
+  "update:inputvisibleFilter",
+]);
+
+const updateEdit = (value: any) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: any) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: any) => {
+  emit("update:inputvisible", value);
+};
+const updateVisibleFilter = (value: any) => {
+  emit("update:inputvisibleFilter", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+const clickEdit = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.edit();
+};
+const clickCancel = () => {
+  updateEdit(!props.editvisible);
+  editvisible.value = !editvisible.value;
+  props.cancel();
+};
+const publishModal = () => {
+  props.validate();
+  const filter = attrs.value.rows.filter((r: any) => r.name == "");
+
+  if (filter.length == 0 || attrs.value.rows.length == 0) {
+    // modalPublish.value = true;
     dialogMessage(
       $q,
-      "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
-      "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
-      "mdi-file-remove-outline",
-      "ลบบันทึก",
-      "red",
-      props.deleted,
+      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
+      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
+      "public",
+      "เผยแพร่",
+      "public",
+      props.publish,
       undefined
     );
-  };
-  
-  const edit = async () => {
-    updateEdit(!props.editvisible);
-    props.edit();
-  };
-  
-  const add = async () => {
-    //   if (myForm.value !== null) {
-    //     myForm.value.validate();
-    //   }
-    props.validate();
-    props.add();
-    await table.value.lastPage();
-    await table.value.scrollTo(attrs.value.rows.length - 1);
-  };
-  
-  const deleted = async () => {
-    // const deletedF = () => {
-    if (props.publicNoBtn === false) {
-      updateEdit(false);
-    }
-    props.deleted();
-  };
-  
-  const resetFilter = () => {
-    // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-    emit("update:inputfilter", "");
-    filterRef.value.focus();
-  };
-  </script>
-  <style lang="scss">
-  .icon-color {
-    color: #4154b3;
   }
-  .custom-header-table {
-    max-height: 64vh;
-    .q-table tr:nth-child(odd) td {
-      background: white;
-    }
-    .q-table tr:nth-child(even) td {
-      background: #f8f8f8;
-    }
-  
-    .q-table thead tr {
-      background: #ecebeb;
-    }
-  
-    .q-table thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-    /* this will be the loading indicator */
-    .q-table thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-    .q-table thead tr:first-child th {
-      top: 0;
-    }
+};
+
+const DeleteModal = () => {
+  //   modalDelete.value = true;
+  dialogMessage(
+    $q,
+    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
+    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
+    "mdi-file-remove-outline",
+    "ลบบันทึก",
+    "red",
+    props.deleted,
+    undefined
+  );
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const add = async () => {
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate();
+  //   }
+  props.validate();
+  props.add();
+  await table.value.lastPage();
+  await table.value.scrollTo(attrs.value.rows.length - 1);
+};
+
+const deleted = async () => {
+  // const deletedF = () => {
+  if (props.publicNoBtn === false) {
+    updateEdit(false);
   }
-  </style>
-  
\ No newline at end of file
+  props.deleted();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index ab12e8fd9..ceaa2bb80 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -1,5 +1,5 @@
 interface TableName {
-  position: string;
+  position: number;
   Name: string;
   ExamOrder: number;
   Unit: string;
@@ -10,20 +10,8 @@ interface TableName {
 
 }
 
-interface RequestReport2 {
-  organizationShortNameId: string;
-  organizationOrganizationId: string;
-  positionNumId: string;
-  positionTypeId: string;
-  positionExecutiveId: string;
-  positionExecutiveSideId: string;
-  positionPathId: string;
-  positionPathSideId: string;
-  positionLevelId: string;
-  status: string | null;
-}
 
 export type {
   TableName,
-  RequestReport2,
+
 };
\ No newline at end of file
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index ed479e584..5b83b8716 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -1,5 +1,32 @@
 import { defineStore } from "pinia";
-
+import { ref, computed } from "vue";
 export const useProfileDataStore = defineStore("placement", () => {
   return {};
 });
+export const usePlacementDataStore = defineStore("placement", () => {
+  interface placement {
+    mappingPosition: { columns: String[] };
+  }
+  const placementData = ref<placement>({
+    mappingPosition: { columns: [] },
+  });
+  const changePlacementColumns = (system: String, val: String[]) => {
+    if (system == "mappingPosition")
+      placementData.value.mappingPosition.columns = val;
+    localStorage.setItem(
+      "placement",
+      JSON.stringify(placementData.value)
+    );
+  };
+
+  if (localStorage.getItem("placement") !== null) {
+    placementData.value = JSON.parse(
+      localStorage.getItem("placement") || "{}"
+    );
+  }
+
+  return {
+    placementData,
+    changePlacementColumns,
+  };
+});