From 4cdcae4413f4e30c28b37610d5cce74508f3e80e Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Fri, 29 Mar 2024 18:52:00 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8E=A5=E5=8F=A3=E5=9C=BA=E6=99=AF):=20?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8API/CASE=E8=A1=A8=E6=A0=BC=E7=A6=81=E7=94=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ms-assertion/comp/ResponseHeaderTab.vue   | 24 ++++++++++--------
 .../ms-assertion/comp/VariableTab.vue         | 25 +++++++++++--------
 .../views/api-test/components/paramTable.vue  |  3 ++-
 .../components/requestComposition/body.vue    | 19 ++++++++------
 .../components/requestComposition/header.vue  | 20 +++++++++------
 .../components/requestComposition/query.vue   | 25 +++++++++++--------
 .../components/requestComposition/rest.vue    | 21 ++++++++++------
 7 files changed, 83 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue b/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
index dcbda40973..e604a22fb0 100644
--- a/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ResponseHeaderTab.vue
@@ -46,7 +46,7 @@
     enable: true,
   };
 
-  const columns: ParamTableColumn[] = [
+  const columns = computed<ParamTableColumn[]>(() => [
     {
       title: 'ms.assertion.responseHeader', // 响应头
       dataIndex: 'header',
@@ -71,15 +71,19 @@
       showInTable: true,
       showDrag: true,
     },
-    {
-      title: '',
-      columnTitle: 'common.operation',
-      slotName: 'operation',
-      width: 50,
-      showInTable: true,
-      showDrag: true,
-    },
-  ];
+    ...(props.disabled
+      ? []
+      : [
+          {
+            title: '',
+            columnTitle: 'common.operation',
+            slotName: 'operation',
+            width: 50,
+            showInTable: true,
+            showDrag: true,
+          },
+        ]),
+  ]);
 
   function handleParamTableChange(resultArr: any[], isInit?: boolean) {
     condition.value.assertions = [...resultArr];
diff --git a/frontend/src/components/business/ms-assertion/comp/VariableTab.vue b/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
index 5c38c55f17..2b9c4b644f 100644
--- a/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/VariableTab.vue
@@ -41,7 +41,7 @@
     enable: true,
   };
 
-  const columns: ParamTableColumn[] = [
+  const columns = computed<ParamTableColumn[]>(() => [
     {
       title: 'ms.assertion.variableName', // 变量名
       dataIndex: 'variableName',
@@ -65,15 +65,20 @@
       showInTable: true,
       showDrag: true,
     },
-    {
-      title: '',
-      columnTitle: 'common.operation',
-      slotName: 'operation',
-      width: 50,
-      showInTable: true,
-      showDrag: true,
-    },
-  ];
+    ...(props.disabled
+      ? []
+      : [
+          {
+            title: '',
+            columnTitle: 'common.operation',
+            slotName: 'operation',
+            width: 50,
+            showInTable: true,
+            showDrag: true,
+          },
+        ]),
+  ]);
+
   function handleParamTableChange(resultArr: any[], isInit?: boolean) {
     condition.value.variableAssertionItems = [...resultArr];
     if (!isInit) {
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index 625338e902..37d858aeae 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -424,7 +424,7 @@
       <div v-else class="text-[var(--color-text-1)]">{{ '-' }}</div>
     </template>
     <!-- 操作 -->
-    <template #operation="{ record, rowIndex, columnConfig }">
+    <template v-if="!props.disabledExceptParam" #operation="{ record, rowIndex, columnConfig }">
       <div class="flex flex-row items-center" :class="{ 'justify-end': columnConfig.align === 'right' }">
         <a-switch
           v-if="columnConfig.hasDisable"
@@ -829,6 +829,7 @@
           addTableLine(arr.length - 1, false, true);
         }
       } else {
+        if (props.disabledExceptParam) return;
         const id = new Date().getTime().toString();
         paramsData.value = [
           {
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index 61109d99c2..e208dae4c8 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/body.vue
@@ -107,6 +107,7 @@
 
 <script setup lang="ts">
   import { useVModel } from '@vueuse/core';
+  import { TableColumnData } from '@arco-design/web-vue';
 
   import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
@@ -247,13 +248,17 @@
         dataIndex: 'description',
         slotName: 'description',
       },
-      {
-        title: '',
-        slotName: 'operation',
-        fixed: 'right',
-        format: innerParams.value.bodyType,
-        width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 65 : 35,
-      },
+      ...(props.disabledExceptParam
+        ? []
+        : [
+            {
+              title: '',
+              slotName: 'operation',
+              fixed: 'right' as TableColumnData['fixed'],
+              format: innerParams.value.bodyType,
+              width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 65 : 35,
+            },
+          ]),
     ];
   });
 
diff --git a/frontend/src/views/api-test/components/requestComposition/header.vue b/frontend/src/views/api-test/components/requestComposition/header.vue
index b62b365961..ebc7ecc091 100644
--- a/frontend/src/views/api-test/components/requestComposition/header.vue
+++ b/frontend/src/views/api-test/components/requestComposition/header.vue
@@ -16,7 +16,7 @@
     :height-used="heightUsed"
     :scroll="scroll"
     :default-param-item="defaultHeaderParamsItem"
-    draggable
+    :draggable="!props.disabledExceptParam"
     @change="handleParamTableChange"
   />
 </template>
@@ -49,7 +49,7 @@
 
   const innerParams = useVModel(props, 'params', emit);
 
-  const columns: ParamTableColumn[] = [
+  const columns = computed<ParamTableColumn[]>(() => [
     {
       title: 'apiTestDebug.paramName',
       dataIndex: 'key',
@@ -67,12 +67,16 @@
       dataIndex: 'description',
       slotName: 'description',
     },
-    {
-      title: '',
-      slotName: 'operation',
-      width: 50,
-    },
-  ];
+    ...(props.disabledExceptParam
+      ? []
+      : [
+          {
+            title: '',
+            slotName: 'operation',
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = computed(() => {
     if (props.layout === 'horizontal') {
diff --git a/frontend/src/views/api-test/components/requestComposition/query.vue b/frontend/src/views/api-test/components/requestComposition/query.vue
index 53b05e9929..3369f70d90 100644
--- a/frontend/src/views/api-test/components/requestComposition/query.vue
+++ b/frontend/src/views/api-test/components/requestComposition/query.vue
@@ -11,7 +11,7 @@
     </div>
     <batchAddKeyVal
       :params="innerParams"
-      :disabled="props.disabledParamValue"
+      :disabled="props.disabledExceptParam"
       :default-param-item="defaultRequestParamsItem"
       @apply="handleBatchParamApply"
     />
@@ -23,7 +23,7 @@
     :columns="columns"
     :height-used="heightUsed"
     :scroll="{ minWidth: 1160 }"
-    draggable
+    :draggable="!props.disabledExceptParam"
     :default-param-item="defaultRequestParamsItem"
     @change="handleParamTableChange"
   />
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
   import { useVModel } from '@vueuse/core';
+  import { TableColumnData } from '@arco-design/web-vue';
 
   import batchAddKeyVal from '@/views/api-test/components/batchAddKeyVal.vue';
   import paramTable, { type ParamTableColumn } from '@/views/api-test/components/paramTable.vue';
@@ -58,7 +59,7 @@
   const { t } = useI18n();
 
   const innerParams = useVModel(props, 'params', emit);
-  const columns: ParamTableColumn[] = [
+  const columns = computed<ParamTableColumn[]>(() => [
     {
       title: 'apiTestDebug.paramName',
       dataIndex: 'key',
@@ -101,13 +102,17 @@
       dataIndex: 'description',
       slotName: 'description',
     },
-    {
-      title: '',
-      slotName: 'operation',
-      fixed: 'right',
-      width: 50,
-    },
-  ];
+    ...(props.disabledExceptParam
+      ? []
+      : [
+          {
+            title: '',
+            slotName: 'operation',
+            fixed: 'right' as TableColumnData['fixed'],
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = ref<number | undefined>(undefined);
 
diff --git a/frontend/src/views/api-test/components/requestComposition/rest.vue b/frontend/src/views/api-test/components/requestComposition/rest.vue
index 7dbb1cb8da..24c90a2d25 100644
--- a/frontend/src/views/api-test/components/requestComposition/rest.vue
+++ b/frontend/src/views/api-test/components/requestComposition/rest.vue
@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
   import { useVModel } from '@vueuse/core';
+  import { TableColumnData } from '@arco-design/web-vue';
 
   import batchAddKeyVal from '@/views/api-test/components/batchAddKeyVal.vue';
   import paramTable, { type ParamTableColumn } from '@/views/api-test/components/paramTable.vue';
@@ -58,7 +59,7 @@
 
   const innerParams = useVModel(props, 'params', emit);
 
-  const columns: ParamTableColumn[] = [
+  const columns = computed<ParamTableColumn[]>(() => [
     {
       title: 'apiTestDebug.paramName',
       dataIndex: 'key',
@@ -101,13 +102,17 @@
       dataIndex: 'description',
       slotName: 'description',
     },
-    {
-      title: '',
-      slotName: 'operation',
-      fixed: 'right',
-      width: 50,
-    },
-  ];
+    ...(props.disabledExceptParam
+      ? []
+      : [
+          {
+            title: '',
+            slotName: 'operation',
+            fixed: 'right' as TableColumnData['fixed'],
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = ref<number | undefined>(undefined);