ผูก API เปลี่ยนแปลงรอบการปฏิบัติงานของผู้ใช้งาน
This commit is contained in:
AnandaTon
parent
3482ec0ae4
commit
1c74095abe
5 changed files with 342 additions and 236 deletions
|
|
@ -1,167 +1,237 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref, reactive } from "vue";
|
||||
import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
|
||||
import type {
|
||||
changeShow,
|
||||
dataRowChangeRound,
|
||||
dataRowChangeRoundHistory,
|
||||
historyShow,
|
||||
} from "@/modules/09_leave/interface/response/changeRound";
|
||||
import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const checkCilck = ref<boolean>(false)
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
dialogMessageNotify,
|
||||
dialogConfirm,
|
||||
success,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const checkCilck = ref<boolean>(false);
|
||||
const profileId = ref<string>("");
|
||||
// store ลา >> รอบการปฏิบัติงาน
|
||||
export const useChangeRoundDataStore = defineStore(
|
||||
"changeRoundDataStore",
|
||||
() => {
|
||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const visibleColumns = ref<string[]>([
|
||||
"cardId",
|
||||
"fullName",
|
||||
"currentRound",
|
||||
"effectiveDate"
|
||||
]);
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"round",
|
||||
"time",
|
||||
"effectiveDate",
|
||||
"reson"
|
||||
]);
|
||||
"changeRoundDataStore",
|
||||
() => {
|
||||
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
const visibleColumns = ref<string[]>([
|
||||
"cardId",
|
||||
"fullName",
|
||||
"currentRound",
|
||||
"effectiveDate",
|
||||
]);
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"round",
|
||||
"time",
|
||||
"effectiveDate",
|
||||
"reson",
|
||||
]);
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "cardId",
|
||||
align: "left",
|
||||
label: "เลขบัตรประชาชน",
|
||||
sortable: true,
|
||||
field: "cardId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "currentRound",
|
||||
align: "left",
|
||||
label: "รอบปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentRound",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "effectiveDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผล",
|
||||
sortable: true,
|
||||
field: "effectiveDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "round",
|
||||
align: "left",
|
||||
label: "ครั้งที่",
|
||||
sortable: true,
|
||||
field: "round",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "time",
|
||||
align: "left",
|
||||
label: "รอบเวลา",
|
||||
sortable: true,
|
||||
field: "time",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "effectiveDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผล",
|
||||
sortable: true,
|
||||
field: "effectiveDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "reson",
|
||||
align: "left",
|
||||
label: "เหตุผล",
|
||||
sortable: true,
|
||||
field: "reson",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "cardId",
|
||||
align: "left",
|
||||
label: "เลขบัตรประชาชน",
|
||||
sortable: true,
|
||||
field: "cardId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "currentRound",
|
||||
align: "left",
|
||||
label: "รอบปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentRound",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "effectiveDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผล",
|
||||
sortable: true,
|
||||
field: "effectiveDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "round",
|
||||
align: "left",
|
||||
label: "ครั้งที่",
|
||||
sortable: true,
|
||||
field: "round",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "time",
|
||||
align: "left",
|
||||
label: "รอบเวลา",
|
||||
sortable: true,
|
||||
field: "time",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "effectiveDate",
|
||||
align: "left",
|
||||
label: "วันที่มีผล",
|
||||
sortable: true,
|
||||
field: "effectiveDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "reson",
|
||||
align: "left",
|
||||
label: "เหตุผล",
|
||||
sortable: true,
|
||||
field: "reson",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
// ข้อมูลในตาราง
|
||||
const rows = ref<changeShow[]>([]);
|
||||
const rowsHistory = ref<historyShow[]>([]);
|
||||
function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
|
||||
let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
|
||||
return {
|
||||
id: e.id,
|
||||
time: `${e.roundStart}-${e.roundEnd}`,
|
||||
effectiveDate: date2Thai(e.effectiveDate),
|
||||
reson: e.reson ?? '-'
|
||||
|
||||
};
|
||||
});
|
||||
rowsHistory.value = datalistHistory;
|
||||
}
|
||||
|
||||
function fetchDataForCardId(dataDetail: any, data: any) {
|
||||
if (dataDetail) {
|
||||
const filteredData = data.filter((e:any) => {
|
||||
return (!dataDetail.cardId || e.cardId === dataDetail.cardId) &&
|
||||
(!dataDetail.firstName || e.firstName === dataDetail.firstName) &&
|
||||
(!dataDetail.lastName || e.lastName === dataDetail.lastName);
|
||||
});
|
||||
|
||||
if (filteredData.length > 0) {
|
||||
checkCilck.value = false;
|
||||
rows.value = filteredData.map((e:any) => ({
|
||||
cardId: e.cardId,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
|
||||
roundStart: e.roundStart,
|
||||
roundEnd: e.roundEnd,
|
||||
currentRound: `${e.roundStart}-${e.roundEnd}`,
|
||||
effectiveDate: date2Thai(e.effectiveDate),
|
||||
}));
|
||||
} else {
|
||||
rows.value = [];
|
||||
console.log(3);
|
||||
checkCilck.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return {
|
||||
visibleColumns,
|
||||
columns,
|
||||
columnsHistory,
|
||||
rows,
|
||||
rowsHistory,
|
||||
fetchDatainHistory,
|
||||
visibleColumnsHistory,
|
||||
fetchDataForCardId,
|
||||
checkCilck
|
||||
};
|
||||
// ข้อมูลในตาราง
|
||||
function setProfileId(id: string) {
|
||||
console.log(profileId);
|
||||
profileId.value = id;
|
||||
}
|
||||
function fetchDataForCardId(dataDetail: any) {
|
||||
if (dataDetail) {
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.leaveSearch(), {
|
||||
citizenId: dataDetail.cardId || "", //เลขบัตรประชาชน
|
||||
firstname: dataDetail.firstName || "", //ชื่อจริง
|
||||
lastname: dataDetail.lastName || "", //นามสกุล
|
||||
page: dataDetail.page || 1, //*หน้า
|
||||
pageSize: dataDetail.pageSize || 10, //*จำนวนแถวต่อหน้า
|
||||
keyword: dataDetail.keyword || "", //keyword ค้นหา
|
||||
})
|
||||
.then((res) => {
|
||||
const apiData = res.data.result.data;
|
||||
if (apiData.length > 0) {
|
||||
checkCilck.value = false;
|
||||
rows.value = apiData.map((e: any) => ({
|
||||
profileId: e.profileId,
|
||||
cardId: e.citizenId,
|
||||
fullName: e.fullName,
|
||||
roundStart: e.startTimeMorning,
|
||||
roundEnd: e.leaveTimeAfterNoon,
|
||||
currentRound: `${e.startTimeMorning}-${e.leaveTimeAfterNoon}`,
|
||||
effectiveDate: date2Thai(e.effectiveDate),
|
||||
}));
|
||||
console.log(profileId.value);
|
||||
console.log(apiData.length);
|
||||
} else {
|
||||
rows.value = [];
|
||||
checkCilck.value = true;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
const rows = ref<changeShow[]>([]);
|
||||
const rowsHistory = ref<historyShow[]>([]);
|
||||
// paging
|
||||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
const filter = ref<string>(""); //search data table
|
||||
/**
|
||||
* ฟังก์ชั่น api เปลี่ยนหน้า
|
||||
* @param pageVal page
|
||||
* @param pageSizeVal pagesize
|
||||
*/
|
||||
async function changePage(pageVal: number, pageSizeVal: number) {
|
||||
page.value = await pageVal;
|
||||
pageSize.value = await pageSizeVal;
|
||||
fetchDatainHistory();
|
||||
}
|
||||
|
||||
async function fetchDatainHistory() {
|
||||
console.log("tes");
|
||||
console.log(profileId.value);
|
||||
showLoader();
|
||||
await http
|
||||
.post(
|
||||
config.API.leaveRoundById(profileId.value),
|
||||
{
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
keyword: filter.value,
|
||||
}
|
||||
// `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const dataHistory = res.data.result.data;
|
||||
rowsHistory.value = [];
|
||||
dataHistory.map((e: any) => {
|
||||
rowsHistory.value.push({
|
||||
round: e.round,
|
||||
startTimeMorning: e.startTimeMorning,
|
||||
leaveTimeAfternoon: e.leaveTimeAfternoon,
|
||||
time: `${e.startTimeMorning}-${e.leaveTimeAfternoon}`,
|
||||
effectiveDate: date2Thai(e.effectiveDate),
|
||||
reson: e.remark ?? "-",
|
||||
});
|
||||
console.log(rowsHistory.value);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
visibleColumns,
|
||||
columns,
|
||||
columnsHistory,
|
||||
rows,
|
||||
rowsHistory,
|
||||
fetchDatainHistory,
|
||||
visibleColumnsHistory,
|
||||
fetchDataForCardId,
|
||||
checkCilck,
|
||||
setProfileId,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue