แก้ฟอร์ม

src/modules/11_discipline/components/8_AppealComplain/EditPage.vue

@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type {
   EditDataList,
   HistoryStatusType,
-  fileObType,
+  FileObType,
 } from "@/modules/11_discipline/interface/response/appealComplain";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -25,7 +25,7 @@ const historyStatusOb = reactive<HistoryStatusType>({
   createdAt: "",
 });
 
-const fileOb = reactive<fileObType>({
+const fileOb = reactive<FileObType>({
   id: "",
   pathName: "",
   fileName: "",

src/modules/11_discipline/components/8_AppealComplain/Form.vue

@@ -42,7 +42,7 @@ const {
   success,
   messageError,
   dialogMessageNotify,
-  hideLoader
+  hideLoader,
 } = mixin;
 const dataStore = useAppealComplainStore();
 
@@ -55,7 +55,7 @@ const formData = reactive<any>({
   caseNumber: "",
   type: "",
   file: null,
-  disciplineComplaint_Appeal_Docs:[],
+  disciplineComplaint_Appeal_Docs: [],
   year: new Date().getFullYear().toString(),
 });
 
@@ -220,7 +220,7 @@ function confirmDelete(id: string) {
 
 watch(props.data, async () => {
   if (props.data !== null) {
-    isReadonly.value = true
+    isReadonly.value = true;
 
     formData.id = props.data.id;
     formData.title = props.data.title;
@@ -234,7 +234,8 @@ watch(props.data, async () => {
     formData.citizenId = props.data.citizenId;
     formData.profileId = props.data.profileId;
     formData.lastUpdatedAt = props.data.lastUpdatedAt;
-    formData.disciplineComplaint_Appeal_Docs = props.data.disciplineComplaint_Appeal_Docs
+    formData.disciplineComplaint_Appeal_Docs =
+      props.data.disciplineComplaint_Appeal_Docs;
     dataStore.getRow([
       {
         profileId: props.data.profileId,
@@ -274,8 +275,8 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="row">
+  <div class="row q-col-gutter-xs">
-    <div class="col-sm-12 col-md-12">
+    <div class="col-sm-12 col-md-9">
       <form @submit.prevent="validateForm">
         <q-card bordered>
           <div class="q-pa-md">
@@ -477,6 +478,7 @@ onMounted(() => {
                     outlined
                     :rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
                     lazy-rules
+                    hide-bottom-space
                     label="ประเภทคดี"
                   />
                 </div>
@@ -490,87 +492,9 @@ onMounted(() => {
                     :rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
                     lazy-rules
                     label="เลขที่คดี"
+                    hide-bottom-space
                   />
-                  
                 </div>
-                <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-              อัปโหลดไฟล์เอกสารหลักฐาน
-            </div>
-            <div class="col-12"><q-separator /></div>
-            <div class="col-12 q-pa-sm row">
-              <q-file
-                for="inputFiles"
-                class="col-11"
-                outlined
-                dense
-                v-model="formData.file"
-                @added="uploadFile"
-                label="ไฟล์เอกสารหลักฐาน"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf,.xlsx,.doc"
-                clearable
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-
-              <div class="col-1 self-center text-center">
-                <q-btn
-                  v-if="formData.file && isReadonly"
-                  size="14px"
-                  flat
-                  round
-                  dense
-                  color="add"
-                  icon="mdi-upload"
-                  @click="uploadFile"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-
-            <div v-if="formData.disciplineComplaint_Appeal_Docs.length > 0" class="col-xs-12 q-pa-sm row">
-                <q-list
-                  v-for="data in formData.disciplineComplaint_Appeal_Docs"
-                  :key="data.id"
-                  class="full-width"
-                  bordered
-                  separator
-                >
-                  <q-item clickable v-ripple>
-                    <q-item-section>{{ data.fileName }}</q-item-section>
-                    <q-space />
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="blue"
-                      icon="mdi-download"
-                      @click="downloadFile(data.pathName)"
-                      ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                    >
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="red"
-                      class="q-ml-sm"
-                      icon="mdi-delete-outline"
-                      @click="deleteFile(data.id)"
-                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                    >
-                  </q-item>
-                </q-list>
-              </div>
-              <div class="col-12 q-pa-sm" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
-          </q-card>
               </div>
             </div>
           </div>
@@ -585,13 +509,89 @@ onMounted(() => {
       </form>
     </div>
     <!-- อัพโหลดไฟล์ -->
-    <!-- <div class="col-sm-12 col-md-3">
+    <div class="col-sm-12 col-md-3">
-      <q-card flat bordered class="q-pa-md q-mb-sm">
+      <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-        <div class="col-xs-12">
+        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          อัปโหลดไฟล์เอกสารหลักฐาน
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="col-12 q-pa-sm row">
+          <q-file
+            for="inputFiles"
+            class="col-11"
+            outlined
+            dense
+            v-model="formData.file"
+            @added="uploadFile"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            lazy-rules
+            accept=".pdf,.xlsx,.doc"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
 
+          <div class="col-1 self-center text-center">
+            <q-btn
+              v-if="formData.file && isReadonly"
+              size="14px"
+              flat
+              round
+              dense
+              color="add"
+              icon="mdi-upload"
+              @click="uploadFile"
+              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+            >
+          </div>
+        </div>
+
+        <div
+          v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
+          class="col-xs-12 q-pa-sm row"
+        >
+          <q-list
+            v-for="data in formData.disciplineComplaint_Appeal_Docs"
+            :key="data.id"
+            class="full-width"
+            bordered
+            separator
+          >
+            <q-item clickable v-ripple>
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="blue"
+                icon="mdi-download"
+                @click="downloadFile(data.pathName)"
+                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+              >
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="red"
+                class="q-ml-sm"
+                icon="mdi-delete-outline"
+                @click="deleteFile(data.id)"
+                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+              >
+            </q-item>
+          </q-list>
+        </div>
+        <div class="col-12 q-pa-sm" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
         </div>
       </q-card>
-    </div> -->
+    </div>
   </div>
 
   <DialogAddPersonal

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -447,55 +447,15 @@ onMounted(async () => {
             </q-td>
             <td auto-width>
               <q-btn
-                icon="mdi-dots-vertical"
+                icon="mdi-pencil"
-                size="12px"
+                size="10px"
-                color="grey-7"
+                color="primary"
                 flat
                 round
                 dense
-                @click.stop
+                @click="openEditStatus(props.row)"
               >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
+               <q-tooltip>แก้ไขสถานะ</q-tooltip>
-                  <q-list dense style="min-width: auto">
-                    <q-item clickable @click="openEditStatus(props.row)">
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>แก้ไขสถานะ</q-tooltip>
-                        <q-icon color="primary" size="xs" name="mdi-pencil" />
-                      </q-item-section>
-                      <q-item-section>แก้ไขสถานะ</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>แก้ไขคำร้อง</q-tooltip>
-                        <q-icon color="primary" size="xs" name="mdi-pencil" />
-                      </q-item-section>
-                      <q-item-section>แก้ไขคำร้อง</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-tooltip>ดูรายละเอียดคำร้อง</q-tooltip>
-                        <q-icon
-                          color="blue"
-                          size="xs"
-                          name="mdi-information-outline"
-                        />
-                      </q-item-section>
-                      <q-item-section>ดูรายละเอียดคำร้อง</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
               </q-btn>
             </td>
           </q-tr>

src/modules/11_discipline/interface/response/appealComplain.ts

@@ -54,7 +54,7 @@ interface HistoryStatusType {
     status: string
     createdAt: string
 }
-interface fileObType {
+interface FileObType {
     id:string
     pathName:string
     fileName:string
@@ -75,4 +75,4 @@ interface EditStatusRef {
 }
 
 
-export type { MainList, RowList, MyObjectAppealRef, EditStatusRef,EditDataList,HistoryStatusType,fileObType,RowAddList };
+export type { MainList, RowList, MyObjectAppealRef, EditStatusRef,EditDataList,HistoryStatusType,FileObType,RowAddList };