Refactoring code module 03_logs
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
c11ff006eb
commit
2e9bbe3dd1
5 changed files with 115 additions and 113 deletions
|
|
@ -6,16 +6,40 @@ import { useDataStore } from "@/modules/03_logs/stores/main";
|
|||
import { storeToRefs } from "pinia";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import type {
|
||||
Pagination,
|
||||
ItemsDropdown,
|
||||
} from "@/modules/03_logs/interface/index/Main";
|
||||
|
||||
import DialogDataDiff from "@/modules/03_logs/components/DialogDataDiff.vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
import type { ResLog } from "@/modules/03_logs/interface/response/Main";
|
||||
|
||||
/** importStore*/
|
||||
/** use*/
|
||||
const storeData = useDataStore();
|
||||
const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
|
||||
const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
|
||||
const { date2Thai } = useCounterMixin();
|
||||
|
||||
const startTime = ref<Date | null>(null); // เวลาเริ่มต้น
|
||||
const endTime = ref<Date | null>(null); //เวลาสินสุด
|
||||
const startDate = ref<string>(""); // วันเริ่มต้น
|
||||
const endDate = ref<string>(""); // วันสินสุด
|
||||
const sortTime = ref<"desc" | "asc">("desc");
|
||||
const openDialog = ref<boolean>(false);
|
||||
const currentlogData =
|
||||
ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
|
||||
const currentDataDiff = ref<{
|
||||
before: string;
|
||||
after: string;
|
||||
}>({
|
||||
before: "",
|
||||
after: "",
|
||||
});
|
||||
|
||||
//table
|
||||
const inputSearch = defineModel<string>("inputSearch"); //คำค้หา
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "startTimeStamp",
|
||||
|
|
@ -108,25 +132,19 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const startTime = ref<Date | null>(null);
|
||||
const endTime = ref<Date | null>(null);
|
||||
const startDate = ref<string>("");
|
||||
const endDate = ref<string>("");
|
||||
const sortTime = ref<"desc" | "asc">("desc");
|
||||
const openDialog = ref<boolean>(false);
|
||||
const currentlogData =
|
||||
ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
|
||||
const currentDataDiff = ref<{
|
||||
before: string;
|
||||
after: string;
|
||||
}>({
|
||||
before: "",
|
||||
after: "",
|
||||
});
|
||||
|
||||
const inputSearch = defineModel<string>("inputSearch");
|
||||
const pagination = ref({
|
||||
const visibleColumns = ref<string[]>([
|
||||
"startTimeStamp",
|
||||
"username",
|
||||
"host",
|
||||
"endpoint",
|
||||
"method",
|
||||
"responseCode",
|
||||
"logType",
|
||||
"responseDescription",
|
||||
"sequence",
|
||||
"dataDiff",
|
||||
]);
|
||||
const pagination = ref<Pagination>({
|
||||
page: 1,
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
|
@ -135,7 +153,8 @@ const labelDropdown = ref<string>("วันนี้");
|
|||
const valDropdown = ref<string>("");
|
||||
const searchStatus = ref<string>("");
|
||||
|
||||
const itemsDropdown = ref<any[]>([
|
||||
//รายการค้นหา
|
||||
const itemsDropdown = ref<ItemsDropdown[]>([
|
||||
{
|
||||
labal: "วันนี้",
|
||||
val: "today",
|
||||
|
|
@ -162,21 +181,12 @@ const itemsDropdown = ref<any[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const statusOpt = ref<any[]>(["info", "warning", "error"]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"startTimeStamp",
|
||||
"username",
|
||||
"host",
|
||||
"endpoint",
|
||||
"method",
|
||||
"responseCode",
|
||||
"logType",
|
||||
"responseDescription",
|
||||
"sequence",
|
||||
"dataDiff",
|
||||
]);
|
||||
const statusOpt = ref<string[]>(["info", "warning", "error"]);
|
||||
|
||||
/**
|
||||
* scroll และโหลดข้อมูลรายการ Logs เพิ่ม
|
||||
*/
|
||||
const infiniteScroll = handleScroll();
|
||||
function handleScroll() {
|
||||
let scrollFlag = false;
|
||||
|
||||
|
|
@ -198,7 +208,6 @@ function handleScroll() {
|
|||
systemName: systemName.value ?? undefined,
|
||||
searchAfter: searchAfter.value ?? undefined,
|
||||
sort: sortTime.value,
|
||||
// date: new Date(startDate.value),
|
||||
startDate: new Date(startDate.value) ?? undefined,
|
||||
endDate: new Date(endDate.value) ?? undefined,
|
||||
},
|
||||
|
|
@ -210,8 +219,9 @@ function handleScroll() {
|
|||
};
|
||||
}
|
||||
|
||||
const infiniteScroll = handleScroll();
|
||||
|
||||
/**
|
||||
* ค้นหาข้อมูลรายการ Logs
|
||||
*/
|
||||
function selectedDate() {
|
||||
if (!startDate.value) {
|
||||
const startDateToday = new Date();
|
||||
|
|
@ -224,23 +234,6 @@ function selectedDate() {
|
|||
startDate.value = startDateToday.toISOString();
|
||||
endDate.value = endDateToday.toISOString();
|
||||
}
|
||||
// startDate.value = date.value[0].toISOString();
|
||||
// endDate.value = date.value[1].toISOString();
|
||||
|
||||
// if (!!startTime.value) {
|
||||
// replaceTimeInISOString(startDate.value, startTime.value, "start");
|
||||
// } else {
|
||||
// const date = new Date(startDate.value);
|
||||
// date.setHours(0, 0, 0, 0);
|
||||
// startDate.value = date.toISOString();
|
||||
// }
|
||||
// if (!!endTime.value) {
|
||||
// replaceTimeInISOString(endDate.value, endTime.value, "end");
|
||||
// } else {
|
||||
// const date = new Date(endDate.value);
|
||||
// date.setHours(23, 59, 59, 999);
|
||||
// endDate.value = date.toISOString();
|
||||
// }
|
||||
|
||||
logData.value = [];
|
||||
searchAfter.value = undefined;
|
||||
|
|
@ -252,7 +245,6 @@ function selectedDate() {
|
|||
searchAfter: searchAfter.value ?? undefined,
|
||||
sort: sortTime.value,
|
||||
searchStatus: searchStatus.value ?? undefined,
|
||||
// date: new Date(startDate.value),
|
||||
startDate: new Date(startDate.value),
|
||||
endDate: new Date(endDate.value),
|
||||
},
|
||||
|
|
@ -260,7 +252,12 @@ function selectedDate() {
|
|||
);
|
||||
}
|
||||
|
||||
function classColorMethod(val: any) {
|
||||
/**
|
||||
* แปลงสึตาม method
|
||||
* @param val ค่า method
|
||||
* @returns ต่าสี
|
||||
*/
|
||||
function classColorMethod(val: string) {
|
||||
switch (val) {
|
||||
case "GET":
|
||||
return "blue";
|
||||
|
|
@ -278,6 +275,13 @@ function classColorMethod(val: any) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* เลือกประเภทการค้นหาข้อมูล
|
||||
* @param labal ชื่อประเภทการค้นหาข้อมูล
|
||||
* @param type ประเภทการค้นหาข้อมูล
|
||||
*
|
||||
* และค้นหาข้อมูลรายการ Logs ใหม่
|
||||
*/
|
||||
function onItemClick(labal: string, type: string) {
|
||||
labelDropdown.value = labal;
|
||||
valDropdown.value = type;
|
||||
|
|
@ -295,13 +299,15 @@ function onItemClick(labal: string, type: string) {
|
|||
};
|
||||
|
||||
if (type === "today") {
|
||||
//วันนี้
|
||||
startDate.value = setDateRange(0);
|
||||
endDate.value = setDateRange(0, true);
|
||||
} else if (type === "yesterday") {
|
||||
//เมื่อวาน
|
||||
startDate.value = setDateRange(1);
|
||||
endDate.value = setDateRange(1, true);
|
||||
} else if (type === "past24hours") {
|
||||
// ตั้งค่า startDate เป็น 24 ชั่วโมงที่แล้ว
|
||||
// ย้อนหลัง 24 ชั่วโมง
|
||||
const startDatePast24Hours = new Date();
|
||||
startDatePast24Hours.setHours(startDatePast24Hours.getHours() - 24);
|
||||
startDate.value = startDatePast24Hours.toISOString();
|
||||
|
|
@ -309,6 +315,7 @@ function onItemClick(labal: string, type: string) {
|
|||
// ตั้งค่า endDate เป็นเวลาปัจจุบัน
|
||||
endDate.value = new Date().toISOString();
|
||||
} else if (["past7days", "past30days"].includes(type)) {
|
||||
// ย้อนหลัง 7 วัน และ 30 วัน
|
||||
const days = { past7days: 7, past30days: 30 }[type];
|
||||
startDate.value = setDateRange(days);
|
||||
endDate.value = new Date().toISOString();
|
||||
|
|
@ -320,11 +327,15 @@ function onItemClick(labal: string, type: string) {
|
|||
endTime.value = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* อัปเดทวันที่ต้องการค้นหาข้อมูลรายการ Logs
|
||||
*
|
||||
* และค้นหาข้อมูลรายการ Logs ใหม่
|
||||
*/
|
||||
function updateDate() {
|
||||
if (startTime.value && endTime.value) {
|
||||
startDate.value = startTime.value.toISOString();
|
||||
endDate.value = endTime.value.toISOString();
|
||||
|
||||
selectedDate();
|
||||
}
|
||||
}
|
||||
|
|
@ -611,7 +622,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div v-else-if="col.name === 'method'">
|
||||
<q-badge
|
||||
:text-color="classColorMethod(col.value)"
|
||||
:text-color="classColorMethod(col.value as string)"
|
||||
style="background-color: #f0ecec"
|
||||
>{{ col.value ?? "-" }}</q-badge
|
||||
>
|
||||
|
|
@ -742,7 +753,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="self-center" v-if="key === 'method'">
|
||||
<q-badge
|
||||
:text-color="classColorMethod(item)"
|
||||
:text-color="classColorMethod(item as string)"
|
||||
style="background-color: #f0ecec"
|
||||
>
|
||||
{{ item ?? "-" }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue