From 5144effebd9442df3e7991b360ea291bb2442662 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 26 Jun 2023 16:34:41 +0700
Subject: [PATCH] =?UTF-8?q?update=20ui=20=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/pass/Table.vue    | 1261 ++++++++---------
 .../components/pass/TableView.vue             |    4 +-
 .../interface/request/placement.ts            |   20 +-
 3 files changed, 602 insertions(+), 683 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 139c95389..ce476e3e4 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -28,7 +28,7 @@ const positionLevelId = ref<string>();
 const date = ref<Date>(new Date());
 const expanded = ref<string[]>([]);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const editvisible = ref<boolean>(false);
+const editvisible = ref<boolean>(true);
 const myForm = ref<QForm | null>(null);
 const positionLineId = ref<string>();
 const positionId = ref<string>();
@@ -175,9 +175,9 @@ const fetchOrganization = async (id: string) => {
 };
 const templateDetail = async () => {
   await fetchOrganization(selected.value);
-  
+
   salaryClass.value = "";
-  
+
   if (ocId.value != "") {
     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
   }
@@ -268,19 +268,19 @@ const appoint = ref<any>({
 
 const saveAppoint = () => {
   const dataAppoint = {
-    date : date.value,
+    date: date.value,
     posNoId: posNoId.value,
     positionId: positionId.value,
     positionPathSideId: positionPathSideId.value,
     positionTypeId: positionTypeId.value,
     positionLineId: positionLineId.value,
     positionLevelId: positionLevelId.value,
-    amount : amount.value,
-    positionSalaryAmount : positionSalaryAmount.value,
-    mouthSalaryAmount : mouthSalaryAmount.value,
-    salaryClass : salaryClass.value,
-    refSelected : refSelected.value,
-    salaryRef : salaryRef.value
+    amount: amount.value,
+    positionSalaryAmount: positionSalaryAmount.value,
+    mouthSalaryAmount: mouthSalaryAmount.value,
+    salaryClass: salaryClass.value,
+    refSelected: refSelected.value,
+    salaryRef: salaryRef.value,
   };
   console.log("save appoint===>", dataAppoint);
 };
@@ -439,8 +439,8 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "center",
-    label: "ข้าราชการฯ กทม.",
+    align: "left",
+    label: "สถานภาพ",
     sortable: true,
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
@@ -471,7 +471,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "-", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "สละสิทธิ์",
     checkList: null,
     address:
@@ -505,7 +505,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: false,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -539,7 +539,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -574,7 +574,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.1)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างประจำ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -609,7 +609,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.2)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -643,7 +643,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.3)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -677,7 +677,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "บรรจุเเล้ว",
     checkList: null,
     address:
@@ -711,7 +711,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ขอผ่อนผัน",
     checkList: null,
     address:
@@ -968,9 +968,9 @@ const refOptionsFilter = ref<DataOption[]>([
 ]);
 const itemtest = ref<object>({});
 
-const clickCancel = async () => {
-  editvisible.value = false;
-};
+// const clickCancel = async () => {
+//   editvisible.value = false;
+// };
 
 const openAppointModal = (value: any) => {
   appointModal.value = true;
@@ -1131,675 +1131,594 @@ const listKeyId = (data: any) => {
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      :cancel="clickCancel"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :add="save"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-icon
-            class="q-mr-sm"
-            size="15px"
-            color="primary"
-            name="mdi-bookmark"
-            v-if="props.row.isDirector"
-          ></q-icon>
+        v-model:editvisible="editvisible"
+        :history="true"
+        :boss="true"
+        :saveNoDraft="true"
+        :add="save"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-icon
+              class="q-mr-sm"
+              size="15px"
+              color="primary"
+              name="mdi-bookmark"
+              v-if="props.row.isDirector"
+            ></q-icon>
 
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
-              <div>
-                <q-icon
-                  v-if="col.value == false"
-                  name="mdi-close"
-                  color="grey-5"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </div>
-            </div>
-            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
-              {{ col.value }}
-              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
-                <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{ props.row.fullName }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.profileID }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                <div @click="openAppointModal">
-                  <q-input
-                    hide-bottom-space
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="props.row.Unit"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="mdi-bookmark-plus-outline"
-                        color="primary"
-                      />
-                    </template>
-                  </q-input>
-                </div>
-              </div>
-              <div
-                v-else-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
-              >
-                -
-              </div>
-              <div v-else>
-                {{ props.row.UnitGroup }}
-                <p>{{ col.value }}</p>
-              </div>
-            </div>
-            <div
-              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-              class="table_ellipsis"
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props.row)"
+              class="cursor-pointer"
             >
-              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                <datepicker
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  v-model="props.row.ReportingDate"
+              <div v-if="col.name == 'Name'" class="table_ellipsis">
+                {{ col.value }}
+                <div class="row col-12 text-no-wrap items-center">
+                  <img
+                    v-if="props.row.avatar == null"
+                    src="@/assets/avatar_user.jpg"
+                    class="col-4 img-info"
+                  />
+                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.fullName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.profileID }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                <div
+                  v-if="props.row.Status == 'ยังไม่บรรจุ' ||
+                    props.row.Status == 'สละสิทธิ์'
+                    "
                 >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      hide-bottom-space
-                      outlined
-                      dense
-                      lazy-rules
-                      :model-value="mixin.date2Thai(col.value)"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                  -
+                </div>
+                <div v-else>
+                  {{ props.row.UnitGroup }}
+                  <p>{{ col.value }}</p>
+                </div>
               </div>
               <div
-                v-else-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
+                v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+                class="table_ellipsis"
               >
-                -
-              </div>
-              <div v-else>
                 {{ mixin.date2Thai(col.value) }}
               </div>
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <div
-              v-if="
-                props.row.Status === 'บรรจุเเล้ว' ||
-                props.row.Status === 'สละสิทธิ์'
-              "
-            >
-              <div></div>
-            </div>
-            <div v-else-if="props.row.Status === 'ขอผ่อนผัน'">
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                color="blue"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-information-outline"
-                @click="editDetail(props.row, 'waitInfo')"
-              />
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
-              <q-btn
-                color="blue"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-alert"
-                @click="editDetail(props.row, 'wait')"
-              />
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-            <div v-else align="right">
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </Table>
-  </q-form>
+                v-if="props.row.Status !== 'สละสิทธิ์' &&
+                  props.row.Status !== 'บรรจุเเล้ว'
+                  "
+                icon="density_medium"
+                size="xs"
+              >
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list style="min-width: 100px">
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="openAppointModal"
+                    >
+                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'wait')"
+                    >
+                      <q-item-section>ขอผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-else-if="props.row.Status === 'ขอผ่อนผัน'"
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'waitInfo')"
+                    >
+                      <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ' ||
+                        props.row.Status === 'เตรียมบรรจุ'
+                        "
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'cancel')"
+                    >
+                      <q-item-section>สละสิทธิ์</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </q-form>
 
-  <q-dialog v-model="appointModal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    no-transition
-                    ref="qtreeEdit"
-                    :nodes="nodesTree"
-                    node-key="keyId"
-                    @lazy-load="onLazyLoad"
-                    dense
-                  >
-                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                    <template v-slot:header-organization="prop">
-                      <div class="col">
-                        <div
-                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                        >
-                          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                          <div class="text-weight-medium">
-                            {{ prop.node.organizationName }}
+    <q-dialog v-model="appointModal" persistent full-width>
+      <q-card>
+        <q-form ref="myForm">
+          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+          <q-separator />
+          <q-card-section class="q-pa-sm bg-grey-1">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-card flat bordered class="fit q-pa-sm">
+                  <q-scroll-area visible style="height: 70vh">
+                    <q-input
+                      outlined
+                      dense
+                      v-model="search"
+                      placeholder="ค้นหา"
+                      class="q-mb-sm"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="mdi-magnify" />
+                      </template>
+                    </q-input>
+                    <q-tree
+                      no-transition
+                      ref="qtreeEdit"
+                      :nodes="nodesTree"
+                      node-key="keyId"
+                      @lazy-load="onLazyLoad"
+                      dense
+                    >
+                      <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <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
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
+
+                            <q-space />
                           </div>
