From 908401ec8d8a55763a38aacaaa734cd735872b01 Mon Sep 17 00:00:00 2001
From: liyongde <1419499670@qq.com>
Date: Wed, 21 Aug 2024 13:18:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=BB=E5=8A=A1=E4=B8=8E=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E8=AE=B0=E5=BD=95=E7=9A=84=E5=89=8D=E7=AB=AF=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nladmin-ui/src/views/wms/ext/record/index.vue | 104 ++++++++++++++----
 nladmin-ui/src/views/wms/sch/task/index.vue   |  49 ++++++---
 2 files changed, 117 insertions(+), 36 deletions(-)

diff --git a/nladmin-ui/src/views/wms/ext/record/index.vue b/nladmin-ui/src/views/wms/ext/record/index.vue
index 4d5795b..f454f76 100644
--- a/nladmin-ui/src/views/wms/ext/record/index.vue
+++ b/nladmin-ui/src/views/wms/ext/record/index.vue
@@ -91,7 +91,29 @@
         style="width: 100%;"
         @selection-change="crud.selectionChangeHandler"
       >
-        <el-table-column type="selection" width="55" />
+        <!--        <el-table-column type="selection" width="55" />-->
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-row class="flex-row" :gutter="10">
+              <el-col :span="12" class="flex-col">
+                <el-card class="flex-card" :body-style="{padding:'0', margin:'0'}">
+                  <div slot="header" style="margin: 0; padding: 0">
+                    <el-tag type="info">请求报文</el-tag>
+                  </div>
+                  <pre class="json-pre">{{ formatJson(scope.row.request_param) }}</pre>
+                </el-card>
+              </el-col>
+              <el-col :span="12" class="flex-col">
+                <el-card class="flex-card" :body-style="{padding:'0', margin:'0'}">
+                  <div slot="header" style="margin: 0; padding: 0">
+                    <el-tag type="success">响应结果</el-tag>
+                  </div>
+                  <pre class="json-pre">{{ formatJson(scope.row.response_param) }}</pre>
+                </el-card>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="interact_name"
           :label="$t('Record.table.interact_name')"
@@ -99,18 +121,18 @@
         />
         <el-table-column prop="code" :label="$t('Record.table.code')" :min-width="flexWidth('code',crud.data,$t('Record.table.code'))" />
         <el-table-column prop="message" :label="$t('Record.table.message')" :min-width="flexWidth('message',crud.data,$t('Record.table.message'))" />
-        <el-table-column
-          prop="request_param"
-          :label="$t('Record.table.request_param')"
-          show-overflow-tooltip
-          :min-width="200"
-        />
-        <el-table-column
-          prop="response_param"
-          :label="$t('Record.table.response_param')"
-          show-overflow-tooltip
-          :min-width="200"
-        />
+        <!--        <el-table-column-->
+        <!--          prop="request_param"-->
+        <!--          :label="$t('Record.table.request_param')"-->
+        <!--          show-overflow-tooltip-->
+        <!--          :min-width="200"-->
+        <!--        />-->
+        <!--        <el-table-column-->
+        <!--          prop="response_param"-->
+        <!--          :label="$t('Record.table.response_param')"-->
+        <!--          show-overflow-tooltip-->
+        <!--          :min-width="200"-->
+        <!--        />-->
         <el-table-column
           prop="record_time"
           :label="$t('Record.table.record_time')"
@@ -126,14 +148,14 @@
             {{ scope.row.is_success ? $t('common.Success') : $t('common.Fail') }}
           </template>
         </el-table-column>
-        <el-table-column v-permission="[]" :label="$t('common.Operate')" width="120px" align="center" fixed="right">
-          <template slot-scope="scope">
-            <udOperation
-              :data="scope.row"
-              :permission="permission"
-            />
-          </template>
-        </el-table-column>
+        <!--        <el-table-column v-permission="[]" :label="$t('common.Operate')" width="120px" align="center" fixed="right">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            <udOperation-->
+        <!--              :data="scope.row"-->
+        <!--              :permission="permission"-->
+        <!--            />-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
       </el-table>
       <!--分页组件-->
       <pagination />
