เพิ่ม data ใน store ปรับ Ui

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
+                  {{ props.row.OrderStatus }}
-                    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"
-                  />
                 </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: "ยังไม่ได้ออกคำสั่ง",
+    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: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -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);
+  await DataStore.DataMainOrder(rows.value);
-  OriginalData.value = await DataStore.DataMainOrig;
+  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 OrderType = ref<string | null>(null);
 const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedOrderTypeValues: number[] = [];
+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) {
+    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-      OrderType.value = OrderType;
+    //   OrderTypeValue = OrderType;
-    }
+    // }
-
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-    if (!addedOrderTypeValues.includes(OrderType)) {
+      OrderTypeOption.push({
-      OrderTypeOption.push({ id: OrderType, name: OrderType.toString() });
+        id: OrderTypeValue,
-      addedOrderTypeValues.push(OrderType);
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
     }
+    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+    //   OrderTypeOption.push({
+    //     id: OrderTypeValue,
+    //     name: OrderTypeValue.toString(),
+    //   });
+    //   addedOrderTypeValues.push(OrderTypeValue);
+    // }
   }
 };
-
+const OrderStatus = ref<string | null>(null);
-const OrderStatus = ref<number | null>(0);
+const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+  DataStore.DataMainOrigOrder
+);
 const OrderStatusOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedOrderStatusValues: number[] = [];
+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) {
+    // if (
-      OrderStatus.value = OrderStatus;
+    //   OrderStatusValue === null ||
-    }
+    //   parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    // ) {
+    //   OrderStatusText.value = OrderStatusValue;
+    // }
 
-    if (!addedOrderStatusValues.includes(OrderStatus)) {
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
-      OrderStatusOption.push({ id: OrderStatus, name: OrderStatus.toString() });
+      OrderStatusOption.push({
-      addedOrderStatusValues.push(OrderStatus);
+        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.DataUpdateMainOrder(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

@@ -470,7 +470,7 @@ const pagination = ref({
 
 const optionSelect = ref<any>([
   { id: 1, name: "อีเมล" },
-  { id: 2, name: "แจ้งเตือน" },
+  { id: 2, name: "กล่องข้อความ" },
 ]);
 
 const visibleColumns = ref<String[]>([

src/modules/05_placement/store.ts

@@ -190,3 +190,64 @@ export const usePlacementDataStore = defineStore("placement", () => {
     DataUpdateMain,
   };
 });
+
+export const useOrderPlacementDataStore = defineStore("placement", () => {
+  interface placement {
+    mappingPosition: { columns: String[] };
+  }
+  const placementData = ref<placement>({
+    mappingPosition: { columns: [] },
+  });
+  const changePlacementColumns = (system: String, val: String[]) => {
+    if (system == "mappingPosition")
+      placementData.value.mappingPosition.columns = val;
+    localStorage.setItem("placement", JSON.stringify(placementData.value));
+  };
+
+  if (localStorage.getItem("placement") !== null) {
+    placementData.value = JSON.parse(localStorage.getItem("placement") || "{}");
+  }
+
+  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 DataUpdateMainOrder = (
+    filter_1: string | null,
+    filter_2: string | null
+  ) => {
+    DataMainUpdateOrder.value = [];
+
+    if (filter_1 === null && filter_2 === "0") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    } else if (filter_1 !== null && filter_2 === "0") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.Order === filter_1
+      );
+    } else if (filter_1 !== null && filter_2 !== "0") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.Order === filter_1 && item.OrderType === filter_2
+      );
+    } else if (filter_1 === null && filter_2 !== "0") {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2
+      );
+    }
+  };
+
+  return {
+    placementData,
+    changePlacementColumns,
+    DataMainYearOrder,
+    DataMainOrigOrder,
+    DataMainUpdateOrder,
+    DataUpdateMainOrder,
+    DataMainYearSetOrder,
+    DataMainOrder,
+  };
+});