hrms-user/src/modules/02_transfer/views/AddTransfer.vue

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"

import http from "@/plugins/http"
import config from "@/app.config"
import { useCounterMixin } from "@/stores/mixin"

import type { QForm } from "quasar"

import Workflow from "@/components/Workflow/Main.vue"

const $q = useQuasar()
const route = useRoute()
const router = useRouter()
const mixin = useCounterMixin()
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin

const id = ref<string>(router.currentRoute.value.name === "addTransfer" ? "" : route.params.id.toString()) //id path

const files = ref<any>() //ไฟล์
const tranferOrg = ref<string>("") //ชื่อหน่วยงานที่ขอโอนไป
const noteReason = ref<string>("") //เหตุผล
const routeName = router.currentRoute.value.name //ชื่อ path

/** Dialog Save */
async function saveData() {
	dialogConfirm(
		$q,
		() => {
			createTransfer()
		},
		"ยืนยันการยื่นข้อมูลการโอน",
		"ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
	)
}

/** ฟังก์ชั่นสร้างขอโอน */
async function createTransfer() {
	showLoader()
	const formData = new FormData()
	formData.append("Organization", tranferOrg.value)
	formData.append("Reason", noteReason.value)
	formData.append("file", files.value)
	await http
		.post(config.API.listtransfer(), formData)
		.then(res => {
			router.push(`/transfer/` + res.data.result)
			success($q, "บันทึกข้อมูลสำเร็จ")
		})
		.catch(e => {
			messageError($q, e)
		})
		.finally(() => {
			hideLoader()
		})
}

/**
 * ฟังก์ชั่นเรียกข้อมูลจาก Api
 * @param id ไอดีของข้อมูล
 */
async function fecthDataTransfer(id: string) {
	showLoader()
	await http
		.get(config.API.transferByid(id))
		.then((res: any) => {
			let data = res.data.result
			tranferOrg.value = data.organization
			noteReason.value = data.reason
			files.value = data.docs
		})
		.catch((e: any) => {
			messageError($q, e)
		})
		.finally(() => {
			hideLoader()
		})
}

/**
 * Func เปิดไฟล์
 * @param url URL File
 */
function fileOpen(url: string) {
	window.open(url, "_blank")
}

/**
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
onMounted(() => {
	if (route.params.id !== undefined) {
		fecthDataTransfer(id.value)
	}
})
</script>

<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<div class="toptitle text-white col-12 row items-center">
				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
				<div v-if="routeName == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
				<div v-else>รายละเอียดเรื่องขอโอน</div>
			</div>
			<q-form class="col-12" greedy @submit.prevent @validation-success="saveData">
				<q-card bordered>
					<q-card-section>
						<div class="row">
							<div class="col-12 row q-col-gutter-sm">
								<q-input
									:class="routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'"
									dense
									outlined
									v-model="tranferOrg"
									hide-bottom-space
									label="หน่วยงานที่ขอโอนไป"
									:readonly="routeName != 'addTransfer'"
									:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
								/>

								<q-input
									:class="routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'"
									dense
									outlined
									v-model="noteReason"
									label="เหตุผล"
									hide-bottom-space
									type="textarea"
									:readonly="routeName != 'addTransfer'"
									:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
								/>

								<div class="col-12 row" v-if="routeName == 'addTransfer'">
									<q-file
										v-model="files"
										class="col-xs-12 col-sm-12 inputgreen"
										outlined
										dense
										lazy-rules
										hide-bottom-space
										accept=".pdf"
										:rules="[(val: string) => !!val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
										label="เอกสารเพิ่มเติม"
									>
										<template v-slot:prepend> <q-icon name="attach_file" /> </template
									></q-file>
								</div>

								<div class="col-12 row" v-if="routeName != 'addTransfer'">
									<q-card bordered flat class="full-width">
										<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
											<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
										</div>
										<q-separator />
										<q-list separator>
											<q-item v-for="file in files" :key="file.key">
												<q-item-section>
													{{ file.fileName }}
												</q-item-section>
												<q-item-section avatar>
													<q-btn color="teal-5" round flat icon="mdi-download" @click="fileOpen(file.pathName)"></q-btn>
												</q-item-section>
											</q-item>
										</q-list>
									</q-card>
								</div>

								<!-- Workflow -->
								<div class="col-12" v-if="routeName != 'addTransfer'">
									<Workflow :id="id" :sys-name="`SYS_TRANSFER_REQ`" />
								</div>
							</div>
						</div>
					</q-card-section>

					<q-separator v-if="routeName == 'addTransfer'" />
					<q-card-actions align="right" v-if="routeName == 'addTransfer'">
						<q-btn color="primary" label="ยื่นเรื่องขอโอน" type="onsubmit" />
					</q-card-actions>
				</q-card>
			</q-form>
		</div>
	</div>
</template>