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

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);
-        props.fetchData();
-        props.close?.();
+        modalCommand.value = true;
+        modal.value = false;
       },
-      `ยืนยันการ${props.title}`,
-      `ต้องการยืนยันการ${props.title}หรือไม่`
+      "ยืนยันส่งไปออกคำสั่ง",
+      "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
     );
   }
 }
@@ -78,18 +78,22 @@ function onclickSend() {
 /** ปิด pop up */
 function onClickClose() {
   props.close?.();
+  filter.value = "";
+  selected.value = [];
 }
 
-watch([() => props.modal], () => {
-  inspectionResults.value = props.modal ? "" : "";
-  selected.value = props.modal ? [] : [];
-  if (props.modal === true) {
-    selected.value = props.checkedVal ? props.rows : [];
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      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">
-            <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
+              v-model="scope.selected"
+            />
           </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>