From fc46239b5bc042218c79f128be826a2a7bba8682 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 7 Aug 2024 18:17:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=E6=8E=A5=E5=8F=A3=E7=94=A8=E4=BE=8B=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E4=BD=93=E5=8F=98=E6=9B=B4XML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/management/case/diffItem.vue   |   3 -
 .../management/case/diffRequestBody.vue       | 145 +++++++++++-------
 2 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/frontend/src/views/api-test/management/components/management/case/diffItem.vue b/frontend/src/views/api-test/management/components/management/case/diffItem.vue
index 94b7d287b8..ce6aa6b8fa 100644
--- a/frontend/src/views/api-test/management/components/management/case/diffItem.vue
+++ b/frontend/src/views/api-test/management/components/management/case/diffItem.vue
@@ -82,9 +82,6 @@
       {{ t('case.notSetData') }}
     </div>
   </div>
-  <div class="title">
-    {{ `${t('apiTestManagement.requestBody')}-JSON` }}
-  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/api-test/management/components/management/case/diffRequestBody.vue b/frontend/src/views/api-test/management/components/management/case/diffRequestBody.vue
index 4f042b125d..fb9d3fd9c9 100644
--- a/frontend/src/views/api-test/management/components/management/case/diffRequestBody.vue
+++ b/frontend/src/views/api-test/management/components/management/case/diffRequestBody.vue
@@ -1,44 +1,65 @@
 <template>
-  <div v-if="showDiffEditor" :class="`${bodyCaseCode && bodyDefinedCode ? '' : 'grid grid-cols-2 gap-[24px]'}`">
-    <div v-if="!bodyDefinedCode && bodyCaseCode" class="no-case-data h-full">
-      {{ t('case.notSetData') }}
+  <div v-for="item of requestBodyList" :key="item.value">
+    <div class="grid grid-cols-2 gap-[24px]">
+      <div class="title">
+        {{ item.title }}
+      </div>
+      <div class="title">
+        {{ item.title }}
+      </div>
     </div>
-    <template v-if="showDiffEditor">
-      <MsCodeEditor
-        :model-value="showDiffEditor"
-        theme="vs"
-        height="200px"
-        :class="`${bodyCaseCode ? '' : 'no-case-data-bg'} w-full`"
-        :language="bodyCodeLanguage"
-        :show-full-screen="false"
-        :show-theme-change="false"
-        read-only
-        is-adaptive
-        :diff-mode="diffMode"
-        :original-value="bodyDefinedCode"
+    <div
+      v-if="getShowDiffer(item.value)"
+      :class="`${getBodyCaseCode(item.value) && getBodyDefinedCode(item.value) ? '' : 'grid grid-cols-2 gap-[24px]'}`"
+    >
+      <div v-if="!getBodyDefinedCode(item.value) && getBodyCaseCode(item.value)" class="no-case-data h-full">
+        {{ t('case.notSetData') }}
+      </div>
+      <template v-if="getShowDiffer(item.value)">
+        <MsCodeEditor
+          :model-value="getShowDiffer(item.value)"
+          theme="vs"
+          height="200px"
+          :class="`${getBodyCaseCode(item.value) ? '' : 'no-case-data-bg'} w-full`"
+          :language="getBodyCodeLanguage(item.value)"
+          :show-full-screen="false"
+          :show-theme-change="false"
+          read-only
+          is-adaptive
+          :diff-mode="getDiffMode(item.value)"
+          :original-value="getBodyDefinedCode(item.value)"
+        >
+          <template #rightTitle>
+            <a-button
+              type="outline"
+              class="arco-btn-outline--secondary p-[0_8px]"
+              size="mini"
+              @click="copyScript(getBodyDefinedCode(item.value))"
+            >
+              <template #icon>
+                <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
+              </template>
+            </a-button>
+          </template>
+        </MsCodeEditor>
+      </template>
+      <div v-if="!getBodyCaseCode(item.value) && getBodyDefinedCode(item.value)" class="no-case-data h-full">
+        {{ t('case.notSetData') }}
+      </div>
+    </div>
+    <div v-else class="grid grid-cols-2 gap-[24px]">
+      <div
+        v-if="!getBodyCaseCode(item.value) && !getBodyDefinedCode(item.value)"
+        class="no-json-case-data no-case-data"
       >
