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
| import { h, createApp } from 'vue';
| import { ElDrawer } from 'element-plus';
|
| let extension = {
| components: {
| //动态扩充组件或组件路径
| //表单header、content、footer对应位置扩充的组件
| gridHeader: "", //{ template: "<div>扩展组xx件</div>" },
| gridBody: '',
| gridFooter: "",
| //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
| modelHeader: "",
| modelBody: "",
| modelFooter: ""
| },
| buttons: [], //扩展的按钮
| methods: {
| //事件扩展
| onInit() {
| console.log("sys_log")
| this.setFiexdSearchForm(true);
| },
| onInited() {
| this.height = this.height - 170;
| },
|
| // 行点击事件 - 显示参数详情抽屉
| rowClick({ row, column }) {
| // 如果点击的是请求参数或响应参数列，显示详情抽屉
| if (column.property === 'requestParam' && row.requestParam) {
| this.showJsonDetail(row, 'request');
| } else if (column.property === 'responseParam' && row.responseParam) {
| this.showJsonDetail(row, 'response');
| }
| },
|
| // 显示 JSON 详情抽屉
| showJsonDetail(row, type = 'request') {
| const content = type === 'request' ? row.requestParam : row.responseParam;
| const title = type === 'request' ? '📋 请求参数' : '📥 响应参数';
|
| // 格式化 JSON
| let formattedJson = '';
| try {
| const obj = typeof content === 'string' ? JSON.parse(content) : content;
| formattedJson = JSON.stringify(obj, null, 2);
| } catch (e) {
| formattedJson = String(content);
| }
|
| // 创建临时容器渲染抽屉
| const container = document.createElement('div');
| document.body.appendChild(container);
|
| const app = createApp({
| render() {
| return h('div', [
| h(ElDrawer, {
| modelValue: true,
| 'onUpdate:modelValue': (val) => {
| if (!val) {
| app.unmount();
| document.body.removeChild(container);
| }
| },
| title: title,
| size: '30%',
| destroyOnClose: true,
| closeOnClickModal: true
| }, {
| default: () => h('div', {
| style: {
| height: '30%',
| backgroundColor: '#f5f5f5',
| padding: '16px',
| borderRadius: '4px'
| }
| }, [
| h('pre', {
| style: {
| margin: '0',
| fontSize: '14px',
| lineHeight: '1.5',
| fontFamily: 'Consolas, Monaco, "Courier New", monospace',
| whiteSpace: 'pre-wrap',
| wordBreak: 'break-all'
| }
| }, formattedJson)
| ])
| })
| ]);
| }
| });
|
| app.use(window.ElementPlus);
| app.mount(container);
| }
| }
| };
| export default extension;
|
|
