hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: form upload Attachment

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2026-02-03 15:08:24 +07:00
parent a8c3b77bce
commit 79d1a14ec4
1 changed files with 292 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

443
src/modules/18_command/components/Step/View0_Live.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, computed } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
@ -42,12 +42,23 @@ const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //
const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
// const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
// const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const isLoad = ref<boolean>(true); //แสดงโหลด
const modalPerView = ref<boolean>(false);
// สมมติว่ามีรายชื่อ
const attachmentList = ref<any[]>([]);
const attachmentFiles = ref<Record<number, any>>({});
const isFileTailer = computed(() => {
// จำนวนไฟล์ที่อัปโหลดครบทุกคน
return (
attachmentList.value.length > 0 &&
attachmentList.value.every((person) => !!attachmentFiles.value[person.id])
);
});
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@ -88,7 +99,9 @@ async function updateCheckboxAuthority(val: boolean) {
.put(config.API.command + `/pending-check/${commandId.value}`, {
sign: val,
})
.then(() => {})
.then(() => {
isAttachment.value && fetchLists();
})
.catch((err) => {
messageError($q, err);
})
@ -104,7 +117,7 @@ async function updateCheckboxAuthority(val: boolean) {
function onUploadFile(group: string) {
showLoader();
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
// let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
const fileName = { fileName: type };
http
.post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
@ -118,7 +131,11 @@ function onUploadFile(group: string) {
res.data[key]?.fileName !== ""
);
foundKey &&
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
(await uploadFileDoc(
res.data[foundKey]?.uploadUrl,
fileUploadOrder.value,
group
));
})
.catch((err) => {
messageError($q, err);
@ -134,7 +151,12 @@ function onUploadFile(group: string) {
* @param file ไฟล์ที่ต้องการอัปโหลด
* @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
*/
async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
async function uploadFileDoc(
uploadUrl: string,
file: any,
group: string,
profileId?: string
) {
const formData = new FormData();
formData.append("file", file);
showLoader();
@ -154,7 +176,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
if (group === "order") {
fileUploadOrder.value = null;
} else {
fileUploadTailer.value = null;
attachmentList.value.forEach((e) => {
if (e.id === profileId) {
e.file = null;
}
});
}
hideLoader();
});
@ -167,15 +193,40 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
async function fetchDoc(group: string) {
showLoader();
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
if (group === "order") {
await fetchDocOrder(type);
} else {
attachmentList.value.forEach(async (e) => {
await fetchDocTailer(type, e.id);
});
}
}
async function fetchDocOrder(type: string) {
await http
.get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
.then((res) => {
const data = res.data[0];
if (group === "order") {
fileOrder.value = data;
} else {
fileTailer.value = data;
}
fileOrder.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function fetchDocTailer(type: string, profileId: string) {
await http
.get(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, profileId))
.then((res) => {
const data = res.data[0];
attachmentList.value.forEach((e) => {
if (e.id === profileId) {
attachmentFiles.value[e.id] = data;
}
});
})
.catch((e) => {
messageError($q, e);
@ -190,18 +241,33 @@ const dataFile = ref<DataFileDownload>();
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string, isView: boolean = false) {
function downloadFile(
file: any,
group: string,
isView: boolean = false,
profileId: string
) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
const pathApi =
group === "order"
? config.API.fileByFile(
"ระบบออกคำสั่ง",
type,
commandId.value,
file.fileName
)
: config.API.subFileByFileName(
"ระบบออกคำสั่ง",
type,
commandId.value,
profileId,
file.fileName
);
showLoader();
http
.get(
config.API.fileByFile(
"ระบบออกคำสั่ง",
type,
commandId.value,
file.fileName
)
)
.get(pathApi)
.then((res) => {
const data = res.data;
dataFile.value = data;
@ -257,6 +323,49 @@ function onConfirmOrder() {
}
}
/** ดึงข้อมูล บุคคล */
async function fetchLists() {
await http
.get(config.API.commandAction(commandId.value, "tab2"))
.then(async (res) => {
const data = await res.data.result;
attachmentList.value = data.commandRecives.map((item: any) => ({
id: item.id,
name: item.prefix + item.firstName + " " + item.lastName,
file: null,
}));
})
.catch((e) => {
messageError($q, e);
});
}
function onUploadFileTailer(id: string, file: any) {
const type = "แนบท้าย";
const fileName = { fileName: type };
http
.post(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id), {
replace: true,
fileList: fileName,
})
.then(async (res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey &&
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, type, id));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
isCheckDraft.value = isDraft.value;
isCheckAuthority.value = isAuthority.value;
@ -264,6 +373,7 @@ onMounted(async () => {
isLoad.value = false;
let promises = [fetchDoc("order")];
if (isAttachment.value) {
await fetchLists();
promises.push(fetchDoc("tailer"));
}
await Promise.all(promises).finally(() => {
@ -318,141 +428,172 @@ onMounted(async () => {
/>
</div>
<div
class="row col-12 q-col-gutter-sm"
style="padding-left: 50px"
v-if="isAuthority"
>
<div class="row col-12" style="padding-left: 50px" v-if="isAuthority">
<div class="col-12 text-header">
อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
</div>
<div class="col-6">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-6 q-col-gutter-sm">
<div class="col-6">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileOrder, 'order', true)"
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="downloadFile(fileOrder, 'order')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="
downloadFile(fileOrder, 'order', true, '')
"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="
downloadFile(fileOrder, 'order', false, '')
"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('order')"
flat
round
icon="mdi-upload"
:color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadOrder == null"
/>
</template>
</q-file>
</div>
</q-card>
</div>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('order')"
flat
round
icon="mdi-upload"
:color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadOrder == null"
/>
</template>
</q-file>
</div>
</q-card>
</div>
<div class="col-6" v-if="isAttachment">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-6" v-if="isAttachment">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
<div
class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="red"
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-md" v-if="step === 2">
<q-file
outlined
dense
v-model="fileUploadTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="onUploadFile('tailer')"
flat
round
icon="mdi-upload"
:color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
:disable="fileUploadTailer == null"
/>
<q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</template>
</q-file>
</div>
</q-card>
เอกสารแนบท้าย
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md q-col-gutter-sm">
<div
v-for="(person, idx) in attachmentList"
:key="person.id"
class="col-12"
>
<q-card flat bordered class="q-pa-sm">
<div class="row items-center">
<div class="text-weight-medium">
{{ person.name }}
</div>
<q-space />
<q-btn
v-if="attachmentFiles[person.id]"
@click.prevent="
downloadFile(
attachmentFiles[person.id],
'tailer',
true,
person.id
)
"
flat
dense
color="primary"
icon="mdi-eye"
class="q-mr-xs"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="attachmentFiles[person.id]"
@click.prevent="
downloadFile(
attachmentFiles[person.id],
'tailer',
false,
person.id
)
"
flat
dense
color="red"
icon="mdi-download"
>
<q-tooltip>ดาวน์โหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file
v-if="step === 2"
outlined
dense
v-model="person.file"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
accept=".pdf"
:readonly="store.readonly"
class="full-width"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
@click.prevent="
onUploadFileTailer(person.id, person.file)
"
flat
round
icon="mdi-upload"
:color="person.file == null ? 'grey-5' : 'blue-5'"
:disable="person.file == null"
/>
<q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
</template>
</q-file>
</q-card>
</div>
</div>
</q-card>
</div>
</div>
</div>
@ -462,7 +603,7 @@ onMounted(async () => {
step === 2 &&
isAuthority &&
fileOrder &&
(!isAttachment || fileTailer)
(!isAttachment || isFileTailer)
"
>
<q-btn
@ -472,14 +613,14 @@ onMounted(async () => {
:color="
!isAuthority ||
fileOrder === null ||
(fileTailer === null && isAttachment)
(!isFileTailer && isAttachment)
? 'grey-5'
: 'public'
"
:disable="
!isAuthority ||
fileOrder === null ||
(fileTailer === null && isAttachment)
(!isFileTailer && isAttachment)
"
/>
</div>