-        <template #rightTitle>
-          <a-button
-            type="outline"
-            class="arco-btn-outline--secondary p-[0_8px]"
-            size="mini"
-            @click="copyScript(bodyDefinedCode)"
-          >
-            <template #icon>
-              <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-            </template>
-          </a-button>
-        </template>
-      </MsCodeEditor>
-    </template>
-    <div v-if="!bodyCaseCode && bodyDefinedCode" class="no-case-data h-full"> {{ t('case.notSetData') }} </div>
-  </div>
-  <div v-else class="grid grid-cols-2 gap-[24px]">
-    <div v-if="!bodyCaseCode && !bodyDefinedCode" class="no-json-case-data no-case-data">
-      {{ t('case.notSetData') }}
-    </div>
-    <div v-if="!bodyCaseCode && !bodyDefinedCode" class="no-json-case-data no-case-data">
-      {{ t('case.notSetData') }}
+        {{ t('case.notSetData') }}
+      </div>
+      <div
+        v-if="!getBodyCaseCode(item.value) && !getBodyDefinedCode(item.value)"
+        class="no-json-case-data no-case-data"
+      >
+        {{ t('case.notSetData') }}
+      </div>
     </div>
   </div>
 </template>
@@ -68,18 +89,28 @@
     caseDetail: RequestParam;
   }>();
 
+  const requestBodyList = ref([
+    {
+      value: RequestBodyFormat.XML,
+      title: `${t('apiTestManagement.requestBody')}-XML`,
+    },
+    {
+      value: RequestBodyFormat.JSON,
+      title: `${t('apiTestManagement.requestBody')}-JSON`,
+    },
+  ]);
   const previewDefinedDetail = ref<RequestParam>(props.definedDetail);
   const previewCaseDetail = ref<RequestParam>(props.caseDetail);
 
-  const bodyCodeLanguage = computed(() => {
-    if (previewDefinedDetail.value?.body?.bodyType === RequestBodyFormat.JSON) {
+  function getBodyCodeLanguage(bodyType: RequestBodyFormat) {
+    if (bodyType === RequestBodyFormat.JSON) {
       return LanguageEnum.JSON;
     }
-    if (previewDefinedDetail.value?.body?.bodyType === RequestBodyFormat.XML) {
+    if (bodyType === RequestBodyFormat.XML) {
       return LanguageEnum.XML;
     }
     return LanguageEnum.PLAINTEXT;
-  });
+  }
 
   function copyScript(val: string) {
     if (isSupported) {
@@ -101,23 +132,29 @@
       case RequestBodyFormat.JSON:
         return body?.jsonBody?.jsonValue;
       case RequestBodyFormat.XML:
-        return body.xmlBody?.value;
+        return body?.xmlBody?.value;
       default:
         return '';
     }
   };
 
-  // 接口定义Code
-  const bodyDefinedCode = computed(() => getBodyCode(previewDefinedDetail.value?.body, RequestBodyFormat.JSON));
+  function getBodyDefinedCode(bodyType: RequestBodyFormat) {
+    return getBodyCode(previewDefinedDetail.value?.body, bodyType);
+  }
+  function getBodyCaseCode(bodyType: RequestBodyFormat) {
+    return getBodyCode(previewCaseDetail.value?.body, bodyType);
+  }
 
-  // 用例Code
-  const bodyCaseCode = computed(() => getBodyCode(previewCaseDetail.value?.body, RequestBodyFormat.JSON));
+  function getDiffMode(bodyType: RequestBodyFormat) {
+    return (
+      !!(getBodyDefinedCode(bodyType) && getBodyCaseCode(bodyType)) ||
+      (!getBodyDefinedCode(bodyType) && !getBodyCaseCode(bodyType))
+    );
+  }
 
-  const diffMode = computed(() => {
-    return !!(bodyDefinedCode.value && bodyCaseCode.value) || (!bodyDefinedCode.value && !bodyCaseCode.value);
-  });
-
-  const showDiffEditor = computed(() => bodyCaseCode.value || bodyDefinedCode.value);
+  function getShowDiffer(bodyType: RequestBodyFormat) {
+    return getBodyCaseCode(bodyType) || getBodyDefinedCode(bodyType);
+  }
 
   watchEffect(() => {
     if (props.definedDetail) {
@@ -145,4 +182,8 @@
       background: rgb(var(--success-1)) !important;
     }
   }
+  .title {
+    color: var(--color-text-1);
+    @apply my-4;
+  }
 </style>