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: {
|
// 动态扩充组件或组件路径
|
gridHeader: "",
|
gridBody: '',
|
gridFooter: "",
|
modelHeader: "",
|
modelBody: "",
|
modelFooter: ""
|
},
|
buttons: [], // 扩展的按钮
|
data: {
|
jsonDrawerVisible: false,
|
currentJson: '',
|
currentJsonTitle: ''
|
},
|
methods: {
|
// 事件扩展
|
onInit() {
|
console.log("mes_log init");
|
this.setFiexdSearchForm(true);
|
},
|
|
onInited() {
|
this.height = this.height - 240; // 为统计卡片预留空间
|
|
// 添加预览方法
|
this.previewJson = (jsonStr) => {
|
if (!jsonStr) return '-';
|
try {
|
const obj = JSON.parse(jsonStr);
|
return JSON.stringify(obj, null, 2).substring(0, 200) + '...';
|
} catch {
|
return String(jsonStr).substring(0, 200) + '...';
|
}
|
};
|
},
|
|
// 行点击事件 - 显示 JSON 详情
|
rowClick({ row, column }) {
|
// 如果点击的是请求或响应列，显示详情抽屉
|
if (column.property === 'requestJson' && row.requestJson) {
|
this.showJsonDetail(row, 'request');
|
} else if (column.property === 'responseJson' && row.responseJson) {
|
this.showJsonDetail(row, 'response');
|
}
|
},
|
|
// 显示 JSON 详情抽屉
|
showJsonDetail(row, type = 'request') {
|
const jsonContent = type === 'request' ? row.requestJson : row.responseJson;
|
const title = type === 'request' ? '📋 请求 JSON' : '📥 响应 JSON';
|
|
// 解析 JSON 对象，解析失败则保留原始字符串
|
let jsonData;
|
try {
|
jsonData = typeof jsonContent === 'string' ? JSON.parse(jsonContent) : jsonContent;
|
} catch (e) {
|
jsonData = String(jsonContent);
|
}
|
|
// 创建临时容器渲染抽屉
|
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="30%"
|
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;
|
