จัดโค้ด

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

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch, watchEffect } from "vue";
 import { useQuasar } from "quasar";
+
 /** import Type */
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type {
-  FormData,
-  MyObjectComplaintsRef,
-  ArrayFileList,
-} from "@/modules/11_discipline/interface/request/complaint";
+import type { FormData, MyObjectComplaintsRef, ArrayFileList } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
-import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+
 const $q = useQuasar();
 const fileDocDataUpload = ref<File[]>([]);
 
@@ -54,8 +52,8 @@ const resultRef = ref<Object | null>(null);
 
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-
 const fileList = ref<ArrayFileList[]>([]);
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -340,7 +338,10 @@ function changeFormData() {
   isSave.value = props.data != null ?? true;
 }
 
-function inputEdit(val:boolean){
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer ": val,
     "full-width cursor-pointer inputgreen": !val,
@@ -375,7 +376,7 @@ onMounted(() => {
               <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-4" id="respondentType">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="SelectrespondentType"
                     v-model="formData.respondentType"
                     ref="respondentTypeRef"
@@ -413,7 +414,7 @@ onMounted(() => {
                   id="organizationId"
                 >
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputOffice"
                     name="organizationId"
                     ref="organizationIdRef"
@@ -436,7 +437,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-4" id="consideredAgency">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     ref="consideredAgencyRef"
                     for="selectAgency"
                     dense
@@ -467,6 +468,7 @@ onMounted(() => {
                     </template>
                   </q-select>
                 </div>
+
                 <div
                   class="row col-12"
                   v-if="formData.respondentType === 'PERSON'"
@@ -495,6 +497,7 @@ onMounted(() => {
                       </q-btn>
                     </div>
                     <div class="col-12"><q-separator /></div>
+
                     <div class="col-xs-12 q-pa-sm">
                       <d-table
                         ref="table"
@@ -574,6 +577,7 @@ onMounted(() => {
                     </div>
                   </q-card>
                 </div>
+
                 <div class="col-xs-12 col-sm-12" id="title">
                   <q-input
                     for="inputTopicComplaint"
@@ -595,7 +599,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-12" id="description">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputDetail"
                     ref="descriptionRef"
                     dense
@@ -665,7 +669,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="levelConsideration">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectConsiderationLevel"
                     ref="levelConsiderationRef"
                     dense
@@ -743,7 +747,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="offenseDetails">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectOffenseDescription"
                     ref="offenseDetailsRef"
                     dense
@@ -817,7 +821,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="complaintFrom">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectReceivecomplaints"
                     ref="complaintFromRef"
                     dense
@@ -841,7 +845,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-12" id="appellant">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputPetitioner"
                     ref="appellantRef"
                     dense
@@ -859,7 +863,7 @@ onMounted(() => {
                 </div>
                 <div class="col-xs-12 col-sm-12">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     :readonly="isReadonly"
                     for="result"
                     ref="resultRef"
@@ -896,6 +900,7 @@ onMounted(() => {
         </div>
       </form>
     </div>
+    
     <!-- อัพโหลดไฟล์ -->
     <div class="col-sm-12 col-md-3">
       <q-card flat class="q-pa-md" bordered>