Merge branch 'develop' into develop-tee

src/modules/03_recruiting/views/03_editor/index.vue

@@ -455,8 +455,8 @@
             lazy-rules
             :readonly="!editvisible"
             :borderless="!editvisible"
-            :rules="[(val) => !!val || `${'กรุณากรอก ฃื่อ'}`]"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            label="ฃื่อ"
+            label="ชื่อ"
           />
           <q-input
             v-model="inputLink"

src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue

@@ -568,6 +568,14 @@ const clickAdd = () => {
   router.push({ name: "OrderplacementDetail" });
 };
 
+// const viewDetail = (id: string, status: string) => {
+//   if (status == "checkPayment") {
+//     router.push(`${route.fullPath}/payment/${id}`);
+//   } else {
+//     router.push(`${route.fullPath}/profile/${id}`);
+//   }
+// };
+
 // เลือกปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);

src/modules/05_placement/components/OrderPlacement/step/step02.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="q-pa-sm" style="max-height: 68vh; overflow-y: scroll">
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-pb-sm items-center">
         <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
           <q-tooltip>อัปเดตข้อมูล</q-tooltip>
@@ -49,7 +49,6 @@
       <q-table
         flat
         bordered
-        dense
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"

src/modules/05_placement/components/OrderPlacement/step/step03.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-py-sm items-center">
         <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
