feat(registry-edit): previewFile excel Position
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
433a0ce9b8
commit
9132efed11
3 changed files with 512 additions and 34 deletions
|
|
@ -0,0 +1,263 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import moment from "moment";
|
||||
import {
|
||||
parseExcelFile,
|
||||
formatFileSize,
|
||||
type ExcelPreviewData,
|
||||
} from "@/modules/04_registryPerson/utils/excelParser";
|
||||
|
||||
interface Props {
|
||||
modal: boolean;
|
||||
file: File | null;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "update:modal", value: boolean): void;
|
||||
(e: "confirm", file: File): void;
|
||||
(e: "cancel"): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const isUploading = ref(false);
|
||||
const previewData = ref<Record<string, any>[]>([]);
|
||||
const excelHeaders = ref<string[]>([]); // Headers จาก Excel
|
||||
|
||||
const fileName = computed(() => props.file?.name ?? "");
|
||||
const fileSize = computed(() => props.file?.size ?? 0);
|
||||
const totalRows = computed(() => previewData.value.length);
|
||||
const previewRows = computed(() => previewData.value.length);
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 50,
|
||||
});
|
||||
|
||||
// ฟังก์ชันแปลงวันที่เป็นภาษาไทย (ไม่บวก 543 เพราะ Excel เป็น พ.ศ. อยู่แล้ว)
|
||||
function formatDateForDisplay(value: any): string {
|
||||
if (!value) return "-";
|
||||
|
||||
// ถ้าเป็น string format dd/mm/yyyy (จาก Excel ที่เป็น พ.ศ.)
|
||||
if (typeof value === "string") {
|
||||
const parts = value.split("/");
|
||||
if (parts.length === 3) {
|
||||
const day = parts[0];
|
||||
const monthNum = parseInt(parts[1], 10);
|
||||
const year = parts[2];
|
||||
|
||||
// แปลงเลขเดือนเป็นชื่อเดือนภาษาไทย
|
||||
const thaiMonths = [
|
||||
"ม.ค.",
|
||||
"ก.พ.",
|
||||
"มี.ค.",
|
||||
"เม.ย.",
|
||||
"พ.ค.",
|
||||
"มิ.ย.",
|
||||
"ก.ค.",
|
||||
"ส.ค.",
|
||||
"ก.ย.",
|
||||
"ต.ค.",
|
||||
"พ.ย.",
|
||||
"ธ.ค.",
|
||||
];
|
||||
const thaiMonth = thaiMonths[monthNum - 1] || parts[1];
|
||||
|
||||
return `${day} ${thaiMonth} ${year}`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
// ถ้าเป็น Date object ให้แปลงโดยไม่บวก 543 (เพราะ Excel serial date แปลงเป็น ค.ศ. แล้วแต่เดิมเป็น พ.ศ.)
|
||||
const dateMoment = moment(value);
|
||||
const day = dateMoment.format("DD");
|
||||
const month = dateMoment.format("MMM");
|
||||
const year = +dateMoment.format("YYYY"); // ไม่บวก 543
|
||||
return `${day} ${month} ${year}`;
|
||||
}
|
||||
|
||||
// Headers ที่เป็นวันที่
|
||||
const DATE_HEADERS = ["วันที่คำสั่งมีผล", "วันที่ลงนาม"];
|
||||
const SALARY_HEADERS = [
|
||||
"เงินเดือน",
|
||||
"ค่าจ้าง",
|
||||
"เงินค่าตอบแทนรายเดือน",
|
||||
"เงินประจำตำแหน่ง",
|
||||
"เงินค่าตอบแทนพิเศษ",
|
||||
];
|
||||
|
||||
// สร้าง columns จาก Excel headers
|
||||
const tableColumns = computed(() => {
|
||||
if (excelHeaders.value.length === 0) return [];
|
||||
return excelHeaders.value.map((header, index) => {
|
||||
const isDateColumn = DATE_HEADERS.includes(header);
|
||||
const isSalaryColumn = SALARY_HEADERS.includes(header);
|
||||
|
||||
return {
|
||||
name: `col_${index}`,
|
||||
label: header,
|
||||
field: header,
|
||||
align: "left" as const,
|
||||
sortable: false,
|
||||
style: "white-space: nowrap;",
|
||||
headerStyle: "font-size: 13px; font-weight: bold;",
|
||||
format: (val: any) => {
|
||||
// ถ้าค่าว่าง แสดง -
|
||||
if (val == null || val === "") return "-";
|
||||
|
||||
// ถ้าเป็น column วันที่
|
||||
if (isDateColumn) {
|
||||
// ถ้าเป็น string วันที่ format dd/mm/yyyy (จาก Excel)
|
||||
if (
|
||||
typeof val === "string" &&
|
||||
val.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)
|
||||
) {
|
||||
return formatDateForDisplay(val);
|
||||
}
|
||||
// ถ้าเป็น number (Excel serial date) ให้แปลงเป็น Date object ก่อน
|
||||
if (typeof val === "number") {
|
||||
return formatDateForDisplay((val - 25569) * 86400 * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// ถ้าเป็น column เงินให้ format มี comma separator (ตรวจสอบชื่อ label)
|
||||
if (isSalaryColumn) {
|
||||
const numericValue = Number(val);
|
||||
if (typeof numericValue === "number" && !isNaN(numericValue)) {
|
||||
return numericValue.toLocaleString("en-US");
|
||||
}
|
||||
}
|
||||
|
||||
return val;
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
async function loadPreview() {
|
||||
if (!props.file) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await parseExcelFile(props.file, {
|
||||
maxPreviewRows: 0, // 0 = แสดงทั้งหมด
|
||||
sheetIndex: 0, // ใช้ sheet แรกเสมอ
|
||||
});
|
||||
previewData.value = result.rows;
|
||||
excelHeaders.value = result.headers; // เก็บ headers จาก Excel
|
||||
} catch (error) {
|
||||
console.error("Error parsing Excel file:", error);
|
||||
previewData.value = [];
|
||||
excelHeaders.value = [];
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onConfirm() {
|
||||
if (props.file) {
|
||||
isUploading.value = true;
|
||||
emit("confirm", props.file);
|
||||
}
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
emit("cancel");
|
||||
emit("update:modal", false);
|
||||
}
|
||||
|
||||
function onModalUpdate(value: boolean) {
|
||||
emit("update:modal", value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
(newValue) => {
|
||||
if (newValue && props.file) {
|
||||
isUploading.value = false;
|
||||
loadPreview();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog :model-value="modal" @update:model-value="onModalUpdate" persistent>
|
||||
<q-card style="min-width: 80vw; max-width: 95vw">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">ตัวอย่างข้อมูลไฟล์ Excel</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense v-close-popup @click="onClose" />
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<!-- File Info Section -->
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<div class="text-subtitle2 text-grey-7">ข้อมูลไฟล์</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<div class="flex items-center">
|
||||
<q-icon
|
||||
name="insert_drive_file"
|
||||
class="q-mr-sm"
|
||||
color="primary"
|
||||
/>
|
||||
<span class="text-body2">ชื่อไฟล์: {{ fileName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<div class="flex items-center">
|
||||
<q-icon name="folder" class="q-mr-sm" color="primary" />
|
||||
<span class="text-body2"
|
||||
>ขนาด: {{ formatFileSize(fileSize) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12 col-12">
|
||||
<div class="flex items-center">
|
||||
<q-icon name="table_chart" class="q-mr-sm" color="primary" />
|
||||
<span class="text-body2">จำนวนแถว: {{ totalRows }} แถว</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<!-- Preview Table -->
|
||||
<q-card-section style="max-height: 70vh" class="scroll">
|
||||
<div class="text-subtitle2 q-mb-md">
|
||||
รายการตำแหน่ง ({{ previewRows }} รายการ)
|
||||
</div>
|
||||
<d-table
|
||||
:columns="tableColumns"
|
||||
:rows="previewData"
|
||||
:paging="true"
|
||||
:rows-per-page-options="[20, 50, 100, 0]"
|
||||
v-model:pagination="pagination"
|
||||
:loading="isLoading"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Actions -->
|
||||
<q-card-actions align="right" class="q-pa-md">
|
||||
<q-btn
|
||||
type="submit"
|
||||
color="public"
|
||||
label="ยืนยันการอัปโหลด"
|
||||
@click="onConfirm"
|
||||
:loading="isUploading"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -21,6 +21,7 @@ import type {
|
|||
|
||||
import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
|
||||
import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
|
||||
import DialogExcelPreview from "@/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue";
|
||||
import CurruncyInput from "@/components/CurruncyInput.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -53,6 +54,11 @@ const amountRef = ref<any>(null);
|
|||
const amountSpecialRef = ref<any>(null);
|
||||
const currencyPopupRef = ref<any>(null);
|
||||
|
||||
// Excel Preview
|
||||
const excelPreviewModal = ref<boolean>(false);
|
||||
const selectedExcelFile = ref<File | null>(null);
|
||||
const isParsingExcel = ref<boolean>(false);
|
||||
|
||||
//Table
|
||||
const isLoad = ref<boolean>(true);
|
||||
const rowIndex = ref<number>(0);
|
||||
|
|
@ -851,7 +857,7 @@ async function validateAndSave(
|
|||
|
||||
/**
|
||||
* ฟังก์ชันอัปโหลดไฟล์ Excel
|
||||
* ส่งไฟล์ Excel ไปยัง API โดยตรง
|
||||
* เปิด preview modal ก่อนอัปโหลด
|
||||
*/
|
||||
function handUploadFile() {
|
||||
const input = document.createElement("input");
|
||||
|
|
@ -859,48 +865,73 @@ function handUploadFile() {
|
|||
input.accept = ".xlsx,.xls";
|
||||
|
||||
input.onchange = async (e: Event) => {
|
||||
try {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
|
||||
const validExtensions = [".xlsx", ".xls"];
|
||||
const fileExtension = file.name
|
||||
.substring(file.name.lastIndexOf("."))
|
||||
.toLowerCase();
|
||||
// ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
|
||||
const validExtensions = [".xlsx", ".xls"];
|
||||
const fileExtension = file.name
|
||||
.substring(file.name.lastIndexOf("."))
|
||||
.toLowerCase();
|
||||
|
||||
if (!validExtensions.includes(fileExtension)) {
|
||||
messageError("กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)");
|
||||
return;
|
||||
}
|
||||
|
||||
showLoader();
|
||||
const type = empType.value === "officer" ? "office" : "employee";
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
await http.post(
|
||||
config.API.uploadProfile(type, profileId.value),
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
if (!validExtensions.includes(fileExtension)) {
|
||||
messageError($q, {
|
||||
response: {
|
||||
data: {
|
||||
title: "กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
await fetchData();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// เก็บไฟล์และเปิด preview modal
|
||||
selectedExcelFile.value = file;
|
||||
excelPreviewModal.value = true;
|
||||
};
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันยืนยันการอัปโหลดไฟล์
|
||||
* ส่งไฟล์ไปยัง API เมื่อ user ยืนยันจาก preview modal
|
||||
*/
|
||||
async function onConfirmUpload(file: File) {
|
||||
try {
|
||||
isParsingExcel.value = true;
|
||||
showLoader();
|
||||
|
||||
const type = empType.value === "officer" ? "office" : "employee";
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
await http.post(config.API.uploadProfile(type, profileId.value), formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
|
||||
success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
await fetchData();
|
||||
excelPreviewModal.value = false;
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
isParsingExcel.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันยกเลิกการอัปโหลด
|
||||
* ปิด preview modal และล้างค่า
|
||||
*/
|
||||
function onCancelUpload() {
|
||||
selectedExcelFile.value = null;
|
||||
excelPreviewModal.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchData(), fetchType()]);
|
||||
});
|
||||
|
|
@ -1794,6 +1825,13 @@ onMounted(async () => {
|
|||
:fetch-data="fetchData"
|
||||
:columns="columns"
|
||||
/>
|
||||
|
||||
<DialogExcelPreview
|
||||
v-model:modal="excelPreviewModal"
|
||||
:file="selectedExcelFile"
|
||||
@confirm="onConfirmUpload"
|
||||
@cancel="onCancelUpload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue