Commit 2cb735ef481569aea4a077fa150e33d17052f6ba

Authored by 谭毅彬
1 parent 7f4a6bac

接口日志增加内容复制按钮

Signed-off-by: TanYibin <5491541@qq.com>
ant-design-vue-jeecg/src/views/system/monitor/ApiLogList.vue
... ... @@ -103,19 +103,23 @@
103 103 <template :slot="expandedRowRender" slot-scope="record">
104 104 <div style="margin: 0">
105 105 <div>
106   - <a-badge status="default" style="vertical-align: text-bottom;"/>
  106 + <a-badge status="default" style="vertical-align: revert;" />
  107 + <a-button @click="copyToClipboard(record.requestHeader)" type="link" icon="copy" style="vertical-align: revert;"></a-button>
107 108 <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#b3b3b3;">请求头:{{ record.requestHeader }}</span>
108 109 </div>
109 110 <div>
110   - <a-badge status="success" style="vertical-align: text-bottom;"/>
111   - <span style="vertical-align: text-bottom;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:saddlebrown;">请求内容:{{ record.requestBody }}</span>
  111 + <a-badge status="success" style="vertical-align: middle;" />
  112 + <a-button @click="copyToClipboard(record.requestBody)" type="link" icon="copy" style="vertical-align: middle;"></a-button>
  113 + <span style="vertical-align: middle; word-break: break-all; white-space: pre-wrap; overflow: hidden; color: saddlebrown;">请求内容:{{ record.requestBody }}</span>
112 114 </div>
113 115 <div>
114   - <a-badge status="processing" style="vertical-align: text-bottom;"/>
  116 + <a-badge status="processing" style="vertical-align: revert;" />
  117 + <a-button @click="copyToClipboard(record.responseBody)" type="link" icon="copy" style="vertical-align: revert;"></a-button>
115 118 <span style="vertical-align: text-bottom;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#0066CC;">响应内容:{{ record.responseBody }}</span>
116 119 </div>
117   - <div v-if="record.exception">
118   - <a-badge status="error" style="vertical-align: text-bottom;"/>
  120 + <div v-if="record.exception" >
  121 + <a-badge status="error" style="vertical-align: revert;" />
  122 + <a-button @click="copyToClipboard(record.exception)" type="link" icon="copy" style="vertical-align: revert;"></a-button>
119 123 <span style="vertical-align: text-bottom;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:red">异常堆栈信息:{{ record.exception }}</span>
120 124 </div>
121 125 </div>
... ... @@ -138,6 +142,7 @@ import { JeecgListMixin } from &#39;@/mixins/JeecgListMixin&#39;
138 142 import ApiLogModal from './modules/ApiLogModal'
139 143 import JEllipsis from '@comp/jeecg/JEllipsis'
140 144 import {getApiNameList} from '@api/api'
  145 +import ClipboardJS from 'clipboard'
141 146  
142 147 export default {
143 148 name: 'ApiLogList',
... ... @@ -240,6 +245,23 @@ export default {
240 245 }
241 246 })
242 247 },
  248 + copyToClipboard(content) {
  249 + const clipboard = new ClipboardJS('.copy-button', {
  250 + text: () => content
  251 + });
  252 +
  253 + clipboard.on('success', () => {
  254 + clipboard.destroy();
  255 + this.$message.success('已复制到剪贴板');
  256 + });
  257 +
  258 + clipboard.on('error', () => {
  259 + clipboard.destroy();
  260 + this.$message.error('复制失败');
  261 + });
  262 +
  263 + clipboard.onClick(event); // 添加这一行来触发点击事件
  264 + },
243 265 initDictConfig() {},
244 266 getSuperFieldList() {
245 267 let fieldList = []
... ...