popup ส่งไปสืบสวน

src/modules/11_discipline/components/1_Complaint/Popup.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 
+const $q = useQuasar();
+
+import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 const complainstStore = useComplainstDataStore();
+
+const mixin = useCounterMixin();
+const { dialogConfirm, success } = mixin;
+
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -103,12 +111,34 @@ const visibleColumns = ref<string[]>([
 ]);
 
 const selected = ref<any>([]);
+const inspectionResults = ref<string>("");
+const inputRef = ref<any>(null);
 
-console.log(complainstStore.rowsAdd);
+function onclickSend() {
+  inputRef.value.validate();
+  if (!inputRef.value.hasError) {
+    dialogConfirm(
+      $q,
+      async () => {
+        success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
+        console.log(selected.value);
+
+        props.close?.();
+      },
+      "ยืนยันการส่งไปสืบสวน",
+      "ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
+    );
+  }
+}
 
 function onClickClose() {
   props.close?.();
 }
+
+watch([() => props.modal], () => {
+  inspectionResults.value = props.modal ? "" : "";
+  selected.value.push(complainstStore.rowsAdd);
+});
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -138,6 +168,8 @@ function onClickClose() {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
+          selection="multiple"
+          v-model:selected="selected"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -146,7 +178,7 @@ function onClickClose() {
                   keep-color
                   color="primary"
                   dense
-                  v-model="selected"
+                  v-model="props.selected"
                 />
               </q-th>
               <q-th
@@ -166,7 +198,7 @@ function onClickClose() {
                   keep-color
                   color="primary"
                   dense
-                  v-model="selected"
+                  v-model="props.selected"
                 />
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -180,15 +212,17 @@ function onClickClose() {
             </q-tr>
           </template>
         </d-table>
-        <div class="col-xs-12 col-sm-12 q-mt-sm" id="title">
+        <div class="col-xs-12 col-sm-12 q-mt-sm">
           <q-input
-            for="input"
+            for="inputInspectionResults"
+            ref="inputRef"
             dense
             outlined
             hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+            v-model="inspectionResults"
+            :rules="[(val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน']"
             lazy-rules
-            label="เรื่องร้องเรียน"
+            label="ผลการตรวจสอบเรื่องร้องเรียน"
             type="textarea"
             rows="5"
           />
@@ -196,7 +230,7 @@ function onClickClose() {
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="มีมูลส่งไปสืบสวน" color="public" />
+        <q-btn label="มีมูลส่งไปสืบสวน" color="public" @click="onclickSend" />
       </q-card-actions>
     </q-card>
   </q-dialog>