style(工作台):接口用例&接口自动化样式调整

workstation/frontend/src/business/component/AutomationTableList.vue

@@ -170,13 +170,8 @@
                          :fields-width="fieldsWidth"
                          sortable
                          min-width="130px">
-          <template v-slot:default="{row}">
+                         <template v-slot:default="{ row }">
-            <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
+            <ms-api-report-status :status="row.lastResult" />
-              {{ $t('api_test.automation.success') }}
-            </el-link>
-            <el-link type="danger" @click="showReport(row)" v-else-if="row.lastResult === 'Error'">
-              {{ $t('api_test.automation.fail') }}
-            </el-link>
           </template>
         </ms-table-column>
 
@@ -236,6 +231,7 @@ export default {
     MsTag,
     MsTableColumn,
     HeaderLabelOperate,
+    MsApiReportStatus: () => import('@/business/module/api/ApiReportStatus'),
     HeaderCustom: () => import("metersphere-frontend/src/components/head/HeaderCustom"),
     BatchMove: () => import("@/business/module/api/BatchMove"),
     EnvironmentSelect: () => import("@/business/module/environment/EnvSelect"),
@@ -629,13 +625,6 @@ export default {
         }
       }
     },
-
-
-    showReport(row) {
-      this.showReportVisible = true;
-      this.infoDb = true;
-      this.showReportId = row.reportId;
-    },
     //判断是否只显示本周的数据。  从首页跳转过来的请求会带有相关参数
     isSelectThissWeekData() {
       let dataRange = this.$route.params.dataSelectRange;

workstation/frontend/src/business/module/api/ApiCaseRunModeWithEnv.vue

@@ -6,8 +6,8 @@
     @close="close"
     :visible.sync="runModeVisible"
   >
-    <div style="margin-bottom: 10px;">
+    <div style="margin-bottom: 10px">
-      <div>{{ $t('commons.environment') }}：</div>
+      <div>{{ $t("commons.environment") }}：</div>
       <env-select-popover
         :project-ids="projectIds"
         :project-list="projectList"
@@ -20,60 +20,73 @@
         @setProjectEnvMap="setProjectEnvMap"
         @setEnvGroup="setEnvGroup"
         ref="envSelectPopover"
-        class="env-select-popover"></env-select-popover>
+        class="env-select-popover"
+      ></env-select-popover>
     </div>
     <div>
-      <span class="ms-mode-span">{{ $t("run_mode.title") }}：</span>
+      <div class="mode-row">{{ $t("run_mode.title") }}：</div>
-      <el-radio-group v-model="runConfig.mode" @change="changeMode">
+      <div>
-        <el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio>
+        <el-radio-group v-model="runConfig.mode" @change="changeMode">
-        <el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio>
+          <el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio>
-      </el-radio-group>
+          <el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <!--  资源池    -->
+    <div>
+      <div class="mode-row">{{ $t("run_mode.other_config") }}：</div>
+      <div class="mode-row">
+        <el-radio-group v-model="runConfig.reportType">
+          <el-radio label="iddReport">{{ $t("run_mode.idd_report") }}</el-radio>
+          <el-radio label="setReport">{{ $t("run_mode.set_report") }}</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="mode-row">
+        <span>{{ $t("run_mode.run_with_resource_pool") }}</span>
+        <el-select
+          :disabled="!runConfig.runWithinResourcePool"
+          v-model="runConfig.resourcePoolId"
+          size="mini"
+          class="mode-row"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in resourcePools"
+            :key="item.id"
+            :label="item.name"
+            :disabled="!item.api"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </div>
 
-    <div class="ms-mode-div">
-      <el-row>
-        <el-col :span="6">
-          <span class="ms-mode-span">{{ $t("run_mode.other_config") }}：</span>
-        </el-col>
-        <el-col :span="18">
-          <div>
-            <el-radio-group v-model="runConfig.reportType">
-              <el-radio label="iddReport">{{ $t("run_mode.idd_report") }}</el-radio>
-              <el-radio label="setReport">{{ $t("run_mode.set_report") }}</el-radio>
-            </el-radio-group>
-          </div>
-          <div style="padding-top: 10px">
-            <span style="padding-right: 10px;">{{ $t('run_mode.run_with_resource_pool') }}</span>
-            <el-select :disabled="!runConfig.runWithinResourcePool" v-model="runConfig.resourcePoolId" size="mini">
-              <el-option
-                v-for="item in resourcePools"
-                :key="item.id"
-                :label="item.name"
-                :disabled="!item.api"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-    <!--- 失败停止 -->
-    <div style="margin-top: 10px" v-if="runConfig.mode === 'serial'">
-      <el-checkbox v-model="runConfig.onSampleError" style="margin-left: 127px">
-        {{ $t("api_test.fail_to_stop") }}
-      </el-checkbox>
-    </div>
 
-    <div class="ms-mode-div" v-if="runConfig.reportType === 'setReport'">
+    <div
-      <span class="ms-mode-span-label">{{ $t("run_mode.report_name") }}：</span>
+      class="ms-mode-span-label"
+      style="margin-top: 8px"
+      v-if="runConfig.reportType === 'setReport'"
+    >
+      {{ $t("run_mode.report_name") }}：
+    </div>
+    <div class="mode-row" v-if="runConfig.reportType === 'setReport'">
       <el-input
         v-model="runConfig.reportName"
         :placeholder="$t('commons.input_content')"
         size="small"
-        style="width: 300px"/>
+        style="width: 100%"
+      />
+    </div>
+
+     <!--- 失败停止 -->
+    <div class="mode-row" v-if="runConfig.mode === 'serial'">
+      <el-checkbox v-model="runConfig.onSampleError">
+        {{ $t("api_test.fail_to_stop") }}
+      </el-checkbox>
     </div>
     <template v-slot:footer>
-      <ms-dialog-footer @cancel="close" @confirm="handleRunBatch"/>
+      <ms-dialog-footer @cancel="close" @confirm="handleRunBatch" />
     </template>
   </el-dialog>
 </template>
@@ -81,18 +94,18 @@
 <script>
 import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
 import EnvSelectPopover from "../environment/EnvSelectPopover";
-import {strMapToObj} from "metersphere-frontend/src/utils";
+import { strMapToObj } from "metersphere-frontend/src/utils";
-import {ENV_TYPE} from "metersphere-frontend/src/utils/constants";
+import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
-import {parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel";
+import { parseEnvironment } from "metersphere-frontend/src/model/EnvironmentModel";
-import { getOwnerProjects, getProjectConfig} from "@/api/project";
+import { getOwnerProjects, getProjectConfig } from "@/api/project";
-import {getTestResourcePools} from "@/api/test-resource-pool";
+import { getTestResourcePools } from "@/api/test-resource-pool";
-import {getEnvironmentByProjectId} from "metersphere-frontend/src/api/environment";
+import { getEnvironmentByProjectId } from "metersphere-frontend/src/api/environment";
-import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
 import { getApiCaseEnvironments } from "@/api/api";
 
 export default {
   name: "MsApiCaseRunModeWithEnv",
-  components: {EnvSelectPopover, MsDialogFooter},
+  components: { EnvSelectPopover, MsDialogFooter },
   data() {
     return {
       runModeVisible: false,
@@ -106,7 +119,7 @@ export default {
         resourcePoolId: null,
         envMap: new Map(),
         environmentGroupId: "",
-        environmentType: ENV_TYPE.JSON
+        environmentType: ENV_TYPE.JSON,
       },
       projectEnvListMap: {},
       projectList: [],
@@ -116,7 +129,7 @@ export default {
   },
   props: {
     runCaseIds: Array,
-    projectId: String
+    projectId: String,
   },
   methods: {
     open() {
@@ -127,12 +140,11 @@ export default {
       this.showPopover();
     },
     getDefaultResourcePool() {
-      getProjectConfig(getCurrentProjectID())
+      getProjectConfig(getCurrentProjectID()).then((res) => {
-        .then((res) => {
+        if (res.data && res.data.poolEnable && res.data.resourcePoolId) {
-          if (res.data && res.data.poolEnable && res.data.resourcePoolId) {
+          this.runConfig.resourcePoolId = res.data.resourcePoolId;
-            this.runConfig.resourcePoolId = res.data.resourcePoolId;
+        }
-          }
+      });
-        });
     },
     changeMode() {
       this.runConfig.onSampleError = false;
@@ -150,25 +162,35 @@ export default {
         resourcePoolId: null,
         envMap: new Map(),
         environmentGroupId: "",
-        environmentType: ENV_TYPE.JSON
+        environmentType: ENV_TYPE.JSON,
       };
       this.runModeVisible = false;
-      this.$emit('close');
+      this.$emit("close");
     },
     handleRunBatch() {
-      if ((this.runConfig.mode === 'serial' || this.runConfig.mode === 'parallel') && this.runConfig.reportType === 'setReport' && this.runConfig.reportName.trim() === "") {
+      if (
-        this.$warning(this.$t('commons.input_name'));
+        (this.runConfig.mode === "serial" ||
+          this.runConfig.mode === "parallel") &&
+        this.runConfig.reportType === "setReport" &&
+        this.runConfig.reportName.trim() === ""
+      ) {
+        this.$warning(this.$t("commons.input_name"));
         return;
       }
-      if (this.runConfig.runWithinResourcePool && this.runConfig.resourcePoolId == null) {
+      if (
-        this.$warning(this.$t('workspace.env_group.please_select_run_within_resource_pool'));
+        this.runConfig.runWithinResourcePool &&
+        this.runConfig.resourcePoolId == null
+      ) {
+        this.$warning(
+          this.$t("workspace.env_group.please_select_run_within_resource_pool")
+        );
         return;
       }
       this.$emit("handleRunBatch", this.runConfig);
       this.close();
     },
     getResourcePools() {
-      this.result = getTestResourcePools().then(response => {
+      this.result = getTestResourcePools().then((response) => {
         this.resourcePools = response.data;
       });
     },
@@ -179,22 +201,22 @@ export default {
       this.runConfig.environmentGroupId = id;
     },
     getWsProjects() {
-      getOwnerProjects().then(res => {
+      getOwnerProjects().then((res) => {
         this.projectList = res.data;
-      })
+      });
     },
     getEnvironments() {
       return new Promise((resolve) => {
         if (this.projectId) {
-          getEnvironmentByProjectId(this.projectId).then(response => {
+          getEnvironmentByProjectId(this.projectId).then((response) => {
             this.environments = response.data;
-            this.environments.forEach(environment => {
+            this.environments.forEach((environment) => {
               parseEnvironment(environment);
             });
             resolve();
           });
         }
-      })
+      });
     },
     showPopover() {
       let currentProjectID = getCurrentProjectID();
@@ -213,24 +235,30 @@ export default {
 </script>
 
 <style scoped>
-.ms-mode-span {
+.mode-row-span {
   margin-right: 10px;
 }
 
-.ms-mode-div {
+.mode-row-div {
   margin-top: 20px;
 }
 
-.ms-mode-span {
+.mode-row-span {
   margin-right: 10px;
   margin-left: 10px;
 }
 
-.ms-mode-span-label:before {
+.mode-row-span-label:before {
-  content: '*';
+  content: "*";
-  color: #F56C6C;
+  color: #f56c6c;
   margin-right: 4px;
   margin-left: 10px;
 }
-
+.mode-row {
+  margin-top: 8px;
+}
+.ms-mode-span-label:before {
+  content: '*';
+  color: #f56c6c;
+}
 </style>