-
-                          <!--แสดง Total Count PositionNum-->
-                          <q-badge
-                            rounded
-                            color="grey-2"
-                            text-color="dark"
-                            :label="prop.node.totalPositionCount"
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="clickAction === prop.node.keyId"
+                          @click="
+                            clickAction =
+                            prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              ? listKeyId(prop)
+                              : ''
+                            "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          :class="prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
+                              : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+                            "
+                        >
+                          <img
+                            v-if="prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                              'https://cdn.quasar.dev/img/boy-avatar.png'
+                              "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="width: 28px; height: 28px; border-radius: 50%"
                           />
-                          <q-badge
-                            v-if="prop.node.totalPositionVacant > 0"
-                            rounded
-                            color="red"
-                            outline
-                            :label="prop.node.totalPositionVacant"
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="width: 28px; height: 28px; border-radius: 50%"
                           />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              "
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div class="q-px-sm text-weight-medium text-primary">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
 
                           <q-space />
-                        </div>
-                        <div class="col items-center q-px-xs q-pt-xs">
-                          <div class="text-weight-medium text-grey-7">
-                            {{ prop.node.governmentCode }}
-                            {{ prop.node.organizationShortName }}
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                    <template v-slot:header-person="prop">
-                      <q-item
-                        clickable
-                        :active="clickAction === prop.node.keyId"
-                        @click="clickAction = listKeyId(prop)"
-                        active-class="my-list-link text-primary text-weight-medium"
-                        class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                      >
-                        <img
-                          v-if="
-                            prop.node.avatar == '' ||
-                            prop.node.avatar ==
-                              'https://cdn.quasar.dev/img/boy-avatar.png'
-                          "
-                          src="@/assets/avatar_user.jpg"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
-                        <img
-                          v-else
-                          :src="prop.node.avatar"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
-                        <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div
-                          v-if="
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                          "
-                          class="q-px-sm text-weight-medium text-red"
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </q-scroll-area>
+                </q-card>
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <q-card flat bordered class="fit q-pa-sm">
+                  <q-scroll-area visible style="height: 70vh">
+                    <div class="row col-12 q-col-gutter-xs">
+                      <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          :readonly="!edit"
+                          v-model="date"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          @update:modelValue="clickEditRow"
+                          week-start="0"
                         >
-                          ว่าง
-                        </div>
-                        <!--=====หัวหน้า สีเขียว=====-->
-                        <div v-else-if="prop.node.positionLeaderFlag">
-                          <div class="q-px-sm text-weight-medium text-primary">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--=====ลูกน้อง สีปกติ=====-->
-                        <div v-else>
-                          <div class="q-px-sm text-weight-medium">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionName }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionNum }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionLevel }}
-                        </div>
-                        <q-icon
-                          v-if="prop.node.positionLeaderFlag"
-                          class="q-mr-sm"
-                          size="15px"
-                          color="primary"
-                          name="mdi-bookmark"
-                        ></q-icon>
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              :class="getClass(edit)"
+                              :outlined="edit"
+                              dense
+                              lazy-rules
+                              :borderless="!edit"
+                              :model-value="date2Thai(date)"
+                              :rules="[
+                                (val: string) =>
+                                  !!val ||
+                                  `${'วันที่รายงานตัว'}`,
+                              ]"
+                              :label="`${'วันที่รายงานตัว'}`"
+                              hide-bottom-space
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  :style="edit
+                                      ? 'color: var(--q-primary)'
+                                      : 'color: var(--q-grey)'
+                                    "
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          standout
+                          readonly
+                          class="custom-input"
+                          dense
+                          lazy-rules
+                          v-model="posNoId"
+                          :label="`${'เลขที่ตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionId"
+                          :label="`${'ตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionPathSideId"
+                          :label="`${'ด้าน/สาขา'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionTypeId"
+                          :label="`${'ประเภทตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionLineId"
+                          :label="`${'สายงาน'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionLevelId"
+                          :label="`${'ระดับ'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6"></div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="amount"
+                          :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                          :label="`${'เงินเดือน'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="positionSalaryAmount"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                          ]"
+                          :label="`${'เงินประจำตำแหน่ง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="mouthSalaryAmount"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                          ]"
+                          :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryClass"
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                          ]"
+                          :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                          @update:modelValue="clickEditRow"
+                          hide-bottom-space
+                          autogrow
+                        >
+                          <template v-slot:append>
+                            <q-btn
+                              color="info"
+                              flat
+                              dense
+                              round
+                              size="14px"
+                              icon="mdi-plus"
+                              @click="templateDetail"
+                              :disable="!edit"
+                            />
+                          </template>
+                        </q-input>
+                      </div>
 
