Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

# Conflicts:
#	src/modules/05_placement/components/Transfer/transferMain.vue

package-lock.json

@@ -7722,7 +7722,7 @@
     },
     "node_modules/vue": {
       "version": "3.2.47",
-      "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
+    //   "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
       "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "dependencies": {
         "@vue/compiler-dom": "3.2.47",
@@ -13787,7 +13787,7 @@
     },
     "vue": {
       "version": "3.2.47",
-      "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
+    //   "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
       "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "requires": {
         "@vue/compiler-dom": "3.2.47",

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/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

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

src/modules/05_placement/components/probation/FormAssign.vue

@@ -82,6 +82,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -92,6 +93,9 @@
                     <template #trigger>
                       <q-input
                         dense
+                        borderless
+                        :readonly="routeName != 'probationWorkAdd'"
+                        :outlined="routeName == 'probationWorkAdd'"
                         :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
@@ -100,7 +104,6 @@
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
-                        outlined
                         @clear="clearDateExam"
                       >
                       </q-input>
@@ -114,7 +117,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
-                    :readonly="isDatePicker2Readonly"
+                    :readonly="isDatePicker2Readonly|| routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -127,11 +130,14 @@
                     <template #trigger>
                       <q-input
                         dense
-                        outlined
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          date_finish != null ? date2Thai(date_finish) : undefined
+                          date_finish != null
+                            ? date2Thai(date_finish)
+                            : undefined
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -258,6 +264,7 @@
                         color="red"
                         icon="mdi-trash-can-outline"
                         @click="deleteactivity(index)"
+                        v-if="routeName === 'probationWorkAdd'"
                       />
                     </div>
                   </div>
@@ -293,10 +300,9 @@
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
-                          :option-label="
+                          :option-label="(item) => `${item.title}-${item.description}`"
-                            (item) => `${item.title}-${item.description}`
+                          option-value="id"
-                          "
+                          map-options
-                          :option-value="(level) => level.level_id"
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
@@ -316,15 +322,17 @@
                         />
                       </div>
                       <div
+                      v-if="index > 2"
                         class="col-xs-12 col-sm-1 flex justify-center items-center"
                       >
                         <q-btn
-                          v-if="index > 2"
+                        v-if="routeName == 'probationWorkAdd'"
                           flat
                           round
                           color="red"
                           icon="mdi-trash-can-outline"
                           @click="deleteknowledge(index)"
+                          
                         />
                       </div>
                     </div>
@@ -363,11 +371,13 @@
                                 v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
+                                
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index === 0" class="col-11">
+                            <div v-if="index === 0" class="col-11" >
                               {{ item.description }}
+                              
                             </div>
                           </div>
                         </div>
@@ -554,6 +564,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
@@ -574,6 +585,7 @@
                               `${item.title} - ${item.level_description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
@@ -610,6 +622,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
@@ -638,6 +651,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
@@ -682,6 +696,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
@@ -709,6 +724,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
@@ -735,6 +751,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
@@ -763,6 +780,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
@@ -790,6 +808,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
@@ -823,6 +842,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
@@ -850,6 +870,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
@@ -868,6 +889,7 @@
                             (item) => `${item.title} - ${item.description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
@@ -889,6 +911,7 @@
                           </template></q-select
                         >
                       </div>
+                      
                     </div>
                   </div>
                 </div>
@@ -1005,6 +1028,7 @@
               <div class="col-12 row q-gutter-md">
                 <q-card
                   v-for="(item, index) in ProductivityArray"
+                  :key="index"
                   flat
                   bordered
                   class="col-12 q-pa-sm bg-grey-1"
@@ -1048,6 +1072,7 @@
                     >
                       <q-btn
                         flat
+                        v-if="routeName == 'probationWorkAdd'"
                         round
                         color="red"
                         icon="mdi-trash-can-outline"
@@ -1122,8 +1147,10 @@
                       <li>
                         อื่นๆ (ถ้ามี)
                         <q-input
+                        :readonly="routeName != 'probationWorkAdd'"
                           dense
-                          outlined
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
                           v-model="Other5"
                           label="กรอกอื่นๆ"
                         />
@@ -1234,6 +1261,7 @@
                     v-model="date1"
                     :locale="'th'"
                     autoApply
+                    :readonly="routeName !== 'probationWorkAdd'"
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
@@ -1296,6 +1324,7 @@
                     autoApply
                     borderless
                     :enableTimePicker="false"
+                    :readonly="routeName !== 'probationWorkAdd'"
                     week-start="0"
                   >
                     <template #year="{ year }">
@@ -1349,6 +1378,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -1408,6 +1438,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
+                    :readonly="routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -1496,7 +1527,10 @@ const filterData = (options: any[], excludedGroups: any[]) => {
 };
 const filtermantor = (options: any[], excludedGroups: any[]) => {
   return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.personal_id === item.personal_id)
+    (item) =>
+      !excludedGroups.some(
+        (group) => group && group.personal_id === item.personal_id
+      )
   );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
@@ -1535,7 +1569,7 @@ const main2 = ref<any>();
 const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
-
+const assignId = ref<string>(route.params.form as string);
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1636,13 +1670,10 @@ const OPknowledge = ref<
   Array<{
     id: number;
     title: number;
-    options: Array<Option>;
+    description:string;
+    level: string;
   }>
 >([]);
-interface Option {
-  level_id: number;
-  level_desc: string;
-}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1700,8 +1731,8 @@ const getAssignNew = async (id: string) => {
     monthSelect.value = `${data.assign_month} เดือน`;
     OPcaretaker.value = data.mentors;
     OPcommander.value = [data.commander];
-    fullname.value = data.person.name
+    fullname.value = data.person.name;
-    position.value = data.person.OrganizationOrganization
+    position.value = data.person.OrganizationOrganization;
   });
 };
 const getcompetency = async (id: string) => {
@@ -1745,6 +1776,7 @@ const getSkill = async (id: string) => {
 const getLaw = async (id: string) => {
   await http.get(config.API.lawOptions(id)).then((res: any) => {
     checkRule.value = res.data.data;
+
   });
 };
 
@@ -1756,7 +1788,7 @@ const postDateTime = async () => {
     })
     .then(async (res) => {
       const result = res.data;
-       date_finish.value = result.finish_date;
+      date_finish.value = result.finish_date;
     })
     .catch((e) => {})
     .finally(async () => {
@@ -1839,8 +1871,14 @@ const putData = (id: string) => {
     position: position.value,
     monthSelect:
       monthSelect.value !== null ? parseInt(monthSelect.value) : null,
-      date_start: date_start.value instanceof Date ? dateToISO(date_start.value) : new Date(),
+    date_start:
-    date_finish: date_finish.value  instanceof Date ?  dateToISO(date_finish.value) : dateToISO(new Date(date_finish.value)),
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
     // caretaker_1: caretaker1.value,
     // caretaker_2: caretaker2.value,
     assign_knowledges: know_ledge,
@@ -1868,7 +1906,7 @@ const putData = (id: string) => {
         checked: item.checked,
       })),
   };
-  return data
+  return data;
 };
 
 const saveData = (id: string) => {
@@ -1939,14 +1977,72 @@ const OPresourse = ref<
     level_description: string;
   }>
 >([]);
+const skillIds = [1, 2, 3, 4];
 
-onMounted(async () => {
+const getAssign = async () => {
+  await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
+    const data = res.data.data;
+    console.log("ASSIGN-list ==>", data);
+    fullname.value = data.profile.name
+    position.value = data.profile.OrganizationOrganization
+    date_start.value = data.assign.date_start
+    date_finish.value = data.assign.date_finish
+    date1.value = data.assign.experimenter_dated
+    date2.value = data.mentors[0].dated
+    date3.value = data.mentors[1].dated
+    date4.value = data.commander.dated
+    activity_desc.value = data.jobs.map((job:any) => job.activity_desc);
+    goal_desc.value = data.jobs.map((job:any) => job.goal_desc);
+    activityCount.value = data.jobs.length
+    caretaker1.value = data.mentors[0];
+    caretaker2.value = data.mentors[1];
+    
+    commander.value = data.commander.name
+    knowledge.value = data.knowledges.map((id:any)=> id.id)
+    knowledgeCount.value = data.knowledges.length
+    other_desc.value = data.assign.other_desc
+    other4_desc.value = data.assign.other4_desc
+    other5_no1_desc.value = data.assign.other5_no1_desc
+    const skills = data.skills.map((skills: any) => ({
+      id: skills.id,
+      title: skills.title,
+      level: skills.level,
+      level_description: skills.description,
+    }));
+  [skill.value, skill2.value, skill3.value, skill4.value] = skills;
+
+    main.value = data.competencys[0]
+    main2.value = data.competencys[1]
+    main3.value = data.competencys[2]
+    main4.value = data.competencys[3]
+    main5.value = data.competencys[4]
+
+    group.value = data.competency_groups[0]
+    group2.value = data.competency_groups[1]
+    group3.value = data.competency_groups[2]
+
+    output_desc.value = data.outputs.map((output: any) => output.output_desc);
+    indicator_desc.value = data.outputs.map((output: any) => output.indicator_desc);
+    productivityCount.value = data.outputs.length;
+
+    checkRule.value = data.laws.map((law: any) => ({
+  id: law.law_id,
+  checked: law.selected,
+  description: law.description,
+  status_select: law.status_select,
+  
+}));
+  console.log("🚀 ~ file: FormAssign.vue:2009 ~ awaithttp.get ~ checkRule:", checkRule.value)
+  })
+};
+onMounted(async() => {
   await getLaw(personalId);
   await getcompetency(personalId);
   await getCompetencyGroup(personalId);
   await getSkill(personalId);
   await getKnowledge(personalId);
   await getAssignNew(personalId);
+  await getAssign();
 });
 watch(
   () => [monthSelect.value, date_start.value],

src/modules/05_placement/components/probation/MainProbation.vue

@@ -6,28 +6,73 @@
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div>
-          <q-btn @click="modal = true" size="12px" flat round color="add" icon="mdi-plus">
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
             <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+        <q-input
-          debounce="300" placeholder="ค้นหา">
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+        <q-select
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          v-model="visibleColumns"
-          class="col-xs-12 col-sm-3 col-md-2" />
+          multiple
+          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-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
+        <q-table
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          ref="table"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          :columns="columns"
+          :rows="rows"
+          :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">
@@ -36,23 +81,52 @@
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
+            <q-tr
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <!-- <div v-else-if="col.name == 'status'">
+                <div v-else-if="col.name === 'probation_status'">
-										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
+                  <q-icon
-											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
+                    size="20px"
-										</q-icon>
+                    v-if="props.row.probation_status === 'PENDING'"
-										<q-icon size="20px" v-else-if="props.row.status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red">
+                    name="mdi-timer-sand"
-											<q-tooltip>ไม่ผ่านการทดลอง</q-tooltip>
+                    color="deep-orange"
-										</q-icon>
+                  />
-										<q-icon size="20px" v-else name="mdi-check" color="teal">
+                  <q-icon
-											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
+                    size="20px"
-										</q-icon>
+                    v-else-if="props.row.probation_status === 'PROCESS'"
-									</div> -->
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PASS'"
+                    name="mdi-check"
+                    color="teal"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'NO-PASS'"
+                    name="mdi-close"
+                    color="red"
+                  />
+                  {{
+                    props.row.probation_status === "PENDING"
+                      ? "รอมอบหมายงาน"
+                      : props.row.probation_status === "PROCESS"
+                      ? "อยู่ระหว่างทดลองงาน"
+                      : props.row.probation_status === "PASS"
+                      ? "ผ่านการทดลองงาน"
+                      : props.row.probation_status === "NO-PASS"
+                      ? "ไม่ผ่านการทดลองงาน"
+                      : ""
+                  }}
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -60,8 +134,16 @@
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+            <q-pagination
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -71,23 +153,55 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
+          <q-input
-            placeholder="ค้นหา">
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
+            <q-table
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel"
+              ref="table2"
-              v-model:pagination="pagination">
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :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">
+                  <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 />
@@ -95,7 +209,11 @@
               </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">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
@@ -104,14 +222,29 @@
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                <q-pagination
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>
@@ -355,7 +488,7 @@ const getpersonalList = async () => {
       }));
       console.log("(data)", data);
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -410,9 +543,9 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => { })
+    .onOk(async () => {})
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const clickAdd = (id: string) => {
@@ -426,23 +559,27 @@ const clickAdd = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader()
+      showLoader();
       const postData = {
         personal_id: id,
       };
       // console.log("postData:", postData);
-      await http.post(config.API.personalAdd(), postData).then((res) => {
+      await http
-        // console.log("res:", res);
+        .post(config.API.personalAdd(), postData)
-        getpersonalList();
+        .then((res) => {
-      }).catch((e) => {
+          // console.log("res:", res);
-        messageError($q, e);
+          getpersonalList();
-      }).finally(() => {
+        })
-        clickClose()
+        .catch((e) => {
-        hideLoader()
+          messageError($q, e);
-      });
+        })
+        .finally(() => {
+          clickClose();
+          hideLoader();
+        });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const clickClose = async () => {

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -55,19 +55,39 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="probation_status == 'PENDING'"
+                v-if="probation_status === 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status === 'NO-PASS'"
                 name="mdi-close"
                 color="red"
               />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PROCESS'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PASS'"
+                name="mdi-check"
+                color="teal"
+              />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
               {{
-                probation_status == "PENDING" ? "อยู่ในระหว่างการทดลองงาน" : ""
+                probation_status === "PENDING"
+                  ? "รอมอบหมายงาน"
+                  : probation_status === "NO-PASS"
+                  ? "ไม่ผ่านการทดลองงาน"
+                  : probation_status === "PROCESS"
+                  ? "อยู่ในระหว่างการทดลองงาน"
+                  : probation_status === "PASS"
+                  ? "ผ่านการทดลองงาน"
+                  : ""
               }}
             </div>
           </div>
@@ -204,7 +224,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader,date2Thai } = mixin;
+const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
@@ -311,7 +331,7 @@ const getAssignList = async () => {
       console.log("LIST ===>", res.data.data);
       const data = res.data.data;
       rows.value = data.map((item: FormProbationDetail) => ({
-        id:item.id,
+        id: item.id,
         round_no: item.round_no,
         date_start: date2Thai(new Date(item.date_start)),
         date_finish: date2Thai(new Date(item.date_finish)),

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",
@@ -147,7 +95,7 @@ export default [
     },
   },
   {
-    path: "/probation/detail/:id/:form",
+    path: "/probation/detail/:personalId/:form",
     name: "probationForm",
     component: probationFormEvaluation,
     meta: {

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);
 };
@@ -294,6 +295,7 @@ const checkSave = async () => {
           await editData(id.value);
         } else {
           await addData();
+          clickBack();
         }
       }
     });

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

@@ -102,7 +102,7 @@
               </q-td>
               <q-td key="status" :props="props" @click="clickEdit(props.row)">
                 <q-icon
-                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  v-if="props.row.status == true"
                   name="mdi-close"
                   color="grey-5"
                   class="text-h5"
@@ -139,7 +139,7 @@
                   flat
                   round
                   color="light-blue-8"
-                  @click.stop.prevent="clickProposals(props.row.id)"
+                  @click.stop.prevent="clickProposals(props.row.file)"
                   icon="mdi-file-download"
                 >
                   <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
@@ -297,7 +297,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -305,7 +305,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -313,7 +313,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -329,7 +329,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "ยังไม่ได้เสนอ",
   },
 ]);
