接口日志页面显示优化

Signed-off-by: TanYibin <5491541@qq.com>

接口日志页面显示优化
Signed-off-by: TanYibin <5491541@qq.com>
谭毅彬
1 parent 742d094b
Showing 1 changed file with 37 additions and 58 deletions
ant-design-vue-jeecg/src/views/system/monitor/ApiLogList.vue
@@ -26,11 +26,6 @@
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="业务响应码">
-                <j-input placeholder="请输入业务响应码" v-model="queryParam.retCode"></j-input>
-              </a-form-item>
-            </a-col>
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="请求内容">
                 <j-input placeholder="请输入请求内容" v-model="queryParam.requestBody"></j-input>
               </a-form-item>
@@ -43,7 +38,7 @@
                   placeholder="请选择开始时间"
                   class="query-group-cust"
                   v-model="queryParam.requestTime_begin"
-                ></j-date>
+                />
                 <span class="query-group-split-cust"></span>
                 <j-date
                   :show-time="true"
@@ -51,7 +46,12 @@
                   placeholder="请选择结束时间"
                   class="query-group-cust"
                   v-model="queryParam.requestTime_end"
-                ></j-date>
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="业务响应码">
+                <j-input placeholder="请输入业务响应码" v-model="queryParam.retCode"></j-input>
               </a-form-item>
             </a-col>
           </template>
@@ -73,15 +73,7 @@
     <!-- 操作按钮区域 -->
     <div class="table-operator">
       <a-button v-has="'apiLog:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button v-has="'apiLog:export'" type="primary" icon="download" @click="handleExportXls('接口日志')">
-        导出
-      </a-button>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay" v-has="'apiLog:deleteBatch'">
-          <a-menu-item key="1" @click="batchDel"> <a-icon type="delete" /> 删除 </a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
-      </a-dropdown>
+      <a-button v-has="'apiLog:export'" type="primary" icon="download" @click="handleExportXls('接口日志')">导出</a-button>
     </div>
     <!-- table区域-begin -->
@@ -99,9 +91,29 @@
         class="j-table-force-nowrap"
         @change="handleTableChange"
       >
+        <template #expandedRowRender="record">
+          <div style="margin: 0">
+            <div>
+              <a-badge status="default" style="vertical-align: middle;"/>
+              <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#b3b3b3;">请求头：{{ record.requestHeader }}</span>
+            </div>
+            <div>
+              <a-badge status="success" style="vertical-align: middle;"/>
+              <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:saddlebrown;">请求内容：{{ record.requestBody }}</span>
+            </div>
+            <div>
+              <a-badge status="processing" style="vertical-align: middle;"/>
+              <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:#0066CC;">响应内容：{{ record.responseBody }}</span>
+            </div>
+            <div v-if="record.exception">
+              <a-badge status="error" style="vertical-align: middle;"/>
+              <span style="vertical-align: left;word-break:break-all;white-space:pre-wrap;overflow:hidden;color:red">异常堆栈信息：{{ record.exception }}</span>
+            </div>
+          </div>
+        </template>
         <span slot="action" slot-scope="text, record">
           <a v-has="'apiLog:edit'" @click="handleEdit(record)">编辑<a-divider type="vertical"/></a>
-          <a @click="handleDetail(record)">详情</a>
+          <a @click="handleDetail(record)">{{ record.apiName }}</a>
         </span>
       </a-table>
     </div>
@@ -125,7 +137,6 @@ export default {
     JEllipsis
   },
   data() {
-    let ellipsis = (v, l = 40) => <j-ellipsis value={v} length={l} />
     return {
       description: '接口日志管理页面',
       // 表头
@@ -156,37 +167,19 @@ export default {
           dataIndex: 'url'
         },
         {
-          title: '请求头',
-          align: 'center',
-          dataIndex: 'requestHeader',
-          customRender: t => ellipsis(t)
-        },
-        {
-          title: '请求内容',
-          align: 'center',
-          dataIndex: 'requestBody',
-          customRender: t => ellipsis(t)
-        },
-        {
           title: '响应方名称',
           align: 'center',
           dataIndex: 'responseBy'
         },
         {
-          title: '响应内容',
-          align: 'center',
-          dataIndex: 'responseBody',
-          customRender: t => ellipsis(t)
-        },
-        {
-          title: '请求时间',
+          title: '业务响应码',
           align: 'center',
-          dataIndex: 'requestTime'
+          dataIndex: 'retCode'
         },
         {
-          title: '响应时间',
+          title: 'Http Code',
           align: 'center',
-          dataIndex: 'responseTime'
+          dataIndex: 'httpCode'
         },
         {
           title: '响应耗时（毫秒）',
@@ -194,29 +187,15 @@ export default {
           dataIndex: 'duration'
         },
         {
-          title: 'Http Code',
-          align: 'center',
-          dataIndex: 'httpCode'
-        },
-        {
-          title: '业务响应码',
+          title: '请求时间',
           align: 'center',
-          dataIndex: 'retCode'
+          dataIndex: 'requestTime'
         },
         {
-          title: '异常堆栈信息',
+          title: '响应时间',
           align: 'center',
-          dataIndex: 'exception',
-          customRender: t => ellipsis(t)
+          dataIndex: 'responseTime'
         },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: 'center',
-          fixed: 'right',
-          width: 80,
-          scopedSlots: { customRender: 'action' }
-        }
       ],
       url: {
         list: '/monitor/apiLog/list',