记录同步数据日志功能

bms-front/src/views/price/billing/components/BillDetail.vue

@@ -101,6 +101,23 @@
             </el-table-column>
           </el-table>
         </section>
+        <section v-if="detail.requestJson || detail.responseJson" class="detail-block">
+          <div class="sec-title">同步报文</div>
+          <div class="json-panel">
+            <div class="json-panel__head">
+              <span>同步请求参数</span>
+              <el-button size="small" icon="CopyDocument" @click="copyJson(detail.requestJson)">复制</el-button>
+            </div>
+            <pre class="code-pre">{{ formatJson(detail.requestJson) }}</pre>
+          </div>
+          <div class="json-panel">
+            <div class="json-panel__head">
+              <span>计费返回数据</span>
+              <el-button size="small" icon="CopyDocument" @click="copyJson(detail.responseJson)">复制</el-button>
+            </div>
+            <pre class="code-pre">{{ formatJson(detail.responseJson) }}</pre>
+          </div>
+        </section>
       </div>
     </div>
   </el-drawer>
@@ -206,6 +223,30 @@ function displayFeeName(row) {
   return name || typeLabel || row.feeType || '-'
 }
 
+function formatJson(val) {
+  if (val === null || val === undefined || val === '') return '无数据'
+  if (typeof val === 'object') {
+    try { return JSON.stringify(val, null, 2) } catch (e) { return String(val) }
+  }
+  try { return JSON.stringify(JSON.parse(val), null, 2) } catch (e) { return String(val) }
+}
+
+function copyJson(val) {
+  const text = formatJson(val)
+  const done = () => ElMessage({ message: '已复制', type: 'success', duration: 1500 })
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text).then(done)
+    return
+  }
+  const ta = document.createElement('textarea')
+  ta.value = text
+  document.body.appendChild(ta)
+  ta.select()
+  document.execCommand('copy')
+  document.body.removeChild(ta)
+  done()
+}
+
 function sourceTagType(source) {
   if (source === 'PACKAGE_FIXED' || source === 'FIXED') return 'success'
   if (source === 'PACKAGE_DISCOUNT' || source === 'DISCOUNT') return 'warning'
@@ -301,6 +342,32 @@ function sourceTagType(source) {
   flex-shrink: 0;
   color: #909399;
 }
+.json-panel {
+  margin-top: 10px;
+  background: #f7f9fb;
+  border: 1px solid #e8ecf0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.json-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #606266;
+  background: #fafbfc;
+  border-bottom: 1px solid #ebeef5;
+}
+.json-panel .code-pre {
+  margin: 0;
+  padding: 12px 14px;
+  max-height: 240px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
 .fee-amount {
   font-variant-numeric: tabular-nums;
   font-weight: 500;