@@ -713,7 +713,7 @@ const deleteData = async (id: string) => {};
   color: #4154b3;
 }
 .custom-header-table {
-  max-height: 64vh;
+  height: auto;
   .q-table tr:nth-child(odd) td {
     background: white;
   }

src/modules/05_placement/components/OrderPlacement/step/step04.vue

@@ -9,22 +9,24 @@
         <template v-slot:before>
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
-              <label>คำสั่ง</label>
+              <div class="q-pr-sm">คำสั่ง</div>
               <q-btn
                 size="12px"
                 flat
-                round
+                dense
                 icon="mdi-download"
                 :disable="tab !== 'main'"
                 :color="tab !== 'main' ? 'grey' : 'add'"
               >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
-                  <q-list style="min-width: 100px">
+                  <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -32,38 +34,40 @@
               </q-btn>
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
-              <label>เอกสารแนบท้าย</label>
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
               <q-btn
                 size="12px"
                 flat
-                round
+                dense
                 :color="tab !== 'second' ? 'grey' : 'add'"
                 icon="mdi-download"
                 :disable="tab !== 'second'"
               >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
-                  <q-list style="min-width: 100px">
+                  <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section>ไฟล์ .docx</q-item-section>
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                      <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
             </div>
           </div>
-          <div class="card-pdf q-ma-md q-pa-md">
+          <q-separator style="margin-top: -1px; z-index: 1;" />
-            <div class="q-pa-sm">
+          <q-card bordered class="card-pdf q-ma-md q-pa-md">
               <div
-                class="justify-between items-center align-center q-py-sm row"
+                class="justify-between items-center align-center q-pb-sm row"
               >
                 <q-btn
-                  class="text-grey"
+                  class="text-dark bg-grey-4"
-                  outline
+                  flat
-                  round
+                  dense
                   @click="page = page > 1 ? page - 1 : page"
                 >
                   <q-icon name="mdi-chevron-left" />
@@ -74,9 +78,9 @@
                 </span>
 
                 <q-btn
-                  class="text-grey"
+                  class="text-dark bg-grey-4"
-                  outline
+                  flat
-                  round
+                  dense
                   @click="page = page < numOfPages ? page + 1 : page"
                 >
                   <q-icon name="mdi-chevron-right" />
@@ -87,12 +91,12 @@
                 <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
               </div>
               <div
-                class="justify-between items-center align-center q-py-sm row"
+                class="justify-between items-center align-center q-pt-sm row"
               >
                 <q-btn
-                  class="text-grey"
+                  class="text-dark bg-grey-4"
-                  outline
+                  flat
-                  round
+                  dense
                   @click="page = page > 1 ? page - 1 : page"
                 >
                   <q-icon name="mdi-chevron-left" />
@@ -103,16 +107,15 @@
                 </span>
 
                 <q-btn
-                  class="text-grey"
+                  class="text-dark bg-grey-4"
-                  outline
+                  flat
-                  round
+                  dense
                   @click="page = page < numOfPages ? page + 1 : page"
                 >
                   <q-icon name="mdi-chevron-right" />
                 </q-btn>
               </div>
-            </div>
+          </q-card>
-          </div>
           <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
             <pdf-viewer v-model:PDFV="vuePDFRef" />
           </div> -->
@@ -134,9 +137,9 @@
         <template v-slot:after>
           <q-form ref="myForm">
             <div class="q-pa-md q-gutter-y-md">
-              <fieldset class="border q-pa-lg">
+              <fieldset class="border q-px-lg q-py-md">
-                <legend class="text-header">อัปโหลดไฟล์</legend>
+                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
-                <div class="q-gutter-y-lg">
+                <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
                     <q-file
@@ -144,6 +147,7 @@
                       dense
                       v-model="fileOrder"
                       label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
                       lazy-rules
                       :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     >
@@ -152,7 +156,6 @@
                       </template>
                     </q-file>
                   </div>
-                  <!-- <div class="q-py-lg" /> -->
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
                     <q-file
@@ -160,6 +163,7 @@
                       dense
                       v-model="fileTailer"
                       label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
                       lazy-rules
                       :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     >
@@ -171,9 +175,9 @@
                 </div>
               </fieldset>
 
-              <fieldset class="border q-pa-lg">
+              <fieldset class="border q-px-lg q-py-md">
-                <legend class="text-header">รายละเอียด</legend>
+                <legend class="text-header q-px-sm">รายละเอียด</legend>
-                <div class="q-gutter-y-md">
+                <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">เลขที่คำสั่ง</label>
                     <q-input
@@ -249,6 +253,7 @@
                           outlined
                           dense
                           class="full-width datepicker"
+                          hide-bottom-space
                           :model-value="date != null ? date2Thai(date) : null"
                           :label="`${'วันที่มีผลออกคำสั่ง'}`"
                           :rules="[
@@ -414,24 +419,26 @@ const setTab = (val: string) => {
 }
 .text-header {
   color: #34373c;
-  font-size: 1.2rem;
+  font-size: 1rem;
-  font-weight: normal;
+  font-weight: 300;
 }
 
 .text-file {
+  padding-top: 5px;
   color: #34373c;
-  font-size: 1.1rem;
+  font-weight: 500;
-  font-weight: bold;
 }
 
 .space {
-  background-color: #e9eaec;
+  background-color: #e9eaec61;
   display: flex;
+  z-index: 3;
 }
 
 .card-header {
   margin-top: 5px;
-  background-color: #e9eaec;
+  background-color: transparent;
+  padding: 2px !important;
   border-radius: 10px 10px 0px 0px;
   width: 200px;
   display: flex;
@@ -442,21 +449,23 @@ const setTab = (val: string) => {
 
 .card-header-active {
   margin-top: 5px;
+  margin-left: -1px;
   background-color: white;
+  padding: 2px !important;
   border-radius: 10px 10px 0px 0px;
   border: 1px solid #e9eaec;
   width: 200px;
   display: flex;
   justify-content: center;
   border-bottom-style: none;
-  font-weight: bold;
+  font-weight: 600;
   align-items: center;
 }
 
 .card-pdf {
   border-radius: 10px;
   border: 1px solid #e9eaec;
-  background-color: #e9eaec;
+  background-color: #e9eaec61;
   //   height: 60vh;
 }
 </style>

src/modules/05_placement/components/PersonalDetail/Information/Information.vue

@@ -905,7 +905,7 @@ const getClass = (val: boolean) => {
           />
         </div> -->
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-4 col-md-4"
           v-if="informaData.profileType == 'employee'"
         >
           <selector
@@ -933,7 +933,7 @@ const getClass = (val: boolean) => {
           />
         </div>
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-2 col-md-2"
           v-if="informaData.profileType == 'employee'"
         >
           <selector

src/modules/05_placement/components/pass/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,6 +9,7 @@ import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
+// import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
 import type {
   treeTab,
   DataOption,
@@ -16,6 +17,10 @@ import type {
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+import router from "@/router";
+
+let roleAdmin = ref<boolean>(false);
 
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal add detail
@@ -77,6 +82,7 @@ const $q = useQuasar(); // show dialog
 const positionLevelOptions = ref<any[]>([]);
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
+
 const fetchPosition = async () => {
   showLoader();
   await http
@@ -158,7 +164,7 @@ const fetchPosition = async () => {
       });
       // positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       hideLoader();
     });
@@ -290,8 +296,12 @@ const getClass = (val: boolean) => {
   };
 };
 const selectData = (props: TableName) => {
-  itemtest.value = props.personalId;
+  itemtest.value = props;
-  modal.value = true;
+  if (roleAdmin.value === true) {
+    modal.value = true;
+  } else {
+    router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
+  }
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);
@@ -346,15 +356,15 @@ const editDetail = (
 };
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
-      "position",
+    "position",
-      "Name",
+    "Name",
-      "ExamOrder",
+    "ExamOrder",
-      "Unit",
+    "Unit",
-      "ReportingDate",
+    "ReportingDate",
-      "BMAOfficer",
+    "BMAOfficer",
-      "Status",
+    "Status",
-      "checkList",
+    "checkList",
-    ])
+  ])
   : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -672,40 +682,40 @@ const rows = ref<TableName[]>([
       examResult: "ผ่าน",
     },
   },
-  {personalId:"",
+  // {
-    profileID: "401650002245",
+  //   profileID: "401650002245",
-    position: 7,
+  //   position: 7,
-    fullName: "นายอภินัน บอบู่",
+  //   fullName: "นายอภินัน บอบู่",
-    dateOfBirth: "17 ก.พ. 2535",
+  //   dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
+  //   gender: "ชาย",
-    ExamOrder: 7,
+  //   ExamOrder: 7,
-    unitId: "",
+  //   unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
+  //   UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.4)",
+  //   Unit: "นักทรัพยากรบุคคล (กบห.4)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
+  //   ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างชั่วคราว",
+  //   BMAOfficer: "ลูกจ้างชั่วคราว",
-    Status: "ขอผ่อนผัน",
+  //   Status: "ขอผ่อนผัน",
-    checkList: null,
+  //   checkList: null,
-    address:
+  //   address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
+  //     "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
+  //   university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
+  //   degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
+  //   major: "เทคโนโลยีการศึกษา",
-    remark: "-",
+  //   remark: "-",
-    number: 3,
+  //   number: 3,
-    examCount: 5,
+  //   examCount: 5,
-    scoreResult: {
+  //   scoreResult: {
-      scoreAFull: 200,
+  //     scoreAFull: 200,
-      scoreA: 133,
+  //     scoreA: 133,
-      scoreBFull: 200,
+  //     scoreBFull: 200,
-      scoreB: 149,
+  //     scoreB: 149,
-      scoreCFull: 100,
+  //     scoreCFull: 100,
-      scoreC: 0,
+  //     scoreC: 0,
-      scoreSumFull: 500,
+  //     scoreSumFull: 500,
-      scoreSum: 282,
+  //     scoreSum: 282,
-      examResult: "ผ่าน",
+  //     examResult: "ผ่าน",
-    },
+  //   },
-  },
+  // },
 ]);
 
 const refOptions = ref<DataOption[]>([
@@ -1012,6 +1022,13 @@ const save = () => {
   console.log("rows===>", rows.value);
 };
 onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin)
+
+
+  }
+
   await fetchPosition();
   await nodeTree();
   // await fetchData();
@@ -1058,186 +1075,104 @@ const listKeyId = (data: any) => {
     optionsLevel: positionLevelOptions.value,
   };
 };
+
+const expiredAccount = ref<boolean>(false);
+
+
+watch(expiredAccount, () => {
+  console.log("expiredAccount===>", expiredAccount.value);
+});
 </script>
 <template>
-  <q-form ref="myForm">
+  <!-- <q-form ref="myForm"> -->
-    <Table
+  <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
-      :rows="rows"
+    :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
-      :columns="columns"
+    v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
-      :filter="filter"
+    :saveNoDraft="true" :add="save" :role-admin="roleAdmin">
-      :visible-columns="visibleColumns"
+    <template #columns="props">
-      v-model:inputfilter="filter"
+      <q-tr :props="props">
-      v-model:inputvisible="visibleColumns"
+        <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
+        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-            v-for="col in props.cols"
+          class="cursor-pointer">
-            :key="col.name"
+          <div v-if="col.name == 'Name'" class="table_ellipsis">
-            :props="props"
+            {{ col.value }}
-            @click="selectData(props.row)"
+            <div class="row col-12 text-no-wrap items-center">
-            class="cursor-pointer"
+              <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 v-if="col.name == 'Name'" class="table_ellipsis">
+              <div class="col-4">
-              {{ col.value }}
+                <div class="text-weight-medium">
-              <div class="row col-12 text-no-wrap items-center">
+                  {{ props.row.fullName }}
-                <img
+                </div>
-                  v-if="props.row.avatar == null"
+                <div class="text-weight-light">
-                  src="@/assets/avatar_user.jpg"
+                  {{ props.row.profileID }}
-                  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>
-              <div
+          <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-                v-if="
+            <div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'ยังไม่บรรจุ' ||
+              props.row.Status == 'สละสิทธิ์'
-                  props.row.Status == 'สละสิทธิ์'
+              ">
-                "
+              -
-              >
-                -
-              </div>
-              <div v-else>
-                {{ props.row.UnitGroup }}
-                <p>{{ col.value }}</p>
-              </div>
             </div>
-            <div
+            <div v-else>
-              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+              {{ props.row.UnitGroup }}
-              class="table_ellipsis"
+              <p>{{ col.value }}</p>
-            >
-              {{ mixin.date2Thai(col.value) }}
             </div>
-            <div v-else class="table_ellipsis">
+          </div>
-              {{ col.value }}
+          <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
-            </div>
+            {{ mixin.date2Thai(col.value) }}
-          </q-td>
+          </div>
-          <q-td auto-width>
+          <div v-else class="table_ellipsis">
-            <q-btn
+            {{ col.value }}
-              v-if="
+          </div>
-                props.row.Status !== 'สละสิทธิ์' &&
+        </q-td>
-                props.row.Status !== 'บรรจุเเล้ว'
+        <q-td auto-width>
-              "
+          <q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
-              icon="mdi-dots-vertical"
+            props.row.Status !== 'บรรจุเเล้ว'
-              size="12px"
+            " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
-              color="grey-7"
+            <q-menu transition-show="jump-down" transition-hide="jump-up">
-              flat
+              <q-list dense style="min-width: 100px">
-              round
+                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-              dense
+                  @click="openAppointModal">
-            >
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-              <q-menu transition-show="jump-down" transition-hide="jump-up">
+                    <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
-                <q-list dense style="min-width: 100px">
+                  </q-item-section>
-                  <q-item
+                  <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                    v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                </q-item>
-                    clickable
+                <q-separator />
-                    v-close-popup
+                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-                    @click="openAppointModal"
+                  @click="editDetail(props.row, 'wait')">
-                  >
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-item-section
+                    <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
-                      style="min-width: 0px"
+                  </q-item-section>
-                      avatar
+                  <q-item-section>ขอผ่อนผัน</q-item-section>
-                      class="q-py-sm"
+                </q-item>
-                    >
+                <q-item v-else-if="props.row.Status === 'ขอผ่อนผัน'" clickable v-close-popup
-                      <q-icon
+                  @click="editDetail(props.row, 'waitInfo')">
-                        color="primary"
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        size="xs"
+                    <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
-                        name="mdi-bookmark-outline"
+                  </q-item-section>
-                      />
+                  <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                    </q-item-section>
+                </q-item>
-                    <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                <q-separator />
-                  </q-item>
+                <q-item v-if="props.row.Status === 'ยังไม่บรรจุ' ||
-                  <q-separator />
+                  props.row.Status === 'เตรียมบรรจุ'
-                  <q-item
+                  " clickable v-close-popup @click="editDetail(props.row, 'cancel')">
-                    v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    clickable
+                    <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                    v-close-popup
+                  </q-item-section>
-                    @click="editDetail(props.row, 'wait')"
+                  <q-item-section>สละสิทธิ์</q-item-section>
-                  >
+                </q-item>
-                    <q-item-section
+              </q-list>
-                      style="min-width: 0px"
+            </q-menu>
-                      avatar
+          </q-btn>
-                      class="q-py-sm"
+        </q-td>
-                    >
+      </q-tr>
-                      <q-icon
+    </template>
-                        color="blue"
+  </Table>
-                        size="xs"
+  <!-- </q-form> -->
-                        name="mdi-account-alert-outline"
-                      />
-                    </q-item-section>
-                    <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
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-details-outline"
-                      />
-                    </q-item-section>
-                    <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
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
-                    </q-item-section>
-                    <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>
@@ -1249,50 +1184,25 @@ const listKeyId = (data: any) => {
             <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
+                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
-                  <q-tree
+                  <q-tree no-transition ref="qtreeEdit" :nodes="nodesTree" node-key="keyId" @lazy-load="onLazyLoad" dense>
-                    no-transition
-                    ref="qtreeEdit"
-                    :nodes="nodesTree"
-                    node-key="keyId"
-                    @lazy-load="onLazyLoad"
-                    dense
-                  >
                     <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
                     <template v-slot:header-organization="prop">
                       <div class="col">
-                        <div
+                        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                          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
+                          <q-badge rounded color="grey-2" text-color="dark" :label="prop.node.totalPositionCount" />
-                            rounded
+                          <q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
-                            color="grey-2"
+                            :label="prop.node.totalPositionVacant" />
-                            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>
@@ -1305,51 +1215,31 @@ const listKeyId = (data: any) => {
                       </div>
                     </template>
                     <template v-slot:header-person="prop">
-                      <q-item
+                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
-                        clickable
+                        clickAction =
-                        :active="clickAction === prop.node.keyId"
+                        prop.node.name == `ว่าง` ||
-                        @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'
+                          ? listKeyId(prop)
-                            : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+                          : ''
-                        "
+                        " active-class="my-list-link text-primary text-weight-medium" :class="prop.node.name == `ว่าง` ||
-                      >
+      prop.node.name == `N/A` ||
-                        <img
+      prop.node.name == null
-                          v-if="
+      ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-                            prop.node.avatar == '' ||
+      : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-                            prop.node.avatar ==
+    ">
-                              'https://cdn.quasar.dev/img/boy-avatar.png'
+                        <img v-if="prop.node.avatar == '' ||
-                          "
+                          prop.node.avatar ==
-                          src="@/assets/avatar_user.jpg"
+                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                          class="col-xs-1 col-sm-2"
+                          " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
+                          style="width: 28px; height: 28px; border-radius: 50%" />
-                        />
+                        <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
-                        <img
+                          style="width: 28px; height: 28px; border-radius: 50%" />
-                          v-else
-                          :src="prop.node.avatar"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
                         <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div
+                        <div v-if="prop.node.name == `ว่าง` ||
-                          v-if="
+                          prop.node.name == `N/A` ||
-                            prop.node.name == `ว่าง` ||
+                          prop.node.name == null
-                            prop.node.name == `N/A` ||
+                          " class="q-px-sm text-weight-medium text-red">
-                            prop.node.name == null
-                          "
-                          class="q-px-sm text-weight-medium text-red"
-                        >
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
@@ -1374,13 +1264,8 @@ const listKeyId = (data: any) => {
                         <div class="q-pr-sm">
                           {{ prop.node.positionLevel }}
                         </div>
-                        <q-icon
+                        <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
-                          v-if="prop.node.positionLeaderFlag"
+                          name="mdi-bookmark"></q-icon>
-                          class="q-mr-sm"
-                          size="15px"
-                          color="primary"
-                          name="mdi-bookmark"
-                        ></q-icon>
 
                         <q-space />
                       </q-item>
@@ -1395,46 +1280,24 @@ const listKeyId = (data: any) => {
                   <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
+                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                        menu-class-name="modalfix"
+                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
-                        :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
+                          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                            :class="getClass(edit)"
+                            :model-value="date2Thai(date)" :rules="[
-                            :outlined="edit"
+                              (val: string) =>
-                            dense
+                                !!val ||
-                            lazy-rules
+                                `${'วันที่รายงานตัว'}`,
-                            :borderless="!edit"
+                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                                (val: string) =>
-                                  !!val ||
-                                  `${'วันที่รายงานตัว'}`,
-                              ]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
                             <template v-slot:prepend>
-                              <q-icon
+                              <q-icon name="event" class="cursor-pointer" :style="edit
-                                name="event"
+                                  ? 'color: var(--q-primary)'
-                                class="cursor-pointer"
+                                  : 'color: var(--q-grey)'
-                                :style="
+                                ">
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -1443,145 +1306,58 @@ const listKeyId = (data: any) => {
                     </div>
                     <q-space />
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input disable standout readonly class="custom-input" dense lazy-rules v-model="posNoId"
-                        disable
+                        :label="`${'เลขที่ตำแหน่ง'}`" />
-                        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
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionId"
-                        disable
+                        :label="`${'ตำแหน่ง'}`" />
-                        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-select
+                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        :class="getClass(edit)"
+                        dense hide-bottom-space lazy-rules v-model="positionPathSideId"
-                        :outlined="edit"
+                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]" :label="`${'ด้าน/สาขา'}`" />
-                        :readonly="!edit"
-                        class="custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :rules="[(val:string) => !!val || `${'ด้าน/สาขา'}`]"
-                        :label="`${'ด้าน/สาขา'}`"
-                      />
                     </div>
                     <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionTypeId"
-                        disable
+                        :label="`${'ประเภทตำแหน่ง'}`" />
-                        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
+                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionLineId"
-                        disable
+                        :label="`${'สายงาน'}`" />
-                        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-select
+                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        :class="getClass(edit)"
+                        dense lazy-rules :options="positionLevelOptions" v-model="positionLevelId" :label="`${'ระดับ'}`"
-                        :outlined="edit"
+                        hide-bottom-space :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
-                        :readonly="!edit"
+                        map-options />
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
                     </div>
                     <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="amount" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :outlined="edit"
+                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionSalaryAmount" :rules="[
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
                           (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
+                        ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow" type="number"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        hide-bottom-space />
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="mouthSalaryAmount" :rules="[
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :rules="[
                           (val) =>
                             !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
+                        ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow" type="number"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        hide-bottom-space />
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -1591,87 +1367,47 @@ const listKeyId = (data: any) => {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter
+        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
-          v-model:editvisible="edit"
+          :save="saveAppoint" />
-          :validate="validateData"
-          v-model:modalEdit="modalEdit"
-          :save="saveAppoint"
-        />
       </q-form>
     </q-card>
   </q-dialog>
   <q-form ref="myForm">
-    <DialogCard
+    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" :validate="validateData" />
-      v-model:Modal="modal"
-      :getdetail="itemtest"
-      :close="clickClose"
-      :validate="validateData"
-    />
   </q-form>
   <q-dialog v-model="modal_right" persistent>
-  <q-card style="width: 800px">
+    <q-card style="width: 800px">
 
-    <q-form ref="myForm">
+      <q-form ref="myForm">
-      <DialogHeader
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
-        :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+        <q-separator />
-        :close="clickClose"
+        <q-card-section class="q-p-sm">
-      />
+          <div class="col-xs-12 col-sm-12 col-md-12">
-      <q-separator />
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
-      <q-card-section class="q-p-sm">
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit"
-        <div class="col-xs-12 col-sm-12 col-md-12">
+              v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow"
-          <q-input
+              type="textarea" />
-            :class="getClass(edit)"
+            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
-            hide-bottom-space
+              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
-            :outlined="edit"
+              @update:model-value="clickEditRow" class="q-py-sm">
-            dense
+              <template v-slot:prepend>
-            lazy-rules
+                <q-icon name="attach_file" color="primary" />
-            :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              </template>
-            :readonly="!edit"
+            </q-file>
-            :borderless="!edit"
+          </div>
-            v-model="positionMasterUserNote"
+        </q-card-section>
-            :label="`${'กรอกเหตุผล'}`"
+        <q-separator />
-            @update:model-value="clickEditRow"
+        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
-            
+          :save="modalEdit ? savePostpone : saveDisclaim" />
-            type="textarea"
+      </q-form>
-          />
+    </q-card>
-          <q-file
-            v-if="getNumFile === 1"
-            v-model="files"
-            dense
-            :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-            outlined
-            use-chips
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            multiple
-            @update:model-value="clickEditRow"
-            class="q-py-sm"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <DialogFooter
-        v-model:editvisible="edit"
-        v-model:modalEdit="modalEdit"
-        :validate="validateData"
-        :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"
+      <q-form ref="myForm">
-        >สละสิทธิ์
+        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row">
@@ -1681,14 +1417,7 @@ const listKeyId = (data: any) => {
           <div class="row q-pt-md">
             <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
             <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
-            <q-btn
+            <q-btn color="primary" flat dense round size="14px" icon="mdi-download" />
-              color="primary"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-download"
-            />
           </div>
         </q-card-section>
         <q-separator />
@@ -1701,6 +1430,7 @@ const listKeyId = (data: any) => {
 .custom-input {
   font-size: 16px;
 }
+
 .my-list-link {
   border-radius: 5px;
 
@@ -1712,6 +1442,7 @@ const listKeyId = (data: any) => {
   margin-bottom: 0;
   color: #818181;
 }
+
 .img-info {
   width: 30px !important;
   height: 30px !important;

src/modules/05_placement/components/pass/TableView.vue

@@ -1,132 +1,30 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+    <div class="col-12 row q-py-sm">
+      <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+        :model-value="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ" @update:model-value="updateExpiredAccount" />
+
       <q-space />
       <div class="items-center" style="display: flex">
-        <div
+        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
-          class="row items-center"
+          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
-          style="display: flex"
-          v-if="publicData == false && publicNoBtn == false"
-        ></div>
-
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
+            <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
           </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
-        <q-select
+        <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
-          :model-value="inputvisible"
+          multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
-          @update:model-value="updateVisible"
+          style="min-width: 150px" class="gt-xs q-ml-sm" />
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
       </div>
     </div>
 
-    <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
+    <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
-      <span class="text-subtitle1">{{ titleText }}</span>
+      :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
-      <q-btn
-        flat
-        round
-        color="primary"
-        @click="refresh"
-        icon="mdi-refresh"
-        v-if="props.refreshBtn"
-      >
-        <q-tooltip>อัปเดตข้อมูล</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <!-- ค้นหาข้อความใน table -->
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
-          <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
-      </div>
-    </div>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      v-model:pagination="pagination"
-    >
       <template v-slot:pagination="scope">
-        <q-pagination
+        <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-          v-model="pagination.page"
+          boundary-links direction-links></q-pagination>
-          color="primary"
-          :max="scope.pagesNumber"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
       </template>
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -142,6 +40,7 @@
     </q-table>
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -240,6 +139,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  expiredAccount: Boolean,
+  roleAdmin: Boolean
 });
 const pagination = ref({
   sortBy: "desc",
@@ -263,11 +164,9 @@ const emit = defineEmits([
   "update:editvisible",
   "update:titleText",
   "update:inputvisibleFilter",
+  "update:expiredaccountfilter"
 ]);
 
-const updateEdit = (value: any) => {
-  emit("update:editvisible", value);
-};
 const updateInput = (value: any) => {
   emit("update:inputfilter", value);
 };
@@ -278,6 +177,10 @@ const updateVisibleFilter = (value: any) => {
   emit("update:inputvisibleFilter", value);
 };
 
+const updateExpiredAccount = (value: any) => {
+  emit("update:expiredaccountfilter", value);
+};
+
 const checkSave = () => {
   props.validate();
   props.save();
@@ -288,71 +191,6 @@ const checkSave = () => {
   //     });
   //   }
 };
-const clickEdit = () => {
-  updateEdit(!props.editvisible);
-  editvisible.value = !editvisible.value;
-  props.edit();
-};
-const clickCancel = () => {
-  updateEdit(!props.editvisible);
-  editvisible.value = !editvisible.value;
-  props.cancel();
-};
-const publishModal = () => {
-  props.validate();
-  const filter = attrs.value.rows.filter((r: any) => r.name == "");
-
-  if (filter.length == 0 || attrs.value.rows.length == 0) {
-    // modalPublish.value = true;
-    dialogMessage(
-      $q,
-      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
-      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
-      "public",
-      "เผยแพร่",
-      "public",
-      props.publish,
-      undefined
-    );
-  }
-};
-
-const DeleteModal = () => {
-  //   modalDelete.value = true;
-  dialogMessage(
-    $q,
-    "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
-    "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
-    "mdi-file-remove-outline",
-    "ลบบันทึก",
-    "red",
-    props.deleted,
-    undefined
-  );
-};
-
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const add = async () => {
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate();
-  //   }
-  props.validate();
-  props.add();
-  await table.value.lastPage();
-  await table.value.scrollTo(attrs.value.rows.length - 1);
-};
-
-const deleted = async () => {
-  // const deletedF = () => {
-  if (props.publicNoBtn === false) {
-    updateEdit(false);
-  }
-  props.deleted();
-};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา

src/modules/08_registryEmployee/router.ts

@@ -8,7 +8,7 @@ const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
 
 export default [
   {
-    path: "/registryEmployee",
+    path: "/registry-employee",
     name: "registryEmployee",
     component: Main,
     meta: {

src/modules/08_registryEmployee/views/Main.vue

@@ -112,7 +112,7 @@
                 dense
               >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 100px">
+                  <q-list dense style="min-width: 150px">
                     <q-item
                       clickable
                       v-close-popup
@@ -166,6 +166,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import router from "@/router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QInput, QForm } from "quasar";
@@ -528,7 +529,7 @@ const clickClose = async () => {
 };
 
 const clickAdd = () => {
-  modal.value = true;
+  router.push({ name: "" });
 };
 
 const clickDelete = (id: string) => {