ต่อ api download การประชุม

This commit is contained in:
AnandaTon 2023-12-22 17:37:36 +07:00
parent dce124735a
commit ee0233a27e
3 changed files with 137 additions and 90 deletions

View file

@ -1,7 +1,7 @@
import env from "../index"; import env from "../index";
const evaluateDirectorMain = `${env.API_URI}/evaluation/director`; const evaluateDirectorMain = `${env.API_URI}/evaluation/director`;
const evaluation = `${env.API_URI}/evaluation`; const evaluation = `${env.API_URI}/evaluation`;
const evaluationFile = `${env.API_URI}/evaluation/document` const evaluationFile = `${env.API_URI}/evaluation/document`;
export default { export default {
evaluateDirectorMain: () => `${evaluateDirectorMain}`, evaluateDirectorMain: () => `${evaluateDirectorMain}`,
evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`, evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`,
@ -10,7 +10,13 @@ export default {
`${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`, `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
meeting: () => `${evaluation}/meeting`, meeting: () => `${evaluation}/meeting`,
meetingById: (id: string) => `${evaluation}/meeting/${id}`, meetingById: (id: string) => `${evaluation}/meeting/${id}`,
meetingFilebyId: (volume: string, id: string) =>
`${evaluation}/document/${volume}/${id}`,
meetingFileDowloadbyId: (volume: string, id: string, file: string) =>
`${evaluation}/document/${volume}/${id}/${file}`,
evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`, evaluationFilebyId: (volume: string, id: string, file: string) =>
evaluationFileListbyId:(volume:string,id:string) => `${evaluationFile}/${volume}/${id}` `${evaluationFile}/${volume}/${id}/${file}`,
evaluationFileListbyId: (volume: string, id: string) =>
`${evaluationFile}/${volume}/${id}`,
}; };

View file

@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { import type {
FormData, FormData,
FormRef, FormRef,
@ -9,7 +10,8 @@ import type {
} from "@/modules/12_evaluatePersonal/interface/index/meeting"; } from "@/modules/12_evaluatePersonal/interface/index/meeting";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const route = useRoute();
const id = ref<string>(route.params.id as string);
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
@ -42,10 +44,11 @@ const emit = defineEmits(["formDataReturn"]);
*/ */
// //
const idCard = ref<string>(""); const idCard = ref<string>("");
const file = ref<any>();
const fileOj = reactive<FileOj[]>([]); const fileOj = reactive<FileOj[]>([]);
const formData = reactive<FormData>({ const formData = reactive<FormData>({
id: "",
rounded: "", rounded: "",
dateMeeting: "", dateMeeting: "",
dateMeetingStart: null, dateMeetingStart: null,
@ -53,7 +56,7 @@ const formData = reactive<FormData>({
consider: "", consider: "",
period: "", period: "",
title: "", title: "",
file: fileOj, // file: fileOj,
}); });
/** /**
@ -63,6 +66,7 @@ const formData = reactive<FormData>({
*/ */
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formData.id = props.data.id;
formData.rounded = props.data.rounded; formData.rounded = props.data.rounded;
formData.dateMeetingStart = props.data.dateMeetingStart; formData.dateMeetingStart = props.data.dateMeetingStart;
formData.dateMeetingEnd = props.data.dateMeetingEnd; formData.dateMeetingEnd = props.data.dateMeetingEnd;
@ -71,45 +75,6 @@ watch(props.data, async () => {
formData.title = props.data.title; formData.title = props.data.title;
}); });
// /**
// *
// */
// function addEmployee() {
// if (idCard.value.length === 13) {
// console.log("idCard===>", idCard.value);
// showLoader();
// http
// .post(config.API.profileSearchPersonal(), {
// fieldName: "idcard",
// keyword: idCard.value,
// })
// .then((res) => {
// const dataApi = res.data.result;
// if (dataApi.length > 0) {
// const dataList = dataApi[0];
// formData.rounded = dataList.rounded;
// formData.dateMeeting = dataList.dateMeeting;
// formData.consider = dataList.consider;
// formData.period = dataList.period;
// } else {
// dialogMessageNotify($q, "");
// }
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// });
// }
// if (idCard.value.length !== 13) {
// hideLoader();
// dialogMessageNotify($q, " 13 ");
// } else {
// console.log("nodata");
// }
// }
/** /**
* ตรวจสอบขอมลกอนสงไปย api * ตรวจสอบขอมลกอนสงไปย api
*/ */
@ -146,29 +111,85 @@ function onValidate() {
} }
} }
function uploadFile() { const fileData = ref<any>([]);
// const Data = new FormData(); /**
// Data.append("file", formData.file); * งคาจาก api
// showLoader(); */
// http const fetchDataFile = async () => {
// .put(config.API.appealUpLoadFile(formData.id), Data) if (id.value != undefined) {
// .then((res) => { showLoader();
// console.log(res); await http
// success($q, ""); .get(config.API.meetingFilebyId("การประชุม", id.value))
// props.getData(); .then((res) => {
// // router.push(`/discipline/complaints`); // const dataFile = res.data.result;
// }) const dataFile = res.data;
// .catch((e) => { fileData.value = dataFile;
// messageError($q, e); })
// }) .catch((e) => {
// .finally(async () => { messageError($q, e);
// hideLoader(); })
// formData.file = null; .finally(() => {
// }); hideLoader();
} });
}
};
function downloadFile(link: string) { /**
window.open(link, "_blank"); * function download
*/
const fileDataDownload = ref<any>([]);
const fetchDataFileDownload = async (pathName: string) => {
console.log(fileData.value[0].fileName);
if (id.value !== undefined) {
showLoader();
console.log(fileData.value[0].fileName);
await http
.get(config.API.meetingFileDowloadbyId("การประชุม", id.value, pathName))
.then((res) => {
const dataFile = res.data;
fileDataDownload.value = dataFile;
window.open(fileDataDownload.value.downloadUrl);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* addFiles
*/
function uploadFile() {
fetchDataFile();
if (file) {
const fileList = [
{
fileName: file.value.name,
metadata: {
tag: "value",
},
},
];
const requestBody = {
replace: false,
fileList: fileList,
};
showLoader();
http
.post(config.API.meetingFilebyId("การประชุม", id.value), requestBody)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
file.value = null;
setTimeout(() => fetchDataFile(), 500);
});
}
} }
function deleteFile(id: string) { function deleteFile(id: string) {
@ -179,19 +200,19 @@ function deleteFile(id: string) {
* นย ลบ ไฟล * นย ลบ ไฟล
* @param id id file * @param id id file
*/ */
function confirmDelete(id: string) { function confirmDelete(fileName: string) {
// showLoader(); showLoader();
// http http
// .delete(config.API.appealDeleteFile(formData.id, id)) .delete(config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName))
// .then((res) => { .then((res) => {
// success($q, ``); success($q, `ลบไฟล์สำเร็จ`);
// }) })
// .catch((e) => { .catch((e) => {
// messageError($q, e); messageError($q, e);
// }) })
// .finally(() => { .finally(() => {
// props.getData(); setTimeout(() => fetchDataFile(), 1000);
// }); });
} }
//checkDate //checkDate
@ -211,6 +232,12 @@ function inputEdit(val: boolean) {
"full-width cursor-pointer inputgreen": !val, "full-width cursor-pointer inputgreen": !val,
}; };
} }
/**Hook */
onMounted(() => {
setTimeout(() => fetchDataFile(), 500);
// fetchDataFileDownload();
});
</script> </script>
<template> <template>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
@ -354,7 +381,7 @@ function inputEdit(val: boolean) {
class="col-11" class="col-11"
outlined outlined
dense dense
v-model="formData.file" v-model="file"
@added="uploadFile" @added="uploadFile"
label="ไฟล์เอกสารหลักฐาน" label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space hide-bottom-space
@ -369,22 +396,22 @@ function inputEdit(val: boolean) {
<div class="col-1 self-center text-center"> <div class="col-1 self-center text-center">
<q-btn <q-btn
v-if="formData.file && isReadonly"
size="14px" size="14px"
flat flat
round round
dense dense
color="add" color="add"
icon="mdi-upload" icon="mdi-upload"
v-if="file"
@click="uploadFile" @click="uploadFile"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn ><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
> >
</div> </div>
</div> </div>
<div class="col-12 q-pa-sm row" v-if="fileData.length > 0">
<div v-if="formData.file.length > 0" class="col-12 q-pa-sm row"> <!-- v-if="file.length > 0" v-else -->
<q-list <q-list
v-for="data in formData.file" v-for="data in fileData"
:key="data.id" :key="data.id"
class="full-width" class="full-width"
bordered bordered
@ -400,7 +427,7 @@ function inputEdit(val: boolean) {
dense dense
color="blue" color="blue"
icon="mdi-download" icon="mdi-download"
@click="downloadFile(data.pathName)" @click="fetchDataFileDownload(data.fileName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn ><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
> >
<q-btn <q-btn
@ -411,7 +438,7 @@ function inputEdit(val: boolean) {
color="red" color="red"
class="q-ml-sm" class="q-ml-sm"
icon="mdi-delete-outline" icon="mdi-delete-outline"
@click="deleteFile(data.id)" @click="deleteFile(data.fileName)"
><q-tooltip>ลบไฟล</q-tooltip></q-btn ><q-tooltip>ลบไฟล</q-tooltip></q-btn
> >
</q-item> </q-item>

View file

@ -13,7 +13,14 @@ interface MainList {
date: string; date: string;
} }
interface ArrayFileList {
id: string;
pathName: string;
fileName: string;
}
interface FormData { interface FormData {
id: string;
rounded: string; rounded: string;
dateMeeting: string; dateMeeting: string;
dateMeetingStart: Date | null; dateMeetingStart: Date | null;
@ -21,7 +28,7 @@ interface FormData {
consider: string; consider: string;
period: string; period: string;
title: string; title: string;
file: FileOj[]; // file: FileOj[];
} }
interface FileOj { interface FileOj {
@ -38,4 +45,11 @@ interface FormRef {
period: object | null; period: object | null;
[key: string]: any; [key: string]: any;
} }
export type { DataResponseList, MainList, FormData, FormRef, FileOj }; export type {
DataResponseList,
MainList,
FormData,
FormRef,
FileOj,
ArrayFileList,
};