feat(接口测试): 联调接口用例请求体变更XML

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">

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-for="item of requestBodyList" :key="item.value">
-    <div v-if="!bodyDefinedCode && bodyCaseCode" class="no-case-data h-full">
+    <div class="grid grid-cols-2 gap-[24px]">
-      {{ t('case.notSetData') }}
+      <div class="title">
+        {{ item.title }}
+      </div>
+      <div class="title">
+        {{ item.title }}
+      </div>
     </div>
-    <template v-if="showDiffEditor">
+    <div
-      <MsCodeEditor
+      v-if="getShowDiffer(item.value)"
-        :model-value="showDiffEditor"
+      :class="`${getBodyCaseCode(item.value) && getBodyDefinedCode(item.value) ? '' : 'grid grid-cols-2 gap-[24px]'}`"
-        theme="vs"
+    >
-        height="200px"
+      <div v-if="!getBodyDefinedCode(item.value) && getBodyCaseCode(item.value)" class="no-case-data h-full">
-        :class="`${bodyCaseCode ? '' : 'no-case-data-bg'} w-full`"
+        {{ t('case.notSetData') }}
-        :language="bodyCodeLanguage"
+      </div>
-        :show-full-screen="false"
+      <template v-if="getShowDiffer(item.value)">
-        :show-theme-change="false"
+        <MsCodeEditor
-        read-only
+          :model-value="getShowDiffer(item.value)"
-        is-adaptive
+          theme="vs"
-        :diff-mode="diffMode"
+          height="200px"
-        :original-value="bodyDefinedCode"
+          :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>
+        {{ t('case.notSetData') }}
-          <a-button
+      </div>
-            type="outline"
+      <div
-            class="arco-btn-outline--secondary p-[0_8px]"
+        v-if="!getBodyCaseCode(item.value) && !getBodyDefinedCode(item.value)"
-            size="mini"
+        class="no-json-case-data no-case-data"
-            @click="copyScript(bodyDefinedCode)"
+      >
-          >
+        {{ t('case.notSetData') }}
-            <template #icon>
+      </div>
-              <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') }}
     </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(() => {
+  function getBodyCodeLanguage(bodyType: RequestBodyFormat) {
-    if (previewDefinedDetail.value?.body?.bodyType === RequestBodyFormat.JSON) {
+    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
+  function getBodyDefinedCode(bodyType: RequestBodyFormat) {
-  const bodyDefinedCode = computed(() => getBodyCode(previewDefinedDetail.value?.body, RequestBodyFormat.JSON));
+    return getBodyCode(previewDefinedDetail.value?.body, bodyType);
+  }
+  function getBodyCaseCode(bodyType: RequestBodyFormat) {
+    return getBodyCode(previewCaseDetail.value?.body, bodyType);
+  }
 
-  // 用例Code
+  function getDiffMode(bodyType: RequestBodyFormat) {
-  const bodyCaseCode = computed(() => getBodyCode(previewCaseDetail.value?.body, RequestBodyFormat.JSON));
+    return (
+      !!(getBodyDefinedCode(bodyType) && getBodyCaseCode(bodyType)) ||
+      (!getBodyDefinedCode(bodyType) && !getBodyCaseCode(bodyType))
+    );
+  }
 
-  const diffMode = computed(() => {
+  function getShowDiffer(bodyType: RequestBodyFormat) {
-    return !!(bodyDefinedCode.value && bodyCaseCode.value) || (!bodyDefinedCode.value && !bodyCaseCode.value);
+    return getBodyCaseCode(bodyType) || getBodyDefinedCode(bodyType);
-  });
+  }
-
-  const showDiffEditor = computed(() => bodyCaseCode.value || bodyDefinedCode.value);
 
   watchEffect(() => {
     if (props.definedDetail) {
@@ -145,4 +182,8 @@
       background: rgb(var(--success-1)) !important;
     }
   }
+  .title {
+    color: var(--color-text-1);
+    @apply my-4;
+  }
 </style>