wanshenmean
2 天以前 5e851678cc02257bbbd179446de36082430ca5bc
Code/WMS/WIDESEA_WMSClient/src/extension/system/Sys_Log.jsx
@@ -1,4 +1,6 @@
import { h, resolveComponent } from 'vue';
import { h, createApp } from 'vue';
import { ElDrawer } from 'element-plus';
let extension = {
  components: {
    //动态扩充组件或组件路径
@@ -20,6 +22,78 @@
    },
    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);
    }
  }
};