From 4341904360c53e29f9dfabc40e7910db4b584f74 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 9 Jul 2024 17:45:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20j?=
 =?UTF-8?q?son-schema=E5=A2=9E=E5=8A=A0=E7=A6=81=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-form-table/index.vue   | 31 ++++++++++++--
 .../components/pure/ms-json-schema/index.vue  | 40 ++++++++++++++++---
 .../views/api-test/components/paramTable.vue  |  8 +++-
 .../components/requestComposition/body.vue    |  9 ++++-
 4 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/pure/ms-form-table/index.vue b/frontend/src/components/pure/ms-form-table/index.vue
index 5b613153b3..6526ba2d16 100644
--- a/frontend/src/components/pure/ms-form-table/index.vue
+++ b/frontend/src/components/pure/ms-form-table/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-form ref="formRef" :model="propsRes" layout="vertical">
+  <a-form ref="formRef" :model="propsRes" :disabled="props.disabled" layout="vertical">
     <MsBaseTable
       v-bind="propsRes"
       v-model:original-selected-keys="originalSelectedKeys"
@@ -7,7 +7,10 @@
       :hoverable="false"
       is-simple-setting
       :span-method="props.spanMethod"
-      :class="!props.selectable && !props.draggable ? 'ms-form-table-no-left-action' : ''"
+      :class="[
+        !props.selectable && !props.draggable ? 'ms-form-table-no-left-action' : '',
+        props.disabled ? 'ms-form-table--disabled' : '',
+      ]"
       bordered
       v-on="propsEvent"
       @drag-change="tableChange"
@@ -38,7 +41,7 @@
               validRepeat(rowIndex, item.dataIndex as string, value, callback);
             },
           }"
-          :disabled="item.disabled || record.disabled"
+          :disabled="props.disabled || item.disabled || record.disabled"
         >
           <slot
             :name="item.slotName"
@@ -147,6 +150,7 @@
               v-else-if="item.inputType === 'quickInput'"
               v-model:model-value="record[item.dataIndex as string]"
               :title="item.title as string || ''"
+              :disabled="props.disabled || item.disabled || record.disabled"
               class="ms-form-table-input"
               type="textarea"
               @input="() => handleFormChange(record, rowIndex, item)"
@@ -528,6 +532,11 @@
         padding: 0 8px !important;
       }
     }
+    .arco-table-th {
+      .arco-icon-settings {
+        margin-left: 4px;
+      }
+    }
     .arco-table-tr-checked {
       .arco-table-td {
         background-color: white;
@@ -536,6 +545,22 @@
     .arco-scrollbar-track-direction-horizontal {
       bottom: -8px;
     }
+    .arco-textarea-disabled,
+    .arco-input-disabled,
+    .arco-select-view-disabled {
+      @apply !bg-transparent;
+      .arco-select-view-value {
+        color: var(--color-text-4) !important;
+      }
+    }
+  }
+  .ms-form-table--disabled {
+    :deep(.arco-table-td-content) {
+      span,
+      div {
+        color: var(--color-text-4) !important;
+      }
+    }
   }
   :deep(.arco-table-content) {
     border-top: 1px solid var(--color-text-n8) !important;
diff --git a/frontend/src/components/pure/ms-json-schema/index.vue b/frontend/src/components/pure/ms-json-schema/index.vue
index 855ec21064..e4b108de12 100644
--- a/frontend/src/components/pure/ms-json-schema/index.vue
+++ b/frontend/src/components/pure/ms-json-schema/index.vue
@@ -14,13 +14,14 @@
     }"
     :table-key="TableKeyEnum.JSON_SCHEMA"
     :scroll="{ x: 'max-content' }"
+    :disabled="props.disabled"
     show-setting
     class="ms-json-schema"
     @row-select="handleSelect"
     @select-all="handleSelectAll"
   >
     <template #batchAddTitle>
-      <MsButton type="text" size="mini" class="!mr-0" @click="batchAdd">
+      <MsButton v-if="!props.disabled" type="text" size="mini" class="!mr-0" @click="batchAdd">
         {{ t('apiTestDebug.batchAdd') }}
       </MsButton>
     </template>
@@ -60,6 +61,7 @@
           type="icon"
           class="!mr-[4px] !p-[4px]"
           size="mini"
+          :disabled="props.disabled"
           @click="() => (record.required = !record.required)"
         >
           <div
@@ -76,12 +78,19 @@
         :options="getTypeOptions(record)"
         class="ms-form-table-input w-full"
         size="medium"
+        :disabled="props.disabled"
         @change="handleTypeChange(record)"
       />
     </template>
     <template #example="{ record }">
       <div v-if="['object', 'array', 'null'].includes(record.type)" class="ms-form-table-td-text">-</div>
-      <MsParamsInput v-else v-model:value="record.example" size="medium" @dblclick="() => quickInputParams(record)" />
+      <MsParamsInput
+        v-else
+        v-model:value="record.example"
+        size="medium"
+        :disabled="props.disabled"
+        @dblclick="() => quickInputParams(record)"
+      />
     </template>
     <template #minLength="{ record }">
       <a-input-number
@@ -91,6 +100,7 @@
         :min="0"
         :precision="0"
         size="medium"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -102,6 +112,7 @@
         :min="0"
         :precision="0"
         size="medium"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -111,6 +122,7 @@
         v-model:model-value="record.minimum"
         class="ms-form-table-input-number"
         size="medium"
+        :disabled="props.disabled"
       />
       <a-input-number
         v-else-if="record.type === 'integer'"
@@ -119,6 +131,7 @@
         size="medium"
         :step="1"
         :precision="0"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -128,6 +141,7 @@
         v-model:model-value="record.maximum"
         class="ms-form-table-input-number"
         size="medium"
+        :disabled="props.disabled"
       />
       <a-input-number
         v-else-if="record.type === 'integer'"
@@ -136,6 +150,7 @@
         size="medium"
         :step="1"
         :precision="0"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -148,6 +163,7 @@
         :min="0"
         :step="1"
         :precision="0"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -160,6 +176,7 @@
         :min="0"
         :step="1"
         :precision="0"
+        :disabled="props.disabled"
       />
       <div v-else class="ms-form-table-td-text">-</div>
     </template>
@@ -169,6 +186,7 @@
         v-model:model-value="record.defaultValue"
         class="ms-form-table-input-number"
         size="medium"
+        :disabled="props.disabled"
       />
       <a-input-number
         v-else-if="record.type === 'integer'"
@@ -177,6 +195,7 @@
         size="medium"
         :step="1"
         :precision="0"
+        :disabled="props.disabled"
       />
       <a-select
         v-else-if="record.type === 'boolean'"
@@ -193,6 +212,7 @@
             value: false,
           },
         ]"
