From df7c3f2961b528bf819acd0e5d8dee1f9f1a720f Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 27 Sep 2024 11:41:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=96=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=9E=E0=B8=B1=E0=B8=81=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalList/DialogOrders.vue  |   2 +-
 .../7_ListSuspend/DialogSendToCommand.vue     | 315 +++++++++---------
 .../components/7_ListSuspend/ListsPage.vue    |  51 +--
 .../11_discipline/store/SuspendStore.ts       |   4 +-
 4 files changed, 163 insertions(+), 209 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/DialogOrders.vue b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
index 475533f66..a151f22ae 100644
--- a/src/modules/05_placement/components/PersonalList/DialogOrders.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogOrders.vue
@@ -463,7 +463,7 @@ watch(
   <!-- dialog สร้างคำสั่ง -->
   <DialogCreateCommand
     v-model:modal="modalCommand"
-    :command-type-code="'C-PM-01'"
+    :command-type-code="commandType"
     :persons-id="selected.map((r) => r.id)"
   />
 </template>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
index 9fd2c8f17..47bc55040 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -1,34 +1,43 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
 import type { QTableProps } from "quasar";
-import type { OpType } from "@/modules/05_placement/interface/response/Main";
+import type { dataType } from "@/modules/11_discipline/interface/response/Suspend";
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 
 /** use */
 const $q = useQuasar();
-const selected = ref<any>([]);
+const storeCommand = useCommandMainStore();
 const mixin = useCounterMixin();
-const {
-  showLoader,
-  messageError,
-  dialogConfirm,
-  hideLoader,
-  dialogMessageNotify,
-} = mixin;
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:selected",
-  "returnPerson",
-]);
+const { dialogConfirm } = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const modalCommand = ref<boolean>(false); // ตัวแปร popup สร้างคำสั่ง
+
+const rows = ref<dataType[]>([]);
+const selected = ref<dataType[]>([]);
+
+const commandType = ref<string>(""); //ตัวแปรเก็บคำสั่งที่เลือก
+const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
+
+const filterKeyword = ref<string>("");
+/** props*/
+const props = defineProps<{
+  rows: dataType[];
+}>();
+
 /** คอลัมน์ */
-const columns2 = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "center",
@@ -86,7 +95,7 @@ const columns2 = ref<QTableProps["columns"]>([
 ]);
 
 /** คอลัมน์ที่แสดง */
-const visibleColumns2 = ref<string[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "name",
   "position",
@@ -96,184 +105,153 @@ const visibleColumns2 = ref<string[]>([
   "status",
 ]);
 
-/** props*/
-const props = defineProps({
-  modal: Boolean,
-  closeModal: Function,
-  getData: Function,
-  rows2: Array,
-  filterKeyword2: String,
-});
-
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-const type = ref<string>("");
-//----(ดึงข้อมูลประเภทคำสั่ง)------//
-const optionsType = ref<[]>([]);
-
-//popup ยืนยันส่งัว
-function saveOrder() {
-  if (type.value === "") {
-    dialogMessageNotify($q, "กรุณาเลือกประเภทคำสั่ง");
-  } else {
-    dialogConfirm(
-      $q,
-      async () => {
-        await emit("returnPerson", selected.value, type.value);
-        props.closeModal?.();
-        type.value = "";
-        selected.value = [];
-      },
-      `ยืนยันการส่งไปออกคำสั่ง`,
-      `ต้องการยืนยันการส่งไปออกคำสั่งหรือไม่`
-    );
-  }
+function closeModal() {
+  modal.value = false;
+  commandType.value = "";
+  filterKeyword.value = "";
 }
 
 /**
- * ส่งค่ากลับไปหน้าหลัก
- * @param value ค่าที่รับจาก input
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
  */
-function updateInput(value: any) {
-  emit("update:filterKeyword2", value);
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
 }
 
-//รีเซ็ตค่าในช่องค้นหา
-function Reset() {
-  emit("update:filterKeyword2", "");
+/** ฟังก์ชั่นยืนยันและส่งคนไปสร้างคำสั่ง */
+function saveOrder() {
+  dialogConfirm(
+    $q,
+    async () => {
+      modalCommand.value = true;
+      modal.value = false;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
 }
 
-async function fecthTypeOption() {
-  showLoader();
-  await http
-    .get(config.API.typeOrder())
-    .then((res) => {
-      optionsType.value = res.data.result.filter(
-        (e: OpType) =>
-          e.commandCode === "C-PM-25" || e.commandCode === "C-PM-26"
+/**
+ * เมื่อ props.modal เป็น true
+ * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      rows.value = props.rows ? props.rows : [];
+      selected.value = [];
+      const data = await storeCommand.getCommandTypes();
+      listCommand.value = data.filter(
+        (v: any) => v.code == "C-PM-25" || v.code == "C-PM-26"
       );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(() => {
-  fecthTypeOption();
-});
+    }
+  }
+);
 </script>
 
 <template>
-  <q-dialog v-model="props.modal">
+  <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pa-md">
-        <div class="row">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-select
-                outlined
-                dense
-                v-model="type"
-                :options="optionsType"
-                label="ประเภทคำสั่ง"
-                style="width: 400px; max-width: auto"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-                use-input
-                ><template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </q-toolbar>
-          </div>
+        <div class="row q-mb-sm">
+          <q-select
+            v-model="commandType"
+            dense
+            outlined
+            label="ประเภทคำสั่ง"
+            :options="commandOp"
+            option-label="name"
+            option-value="code"
+            emit-value
+            map-options
+            use-input
+            style="width: 350px; max-width: auto"
+            @update:model-value="selected = []"
+            @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn
+                    ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template></q-select
+          >
           <q-space />
 
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filterKeyword"
+            placeholder="ค้นหา"
+            style="width: 200px; max-width: auto"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filterKeyword = ''"
               />
-            </q-toolbar>
-          </div>
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            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="gt-xs q-ml-sm"
+          />
         </div>
 
         <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
           row-key="id"
-          :visible-columns="visibleColumns2"
+          :visible-columns="visibleColumns"
           selection="multiple"
           v-model:selected="selected"
         >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th auto-width> </q-th>
-              <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                style="color: #000000; font-weight: 500"
-              >
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              :disable="commandType"
+              v-model="scope.selected"
+            />
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td>
                 <q-checkbox
                   keep-color
                   color="primary"
                   dense
+                  :disable="commandType"
                   v-model="props.selected"
                 />
               </q-td>
@@ -281,8 +259,8 @@ onMounted(() => {
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <div>
-                  {{ col.value }}
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
             </q-tr>
@@ -294,10 +272,17 @@ onMounted(() => {
         <q-btn
           label="ส่งไปออกคำสั่ง"
           @click="saveOrder"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- dialog สร้างคำสั่ง -->
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="commandType"
+    :persons-id="selected.map((r:dataType) => r.id)"
+  />
 </template>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index ec3fd86b9..c2bf69938 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
-import type { dataType } from "@/modules/11_discipline/interface/response/suspend";
+import type { dataType } from "@/modules/11_discipline/interface/response/Suspend";
 import type { QTableProps } from "quasar";
 
 import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
@@ -38,7 +38,6 @@ const visibleColumns = ref<string[]>([
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@@ -124,7 +123,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
 
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
@@ -144,7 +142,6 @@ const pagination = ref({
 
 function resetFilter() {
   filterKeyword.value = "";
-  filterKeyword2.value = "";
   filterRef.value.focus();
   getList();
 }
@@ -163,6 +160,7 @@ function openModalOrder() {
       r.organization
   );
   rows2.value = dataMap;
+  console.log("🚀 ~ openModalOrder ~ rows2.value:", rows2.value);
 }
 
 /** ดึงข้อมูลหน้าหลัก */
@@ -176,41 +174,18 @@ async function getList() {
         filterKeyword.value
       )
     )
-    .then((res) => {
+    .then(async (res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      const data = res.data.result.data;
+      const data = await res.data.result.data;
       totalList.value = res.data.result.total;
-      dataStore.getData(data);
+      await dataStore.getData(data);
+      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
-    });
-}
-
-/**
- * ยืนยัน ส่งไปออกคำสั่ง
- * @param data ข้อมูลรายบุคคล
- */
-function onSubmit(data: dataType[], type: string) {
-  const dataMapId = data.map((item: dataType) => item.id);
-  showLoader();
-  http
-    .put(`${config.API.suspendReport()}/${type}`, {
-      id: dataMapId,
     })
-    .then((res) => {
-      success($q, `ส่งข้อมูลไปออกคำสั่งสำเร็จ`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      getList();
-    });
+    .finally(() => {});
 }
 
 function filterFn() {
@@ -235,8 +210,8 @@ watch(
 );
 
 /** เรียกใช้งานเมื่อเริ่มหน้าเว็ป */
-onMounted(() => {
-  getList();
+onMounted(async () => {
+  await getList();
   dataStore.columns = columns.value;
   dataStore.visibleColumns = visibleColumns.value;
 });
@@ -398,12 +373,6 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <DialogSendToCommand
-    v-model:modal="modal"
-    :closeModal="closeModal"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    @returnPerson="onSubmit"
-  />
+  <DialogSendToCommand v-model:modal="modal" :rows="rows2" />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/store/SuspendStore.ts b/src/modules/11_discipline/store/SuspendStore.ts
index 87ab0c475..eb81dd4d7 100644
--- a/src/modules/11_discipline/store/SuspendStore.ts
+++ b/src/modules/11_discipline/store/SuspendStore.ts
@@ -7,7 +7,7 @@ import type {
   listData,
   dataType,
   DataOption,
-} from "@/modules/11_discipline/interface/response/suspend";
+} from "@/modules/11_discipline/interface/response/Suspend";
 import type { QTableProps } from "quasar";
 
 export const useDisciplineSuspendStore = defineStore(
@@ -30,7 +30,7 @@ export const useDisciplineSuspendStore = defineStore(
      * จัดเรียงข้อมูลจาก API
      * @param data ข้อมูลจาก API
      */
-    function getData(data: listData[]) {
+    async function getData(data: listData[]) {
       const dataList: dataType[] = data.map((item: listData) => ({
         id: item.id,
         citizenId: item.citizenId,