แก้ไขข้อมูลในตาราง

This commit is contained in:
AnandaTon 2024-01-08 18:10:26 +07:00
parent 37a0f984c3
commit cae195c7bd
2 changed files with 363 additions and 369 deletions

View file

@ -2,6 +2,8 @@ interface ListLeave {
id: string //*Id การยื่นขอลา id: string //*Id การยื่นขอลา
leaveTypeName: string //Name ประเภทการลา leaveTypeName: string //Name ประเภทการลา
leaveTypeId: string //Id ประเภทการลา leaveTypeId: string //Id ประเภทการลา
leaveStartDate: Date
leaveEndDate: Date
fullName: string //คำนำหน้า ชื่อ นามสกุล คนขอลา fullName: string //คำนำหน้า ชื่อ นามสกุล คนขอลา
dateSendLeave: Date | null //วันที่ยื่นใบลา dateSendLeave: Date | null //วันที่ยื่นใบลา
status: string //สถานะการของลา status: string //สถานะการของลา

View file

@ -1,400 +1,392 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia"
import { ref } from "vue"; import { ref } from "vue"
import { useQuasar } from "quasar"; import { useQuasar } from "quasar"
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar"
import type { import type { OptionData, TypeLeave } from "@/modules/05_leave/interface/index/main"
OptionData, import type { ListLeave, ListLeaveTable } from "@/modules/05_leave/interface/response/leave"
TypeLeave, import http from "@/plugins/http"
} from "@/modules/05_leave/interface/index/main"; import config from "@/app.config"
import type {
ListLeave,
ListLeaveTable,
} from "@/modules/05_leave/interface/response/leave";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const { date2Thai, messageError } = mixin; const { date2Thai, messageError } = mixin
const $q = useQuasar(); const $q = useQuasar()
export const useLeaveStore = defineStore("Leave", () => { export const useLeaveStore = defineStore("Leave", () => {
const tabValue = ref<string>("calendar"); const tabValue = ref<string>("calendar")
const typeLeave = ref<string | undefined>(""); const typeLeave = ref<string | undefined>("")
const LeaveType = ref<string | null>("0"); const LeaveType = ref<string | null>("0")
const LeaveStatus = ref<string | null>("0"); const LeaveStatus = ref<string | null>("0")
const fiscalYearyear = ref<Number | null>(new Date().getFullYear()); const fiscalYearyear = ref<Number | null>(new Date().getFullYear())
const rows = ref<ListLeaveTable[]>([]); const rows = ref<ListLeaveTable[]>([])
/** /**
* function Table * function Table
* @param data Table * @param data Table
*/ */
async function fetchListLeave(data: ListLeave[]) { async function fetchListLeave(data: ListLeave[]) {
let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({ let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
id: e.id, id: e.id,
leaveTypeName: e.leaveTypeName, leaveTypeName: e.leaveTypeName,
leaveTypeId: e.leaveTypeId, leaveTypeId: e.leaveTypeId,
fullName: e.fullName, fullName: e.fullName,
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave), dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
status: e.status, dateLeave: date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
statusConvert: convertStatud(e.status), status: e.status,
isDelete: e.isDelete, statusConvert: convertStatud(e.status),
})); isDelete: e.isDelete,
rows.value = datalist; }))
} rows.value = datalist
}
//ฟังก์ชั่นแปลง Status //ฟังก์ชั่นแปลง Status
function convertStatud(val: string) { function convertStatud(val: string) {
switch (val) { switch (val) {
case "DRAFT": case "DRAFT":
return "แบบร่าง"; return "แบบร่าง"
case "NEW": case "NEW":
return "ใหม่"; return "ใหม่"
case "PENDING": case "PENDING":
return "กำลังดำเนินการ"; return "กำลังดำเนินการ"
case "APPROVE": case "APPROVE":
return "อนุมัติ"; return "อนุมัติ"
case "REJECT": case "REJECT":
return "ไม่อนุมัติ"; return "ไม่อนุมัติ"
case "DELETE": case "DELETE":
return "ยกเลิก"; return "ยกเลิก"
} }
} }
/** ประเภทการลา */ /** ประเภทการลา */
const typeOptions = ref<OptionData[]>([]); const typeOptions = ref<OptionData[]>([])
const typeId = ref<string | undefined>(""); const typeId = ref<string | undefined>("")
const typeOptionsMain = ref<OptionData[]>([]); const typeOptionsMain = ref<OptionData[]>([])
const typeOptionsAdd = ref<OptionData[]>([]); const typeOptionsAdd = ref<OptionData[]>([])
/** รายการข้อมูลประเภทใบลา */ /** รายการข้อมูลประเภทใบลา */
const options = ref<OptionData[]>([]); const options = ref<OptionData[]>([])
/** /**
* function * function
* @param data * @param data
*/ */
async function fetchLeaveType(data: TypeLeave[]) { async function fetchLeaveType(data: TypeLeave[]) {
typeOptionsMain.value = [ typeOptionsMain.value = [
{ {
id: "00000000-0000-0000-0000-000000000000", id: "00000000-0000-0000-0000-000000000000",
name: "ทั้งหมด", name: "ทั้งหมด",
code: "LV-000", code: "LV-000",
}, },
]; ]
const optionType = data.map((e: TypeLeave) => ({ const optionType = data.map((e: TypeLeave) => ({
id: e.id, id: e.id,
name: e.name, name: e.name,
code: e.code, code: e.code,
})); }))
typeOptionsMain.value.push(...optionType); typeOptionsMain.value.push(...optionType)
typeOptions.value = typeOptionsMain.value; typeOptions.value = typeOptionsMain.value
typeOptionsAdd.value = []; typeOptionsAdd.value = []
typeOptionsAdd.value.push(...optionType); typeOptionsAdd.value.push(...optionType)
options.value = typeOptionsAdd.value; options.value = typeOptionsAdd.value
} }
/** สถานะของการลา */ /** สถานะของการลา */
const statusOptionsMain = ref<any[]>([ const statusOptionsMain = ref<any[]>([
{ id: "ALL", name: "ทั้งหมด" }, { id: "ALL", name: "ทั้งหมด" },
{ id: "DRAFT", name: "แบบร่าง" }, { id: "DRAFT", name: "แบบร่าง" },
{ id: "NEW", name: "ใหม่" }, { id: "NEW", name: "ใหม่" },
{ id: "PENDING", name: "กำลังดำเนินการ" }, { id: "PENDING", name: "กำลังดำเนินการ" },
{ id: "APPROVE", name: "อนุมัติ " }, { id: "APPROVE", name: "อนุมัติ " },
{ id: "REJECT", name: "ไม่อนุมัติ" }, { id: "REJECT", name: "ไม่อนุมัติ" },
{ id: "DELETE", name: "ยกเลิก" }, { id: "DELETE", name: "ยกเลิก" },
]); ])
const statusOptions = ref<any[]>(statusOptionsMain.value); const statusOptions = ref<any[]>(statusOptionsMain.value)
/** /**
* function Option * function Option
* @param val * @param val
* @param update * @param update
* @param refData * @param refData
*/ */
function filterOption(val: any, update: Function, refData: string) { function filterOption(val: any, update: Function, refData: string) {
switch (refData) { switch (refData) {
case "LeaveTypeOption": case "LeaveTypeOption":
update(() => { update(() => {
typeOptions.value = typeOptionsMain.value.filter( typeOptions.value = typeOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
(v: any) => v.name.indexOf(val) > -1 })
); break
}); case "LeaveStatusOption":
break; update(() => {
case "LeaveStatusOption": statusOptions.value = statusOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
update(() => { })
statusOptions.value = statusOptionsMain.value.filter( break
(v: any) => v.name.indexOf(val) > -1 default:
); break
}); }
break; }
default:
break;
}
}
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/ /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref<OptionData[]>([ const optionsSpecific = ref<OptionData[]>([
{ id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" }, { id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" },
{ id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" }, { id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" },
]); ])
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/ /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
const optionsOrdination = ref<OptionData[]>([ const optionsOrdination = ref<OptionData[]>([
{ id: "b1", name: "ลาอุปสมบท", code: "b1" }, { id: "b1", name: "ลาอุปสมบท", code: "b1" },
{ id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" }, { id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" },
]); ])
/** data table filter & column ของรายการลา */ /** data table filter & column ของรายการลา */
const visibleColumns = ref<string[]>([ const visibleColumns = ref<string[]>(["no", "leaveTypeName", "dateSendLeave", "status", "dateLeave"])
"no",
"leaveTypeName",
"dateSendLeave",
"status",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
align: "left", align: "left",
label: "ลำดับ", label: "ลำดับ",
sortable: true, sortable: true,
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;", style: "font-size: 14px; width:5%;",
}, },
{ {
name: "leaveTypeName", name: "leaveTypeName",
align: "left", align: "left",
label: "ประเภทการลา", label: "ประเภทการลา",
sortable: true, sortable: true,
field: "leaveTypeName", field: "leaveTypeName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "dateSendLeave", name: "dateLeave",
align: "left", align: "left",
label: "วันที่ยื่นใบลา", label: "วันที่ลา",
sortable: true, sortable: true,
field: "dateSendLeave", field: "dateLeave",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "status", name: "dateSendLeave",
align: "left", align: "left",
label: "สถานะ", label: "วันที่ยื่นใบลา",
sortable: true, sortable: true,
field: "status", field: "dateSendLeave",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:10%;", style: "font-size: 14px; width:15%;",
}, },
]);
/** {
* name: "status",
* @param item align: "left",
* @param subitem label: "สถานะ",
*/ sortable: true,
function typeConvert(item: string, subitem: any) { field: "status",
// console.log('first',item) headerStyle: "font-size: 14px",
// if (item !== "LV-006" && item !== "LV-008") { style: "font-size: 14px; width:10%;",
typeLeave.value = convertSubtitle(item); },
// } else if (item === "LV-006") { ])
// typeLeave.value = convertSubtitleInfo(subitem);
// } else if (item === "LV-008") {
// typeLeave.value = convertSubtitleInfo2(subitem);
// }
typeId.value = convertId(item);
}
/** /**
* / *
* @param val string * @param item
* @returns * @param subitem
*/ */
function convertSubtitle(val: string) { function typeConvert(item: string, subitem: any) {
return options.value.find((x) => x.code == val)?.name; // console.log('first',item)
} // if (item !== "LV-006" && item !== "LV-008") {
typeLeave.value = convertSubtitle(item)
// } else if (item === "LV-006") {
// typeLeave.value = convertSubtitleInfo(subitem);
// } else if (item === "LV-008") {
// typeLeave.value = convertSubtitleInfo2(subitem);
// }
typeId.value = convertId(item)
}
/** /**
* / * /
* @param val string * @param val string
* @returns * @returns
*/ */
function convertSubtitleInfo(val: string) { function convertSubtitle(val: string) {
return optionsOrdination.value.find((x) => x.id == val)?.name; return options.value.find(x => x.code == val)?.name
} }
/** /**
* * /
* @param val string * @param val string
* @returns * @returns
*/ */
function convertSubtitleInfo2(val: string) { function convertSubtitleInfo(val: string) {
return optionsSpecific.value.find((x) => x.id == val)?.name; return optionsOrdination.value.find(x => x.id == val)?.name
} }
/** /**
* id api *
* @param val string * @param val string
* @returns * @returns
*/ */
function convertId(val: string) { function convertSubtitleInfo2(val: string) {
return options.value.find((x) => x.code == val)?.id; return optionsSpecific.value.find(x => x.id == val)?.name
} }
/** /**
* profile * id api
*/ * @param val string
const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา * @returns
const leaveTypeName = ref<string>(""); //Name ประเภทการลา */
const dear = ref<string>(""); //เรียน function convertId(val: string) {
const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ return options.value.find(x => x.code == val)?.id
const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ }
const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
const organizationName = ref<string>(""); //สังกัดผู้ยื่นขอ
const leaveLimit = ref<number>(0); //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const leaveTotal = ref<number>(0); //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const leaveRemain = ref<number>(0); //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
const restDayTotalOld = ref<number>(0); //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
const birthDate = ref<Date>(); //วันเกิด
const dateAppoint = ref<Date>(); //วันที่เข้ารับราชการ
const salary = ref<number>(0); //เงินเดือนปัจจุบัน
const salaryText = ref<string>(""); //เงินเดือนปัจจุบัน(ภาษาไทย)
const leaveLast = ref<any>();
const restDayCurrentTotal = ref<string>("");
//ดึงข้อมูล profile จาก API /**
async function fetchProfile() { * profile
await http */
.post(config.API.leaveProfile(), { type: typeId.value }) const dateSendLeave = ref<Date>() //วันที่ยื่นใบลา
.then((res: any) => { const leaveTypeName = ref<string>("") //Name ประเภทการลา
const data = res.data.result; const dear = ref<string>("") //เรียน
dateSendLeave.value = data.dateSendLeave; const fullName = ref<string>("") //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
leaveTypeName.value = data.leaveTypeName; const positionName = ref<string>("") //ตำแหน่งผู้ยื่นขอ
dear.value = data.dear; const positionLevelName = ref<string>("") //ระดับผู้ยื่นขอ
fullName.value = data.fullName; const organizationName = ref<string>("") //สังกัดผู้ยื่นขอ
positionName.value = data.positionName; const leaveLimit = ref<number>(0) //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
positionLevelName.value = data.positionLevelName; const leaveTotal = ref<number>(0) //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
organizationName.value = data.organizationName; const leaveRemain = ref<number>(0) //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
leaveLimit.value = data.leaveLimit; const restDayTotalOld = ref<number>(0) //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
leaveTotal.value = data.leaveTotal; const birthDate = ref<Date>() //วันเกิด
leaveRemain.value = data.leaveRemain; const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
restDayTotalOld.value = data.restDayTotalOld; const salary = ref<number>(0) //เงินเดือนปัจจุบัน
birthDate.value = data.birthDate; const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
dateAppoint.value = data.dateAppoint; const leaveLast = ref<any>()
salary.value = data.salary ? data.salary.toLocaleString("th-TH") : ""; const restDayCurrentTotal = ref<string>("")
salaryText.value = data.salaryText;
leaveLast.value =
data.leaveLast != "0001-01-01T00:00:00"
? date2Thai(data.leaveLast)
: "-";
restDayCurrentTotal.value = data.restDayCurrentTotal;
})
.catch((e: any) => {
messageError($q, e);
});
}
async function fetchProfileOld(data: any) { //ดึงข้อมูล profile จาก API
await http async function fetchProfile() {
.post(config.API.leaveProfile(), { type: typeId.value }) await http
.then((res: any) => { .post(config.API.leaveProfile(), { type: typeId.value })
const data = res.data.result; .then((res: any) => {
leaveLimit.value = data.leaveLimit; const data = res.data.result
leaveTotal.value = data.leaveTotal; dateSendLeave.value = data.dateSendLeave
leaveRemain.value = data.leaveRemain; leaveTypeName.value = data.leaveTypeName
restDayTotalOld.value = data.restDayTotalOld; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา dear.value = data.dear
birthDate.value = data.birthDate; // วันเกิด fullName.value = data.fullName
dateAppoint.value = data.dateAppoint; // วันที่รับราชการ positionName.value = data.positionName
salary.value = data.salary ? data.salary.toLocaleString("th-TH") : ""; positionLevelName.value = data.positionLevelName
salaryText.value = data.salaryText; organizationName.value = data.organizationName
}) leaveLimit.value = data.leaveLimit
.catch((e: any) => { leaveTotal.value = data.leaveTotal
messageError($q, e); leaveRemain.value = data.leaveRemain
}); restDayTotalOld.value = data.restDayTotalOld
birthDate.value = data.birthDate
dateAppoint.value = data.dateAppoint
salary.value = data.salary ? data.salary.toLocaleString("th-TH") : ""
salaryText.value = data.salaryText
leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
restDayCurrentTotal.value = data.restDayCurrentTotal
})
.catch((e: any) => {
messageError($q, e)
})
}
dateSendLeave.value = data.dateSendLeave; async function fetchProfileOld(data: any) {
typeLeave.value = data.leaveTypeName; await http
dear.value = data.dear; .post(config.API.leaveProfile(), { type: typeId.value })
fullName.value = data.fullName; .then((res: any) => {
positionName.value = data.positionName; const data = res.data.result
positionLevelName.value = data.positionLevelName; leaveLimit.value = data.leaveLimit
organizationName.value = data.organizationName; leaveTotal.value = data.leaveTotal
leaveLast.value = leaveRemain.value = data.leaveRemain
data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"; restDayTotalOld.value = data.restDayTotalOld //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
restDayCurrentTotal.value = data.restDayCurrentTotal; birthDate.value = data.birthDate // วันเกิด
} dateAppoint.value = data.dateAppoint // วันที่รับราชการ
salary.value = data.salary ? data.salary.toLocaleString("th-TH") : ""
salaryText.value = data.salaryText
})
.catch((e: any) => {
messageError($q, e)
})
function resetForm2() { dateSendLeave.value = data.dateSendLeave
dateSendLeave.value = undefined; typeLeave.value = data.leaveTypeName
leaveTypeName.value = ""; dear.value = data.dear
dear.value = ""; fullName.value = data.fullName
fullName.value = ""; positionName.value = data.positionName
positionName.value = ""; positionLevelName.value = data.positionLevelName
positionLevelName.value = ""; organizationName.value = data.organizationName
organizationName.value = ""; leaveLast.value = data.leaveLast != "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
leaveLimit.value = 0; restDayCurrentTotal.value = data.restDayCurrentTotal
leaveTotal.value = 0; }
leaveRemain.value = 0;
restDayTotalOld.value = 0;
birthDate.value = undefined;
dateAppoint.value = undefined;
salary.value = 0;
salaryText.value = "";
leaveLast.value = undefined;
restDayCurrentTotal.value = "";
}
return { function resetForm2() {
tabValue, dateSendLeave.value = undefined
typeOptions, leaveTypeName.value = ""
optionsSpecific, dear.value = ""
statusOptions, fullName.value = ""
positionName.value = ""
positionLevelName.value = ""
organizationName.value = ""
leaveLimit.value = 0
leaveTotal.value = 0
leaveRemain.value = 0
restDayTotalOld.value = 0
birthDate.value = undefined
dateAppoint.value = undefined
salary.value = 0
salaryText.value = ""
leaveLast.value = undefined
restDayCurrentTotal.value = ""
}
visibleColumns, return {
columns, tabValue,
rows, typeOptions,
LeaveType, optionsSpecific,
LeaveStatus, statusOptions,
fiscalYearyear, visibleColumns,
options, columns,
optionsOrdination, rows,
typeConvert, LeaveType,
typeLeave, LeaveStatus,
typeId,
fetchListLeave, fiscalYearyear,
fetchLeaveType, options,
filterOption, optionsOrdination,
fetchProfile, typeConvert,
typeLeave,
typeId,
//ส่งออกตัวแปร profileที่ได้จาก Api fetchListLeave,
dateSendLeave, fetchLeaveType,
leaveTypeName, filterOption,
dear, fetchProfile,
fullName,
positionName, //ส่งออกตัวแปร profileที่ได้จาก Api
positionLevelName, dateSendLeave,
organizationName, leaveTypeName,
leaveLimit, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น) dear,
leaveTotal, //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น) fullName,
leaveRemain, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น) positionName,
restDayTotalOld, positionLevelName,
birthDate, organizationName,
dateAppoint, leaveLimit, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
salary, leaveTotal, //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
salaryText, leaveRemain, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
leaveLast, restDayTotalOld,
restDayCurrentTotal, birthDate,
convertStatud, dateAppoint,
resetForm2, salary,
fetchProfileOld, salaryText,
}; leaveLast,
}); restDayCurrentTotal,
convertStatud,
resetForm2,
fetchProfileOld,
}
})