1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| <template>
| <AppContainer>
| <ProTableV2
| :columns="columns"
| :operationBtns="operationBtns"
| :table-data="threeResourceLogs"
| :column-render-map="columnsRenderProps"
| >
| <template #requestHeaders="{ row }">
| <el-button
| type="primary"
| link
| @click="handleAdd({ json: { requestHeaders: JSON.parse(row.requestHeaders) } })"
| >查看</el-button
| >
| </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 {
| AppContainer,
| ProTableV2,
| defineColumns,
| ProTableV2Props,
| useFormDialog,
| defineOperationBtns,
| } from '@bole-core/components';
| import { EnumResourceMethodText } from '@/constants';
| import JsonViewerDialog from './JsonViewerDialog.vue';
|
| defineOptions({
| name: 'ThreeResourceLogsView',
| });
|
| type Props = {
| threeResourceLogs: API.GetThreeResourceLogsQueryResultItem[];
| };
| const props = withDefaults(defineProps<Props>(), {
| threeResourceLogs: () => [] as API.GetThreeResourceLogsQueryResultItem[],
| });
|
| 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>
|
|