+        :disabled="props.disabled"
       />
       <div v-else-if="['object', 'array', 'null'].includes(record.type)" class="ms-form-table-td-text"> - </div>
       <a-input
@@ -200,6 +220,7 @@
         v-model:model-value="record.defaultValue"
         :placeholder="t('common.pleaseInput')"
         class="ms-form-table-input"
+        :disabled="props.disabled"
       />
     </template>
     <template #enumValues="{ record }">
@@ -208,9 +229,10 @@
         v-else
         v-model:model-value="record.enumValues"
         :title="t('ms.json.schema.enum')"
-        :popover-title="JSON.stringify(record.enumValues.split('\n'))"
+        :popover-title="record.enumValues ? JSON.stringify(record.enumValues.split('\n')) : ''"
         class="ms-form-table-input"
         type="textarea"
+        :disabled="props.disabled"
       >
       </MsQuickInput>
     </template>
@@ -221,12 +243,15 @@
             <icon-settings class="text-[var(--color-text-4)]" />
           </MsButton>
         </a-tooltip>
-        <a-tooltip v-if="['object', 'array'].includes(record.type)" :content="t('ms.json.schema.addChild')">
+        <a-tooltip
+          v-if="['object', 'array'].includes(record.type) && !props.disabled"
+          :content="t('ms.json.schema.addChild')"
+        >
           <MsButton type="icon" class="ms-json-schema-icon-button" @click="addChild(record)">
             <MsIcon type="icon-icon_add_outlined" class="text-[var(--color-text-4)]" />
           </MsButton>
         </a-tooltip>
-        <a-tooltip v-if="record.id !== 'root'" :content="t('common.delete')">
+        <a-tooltip v-if="record.id !== 'root' && !props.disabled" :content="t('common.delete')">
           <MsButton type="icon" class="ms-json-schema-icon-button" @click="deleteLine(record, rowIndex)">
             <icon-minus-circle class="cursor-pointer text-[var(--color-text-4)]" size="18" />
           </MsButton>
@@ -269,7 +294,7 @@
     :ok-text="t('common.save')"
     @confirm="applySetting"
   >
-    <a-form ref="setting" :model="activeRecord" layout="vertical">
+    <a-form ref="setting" :model="activeRecord" :disabled="props.disabled" layout="vertical">
       <a-form-item
         :label="t('ms.json.schema.name')"
         :rules="[{ required: true, message: t('ms.json.schema.nameNotNull') }]"
@@ -515,6 +540,9 @@
     parseTableDataToJsonSchema,
   } from './utils';
 
+  const props = defineProps<{
+    disabled?: boolean;
+  }>();
   const { t } = useI18n();
 
   const defaultItem: JsonSchemaTableItem = {
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index cf6b89d11c..70cb04af1f 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -74,7 +74,13 @@
       </div>
     </template>
     <template #batchAddTitle>
-      <MsButton type="text" size="mini" class="!mr-0" @click="emit('batchAdd')">
+      <MsButton
+        v-if="!props.disabledExceptParam && !props.disabledParamValue"
+        type="text"
+        size="mini"
+        class="!mr-0"
+        @click="emit('batchAdd')"
+      >
         {{ t('apiTestDebug.batchAdd') }}
       </MsButton>
     </template>
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index 284ec81cfb..939bf8d8be 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/body.vue
@@ -130,6 +130,7 @@
       ref="jsonSchemaRef"
       v-model:data="innerParams.jsonBody.jsonSchemaTableData"
       v-model:selectedKeys="selectedKeys"
+      :disabled="props.disabledExceptParam"
     />
     <MsCodeEditor
       v-else
@@ -144,7 +145,13 @@
       is-adaptive
     >
       <template #rightTitle>
-        <a-button type="outline" class="arco-btn-outline--secondary p-[0_8px]" size="mini" @click="autoMakeJson">
+        <a-button
+          type="outline"
+          class="arco-btn-outline--secondary p-[0_8px]"
+          size="mini"
+          :disabled="props.disabledParamValue"
+          @click="autoMakeJson"
+        >
           <div class="text-[var(--color-text-1)]">{{ t('apiTestManagement.autoMake') }}</div>
         </a-button>
       </template>