Merge branch 'develop'

* develop:
  เพิ่มอัปโหลด
  download ข้อตกลง
  pdf
This commit is contained in:
Warunee Tamkoo 2025-02-21 13:56:29 +07:00
commit d3f50cf2f0
3 changed files with 301 additions and 2 deletions

View file

@ -73,6 +73,8 @@ export default {
developmentReQuestIDP: (id: string) => `${developmentOrg}/profile/development/registry/USER/${id}`,
developmentIDP: (id: string) => `${development}/main/registry/USER/${id}`,
kpiReject:(id:string)=>`${kpiEvaluation}/reject-agreement/${id}`
kpiReject:(id:string)=>`${kpiEvaluation}/reject-agreement/${id}`,
kpiReportList:(id:string)=>`${Kpi}/report/list/${id}`
};

View file

@ -2,6 +2,8 @@
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";
@ -19,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();
@ -29,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);
@ -472,6 +485,158 @@ async function getProfile() {
});
}
async function downloadReport() {
await http
.get(config.API.kpiReportList(id.value))
.then(async (res) => {
const data = res.data.result;
await genReport(
data,
"แบบกำหนดข้อตกลง" +
store.dataEvaluation.prefix +
store.dataEvaluation.firstName +
" " +
store.dataEvaluation.lastName
);
})
.catch((e) => {
messageError($q, e);
})
.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;
@ -707,6 +872,50 @@ 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="primary"
icon="download"
size="md"
@click="downloadReport()"
>
<q-tooltip
>ดาวนโหลดแบบกำหนดขอตกลงการประเมนผลสมฤทธของงานและพฤตกรรมการปฏราชการ</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>
@ -1036,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>

View file

@ -581,7 +581,7 @@ onMounted(async () => {
dense
v-model="documentFile"
label="ไฟล์เอกสารหลักฐาน"
accept=".pdf,.xlsx,.docx,.png,.jpg"
accept=".pdf"
clearable
>
<template v-slot:prepend>