Merge branch 'develop' into dev-tee

src/api/05_placement/api.placement.ts

@@ -3,6 +3,7 @@ const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
 const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
+const transfer = `${placement}/transfer`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -63,47 +64,37 @@ export default {
   nextStep: (orderId: string) => `${order}/order/next/${orderId}`,
   prevStep: (orderId: string) => `${order}/order/prev/${orderId}`,
   executeOrder: (orderId: string) => `${order}/order/execute/${orderId}`,
-
   createOrder: () => `${order}/order/detail`,
-
   examroundOrder: () => `${order}/order/detail/exam-round`,
-
+  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`, //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
-  //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
+  personsselectedOrder: (orderId: string) =>
-  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
+    `${order}/order/persons-selected/${orderId}`,
-  personsselectedOrder: (orderId: string) => `${order}/order/persons-selected/${orderId}`,
+  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-
+  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
-  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`,
-
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
-  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`,
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
   swapDownOrder: (personalId: string) =>
-    `${order}/order/swap/down/${personalId}`,
+    `${order}/order/swap/down/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
-
+  salaryOrder: (id: string) => `${order}/order/salary/${id}`, //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
-  //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
+  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`, // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
-  salaryOrder: (id: string) => `${order}/order/salary/${id}`,
-
-  // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
-  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`,
-
   copyOrder: `${order}/order/copy-order`,
-
   copyOrderId: (id: string) => `${order}/order/copy-order/${id}`,
-
   attachmentId: (id: string) => `${order}/order/attachment/${id}`,
-
   attachmentOrderId: (orderId: string) =>
     `${order}/order/attachment/order-file/${orderId}`,
   attachmentFileId: (orderId: string) =>
     `${order}/order/attachment/file/${orderId}`,
-
   orderReady: (id: string) => `${order}/order/ready/${id}`,
   attachmentOrder: (orderId: string) => `${order}/order/attachment/${orderId}`,
 
+  //receive ระบบรับโอน
   receiveData: () => `${receive}`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
+
+  //tranfer ระบบคำขอโอน
+  transfer,
+  transferId: (id: string) => `${transfer}/${id}`,
+  transferUser: `${transfer}/user`,
+  transferUserId: (id: string) => `${transfer}/user/${id}`,
+  transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
 };

src/interface/request/main/main.ts

@@ -111,6 +111,22 @@ const menuList = readonly<any[]>([
     path: "registry",
     role: "registry",
   },
+  {
+    key: 10,
+    icon: "o_contact_page",
+    activeIcon: "registry_employee_page",
+    label: "ทะเบียนประวัติลูกจ้าง",
+    path: "registry-employee",
+    role: "registryEmployee",
+  },
+  {
+    key: 10,
+    icon: "o_list",
+    activeIcon: "order",
+    label: "ออกคำสั่ง",
+    path: "order",
+    role: "placement",
+  },
   {
     key: 5,
     icon: "o_search",
@@ -192,12 +208,12 @@ const menuList = readonly<any[]>([
         path: "placement",
         role: "placement",
       },
-      {
+      // {
-        key: 6.2,
+      //   key: 6.2,
-        label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
+      //   label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
-        path: "Orderplacement",
+      //   path: "Orderplacement",
-        role: "placement",
+      //   role: "placement",
-      },
+      // },
       {
         key: 6.3,
         label: "การทดลองงาน" /* การทดลองงาน */,
@@ -206,7 +222,7 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.4,
-        label: "รายการคำขอโอน" /* */,
+        label: "รายการขอโอน" /* */,
         path: "transfer",
         role: "placement",
       },
@@ -218,13 +234,36 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.6,
-        label: "คำสั่งช่วยราชการ/ส่งตัวกลับ" /* */,
+        label: "รายการช่วยราชการ" /* */,
-        path: "repatriation-order",
+        path: "help-government",
+        role: "placement",
+      },
+      {
+        key: 6.7,
+        label: "รายการส่งตัวกลับ" /* */,
+        path: "repatriate",
+        role: "placement",
+      },
+      {
+        key: 6.8,
+        label: "รายการแต่งตั้ง-เลื่อน" /* */,
+        path: "appoint-promote",
+        role: "placement",
+      },
+      {
+        key: 6.9,
+        label: "รายการย้าย" /* */,
+        path: "move-list",
+        role: "placement",
+      },
+      {
+        key: 6.10,
+        label: "รายการอื่นๆ" /* */,
+        path: "other",
         role: "placement",
       },
     ],
   },
