From dcf724d41d50dddbf60af18c340fe2f3a2c0a6c7 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 28 Jun 2023 09:40:33 +0700
Subject: [PATCH] =?UTF-8?q?update=20ui=20=E0=B8=9A=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=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    | 1085 ++++++++---------
 .../components/pass/TableView.vue             |   39 +-
 2 files changed, 543 insertions(+), 581 deletions(-)

diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index ce476e3e4..ed0613925 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -32,7 +32,7 @@ const editvisible = ref<boolean>(true);
 const myForm = ref<QForm | null>(null);
 const positionLineId = ref<string>();
 const positionId = ref<string>();
-const edit = ref<boolean>(false);
+const edit = ref<boolean>(true);
 const positionTypeId = ref<string>();
 const visibleColumns = ref<String[]>([]);
 const store = usePlacementDataStore();
@@ -67,7 +67,7 @@ const positionTypeOptionsFilter = ref<DataOption[]>([]);
 const positionLevelOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, messageError, showLoader, hideLoader } =
   mixin;
 const files = ref<File[]>([]);
 
@@ -310,17 +310,17 @@ const getClass = (val: boolean) => {
 };
 const selectData = (props: TableName) => {
   itemtest.value = props;
-  if (editvisible.value == true) {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = false;
-    edit.value = true;
-  } else {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = true;
-    edit.value = true;
-  }
+  // if (editvisible.value == true) {
+  // editRow.value = false;
+  // modalEdit.value = true;
+  // modal.value = false;
+  // edit.value = true;
+  // } else {
+  //   editRow.value = false;
+  //   modalEdit.value = true;
+  modal.value = true;
+  //   edit.value = true;
+  // }
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);
@@ -375,15 +375,15 @@ const editDetail = (
 };
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
-      "position",
-      "Name",
-      "ExamOrder",
-      "Unit",
-      "ReportingDate",
-      "BMAOfficer",
-      "Status",
-      "checkList",
-    ])
+    "position",
+    "Name",
+    "ExamOrder",
+    "Unit",
+    "ReportingDate",
+    "BMAOfficer",
+    "Status",
+    "checkList",
+  ])
   : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -1123,554 +1123,553 @@ const listKeyId = (data: any) => {
 };
 </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"
-        :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-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"
+          :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 == '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 }}
+              <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 == '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>
-              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                  <div
+                    v-if="props.row.Status == 'ยังไม่บรรจุ' ||
+                      props.row.Status == 'สละสิทธิ์'
+                      "
+                  >
+                    -
+                  </div>
+                  <div v-else>
+                    {{ props.row.UnitGroup }}
+                    <p>{{ col.value }}</p>
+                  </div>
+                </div>
                 <div
-                  v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-                    props.row.Status == 'สละสิทธิ์'
-                    "
+                  v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+                  class="table_ellipsis"
                 >
-                  -
+                  {{ mixin.date2Thai(col.value) }}
                 </div>
-                <div v-else>
-                  {{ props.row.UnitGroup }}
-                  <p>{{ col.value }}</p>
+                <div v-else class="table_ellipsis">
+                  {{ col.value }}
                 </div>
-              </div>
-              <div
-                v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-                class="table_ellipsis"
-              >
-                {{ mixin.date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                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-td>
+              <q-td auto-width>
+                <q-btn
+                  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"
-                            />
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <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 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>
-                        </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 == `ว่าง` ||
+                        </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%"
-                          />
-                          <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 />
-                        </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"
-                        >
-                          <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
+                            <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"
                             >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  :style="edit
+                              ว่าง
+                            </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 />
+                          </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"
+                          >
+                            <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-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>
 
-                      <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 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>
-                      <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-scroll-area>
+                  </q-card>
+                </div>
               </div>
-            </div>
-          </q-card-section>
+            </q-card-section>
 
-          <q-separator />
-          <DialogFooter
-            v-model:editvisible="edit"
-            v-model:modalEdit="modalEdit"
-            :save="saveAppoint"
-          />
-        </q-form>
-      </q-card>
-    </q-dialog>
+            <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" />
+      <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 ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+      <q-dialog v-model="modal_right" persistent>
+        <q-card style="width: 800px">
+                  <q-form ref="myForm">
           <DialogHeader
             :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
             :close="clickClose"
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index c07f87d36..55d7b1a30 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,43 +1,6 @@
 <template>
   <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
-          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> -->
-
+      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-space />
       <div class="items-center" style="display: flex">
         <div