style(接口场景): 引用API/CASE表格禁用样式

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,
     },
-    {
+    ...(props.disabled
-      title: '',
+      ? []
-      columnTitle: 'common.operation',
+      : [
-      slotName: 'operation',
+          {
-      width: 50,
+            title: '',
-      showInTable: true,
+            columnTitle: 'common.operation',
-      showDrag: true,
+            slotName: 'operation',
-    },
+            width: 50,
-  ];
+            showInTable: true,
+            showDrag: true,
+          },
+        ]),
+  ]);
 
   function handleParamTableChange(resultArr: any[], isInit?: boolean) {
     condition.value.assertions = [...resultArr];

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,
     },
-    {
+    ...(props.disabled
-      title: '',
+      ? []
-      columnTitle: 'common.operation',
+      : [
-      slotName: 'operation',
+          {
-      width: 50,
+            title: '',
-      showInTable: true,
+            columnTitle: 'common.operation',
-      showDrag: true,
+            slotName: 'operation',
-    },
+            width: 50,
-  ];
+            showInTable: true,
+            showDrag: true,
+          },
+        ]),
+  ]);
+
   function handleParamTableChange(resultArr: any[], isInit?: boolean) {
     condition.value.variableAssertionItems = [...resultArr];
     if (!isInit) {

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 = [
           {

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',
       },
-      {
+      ...(props.disabledExceptParam
-        title: '',
+        ? []
-        slotName: 'operation',
+        : [
-        fixed: 'right',
+            {
-        format: innerParams.value.bodyType,
+              title: '',
-        width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 65 : 35,
+              slotName: 'operation',
-      },
+              fixed: 'right' as TableColumnData['fixed'],
+              format: innerParams.value.bodyType,
+              width: innerParams.value.bodyType === RequestBodyFormat.FORM_DATA ? 65 : 35,
+            },
+          ]),
     ];
   });
 

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',
     },
-    {
+    ...(props.disabledExceptParam
-      title: '',
+      ? []
-      slotName: 'operation',
+      : [
-      width: 50,
+          {
-    },
+            title: '',
-  ];
+            slotName: 'operation',
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = computed(() => {
     if (props.layout === 'horizontal') {

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',
     },
-    {
+    ...(props.disabledExceptParam
-      title: '',
+      ? []
-      slotName: 'operation',
+      : [
-      fixed: 'right',
+          {
-      width: 50,
+            title: '',
-    },
+            slotName: 'operation',
-  ];
+            fixed: 'right' as TableColumnData['fixed'],
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = ref<number | undefined>(undefined);
 

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',
     },
-    {
+    ...(props.disabledExceptParam
-      title: '',
+      ? []
-      slotName: 'operation',
+      : [
-      fixed: 'right',
+          {
-      width: 50,
+            title: '',
-    },
+            slotName: 'operation',
-  ];
+            fixed: 'right' as TableColumnData['fixed'],
+            width: 50,
+          },
+        ]),
+  ]);
 
   const heightUsed = ref<number | undefined>(undefined);