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

ต่อฟังก์ชั่น

Browse source
This commit is contained in:
oat_dev 2024-07-11 11:39:04 +07:00
parent 3f225d2d58
commit 85fa54088d
2 changed files with 196 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,21 @@
<script setup lang="ts">
import { ref } from "vue";
import { cloneVNode, ref } from "vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/03_logs/stores/main";
import { storeToRefs } from "pinia";
/** importStore*/
const storeData = useDataStore();
const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
const { date2Thai } = useCounterMixin();
const columns = ref<QTableProps["columns"]>([
{
name: "timestamp",
name: "startTimeStamp",
align: "left",
label: "เวลา",
sortable: true,
field: "timestamp",
field: "startTimeStamp",
headerStyle: "font-size: 14px",
format: (v) => date2Thai(v, false, true),
style: "font-size: 14px",
@ -72,22 +78,22 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
name: "logType",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
field: "logType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "message",
name: "responseDescription",
align: "left",
label: "ข้อความ",
sortable: true,
field: "message",
field: "responseDescription",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -95,54 +101,39 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const inputSearch = defineModel<string>("inputSearch");
const selectDate = ref<Date>(new Date());
const pagination = ref({
page: 1,
rowsPerPage: 10,
rowsPerPage: 0,
});
const inputSearch = ref<string>("");
const visibleColumns = ref<string[]>([
"timestamp",
"startTimeStamp",
"username",
"host",
"endpoint",
"method",
"responseCode",
"status",
"message",
"logType",
"responseDescription",
]);
const rows = [
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Put",
responseCode: 401,
status: "Error",
message: "Unknow value Found",
},
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Delete",
responseCode: 200,
status: "Warning",
message: "Balance getting below",
},
{
timestamp: new Date(),
username: "สมรักษ์ จงใจรักชาติ",
host: "http://localhost:3005/lists",
endpoint: "registry-employee",
method: "Get",
responseCode: 200,
status: "Info",
message: "Backup success",
},
];
function handleScroll(event: any) {
const element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight) {
storeData.fetchLog(
{
size: size.value ?? undefined,
search: inputSearch.value ?? undefined,
systemName: systemName.value ?? undefined,
searchAfter: searchAfter.value ?? undefined,
},
true
);
setTimeout(() => {}, 500);
}
}
</script>
<template>
@ -154,7 +145,7 @@ const rows = [
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="console.log('test')"
@update:modelValue="console.log('date')"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
@ -182,11 +173,17 @@ const rows = [
standout
dense
clearable
:model-value="inputSearch"
v-model="inputSearch"
ref="filterRef"
@update:model-value="console.log('update')"
@update:model-value="
storeData.fetchLog({
size: size ?? undefined,
search: inputSearch ?? undefined,
systemName: systemName ?? undefined,
})
"
outlined
debounce="300"
debounce="500"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
@ -212,72 +209,85 @@ const rows = [
/>
</div>
</div>
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="name"
flat
bordered
:paging="true"
:filter="inputSearch"
dense
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'username'">
{{ col.value }}
<div class="text-grey">{{ 12421321334 }}</div>
</div>
<div v-else-if="col.name === 'method'">
<q-badge text-color="blue" style="background-color: #f0ecec">{{
col.value
}}</q-badge>
</div>
<div v-else-if="col.name === 'status'">
<q-badge
text-color="white"
:color="
col.value === 'Error'
? 'red'
: col.value === 'Info'
? 'primary'
: 'warning'
"
>{{ col.value }}</q-badge
>
</div>
<div
v-else-if="col.name === 'message'"
:class="`text-${
props.row.status === 'Error'
? 'red'
: props.row.status === 'Info'
? 'primary'
: 'warning'
}`"
<div class="q-pa-md">
<div style="max-height: 70vh; overflow: scroll" @scroll="handleScroll">
<d-table
ref="table"
:columns="columns"
:rows="storeData.logData"
row-key="name"
flat
bordered
hide-pagination
v-model:pagination="pagination"
dense
:rows-per-page-options="[0]"
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
style="overflow: scroll"
>
{{ col.value }}
</div>
<div v-else>
{{ col.value === "" || col.value === null ? "-" : col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'username'">
{{ props.row.user }}
<div class="text-grey" style="font-size: 65%">
{{ props.row.userId }}
</div>
</div>
<div v-else-if="col.name === 'method'">
<q-badge
text-color="blue"
style="background-color: #f0ecec"
>{{ col.value ?? "-" }}</q-badge
>
</div>
<div v-else-if="col.name === 'logType'">
<q-badge
text-color="white"
:color="
col.value === 'error'
? 'red'
: col.value === 'info'
? 'primary'
: 'warning'
"
>{{ col.value ?? "-" }}</q-badge
>
</div>
<div
v-else-if="col.name === 'responseDescription'"
:class="`text-${
props.row.logType === 'Error'
? 'red'
: props.row.logType === 'info'
? 'primary'
: 'warning'
}`"
>
{{ col.value ?? "-" }}
</div>
<div v-else class="ellipsis" style="max-width: 15vw">
{{ col.value === "" || col.value === null ? "-" : col.value }}
<q-tooltip> {{ col.value }} </q-tooltip>
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</template>

124
src/modules/03_logs/views/lists.vue
View file

@ -3,147 +3,169 @@
/** 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 { useCurrencyInput } from "vue-currency-input";
import { useDataStore } from "@/modules/03_logs/stores/main";
import { storeToRefs } from "pinia";
/** importStore*/
const storeData = useDataStore();
const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
const route = useRoute();
/** use*/
const title = ref<string>("");
const $q = useQuasar();
const menuList = ref<{ icon: string; label: string; path: string }[]>([
{
icon: "mdi-file-account-outline",
label: "ระบบทะเบียนประวัติ",
path: "lists?system=register",
path: "/lists?system=register",
},
{
icon: "mdi-account-group",
label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
path: "lists?system=organization",
path: "/lists?system=organization",
},
{
icon: "mdi-calendar",
label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
path: "lists?system=timekeeping",
path: "/lists?system=timekeeping",
},
{
icon: "mdi-magnify",
label: "ระบบการสรรหาบุคคล",
path: "lists?system=search",
path: "/lists?system=search",
},
{
icon: "mdi-account-check-outline",
label: "ระบบการประเมินบุคคล",
path: "lists?system=evaluation",
path: "/lists?system=evaluation",
},
{
icon: "mdi-account-cancel-outline",
label: "ระบบพ้นจากราชการ",
path: "lists?system=recruit",
path: "/lists?system=recruit",
},
{
icon: "mdi-cash",
label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
path: "lists?system=payroll",
path: "/lists?system=payroll",
},
{
icon: "mdi-account-check-outline",
label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
path: "lists?system=transfer",
path: "/lists?system=transfer",
},
{
icon: "mdi-account-star",
label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
path: "lists?system=assessment",
path: "/lists?system=assessment",
},
{
icon: "mdi-briefcase-account",
label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
path: "lists?system=development",
path: "/lists?system=development",
},
{
icon: "mdi-medal-outline",
label: "ระบบงานเครื่องราชอิสริยาภรณ์",
path: "lists?system=machine",
path: "/lists?system=machine",
},
{
icon: "mdi-monitor-dashboard",
label: "ระบบการรายงานและ Dashboard",
path: "lists?system=report",
path: "/lists?system=report",
},
{
icon: "mdi-scale-balance",
label: "ระบบดำเนินการทางวินัย",
path: "lists?system=cybersecurity",
path: "/lists?system=cybersecurity",
},
{
icon: "mdi-briefcase-account",
label: "ระบบบริการเจ้าของข้อมูลบุคคล",
path: "lists?system=owner",
path: "/lists?system=owner",
},
{
icon: "mdi-account-settings-outline",
label: "ระบบข้อมูลหลัก",
path: "lists?system=master",
path: "/lists?system=master",
},
{
icon: "mdi-account-child-circle",
label: "ระบบ Admin",
path: "lists?system=admin",
path: "/lists?system=admin",
},
{
icon: "mdi-shield-key",
label: "ระบบ Single Sign-On",
path: "lists?system=sso",
path: "/lists?system=sso",
},
]);
onMounted(async () => {
console.log("");
await storeData.fetchLog({
size: size.value,
systemName: systemName.value ?? undefined,
});
if (route.query.system) {
const a = menuList.value.find((v) => {
if (v.path.includes(route.fullPath)) {
title.value = v.label;
}
});
}
});
</script>
<template>
<div>
<div class="row q-mb-lg">
<q-btn
flat
v-if="route.query.system"
round
class="q-mr-sm"
color="primary"
icon="mdi-arrow-left"
dense
to="lists"
<div class="row q-mb-lg">
<q-btn
flat
v-if="route.query.system"
round
class="q-mr-sm"
color="primary"
icon="mdi-arrow-left"
dense
to="lists"
>
</q-btn>
<div class="row items-center">
<span
class="text-bold text-h6 text-dark items-center q-mr-md"
:class="!route.query.system ? 'q-ml-lg' : ''"
>
</q-btn>
<div class="row items-center">
<span class="toptitle text-dark items-center q-mr-md">
ประวัติกิจกรรม (Logs)
</span>
<div
v-if="route.query.system"
class="toptitle text-primary items-center"
>
ระบบทะเบียนประวัติ
</div>
ประวัติกิจกรรม (Logs)
</span>
<div
v-if="route.query.system"
class="text-bold text-h6 text-primary items-center"
>
{{ title }}
</div>
</div>
</div>
<div v-if="!route.query.system" class="row q-col-gutter-lg full-width">
<div class="col-3" :key="index" v-for="(item, index) in menuList">
<CardComponents
class="cursor-pointer"
@click="$router.push(item.path)"
:index="index"
:icon="item.icon"
:label="item.label"
/>
</div>
<div v-if="!route.query.system" class="row q-col-gutter-lg full-width">
<div
:class="$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-4' : 'col-6'"
:key="index"
v-for="(item, index) in menuList"
>
<CardComponents
class="cursor-pointer"
@click="() => $router.push(item.path)"
:index="index"
:icon="item.icon"
:label="item.label"
/>
</div>
</div>