วินัยเพิ่มผู้ถูกร้องเรียน

src/components/Dialogs/AddPersonal.vue

@@ -27,15 +27,15 @@ interface tableType {
 }
 
 const rows = ref<tableType[]>([]);
-const type = ref<string>("001");
+const type = ref<string>("idcard");
 const search = ref<string>("");
 const selected = ref<any>([]);
 const dataObject = ref<any>([]);
 
 const typeOps = ref<typeOp[]>([
-  { id: "001", name: "เลขประจำตัวประชาชน" },
+  { id: "idcard", name: "เลขประจำตัวประชาชน" },
-  { id: "002", name: "ชื่อ" },
+  { id: "firstname", name: "ชื่อ" },
-  { id: "003", name: "นามสกุล" },
+  { id: "lastname", name: "นามสกุล" },
 ]);
 
 /** หัวข้อที่เเสดงในตาราง */
@@ -101,6 +101,11 @@ const props = defineProps({
   modal: {
     type: Boolean,
     default: false,
+    required: true,
+  },
+  btnTitle: {
+    type: String,
+    default: "เพิ่ม",
   },
   title: {
     type: String,
@@ -113,10 +118,12 @@ const props = defineProps({
   close: {
     type: Function,
     default: () => console.log("not function"),
+    required: true,
   },
   save: {
     type: Function,
     default: () => console.log("not function"),
+    required: true,
   },
 });
 
@@ -227,8 +234,9 @@ onMounted(() => {
       <q-separator />
       <q-card-section class="q-pa-md bg-grey-1">
         <div class="row col-12 q-col-gutter-sm items-start">
-          <div class="col-12 col-sm-6 col-md-4">
+          <div class="col-12 col-sm-6 col-md-3">
             <q-select
+              label="ค้นหาจาก"
               v-model="type"
               :options="typeOps"
               emit-value
@@ -241,31 +249,23 @@ onMounted(() => {
             />
           </div>
 
-          <div class="col-12 col-sm-6 col-md-4">
+          <div class="col-12 col-sm-6 col-md-6">
             <q-input
               v-model="search"
               outlined
               clearable
               @update:model-value="updateInput"
               dense
-              :label="
+              label="คำค้น"
-                type === '001'
-                  ? 'ค้นหาจากเลขบัตรประชาชน'
-                  : type === '002'
-                  ? 'ค้นหาจากชื่อ'
-                  : type === '003'
-                  ? 'ค้นหาจากนามสกุล'
-                  : ''
-              "
             />
           </div>
 
-          <div class="col-12 col-sm-6 col-md-4">
+          <div class="col-12 col-sm-6 col-md-2">
             <q-btn
-              color="public"
+              color="primary"
+              icon="search"
               label="ค้นหา"
-              class="full-width"
+              class="full-width q-pa-sm"
-              style="padding: 7px 0 7px 0"
               @click="searchInput()"
             >
             </q-btn>
@@ -342,17 +342,15 @@ onMounted(() => {
       <div class="row justify-end q-px-md q-py-sm items-center">
         <q-btn
           dense
-          push
+          color="public"
-          unelevated
-          color="positive"
           id="onSubmit"
           class="q-px-md q-py-xs"
           @click="savePost"
         >
-          <q-icon left name="add" />
+          <!-- <q-icon left name="add" /> -->
-          <div>เพิ่ม</div>
+          <div>{{ props.btnTitle }}</div>
           <!-- icon="mdi-content-save-outline" -->
-          <q-tooltip>บันทึก</q-tooltip>
+          <q-tooltip>{{ props.btnTitle }}</q-tooltip>
         </q-btn>
       </div>
     </q-card>

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

@@ -7,13 +7,16 @@ import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
   FormData,
-  MyObjectComplaintsRef,DataAddRequest
+  MyObjectComplaintsRef,
+  DataAddRequest,
 } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 
+import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const fileDocDataUpload = ref<File[]>([]);
@@ -290,8 +293,9 @@ function onSubmit() {
 }
 
 /**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
-async function addDatainTable() {
+const modal = ref<boolean>(false);
-  console.log("test");
+const toggleModal = () => (modal.value = !modal.value);
+async function addPerson() {
   const listData: DataAddRequest[] = [
     {
       id: "001",
@@ -328,6 +332,7 @@ async function addDatainTable() {
     },
   ];
   await complainstStore.fetchComplainstAdd(listData);
+  toggleModal()
 }
 
 /**
@@ -450,10 +455,16 @@ onMounted(() => {
             <div class="full-width" v-if="formData.complainantType === '0'">
               <div class="row col-12 q-mb-xs">
                 <q-space />
-                <q-btn color="blue" outline @click="addDatainTable">
+                <q-btn color="blue" outline @click="toggleModal">
                   <q-icon left name="add" />
                   <div>เพิ่ม</div>
                 </q-btn>
+                <DialogAddPersonal
+                  :modal="modal"
+                  btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
+                  :close="toggleModal"
+                  :save="addPerson"
+                />
               </div>
               <div class="col-12">
                 <d-table