ปรับโครงสร้างเมนู, เพิ่มเมนูในทะเบียนประวัติ

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,43 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.6,
-        label: "คำสั่งช่วยราชการ/ส่งตัวกลับ" /* */,
+        label: "รายการช่วยราชการ" /* */,
+        // path: "help-government",
         path: "repatriation-order",
         role: "placement",
       },
+      {
+        key: 6.7,
+        label: "รายการส่งตัวกลับ" /* */,
+        path: "repatriate",
+        role: "placement",
+      },
+      {
+        key: 6.8,
+        label: "รายการแต่งตั้ง" /* */,
+        // path: "repatriate",
+        role: "placement",
+      },
+      {
+        key: 6.9,
+        label: "รายการเลื่อน" /* */,
+        path: "postpone",
+        role: "placement",
+      },
+      {
+        key: 6.1,
+        label: "รายการย้าย" /* */,
+        path: "move-order",
+        role: "placement",
+      },
+      {
+        key: 6.1,
+        label: "รายการอื่นๆ" /* */,
+        path: "other-order",
+        role: "placement",
+      },
     ],
   },
-
   {
     key: 7,
     icon: "mdi-account-cancel-outline",
@@ -241,31 +287,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 +421,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,69 @@
         </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="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 +1022,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/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

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

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/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/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/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;
 };
 /**