From 588f577a14b2a51663d43f3bf2f303862d65b932 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期一, 29 九月 2025 09:15:53 +0800
Subject: [PATCH] feat: 短信
---
src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue | 181 +++++++++++++++++++++++++++++---------------
1 files changed, 118 insertions(+), 63 deletions(-)
diff --git a/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue b/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
index 1d9dd8a..333817d 100644
--- a/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
+++ b/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
@@ -1,68 +1,67 @@
<template>
- <el-collapse v-model="activeName" accordion>
- <el-collapse-item
- v-for="item in threeResourceLogs"
- :key="item.id"
- name="1"
- style="overflow: auto; max-height: 600px"
+ <AppContainer>
+ <ProTableV2
+ :columns="columns"
+ :operationBtns="operationBtns"
+ :table-data="threeResourceLogs"
+ :column-render-map="columnsRenderProps"
>
- <ProForm :model="item" is-read>
- <ProFormItemV2 label="method:">
- {{ EnumResourceMethodText[item.method] }}
- </ProFormItemV2>
- <ProFormItemV2 label="domain:">{{ item.domain }} </ProFormItemV2>
- <ProFormItemV2 label="path:"> {{ item.path }}</ProFormItemV2>
- <ProFormItemV2 label="requestHeaders:" label-position="top">
- <json-viewer
- :copyable="true"
- :boxed="true"
- :value="JSON.parse(item.requestHeaders)"
- ></json-viewer>
- </ProFormItemV2>
- <ProFormItemV2 label="request:" label-position="top">
- <json-viewer
- :copyable="true"
- :boxed="true"
- :value="JSON.parse(item.request)"
- ></json-viewer>
- </ProFormItemV2>
- <ProFormItemV2 label="responseHeaders:" label-position="top">
- <json-viewer
- :copyable="true"
- :boxed="true"
- :value="JSON.parse(item.responseHeaders)"
- ></json-viewer>
- </ProFormItemV2>
- <ProFormItemV2 label="response:" label-position="top">
- <json-viewer
- :copyable="true"
- :boxed="true"
- :value="JSON.parse(item.response)"
- ></json-viewer>
- </ProFormItemV2>
- <ProFormItemV2 label="isSuccess:"> {{ item.isSuccess ? '鏄�' : '鍚�' }}</ProFormItemV2>
- <ProFormItemV2 label="elapsedMilliseconds:"> {{ item.elapsedMilliseconds }}</ProFormItemV2>
- <ProFormItemV2 label="createdUser:">
- <json-viewer
- :copyable="true"
- :boxed="true"
- :value="JSON.parse(JSON.stringify(item.createdUser))"
- ></json-viewer>
- </ProFormItemV2>
- <ProFormItemV2 label="createdTime:">
- {{ format(item.createdTime, 'YYYY-MM-DD HH:mm:ss') }}</ProFormItemV2
+ <template #requestHeaders="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: { requestHeaders: JSON.parse(row.requestHeaders) } })"
+ >鏌ョ湅</el-button
>
- </ProForm>
- </el-collapse-item>
- </el-collapse>
+ </template>
+ <template #request="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: { request: JSON.parse(row.request) } })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #responseHeaders="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: { responseHeaders: JSON.parse(row.responseHeaders) } })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #response="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: { response: JSON.parse(row.response) } })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #createdUser="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: { createdUser: JSON.parse(JSON.stringify(row.createdUser)) } })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ </ProTableV2>
+ <JsonViewerDialog v-bind="dialogProps" />
+ </AppContainer>
</template>
<script setup lang="ts">
-import { ProForm, ProFormItemV2 } from '@bole-core/components';
+import {
+ AppContainer,
+ ProTableV2,
+ defineColumns,
+ ProTableV2Props,
+ useFormDialog,
+ defineOperationBtns,
+} from '@bole-core/components';
import { EnumResourceMethodText } from '@/constants';
-import JsonViewer from 'vue-json-viewer';
-
-import { format } from '@/utils';
+import JsonViewerDialog from './JsonViewerDialog.vue';
defineOptions({
name: 'ThreeResourceLogsView',
@@ -71,12 +70,68 @@
type Props = {
threeResourceLogs: API.GetThreeResourceLogsQueryResultItem[];
};
-const activeName = ref('1');
const props = withDefaults(defineProps<Props>(), {
threeResourceLogs: () => [] as API.GetThreeResourceLogsQueryResultItem[],
});
-</script>
-<style lang="scss" scoped>
-@use '@/style/common.scss' as *;
-</style>
+const columns = defineColumns(
+ [
+ 'method',
+ 'domain',
+ 'path',
+ 'requestHeaders',
+ 'request',
+ 'responseHeaders',
+ 'response',
+ 'isSuccess',
+ 'elapsedMilliseconds',
+ 'createdUser',
+ 'createdTime',
+ ].map((x, index) => ({
+ id: index + '',
+ enCode: x,
+ name: x,
+ width: 160,
+ }))
+);
+
+const operationBtns = defineOperationBtns([
+ {
+ data: {
+ enCode: 'detailBtn',
+ name: '鏌ョ湅',
+ },
+ emits: {
+ onClick: (role) => openDialog(role),
+ },
+ },
+]);
+
+const columnsRenderProps: ProTableV2Props['columnRenderMap'] = {
+ method: { type: 'enum', valueEnum: EnumResourceMethodText },
+ isSuccess: {
+ formatter: (row: API.GetResourceLogsQueryResultItem) => {
+ return row.isSuccess ? '鏄�' : '鍚�';
+ },
+ },
+ createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+};
+
+const { dialogProps, handleAdd } = useFormDialog({
+ defaultFormParams: {
+ json: null,
+ },
+});
+
+function openDialog(row: API.GetResourceLogsQueryResultItem) {
+ handleAdd({
+ json: {
+ requestHeaders: JSON.parse(row.requestHeaders),
+ request: JSON.parse(row.request),
+ responseHeaders: JSON.parse(row.responseHeaders),
+ response: JSON.parse(row.response),
+ createdUser: JSON.parse(JSON.stringify(row.createdUser)),
+ },
+ });
+}
+</script>
--
Gitblit v1.9.1