ประวัติกิจกรรม (Logs) => ปรับ filter
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5fce21c6fc
commit
724790ae30
2 changed files with 430 additions and 237 deletions
|
|
@ -109,11 +109,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const startTime = ref<string>();
|
||||
const startTime = ref<Date | null>(null);
|
||||
const endTime = ref<Date | null>(null);
|
||||
const startDate = ref<string>("");
|
||||
const endTime = ref<string>();
|
||||
const sortTime = ref<"desc" | "asc">("desc");
|
||||
const endDate = ref<string>("");
|
||||
const sortTime = ref<"desc" | "asc">("desc");
|
||||
const openDialog = ref<boolean>(false);
|
||||
const currentlogData =
|
||||
ref<Omit<ResLog, "endTimeStamp" | "tId" | "processTime" | "systemName">>();
|
||||
|
|
@ -131,6 +131,39 @@ const pagination = ref({
|
|||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const labelDropdown = ref<string>("วันนี้");
|
||||
const valDropdown = ref<string>("");
|
||||
const searchStatus = ref<string>("");
|
||||
|
||||
const itemsDropdown = ref<any[]>([
|
||||
{
|
||||
labal: "วันนี้",
|
||||
val: "today",
|
||||
},
|
||||
{
|
||||
labal: "เมื่อวาน",
|
||||
val: "yesterday",
|
||||
},
|
||||
{
|
||||
labal: "ย้อนหลัง 24 ชั่วโมง",
|
||||
val: "past24hours",
|
||||
},
|
||||
{
|
||||
labal: "ย้อนหลัง 7 วัน",
|
||||
val: "past7days",
|
||||
},
|
||||
{
|
||||
labal: "ย้อนหลัง 30 วัน",
|
||||
val: "past30days",
|
||||
},
|
||||
{
|
||||
labal: "กำหนดเอง",
|
||||
val: "customized",
|
||||
},
|
||||
]);
|
||||
|
||||
const statusOpt = ref<any[]>(["info", "warning", "error"]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"startTimeStamp",
|
||||
"username",
|
||||
|
|
@ -146,6 +179,7 @@ const visibleColumns = ref<string[]>([
|
|||
|
||||
function handleScroll() {
|
||||
let scrollFlag = false;
|
||||
|
||||
return async (e: Event) => {
|
||||
if (scrollFlag) return;
|
||||
|
||||
|
|
@ -179,23 +213,34 @@ function handleScroll() {
|
|||
const infiniteScroll = handleScroll();
|
||||
|
||||
function selectedDate() {
|
||||
startDate.value = date.value[0].toISOString();
|
||||
endDate.value = date.value[1].toISOString();
|
||||
if (!startDate.value) {
|
||||
const startDateToday = new Date();
|
||||
startDateToday.setHours(0, 0, 0, 0);
|
||||
|
||||
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();
|
||||
// ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
|
||||
const endDateToday = new Date();
|
||||
endDateToday.setHours(23, 59, 59, 999);
|
||||
|
||||
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;
|
||||
|
|
@ -206,6 +251,7 @@ function selectedDate() {
|
|||
systemName: systemName.value ?? undefined,
|
||||
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,88 +306,112 @@ function dateThaiRange(val: [Date, Date]) {
|
|||
}
|
||||
}
|
||||
|
||||
function onItemClick(labal: string, type: string) {
|
||||
labelDropdown.value = labal;
|
||||
valDropdown.value = type;
|
||||
|
||||
if (type === "today") {
|
||||
// ตั้งค่า startDateToday เป็นเวลา 23:59:59 ของวันนี้
|
||||
const startDateToday = new Date();
|
||||
startDateToday.setHours(0, 0, 0, 0);
|
||||
|
||||
// ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
|
||||
const endDateToday = new Date();
|
||||
endDateToday.setHours(23, 59, 59, 999);
|
||||
|
||||
startDate.value = startDateToday.toISOString();
|
||||
endDate.value = endDateToday.toISOString();
|
||||
|
||||
selectedDate();
|
||||
} else if (type === "yesterday") {
|
||||
const endDateNow = new Date(); // เวลาปัจจุบัน
|
||||
|
||||
// ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันก่อนหน้า
|
||||
endDateNow.setDate(endDateNow.getDate() - 1);
|
||||
endDateNow.setHours(23, 59, 59, 999);
|
||||
|
||||
// ตั้งค่า startDate เป็นเวลา 00:00:00 ของวันก่อนหน้า
|
||||
const startDateYesterday = new Date(endDateNow);
|
||||
startDateYesterday.setHours(0, 0, 0, 0);
|
||||
|
||||
startDate.value = startDateYesterday.toISOString();
|
||||
endDate.value = endDateNow.toISOString();
|
||||
|
||||
selectedDate();
|
||||
} else if (type === "past24hours") {
|
||||
// ตั้งค่า startDatePast เป็นเวลาย้อนหลัง 24 hours
|
||||
const startDatePast = new Date();
|
||||
startDatePast.setHours(startDatePast.getHours() - 24);
|
||||
|
||||
startDate.value = startDatePast.toISOString();
|
||||
endDate.value = new Date().toISOString();
|
||||
|
||||
selectedDate();
|
||||
} else if (type === "past7days") {
|
||||
// ตั้งค่า startDatePast เป็นเวลาย้อนหลัง 7 วัน
|
||||
const startDatePast = new Date();
|
||||
startDatePast.setDate(startDatePast.getDate() - 7);
|
||||
|
||||
startDate.value = startDatePast.toISOString();
|
||||
endDate.value = new Date().toISOString();
|
||||
|
||||
selectedDate();
|
||||
} else if (type === "past30days") {
|
||||
// ตั้งค่า startDatePast เป็นเวลาย้อนหลัง 30 วัน
|
||||
const startDatePast = new Date();
|
||||
startDatePast.setDate(startDatePast.getDate() - 30);
|
||||
|
||||
startDate.value = startDatePast.toISOString();
|
||||
endDate.value = new Date().toISOString();
|
||||
|
||||
selectedDate();
|
||||
}
|
||||
|
||||
startTime.value = null;
|
||||
endTime.value = null;
|
||||
}
|
||||
|
||||
function updateDate() {
|
||||
if (startTime.value && endTime.value) {
|
||||
startDate.value = startTime.value.toISOString();
|
||||
endDate.value = endTime.value.toISOString();
|
||||
|
||||
selectedDate();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
systemName.value = route.query.system as string;
|
||||
startDate.value = date.value[0].toISOString();
|
||||
endDate.value = date.value[1].toISOString();
|
||||
// startDate.value = date.value[0].toISOString();
|
||||
// endDate.value = date.value[1].toISOString();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<div class="row q-pa-md no-wrap">
|
||||
<div class="row col-7">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
range
|
||||
class="col"
|
||||
style="max-width: 300px"
|
||||
:enableTimePicker="true"
|
||||
@update:modelValue="selectedDate"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:model-value="dateThaiRange(date)"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<div class="q-pl-sm row items-center">
|
||||
จาก
|
||||
<q-input
|
||||
v-model="startTime"
|
||||
outlined
|
||||
clearable
|
||||
@clear="selectedDate()"
|
||||
@update:model-value="
|
||||
(v:string) =>{
|
||||
if(v){
|
||||
replaceTimeInISOString(startDate,v,'start'),
|
||||
selectedDate()
|
||||
}}
|
||||
"
|
||||
hide-bottom-space
|
||||
dense
|
||||
class="q-px-sm"
|
||||
type="time"
|
||||
/>
|
||||
</div>
|
||||
<div class="row items-center">
|
||||
ถึง
|
||||
<q-input
|
||||
v-model="endTime"
|
||||
outlined
|
||||
clearable
|
||||
@clear="selectedDate()"
|
||||
hide-bottom-space
|
||||
@update:model-value="
|
||||
(v:string) =>{
|
||||
if(v){
|
||||
replaceTimeInISOString(endDate,v,'end'),
|
||||
selectedDate()
|
||||
}}
|
||||
"
|
||||
dense
|
||||
stack-label="test"
|
||||
class="q-px-sm"
|
||||
type="time"
|
||||
/>
|
||||
<div class="bg-white q-pa-md">
|
||||
<div class="row no-wrap">
|
||||
<div class="row col-7 q-col-gutter-md">
|
||||
<div>
|
||||
<q-btn-dropdown outline color="grey-5">
|
||||
<template v-slot:label>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="text-black">{{ labelDropdown }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<q-list>
|
||||
<q-item
|
||||
dense
|
||||
v-for="(item, index) in itemsDropdown"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onItemClick(item.labal, item.val)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.labal }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -378,6 +448,46 @@ onMounted(() => {
|
|||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-model="searchStatus"
|
||||
label="ค้นหาสถานะ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="statusOpt"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
borderless
|
||||
outlined
|
||||
style="width: 150px"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:modelValue="selectedDate()"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:selected-item="scope">
|
||||
<q-chip
|
||||
dense
|
||||
:tabindex="scope.tabindex"
|
||||
:color="
|
||||
scope.opt === 'info'
|
||||
? 'primary'
|
||||
: scope.opt === 'warning'
|
||||
? 'warning'
|
||||
: scope.opt === 'error'
|
||||
? 'red'
|
||||
: 'white'
|
||||
"
|
||||
text-color="white"
|
||||
class="q-ma-none text-caption"
|
||||
style="border-radius: 3px; max-width: 60vw; word-wrap: break-word"
|
||||
>
|
||||
{{ scope.opt }}
|
||||
</q-chip>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
|
|
@ -395,156 +505,234 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-md">
|
||||
<div style="max-height: 70vh; overflow: scroll" @scroll="infiniteScroll">
|
||||
<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"
|
||||
<div
|
||||
v-if="valDropdown === 'customized'"
|
||||
class="row q-col-gutter-md q-mt-xs"
|
||||
>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
v-model="startTime"
|
||||
:locale="'th'"
|
||||
:max-date="endTime"
|
||||
selectText="เลือก"
|
||||
cancelText="ยกเลิก"
|
||||
@update:modelValue="updateDate()"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name === 'startTimeStamp'"
|
||||
class="text-weight-medium"
|
||||
>
|
||||
{{ col.label }}
|
||||
<q-btn
|
||||
v-if="sortTime === 'desc'"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
icon="mdi-arrow-up"
|
||||
@click="
|
||||
() => {
|
||||
sortTime = 'asc';
|
||||
selectedDate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
icon="mdi-arrow-down"
|
||||
@click="
|
||||
() => {
|
||||
sortTime = 'desc';
|
||||
selectedDate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span v-else 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"
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
startTime ? date2Thai(startTime, false, true) : null
|
||||
"
|
||||
:label="`${'วันเริ่มต้น'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'username'">
|
||||
<template v-if="props.row.userName && props.row.user">
|
||||
{{ props.row.userName ?? "-" }}
|
||||
<div class="text-grey" style="font-size: 65%">
|
||||
{{ props.row.user ?? "-" }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else> - </template>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'method'">
|
||||
<q-badge
|
||||
:text-color="classColorMethod(col.value)"
|
||||
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'
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<template #action-preview="{ value }">
|
||||
{{ date2Thai(value, false, true) }}
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
v-model="endTime"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="true"
|
||||
selectText="เลือก"
|
||||
cancelText="ยกเลิก"
|
||||
@update:modelValue="updateDate()"
|
||||
:min-date="startTime"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="endTime ? date2Thai(endTime, false, true) : null"
|
||||
:label="`${'วันสิ้นสุด'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<template #action-preview="{ value }">
|
||||
{{ date2Thai(value, false, true) }}
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-mt-md"
|
||||
style="max-height: 70vh; overflow: scroll"
|
||||
@scroll="infiniteScroll"
|
||||
>
|
||||
<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">
|
||||
<div
|
||||
v-if="col.name === 'startTimeStamp'"
|
||||
class="text-weight-medium"
|
||||
>
|
||||
{{ col.label }}
|
||||
<q-btn
|
||||
v-if="sortTime === 'desc'"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
icon="mdi-arrow-up"
|
||||
@click="
|
||||
() => {
|
||||
sortTime = 'asc';
|
||||
selectedDate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
icon="mdi-arrow-down"
|
||||
@click="
|
||||
() => {
|
||||
sortTime = 'desc';
|
||||
selectedDate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span v-else 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">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'username'">
|
||||
<template v-if="props.row.userName && props.row.user">
|
||||
{{ props.row.userName ?? "-" }}
|
||||
<div class="text-grey" style="font-size: 65%">
|
||||
{{ props.row.user ?? "-" }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else> - </template>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'method'">
|
||||
<q-badge
|
||||
:text-color="classColorMethod(col.value)"
|
||||
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'
|
||||
: props.row.logType === 'info'
|
||||
: col.value === 'info'
|
||||
? 'primary'
|
||||
: 'warning'
|
||||
}`"
|
||||
class="ellipsis"
|
||||
style="max-width: 10vw"
|
||||
"
|
||||
>{{ col.value ?? "-" }}</q-badge
|
||||
>
|
||||
{{ col.value ?? "-" }}
|
||||
<q-tooltip> {{ col.value }} </q-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name === 'responseDescription'"
|
||||
:class="`text-${
|
||||
props.row.logType === 'Error'
|
||||
? 'red'
|
||||
: props.row.logType === 'info'
|
||||
? 'primary'
|
||||
: 'warning'
|
||||
}`"
|
||||
class="ellipsis"
|
||||
style="max-width: 10vw"
|
||||
>
|
||||
{{ col.value ?? "-" }}
|
||||
<q-tooltip> {{ col.value }} </q-tooltip>
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'dataDiff'">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
icon="mdi-eye-outline"
|
||||
color="primary"
|
||||
size="12px"
|
||||
@click.stop="
|
||||
() => {
|
||||
currentDataDiff = col.value;
|
||||
currentlogData = {
|
||||
startTimeStamp: props.row.startTimeStamp,
|
||||
username: props.row.userName,
|
||||
host: props.row.host,
|
||||
endpoint: props.row.endpoint,
|
||||
method: props.row.method,
|
||||
responseCode: props.row.responseCode,
|
||||
logType: props.row.logType,
|
||||
responseDescription: props.row.responseDescription,
|
||||
sequence: props.row.sequence,
|
||||
dataDiff: props.row.dataDiff,
|
||||
input: props.row.input,
|
||||
output: props.row.output,
|
||||
};
|
||||
openDialog = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>ดูรายละเอียด </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'dataDiff'">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
icon="mdi-eye"
|
||||
color="info"
|
||||
@click.stop="
|
||||
() => {
|
||||
currentDataDiff = col.value;
|
||||
currentlogData = {
|
||||
startTimeStamp: props.row.startTimeStamp,
|
||||
username: props.row.userName,
|
||||
host: props.row.host,
|
||||
endpoint: props.row.endpoint,
|
||||
method: props.row.method,
|
||||
responseCode: props.row.responseCode,
|
||||
logType: props.row.logType,
|
||||
responseDescription: props.row.responseDescription,
|
||||
sequence: props.row.sequence,
|
||||
dataDiff: props.row.dataDiff,
|
||||
input: props.row.input,
|
||||
output: props.row.output,
|
||||
};
|
||||
openDialog = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>ดูรายละเอียด </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-else class="ellipsis" style="max-width: 10vw">
|
||||
{{ col.value === "" || col.value === null ? "-" : col.value }}
|
||||
<q-tooltip> {{ col.value }} </q-tooltip>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<div v-else class="ellipsis" style="max-width: 10vw">
|
||||
{{ col.value === "" || col.value === null ? "-" : col.value }}
|
||||
<q-tooltip> {{ col.value }} </q-tooltip>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -714,8 +902,12 @@ onMounted(() => {
|
|||
</DialogDataDiff>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.row-color:nth-child(2n + 1) {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.dp__action_row {
|
||||
padding: 2px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue