Bläddra i källkod

feat(reportProblems): 恢复问题答复列表JSON调试弹窗

在问题答复列表页恢复调试弹窗,展示前端请求参数与接口完整返回 JSON,便于联调排查。

Made-with: Cursor
haifeng.zhang 1 dag sedan
förälder
incheckning
9b2ef0545e
1 ändrade filer med 73 tillägg och 1 borttagningar
  1. 73 1
      src/subPages/pages/reportProblems/index.vue

+ 73 - 1
src/subPages/pages/reportProblems/index.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { addQuestionReportData,REPORTDATA, getQuestionTypeList, pageQuestionReportData,getPerson } from '@/api/questionReqort'
 import { AddQuestionReportDataReq, PageQuestionReportDataReq, QuestionListRes, QuestionType, QuestionTypeListRes } from '@/api/questionReqort/types'
+import type { ApiResponse, PageResp } from '@/api/types'
 import { getCachedWecomVisitorProfile, getWecomInternalUser } from '@/api/wecom'
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import GridAddress from '@/components/address/gridAddress/index.vue'
 import { showNotify } from 'vant'
 import dayjs from 'dayjs';
@@ -227,6 +228,21 @@ const listLoadVersion = ref(0)
 /** 合并并发 init,避免 watch 与重复进入导致多次 reset/请求交错 */
 let listInitPromise: Promise<void> | null = null
 
+/** 列表接口调试:最近一次请求参数与完整响应 */
+const showListRawJsonPopup = ref(false)
+const listLastReqParams = ref<PageQuestionReportDataReq | null>(null)
+const listLastApiResponse = ref<ApiResponse<PageResp<QuestionListRes>> | null>(null)
+
+const listReqParamsJson = computed(() => {
+  if (!listLastReqParams.value) return '{}'
+  return JSON.stringify(listLastReqParams.value, null, 2)
+})
+
+const listApiRawJson = computed(() => {
+  if (!listLastApiResponse.value) return '{}'
+  return JSON.stringify(listLastApiResponse.value, null, 2)
+})
+
 const resetQuestionList = () => {
   list.value = []
   pageInfo.value.pageNumber = 1
@@ -252,6 +268,8 @@ const questList = async () => {
     const res = await pageQuestionReportData(reqParams)
     if (requestVersion !== listLoadVersion.value) return
 
+    listLastReqParams.value = reqParams
+    listLastApiResponse.value = res
     const records = res.data.records || []
 
     list.value = currentPage === 1 ? records : list.value.concat(records)
@@ -380,6 +398,9 @@ watch(active, async (value) => {
     </van-tab>
     <van-tab title="问题答复">
       <view class="tab-container">
+        <view class="mb-[8px]">
+          <van-button size="small" plain type="primary" @click="showListRawJsonPopup = true">查看接口原始JSON</van-button>
+        </view>
         <van-list
           v-model:loading="loading"
           :finished="finished"
@@ -406,6 +427,23 @@ watch(active, async (value) => {
             </view>
           </view>
         </van-list>
+        <van-popup
+          v-model:show="showListRawJsonPopup"
+          round
+          position="bottom"
+          :style="{ height: '75%' }"
+        >
+          <view class="json-popup">
+            <view class="json-title">请求参数</view>
+            <scroll-view scroll-y class="json-scroll json-scroll--small">
+              <text class="json-text">{{ listReqParamsJson }}</text>
+            </scroll-view>
+            <view class="json-title">列表接口完整JSON</view>
+            <scroll-view scroll-y class="json-scroll">
+              <text class="json-text">{{ listApiRawJson }}</text>
+            </scroll-view>
+          </view>
+        </van-popup>
       </view>
     </van-tab>
   </van-tabs>
@@ -471,4 +509,38 @@ watch(active, async (value) => {
   }
 }
 
+.json-popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.json-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.json-scroll {
+  flex: 1;
+  overflow: hidden;
+  background: #f7f8fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.json-scroll--small {
+  flex: 0 0 auto;
+  max-height: 120px;
+  margin-bottom: 10px;
+}
+
+.json-text {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 13px;
+  line-height: 20px;
+}
+
 </style>