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

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

@@ -27,20 +27,20 @@
               <q-tooltip>เพิ่มข้อมูล</q-tooltip>
               <q-menu>
                 <q-list style="min-width: 100px">
+                  <q-item clickable @click="clickAdd">
+                    <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
+                  </q-item>
                   <q-item clickable v-close-popup disable>
                     <q-item-section
                       >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
                     >
                   </q-item>
-                  <q-item clickable @click="clickAdd">
-                    <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
-                  </q-item>
                 </q-list>
               </q-menu>
             </q-btn>
           </div>
-          <q-space/>
-        
+          <q-space />
+
           <q-input
             class="col-xs-12 col-sm-3 col-md-2"
             standout
@@ -61,7 +61,7 @@
               />
             </template>
           </q-input>
-        
+
           <q-select
             v-model="visibleColumns"
             multiple
@@ -118,7 +118,7 @@
                 @update:model-value="searchFilterTable"
               />
             </div>
-        </q-card>
+          </q-card>
         </div>
         <div class="col-12">
           <q-table
@@ -187,18 +187,7 @@
                   :props="props"
                   @click="redirectToPage(props.row.Order)"
                 >
-                  <q-icon
-                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
-                    name="mdi-timer-sand"
-                    color="orange"
-                    size="20px"
-                  />
-                  <q-icon
-                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
-                    name="mdi-check"
-                    color="positive"
-                    size="20px"
-                  />
+                  {{ props.row.OrderStatus }}
                 </q-td>
 
                 <q-td auto-width>
@@ -241,12 +230,12 @@ import type { QTableProps } from "quasar";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
+import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
-const DataStore = usePlacementDataStore();
+const DataStore = useOrderPlacementDataStore();
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -359,7 +348,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "จัดทำร่างคำสั่ง",
     OrderType: "คำสั่งย้าย",
   },
 
@@ -370,7 +359,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "จัดทำร่างคำสั่ง",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -380,7 +369,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "บัญชีแนบท้าย",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -390,7 +379,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "บัญชีแนบท้าย",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -400,7 +389,27 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "รอลงนาม",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -430,27 +439,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "ออกคำสั่งแล้ว",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -482,7 +471,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "ออกคำสั่งแล้ว",
     OrderType: "คำสั่งแต่งตั้ง",
   },
 ]);
@@ -515,8 +504,8 @@ const OriginalDataFetch = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  await DataStore.DataMain(rows.value);
-  OriginalData.value = await DataStore.DataMainOrig;
+  await DataStore.DataMainOrder(rows.value);
+  OriginalData.value = await DataStore.DataMainOrigOrder;
   UpdataData.value = OriginalData.value;
 };
 
@@ -582,6 +571,7 @@ const fiscalYearFilter = async () => {
   //   });
   for (let data of OriginalData.value) {
     const year = data.fiscalYear;
+    console.log(year);
 
     if (fiscalyear.value === null || year > fiscalyear.value) {
       fiscalyear.value = year;
@@ -594,9 +584,9 @@ const fiscalYearFilter = async () => {
   }
 };
 
-const OrderType = ref<number | null>(0);
-const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedOrderTypeValues: number[] = [];
+const OrderType = ref<string>("");
+const OrderTypeOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const addedOrderTypeValues: string[] = [];
 const OrderTypeFilter = async () => {
   // API
   // await http
@@ -611,22 +601,34 @@ const OrderTypeFilter = async () => {
   //   .finally(async () => {
   //   });
   for (let data of OriginalData.value) {
-    const OrderType = data.OrderType;
+    const OrderTypeValue = data.OrderType;
+    console.log(OrderTypeValue);
 
-    if (OrderType.value === null || OrderType > OrderType.value) {
-      OrderType.value = OrderType;
-    }
-
-    if (!addedOrderTypeValues.includes(OrderType)) {
-      OrderTypeOption.push({ id: OrderType, name: OrderType.toString() });
-      addedOrderTypeValues.push(OrderType);
+    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+    //   OrderTypeValue = OrderType;
+    // }
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      OrderTypeOption.push({
+        id: OrderTypeValue,
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
     }
+    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+    //   OrderTypeOption.push({
+    //     id: OrderTypeValue,
+    //     name: OrderTypeValue.toString(),
+    //   });
+    //   addedOrderTypeValues.push(OrderTypeValue);
+    // }
   }
 };
-
-const OrderStatus = ref<number | null>(0);
-const OrderStatusOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedOrderStatusValues: number[] = [];
+const OrderStatus = ref<string>("");
+const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+  DataStore.DataMainOrigOrder
+);
+const OrderStatusOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
   // API
   // await http
@@ -641,15 +643,22 @@ const OrderStatusFilter = async () => {
   //   .finally(async () => {
   //   });
   for (let data of OriginalData.value) {
-    const OrderStatus = data.OrderStatus;
+    const OrderStatusValue = data.OrderStatus;
+    console.log(OrderStatusValue);
 
-    if (OrderStatus.value === null || OrderStatus > OrderStatus.value) {
-      OrderStatus.value = OrderStatus;
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
     }
 
-    if (!addedOrderStatusValues.includes(OrderStatus)) {
-      OrderStatusOption.push({ id: OrderStatus, name: OrderStatus.toString() });
-      addedOrderStatusValues.push(OrderStatus);
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.push({
+        id: OrderStatusValue,
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
     }
   }
 };
@@ -688,7 +697,9 @@ const visibleColumns = ref<string[]>([
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 const searchFilterTable = async () => {
-  await DataStore.DataUpdateMain(OrderStatus.value, OrderType.value);
+  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+  await DataStore.DataUpdateOrder(OrderType.value, OrderStatus.value);
+  UpdataData.value = DataStore.DataMainUpdateOrder;
 };
 //   UpdataData.value = DataStore.DataMainUpdate;
 // console.log("Input value changed:", OrderStatus.value, OrderType.value);

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

@@ -364,7 +364,7 @@ const search = ref<string>("");
 const expanded = ref<string[]>([]);
 const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
-
+const send = ref<String[]>([]);
 const selectedModal = ref([]);
 const filterModal = ref<string>("");
 const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
@@ -467,10 +467,9 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-
 const optionSelect = ref<any>([
   { id: 1, name: "อีเมล" },
-  { id: 2, name: "แจ้งเตือน" },
+  { id: 2, name: "กล่องข้อความ" },
 ]);
 
 const visibleColumns = ref<String[]>([

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

@@ -9,6 +9,7 @@ import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
 import type {
   treeTab,
   DataOption,
@@ -1582,79 +1583,6 @@ const listKeyId = (data: any) => {
                         hide-bottom-space
                       />
                     </div>
-                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                            (val: string) =>
-                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                          ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
-
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                            doneFn: Function) => filterSelector(inputValue, doneFn, '8'
-                            )"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :rules="[
-                            (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                          ]"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div> -->
                   </div>
                 </q-scroll-area>
               </q-card>
@@ -1681,56 +1609,58 @@ const listKeyId = (data: any) => {
     />
   </q-form>
   <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile === 1"
-              v-model="files"
-              dense
-              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-              outlined
-              use-chips
-              :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์เอกสารหลักฐาน'}`]"
-              multiple
-              @update:modelValue="clickEditRow"
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim"
-        />
-      </q-form>
-    </q-card>
+  <q-card style="width: 800px">
+
+    <q-form ref="myForm">
+      <DialogHeader
+        :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+        :close="clickClose"
+      />
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="positionMasterUserNote"
+            :label="`${'กรอกเหตุผล'}`"
+            @update:model-value="clickEditRow"
+            
+            type="textarea"
+          />
+          <q-file
+            v-if="getNumFile === 1"
+            v-model="files"
+            dense
+            :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
+            outlined
+            use-chips
+            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+            multiple
+            @update:model-value="clickEditRow"
+            class="q-py-sm"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <DialogFooter
+        v-model:editvisible="edit"
+        v-model:modalEdit="modalEdit"
+        :validate="validateData"
+        :save="modalEdit ? savePostpone : saveDisclaim"
+      />
+    </q-form>
+  </q-card>
   </q-dialog>
 
   <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import type { QTableProps } from "quasar";
 import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -24,9 +25,61 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+const rows = ref<any[]>([
+  {
+    university: props.getdetail.university || "-",
+    degree: props.getdetail.degree || "-",
+    major: props.getdetail.major || "-",
+    graduation: "2022-01-01",
+  },
+
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "university",
+    align: "center",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "university",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "degree",
+    align: "center",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "major",
+    align: "center",
+    label: "สาขาวิชาเอก",
+    sortable: true,
+    field: "major",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "graduation",
+    align: "center",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "graduation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
 const myForm = ref<any>();
 const checkValidate = ref<boolean>(false);
 const selection = ref<number[]>([]);
+
 const checkboxItems: CheckboxItem[] = [
   { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
   {
@@ -168,32 +221,18 @@ const close = async () => {
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การศึกษา</div>
-              <div class="row q-pa-xs">
-                <div class="col-3 header-sub-text">
-                  <div class="q-pb-md">สถานศึกษา</div>
-                  <div>สาขาวิชาเอก</div>
-                </div>
-                <div class="col-4 sub-text">
-                  <div class="q-pb-md">
-                    {{ props.getdetail.university }}
-                  </div>
-                  <div>
-                    {{ props.getdetail.major }}
-                  </div>
-                </div>
-                <div class="col-2 header-sub-text">
-                  <div class="q-pb-md">วุฒิการศึกษา</div>
-                  <div>อื่นๆ</div>
-                </div>
-                <div class="col-3 sub-text">
-                  <div class="q-pb-md">
-                    {{ props.getdetail.degree ? props.getdetail.degree : "-" }}
-                  </div>
-                  <div>
-                    {{ props.getdetail.remark ? props.getdetail.remark : "-" }}
-                  </div>
-                </div>
-              </div>
+              <q-table
+                ref="table"
+                :rows="rows"
+                :columns="columns"
+                flat
+                bordered
+                class="custom-header-table"
+                virtual-scroll
+                :virtual-scroll-sticky-size-start="48"
+                dense
+              >
+              </q-table>
             </q-card>
           </div>
           <div class="contanier-box-mini">

src/modules/05_placement/store.ts

@@ -190,3 +190,66 @@ export const usePlacementDataStore = defineStore("placement", () => {
     DataUpdateMain,
   };
 });
+
+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) => {
+    DataMainUpdateOrder.value = [];
+
+    if (filter_1 === "" && filter_2 === "") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    } else if (filter_1 !== "" && filter_2 === "") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1
+      );
+    } else if (filter_1 !== "" && filter_2 !== "") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.OrderStatus === filter_2
+      );
+    } else if (filter_1 === "" && filter_2 !== "") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2
+      );
+    }
+  };
+
+  return {
+    placementOrderData,
+    changePlacementColumns,
+    DataMainYearOrder,
+    DataMainOrigOrder,
+    DataMainUpdateOrder,
+    DataUpdateOrder,
+    DataMainYearSetOrder,
+    DataMainOrder,
+  };
+});