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

<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>
			<div class="col-12">
				<q-card bordered>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-12">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เรื่องขอโอน</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="tranferOrg" label="หน่วยงานที่ขอโอนไป" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12" dense outlined v-model="noteReason" label="เหตุผล" type="textarea" :readonly="routeName != 'addTransfer'" />
									<q-separator />
									<q-uploader
										class="col-xs-12 col-sm-12"
										accept=".jpg,.png,.pdf,.csv,.doc"
										url="http://localhost:4444/upload"
										label="เอกสารเพิ่มเติม"
										multiple
										@added="fileUploadDoc"
										style="max-width: px"
									/>

									<!-- <q-file
										class="col-xs-12 col-sm-12"
										outlined
										dense
										multiple
										v-model="file"
										label="เอกสารเพิ่มเติม"
										hide-bottom-space
										accept=".jpg,.png,.pdf,.csv,.doc"
										lazy-rules
										:rules="[val => val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
									>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file> -->
								</div>
							</q-card>
						</div>
					</div>
					<!-- <div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-8 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลการดํารงตําแหน่ง</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="typeServant" label="ประเภทข้าราชการ(สามัญ/ครู)" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="position" label="ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="level" label="ระดับ" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="positionNum" label="ตําแหน่งเลขที่" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="ฝ่าย/กลุ่มงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliation" label="ส่วนที่สังกัด (ถ้ามี)" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliationPart" label="ส่วนราชการที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="OrganizationPart" label="หน่วยงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="servantAge" label="อายุราชการ" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="salary" label="อัตราเงินเดือน" :readonly="routeName != 'addTransfer'" />
									<q-input class="col-12 col-sm-6" dense outlined v-model="extraSalary" label="เงินเพิ่มพิเศษ" :readonly="routeName != 'addTransfer'" />
									<q-input
										class="col-12"
										dense
										outlined
										v-model="positionHistory"
										label="ประวัติการดํารงตําแหน่ง (ดึงข้อมูลจากระบบทะเบียนประวัติในส่วนของการแต่งตั้งย้ายเลื่อน)"
										:readonly="routeName != 'addTransfer'"
									/>
									<q-input class="col-12" dense outlined v-model="transfer" label=" ประวัติเกี่ยวกับวินัย" type="textarea" :readonly="routeName != 'addTransfer'" />
								</div>
								<div class="col-xs-12 col-sm-8 row">
									<q-card bordered flat>
										<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ตําแหน่ง ระดับ เลขที่ตําแหน่ง และสังกัดที่ขอโอน</div>
										<q-separator />
										<div class="col-12 row q-pa-sm q-col-gutter-sm">
											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="positionNew" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="salaryNew" label="ระดับ" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12 col-sm-6" dense outlined v-model="transfer" label="เลขที่ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12 col-sm-6" dense outlined v-model="note" label="สังกัดที่ขอโอน" :readonly="routeName != 'addTransfer'" />
											<q-input class="col-12" dense outlined v-model="note" label="เหตุผลที่ขอโอน" type="textarea" :readonly="routeName != 'addTransfer'" />
										</div>
									</q-card>
								</div>
							</q-card>
						</div>
						<div class="col-xs-12 col-sm-4 row">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐานที่แนบ</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-file
										class="col-xs-12 col-sm-12"
										outlined
										dense
										v-model="fileEdu"
										label="สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)"
										hide-bottom-space
										lazy-rules
										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)']"
									>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
									<q-file
										class="col-xs-12 col-sm-12"
										outlined
										dense
										v-model="fileKorkor1"
										label="สําเนาประวัติราชการ (ก.ก.1)"
										hide-bottom-space
										lazy-rules
										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาประวัติราชการ (ก.ก.1)']"
									>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
									<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="สําเนาเอกสารหลักฐานอื่นๆ" hide-bottom-space lazy-rules>
										<template v-slot:prepend>
											<q-icon name="attach_file" />
										</template>
									</q-file>
								</div>
							</q-card>
							<div class="col-xs-12 col-sm-12 row">
								<q-card bordered flat>
									<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ความเห็น</div>
									<q-separator />
									<div class="col-12 row q-pa-sm q-col-gutter-sm">
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นผู้บังคับบัญชาชั้นต้น (หัวหน้าฝ่าย/กลุ่มงาน)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นผู้บังคับบัญชาเหนือขึ้นไป (ผู้อํานวยการส่วน) (ถ้ามี)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
										<q-input
											class="col-12 col-sm-12"
											dense
											outlined
											v-model="note"
											label="ความเห็นหัวหน้าส่วนราชการผู้ขอโอน (ผอ. กอง)"
											type="textarea"
											:readonly="routeName != 'addTransfer'"
										/>
									</div>
								</q-card>
							</div>
						</div>
					</div>
					<q-separator />
					<div class="col-xs-12 col-sm-12 row">
						<q-card bordered flat>
							<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐาน</div>
							<q-separator />
							<div class="col-12 row q-pa-sm q-col-gutter-sm">
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEdu"
									label="หนังสือถึงหน่วยงานที่รับโอน"
									hide-bottom-space
									lazy-rules
									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']"
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileKorkor1"
									label="หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ"
									hide-bottom-space
									lazy-rules
									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ']"
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือถึงสพท. เพื่อตรวจสอบภาระผูกพันกับกรุงเทพมหานครเกี่ยวกับการลาศึกษาอบรมของข้าราชการ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือถึงผู้จัดการสหกรณ์ออมทรัพย์กทม. เพื่อตรวจสอบหนี้สินและภาระผูกพันของข้าราชการ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="หนังสือสําคัญการโอนอัตราและจ่ายเงินเดือนสําหรับรับรองการจ่ายเงินเดือนครั้งสุดท้ายและโอนอัตราเงินเดือนตามตัวไปตั้งจ่าย"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file
									class="col-xs-12 col-sm-12"
									outlined
									dense
									v-model="fileEtc"
									label="แบบประเมินประสิทธิภาพและประสิทธิผลการปฏิบัติงานของข้าราชการพลเรือนสามัญ"
									hide-bottom-space
									lazy-rules
								>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือรับรองวันลา" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือขอโอนจากกทม. ถึงหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือตอบรับการโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="คําสั่งรับโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
									<template v-slot:prepend>
										<q-icon name="attach_file" />
									</template>
								</q-file>
							</div>
						</q-card>
					</div>
					<q-separator /> -->
					<div class="row col-12 q-pa-sm" v-if="routeName == 'addTransfer'">
						<q-space />
						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="saveTransfer" />
					</div>
				</q-card>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"

const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin
const fileDocDataUpload = ref<File[]>([])
const route = useRoute()
const files = ref<any>()
const tranferOrg = ref("")
const noteReason = ref("")
const id = ref<string>("")

const routeName = router.currentRoute.value.name

onMounted(() => {
	if (route.params.id !== undefined) {
		id.value = route.params.id.toString()
		fecthDataTransfer(id.value)
	}
})

const saveTransfer = () => {
	$q.dialog({
		title: "ยืนยันการยื่นข้อมูลลาออก",
		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
		cancel: {
			flat: true,
			color: "negative",
		},
		persistent: true,
	})
		.onOk(async () => {
			createTransfer()
		})
		.onCancel(() => {})
		.onDismiss(() => {})
}

const createTransfer = async () => {
	const formData = new FormData()
	formData.append("Organization", tranferOrg.value)
	formData.append("Reason", noteReason.value)
	formData.append("file", files.value)
	console.log(formData)
	await http
		.post(config.API.listtransfer(), formData)
		.then((res: any) => {
			console.log(res)
			success($q, "บันทึกข้อมูลสำเร็จ")
			router.push(`/transfer`)
		})
		.catch((e: any) => {
			messageError($q, e)
			console.log(e)
		})
}

const fecthDataTransfer = async (id: string) => {
	showLoader()
	await http
		.get(config.API.transferByid(id))
		.then((res: any) => {
			let data = res.data.result
			// console.log(data);
			tranferOrg.value = data.organization
			noteReason.value = data.reason
			files.value = data.file
		})
		.catch((e: any) => {
			messageError($q, e)
		})
		.finally(() => {
			hideLoader()
		})
}

const fileUploadDoc = async (files: any) => {
	fileDocDataUpload.value.push(files)
}
</script>