hrms-bangkok/hrms-admin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactoring code module 03_logs

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-09 15:28:53 +07:00
parent c11ff006eb
commit 2e9bbe3dd1
5 changed files with 115 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/modules/03_logs/components/LogTable.vue
View file

@ -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 ?? "-" }}

0
src/modules/03_logs/components/index.vue
View file

8
src/modules/03_logs/interface/index/Main.ts
View file

@ -1,5 +1,11 @@
interface Pagination {
page: number;
rowsPerPage: number;
}
export type { Pagination };
interface ItemsDropdown {
labal: string;
val: string;
}
export type { Pagination, ItemsDropdown };

4
src/modules/03_logs/router.ts
View file

@ -1,8 +1,8 @@
const ListsPage = () => import("@/modules/03_logs/views/lists.vue");
const ListsPage = () => import("@/modules/03_logs/views/mainView.vue");
export default [
{
path: "/lists",
path: "/logs",
name: "viewLogs",
component: ListsPage,
meta: {

81
src/modules/03_logs/views/lists.vue → src/modules/03_logs/views/mainView.vue
View file

@ -1,117 +1,102 @@
<script setup lang="ts">
/** importType*/
/** importComponents*/
import CardComponents from "@/modules/03_logs/components/CardComponents.vue";
import { useCounterMixin } from "@/stores/mixin";
import LogTable from "@/modules/03_logs/components/LogTable.vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import { useQuasar } from "quasar";
import config from "@/app.config";
import { ref, onMounted } from "vue";
import { useDataStore } from "@/modules/03_logs/stores/main";
import { useQuasar } from "quasar";
import { storeToRefs } from "pinia";
/** importStore*/
const storeData = useDataStore();
const { logData, size, searchAfter, systemName, date } = storeToRefs(storeData);
const route = useRoute();
/** use*/
const title = ref<string>("");
import { useRoute } from "vue-router";
import { useDataStore } from "@/modules/03_logs/stores/main";
/** importComponents*/
import CardComponents from "@/modules/03_logs/components/CardComponents.vue"; // card เมนูระบบ
import LogTable from "@/modules/03_logs/components/LogTable.vue"; // Table
/** use*/
const route = useRoute();
const $q = useQuasar();
const storeData = useDataStore();
const { size, systemName, date } = storeToRefs(storeData);
const title = ref<string>(""); //ชื่อระบบ
// รายการเมนูระบบ
const menuList = ref<{ icon: string; label: string; path: string }[]>([
{
icon: "mdi-file-account-outline",
label: "ระบบทะเบียนประวัติ",
path: "/lists?system=registry",
path: "/logs?system=registry",
},
{
icon: "mdi-account-group",
label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
path: "/lists?system=organization",
path: "/logs?system=organization",
},
{
icon: "mdi-calendar",
label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
path: "/lists?system=leave",
path: "/logs?system=leave",
},
{
icon: "mdi-magnify",
label: "ระบบการสรรหาบุคคล",
path: "/lists?system=recruiting",
path: "/logs?system=recruiting",
},
{
icon: "mdi-account-check-outline",
label: "ระบบการประเมินบุคคล",
path: "/lists?system=evaluation",
path: "/logs?system=evaluation",
},
{
icon: "mdi-account-cancel-outline",
label: "ระบบพ้นจากราชการ",
path: "/lists?system=retirement",
path: "/logs?system=retirement",
},
{
icon: "mdi-cash",
label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
path: "/lists?system=salary",
path: "/logs?system=salary",
},
{
icon: "mdi-account-check-outline",
label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
path: "/lists?system=placement",
path: "/logs?system=placement",
},
{
icon: "mdi-account-convert",
label: "ระบบทดลองปฏิบัติหน้าที่ราชการ",
path: "/lists?system=probation",
path: "/logs?system=probation",
},
{
icon: "mdi-account-star",
label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
path: "/lists?system=KPI",
path: "/logs?system=KPI",
},
{
icon: "mdi-briefcase-account",
label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
path: "/lists?system=development",
path: "/logs?system=development",
},
{
icon: "mdi-medal-outline",
label: "ระบบงานเครื่องราชอิสริยาภรณ์",
path: "/lists?system=insignia",
path: "/logs?system=insignia",
},
// {
// icon: "mdi-monitor-dashboard",
// label: "ระบบการรายงานและ Dashboard",
// path: "/lists?system=report",
// },
{
icon: "mdi-scale-balance",
label: "ระบบดำเนินการทางวินัย",
path: "/lists?system=discipline",
path: "/logs?system=discipline",
},
// {
// icon: "mdi-briefcase-account",
// label: "ระบบบริการเจ้าของข้อมูลบุคคล",
// path: "/lists?system=owner",
// },
{
icon: "mdi-account-settings-outline",
label: "ระบบข้อมูลหลัก",
path: "/lists?system=master",
path: "/logs?system=master",
},
{
icon: "mdi-account-child-circle",
label: "ระบบ Admin",
path: "/lists?system=admin",
path: "/logs?system=admin",
},
// {
// icon: "mdi-shield-key",
// label: "ระบบ Single Sign-On",
// path: "/lists?system=sso",
// },
]);
onMounted(async () => {
@ -140,7 +125,7 @@ onMounted(async () => {
color="primary"
icon="mdi-arrow-left"
dense
to="lists"
to="logs"
>
</q-btn>
<div class="row items-center">