pop up ยืมคืน

src/modules/07_insignia/components/3_result/Dialogbody.vue

@@ -30,6 +30,8 @@ const Datereceive = ref<Date | null>();
 const Datereturn = ref<Date | null>();
 const remark = ref<string>("");
 const nullii = ref<any>(null);
+const filesCheck = ref<string>("");
+const filesReturnCheck = ref<string>("");
 const props = defineProps({
   modal: Boolean,
   personId: String,
@@ -127,8 +129,8 @@ watch(props, () => {
     Datereceive.value = props.dataModal.dateReceiveInsignia;
     Datereturn.value = props.dataModal.dateReturnInsignia;
     OrganazationId.value = props.dataModal.orgReceiveInsignia;
-    files.value = props.dataModal.docReceiveInsignia
+    filesCheck.value = props.dataModal.docReceiveInsignia;
-    filesReturn.value =props.dataModal.docReturnInsignia
+    filesReturnCheck.value = props.dataModal.docReturnInsignia;
     OrganazationId2.value =
       Datereturn.value != null
         ? props.dataModal.orgReturnInsignia == null ||
@@ -213,8 +215,23 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-
+            <div v-if="filesCheck !== null" class="col-xs-12 col-sm-4">
-            <div class="col-xs-12 col-sm-4" v-if="files === null">
+              <q-btn
+                type="a"
+                outline
+                ripple
+                class="full-width"
+                target="_blank"
+                label="ดาวน์โหลดเอกสาร"
+                :href="filesCheck"
+                size="15px"
+                icon="mdi-download"
+                color="primary"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสาร รับเครื่องราชฯ</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-xs-12 col-sm-4" v-if="filesCheck === null">
               <q-file
                 outlined
                 dense
@@ -248,14 +265,6 @@ onMounted(() => {
                 :disable="dateCheckReceive !== null"
               />
             </div>
-            <q-btn
-                type="a"
-                target="_blank"
-                :href="files"
-                size="md" icon="mdi-download" flat round color="primary"
-              >
-                <q-tooltip>ดาวน์โหลดเอกสาร รับเครื่องราชฯ</q-tooltip>
-              </q-btn>
           </div>
 
           <div
@@ -311,7 +320,23 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-xs-12 col-sm-4" v-if="filesReturn === null">
+            <div v-if="filesReturnCheck !== null" class="col-xs-12 col-sm-4">
+              <q-btn
+              type="a"
+                outline
+                ripple
+                class="full-width"
+                target="_blank"
+                label="ดาวน์โหลดเอกสาร"
+                :href="filesReturnCheck"
+                size="15px"
+                icon="mdi-download"
+                color="primary"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสาร คืนเครื่องราชฯ</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-xs-12 col-sm-4" v-if="filesReturnCheck === null">
               <q-file
                 outlined
                 dense
@@ -345,14 +370,6 @@ onMounted(() => {
                 :disable="dateCheckReturn !== null"
               />
             </div>
-            <q-btn
-                type="a"
-                target="_blank"
-                :href="filesReturn"
-                size="md" icon="mdi-download" flat round color="primary"
-              >
-                <q-tooltip>ดาวน์โหลดเอกสาร คืนเครื่องราชฯ</q-tooltip>
-              </q-btn>
           </div>
         </div>
       </q-form>