@@ -350,13 +350,14 @@ const fetchData = async () => {
         rows.value.push({
           id: e.period_id,
           round: e.period_name,
-          year: e.period_year,
+          year: e.period_year + 543,
           amount: e.period_amount,
           startDate:
             e.period_start == null ? null : date2Thai(new Date(e.period_start)),
           endDate:
             e.period_end == null ? null : date2Thai(new Date(e.period_end)),
-          status: e.period_status,
+          status: e.period_isActive,
+          file: e.period_doc,
         });
       });
     })
@@ -406,8 +407,10 @@ const clickAdd = () => {
   router.push({ name: "roundAdd" });
 };
 
-const clickProposals = (id: string) => {
+const clickProposals = (file: string) => {
-  //   window.open(config.API.exportInsigniaDoc(id));
+  if (file !== null) {
+    window.open(file);
+  }
 };
 
 // ค้นหาในตาราง

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);
 };
@@ -318,6 +319,7 @@ const checkSave = async () => {
           await editData(id.value);
         } else {
           await addData();
+          clickBack();
         }
       }
     });

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

@@ -139,7 +139,7 @@
                   flat
                   round
                   color="light-blue-8"
-                  @click.stop.prevent="clickProposals(props.row.id)"
+                  @click.stop.prevent="clickProposals(props.row.file)"
                   icon="mdi-file-download"
                 >
                   <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
@@ -334,13 +334,14 @@ const fetchData = async () => {
         rows.value.push({
           id: e.period_id,
           round: e.period_name,
-          year: e.period_year,
+          year: e.period_year + 543,
           amount: e.period_amount,
           startDate:
             e.period_start == null ? null : date2Thai(new Date(e.period_start)),
           endDate:
             e.period_end == null ? null : date2Thai(new Date(e.period_end)),
           status: e.period_status,
+          file: e.period_doc,
         });
       });
     })
@@ -356,8 +357,10 @@ const clickEdit = (col: any) => {
   router.push(`/coin/round-add/${col.id}`);
 };
 
-const clickProposals = (id: string) => {
+const clickProposals = (file: string) => {
-  //   window.open(config.API.exportDisablePassExamList(id));
+  if (file !== null) {
+    window.open(file);
+  }
 };
 
 // หัวตาราง2

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) => {
@@ -686,4 +581,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
+</style>

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