เพิ่มอัปโหลด
This commit is contained in:
setthawutttty
parent
c19c8a5966
commit
8d8babbfd9
1 changed files with 258 additions and 4 deletions
|
|
@ -3,6 +3,7 @@ import { ref, onMounted, reactive } from "vue";
|
|||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import axios from "axios";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -20,6 +21,12 @@ import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
|
|||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
|
||||
|
||||
interface ArrayFileList {
|
||||
id: string;
|
||||
pathName: string;
|
||||
fileName: string;
|
||||
}
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -30,11 +37,16 @@ const {
|
|||
dialogConfirm,
|
||||
success,
|
||||
findOrgName,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
|
||||
const modalUpload = ref<boolean>(false);
|
||||
const fileUpload = ref<any>(null);
|
||||
const fileList = ref<ArrayFileList[]>([]);
|
||||
|
||||
const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
|
||||
const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
|
||||
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
||||
|
|
@ -480,7 +492,7 @@ async function downloadReport() {
|
|||
const data = res.data.result;
|
||||
await genReport(
|
||||
data,
|
||||
"แบบรายงานผลการปฏิบัติราชการ " +
|
||||
"แบบกำหนดข้อตกลง" +
|
||||
store.dataEvaluation.prefix +
|
||||
store.dataEvaluation.firstName +
|
||||
" " +
|
||||
|
|
@ -493,6 +505,138 @@ async function downloadReport() {
|
|||
.finally(() => {});
|
||||
}
|
||||
|
||||
async function uploadReport() {
|
||||
modalUpload.value = true;
|
||||
getData();
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
modalUpload.value = false;
|
||||
fileUpload.value = null;
|
||||
}
|
||||
|
||||
/** ฟังชั่น อัปโหลดไฟล์ */
|
||||
async function clickUpload(file: any) {
|
||||
const fileName = { fileName: file.name };
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
const selectedFile = file;
|
||||
const formdata = new FormData();
|
||||
formdata.append("file", selectedFile);
|
||||
await http
|
||||
.post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
|
||||
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 &&
|
||||
uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
},
|
||||
"ยืนยันการอัปโหลดไฟล์",
|
||||
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* อัปโหลดไฟล์
|
||||
* @param uploadUrl url
|
||||
* @param file ไฟล์
|
||||
*/
|
||||
async function uploadFileDoc(uploadUrl: string, file: any) {
|
||||
const Data = new FormData();
|
||||
Data.append("file", fileUpload.value);
|
||||
await axios
|
||||
.put(uploadUrl, file, {
|
||||
headers: {
|
||||
"Content-Type": file.type,
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
await getData();
|
||||
success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
fileUpload.value = null;
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล */
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
|
||||
.then((res) => {
|
||||
fileList.value = res.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ลบไฟล์
|
||||
* @param fileName file name
|
||||
*/
|
||||
function deleteFile(fileName: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(
|
||||
config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
|
||||
)
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getData();
|
||||
|
||||
setTimeout(() => {
|
||||
success($q, `ลบไฟล์สำเร็จ`);
|
||||
hideLoader();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ดาวน์โหลดลิงก์ไฟล์
|
||||
* @param fileName file name
|
||||
*/
|
||||
function downloadFile(fileName: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
|
||||
.then((res) => {
|
||||
const data = res.data.downloadUrl;
|
||||
window.open(data, "_blank");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
showLoader();
|
||||
store.isUpdate = false;
|
||||
|
|
@ -730,11 +874,11 @@ onMounted(async () => {
|
|||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus !== 'NEW' ||
|
||||
store.dataEvaluation.evaluationStatus !== 'NEW' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_EVALUATOR' ||
|
||||
'NEW_EVALUATOR' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_COMMANDER' ||
|
||||
'NEW_COMMANDER' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_COMMANDER_HIGH'
|
||||
"
|
||||
|
|
@ -750,6 +894,28 @@ onMounted(async () => {
|
|||
>ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus !== 'NEW' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_EVALUATOR' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_COMMANDER' &&
|
||||
store.dataEvaluation.evaluationStatus !==
|
||||
'NEW_COMMANDER_HIGH'
|
||||
"
|
||||
unelevated
|
||||
round
|
||||
color="grey-2"
|
||||
text-color="blue"
|
||||
icon="upload"
|
||||
size="md"
|
||||
@click="uploadReport()"
|
||||
>
|
||||
<q-tooltip
|
||||
>อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1079,6 +1245,94 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalUpload" persistent>
|
||||
<q-card class="col-12" style="width: 60vw">
|
||||
<DialogHeader
|
||||
tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row col-12 q-col-gutter-y-sm">
|
||||
<div class="col-12 row" v-if="fileList.length == 0">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
class="col-12"
|
||||
outlined
|
||||
dense
|
||||
v-model="fileUpload"
|
||||
label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
|
||||
hide-bottom-space
|
||||
accept=".pdf"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
size="14px"
|
||||
v-if="fileUpload"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="primary"
|
||||
icon="mdi-upload"
|
||||
@click="clickUpload(fileUpload)"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div v-if="fileList.length > 0" class="col-xs-12 row">
|
||||
<q-list class="full-width rounded-borders" bordered separator>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
v-for="data in fileList"
|
||||
:key="data.id"
|
||||
class="items-center"
|
||||
>
|
||||
<q-item-section>{{ data.fileName }}</q-item-section>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="blue"
|
||||
icon="mdi-download"
|
||||
@click="downloadFile(data.fileName)"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="red"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-delete-outline"
|
||||
@click="deleteFile(data.fileName)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<DialogGovernment v-model:modal="modalGovernment" />
|
||||
</template>
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue