form สืบสวนความผิด

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

@@ -2,7 +2,10 @@
 import { useRouter, useRoute } from "vue-router";
 import { onMounted, ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
+import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import type {
   FormData,
@@ -18,6 +21,7 @@ const investigateFactStore = useInvestigateFactStore();
 const mixin = useCounterMixin();
 const { filterFnOptionsType } = investigateFactStore;
 const { date2Thai, dialogConfirm } = mixin;
+const investigateDis = useInvestigateDisStore();
 
 const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
@@ -50,6 +54,8 @@ const props = defineProps({
   },
 });
 
+const filter = ref<string>("");
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
@@ -87,9 +93,13 @@ const objectInvestigate: MyObjectInvestigateRef = {
   causeText: causeTextRef,
 };
 
+const rows = ref([]);
 const statusStep = computed(() => {
   return route.name === "/discipline-disciplinaryEdit" ? true : false;
 });
+const initialPagination = ref<any>({
+  rowsPerPage: 0,
+});
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@@ -157,6 +167,20 @@ async function fetchDataDetail() {
     formData.causeText = props.data.results;
   }
 }
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+const type = ref<string>("");
+/** เปิด dialog */
+function onClickOpenPopup() {
+  modal.value = true;
+  filterKeyword2.value = "";
+}
+/** ฟังชั่นปิด dialog */
+function clickClose() {
+  modal.value = false;
+}
+
 onMounted(async () => {
   await fetchDataDetail();
   console.log(route.name);
@@ -310,7 +334,7 @@ watch(props.data, async () => {
             >
               วันที่สืบสวน
               <q-checkbox
-                v-if="data != null && statusStep === false"
+                v-if="formData.clickTime != null && statusStep === false"
                 for="#clickTime"
                 size="md"
                 v-model="formData.clickTime"
@@ -354,9 +378,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่เริ่มการสอบสวน'}`"
+                        :label="`${'วันที่เริ่มการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -434,9 +458,9 @@ watch(props.data, async () => {
                         "
                         :rules="[
                           (val) =>
-                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
                         ]"
-                        :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                        :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -455,6 +479,74 @@ watch(props.data, async () => {
           </q-card>
         </div>
 
+        <div class="row col-12">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            >
+              กรรมการ
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm"
+                icon="mdi-plus"
+                @click="onClickOpenPopup"
+              >
+                <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-12 q-pa-sm row">
+              <Table
+                class="col-12"
+                style="max-height: 80vh"
+                :rows="rows"
+                :columns="investigateDis.columnsDirector"
+                :filter="filter"
+                :visible-columns="investigateDis.visibleColumnsDirector"
+                v-model:inputfilter="filter"
+                v-model:inputvisible="investigateDis.visibleColumnsDirector"
+                :pagination="initialPagination"
+                :nornmalData="true"
+                :paging="true"
+                :titleText="''"
+              >
+                <template #columns="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'" class="table_ellipsis2">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else class="table_ellipsis2">
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                    <q-td>
+                      <q-btn
+                        dense
+                        size="12px"
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-delete"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                      </q-btn>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </Table>
+            </div>
+          </q-card>
+        </div>
+
         <!-- <div class="col-12">
           <q-input
             for="#complaintdetail"
@@ -570,12 +662,8 @@ watch(props.data, async () => {
       <q-separator />
       <div class="row col-12 q-pa-sm">
         <q-space />
-        <q-btn
-          id="onSubmit"
-          type="submit"
-          label="ยืนยันผลการสืบสวน"
-          color="secondary"
-          ><q-tooltip>ยืนยันผลการสืบสวน</q-tooltip></q-btn
+        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
         >
       </div>
     </form>
@@ -661,4 +749,12 @@ watch(props.data, async () => {
       </q-card>
     </div>
   </div>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="investigateDis.rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    v-model:type="type"
+  />
 </template>