Update 11_WorkInternationalForm.vue

เพิ่ม อัพโหลด ดาว์นโหลด

src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue

@@ -2,11 +2,15 @@
 import { ref, reactive, watch } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
 
+const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, dialogConfirm } = mixin
 const edit = ref<boolean>(true)
+const filesUpload = ref<any>(null)
 const halfDay = ref<string>("day")
+const isSave = ref<boolean>(true)
 const props = defineProps({
 	data: {
 		type: Object,
@@ -71,6 +75,23 @@ function onValidate() {
 		props.onSubmit()
 	}
 }
+
+function onSubmit() {
+	dialogConfirm(
+		$q,
+		async () => {
+			if (isSave.value === false) {
+				props.onSubmit()
+				console.log(formData)
+				isSave.value = true
+			} else {
+				console.log("savefile อัปโหลด", filesUpload.value)
+			}
+		},
+		!isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์",
+		!isSave.value ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
+	)
+}
 </script>
 
 <template>
@@ -236,10 +257,39 @@ function onValidate() {
 				</q-card>
 			</div>
 		</div>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		<div v-if="isSave" class="q-mt-md">
+			<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+			<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัพโหลดแบบฟอร์ม</div>
+			<q-card class="bg-grey-1 q-pa-sm" bordered>
+				<div class="row">
+					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+						<div class="column q-mx-xs">
+							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
+							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
+						</div>
+					</div>
+					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
+						<div class="column q-mx-xs">
+							<div class="q-pl-sm text-weight-bold text-dark text-center">อัพโหลด</div>
+							<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" color="primary" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+					<div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="filesUpload" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
+					</div>
+				</div>
+			</q-card>
+		</div>
+		<div v-if="!isSave">
+			<q-separator class="q-mt-sm" />
+			<div class="row col-12 q-pt-md">
+				<q-space />
+				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+			</div>
 		</div>
 	</form>
 </template>