@@ -176,7 +198,7 @@ export default {
       optShow: {
         add: false,
         edit: false,
-        del: true,
+        del: false,
         download: false
       }
     })
@@ -221,11 +243,49 @@ export default {
     // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
       return true
+    },
+    formatJson(jsonString) {
+      try {
+        return JSON.stringify(JSON.parse(jsonString), null, 2)
+      } catch (e) {
+        return jsonString // 如果jsonString解析失败，直接返回原始字符串
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.custom-card {
+  border-width: 1px; /* 边框厚度 */
+  border-color: #dcdcdc; /* 边框颜色 */
+  box-shadow: none; /* 移除阴影 */
+  margin: 0 0; /* 缩小外边距 */
+}
+.json-pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.flex-row {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
 
+.flex-card {
+  flex: 1; /* 使卡片自动填充父容器 */
+  border-width: 1px;
+  border-color: #dcdcdc;
+  border-radius: 4px;
+  box-shadow: none;
+  padding: 5px;
+  margin: 5px 0;
+}
 </style>
diff --git a/nladmin-ui/src/views/wms/sch/task/index.vue b/nladmin-ui/src/views/wms/sch/task/index.vue
index 6faac5b..3466698 100644
--- a/nladmin-ui/src/views/wms/sch/task/index.vue
+++ b/nladmin-ui/src/views/wms/sch/task/index.vue
@@ -178,10 +178,15 @@
         style="width: 100%;"
         @selection-change="crud.selectionChangeHandler"
       >
-        <el-table-column
-          type="selection"
-          width="55"
-        />
+        <!--        <el-table-column-->
+        <!--          type="selection"-->
+        <!--          width="55"-->
+        <!--        />-->
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <pre class="json-pre">{{ formatJson(scope.row.request_param) }}</pre>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="task_code"
           :label="$t('Task.table.code')"
@@ -326,16 +331,16 @@
           :label="$t('Task.table.acs_trace_id')"
           :min-width="flexWidth('acs_trace_id',crud.data,$t('Task.table.acs_trace_id'))"
         />
-        <el-table-column
-          prop="request_param"
-          :label="$t('Task.table.request_param')"
-          :min-width="flexWidth('request_param',crud.data,$t('Task.table.request_param'))"
-        />
-        <el-table-column
-          prop="response_param"
-          :label="$t('Task.table.response_param')"
-          :min-width="flexWidth('response_param',crud.data,$t('Task.table.response_param'))"
-        />
+        <!--        <el-table-column-->
+        <!--          prop="request_param"-->
+        <!--          :label="$t('Task.table.request_param')"-->
+        <!--          :min-width="flexWidth('request_param',crud.data,$t('Task.table.request_param'))"-->
+        <!--        />-->
+        <!--        <el-table-column-->
+        <!--          prop="response_param"-->
+        <!--          :label="$t('Task.table.response_param')"-->
+        <!--          :min-width="flexWidth('response_param',crud.data,$t('Task.table.response_param'))"-->
+        <!--        />-->
         <el-table-column
           prop="workshop_code"
           :label="$t('Task.table.workshop_code')"
@@ -521,11 +526,27 @@ export default {
       }).catch(err => {
         console.log(err.response.data.message)
       })
+    },
+    formatJson(jsonString) {
+      try {
+        return JSON.stringify(JSON.parse(jsonString), null, 2)
+      } catch (e) {
+        return jsonString // 如果jsonString解析失败，直接返回原始字符串
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.json-pre {
+  white-space: pre-wrap; /* 保留换行和空格 */
+  font-family: monospace; /* 使用等宽字体 */
+  background-color: #f5f5f5; /* 背景色 */
+  padding: 10px; /* 内边距 */
+  border-radius: 4px; /* 圆角 */
+  border: 1px solid #e0e0e0; /* 边框 */
+}
 
 </style>
+