From c1b7bb424f836930370700c0c24080f49802a0ec Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 17 Jun 2025 16:44:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94/=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD=E0=B8=99?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A=E0=B9=84=E0=B8=9B=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 321 ++++++++++--------
 1 file changed, 177 insertions(+), 144 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index fa53bde..b1c980e 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -1,60 +1,64 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
+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 http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-import type { QForm } from "quasar"
+import type { QForm } from "quasar";
 
-import Workflow from "@/components/Workflow/Main.vue"
+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 $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 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
+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()
-		},
-		"ยืนยันการยื่นข้อมูลการโอน",
-		"ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
-	)
+  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()
-		})
+  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();
+    });
 }
 
 /**
@@ -62,21 +66,21 @@ async function createTransfer() {
  * @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()
-		})
+  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();
+    });
 }
 
 /**
@@ -84,104 +88,133 @@ async function fecthDataTransfer(id: string) {
  * @param url URL File
  */
 function fileOpen(url: string) {
-	window.open(url, "_blank")
+  window.open(url, "_blank");
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	if (route.params.id !== undefined) {
-		fecthDataTransfer(id.value)
-	}
-})
+  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 || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
-								/>
+  <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.push('/transfer')"
+        />
+        <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 || `${'กรุณากรอกเหตุผล'}`]"
-								/>
+                <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-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>
+                <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>
+                <!-- 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>
+          <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>