-
   {
     key: 7,
     icon: "mdi-account-cancel-outline",
@@ -241,31 +280,43 @@ const menuList = readonly<any[]>([
       },
       {
         key: 7.2,
-        label: "ลาออก",
+        label: "รายการลาออก",
         path: "resign",
         role: "retirement",
       },
+      // {
+      //   key: 7.3,
+      //   label: "คำสั่งลาออก",
+      //   path: "resign-order",
+      //   role: "retirement",
+      // },
       {
         key: 7.3,
-        label: "คำสั่งลาออก",
-        path: "resign-order",
-        role: "retirement",
-      },
-      {
-        key: 7.4,
         label: "Exit interview",
         // path: "",
         role: "retirement",
       },
       {
-        key: 7.5,
+        key: 7.4,
-        label: "ถึงแก่กรรม",
+        label: "รายการบันทึกการถึงแก่กรรม",
         path: "deceased",
         role: "retirement",
       },
+      {
+        key: 7.5,
+        label: "รายการให้ออก",
+        path: "dismiss-order",
+        role: "retirement",
+      },
       {
         key: 7.6,
-        label: "คำสั่งให้ออก ปลดออก ไล่ออก",
+        label: "รายการปลดออก",
+        path: "dismiss-order",
+        role: "retirement",
+      },
+      {
+        key: 7.7,
+        label: "รายการไล่ออก",
         path: "dismiss-order",
         role: "retirement",
       },
@@ -363,14 +414,6 @@ const menuList = readonly<any[]>([
       },
     ],
   },
-  {
-    key: 10,
-    icon: "o_contact_page",
-    activeIcon: "contact_page",
-    label: "ทะเบียนประวัติลูกจ้าง",
-    path: "registryEmployee",
-    role: "registryEmployee",
-  },
 ]);
 
 const tabList = readonly<tabType[]>([

src/modules/04_registry/components/Profile.vue

@@ -154,33 +154,63 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="pink-5" icon="mdi-file-document">
+        <q-btn round flat color="blue" icon="mdi-file-document">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ช่วยราชการ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ส่งตัวกลับ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ย้าย</q-item-section>
+              </q-item>
+              <q-separator />
               <q-item clickable v-close-popup @click="clickPassaway">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>อื่นๆ</q-item-section>
+              </q-item>
+              <q-separator />
             </q-list>
           </q-menu>
         </q-btn>
@@ -986,8 +1016,8 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
-const clickaddOrder = () => {
+const postAdd = () => {
-  router.push("/dismiss-order/add");
+  // router.push("/dismiss-order/add");
 };
 
 const downloadKP7 = () => {};

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

@@ -372,7 +372,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -602,7 +601,14 @@ const putSalary = async (salary: any) => {
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -656,18 +662,25 @@ const saveModalAdd = () => {
   }
 };
 const addlist = async (data: Object) => {
-  await http
+  const id = route.params.orderid
-    .post(config.API.personsOrder(orderId.value), data)
+    ? route.params.orderid.toString()
-    .then(() => {
+    : localStorage.getItem("orderId")
-      success($q, "บันทึกสำเร็จ");
+    ? localStorage.getItem("orderId")
-    })
+    : null;
-    .catch((e: any) => {
+  if (id !== null) {
-      console.log(e);
+    await http
-      messageError($q, e);
+      .post(config.API.personsOrder(id), data)
-    })
+      .then(() => {
-    .finally(() => {
+        success($q, "บันทึกสำเร็จ");
-      modalAddChange();
+      })
-    });
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {

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

@@ -1140,7 +1140,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งรายชื่อ"
           @click="savelist"
           :disable="checkSelected"
           color="public"

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

@@ -625,7 +625,7 @@ const nextPage = (row: any) => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งไปออกคำสั่ง"
           @click=""
           :disable="checkSelected"
           color="public"

src/modules/05_placement/components/Transfer/transferMain.vue

@@ -1,38 +1,32 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
 const selected = ref([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
   }
 });
-const clickClose = () => {
-  modal.value = false;
-};
 
 const $q = useQuasar();
-const modal = ref<boolean>(false);
-const popup = () => {
-  modal.value = true;
-};
 const router = useRouter();
-const pagination = ref({
+const mixin = useCounterMixin();
-  sortBy: "desc",
+
-  descending: false,
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
-  page: 1,
+
-  rowsPerPage: 10,
+const modal = ref<boolean>(false);
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -63,53 +57,7 @@ const resetFilter = () => {
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };
-const rows = ref<any>([
+const rows = ref<ResponseData[]>([]);
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
 const rows2 = ref<any>([
   {
     personalId: "0a846508-4932-40de-9a9e-5b519492217c",
@@ -287,6 +235,49 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transfer)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          reason: r.id ?? "",
+          salary: r.salary !== null ? r.salary : 0,
+          status: r.status ?? "",
+        });
+      });
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@@ -296,7 +287,7 @@ const columns2 = ref<QTableProps["columns"]>([
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="popup()"
+            @click="openModal"
             size="14px"
             flat
             round
@@ -346,20 +337,12 @@ const columns2 = ref<QTableProps["columns"]>([
         </div>
 
         <div class="col-12 q-pt-sm">
-          <q-table
+          <d-table
-            ref="table"
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
+            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -372,7 +355,7 @@ const columns2 = ref<QTableProps["columns"]>([
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="router.push(`/transfer/${props.row.personalId}`)"
+                @click="router.push(`/transfer/${props.row.id}`)"
               >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
@@ -397,19 +380,7 @@ const columns2 = ref<QTableProps["columns"]>([
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
+          </d-table>
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
         </div>
       </div>
     </div>
@@ -417,7 +388,7 @@ const columns2 = ref<QTableProps["columns"]>([
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -432,15 +403,15 @@ const columns2 = ref<QTableProps["columns"]>([
                 placeholder="ค้นหา"
                 style="width: 850px; max-width: auto"
               >
-              <template v-slot:append>
+                <template v-slot:append>
-              <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
+                  <q-icon
-                v-if="filterKeyword2 !== ''"
+                    v-if="filterKeyword2 !== ''"
-                name="clear"
+                    name="clear"
-                class="cursor-pointer"
+                    class="cursor-pointer"
-                @click="resetFilter"
+                    @click="resetFilter"
-              />
+                  />
-            </template>
+                </template>
               </q-input>
               <q-select
                 v-model="visibleColumns2"
@@ -461,26 +432,17 @@ const columns2 = ref<QTableProps["columns"]>([
           </div>
         </div>
 
-        <q-table
+        <d-table
-          ref="tableRef"
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
           row-key="personalId"
-          flat
-          bordered
-          :paging="true"
-          dense
           class="custom-header-table"
           :visible-columns="visibleColumns2"
-          :pagination-label="paginationLabel"
           selection="multiple"
-          v-model:pagination="pagination"
           v-model:selected="selected"
-
         >
-
+          <template v-slot:header-selection="scope">
-        <template v-slot:header-selection="scope">
             <q-checkbox
               keep-color
               color="primary"
@@ -497,10 +459,7 @@ const columns2 = ref<QTableProps["columns"]>([
             />
           </template> -->
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props" class="cursor-pointer">
-              :props="props"
-              class="cursor-pointer"
-            >
               <q-td>
                 <q-checkbox
                   keep-color
@@ -532,23 +491,12 @@ const columns2 = ref<QTableProps["columns"]>([
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
+        </d-table>
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งไปออกคำสั่ง"
           @click=""
           :disable="checkSelected"
           color="public"
@@ -557,35 +505,4 @@ const columns2 = ref<QTableProps["columns"]>([
     </q-card>
   </q-dialog>
 </template>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -35,19 +35,25 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">{{ position }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ level }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">{{ institution }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
           </div>
         </div>
       </div>
@@ -59,16 +65,17 @@
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
       <q-btn
-      v-if="!roleAdmin"
+        v-if="!roleAdmin"
         outline
         color="primary"
         dense
         icon-right="arrow_forward"
         class="q-px-sm"
         label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
       />
       <q-btn
-      v-else
+        v-else
         outline
         color="primary"
         dense
@@ -83,13 +90,17 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
-            <div class="col-12 text-detail">{{ organization }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
-            <div class="col-12 text-detail">{{ reason }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
           </div>
         </div>
       </div>
@@ -102,12 +113,10 @@
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="col-12">
-      <q-table
+      <d-table
-        flat
-        bordered
         :rows="rows"
         :columns="columns"
-        row-key="name"
+        row-key="fileName"
         hide-header
         hide-bottom
       >
@@ -116,40 +125,56 @@
             <q-td key="no" :props="props">
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="noteTitle" :props="props">
+            <q-td key="fileName" :props="props">
-              {{ props.row.noteTitle }}
+              {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat
+              <q-btn flat dense round color="red" icon="picture_as_pdf">
-								dense
-								round
-                color="red" 
-                icon="picture_as_pdf">
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
-              <q-btn flat
+              <q-btn flat dense round color="blue" icon="mdi-file-word">
-								dense
-								round
-                color="blue" 
-                icon="mdi-file-word">
                 <q-tooltip>ไฟล์ WORD</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
         </template>
-      </q-table>
+      </d-table>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-let roleAdmin = ref<boolean>(false);
+import type { QTableProps } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/05_placement/interface/response/Transfer";
 
+const $q = useQuasar();
+const route = useRoute();
 const router = useRouter();
+const mixin = useCounterMixin();
+
+const personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+
 const name = ref<string>("นายสมคิด ยอดใจ");
 const position = ref<string>("นักจัดการงานทั่วไป");
 const level = ref<string>("ชำนาญการพิเศษ");
@@ -157,17 +182,23 @@ const institution = ref<string>("ฝ่ายบริหารงานทั
 const status = ref<string>("อยู่ระหว่างการทดลองงาน");
 const organization = ref<string>("ก.ก.");
 const reason = ref<string>("เพราะxxx");
-const route = useRoute();
+
-const personId = route.params.id;
+const responseData = ref<ResponseDataDetail>({
-const rows = [
+  createdAt: new Date(),
-  {
+  date: new Date(),
-    noteTitle: "ชื่อเอกสาร",
+  id: "",
-  },
+  organization: "",
-  {
+  organizationPositionOld: "",
-    noteTitle: "ชื่อเอกสาร",
+  positionLevelOld: "",
-  },
+  positionNumberOld: "",
-];
+  positionTypeOld: "",
-const columns = [
+  reason: "",
+  salary: 0,
+  status: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -178,11 +209,11 @@ const columns = [
     style: "font-size: 14px",
   },
   {
-    name: "noteTitle",
+    name: "fileName",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ชื่อไฟล์",
     sortable: true,
-    field: "noteTitle",
+    field: "fileName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -195,14 +226,84 @@ const columns = [
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-];
+]);
 
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
-      roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-      console.log("roleAdmin===>", roleAdmin.value);
+    console.log("roleAdmin===>", roleAdmin.value);
-    }
+  }
-  });
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferUserId(personId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+        rows.value = list;
+        responseData.value.createdAt = data.createdAt;
+        responseData.value.date = new Date();
+        responseData.value.id = data.id ?? "";
+        responseData.value.organization = data.organization ?? "";
+        responseData.value.organizationPositionOld =
+          data.organizationPositionOld ?? "";
+        responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+        responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+        responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+        responseData.value.reason = data.reason ?? "";
+        responseData.value.salary = data.salary !== null ? data.salary : 0;
+        responseData.value.status = data.status ?? "";
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const confirmMessage = async () => {
+  dialogMessage(
+    $q,
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+    "mdi-help-circle-outline",
+    "ยืนยัน",
+    "primary",
+    () => sendConfirm(),
+    undefined
+  );
+};
+
+const sendConfirm = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferConfirmId(personId.toString()))
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -217,34 +318,4 @@ onMounted(async () => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>

src/modules/05_placement/interface/response/Transfer.ts

@@ -0,0 +1,38 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  isActive: boolean;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };

src/modules/05_placement/router.ts

@@ -8,18 +8,6 @@ const PlacementDetail = () =>
   import("@/modules/05_placement/components/PersonalList/Detail.vue");
 const PlacementPersonalDetail = () =>
   import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
-const addOrderPlacement = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
-  );
-const MainOrderPlacement = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue"
-  );
-const detailOrderReplace = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
-  );
 
 // ระบบทดลองงาน
 const mainProbation = () =>
@@ -86,46 +74,6 @@ export default [
       Role: "placement",
     },
   },
-  {
-    path: "/placement/order",
-    name: "Orderplacement",
-    component: MainOrderPlacement,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/order/add",
-    name: "Orderplacementadd",
-    component: detailOrderReplace,
-    meta: {
-      Auth: true,
-      Key: [6.9],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/order/detail/:orderid",
-    name: "OrderplacementDetail",
-    component: detailOrderReplace,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/addOrderPlacement",
-    name: "addOrderPlacement",
-    component: addOrderPlacement,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
   {
     path: "/probation",
     name: "probation",

src/modules/07_insignia/components/1_Proposals/addProposals.vue

@@ -158,10 +158,10 @@
                   label="อัปโหลดเอกสารประกอบ"
                   hide-bottom-space
                   lazy-rules
-                  :rules="[
-                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                  ]"
                 >
+                  <!-- :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]" -->
                   <template v-slot:prepend>
                     <q-icon name="attach_file" />
                   </template>
@@ -261,7 +261,7 @@ const editData = async (id: string) => {
   const formData = new FormData();
   formData.append("Name", roundInsig.value);
   formData.append("year", parseInt(yearly.value).toString());
-  formData.append("amount", datelast.value.toString());
+  formData.append("Amount", datelast.value.toString());
   if (dateStart.value !== null) {
     formData.append("startDate", dateToISO(dateStart.value));
   }
@@ -275,13 +275,14 @@ const editData = async (id: string) => {
   console.log(formData);
   showLoader();
   await http
-    .put(config.API.editRoundInsignia(id))
+    .put(config.API.editRoundInsignia(id), formData)
     .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       hideLoader();
+      clickBack();
     });
   console.log(formData);
 };

src/modules/08_registryEmployee/router.ts

@@ -17,8 +17,8 @@ const EditDetail = defineAsyncComponent(
 
 export default [
   {
-    path: "/registryEmployee",
+    path: "/registry-employee",
-    name: "registryEmployee",
+    name: "registry-employee",
     component: Main,
     meta: {
       Auth: true,
@@ -37,7 +37,7 @@ export default [
   //     },
   //   },
   {
-    path: "/registryEmployee/add",
+    path: "/registry-employee/add",
     name: "registryEmployeeAdd",
     component: Detail,
     meta: {
@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/edit/:id",
+    path: "/registry-employee/edit/:id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {

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

@@ -1343,7 +1343,7 @@ const modalOpenClose = () => {
 };
 
 const next = (id: string) => {
-  router.push(`/registryEmployee/${id}`);
+  router.push(`/registry-employee/${id}`);
 };
 
 const resetFilter = () => {
@@ -1381,13 +1381,13 @@ const clickClose = async () => {
 const clickAdd = () => {
   //   modal.value = true;
 
-  router.push(`/registryEmployee/add`);
+  router.push(`/registry-employee/add`);
   //   router.push(`/placement/detail`);
 };
 
 // ดูรายการแก้ไขรายชื่อ
 const redirectToPage = (id?: string) => {
-  router.push(`/registryEmployee/edit/${id}`);
+  router.push(`/registry-employee/edit/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

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

@@ -1112,7 +1112,7 @@ const saveData = async () => {
 };
 
 const clickBack = () => {
-  router.push({ name: "registryEmployee" });
+  router.push("/registry-employee");
 };
 
 const getClass = (val: boolean) => {

src/modules/09_coin/components/1_Proposals/addProposals.vue

@@ -158,10 +158,10 @@
                   label="อัปโหลดเอกสารประกอบ"
                   hide-bottom-space
                   lazy-rules
-                  :rules="[
-                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                  ]"
                 >
+                  <!-- :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]" -->
                   <template v-slot:prepend>
                     <q-icon name="attach_file" />
                   </template>
@@ -297,7 +297,7 @@ const editData = async (id: string) => {
   console.log(formData);
   showLoader();
   await http
-    .put(config.API.editRoundInsignia(id))
+    .put(config.API.editRoundInsignia(id), formData)
     .then(async () => {
       await uploadDocData();
     })
@@ -306,6 +306,7 @@ const editData = async (id: string) => {
     })
     .finally(async () => {
       hideLoader();
+      clickBack();
     });
   console.log(formData);
 };

src/modules/10_order/components/Detail.vue

@@ -24,7 +24,6 @@
 import { useRouter } from "vue-router";
 import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import type { QStepper } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -32,24 +31,22 @@ const route = useRoute();
 
 
 const orderId_params = route.params.orderid;
-const probationData = useProbationDataStore();
-const { stepOrder, setStepOrder } = probationData;
 
 const step01 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step01.vue")
+    import("@/modules/10_order/components/step/step01.vue")
 );
 const step02 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step02.vue")
+    import("@/modules/10_order/components/step/step02.vue")
 );
 const step03 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step03.vue")
+    import("@/modules/10_order/components/step/step03.vue")
 );
 const step04 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step04.vue")
+    import("@/modules/10_order/components/step/step04.vue")
 );
 
 const router = useRouter();

src/modules/10_order/components/Main.vue

@@ -4,33 +4,12 @@
     <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
       <div class="row q-col-gutter-sm">
         <div class="row col-12 q-col-gutter-sm">
-          <q-select
+          <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
-            class="col-xs-12 col-sm-3 col-md-2"
+            map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
-            v-model="fiscalyear"
+            :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-            label="ปีงบประมาณ"
+            @update:model-value="searchFilterTable" />
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            @update:model-value="searchFilterTable"
-          />
           <div>
-            <q-btn
+            <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
-              size="12px"
-              flat
-              round
-              color="add"
-              icon="mdi-plus"
-              @click="clickAdd"
-            >
               <q-tooltip>เพิ่มข้อมูล</q-tooltip>
               <!-- <q-menu>
                 <q-list style="min-width: 100px">
@@ -48,102 +27,36 @@
           </div>
           <q-space />
 
-          <q-input
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            class="col-xs-12 col-sm-3 col-md-2"
+            debounce="300" placeholder="ค้นหา">
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
             </template>
           </q-input>
 
-          <q-select
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            v-model="visibleColumns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            multiple
+            class="col-xs-12 col-sm-3 col-md-2" />
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2"
-          />
         </div>
         <div class="col-12">
           <q-card bordered class="col-12 filter-card q-pa-sm">
             <div class="row col-12 q-col-gutter-sm">
-              <q-select
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
-                class="col-xs-12 col-sm-3 col-md-2"
+                map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
-                v-model="OrderType"
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                label="ประเภท"
+                @update:model-value="searchFilterTable" />
-                dense
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
-                emit-value
+                map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
-                map-options
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                option-label="name"
+                @update:model-value="searchFilterTable" />
-                :options="OrderTypeOption"
-                option-value="name"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="name"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
             </div>
           </q-card>
         </div>
         <div class="col-12">
-          <q-table
+          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
-            ref="table"
+            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-            :columns="columns"
+            :pagination-label="paginationLabel" v-model:pagination="pagination">
-            :rows="UpdataData"
-            :filter="filterKeyword"
-            row-key="Order"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -153,11 +66,8 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
+              <q-tr :props="props" class="cursor-pointer"
-                :props="props"
+                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
-                class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
-              >
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
                 </q-td>
@@ -180,31 +90,16 @@
                   {{ props.row.OrderStatus }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
+                  <q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
-                    dense
+                    icon="mdi-delete">
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click.stop="clickDelete(props.row.orderId)"
-                    icon="mdi-delete"
-                  >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
-              <q-pagination
+              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                v-model="pagination.page"
+                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
             </template>
           </q-table>
         </div>
@@ -216,13 +111,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, useAttrs, computed } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
 import type {
   DataOption,
   DataOption1,
-} from "@/modules/05_placement/interface/index/Main";
+} from "@/modules/10_order/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
-import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -400,22 +295,22 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: string, status?: string) => {
- let step = 1;
+  let step = 1;
   switch (status) {
     case 'จัดทำร่างคำสั่ง':
       step = 1;
       break;
-      case 'บัญชีแนบท้าย':
+    case 'บัญชีแนบท้าย':
       step = 2;
       break;
-      case 'เลือกผู้ได้รับสำเนาคำสั่ง':
+    case 'เลือกผู้ได้รับสำเนาคำสั่ง':
       step = 3;
       break;
-      case 'รอผู้มีอำนาจลงนาม':
+    default:
       step = 4;
       break;
   }
-  router.push(`/placement/order/detail/${id}?step=${step}`);
+  router.push(`/order/detail/${id}?step=${step}`);
 };
 
 const clickDelete = (id: string) => {
@@ -431,8 +326,8 @@ const clickDelete = (id: string) => {
     .onOk(async () => {
       await deleteData(id);
     })
-    .onCancel(() => {})
+    .onCancel(() => { })
-    .onDismiss(() => {});
+    .onDismiss(() => { });
 };
 
 const deleteData = async (id: string) => {
@@ -452,7 +347,7 @@ const deleteData = async (id: string) => {
 };
 
 const clickAdd = () => {
-  router.push({ name: "Orderplacementadd" });
+  router.push({ name: "OrderAdd" });
 };
 
 // const viewDetail = (id: string, status: string) => {

src/modules/10_order/components/step/step02.vue

@@ -0,0 +1,728 @@
+div
+<template>
+  <div>
+    <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-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+
+            <q-th auto-width />
+            <q-th auto-width />
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectModal(props.row)"
+              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+            >
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="upDown(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="upDown(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="dialogDeleteData(props.row.personalId)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="กรอกรายละเอียด"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="save"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+  <!--********************************** เงินเดือน ********************************** -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
+        <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">
+              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    :label="`${'เงินเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                    ]" -->
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                    ]" -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModal"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!--********************************** รายชื่อ ********************************** -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <d-table
+            :rows="rows2"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+                >
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { QInput } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+
+const route = useRoute();
+const $q = useQuasar();
+
+const modalData = ref<any>({
+  salaryAmount: 0,
+  positionSalaryAmount: 0,
+  mouthSalaryAmount: 0,
+});
+const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const titleName = ref<string>("");
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "education",
+    align: "left",
+    label: "วุฒิการศึกษาในการออกคำสั่ง",
+    field: "education",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const selected = ref<ResponseData[]>([]);
+const orderId = ref<string>(route.params.orderid.toString());
+
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personalId: r.personalId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+          refRecordId: r.refRecordId,
+        });
+      });
+      //   console.log("list", list);
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// const saveSalary = async (id: string) => {
+//   await http
+//     .put(config.API.salaryOrder(id))
+//     .then((res) => {
+//       //   const data = res.data.result;
+//       //   console.log(res);
+//       success($q, "บันทึกข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
+const dialogDeleteData = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  const indexCurrent = value.rowIndex;
+  if (up) {
+    await swapUp(value.row.personalId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
+    // rows.value[indexCurrent - 1] = value.row;
+  } else {
+    await swapDown(value.row.personalId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
+    // rows.value[indexCurrent + 1] = value.row;
+  }
+};
+
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        putSalary(modalData.value);
+      }
+    });
+  }
+};
+const personalId = ref<string>("");
+const selectModal = (e: any) => {
+  console.log(e);
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  // modalData.value = {
+  //   salaryAmount: 0,
+  //   positionSalaryAmount: 0,
+  //   mouthSalaryAmount: 0,
+  // };
+
+  modalOpenClose(e.personalId);
+};
+
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    titleName.value = "";
+  }
+  if (modal.value == true) {
+    await fetchSalary(personalId);
+  }
+};
+const fetchSalary = async (personalId: string) => {
+  console.log(personalId);
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      console.log(res);
+      let salary = res.data.result;
+      modalData.value = {
+        salaryAmount: salary.salaryAmount,
+        positionSalaryAmount: salary.positionSalaryAmount,
+        mouthSalaryAmount: salary.monthSalaryAmount,
+      };
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const putSalary = async (salary: any) => {
+  modalData.value = {
+    salaryAmount: Number(salary.salaryAmount),
+    positionSalaryAmount: Number(salary.positionSalaryAmount),
+    monthSalaryAmount: Number(salary.mouthSalaryAmount),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  }).onOk(async () => {
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then((res: any) => {
+        console.log(res);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+      });
+  });
+};
+
+const modalAddChange = async () => {
+  modalAdd.value = !modalAdd.value;
+  if (modalAdd.value == true) {
+    await fetchaddlist(orderId.value);
+  } else await conditionData();
+};
+const fetchaddlist = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list = [];
+      list = data.map((r: ResponseData) => ({
+        education: r.education ?? "",
+        idCard: r.idCard ?? "",
+        name: r.name ?? "",
+        personalId: r.personalId ?? "",
+        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+        sequence: r.sequence !== null ? r.sequence : 0,
+        refRecordId: r.refRecordId,
+      }));
+      rows2.value = list;
+      selected.value = rows.value;
+      // rows2.value = list.filter((e: any) => e.selectStatus === false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result && selected.value.length !== 0) {
+        $q.dialog({
+          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          cancel: {
+            flat: true,
+            color: "negative",
+          },
+          persistent: true,
+        }).onOk(async () => {
+          let data = [];
+          data.push(...selected.value.map((e: any) => e.refRecordId));
+          // console.log(data);
+          addlist(data);
+        });
+      }
+    });
+  }
+};
+const addlist = async (data: Object) => {
+  await http
+    .post(config.API.personsOrder(orderId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      modalAddChange();
+    });
+};
+
+const click = (e: any) => {
+  console.log(e);
+  console.log(rows.value.length);
+};
+
+const save = () => {
+  if (selected.value.length > 0) {
+    $q.dialog({
+      title: "ยืนยันการบันทึกข้อมูล",
+      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else {
+    dialogMessage(
+      $q,
+      "ข้อความแจ้งเตือน",
+      "กรุณาเลือกรายชื่อ",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+const selectData = (row: any) => {};
+
+const refresh = async () => {
+  // await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss"></style>

src/modules/10_order/components/step/step04.vue

@@ -1,36 +1,22 @@
 <template>
   <div>
     <div style="min-height: 70vh">
-      <q-splitter
+      <q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
         <template v-slot:before>
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn
+              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
-                size="12px"
+                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
-                flat
-                dense
-                icon="mdi-download"
-                :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'"
-              >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                        ><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-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -39,27 +25,17 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn
+              <q-btn v-show="TailerPDF == ''" size="12px" flat dense
-                size="12px"
+                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
-                flat
-                dense
-                :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download"
-                :disable="tab !== 'second'"
-              >
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                        ><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-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
@@ -67,24 +43,12 @@
               </q-btn>
             </div>
             <q-space />
-            <q-btn
+            <q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
           </div>
           <q-separator style="margin-top: -1px; z-index: 1" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
             <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -92,12 +56,7 @@
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -106,12 +65,7 @@
               <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
             </div>
             <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -119,12 +73,7 @@
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -132,12 +81,7 @@
         </template>
 
         <template v-slot:separator>
-          <q-avatar
+          <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
         </template>
 
         <template v-slot:after>
@@ -148,15 +92,8 @@
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">คำสั่ง</label>
-                    <q-file
+                    <q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
-                      outlined
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
-                      dense
-                      v-model="fileOrder"
-                      label="เลือกไฟล์คำสั่ง"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -164,15 +101,8 @@
                   </div>
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
-                    <q-file
+                    <q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
-                      outlined
+                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']">
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -186,51 +116,24 @@
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">เลขที่คำสั่ง</label>
-                    <q-input
+                    <q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
-                      :outlined="true"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
-                      dense
+                      :label="`${'เลขที่คำสั่ง'}`" />
-                      lazy-rules
-                      :readonly="!true"
-                      :borderless="!true"
-                      v-model="order"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                    />
                   </div>
                   <div>
                     <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker
+                    <datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
-                      menu-class-name="modalfix"
+                      :enableTimePicker="false" week-start="0">
-                      v-model="years"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
                         parseInt(value + 543)
                       }}</template>
                       <template #trigger>
-                        <q-input
+                        <q-input outlined dense lazy-rules :model-value="years + 543" :rules="[
-                          outlined
+                          (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          dense
+                        ]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
-                          lazy-rules
-                          :model-value="years + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่ออกคำสั่ง'}`"
-                        >
                           <template v-slot:prepend>
-                            <q-icon
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
                             </q-icon>
                           </template>
                         </q-input>
@@ -239,15 +142,8 @@
                   </div>
                   <div>
                     <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
+                    <datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
-                      menu-class-name="modalfix"
+                      :enableTimePicker="false" week-start="0">
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -255,24 +151,13 @@
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input
+                        <q-input outlined dense class="full-width datepicker" hide-bottom-space
-                          outlined
+                          :model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
-                          dense
-                          class="full-width datepicker"
-                          hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null"
-                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                          :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                          ]"
+                          ]">
-                        >
                           <template v-slot:prepend>
-                            <q-icon
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
                             </q-icon>
                           </template>
                         </q-input>
@@ -282,20 +167,9 @@
                 </div>
               </fieldset>
               <div class="flex justify-around">
-                <q-btn
+                <q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
-                  unelevated
+                  :disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
-                  label="ออกคำสั่ง"
+                <q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="statusOrder == 'N'"
-                  @click="clickExecute(orderId)"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  :disable="statusOrder == 'N'"
-                />
               </div>
             </div>
           </q-form>
@@ -304,23 +178,11 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
+      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md"
-        dense
+        label="เลือกรายชื่อส่งสำเนา">
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา"
-      >
       </q-btn>
-      <q-btn
+      <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
-        unelevated
+        @click="save">
-        label="บันทึก"
-        :color="validateForm() ? 'public' : 'grey'"
-        :disable="!validateForm()"
-        @click="save"
-      >
       </q-btn>
 
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
@@ -328,13 +190,7 @@
         </q-btn> -->
     </div>
 
-    <q-dialog
+    <q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
       <q-card class="bg-white text-white">
         <!-- <q-bar>
             <q-space />
@@ -345,24 +201,12 @@
           </q-bar> -->
 
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
-            icon="close"
+            v-close-popup />
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
         </div>
         <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -370,32 +214,16 @@
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -403,12 +231,7 @@
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
@@ -469,7 +292,7 @@ const fetchAttachment = async (orderId: string) => {
     .get(config.API.attachmentOrder(orderId))
     .then(async (res) => {
       let response = res.data.result;
-      console.log(response);
+      // console.log(response);
       order.value = response.orderNo;
       years.value = Number(response.orderYear);
       if (response.date !== undefined) {
@@ -511,7 +334,7 @@ const viewPDF = async (pdf: string) => {
   }, 1500);
 };
 watch(tab, () => {
-  console.log(tab.value);
+  // console.log(tab.value);
   if (tab.value === "main") {
     viewPDF(OrderPDF.value);
   }
@@ -545,7 +368,7 @@ const props = defineProps({
   },
 });
 
-const next = () => props.next();
+// const next = () => props.next();
 const previous = () => props.previous();
 
 const onchangePage = (val: any) => {
@@ -576,8 +399,8 @@ const save = () => {
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
           })
-          .onCancel(() => {})
+          .onCancel(() => { })
-          .onDismiss(() => {});
+          .onDismiss(() => { });
       }
     });
   }
@@ -628,8 +451,8 @@ const clickExecute = async (id: string) => {
           messageError($q, e);
         });
     })
-    .onCancel(() => {})
+    .onCancel(() => { })
-    .onDismiss(() => {});
+    .onDismiss(() => { });
 };
 
 const validateForm = () => {
@@ -655,6 +478,7 @@ const setTab = (val: string) => {
   border-radius: 10px;
   border: 1px solid #e9eaec;
 }
+
 .text-header {
   color: #34373c;
   font-size: 1rem;

src/modules/10_order/interface/index/Main.ts

@@ -0,0 +1,218 @@
+interface DataOption {
+  id: number | null;
+  name: string;
+  disable?: boolean;
+}
+interface DataOption1 {
+  id: string | null;
+  name: string | null;
+  disable?: boolean;
+}
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface optionData {
+  id: string;
+  name: string;
+}
+
+interface EduOps {
+  levelOptions: optionData[];
+  positionPathOptions: optionData[];
+}
+
+interface InformationOps {
+  prefixOps: optionData[];
+  genderOps: optionData[];
+  bloodOps: optionData[];
+  statusOps: optionData[];
+  religionOps: optionData[];
+  employeeClassOps: optionData[];
+  employeeTypeOps: optionData[];
+}
+
+interface InsigniaOps {
+  insigniaOptions: DataOptionInsignia[];
+}
+
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface treeTab {
+  id: string;
+  label: string;
+  children: treeTab[];
+}
+
+interface CheckboxItem {
+  id: number;
+  label: string;
+}
+
+interface Property {
+  name: string;
+  value: boolean;
+}
+
+interface PointExam {
+  pointA: number;
+  pointB: number;
+  pointC: number;
+  pointTotalA: number;
+  pointTotalB: number;
+  pointTotalC: number;
+  point: number;
+  pointTotal: number;
+  examNumber: number;
+  examRound: number;
+  pass: string | null;
+}
+
+interface Education {
+  id: string;
+  educationLevel: string;
+  educationLevelId: string;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  other: string;
+  fundName: string;
+  durationYear: number;
+  finishDate: Date;
+  isDate: string;
+  startDate: Date;
+  endDate: Date;
+  positionPath: string;
+  isEducation: boolean;
+}
+
+interface Family {
+  couple: string;
+  marryPrefix: string;
+  marryPrefixId: string;
+  marryFirstName: string;
+  marryLastName: string;
+  marryOccupation: string;
+  fatherPrefix: string;
+  fatherPrefixId: string;
+  fatherFirstName: string;
+  fatherLastName: string;
+  fatherOccupation: string;
+  motherPrefix: string;
+  motherPrefixId: string;
+  motherFirstName: string;
+  motherLastName: string;
+  motherOccupation: string;
+}
+
+interface Address {
+  registAddress: string;
+  registSubDistrict: string;
+  registSubDistrictId: string;
+  registZipCode: string;
+  registDistrict: string;
+  registDistrictId: string;
+  registProvince: string;
+  registProvinceId: string;
+  currentAddress: string;
+  currentSubDistrict: string;
+  currentSubDistrictId: string;
+  currentZipCode: string;
+  currentDistrict: string;
+  currentDistrictId: string;
+  currentProvince: string;
+  currentProvinceId: string;
+  registSame: string;
+}
+
+interface Certificate {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+}
+
+const AddressDataDefualt: Address = {
+  registAddress: "",
+  currentAddress: "",
+  registSubDistrict: "",
+  registSubDistrictId: "",
+  registZipCode: "",
+  registDistrict: "",
+  registDistrictId: "",
+  registProvince: "",
+  registProvinceId: "",
+  currentSubDistrict: "",
+  currentSubDistrictId: "",
+  currentZipCode: "",
+  currentDistrict: "",
+  currentDistrictId: "",
+  currentProvince: "",
+  currentProvinceId: "",
+  registSame: "0",
+};
+
+const FamilyDataDefualt: Family = {
+  couple: "0",
+  marryPrefix: "",
+  marryPrefixId: "",
+  marryFirstName: "",
+  marryLastName: "",
+  marryOccupation: "",
+  fatherPrefix: "",
+  fatherPrefixId: "",
+  fatherFirstName: "",
+  fatherLastName: "",
+  fatherOccupation: "",
+  motherPrefix: "",
+  motherPrefixId: "",
+  motherFirstName: "",
+  motherLastName: "",
+  motherOccupation: "",
+};
+interface Assign {
+  id: number;
+  personal_id: string;
+  knowlage_skill_map_no: number;
+  round_no: number;
+  date_start: Date;
+  date_finish: Date;
+  behavior_desc: string;
+  other_desc: string;
+  other4_desc: string;
+  othor5_no1_desc: string;
+  othor5_no2_desc: string;
+  experimenter_dated: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+export type {
+  DataOption,
+  DataOptionInsignia,
+  treeTab,
+  InformationOps,
+  Pagination,
+  EduOps,
+  DataOption1,
+  InsigniaOps,
+  CheckboxItem,
+  Property,
+  PointExam,
+  Education,
+  Family,
+  Address,
+  optionData,
+  Certificate,
+  Assign,
+};
+
+export { AddressDataDefualt, FamilyDataDefualt };

src/modules/10_order/interface/request/Main.ts

@@ -0,0 +1,12 @@
+interface FormOrderPlacementMainData {
+  Order: string;
+  OrderNum: string;
+  fiscalYear: number;
+  OrderDate: string;
+  OrderBy: string;
+  Signer: string;
+  OrderStatus: string;
+  OrderType: string;
+}
+
+export type { FormOrderPlacementMainData };

src/modules/10_order/interface/request/Order.ts

@@ -0,0 +1,7 @@
+interface RequestCopyOrder {
+  personalId: string;
+  emailChannel: boolean;
+  inboxChannel: boolean;
+}
+
+export type { RequestCopyOrder };

src/modules/10_order/interface/response/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/10_order/interface/response/Order.ts

@@ -0,0 +1,44 @@
+interface ResponseData {
+  education: string;
+  idCard: string;
+  name: string;
+  personalId: string;
+  selectStatus: boolean;
+  sequence: number;
+  refRecordId: string
+}
+
+interface ResponseOrganiz {
+  firstName: string;
+  idCard: string;
+  lastName: string;
+  name: string;
+  position: string;
+  prefixId: string;
+  profileId: string;
+  unit: string;
+}
+
+interface ResponseCopyOrder {
+  emailChannel: boolean;
+  idCard: string;
+  inboxChannel: boolean;
+  name: string;
+  personalId: string;
+  position: string;
+  selectStatus: boolean;
+  sequence: number;
+  unit: string;
+}
+
+interface DataCopyOrder {
+  personalId: string;
+  name: string;
+  idCard: string;
+  position: string;
+  unit: string;
+  send: string;
+  mutiselect: number[];
+}
+
+export type { ResponseData, ResponseOrganiz, ResponseCopyOrder, DataCopyOrder };

src/modules/10_order/router.ts

@@ -0,0 +1,40 @@
+/**
+ * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
+ */
+
+const AddPage = () =>
+  import("@/modules/10_order/components/Add.vue");
+const MainOrder = () => import("@/modules/10_order/components/Main.vue");
+const DetailPage = () =>
+  import("@/modules/10_order/components/Detail.vue");
+
+export default [
+  {
+    path: "/order",
+    name: "order",
+    component: MainOrder,
+    meta: {
+      Auth: true,
+      Key: [10],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/order/add",
+    name: "OrderAdd",
+    component: AddPage,
+    meta: {
+      Auth: true,
+      Role: "placement",
+    },
+  },
+  {
+    path: "/order/detail/:orderid",
+    name: "OrderDetail",
+    component: DetailPage,
+    meta: {
+      Auth: true,
+      Role: "placement",
+    },
+  },
+];

src/modules/10_order/store.ts

@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
+
+export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
+  interface placementOrder {
+    mappingPosition: { columns: String[] };
+  }
+  const placementOrderData = ref<placementOrder>({
+    mappingPosition: { columns: [] },
+  });
+  const changePlacementColumns = (system: String, val: String[]) => {
+    if (system == "mappingPosition")
+      placementOrderData.value.mappingPosition.columns = val;
+    localStorage.setItem(
+      "placementOrder",
+      JSON.stringify(placementOrderData.value)
+    );
+  };
+
+  if (localStorage.getItem("placementOrder") !== null) {
+    placementOrderData.value = JSON.parse(
+      localStorage.getItem("placementOrder") || "{}"
+    );
+  }
+
+  const DataMainYearOrder = ref<object[]>([]); // ข้อมูลจำนวนปี
+  const DataMainOrigOrder = ref<FormOrderPlacementMainData[]>([]); // ข้อมูลหลักดั้งเดิม
+  const DataMainUpdateOrder = ref<FormOrderPlacementMainData[]>([]); // ข้อมูลเปลี่ยนแปลง
+  const DataMainYearSetOrder = (val: FormOrderPlacementMainData[]) =>
+    (DataMainYearOrder.value = val);
+
+  const DataMainOrder = (val: FormOrderPlacementMainData[]) =>
+    (DataMainOrigOrder.value = val);
+
+  const DataUpdateOrder = (
+    filter_1: string,
+    filter_2: string,
+    filterYear: number | null
+  ) => {
+    DataMainUpdateOrder.value = [];
+
+    if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.OrderStatus === filter_2
+      );
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear !== 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2
+      );
+    } else if (filter_1 === "" && filter_2 === "" && filterYear !== 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderStatus === filter_2 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2 && item.OrderType === filter_1
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderType === filter_1 &&
+          item.OrderStatus === filter_2 &&
+          item.fiscalYear === filterYear
+      );
+    } else if (
+      filter_1 == "ทั้งหมด" &&
+      filter_2 == "ทั้งหมด" &&
+      filterYear !== null
+    ) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    }
+  };
+
+  return {
+    placementOrderData,
+    changePlacementColumns,
+    DataMainYearOrder,
+    DataMainOrigOrder,
+    DataMainUpdateOrder,
+    DataUpdateOrder,
+    DataMainYearSetOrder,
+    DataMainOrder,
+  };
+});

src/modules/10_order/views/Main.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    คำสั่ง
+  </div>
+</template>

src/router/index.ts

@@ -13,6 +13,7 @@ import ModuleRetirement from "@/modules/06_retirement/router";
 import ModuleInsignia from "@/modules/07_insignia/router";
 import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
 import ModuleCoin from "@/modules/09_coin/router";
+import ModuleOrder from "@/modules/10_order/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -44,6 +45,7 @@ const router = createRouter({
         ...ModuleInsignia,
         ...ModuleRegistryEmployee,
         ...ModuleCoin,
+        ...ModuleOrder,
       ],
     },
     /**

src/views/MainLayout.vue

@@ -221,9 +221,11 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
-
+  if (path == "registry" && route.fullPath == "/registry-employee") return false;
   if (path == "registry" && route.fullPath == "/") return false;
-  const bool = route.fullPath.includes(path);
+  // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
+  const bool = route.fullPath.includes(`/${path}`);
+
   return bool;
 };
 /**