ปรับ form สืบสวนข้อเท็จจริง

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import router from "@/router";
+import { useRouter, useRoute } from "vue-router";
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
@@ -11,6 +11,7 @@ import type {
 import { diffDates } from "@fullcalendar/core/internal";
 
 const $q = useQuasar();
+const route = useRoute();
 
 /**เรียกใช้ store */
 const investigateFactStore = useInvestigateFactStore();
@@ -67,6 +68,7 @@ const formData = reactive<FormData>({
   causeText: "",
   complaintStatus: "",
 });
+const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
@@ -85,6 +87,10 @@ const objectInvestigate: MyObjectInvestigateRef = {
   causeText: causeTextRef,
 };
 
+const statusStep = computed(() => {
+  return route.name === "/discipline-disciplinaryEdit" ? true : false;
+});
+
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -153,6 +159,7 @@ async function fetchDataDetail() {
 }
 onMounted(async () => {
   await fetchDataDetail();
+  console.log(route.name);
 });
 
 /**
@@ -181,11 +188,11 @@ watch(props.data, async () => {
 });
 </script>
 <template>
-  <q-card flat bordered class="q-mt-sm">
+  <q-card flat class="q-mt-sm">
     <form @submit.prevent="validateForm">
       <div class="q-pa-md q-col-gutter-md">
         <div class="col-xs-12 row items-center q-col-gutter-md">
-          <div class="col-6">
+          <!-- <div class="col-6">
             <q-select
               for="#fault"
               outlined
@@ -212,9 +219,9 @@ watch(props.data, async () => {
                 </q-item>
               </template>
             </q-select>
-          </div>
+          </div> -->
 
-          <div class="col-3">
+          <!-- <div class="col-3">
             <q-select
               for="#fault"
               outlined
@@ -241,10 +248,12 @@ watch(props.data, async () => {
                 </q-item>
               </template>
             </q-select>
-          </div>
+          </div> -->
 
           <div class="col-3">
             <q-select
+              :readonly="statusStep"
+              :disable="statusStep"
               for="#investigation"
               outlined
               hide-bottom-space
@@ -301,7 +310,7 @@ watch(props.data, async () => {
             >
               วันที่สืบสวน
               <q-checkbox
-                v-if="data != null"
+                v-if="data != null && statusStep === false"
                 for="#clickTime"
                 size="md"
                 v-model="formData.clickTime"
@@ -318,7 +327,7 @@ watch(props.data, async () => {
                 <div class="col-3" v-if="!formData.clickTime">
                   <datepicker
                     menu-class-name="modalfix"
-                    :readonly="isUpdate"
+                    :readonly="isUpdate && statusStep"
                     v-model="formData.date"
                     :locale="'th'"
                     autoApply
@@ -334,7 +343,7 @@ watch(props.data, async () => {
                         for="#date"
                         class="full-width cursor-pointer"
                         ref="dateRef"
-                        :readonly="isUpdate"
+                        :readonly="statusStep && isUpdate"
                         outlined
                         dense
                         lazy-rules
@@ -399,7 +408,7 @@ watch(props.data, async () => {
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.dateEnd"
-                    :readonly="isUpdate"
+                    :readonly="statusStep && isUpdate"
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
@@ -414,7 +423,7 @@ watch(props.data, async () => {
                         for="#dateEnd"
                         ref="dateEndRef"
                         class="full-width cursor-pointer"
-                        :readonly="isUpdate"
+                        :readonly="statusStep && isUpdate"
                         outlined
                         dense
                         lazy-rules
@@ -446,7 +455,7 @@ watch(props.data, async () => {
           </q-card>
         </div>
 
-        <div class="col-12">
+        <!-- <div class="col-12">
           <q-input
             for="#complaintdetail"
             class="full-width cursor-pointer"
@@ -463,9 +472,9 @@ watch(props.data, async () => {
             :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
             type="textarea"
           />
-        </div>
+        </div> -->
 
-        <div class="col-12">
+        <!-- <div class="col-12">
           <q-file
             for="#fileComplaint"
             outlined
@@ -481,7 +490,7 @@ watch(props.data, async () => {
               <q-icon name="attach_file" color="primary" />
             </template>
           </q-file>
-        </div>
+        </div> -->
 
         <div class="col-12">
           <q-input
@@ -500,30 +509,13 @@ watch(props.data, async () => {
           />
         </div>
 
-        <div class="col-12">
-          <q-file
-            for="#evidenceFiles"
-            outlined
-            dense
-            ref="evidenceFilesRef"
-            v-model="formData.evidenceFiles"
-            label="ไฟล์เอกสารหลักฐาน"
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-
         <div class="row col-12 q-col-gutter-md">
           <div class="col-3">
             <q-select
               for="#fault"
               outlined
               dense
+              :readonly="statusStep"
               lazy-rules
               ref="statusResultRef"
               v-model="formData.statusResult"
@@ -588,4 +580,76 @@ watch(props.data, async () => {
       </div>
     </form>
   </q-card>
+  <div class="col-12 row q-col-gutter-md q-mt-sm">
+    <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"
+        >
+          อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="col-xs-12 q-pa-sm row">
+          <q-file
+            class="col-11 q-mt-sm"
+            for="#evidenceFiles"
+            outlined
+            dense
+            ref="evidenceFilesRef"
+            v-model="formData.evidenceFiles"
+            label="ไฟล์เอกสารหลักฐาน"
+            lazy-rules
+            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <q-btn class="col q-mt-sm" flat round color="primary" icon="upload">
+            <q-tooltip>อัปโหลดเอกสารหลักฐาน</q-tooltip></q-btn
+          >
+        </div>
+        <div class="col-xs-12 q-pa-sm row">
+          <q-list bordered separator class="full-width">
+            <q-item
+              clickable
+              v-ripple
+              v-for="(file, index) in evidenceFiles"
+              :key="index"
+            >
+              <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+              <q-item-section avatar>
+                <div class="row">
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="blue"
+                      icon="mdi-download-outline"
+                    >
+                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      size="12px"
+                      color="red"
+                      icon="mdi-delete-outline"
+                      ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>