style(环境设置): 优化环境编辑页面

--bug=1008085 --user=刘瑞斌 [环境管理]-创建环境时页面显示优化-输入框左右对齐 https://www.tapd.cn/55049933/s/1070605

frontend/src/business/components/api/test/components/environment/EnvironmentCommonConfig.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
-    <el-form :model="commonConfig" :rules="rules" ref="commonConfig" :disabled="isReadOnly">
-
-      <span>{{$t('api_test.environment.globalVariable')}}</span>
+    <el-form :model="commonConfig" :rules="rules" ref="commonConfig" :disabled="isReadOnly" label-width="30px">
       <ms-api-scenario-variables :show-copy="false" :items="commonConfig.variables"/>
-
       <el-form-item>
         <el-switch v-model="commonConfig.enableHost" active-text="Hosts"/>
       </el-form-item>
@@ -14,7 +11,9 @@
         <span style="margin-left: 30px">{{$t('api_test.environment.response_timeout')}}:</span>
         <el-input-number style="margin-left: 20px" v-model="commonConfig.responseTimeout">{{$t('api_test.environment.globalVariable')}}</el-input-number>
       </el-form-item>
+      <el-form-item>
         <ms-api-host-table v-if="commonConfig.enableHost" :hostTable="commonConfig.hosts" ref="refHostTable"/>
+      </el-form-item>
     </el-form>
   </div>
 </template>

frontend/src/business/components/settings/workspace/WsEnvironmentList.vue

@@ -3,7 +3,8 @@
     <el-card class="table-card" v-loading="result.loading">
       <!-- 表头 -->
       <template v-slot:header>
-        <ms-table-header :create-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE']" :title="$t('api_test.environment.environment_list')" :create-tip="btnTips"
+        <ms-table-header :create-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE']"
+                         :title="$t('api_test.environment.environment_list')" :create-tip="btnTips"
                          :condition.sync="condition" @search="search" @create="createEnv">
           <template v-slot:button>
             <ms-table-button v-permission="['WORKSPACE_PROJECT_ENVIRONMENT:READ+IMPORT']" icon="el-icon-box"
@@ -55,14 +56,13 @@
 
     <!-- 创建、编辑、复制环境时的对话框 -->
     <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :title="dialogTitle" width="66%">
-      <div class="project-item">
-        <span>
-          {{$t('project.select')}}
-        </span>
-        <el-select style="width: 50%" @change="handleProjectChange" v-model="currentProjectId" filterable clearable>
+      <el-form label-width="80px" :rules="rules">
+        <el-form-item class="project-item" prop="currentProjectId" :label="$t('project.select')">
+          <el-select @change="handleProjectChange" v-model="currentProjectId" filterable clearable>
             <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
-      </div>
+        </el-form-item>
+      </el-form>
       <environment-edit :environment="currentEnvironment" ref="environmentEdit" @close="close"
                         :project-id="currentProjectId" @refreshAfterSave="refresh">
       </environment-edit>
@@ -76,7 +76,8 @@
             {{ getUrl(row) }}
           </template>
         </el-table-column>
-        <el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip min-width="100px">
+        <el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip
+                         min-width="100px">
           <template v-slot:default="{row}">
             {{ getName(row) }}
           </template>
@@ -150,7 +151,12 @@
       projectIds: [],   //当前工作空间所拥有的所有项目id
       projectFilters: [],
       screenHeight: 'calc(100vh - 195px)',
+      rules: {
+        currentProjectId: [
+          {required: true, message: "", trigger: 'blur'},
+        ],
       }
+    };
   },
   created() {
 
@@ -220,12 +226,12 @@
             this.projectFilters.push({
               text: project.name,
               value: project.id,
-              })
+            });
           });
           this.getEnvironments();
-          })
+        });
       } else {
-          this.getEnvironments()
+        this.getEnvironments();
       }
     },
     getEnvironments(projectIds) {
@@ -239,7 +245,7 @@
       this.result = this.$post(url, this.condition, response => {
         this.environments = response.data.listObject;
         this.total = response.data.itemCount;
-        })
+      });
     },
     createEnv() {
       this.currentProjectId = '';
@@ -248,7 +254,7 @@
       this.currentEnvironment = new Environment();
     },
     search() {
-        this.list()
+      this.list();
     },
     editEnv(environment) {
       this.dialogTitle = this.$t('api_test.environment.config_environment');
@@ -286,7 +292,7 @@
           });
         }).catch(() => {
           this.$info(this.$t('commons.delete_cancelled'));
-          })
+        });
       }
     },
     getNoRepeatName(name) {
@@ -300,7 +306,7 @@
 
     //筛选指定项目下的环境
     filter(filters) {
-        this.getEnvironments(filters.projectId)
+      this.getEnvironments(filters.projectId);
     },
 
     //对话框取消按钮
@@ -336,7 +342,7 @@
         }
         delete env.id;
         delete env.projectId;
-        })
+      });
       downloadFile('MS_' + envs.length + '_Environments.json', JSON.stringify(envs));
     },
 
@@ -359,8 +365,7 @@
             }
           } else if (config.httpConfig.conditions.length > 1) {
             return "SHOW_INFO";
-            }
-            else {
+          } else {
             return "";
           }
         }
@@ -372,8 +377,7 @@
   },
 
 
-
-  }
+};
 </script>
 
 <style scoped>
@@ -402,10 +406,10 @@
 
 .project-item {
   padding-left: 10px;
-    padding-right: 20px;
+  padding-right: 10px;
 }
 
 .project-item .el-select {
-    margin-top: 15px;
+  width: 100%;
 }
 </style>