import { createApp } from 'vue';
|
import { ElDrawer } from 'element-plus';
|
import { JsonViewer } from 'vue3-json-viewer';
|
import 'vue3-json-viewer/dist/vue3-json-viewer.css';
|
|
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 jsonData;
|
try {
|
jsonData = typeof content === 'string' ? JSON.parse(content) : content;
|
} catch (e) {
|
jsonData = String(content);
|
}
|
|
// 创建临时容器渲染抽屉
|
const container = document.createElement('div');
|
document.body.appendChild(container);
|
|
const app = createApp({
|
render() {
|
const onClose = (val) => {
|
if (!val) {
|
app.unmount();
|
document.body.removeChild(container);
|
}
|
};
|
return (
|
<div>
|
<ElDrawer
|
modelValue={true}
|
onUpdate:modelValue={onClose}
|
title={title}
|
size="40%"
|
destroyOnClose={true}
|
closeOnClickModal={true}
|
>
|
<JsonViewer
|
value={jsonData}
|
expanded={true}
|
expandDepth={5}
|
copyable={true}
|
sort={false}
|
theme="light"
|
/>
|
</ElDrawer>
|
</div>
|
);
|
}
|
});
|
|
app.use(window.ElementPlus);
|
app.component('JsonViewer', JsonViewer);
|
app.mount(container);
|
}
|
}
|
};
|
export default extension;
|
