Merge branch 'develop' into dev
* develop: แก้ไขฟอร์มสิทธิ์การลา refactor: dialogConfirm onConfirmUpload refactor(leave-history): replace overflow-hidden with overflow-auto for better scrollability feat(registry-edit): previewFile excel Position feat(leave): UI Show Card leaveWaitingSummary refactor(registry-edit): permisson handUploadFile refactor(registry-edit): exportExcel feat(registry-edit): uploadFile profileSalaryTemp fixed สิทธิ์การลา refactor(retirement): download retirementReport
This commit is contained in:
commit
e1db58294b
13 changed files with 868 additions and 108 deletions
|
|
@ -30,6 +30,7 @@
|
|||
"axios": "^1.6.7",
|
||||
"bma-org-chart": "^0.0.8",
|
||||
"esri-loader": "^3.7.0",
|
||||
"exceljs": "^4.4.0",
|
||||
"html-to-image": "^1.11.13",
|
||||
"keycloak-js": "^20.0.2",
|
||||
"moment": "^2.29.4",
|
||||
|
|
|
|||
|
|
@ -192,6 +192,8 @@ export default {
|
|||
`${orgProfile}/keycloak/permissionProfile/${rootId}`,
|
||||
profileidPosition: (type: string) =>
|
||||
`${orgProfile}${type}/profileid/position`,
|
||||
uploadProfile: (type: string, id: string) =>
|
||||
`${organization}/upload/${type}-profileSalaryTemp/${id}`,
|
||||
|
||||
workflowCommanderOperate: `${workflow}/commander/operate`,
|
||||
workflowCommanderSign: `${workflow}/commander/sign`,
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ interface DataPosition {
|
|||
status: string;
|
||||
posNumCodeSitAbb: string;
|
||||
posNumCodeSit: string;
|
||||
positionExecutiveField: string;
|
||||
}
|
||||
|
||||
export type { DataSalaryPos, DataPosition };
|
||||
|
|
|
|||
177
src/modules/04_registryPerson/utils/excelParser.ts
Normal file
177
src/modules/04_registryPerson/utils/excelParser.ts
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import * as XLSX from "xlsx";
|
||||
|
||||
export interface ExcelPreviewData {
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
sheetNames: string[];
|
||||
headers: string[];
|
||||
rows: Array<Record<string, any>>;
|
||||
totalRows: number;
|
||||
previewRows: number;
|
||||
}
|
||||
|
||||
export interface ParseOptions {
|
||||
maxPreviewRows?: number;
|
||||
sheetIndex?: number;
|
||||
}
|
||||
|
||||
const DEFAULT_CONFIG = {
|
||||
MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB
|
||||
MAX_PREVIEW_ROWS: 0, // 0 = ไม่จำกัด แสดงทั้งหมด
|
||||
ALLOWED_EXTENSIONS: [".xlsx", ".xls"],
|
||||
};
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
|
||||
}
|
||||
|
||||
function getFileExtension(fileName: string): string {
|
||||
return fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
|
||||
}
|
||||
|
||||
function validateFile(file: File): { message: string } | null {
|
||||
const extension = getFileExtension(file.name);
|
||||
|
||||
if (!DEFAULT_CONFIG.ALLOWED_EXTENSIONS.includes(extension)) {
|
||||
return {
|
||||
message: `กรุณาเลือกไฟล์ Excel เท่านั้น (${DEFAULT_CONFIG.ALLOWED_EXTENSIONS.join(", ")})`,
|
||||
};
|
||||
}
|
||||
|
||||
if (file.size > DEFAULT_CONFIG.MAX_FILE_SIZE) {
|
||||
const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
|
||||
const maxSizeMB = (DEFAULT_CONFIG.MAX_FILE_SIZE / (1024 * 1024)).toFixed(2);
|
||||
return {
|
||||
message: `ขนาดไฟล์เกิน ${maxSizeMB}MB (ไฟล์ของคุณ: ${fileSizeMB}MB)`,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function parseExcelFile(
|
||||
file: File,
|
||||
options: ParseOptions = {}
|
||||
): Promise<ExcelPreviewData> {
|
||||
const maxPreviewRows = options.maxPreviewRows ?? DEFAULT_CONFIG.MAX_PREVIEW_ROWS;
|
||||
const sheetIndex = options.sheetIndex ?? 0;
|
||||
|
||||
// Validate file
|
||||
const validationError = validateFile(file);
|
||||
if (validationError) {
|
||||
throw new Error(validationError.message);
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = e.target?.result;
|
||||
if (!data) {
|
||||
reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
|
||||
return;
|
||||
}
|
||||
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
|
||||
if (workbook.SheetNames.length === 0) {
|
||||
reject(new Error("ไฟล์ไม่มีข้อมูล"));
|
||||
return;
|
||||
}
|
||||
|
||||
const sheetName = workbook.SheetNames[sheetIndex];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
|
||||
// ใช้ sheet_to_json กับ raw: true เพื่ออ่าน raw values ก่อน
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
|
||||
header: 1,
|
||||
defval: "",
|
||||
raw: true, // อ่าน raw values
|
||||
}) as any[][];
|
||||
|
||||
// หลังจากได้ raw data แล้ว ต้องไปอ่านค่าจาก formula ที่ cells โดยตรง
|
||||
// เพราะบาง formula อาจจะยังไม่ถูกคำนวณ
|
||||
const range = XLSX.utils.decode_range(worksheet["!ref"] || "A1");
|
||||
|
||||
// อ่านค่าจาก cells ที่มี formula (column สุดท้าย)
|
||||
for (let row = range.s.r; row <= range.e.r; row++) {
|
||||
for (let col = range.s.c; col <= range.e.c; col++) {
|
||||
const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
|
||||
const cell = worksheet[cellAddress];
|
||||
|
||||
// ถ้ามี formula ให้ใช้ผลลัพธ์ที่คำนวณแล้ว
|
||||
if (cell && cell.f && !cell.v) {
|
||||
// ลองใช้ cell.w (formatted value) ถ้ามี
|
||||
if (cell.w) {
|
||||
// แปลง array index ให้ถูกต้อง (row + 1 เพราะมี header row)
|
||||
const arrayRowIndex = row - range.s.r;
|
||||
if (jsonData[arrayRowIndex] && jsonData[arrayRowIndex][col] !== undefined) {
|
||||
jsonData[arrayRowIndex][col] = cell.w;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (jsonData.length === 0) {
|
||||
reject(new Error("ไฟล์ไม่มีข้อมูล"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Extract headers from first row (ภาษาไทย)
|
||||
const headers = jsonData[0].map((h: any) => String(h ?? ""));
|
||||
|
||||
// Extract data rows (skip header row)
|
||||
const dataRows = jsonData.slice(1).filter((row) => row.some((cell) => cell !== ""));
|
||||
|
||||
if (dataRows.length === 0) {
|
||||
reject(new Error("ไฟล์ไม่มีข้อมูล"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to array of objects - ใช้ header จาก Excel เป็น field names โดยตรง
|
||||
// ถ้า maxPreviewRows = 0 จะแสดงทั้งหมด มิฉะนั้นจะแสดงตามจำนวนที่กำหนด
|
||||
const rowsToProcess = maxPreviewRows === 0 ? dataRows : dataRows.slice(0, maxPreviewRows);
|
||||
const rows = rowsToProcess.map((row, rowIndex) => {
|
||||
const obj: Record<string, any> = {
|
||||
id: `row_${rowIndex}`,
|
||||
};
|
||||
|
||||
// ใช้ header เป็น field names โดยตรง
|
||||
headers.forEach((header, index) => {
|
||||
const cellValue = row[index] ?? "";
|
||||
// ใช้ค่าจาก Excel โดยตรง ไม่แปลงค่า
|
||||
obj[header] = cellValue;
|
||||
});
|
||||
|
||||
return obj;
|
||||
});
|
||||
|
||||
resolve({
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
sheetNames: workbook.SheetNames,
|
||||
headers,
|
||||
rows,
|
||||
totalRows: dataRows.length,
|
||||
previewRows: rows.length,
|
||||
});
|
||||
} catch (error) {
|
||||
reject(new Error("ไม่สามารถอ่านไฟล์ Excel ได้ กรุณาตรวจสอบไฟล์อีกครั้ง"));
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
|
||||
};
|
||||
|
||||
reader.readAsBinaryString(file);
|
||||
});
|
||||
}
|
||||
|
||||
export { formatFileSize };
|
||||
157
src/modules/04_registryPerson/utils/exportPosition.ts
Normal file
157
src/modules/04_registryPerson/utils/exportPosition.ts
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import ExcelJS from "exceljs";
|
||||
import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
|
||||
|
||||
import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
|
||||
|
||||
const store = useEditPosDataStore();
|
||||
|
||||
// ฟังก์ชันแปลงวันที่จาก ISO format เป็นรูปแบบ dd/mm/yyyy (เช่น 18/05/2564)
|
||||
function formatDateToDDMMYYYY(dateString: string | null | Date): string {
|
||||
if (!dateString) return "";
|
||||
|
||||
const date = new Date(dateString);
|
||||
if (isNaN(date.getTime())) return "";
|
||||
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const year = date.getFullYear() + 543; // แปลงเป็นปีพุทธศักราช
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
}
|
||||
|
||||
export async function exportToExcelPosition(data: DataPosition[]) {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet("รายการประวัติตำแหน่งเงินเดือน");
|
||||
|
||||
// --- ส่วนที่ 1: สร้าง Master Data Sheet สำหรับอ้างอิง ID ---
|
||||
// เราจะซ่อนแผ่นงานนี้ไว้ (hidden) เพื่อใช้ทำ Dropdown และ VLOOKUP
|
||||
const masterSheet = workbook.addWorksheet("MasterData", { state: "hidden" });
|
||||
const masterData = store.commandCodeData; // [{id: 1, name: "ย้าย"}, ...]
|
||||
|
||||
masterData.forEach((item, index) => {
|
||||
masterSheet.getCell(`A${index + 1}`).value = item.name;
|
||||
masterSheet.getCell(`B${index + 1}`).value = item.id;
|
||||
});
|
||||
|
||||
// --- ส่วนที่ 2: กำหนด Columns ---
|
||||
worksheet.columns = [
|
||||
{ header: "ลำดับ", key: "no", width: 8 },
|
||||
{ header: "วันที่คำสั่งมีผล", key: "commandDateAffect", width: 18 },
|
||||
{ header: "ตำแหน่งในสายงาน", key: "positionName", width: 25 },
|
||||
{ header: "ตำแหน่งประเภท", key: "positionType", width: 18 },
|
||||
{ header: "ระดับ", key: "positionLevel", width: 12 },
|
||||
{ header: "ระดับซี", key: "positionCee", width: 12 },
|
||||
{ header: "สายงาน", key: "positionLine", width: 20 },
|
||||
{ header: "ด้าน/สาขา", key: "positionPathSide", width: 15 },
|
||||
{ header: "ตำแหน่งทางการบริหาร", key: "positionExecutive", width: 20 },
|
||||
{ header: "ด้านทางการบริหาร", key: "positionExecutiveField", width: 20 },
|
||||
{ header: "เงินเดือน", key: "amount", width: 15 },
|
||||
{ header: "เงินค่าตอบแทนรายเดือน", key: "mouthSalaryAmount", width: 15 },
|
||||
{ header: "เงินประจำตำแหน่ง", key: "positionSalaryAmount", width: 15 },
|
||||
{ header: "เงินค่าตอบแทนพิเศษ", key: "amountSpecial", width: 15 },
|
||||
{ header: "หน่วยงาน", key: "organization", width: 30 },
|
||||
{ header: "ส่วนราชการระดับ 1", key: "orgChild1", width: 20 },
|
||||
{ header: "ส่วนราชการระดับ 2", key: "orgChild2", width: 20 },
|
||||
{ header: "ส่วนราชการระดับ 3", key: "orgChild3", width: 20 },
|
||||
{ header: "ส่วนราชการระดับ 4", key: "orgChild4", width: 20 },
|
||||
{ header: "ตัวย่อเลขที่ตำแหน่ง", key: "posNoAbb", width: 15 },
|
||||
{ header: "เลขที่ตำแหน่ง", key: "posNo", width: 15 },
|
||||
{ header: "หน่วยงานที่ออกคำสั่ง", key: "posNumCodeSit", width: 20 },
|
||||
{
|
||||
header: "ตัวย่อหน่วยงานที่ออกคำสั่ง",
|
||||
key: "posNumCodeSitAbb",
|
||||
width: 15,
|
||||
},
|
||||
{ header: "เลขที่คำสั่ง", key: "commandNo", width: 15 },
|
||||
{ header: "ปีเลขที่คำสั่ง", key: "commandYear", width: 12 },
|
||||
{ header: "วันที่ลงนาม", key: "commandDateSign", width: 18 },
|
||||
{ header: "ประเภทคำสั่ง", key: "commandCodeName", width: 25 }, // AA
|
||||
{ header: "หมายเหตุ", key: "remark", width: 20 },
|
||||
{ header: "commandId", key: "commandId", width: 20 }, // AC (ลำดับที่ 29)
|
||||
{ header: "commandCode", key: "commandCode", width: 20 }, // AD (ลำดับที่ 30)
|
||||
];
|
||||
|
||||
// 3. Map ข้อมูล
|
||||
const newData = data.map((e, index) => ({
|
||||
no: index + 1,
|
||||
commandDateAffect: e.commandDateAffect
|
||||
? formatDateToDDMMYYYY(e.commandDateAffect)
|
||||
: "",
|
||||
positionName: e.positionName,
|
||||
positionType: e.positionType,
|
||||
positionLevel: e.positionLevel,
|
||||
positionCee: e.positionCee,
|
||||
positionLine: e.positionLine || "",
|
||||
positionPathSide: e.positionPathSide || "",
|
||||
positionExecutive: e.positionExecutive,
|
||||
positionExecutiveField: e.positionExecutiveField || "",
|
||||
amount: e.amount || 0,
|
||||
mouthSalaryAmount: e.mouthSalaryAmount || 0,
|
||||
positionSalaryAmount: e.positionSalaryAmount || 0,
|
||||
amountSpecial: e.amountSpecial || 0,
|
||||
organization: e.orgRoot,
|
||||
orgChild1: e.orgChild1,
|
||||
orgChild2: e.orgChild2,
|
||||
orgChild3: e.orgChild3,
|
||||
orgChild4: e.orgChild4,
|
||||
posNoAbb: e.posNoAbb,
|
||||
posNo: e.posNo,
|
||||
posNumCodeSit: e.posNumCodeSit,
|
||||
posNumCodeSitAbb: e.posNumCodeSitAbb,
|
||||
commandNo: e.commandNo,
|
||||
commandYear: e.commandYear ? Number(e.commandYear) + 543 : "",
|
||||
commandDateSign: e.commandDateSign
|
||||
? formatDateToDDMMYYYY(e.commandDateSign)
|
||||
: "",
|
||||
commandCodeName: store.convertCommandCodeName(e.commandCode),
|
||||
remark: e.remark,
|
||||
commandId: e.commandId || "",
|
||||
commandCode: e.commandCode || "", // ใส่ค่าเริ่มต้นไว้
|
||||
}));
|
||||
|
||||
worksheet.addRows(newData);
|
||||
|
||||
// 4. ตกแต่งสี, Dropdown และ สูตร VLOOKUP
|
||||
newData.forEach((_, index) => {
|
||||
const rowIndex = index + 2;
|
||||
|
||||
// --- ตั้งค่า Format สำหรับเซลล์วันที่ ---
|
||||
// เซลล์ B (commandDateAffect) และ Z (commandDateSign)
|
||||
const dateAffectCell = worksheet.getCell(`B${rowIndex}`);
|
||||
const dateSignCell = worksheet.getCell(`Z${rowIndex}`);
|
||||
|
||||
[dateAffectCell, dateSignCell].forEach((cell) => {
|
||||
cell.numFmt = "dd/mm/yyyy";
|
||||
});
|
||||
|
||||
// --- ทำ Dropdown คอลัมน์ AA ---
|
||||
// อ้างอิงรายการจาก MasterData Sheet จะทำให้ Excel ทำงานได้เสถียรกว่า (กรณีรายการเยอะ)
|
||||
worksheet.getCell(`AA${rowIndex}`).dataValidation = {
|
||||
type: "list",
|
||||
allowBlank: true,
|
||||
formulae: [`MasterData!$A$1:$A$${masterData.length}`],
|
||||
};
|
||||
|
||||
// --- ผูกสูตรให้ commandCode (AD) เปลี่ยนตามการเลือกใน AA ---
|
||||
// AA คือประเภทคำสั่ง, AD คือ commandCode
|
||||
worksheet.getCell(`AD${rowIndex}`).value = {
|
||||
formula: `=IFERROR(VLOOKUP(AA${rowIndex}, MasterData!$A$1:$B$${masterData.length}, 2, FALSE), "")`,
|
||||
};
|
||||
});
|
||||
|
||||
// 5. สไตล์ Header
|
||||
worksheet.getRow(1).font = { bold: true };
|
||||
worksheet.getRow(1).alignment = { vertical: "middle", horizontal: "center" };
|
||||
|
||||
// 6. เขียนไฟล์
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "รายการประวัติตำแหน่งเงินเดือน.xlsx";
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import moment from "moment";
|
||||
|
||||
import {
|
||||
parseExcelFile,
|
||||
formatFileSize,
|
||||
} from "@/modules/04_registryPerson/utils/excelParser";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm } = useCounterMixin();
|
||||
|
||||
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() {
|
||||
dialogConfirm($q, () => {
|
||||
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>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
|
||||
import { exportToExcelPosition } from "@/modules/04_registryPerson/utils/exportPosition";
|
||||
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { FormDataSalary } from "@/modules/04_registryPerson/interface/index/Edit";
|
||||
|
|
@ -20,6 +20,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();
|
||||
|
|
@ -52,6 +53,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);
|
||||
|
|
@ -430,66 +436,67 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
|
|||
|
||||
/** ฟังก์ชันดาวน์โหลดไฟล Excel */
|
||||
function exportToExcel() {
|
||||
const newData = rows.value.map((e: DataPosition) => {
|
||||
return {
|
||||
commandDateAffect: date2Thai(e.commandDateAffect),
|
||||
positionName: e.positionName,
|
||||
positionType: e.positionType,
|
||||
positionLevel: e.positionLevel
|
||||
? e.positionLevel
|
||||
: e.positionCee
|
||||
? e.positionCee
|
||||
: "",
|
||||
positionExecutive: e.positionExecutive,
|
||||
amount: e.amount,
|
||||
mouthSalaryAmount: e.mouthSalaryAmount,
|
||||
positionSalaryAmount: e.positionSalaryAmount,
|
||||
organization: findOrgName({
|
||||
root: e.orgRoot,
|
||||
child1: e.orgChild1,
|
||||
child2: e.orgChild2,
|
||||
child3: e.orgChild3,
|
||||
child4: e.orgChild4,
|
||||
}),
|
||||
posNo:
|
||||
e.posNoAbb && e.posNo
|
||||
? `${e.posNoAbb} ${e.posNo}`
|
||||
: e.posNo
|
||||
? e.posNo
|
||||
: "",
|
||||
posNumCodeSit:
|
||||
e.posNumCodeSitAbb && e.posNumCodeSit
|
||||
? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
|
||||
: e.posNumCodeSit
|
||||
? e.posNumCodeSit
|
||||
: "",
|
||||
commandNo:
|
||||
e.commandNo && e.commandYear
|
||||
? `${e.commandNo}/${Number(e.commandYear) + 543}`
|
||||
: "",
|
||||
commandDateSign: date2Thai(e.commandDateSign),
|
||||
commandCode: store.convertCommandCodeName(e.commandCode),
|
||||
remark: e.remark,
|
||||
};
|
||||
});
|
||||
exportToExcelPosition(rows.value);
|
||||
// const newData = rows.value.map((e: DataPosition) => {
|
||||
// return {
|
||||
// commandDateAffect: date2Thai(e.commandDateAffect),
|
||||
// positionName: e.positionName,
|
||||
// positionType: e.positionType,
|
||||
// positionLevel: e.positionLevel
|
||||
// ? e.positionLevel
|
||||
// : e.positionCee
|
||||
// ? e.positionCee
|
||||
// : "",
|
||||
// positionExecutive: e.positionExecutive,
|
||||
// amount: e.amount,
|
||||
// mouthSalaryAmount: e.mouthSalaryAmount,
|
||||
// positionSalaryAmount: e.positionSalaryAmount,
|
||||
// organization: findOrgName({
|
||||
// root: e.orgRoot,
|
||||
// child1: e.orgChild1,
|
||||
// child2: e.orgChild2,
|
||||
// child3: e.orgChild3,
|
||||
// child4: e.orgChild4,
|
||||
// }),
|
||||
// posNo:
|
||||
// e.posNoAbb && e.posNo
|
||||
// ? `${e.posNoAbb} ${e.posNo}`
|
||||
// : e.posNo
|
||||
// ? e.posNo
|
||||
// : "",
|
||||
// posNumCodeSit:
|
||||
// e.posNumCodeSitAbb && e.posNumCodeSit
|
||||
// ? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
|
||||
// : e.posNumCodeSit
|
||||
// ? e.posNumCodeSit
|
||||
// : "",
|
||||
// commandNo:
|
||||
// e.commandNo && e.commandYear
|
||||
// ? `${e.commandNo}/${Number(e.commandYear) + 543}`
|
||||
// : "",
|
||||
// commandDateSign: date2Thai(e.commandDateSign),
|
||||
// commandCode: store.convertCommandCodeName(e.commandCode),
|
||||
// remark: e.remark,
|
||||
// };
|
||||
// });
|
||||
|
||||
const headers = columns.value.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
|
||||
const worksheet = XLSX.utils.json_to_sheet(newData, {
|
||||
header: visibleColumns.value,
|
||||
});
|
||||
// const headers = columns.value.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
|
||||
// const worksheet = XLSX.utils.json_to_sheet(newData, {
|
||||
// header: visibleColumns.value,
|
||||
// });
|
||||
|
||||
//แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
|
||||
XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
|
||||
// //แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
|
||||
// XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
|
||||
|
||||
// Create a new workbook and append the worksheet
|
||||
const workbook = XLSX.utils.book_new();
|
||||
// // Create a new workbook and append the worksheet
|
||||
// const workbook = XLSX.utils.book_new();
|
||||
|
||||
XLSX.utils.book_append_sheet(
|
||||
workbook,
|
||||
worksheet,
|
||||
`รายการประวัติตำแหน่งเงินเดือน`
|
||||
);
|
||||
XLSX.writeFile(workbook, "รายการประวัติตำแหน่งเงินเดือน.xlsx");
|
||||
// XLSX.utils.book_append_sheet(
|
||||
// workbook,
|
||||
// worksheet,
|
||||
// `รายการประวัติตำแหน่งเงินเดือน`
|
||||
// );
|
||||
// XLSX.writeFile(workbook, "รายการประวัติตำแหน่งเงินเดือน.xlsx");
|
||||
}
|
||||
|
||||
const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
|
||||
|
|
@ -847,6 +854,83 @@ async function validateAndSave(
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปโหลดไฟล์ Excel
|
||||
* เปิด preview modal ก่อนอัปโหลด
|
||||
*/
|
||||
function handUploadFile() {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = ".xlsx,.xls";
|
||||
|
||||
input.onchange = async (e: Event) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
|
||||
const validExtensions = [".xlsx", ".xls"];
|
||||
const fileExtension = file.name
|
||||
.substring(file.name.lastIndexOf("."))
|
||||
.toLowerCase();
|
||||
|
||||
if (!validExtensions.includes(fileExtension)) {
|
||||
messageError($q, {
|
||||
response: {
|
||||
data: {
|
||||
title: "กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)",
|
||||
},
|
||||
},
|
||||
});
|
||||
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()]);
|
||||
});
|
||||
|
|
@ -886,6 +970,20 @@ onMounted(async () => {
|
|||
>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="
|
||||
tabs === 'PENDING' &&
|
||||
statusCheckEdit == 'PENDING' &&
|
||||
isConfirmEdit
|
||||
"
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="upload"
|
||||
@click="handUploadFile()"
|
||||
>
|
||||
<q-tooltip>อัปโหลดไฟล์แก้ไข</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -893,7 +991,9 @@ onMounted(async () => {
|
|||
icon="download"
|
||||
:disable="rows.length == 0"
|
||||
@click="exportToExcel()"
|
||||
/>
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
|
|
@ -1724,6 +1824,13 @@ onMounted(async () => {
|
|||
:fetch-data="fetchData"
|
||||
:columns="columns"
|
||||
/>
|
||||
|
||||
<DialogExcelPreview
|
||||
v-model:modal="excelPreviewModal"
|
||||
:file="selectedExcelFile"
|
||||
@confirm="onConfirmUpload"
|
||||
@cancel="onCancelUpload"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -370,18 +370,32 @@ async function uploadFile(event: any, date: any) {
|
|||
*/
|
||||
async function downloadAttachment(type: string, id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.reportRetireList(type, id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, `รายชื่อผู้เกษียณอายุราชการ`, type);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
messageError($q, JSON.parse(await e.response.data.text()));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
try {
|
||||
const response = await http.get(
|
||||
config.API.retirementReport + `/${type}/${id}`,
|
||||
{
|
||||
headers: {
|
||||
accept:
|
||||
type === "pdf"
|
||||
? "application/pdf"
|
||||
: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"content-Type": "application/json",
|
||||
},
|
||||
responseType: "blob",
|
||||
}
|
||||
);
|
||||
const blob = response.data;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `รายชื่อผู้เกษียณอายุราชการ.${type}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (e) {
|
||||
messageError($q, e);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
// ยืนยันการแก้ไขข้อมูล
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ const formData = reactive<FormData>({
|
|||
status: "", //สถานะการของลา
|
||||
leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveWaitingSummary: 0, //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
|
|
@ -391,6 +392,9 @@ async function fetchDetailLeave(paramsId: string) {
|
|||
formData.leaveRange = data.leaveRange;
|
||||
formData.commanderPosition = data.commanderPosition;
|
||||
formData.leaveRangeEnd = data.leaveRangeEnd;
|
||||
formData.leaveWaitingSummary = data.leaveWaitingSummary
|
||||
? data.leaveWaitingSummary
|
||||
: "0";
|
||||
keycloakUserId.value = data.keycloakUserId;
|
||||
rows.value = {
|
||||
commanders: data.commanders,
|
||||
|
|
@ -773,40 +777,50 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<div class="row col-12 q-gutter-md">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
class="col-md-3 col-xs-6"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-blue-10">
|
||||
{{ formData.leaveLimit }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ได้รับ</span>
|
||||
<span>ได้รับ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-md-3 col-xs-6">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ใช้ไป</span>
|
||||
<span>ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
class="col-md-3 col-xs-6"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">
|
||||
{{ formData.leaveRemain }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">คงเหลือ</span>
|
||||
<span>คงเหลือ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-6">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveWaitingSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span>อยู่ระหว่างการพิจารณา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ const formData = reactive<FormData>({
|
|||
leaveSubTypeName: "",
|
||||
commanderPosition: "",
|
||||
leaveRangeEnd: "",
|
||||
leaveWaitingSummary: 0, //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
});
|
||||
|
||||
const isLoadData = ref<boolean>(false);
|
||||
|
|
@ -217,6 +218,9 @@ async function fetchDetailLeave(paramsId: string) {
|
|||
formData.leaveLimit = data.leaveLimit;
|
||||
formData.leaveSummary = data.leaveSummary;
|
||||
formData.leaveRemain = data.leaveRemain;
|
||||
formData.leaveWaitingSummary = data.leaveWaitingSummary
|
||||
? data.leaveWaitingSummary
|
||||
: 0;
|
||||
formData.leaveWrote = data.leaveWrote;
|
||||
formData.leaveAddress = data.leaveAddress;
|
||||
formData.leaveNumber = data.leaveNumber;
|
||||
|
|
@ -626,40 +630,50 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<div class="row col-12 q-gutter-md">
|
||||
<div class="row col-12 q-col-gutter-md">
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
class="col-md-3 col-xs-6"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-blue-10">
|
||||
{{ formData.leaveLimit }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ได้รับ</span>
|
||||
<span>ได้รับ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="col-md-3 col-xs-6">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ใช้ไป</span>
|
||||
<span>ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
class="col-md-3 col-xs-6"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">
|
||||
{{ formData.leaveRemain }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">คงเหลือ</span>
|
||||
<span>คงเหลือ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-6">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveWaitingSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span>อยู่ระหว่างการพิจารณา</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -108,12 +108,16 @@ async function onSubmit() {
|
|||
? Number(formData.leaveDaysUsed)
|
||||
: 0,
|
||||
leaveCount: formData.leaveCount ? Number(formData.leaveCount) : 0,
|
||||
beginningLeaveDays: formData.beginningLeaveDays
|
||||
? Number(formData.beginningLeaveDays)
|
||||
: 0,
|
||||
beginningLeaveCount: formData.beginningLeaveCount
|
||||
? Number(formData.beginningLeaveCount)
|
||||
: 0,
|
||||
beginningLeaveDays: !isStatusEdit.value
|
||||
? formData.leaveDaysUsed
|
||||
? Number(formData.leaveDaysUsed)
|
||||
: 0
|
||||
: undefined,
|
||||
beginningLeaveCount: !isStatusEdit.value
|
||||
? formData.leaveCount
|
||||
? Number(formData.leaveCount)
|
||||
: 0
|
||||
: undefined,
|
||||
})
|
||||
|
||||
.then(async () => {
|
||||
|
|
@ -386,7 +390,7 @@ watch(modal, async (val) => {
|
|||
<q-separator vertical />
|
||||
|
||||
<!-- input -->
|
||||
<div class="col overflow-hidden q-pa-md">
|
||||
<div class="col overflow-auto q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
|
|
@ -453,7 +457,7 @@ watch(modal, async (val) => {
|
|||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div v-show="leaveTypeCode === 'LV-005'" class="col-12">
|
||||
<q-input
|
||||
:class="classInput(leaveTypeCode == 'LV-005')"
|
||||
:readonly="leaveTypeCode !== 'LV-005'"
|
||||
|
|
@ -461,8 +465,8 @@ watch(modal, async (val) => {
|
|||
dense
|
||||
outlined
|
||||
label="จำนวนสิทธิ์การลา"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !val || /^\d+(\.\d*)?$/.test(val) || 'กรุณากรอกเฉพาะตัวเลข']"
|
||||
:rules="[(val: string) => !val || /^\d+$/.test(val) || 'กรุณากรอกเฉพาะตัวเลขที่เป็นจำนวนเต็ม']"
|
||||
hint="* สำหรับลาพักผ่อนเท่านั้น คือสิทธิ์ลาประจำปี + สิทธิ์สะสม"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
|
@ -484,20 +488,19 @@ watch(modal, async (val) => {
|
|||
outlined
|
||||
label="ที่ใช้ไป (ครั้ง)"
|
||||
hide-bottom-space
|
||||
mask="#"
|
||||
reverse-fill-mask
|
||||
:rules="[(val: string) => !val || /^\d+$/.test(val) || 'กรุณากรอกเฉพาะตัวเลขที่เป็นจำนวนเต็ม']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
:class="classInput(true)"
|
||||
v-model="formData.beginningLeaveDays"
|
||||
dense
|
||||
outlined
|
||||
label="ยกมา (วัน)"
|
||||
hide-bottom-space
|
||||
label="จำนวนวันลาก่อนใช้งานระบบ"
|
||||
:rules="[(val: string) => !val || /^\d+(\.\d*)?$/.test(val) || 'กรุณากรอกเฉพาะตัวเลข']"
|
||||
hint="* จำนวนวันรวมการลาในปีงบประมาณนี้ที่เกิดขึ้นก่อนเริ่มใช้ระบบ"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -507,12 +510,11 @@ watch(modal, async (val) => {
|
|||
v-model="formData.beginningLeaveCount"
|
||||
dense
|
||||
outlined
|
||||
label="ยกมา (ครั้ง)"
|
||||
hide-bottom-space
|
||||
mask="#"
|
||||
reverse-fill-mask
|
||||
label="จำนวนครั้งที่ลาก่อนใช้งานระบบ"
|
||||
:rules="[(val: string) => !val || /^\d+$/.test(val) || 'กรุณากรอกเฉพาะตัวเลขที่เป็นจำนวนเต็ม']"
|
||||
hint="* จำนวนครั้งของการลาในปีงบประมาณนี้ที่เกิดขึ้นก่อนเริ่มใช้ระบบ"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ interface FormData {
|
|||
status: string; //สถานะการของลา
|
||||
leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveWaitingSummary: number; //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
// leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
|
||||
// leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const columns = ref<QTableColumn[]>([
|
|||
{
|
||||
name: "leaveDaysUsed",
|
||||
align: "left",
|
||||
label: "ที่ใช้ไป (วัน)",
|
||||
label: "ที่ใช้ไปทั้งหมด (วัน)",
|
||||
sortable: true,
|
||||
field: "leaveDaysUsed",
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -92,7 +92,7 @@ const columns = ref<QTableColumn[]>([
|
|||
{
|
||||
name: "leaveCount",
|
||||
align: "left",
|
||||
label: "ที่ใช้ไป (ครั้ง)",
|
||||
label: "ที่ใช้ไปทั้งหมด (ครั้ง)",
|
||||
sortable: true,
|
||||
field: "leaveCount",
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -101,7 +101,7 @@ const columns = ref<QTableColumn[]>([
|
|||
{
|
||||
name: "beginningLeaveDays",
|
||||
align: "left",
|
||||
label: "ยกมา (วัน)",
|
||||
label: "จำนวนวันลาก่อนใช้งานระบบ",
|
||||
sortable: true,
|
||||
field: "beginningLeaveDays",
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -110,7 +110,7 @@ const columns = ref<QTableColumn[]>([
|
|||
{
|
||||
name: "beginningLeaveCount",
|
||||
align: "left",
|
||||
label: "ยกมา (ครั้ง)",
|
||||
label: "จำนวนครั้งที่ลาก่อนใช้งานระบบ",
|
||||
sortable: true,
|
||||
field: "beginningLeaveCount",
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue