feat(版本对比): 性能测试_接口定义_场景版本对比页面只读

--user=郭雨琦 性能测试_接口定义_场景版本对比页面只读

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -1713,6 +1713,14 @@ export default {
               if(res.data.scenarioDefinition != null){
                 let obj = JSON.parse(res.data.scenarioDefinition);
                 if(obj){
+                  if(obj.hashTree){
+                    for (let i = 0; i < obj.hashTree.length; i++) {
+                      obj.hashTree[i].disabled = true;
+                    }
+                  }
+                  for (let i = 0; i < this.scenarioDefinition.length; i++) {
+                    this.scenarioDefinition[i].disabled = true;
+                  }
                   this.newScenarioDefinition = obj.hashTree;
                   if (response.data.environmentJson) {
                     this.newProjectEnvMap = objToStrMap(JSON.parse(response.data.environmentJson));

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -32,7 +32,7 @@
         <slot name="message"></slot>
         <slot name="debugStepCode"></slot>
         <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
-          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="data.disabled && !data.root&&showVersion" style="width: 30px"/>
+          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="data.disabled && !data.root&&!showVersion" style="width: 30px"/>
         </el-tooltip>
         <slot name="button" v-if="showVersion"></slot>
         <el-tooltip content="Copy" placement="top" v-if="showVersion">

frontend/src/business/components/api/automation/version/ScenarioDiff.vue

@@ -16,7 +16,7 @@
             </div>
 
             <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
-            <el-form :model="oldData" label-position="right" label-width="80px" size="small" :rules="rules"
+            <el-form :model="oldData" label-position="right" label-width="80px" size="small" :rules="rules"  :disabled="true"
                      ref="currentScenario" style="margin-right: 20px">
               <!-- 基础信息 -->
               <el-row>
@@ -179,7 +179,7 @@
             </div>
 
             <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
-            <el-form :model="newData" label-position="right" label-width="80px" size="small" :rules="rules"
+            <el-form :model="newData" label-position="right" label-width="80px" size="small" :rules="rules" :disabled="true"
                      ref="currentScenario" style="margin-right: 20px">
               <!-- 基础信息 -->
               <el-row>

frontend/src/business/components/api/definition/components/complete/ApiRelationshipList.vue

@@ -85,7 +85,8 @@ export default {
         {
           tip: this.$t('commons.delete'), icon: "el-icon-delete", type: "danger",
           exec: this.handleDelete,
-          permissions: ['PROJECT_API_DEFINITION:READ+EDIT_API']
+          permissions: ['PROJECT_API_DEFINITION:READ+EDIT_API'],
+          isDisable:this.readOnly
         }
       ],
       condition: {},

frontend/src/business/components/api/definition/components/complete/BasisApi.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading">
-    <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px">
+    <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px" :disabled="isReadOnly">
       <!-- 基础信息 -->
       <el-row>
         <el-col :span="8">
@@ -72,6 +72,10 @@
       },
       moduleOptions: Array,
       basisData: {},
+      isReadOnly:{
+        type: Boolean,
+        default: false
+      },
     },
     watch: {
       'basicForm.name': {

frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading">
-    <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px">
+    <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px" :disabled="isDiff">
       <!-- 基础信息 -->
       <el-row>
         <el-col :span="isDiff?16:8">

frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="compare-class">
+  <div class="compare-class" v-loading="isReloadData">
     <el-card style="width: 50%;" ref="old">
       <div style="background-color: white;">
         <el-row>
@@ -21,7 +21,7 @@
         <br/>
         <el-row>
           <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions"
+            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
                           :basisData="oldData" ref="basicForm"
                          />
           </el-col>
@@ -29,7 +29,7 @@
 
         <!-- 请求参数 -->
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="oldRequest"/>
+        <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
 
         <ms-form-divider :title="$t('test_track.case.other_info')"/>
         <api-info-container>
@@ -72,14 +72,14 @@
         <br/>
         <el-row>
           <el-col>
-            <ms-basis-api   :moduleOptions="moduleOptions"
+            <ms-basis-api   :moduleOptions="moduleOptions" :is-read-only="true"
                           :basisData="newData" ref="basicForm"/>
           </el-col>
         </el-row>
 
         <!-- 请求参数 -->
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="request"/>
+        <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
 
         <!-- 其他信息-->
         <ms-form-divider :title="$t('test_track.case.other_info')"/>
@@ -150,12 +150,23 @@ export default{
         this.$refs.newDependencies.open();
       }
     },
+    relationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    },
+    oldRelationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    }
   },
   data(){
     return{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
+      isReloadData:true
     }
   },
   methods:{
@@ -163,6 +174,7 @@ export default{
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
       diff(oldVnode,vnode);
+      this.isReloadData = false
     },
     setCount(count) {
       this.relationshipCount = count;

frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="compare-class">
+  <div class="compare-class" v-loading="isReloadData">
     <el-card style="width: 50%;" ref="old">
-      <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
+      <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
         <!-- 操作按钮 -->
 
           <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
@@ -90,7 +90,7 @@
           <el-row>
             <el-col :span="20">
               Mock地址：
-              <el-link :href="oldMockUrl" target="_blank" style="color: black"
+              <el-link  target="_blank" style="color: black"
                        type="primary">{{ this.oldMockUrl }}
               </el-link>
             </el-col>
@@ -132,7 +132,7 @@
 
     </el-card>
     <el-card style="width: 50%;" ref="new">
-      <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
+      <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
         <!-- 操作按钮 -->
           <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
             <i class="el-icon-star-off"
@@ -149,9 +149,10 @@
 
         <!-- 基础信息 -->
         <div class="base-info">
+
           <el-row>
             <el-col :span="8">
-              <el-form-item :label="$t('commons.name')" prop="name">
+              <el-form-item :label="$t('commons.name')"  prop="name">
                 <el-input class="ms-http-input" size="small" v-model="newData.name"/>
               </el-form-item>
             </el-col>
@@ -221,7 +222,7 @@
           <el-row>
             <el-col :span="20">
               Mock地址：
-              <el-link :href="newMockUrl" target="_blank" style="color: black"
+              <el-link  target="_blank" style="color: black"
                        type="primary">{{ this.newMockUrl }}
               </el-link>
             </el-col>
@@ -357,6 +358,7 @@ export default{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
+      isReloadData:true
     }
   },
   methods:{
@@ -364,6 +366,7 @@ export default{
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
       diff(oldVnode,vnode);
+      this.isReloadData = false
     },
     setCount(count) {
       this.relationshipCount = count;
@@ -404,4 +407,5 @@ export default{
   display: flex;
   justify-content:space-between;
 }
+
 </style>

frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="compare-class">
+  <div class="compare-class" v-loading="isReloadData">
     <el-card style="width: 50%;" ref="old">
       <div style="background-color: white;">
         <el-row>
@@ -20,14 +20,14 @@
         <br/>
         <el-row>
           <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions"
+            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
                           :basisData="oldData" ref="basicForm"
                           />
           </el-col>
         </el-row>
         <!-- 请求参数 -->
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="oldRequest"/>
+        <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
 
         <ms-form-divider :title="$t('test_track.case.other_info')"/>
         <api-info-container>
@@ -70,14 +70,14 @@
         <br/>
         <el-row>
           <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions"
+            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
                            :basisData="newData" ref="basicForm"
             />
           </el-col>
         </el-row>
         <!-- 请求参数 -->
         <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="request"/>
+        <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
 
         <!-- 其他信息-->
         <ms-form-divider :title="$t('test_track.case.other_info')"/>
@@ -142,11 +142,30 @@ export default{
     request: {},
     oldRequest:{},
   },
+  watch: {
+    activeName() {
+      if (this.activeName === 'dependencies') {
+        this.$refs.oldDependencies.open();
+        this.$refs.newDependencies.open();
+      }
+    },
+    relationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    },
+    oldRelationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    }
+  },
   data(){
     return{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
+      isReloadData:true
     }
   },
   methods:{
@@ -154,6 +173,7 @@ export default{
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
       diff(oldVnode,vnode);
+      this.isReloadData = false
     },
     setCount(count) {
       this.relationshipCount = count;

frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="compare-class">
+  <div class="compare-class" v-loading="isReloadData">
     <el-card style="width: 50%;" ref="old">
       <div style="background-color: white;">
         <el-row>
@@ -46,13 +46,13 @@
         <div v-if="oldApiProtocol==='TCP'">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
 
-          <ms-tcp-format-parameters :show-script="false" :request="oldRequest" ref="tcpFormatParameter"/>
+          <ms-tcp-format-parameters :show-script="false" :request="oldRequest" :is-read-only="true" ref="tcpFormatParameter"/>
         </div>
         <div v-else-if="oldApiProtocol==='ESB'">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="oldRequest" ref="esbDefinition"/>
+          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :is-read-only="true" :request="oldRequest" ref="esbDefinition"/>
           <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
-          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
+          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true" :is-read-only="true"
                                    :request="oldRequest"/>
           <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
         </div>
@@ -123,13 +123,13 @@
         <!-- 请求参数 -->
         <div v-if="apiProtocol=='TCP'">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <ms-tcp-format-parameters :show-script="false" :request="request" ref="tcpFormatParameter"/>
+          <ms-tcp-format-parameters :show-script="false" :request="request" :is-read-only="true" ref="tcpFormatParameter"/>
         </div>
         <div v-else-if="apiProtocol=='ESB'">
           <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="request" ref="esbDefinition"/>
+          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false"  :is-read-only="true"  :request="request" ref="esbDefinition"/>
           <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
-          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
+          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"  :is-read-only="true"
                                    :request="request"/>
           <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
         </div>
@@ -214,11 +214,30 @@ export default{
     },
     methodTypes:Array,
   },
+  watch: {
+    activeName() {
+      if (this.activeName === 'dependencies') {
+        this.$refs.oldDependencies.open();
+        this.$refs.newDependencies.open();
+      }
+    },
+    relationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    },
+    oldRelationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    }
+  },
   data(){
     return{
       activeName: 'remark',
       relationshipCount: 0,
       oldRelationshipCount: 0,
+      isReloadData:true
     }
   },
   methods:{
@@ -226,6 +245,7 @@ export default{
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
       diff(oldVnode,vnode);
+      this.isReloadData = false
     },
     setCount(count) {
       this.relationshipCount = count;

frontend/src/business/components/performance/test/DiffVersion.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="compare-class" id="vdiff" ref="all" >
-    <el-card style="width: 50%;" ref="old" id="old">
+
+<div v-loading="isReloadData">
+  <div class="caall">
+
+  </div>
+  <div  class="compare-class" id="vdiff" ref="all" >
+    <el-card style="width: 50%;" ref="old" id="old" >
       <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
       <el-row>
         <el-col :span="12">
@@ -38,7 +43,7 @@
       </el-row>
 
     </el-card>
-    <el-card style="width: 50%;" ref="new" id="new">
+    <el-card style="width: 50%;" ref="new" id="new" >
       <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
       <el-row>
         <el-col :span="12">
@@ -77,6 +82,10 @@
 
     </el-card>
   </div>
+
+</div>
+
+
 </template>
 
 <script>
@@ -118,12 +127,7 @@ export default{
   data(){
     return{
       active: '0',
-      oldDataJson:{
-
-      },
-      newDataJson:{
-
-      },
+      isReloadData:true,
     }
   },
   methods:{
@@ -131,7 +135,7 @@ export default{
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
       diff(oldVnode,vnode);
-
+      this.isReloadData = false;
     },
     clickTab(tab) {
       if (tab.index === '1') {
@@ -223,5 +227,15 @@ export default{
 .compare-class{
   display: flex;
   justify-content:space-between;
+
 }
+.caall{
+  position: absolute;
+  width: 100%;
+  height: 400%;
+  z-index: 10;
+  background: rgba(0,0,0,0);
+}
+
+
 </style>