wms / wms4_jiangxijisheng · Commits

Commit ff765b1c94487da2c5b347dbec3d6153951fa3a6

Authored by 谭毅彬
1 parent 742d094b

接口日志页面显示优化 

Signed-off-by: TanYibin <5491541@qq.com>
Inline Side-by-side
Showing 1 changed file with 37 additions and 58 deletions
ant-design-vue-jeecg/src/views/system/monitor/ApiLogList.vue
  View file @ff765b1
... ... @@ -26,11 +26,6 @@
26 26 </a-form-item>
27 27 </a-col>
28 28 <a-col :xl="6" :lg="7" :md="8" :sm="24">
29   - <a-form-item label="业务响应码">
30   - <j-input placeholder="请输入业务响应码" v-model="queryParam.retCode"></j-input>
31   - </a-form-item>
32   - </a-col>
33   - <a-col :xl="6" :lg="7" :md="8" :sm="24">
34 29 <a-form-item label="请求内容">
35 30 <j-input placeholder="请输入请求内容" v-model="queryParam.requestBody"></j-input>
36 31 </a-form-item>
... ... @@ -43,7 +38,7 @@
43 38 placeholder="请选择开始时间"
44 39 class="query-group-cust"
45 40 v-model="queryParam.requestTime_begin"
46   - ></j-date>
  41 + />
47 42 <span class="query-group-split-cust"></span>
48 43 <j-date
49 44 :show-time="true"
... ... @@ -51,7 +46,12 @@
51 46 placeholder="请选择结束时间"
52 47 class="query-group-cust"
53 48 v-model="queryParam.requestTime_end"
54   - ></j-date>
  49 + />
  50 + </a-form-item>
  51 + </a-col>
  52 + <a-col :xl="6" :lg="7" :md="8" :sm="24">
  53 + <a-form-item label="业务响应码">
  54 + <j-input placeholder="请输入业务响应码" v-model="queryParam.retCode"></j-input>
55 55 </a-form-item>
56 56 </a-col>
57 57 </template>
... ... @@ -73,15 +73,7 @@
73 73 <!-- 操作按钮区域 -->
74 74 <div class="table-operator">
75 75 <a-button v-has="'apiLog:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
76   - <a-button v-has="'apiLog:export'" type="primary" icon="download" @click="handleExportXls('接口日志')">
77   - 导出
78   - </a-button>
79   - <a-dropdown v-if="selectedRowKeys.length > 0">
80   - <a-menu slot="overlay" v-has="'apiLog:deleteBatch'">
81   - <a-menu-item key="1" @click="batchDel"> <a-icon type="delete" /> 删除 </a-menu-item>
82   - </a-menu>
83   - <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
84   - </a-dropdown>
  76 + <a-button v-has="'apiLog:export'" type="primary" icon="download" @click="handleExportXls('接口日志')">导出</a-button>
85 77 </div>
86 78  
87 79 <!-- table区域-begin -->
... ... @@ -99,9 +91,29 @@
99 91 class="j-table-force-nowrap"
100 92 @change="handleTableChange"
101 93 >
  94 + <template #expandedRowRender="record">
  95 + <div style="margin: 0">
  96 + <div>
  97 + <a-badge status="default" style="vertical-align: middle;"/>
  98 + <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#b3b3b3;">请求头：{{ record.requestHeader }}</span>
  99 + </div>
  100 + <div>
  101 + <a-badge status="success" style="vertical-align: middle;"/>
  102 + <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:saddlebrown;">请求内容：{{ record.requestBody }}</span>
  103 + </div>
  104 + <div>
  105 + <a-badge status="processing" style="vertical-align: middle;"/>
  106 + <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#0066CC;">响应内容：{{ record.responseBody }}</span>
  107 + </div>
  108 + <div v-if="record.exception">
  109 + <a-badge status="error" style="vertical-align: middle;"/>
  110 + <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:red">异常堆栈信息：{{ record.exception }}</span>
  111 + </div>
  112 + </div>
  113 + </template>
102 114 <span slot="action" slot-scope="text, record">
103 115 <a v-has="'apiLog:edit'" @click="handleEdit(record)">编辑<a-divider type="vertical"/></a>
104   - <a @click="handleDetail(record)">详情</a>
  116 + <a @click="handleDetail(record)">{{ record.apiName }}</a>
105 117 </span>
106 118 </a-table>
107 119 </div>
... ... @@ -125,7 +137,6 @@ export default {
125 137 JEllipsis
126 138 },
127 139 data() {
128   - let ellipsis = (v, l = 40) => <j-ellipsis value={v} length={l} />
129 140 return {
130 141 description: '接口日志管理页面',
131 142 // 表头
... ... @@ -156,37 +167,19 @@ export default {
156 167 dataIndex: 'url'
157 168 },
158 169 {
159   - title: '请求头',
160   - align: 'center',
161   - dataIndex: 'requestHeader',
162   - customRender: t => ellipsis(t)
163   - },
164   - {
165   - title: '请求内容',
166   - align: 'center',
167   - dataIndex: 'requestBody',
168   - customRender: t => ellipsis(t)
169   - },
170   - {
171 170 title: '响应方名称',
172 171 align: 'center',
173 172 dataIndex: 'responseBy'
174 173 },
175 174 {
176   - title: '响应内容',
177   - align: 'center',
178   - dataIndex: 'responseBody',
179   - customRender: t => ellipsis(t)
180   - },
181   - {
182   - title: '请求时间',
  175 + title: '业务响应码',
183 176 align: 'center',
184   - dataIndex: 'requestTime'
  177 + dataIndex: 'retCode'
185 178 },
186 179 {
187   - title: '响应时间',
  180 + title: 'Http Code',
188 181 align: 'center',
189   - dataIndex: 'responseTime'
  182 + dataIndex: 'httpCode'
190 183 },
191 184 {
192 185 title: '响应耗时（毫秒）',
... ... @@ -194,29 +187,15 @@ export default {
194 187 dataIndex: 'duration'
195 188 },
196 189 {
197   - title: 'Http Code',
198   - align: 'center',
199   - dataIndex: 'httpCode'
200   - },
201   - {
202   - title: '业务响应码',
  190 + title: '请求时间',
203 191 align: 'center',
204   - dataIndex: 'retCode'
  192 + dataIndex: 'requestTime'
205 193 },
206 194 {
207   - title: '异常堆栈信息',
  195 + title: '响应时间',
208 196 align: 'center',
209   - dataIndex: 'exception',
210   - customRender: t => ellipsis(t)
  197 + dataIndex: 'responseTime'
211 198 },
212   - {
213   - title: '操作',
214   - dataIndex: 'action',
215   - align: 'center',
216   - fixed: 'right',
217   - width: 80,
218   - scopedSlots: { customRender: 'action' }
219   - }
220 199 ],
221 200 url: {
222 201 list: '/monitor/apiLog/list',
... ...