-                        <q-space />
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
+                      <div class="row col-xs-12 col-sm-12 col-md-12">
+                        <selector
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="refSelected"
+                          :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRowRef"
+                          option-label="name"
+                          :options="refOptions"
+                          option-value="id"
+                          hide-bottom-space
+                          use-input
+                          input-debounce="0"
+                          @filter="(inputValue: any,
+                            doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                            )"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryRef"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                          ]"
+                          :label="`${'เอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="textarea"
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
+                  </q-scroll-area>
+                </q-card>
+              </div>
             </div>
-            <div class="col-xs-12 col-sm-6">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            :class="getClass(edit)"
-                            :outlined="edit"
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                              (val:string) =>
-                                !!val ||
-                                `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
-                            ]"
-                            :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                :style="
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        standout
-                        readonly
-                        class="custom-input"
-                        dense
-                        lazy-rules
-                        v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLineId"
-                        :label="`${'สายงาน'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLevelId"
-                        :label="`${'ระดับ'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6"></div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
+          </q-card-section>
 
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                        ]"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
+          <q-separator />
+          <DialogFooter
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+            :save="saveAppoint"
+          />
+        </q-form>
+      </q-card>
+    </q-dialog>
+
+    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
+
+    <q-dialog v-model="modal_right" persistent>
+      <q-card style="width: 800px">
+        <q-form ref="myForm">
+          <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+          <DialogHeader
+            :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+            :close="clickClose"
+          />
+          <q-separator />
+          <q-card-section class="q-p-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionMasterUserNote"
+                :label="`${'กรอกเหตุผล'}`"
+                @update:modelValue="clickEditRow"
+                type="textarea"
+              />
+              <q-file
+                v-if="getNumFile == 1"
+                v-model="files"
+                dense
+                :label="'เลือกไฟล์เอกสารหลักฐาน'"
+                outlined
+                use-chips
+                multiple
+                class="q-py-sm"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :save="saveAppoint"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
-
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile == 1"
-              v-model="files"
-              dense
-              :label="'เลือกไฟล์เอกสารหลักฐาน'"
-              outlined
-              use-chips
-              multiple
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :save="modalEdit ? savePostpone : saveDisclaim"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+            :save="modalEdit ? savePostpone : saveDisclaim"
+          />
+        </q-form>
+      </q-card>
+    </q-dialog>
 
+    <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 79e3c0d1a..c07f87d36 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn
+          <!-- <q-btn
         size="12px"
         v-if="!editvisible"
         flat
@@ -36,7 +36,7 @@
         >
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
-      </div>
+      </div> -->
 
       <q-space />
       <div class="items-center" style="display: flex">
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 199265b2a..541e5ccb7 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -9,7 +9,7 @@ interface TableName {
   UnitGroup: string;
   Unit: string;
   ReportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: boolean;
+  BMAOfficer: string;
   Status: string;
   checkList: any;
   address: string;
@@ -20,15 +20,15 @@ interface TableName {
   number: number;
   examCount: number;
   scoreResult: {
-      scoreAFull:number
-      scoreA: number;
-      scoreBFull: number;
-      scoreB: number;
-      scoreCFull: number;
-      scoreC: number;
-      scoreSumFull: number;
-      scoreSum: number;
-      examResult: string;
+    scoreAFull: number;
+    scoreA: number;
+    scoreBFull: number;
+    scoreB: number;
+    scoreCFull: number;
+    scoreC: number;
+    scoreSumFull: number;
+    scoreSum: number;
+    examResult: string;
   };
 }