เอกสาร/ผลงาน => ปรับ การ upload file
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
700dcaee4a
commit
b3a4db71ea
4 changed files with 183 additions and 41 deletions
|
|
@ -1,9 +1,15 @@
|
|||
import env from "./index";
|
||||
|
||||
const development = `${env.API_URI}/development`;
|
||||
const urlFile = `${env.API_URI}/salary`;
|
||||
|
||||
export default {
|
||||
// portfolio
|
||||
portfolio: `${development}/portfolio`,
|
||||
portfolioId: (id: string) => `${development}/portfolio/${id}`,
|
||||
|
||||
file: (name: string, group: string, id: string) =>
|
||||
`${urlFile}/file/${name}/${group}/${id}`,
|
||||
fileByFile: (name: string, group: string, id: string, fileName: string) =>
|
||||
`${urlFile}/file/${name}/${group}/${id}/${fileName}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useRouter, useRoute } from "vue-router";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import axios from "axios";
|
||||
import type { QForm } from "quasar";
|
||||
|
||||
const router = useRouter();
|
||||
|
|
@ -20,8 +21,8 @@ const files = ref<any>();
|
|||
const name = ref("");
|
||||
const detail = ref("");
|
||||
const id = ref<string>("");
|
||||
const nameFile = ref<string>("");
|
||||
const routeName = router.currentRoute.value.name;
|
||||
const fileList = ref<any[]>([]);
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
|
|
@ -49,20 +50,13 @@ const saveData = async () => {
|
|||
*/
|
||||
const createTransfer = async () => {
|
||||
showLoader();
|
||||
// const formData = new FormData();
|
||||
// formData.append("name", name.value);
|
||||
// formData.append("detail", detail.value);
|
||||
// formData.append("file", files.value);
|
||||
await http
|
||||
.post(config.API.portfolio, { name: name.value, detail: detail.value })
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
router.push(`/portfolio`);
|
||||
.then(async (res) => {
|
||||
uploadFiles(res.data.result);
|
||||
})
|
||||
.catch((e: any) => {
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
|
@ -77,34 +71,111 @@ const fecthData = async (id: string) => {
|
|||
.get(config.API.portfolioId(id))
|
||||
.then((res: any) => {
|
||||
let data = res.data.result;
|
||||
name.value = data.organization;
|
||||
detail.value = data.reason;
|
||||
files.value = data.docs;
|
||||
name.value = data.name;
|
||||
detail.value = data.detail;
|
||||
fetchFile();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
|
||||
* function อัปโหลดไฟล์
|
||||
* @param id ผลงาน
|
||||
*/
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const filesNull = () => {
|
||||
files.value = null;
|
||||
};
|
||||
//อัปโหลดไฟล์
|
||||
const fileUploadDoc = async (file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
nameFile.value = file[0].name;
|
||||
files.value = file;
|
||||
};
|
||||
function uploadFiles(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id), {
|
||||
replace: true,
|
||||
fileList: [
|
||||
{
|
||||
fileName: files.value.name,
|
||||
},
|
||||
],
|
||||
})
|
||||
.then(async (res) => {
|
||||
console.log(res);
|
||||
const foundKey: string | undefined = Object.keys(res.data).find(
|
||||
(key) =>
|
||||
res.data[key]?.fileName !== undefined &&
|
||||
res.data[key]?.fileName !== ""
|
||||
);
|
||||
foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fileOpen(url: string) {
|
||||
window.open(url, "_blank");
|
||||
/**
|
||||
* function บันทึกไฟล์
|
||||
* @param uploadUrl บันทึกไฟล์
|
||||
*/
|
||||
function uploadFileURL(uploadUrl: string) {
|
||||
const Data = new FormData();
|
||||
Data.append("file", files.value);
|
||||
showLoader();
|
||||
axios
|
||||
.put(uploadUrl, files.value, {
|
||||
headers: {
|
||||
"Content-Type": files.value.type,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
router.push(`/portfolio`);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
files.value = null;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*function fetch รายการเอกสาร
|
||||
*/
|
||||
function fetchFile() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id.value))
|
||||
.then((res) => {
|
||||
fileList.value = res.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
|
||||
* @param fileName ชื่อไฟล์
|
||||
*/
|
||||
function fileOpen(fileName: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.fileByFile("รายการเอกสาร", "เอกสารผลงาน", id.value, fileName)
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.downloadUrl;
|
||||
window.open(data, "_blank");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -189,7 +260,7 @@ function fileOpen(url: string) {
|
|||
</div>
|
||||
<q-separator />
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key">
|
||||
<q-item v-for="file in fileList" :key="file.key">
|
||||
<q-item-section>
|
||||
{{ file.fileName }}
|
||||
</q-item-section>
|
||||
|
|
@ -199,7 +270,7 @@ function fileOpen(url: string) {
|
|||
round
|
||||
flat
|
||||
icon="mdi-download"
|
||||
@click="fileOpen(file.pathName)"
|
||||
@click="fileOpen(file.fileName)"
|
||||
></q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,14 @@ const currentPage = ref<number>(1);
|
|||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
|
|
@ -91,6 +98,22 @@ const clickAdd = async () => {
|
|||
const clickBack = () => {
|
||||
router.push(`/`);
|
||||
};
|
||||
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.portfolioId(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
fecthList();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -204,6 +227,7 @@ const clickBack = () => {
|
|||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
|
|
@ -217,20 +241,26 @@ const clickBack = () => {
|
|||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
<div v-else class="table_ellipsis2">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click.pervent="onDelete(props.row.id)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
@click="router.push(`/portfolio/` + props.row.id)"
|
||||
>
|
||||
<q-list>
|
||||
<q-card bordered flat>
|
||||
<q-list @click="router.push(`/portfolio/` + props.row.id)">
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
|
||||
:key="col.name"
|
||||
|
|
@ -248,6 +278,18 @@ const clickBack = () => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions vertical align="center">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="delete"
|
||||
@click.pervent="onDelete(props.row.id)"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -89,5 +89,28 @@ input.input-alert
|
|||
text-overflow: ellipsis
|
||||
width: 200px
|
||||
|
||||
.q-card__actions .q-btn--rectangle
|
||||
padding: 0 14px !important
|
||||
.q-card__actions .q-btn--rectangle
|
||||
padding: 0 14px !important
|
||||
|
||||
.table_ellipsis
|
||||
max-width: 200px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.table_ellipsis:hover
|
||||
word-wrap: break-word
|
||||
overflow: visible
|
||||
white-space: normal
|
||||
|
||||
.table_ellipsis2
|
||||
max-width: 25vw
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.table_ellipsis2:hover
|
||||
word-wrap: break-word
|
||||
overflow: visible
|
||||
white-space: normal
|
||||
transition: width 2s
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue