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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue