erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: install prettier

Browse Source
This commit is contained in:
Viet An
2026-05-04 15:22:27 +07:00
parent 93d29ca7d8
commit bd58e2b847
267 changed files with 22950 additions and 13581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
app/components/application/ContractPaymentUpload.vue
View File

@@ -1,17 +1,29 @@
<template>
<div>
<!-- Loading Overlay -->
<div v-if="isLoading" class="loading-overlay">
<div
v-if="isLoading"
class="loading-overlay"
>
<div class="loader"></div>
</div>
<!-- View Mode Toggle -->
<div class="mb-5 pb-3" style="border-bottom: 2px solid #e8e8e8;">
<div class="buttons has-addons ">
<button @click="viewMode = 'list'" :class="['button', viewMode === 'list' ? 'is-primary' : 'is-light']">
<div
class="mb-5 pb-3"
style="border-bottom: 2px solid #e8e8e8"
>
<div class="buttons has-addons">
<button
@click="viewMode = 'list'"
:class="['button', viewMode === 'list' ? 'is-primary' : 'is-light']"
>
Danh sách
</button>
<button @click="viewMode = 'gallery'" :class="['button', viewMode === 'gallery' ? 'is-primary' : 'is-light']">
<button
@click="viewMode = 'gallery'"
:class="['button', viewMode === 'gallery' ? 'is-primary' : 'is-light']"
>
Thư viện
</button>
</div>
@@ -19,8 +31,11 @@
<!-- Phase Document Types List -->
<div v-if="phasedoctypes && phasedoctypes.length > 0">
<div v-for="doctype in phasedoctypes" :key="doctype.id" class="mb-6">
<div
v-for="doctype in phasedoctypes"
:key="doctype.id"
class="mb-6"
>
<!-- Document Type Header with Upload Button -->
<div class="level is-mobile mb-4">
<div class="level-left">
@@ -34,9 +49,9 @@
<div class="level-item">
<FileUpload
v-if="$getEditRights()"
:type="['file', 'image', 'pdf']"
@files="(files) => handleUpload(files, doctype.doctype)"
position="right"
:type="['file', 'image', 'pdf']"
@files="(files) => handleUpload(files, doctype.doctype)"
position="right"
/>
</div>
</div>
@@ -45,112 +60,195 @@
<!-- List View -->
<div v-if="viewMode === 'list'">
<div v-if="getFilesByDocType(doctype.doctype).length > 0">
<div v-for="file in getFilesByDocType(doctype.doctype)" :key="file.id"
<div
v-for="file in getFilesByDocType(doctype.doctype)"
:key="file.id"
class="is-flex is-justify-content-space-between is-align-items-center py-3 px-4 has-background-warning has-text-white"
style="border-bottom: #e8e8e8 solid 1px; transition: all 0.2s ease; opacity: 0.95; cursor: pointer;"
style="border-bottom: #e8e8e8 solid 1px; transition: all 0.2s ease; opacity: 0.95; cursor: pointer"
@mouseenter="$event.currentTarget.style.opacity = '1'"
@mouseleave="$event.currentTarget.style.opacity = '0.95'">
<div style="flex: 1; min-width: 0;">
<p class="is-size-7 has-text-weight-semibold has-text-white mb-1" style="word-break: break-word;">
@mouseleave="$event.currentTarget.style.opacity = '0.95'"
>
<div style="flex: 1; min-width: 0">
<p
class="is-size-7 has-text-weight-semibold has-text-white mb-1"
style="word-break: break-word"
>
{{ file.name || file.file__name }}
</p>
<p class="is-size-7 has-text-white-bis">
{{ $formatFileSize(file.file__size) }} • {{ $dayjs(file.create_time).format("DD/MM/YYYY HH:mm") }}
{{ $formatFileSize(file.file__size) }} •
{{ $dayjs(file.create_time).format("DD/MM/YYYY HH:mm") }}
</p>
</div>
<div class="buttons are-small ml-3">
<button @click="viewFile(file)" class="button has-background-white has-text-primary ">
<button
@click="viewFile(file)"
class="button has-background-white has-text-primary"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'view.svg',
type: 'success',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'view.svg',
type: 'success',
size: 18,
}"
></SvgIcon>
</span>
</button>
<button @click="downloadFile(file)" class="button has-background-white has-text-primary ">
<button
@click="downloadFile(file)"
class="button has-background-white has-text-primary"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'download.svg',
type: 'success',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'download.svg',
type: 'success',
size: 18,
}"
></SvgIcon>
</span>
</button>
<button @click="deleteFile(file.id)" class="button has-background-white has-text-danger ">
<button
@click="deleteFile(file.id)"
class="button has-background-white has-text-danger"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'bin.svg',
type: 'danger',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'bin.svg',
type: 'danger',
size: 18,
}"
></SvgIcon>
</span>
</button>
</div>
</div>
</div>
<div v-else class="has-text-grey-light is-size-7 has-text-centered py-5">
<div
v-else
class="has-text-grey-light is-size-7 has-text-centered py-5"
>
Chưa có file nào
</div>
</div>
<!-- Gallery View -->
<div v-if="viewMode === 'gallery'">
<div v-if="getFilesByDocType(doctype.doctype).length > 0" class="columns is-multiline is-variable is-2">
<div v-for="file in getFilesByDocType(doctype.doctype)" :key="file.id"
class="column is-half-tablet is-one-third-desktop">
<div class="has-background-warning has-text-white"
style="border-radius: 6px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(50, 115, 220, 0.2);"
@mouseenter="$event.currentTarget.style.transform = 'translateY(-4px)'; $event.currentTarget.style.boxShadow = '0 6px 16px rgba(50, 115, 220, 0.3)'"
@mouseleave="$event.currentTarget.style.transform = 'translateY(0)'; $event.currentTarget.style.boxShadow = '0 2px 8px rgba(50, 115, 220, 0.2)'">
<div
v-if="getFilesByDocType(doctype.doctype).length > 0"
class="columns is-multiline is-variable is-2"
>
<div
v-for="file in getFilesByDocType(doctype.doctype)"
:key="file.id"
class="column is-half-tablet is-one-third-desktop"
>
<div
class="has-background-warning has-text-white"
style="
border-radius: 6px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(50, 115, 220, 0.2);
"
@mouseenter="
$event.currentTarget.style.transform = 'translateY(-4px)';
$event.currentTarget.style.boxShadow = '0 6px 16px rgba(50, 115, 220, 0.3)';
"
@mouseleave="
$event.currentTarget.style.transform = 'translateY(0)';
$event.currentTarget.style.boxShadow = '0 2px 8px rgba(50, 115, 220, 0.2)';
"
>
<div
style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(255, 255, 255, 0.1); min-height: 140px;">
<div v-if="isImage(file.file__name)"
style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
<img :src="`${$getpath()}static/files/${file.file__file}`" :alt="file.file__name"
style="max-width: 100%; max-height: 100%; object-fit: contain;">
style="
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(255, 255, 255, 0.1);
min-height: 140px;
"
>
<div
v-if="isImage(file.file__name)"
style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
>
<img
:src="`${$getpath()}static/files/${file.file__file}`"
:alt="file.file__name"
style="max-width: 100%; max-height: 100%; object-fit: contain"
/>
</div>
<div v-else class="has-text-white-ter" style="font-size: 48px; line-height: 1;">
<div
v-else
class="has-text-white-ter"
style="font-size: 48px; line-height: 1"
>
FILE
</div>
</div>
<div style="padding: 12px 16px;">
<p class="is-size-7 has-text-weight-semibold has-text-white mb-1" :title="file.file__name"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div style="padding: 12px 16px">
<p
class="is-size-7 has-text-weight-semibold has-text-white mb-1"
:title="file.file__name"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>
{{ file.file__name }}
</p>
<p class="is-size-7 has-text-white-bis mb-3">{{ $formatFileSize(file.file__size) }}</p>
<p class="is-size-7 has-text-white-bis mb-3">
{{ $formatFileSize(file.file__size) }}
</p>
<div class="buttons are-small is-centered">
<button @click="viewFile(file)" class="button has-background-white has-text-primary ">
<button
@click="viewFile(file)"
class="button has-background-white has-text-primary"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'view.svg',
type: 'success',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'view.svg',
type: 'success',
size: 18,
}"
></SvgIcon>
</span>
</button>
<button @click="downloadFile(file)" class="button has-background-white has-text-primary ">
<button
@click="downloadFile(file)"
class="button has-background-white has-text-primary"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'download.svg',
type: 'success',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'download.svg',
type: 'success',
size: 18,
}"
></SvgIcon>
</span>
</button>
<button @click="deleteFile(file.id)" class="button has-background-white has-text-danger ">
<button
@click="deleteFile(file.id)"
class="button has-background-white has-text-danger"
>
<span class="icon">
<SvgIcon v-bind="{
name: 'bin.svg',
type: 'danger',
size: 18,
}"></SvgIcon>
<SvgIcon
v-bind="{
name: 'bin.svg',
type: 'danger',
size: 18,
}"
></SvgIcon>
</span>
</button>
</div>
@@ -158,7 +256,10 @@
</div>
</div>
</div>
<div v-else class="has-text-grey-light is-size-7 has-text-centered py-5">
<div
v-else
class="has-text-grey-light is-size-7 has-text-centered py-5"
>
Chưa có file nào
</div>
</div>
@@ -166,11 +267,19 @@
</div>
<!-- If no phase doctypes -->
<div v-else-if="!isLoading" class="has-text-centered py-6">
<div
v-else-if="!isLoading"
class="has-text-centered py-6"
>
<p class="has-text-grey-light is-size-7">Chưa có loại tài liệu được định nghĩa cho giai đoạn này.</p>
</div>
<Modal @close="showmodal = undefined" @modalevent="handleModalEvent" v-bind="showmodal" v-if="showmodal"></Modal>
<Modal
@close="showmodal = undefined"
@modalevent="handleModalEvent"
v-bind="showmodal"
v-if="showmodal"
></Modal>
</div>
</template>
@@ -184,7 +293,7 @@ export default {
props: {
row: {
type: Object,
required: true
required: true,
},
},
data() {
@@ -194,7 +303,7 @@ export default {
isLoading: false,
showmodal: undefined,
phasedoctypes: [],
viewMode: 'list',
viewMode: "list",
};
},
async created() {
@@ -221,9 +330,14 @@ export default {
if (!this.transaction?.phase) return;
try {
const phasedoctypesData = await $getdata('phasedoctype', {
phase: this.transaction.phase,
}, undefined, false);
const phasedoctypesData = await $getdata(
"phasedoctype",
{
phase: this.transaction.phase,
},
undefined,
false,
);
if (phasedoctypesData) {
this.phasedoctypes = Array.isArray(phasedoctypesData) ? phasedoctypesData : [phasedoctypesData];
@@ -240,15 +354,27 @@ export default {
if (!this.row.id) return;
this.isLoading = true;
try {
const detail = await $getdata('reservation', {
id: this.transaction.txncurrent__detail
}, undefined, true)
const filesArray = await $getdata('transactionfile', {
txn_detail: detail.id,
}, undefined, false);
const detail = await $getdata(
"reservation",
{
id: this.transaction.txncurrent__detail,
},
undefined,
true,
);
const filesArray = await $getdata(
"transactionfile",
{
txn_detail: detail.id,
},
undefined,
false,
);
if (filesArray) {
this.files = (Array.isArray(filesArray) ? filesArray : [filesArray]).sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
this.files = (Array.isArray(filesArray) ? filesArray : [filesArray]).sort(
(a, b) => new Date(b.create_time) - new Date(a.create_time),
);
} else {
this.files = [];
}
@@ -260,18 +386,20 @@ export default {
}
},
getFilesByDocType(docTypeId) {
return this.files.filter(file => file.file__doc_type === docTypeId || (file.file__doc_type == null && docTypeId == null));
return this.files.filter(
(file) => file.file__doc_type === docTypeId || (file.file__doc_type == null && docTypeId == null),
);
},
getFileExtension(fileName) {
return fileName ? fileName.split('.').pop().toLowerCase() : 'file';
return fileName ? fileName.split(".").pop().toLowerCase() : "file";
},
isImage(fileName) {
const ext = this.getFileExtension(fileName);
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext);
return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext);
},
isViewableDocument(fileName) {
const ext = this.getFileExtension(fileName);
return ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext);
return ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(ext);
},
async handleUpload(uploadedFiles, docTypeId) {
if (!uploadedFiles || uploadedFiles.length === 0) return;
@@ -282,15 +410,20 @@ export default {
try {
for (const fileRecord of uploadedFiles) {
if (docTypeId) {
await $patchapi('file', {
await $patchapi("file", {
id: fileRecord.id,
doc_type: docTypeId
doc_type: docTypeId,
});
}
const detail = await $getdata('reservation', {
id: this.transaction.txncurrent__detail,
}, undefined, true)
const detail = await $getdata(
"reservation",
{
id: this.transaction.txncurrent__detail,
},
undefined,
true,
);
const payload = {
txn_detail: detail.id,
@@ -305,7 +438,7 @@ export default {
}
await this.fetchFiles();
this.$emit('upload-completed');
this.$emit("upload-completed");
} catch (error) {
console.error("Lỗi khi lưu file:", error);
alert("Đã xảy ra lỗi khi tải file lên. Vui lòng thử lại.");
@@ -318,21 +451,21 @@ export default {
const filePath = file.file__file || file.file;
if (!filePath) return;
const link = document.createElement('a');
const link = document.createElement("a");
link.href = `${$getpath()}static/files/${filePath}`;
link.download = file.file__name || 'download';
link.download = file.file__name || "download";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
deleteFile(fileId) {
this.showmodal = {
component: 'dialog/Confirm',
title: 'Xác nhận xóa',
height: '10vh',
width: '40%',
component: "dialog/Confirm",
title: "Xác nhận xóa",
height: "10vh",
width: "40%",
vbind: {
content: 'Bạn có chắc chắn muốn xóa file này không?'
content: "Bạn có chắc chắn muốn xóa file này không?",
},
onConfirm: async () => {
this.isLoading = true;
@@ -350,17 +483,17 @@ export default {
} finally {
this.isLoading = false;
}
}
},
};
},
handleModalEvent(event) {
if (event.name === 'confirm' && typeof this.showmodal?.onConfirm === 'function') {
if (event.name === "confirm" && typeof this.showmodal?.onConfirm === "function") {
this.showmodal.onConfirm();
}
},
viewFile(file) {
const { $getpath } = useNuxtApp();
const fileName = file.file__name || '';
const fileName = file.file__name || "";
const filePath = file.file__file || file.file;
if (!filePath) return;
@@ -371,23 +504,23 @@ export default {
if (isImageFile) {
this.showmodal = {
title: fileName,
component: 'media/ChipImage',
component: "media/ChipImage",
vbind: {
extend: false,
file: file,
image: fileUrl,
show: ['download', 'delete']
}
show: ["download", "delete"],
},
};
} else if (isViewable) {
// Mở Google Viewer trực tiếp trong tab mới
const viewerUrl = `https://docs.google.com/gview?url=${fileUrl}&embedded=false`;
window.open(viewerUrl, '_blank');
window.open(viewerUrl, "_blank");
} else {
this.downloadFile(file);
}
},
}
},
};
</script>
@@ -420,4 +553,4 @@ export default {
transform: rotate(360deg);
}
}
</style>
</style>