UI *รอ API สำหรับส่งคนไปออกคำสั่ง PART 2

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -118,7 +118,8 @@ async function getDataComplaint() {
   await http
     .get(
       config.API.complaintbyGetId(
-        data.idComplaint ? data.idComplaint : store.complaintId,mainStore.pathComplaints(route.name as string)
+        data.idComplaint ? data.idComplaint : store.complaintId,
+        mainStore.pathComplaints(route.name as string)
       )
     )
     .then((res) => {
@@ -155,7 +156,12 @@ async function getDataComplaint() {
 function getData() {
   showLoader();
   http
-    .get(config.API.investigateByGetId(id.value,mainStore.pathInves(route.name as string)))
+    .get(
+      config.API.investigateByGetId(
+        id.value,
+        mainStore.pathInves(route.name as string)
+      )
+    )
     .then((res) => {
       const dataList = res.data.result;
       data.id = dataList.id;

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -434,7 +434,7 @@ function changeFormData() {
   isSave.value = true;
 
   if (organization.value) {
-    formData.organizationId = organization.value.id;
+    formData.organizationId = organization.value.id as string;
     formData.organization = organization.value.name;
   }
 }
@@ -1765,7 +1765,7 @@ onMounted(async () => {
   />
 
   <PopupSendToNext
-    :modal="modalPopup"
+    v-model:modal="modalPopup"
     :close="closePopup"
     title="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
     :rows="mainStore.rowsCheck"

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -517,7 +517,7 @@ function changeFormData() {
   }
 
   if (organization.value) {
-    formData.organizationId = organization.value.id;
+    formData.organizationId = organization.value.id as string;
     formData.organization = organization.value.name;
   }
 }
@@ -1954,7 +1954,7 @@ onMounted(async () => {
   />
 
   <PopupSendToNext
-    :modal="modalPopup"
+    v-model:modal="modalPopup"
     :close="closePopup"
     title="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
     :rows="mainStore.rowsCheck"

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -6,15 +6,19 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import type { DataPerson } from "@/modules/11_discipline/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 
 const $q = useQuasar();
 const route = useRoute();
+const storeCommand = useCommandMainStore();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -25,12 +29,18 @@ const {
   dialogMessageNotify,
 } = mixin;
 
+const commandType = ref<string>(""); //ตัวแปรเก็บคำสั่งที่เลือก
+const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
+
+const modalCommand = ref<boolean>(false);
 const optionsType = ref<[]>([]);
 const idPath = ref<string>(route.params.id as string);
 const type = ref<string>("");
 const rows = ref<DataPerson[]>([]);
 const selected = ref<ResponseData[]>([]);
 
+const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   data: {
     type: Object,
@@ -45,7 +55,6 @@ const props = defineProps({
     type: Array,
     default: [],
   },
-  Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
@@ -61,16 +70,15 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 function saveOrder() {
-  if (type.value) {
+  dialogConfirm(
-    dialogConfirm(
+    $q,
-      $q,
+    async () => {
-      () => Ordersave(),
+      modalCommand.value = true;
-      `ยืนยัน${props.title}`,
+      modal.value = false;
-      `ต้องการยืนยัน${props.title}ใช่หรือไม่?`
+    },
-    );
+    "ยืนยันส่งไปออกคำสั่ง",
-  } else {
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
-    dialogMessageNotify($q, "กรุณาเลือกประเภทคำสั่ง");
+  );
-  }
 }
 //ส่งไปออกคำสั่ง
 async function Ordersave() {
@@ -111,51 +119,50 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-//----(ดึงข้อมูลประเภทคำสั่ง)------//
+/**
-async function fecthTypeOption() {
+ * ฟิลเตอร์ คำสั่ง
-  showLoader();
+ * @param val ค่าจาก Input
-  await http
+ * @param update Funtion quasar
-    .get(config.API.typeOrder())
+ */
-    .then((res) => {
+function filterSelector(val: string, update: Function) {
-      optionsType.value = res.data.result.filter(
+  update(() => {
-        (e: OpType) =>
+    commandType.value = val ? "" : commandType.value;
-          e.commandCode === "C-PM-19" ||
+    commandOp.value = listCommand.value.filter(
-          e.commandCode === "C-PM-20" ||
+      (v: any) => v.name.indexOf(val) > -1
-          e.commandCode === "C-PM-27" ||
+    );
-          e.commandCode === "C-PM-28" ||
+  });
-          e.commandCode === "C-PM-29" ||
-          e.commandCode === "C-PM-30" ||
-          e.commandCode === "C-PM-31"
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-watchEffect(() => {
+/**
-  if (props.Modal === true) {
+ * เมื่อ props.modal เป็น true
-    selected.value = [];
+ * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
-    type.value = "";
+ */
-    rows.value = props.data.persons.filter(
-      (item: any) => item.status === "NEW"
-    );
-  }
-});
-
 watch(
-  () => props.title,
+  () => modal.value,
-  () => {
+  async () => {
-    fecthTypeOption();
+    if (modal.value === true) {
+      selected.value = [];
+      commandType.value = "";
+      rows.value = props.data.persons ? props.data.persons : [];
+
+      const data = await storeCommand.getCommandTypes();
+      listCommand.value = data.filter(
+        (v: any) =>
+          v.code == "C-PM-19" ||
+          v.code == "C-PM-20" ||
+          v.code == "C-PM-27" ||
+          v.code == "C-PM-28" ||
+          v.code == "C-PM-29" ||
+          v.code == "C-PM-30" ||
+          v.code == "C-PM-31"
+      );
+    }
   }
 );
 </script>
 
 <template>
-  <q-dialog v-model="props.Modal" persistent>
+  <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="props.title" :close="closeModal" />
       <q-separator />
@@ -164,25 +171,30 @@ watch(
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-select
-                outlined
+                v-model="commandType"
                 dense
-                v-model="type"
+                outlined
-                :options="optionsType"
                 label="ประเภทคำสั่ง"
-                style="width: 400px; max-width: auto"
+                :options="commandOp"
+                option-label="name"
+                option-value="code"
                 emit-value
                 map-options
-                option-label="name"
-                option-value="id"
                 use-input
-                ><template v-slot:no-option>
+                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>
+                </template></q-select
-              </q-select>
+              >
             </q-toolbar>
           </div>
 
@@ -241,6 +253,7 @@ watch(
               keep-color
               color="primary"
               dense
+              :disable="commandType"
               v-model="scope.selected"
             />
           </template>
@@ -251,6 +264,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
+                  :disable="commandType"
                   v-model="props.selected"
                 />
               </q-td>
@@ -280,10 +294,17 @@ watch(
         <q-btn
           :label="props.title"
           @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:any) => r.id)"
+  />
 </template>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -367,7 +367,7 @@ onMounted(async () => {
 
   <DialogSendToCommand
     :title="titlePopup"
-    v-model:Modal="modal"
+    v-model:modal="modal"
     :closeModal="closeModal"
     :rows2="[]"
     :columns="mainStore.columnsDirector"

src/modules/11_discipline/components/4_Result/Form.vue

@@ -13,7 +13,7 @@ import type {
   FormData,
   FormRef,
   DataOption,
-} from "@/modules/11_discipline/interface/request/result";
+} from "@/modules/11_discipline/interface/request/Result";
 
 import DialogHistory from "@/modules/11_discipline/components/4_Result/DialogHistory.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";

src/modules/11_discipline/components/PopupSendToNext.vue

@@ -2,22 +2,22 @@
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const { dialogConfirm, dialogMessageNotify } = mixin;
+
+const rows = ref<any[]>([]);
 const props = defineProps({
   title: {
     type: String,
     default: "ส่งไปสืบสวน",
   },
-  modal: {
-    type: Boolean,
-    require: true,
-  },
   close: {
     type: Function,
     require: true,
@@ -48,6 +48,7 @@ const props = defineProps({
   },
 });
 
+const modalCommand = ref<boolean>(false);
 const emit = defineEmits(["returnPerson"]);
 const selected = ref<any>([]);
 const inspectionResults = ref<string>("");
@@ -65,12 +66,11 @@ function onclickSend() {
     dialogConfirm(
       $q,
       async () => {
-        await emit("returnPerson", selected.value);
+        modalCommand.value = true;
-        props.fetchData();
+        modal.value = false;
-        props.close?.();
       },
-      `ยืนยันการ${props.title}`,
+      "ยืนยันส่งไปออกคำสั่ง",
-      `ต้องการยืนยันการ${props.title}หรือไม่`
+      "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
     );
   }
 }
@@ -78,18 +78,22 @@ function onclickSend() {
 /** ปิด pop up */
 function onClickClose() {
   props.close?.();
+  filter.value = "";
+  selected.value = [];
 }
 
-watch([() => props.modal], () => {
+watch(
-  inspectionResults.value = props.modal ? "" : "";
+  () => modal.value,
-  selected.value = props.modal ? [] : [];
+  () => {
-  if (props.modal === true) {
+    if (modal.value) {
-    selected.value = props.checkedVal ? props.rows : [];
+      inspectionResults.value = modal ? "" : "";
+      selected.value = [];
+    }
   }
-});
+);
 </script>
 <template>
-  <q-dialog v-model="props.modal">
+  <q-dialog v-model="modal">
     <q-card style="width: 820px; max-width: 80vw">
       <DialogHeader :tittle="props.title" :close="onClickClose" />
 
@@ -155,18 +159,13 @@ watch([() => props.modal], () => {
           v-model:selected="selected"
           :pagination="initialPagination"
         >
-          <template v-slot:header="props">
+          <template v-slot:header-selection="scope">
-            <q-tr :props="props">
+            <q-checkbox
-              <q-th auto-width> </q-th>
+              keep-color
-              <q-th
+              color="primary"
-                v-for="col in props.cols"
+              dense
-                :key="col.name"
+              v-model="scope.selected"
-                :props="props"
+            />
-                style="color: #000000; font-weight: 500"
-              >
-                <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">
@@ -195,10 +194,22 @@ watch([() => props.modal], () => {
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn :label="props.title" color="public" @click="onclickSend" />
+        <q-btn
+          :label="props.title"
+          color="public"
+          @click="onclickSend"
+          :disable="selected.length == 0"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- dialog สร้างคำสั่ง -->
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="'C-PM-32'"
+    :persons-id="selected.map((r:any) => r.id)"
+  />
 </template>
 
 <style scoped></style>

src/modules/18_command/components/DialogCreateCommand.vue

@@ -288,7 +288,6 @@ watch(modal, () => {
       <DialogHeader :tittle="'สร้าง/เลือกคำสั่ง'" :close="closeModal" />
 
       <q-separator />
-
       <q-card-section style="max-height: 50vh" class="scroll">
         <div class="row q-mb-md">
           <div class="col-12 q-gutter-md">