เพิ่ม sequence ใน log + ลดความกว้าง res message

This commit is contained in:
oat_dev 2024-07-26 11:00:28 +07:00
parent 98452b7878
commit cf02eeb934

View file

@ -143,6 +143,7 @@ const visibleColumns = ref<string[]>([
"responseCode",
"logType",
"responseDescription",
"sequence",
"dataDiff",
]);
@ -324,8 +325,11 @@ onMounted(() => {
? 'primary'
: 'warning'
}`"
class="ellipsis"
style="max-width: 10vw"
>
{{ col.value ?? "-" }}
<q-tooltip> {{ col.value }} </q-tooltip>
</div>
<div v-else-if="col.name === 'dataDiff' && !!col.value">
@ -336,7 +340,7 @@ onMounted(() => {
icon="mdi-eye-outline"
color="primary"
size="12px"
@click.petvent="
@click.stop="
() => {
currentDataDiff = col.value;
currentlogData = {
@ -348,6 +352,7 @@ onMounted(() => {
responseCode: props.row.responseCode,
logType: props.row.logType,
responseDescription: props.row.responseDescription,
sequence: props.row.sequence,
dataDiff: props.row.dataDiff,
};
openDialog = true;
@ -383,18 +388,18 @@ onMounted(() => {
<div class="column" style="border: #f0ecec 1px solid">
<div
class="col row"
:class="{ 'bg-grey-3': i % 2 }"
v-for="(item, index, i) in currentlogData"
:key="index"
:class="{ 'bg-grey-3': index % 2 }"
v-for="(item, key, index) in currentlogData"
:key="key"
style="border-bottom: #f0ecec 1px solid; min-height: 40px"
>
<div
class="col q-pl-sm"
:class="{
'self-center': index !== 'dataDiff',
'q-pt-md': index === 'dataDiff',
'self-center': key !== 'dataDiff' && key !== 'sequence',
'q-pt-md': key === 'dataDiff',
}"
style="max-width: 150px; border-right: #f0ecec 1px solid"
style="max-width: 150px"
>
{{
{
@ -406,25 +411,26 @@ onMounted(() => {
responseCode: "Response Code",
logType: "สถานะ",
responseDescription: "ข้อความ",
sequence: "ลำดับการทำงาน",
dataDiff: "ข้อมูลที่เปลี่ยนแปลง",
}[index] || index
}[key] || key
}}
</div>
<div
class="self-center"
v-if="index === 'startTimeStamp' && typeof item === 'string'"
v-if="key === 'startTimeStamp' && typeof item === 'string'"
>
{{ date2Thai(new Date(item), false, true) }}
</div>
<div class="self-center" v-if="index === 'method'">
<div class="self-center" v-if="key === 'method'">
<q-badge text-color="blue" style="background-color: #f0ecec">{{
item ?? "-"
}}</q-badge>
</div>
<div class="self-center" v-else-if="index === 'logType'">
<div class="self-center" v-else-if="key === 'logType'">
<q-badge
text-color="white"
:color="
@ -433,14 +439,61 @@ onMounted(() => {
>{{ item ?? "-" }}</q-badge
>
</div>
<div class="col q-pr-md" v-else-if="key === 'sequence'">
<div v-for="(row, index) in item">
<div class="text-subtitle1 text-bold">ลำดบท {{ index + 1 }}</div>
<div
class="q-pa-md q-mb-md"
style="border: 1px solid hsla(0 0% 0% / 0.1); border-radius: 7px"
>
<div class="row" v-for="(value, key) in row" :key="key">
<div v-if="typeof key === 'string' && key === 'query'">
{{ `${key}: ` }}
<div
class="q-pa-md q-mt-sm"
style="
background-color: hsla(0 0% 0% / 0.07);
color: hsl(0 0% 30%);
border: 1px solid hsla(0 0% 0% / 0.1);
border-radius: 7px;
"
v-for="q in value"
>
{{ `${q}` }}
</div>
</div>
<div v-else-if="typeof key === 'string' && key === 'request'">
{{ `${key}: ` }}
<div
class="q-pa-md q-mt-sm"
style="
background-color: hsla(0 0% 0% / 0.07);
color: hsl(0 0% 30%);
border: 1px solid hsla(0 0% 0% / 0.1);
border-radius: 7px;
"
>
<div v-for="(req, k) in value">
{{ `${k}: ${req}` }}
</div>
</div>
</div>
<div v-else>
{{ `${key}: ${value}` }}
</div>
</div>
</div>
</div>
</div>
<div
class="col self-center"
v-if="
index !== 'dataDiff' &&
index !== 'method' &&
index !== 'logType' &&
index !== 'startTimeStamp'
key !== 'dataDiff' &&
key !== 'method' &&
key !== 'logType' &&
key !== 'startTimeStamp' &&
key !== 'sequence'
"
>
{{ item }}