refactor(应用管理): 样式优化

frontend/src/business/components/project/menu/appmanage/AppManage.vue

@@ -2,95 +2,92 @@
   <ms-container>
     <ms-main-container>
       <div v-loading="result.loading">
-        <el-card class="card">
-          <el-col :span="24" justify="space-around">
-            <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 600px">
-              <el-tab-pane :label="$t('commons.my_workstation')" name="my_workstation" :disabled="true">
-                {{ this.$t('commons.my_workstation') }}
-              </el-tab-pane>
-              <el-tab-pane :label="$t('test_track.test_track')" name="test_track">
-                <div>
-                  <el-col :span="8">
-                    <el-row style="margin-top: 10px">
-                      <span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
-                    </el-row>
-                    <el-row style="margin-top: 15px">
-                      <div style="width: 550px" class="divBorder" :model="form">
-                        <div v-if="isXpack">
-                          <span style="margin-left: 10px; margin-top: 5px; display: block">{{
-                              this.$t('project.public')
-                            }}</span>
-                          <span class="spanCss">{{ this.$t('project.public_info') }}</span>
-                          <el-switch v-model="form.casePublic"
-                                     style="margin-left: 500px ; margin-top: -60px"></el-switch>
-                          <el-divider></el-divider>
-                        </div>
-                        <span style="margin-left: 10px; margin-top: 5px; display: block">{{
-                            this.$t('project.test_case_custom_id')
-                          }}</span>
-                        <span class="spanCss">{{ this.$t('project.test_case_custom_id_info') }}</span>
-                        <el-switch v-model="form.customNum" style="margin-left: 500px ; margin-top: -60px"></el-switch>
-                      </div>
-                    </el-row>
-                  </el-col>
-                </div>
-              </el-tab-pane>
-              <el-tab-pane :label="$t('commons.api')" name="api">
-                <el-row :gutter="20">
-                  <el-col :span="8">
-                    <el-row style="margin-top: 10px">
-                      <span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
-                    </el-row>
-                    <el-row style="margin-top: 15px">
-                      <div style="width: 550px" class="divBorder" :model="form">
-                        <span style="margin-left: 10px ; margin-top: 10px; display: block;">{{
-                            this.$t('project.repeatable')
-                          }}</span>
-                        <span class="spanCss">{{ this.$t('project.repeatable_info') }}</span>
-                        <el-switch v-model="form.repeatable" style="margin-left: 500px ; margin-top: -60px"></el-switch>
-                        <el-divider></el-divider>
-                        <span style="margin-left: 10px">{{ this.$t('project.scenario_custom_id') }}</span>
-                        <span class="spanCss">{{ this.$t('project.scenario_custom_id_info') }}</span>
-                        <el-switch v-model="form.scenarioCustomNum"
-                                   style="margin-left: 500px ; margin-top: -60px"></el-switch>
-                        <el-divider></el-divider>
-                        <span style="margin-left: 10px">{{ 'TCP Mock Port' }}</span>
-                        <el-input-number v-model="form.mockTcpPort" :controls="false"
-                                         style="width: 37%;margin-left: 100px; margin-top: 5px"></el-input-number>
-                        <el-switch v-model="form.isMockTcpOpen" @change="chengeMockTcpSwitch"
-                                   style="margin-left: 500px;margin-top: -60px "></el-switch>
-                      </div>
-                    </el-row>
-                  </el-col>
-                  <el-col :span="8" :offset="4">
-                    <el-row style="margin-top: 10px">
-                      <span style="font-weight:bold">{{ this.$t('commons.view_settings') }}</span>
-                    </el-row>
-                    <el-row style="margin-top: 15px">
-                      <div style="width: 550px" class="divBorder" :model="form">
-                        <span style="margin-left: 10px;margin-top: 10px; display: block;">{{
-                            this.$t('api_test.definition.api_quick_button')
-                          }}</span>
-                        <el-radio-group v-model="form.apiQuick" style="margin-left: 300px; margin-top: -40px">
+        <el-card class="table-card">
+          <el-tabs v-model="activeName" style="height: 600px">
+            <el-tab-pane :label="$t('commons.my_workstation')" name="my_workstation" :disabled="true">
+              {{ $t('commons.my_workstation') }}
+            </el-tab-pane>
+
+            <el-tab-pane :label="$t('test_track.test_track')" name="test_track">
+              <el-row style="margin-top: 10px">
+                <span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
+              </el-row>
+              <el-row style="margin-top: 15px">
+                <app-manage-item :title="$t('project.public')" :description="$t('project.public_info')"
+                                 v-if="isXpack">
+                  <template #append>
+                    <el-switch v-model="form.casePublic"></el-switch>
+                  </template>
+                </app-manage-item>
+
+                <app-manage-item :title="$t('project.test_case_custom_id')"
+                                 :description="$t('project.test_case_custom_id_info')">
+                  <template #append>
+                    <el-switch v-model="form.customNum"></el-switch>
+                  </template>
+                </app-manage-item>
+              </el-row>
+            </el-tab-pane>
+
+            <el-tab-pane :label="$t('commons.api')" name="api">
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <el-row style="margin-top: 10px">
+                    <span style="font-weight:bold">{{ $t('commons.enable_settings') }}</span>
+                  </el-row>
+                  <el-row style="margin-top: 15px">
+                    <app-manage-item :title="$t('project.repeatable')" :description="$t('project.repeatable_info')">
+                      <template #append>
+                        <el-switch v-model="form.repeatable" @change="chooseChange"></el-switch>
+                      </template>
+                    </app-manage-item>
+                    <app-manage-item :title="$t('project.scenario_custom_id')"
+                                     :description="$t('project.scenario_custom_id_info')">
+                      <template #append>
+                        <el-switch v-model="form.scenarioCustomNum" @change="chooseChange"></el-switch>
+                      </template>
+                    </app-manage-item>
+                    <app-manage-item :title="'TCP Mock Port'" :prepend-span="8" :middle-span="12" :append-span="4">
+                      <template #middle>
+                        <el-input-number v-model="form.mockTcpPort" :controls="false" size="medium"
+                                         :disabled="form.isMockTcpOpen"></el-input-number>
+                      </template>
+                      <template #append>
+                        <el-switch v-model="form.isMockTcpOpen" @change="chooseChange"></el-switch>
+                      </template>
+                    </app-manage-item>
+                  </el-row>
+                </el-col>
+                <el-col :span="8" :offset="4">
+                  <el-row style="margin-top: 10px">
+                    <span style="font-weight:bold">{{ $t('commons.view_settings') }}</span>
+                  </el-row>
+                  <el-row style="margin-top: 15px">
+                    <app-manage-item :title="$t('api_test.definition.api_quick_button')"
+                                     :append-span="12" :prepend-span="12" :middle-span="0">
+                      <template #append>
+                        <el-radio-group v-model="form.apiQuick" @change="chooseChange">
                           <el-radio label="debug" value="debug">
-                            {{ this.$t('api_test.definition.request.fast_debug') }}
+                            {{ $t('api_test.definition.request.fast_debug') }}
                           </el-radio>
                           <el-radio label="api" value="api">
-                            {{ this.$t('api_test.definition.request.title') }}
+                            {{ $t('api_test.definition.request.title') }}
                           </el-radio>
                         </el-radio-group>
-                      </div>
-                    </el-row>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
+                      </template>
+                    </app-manage-item>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
 
-              <el-tab-pane :label="$t('commons.performance')" name="performance" :disabled="true">{{
-                  this.$t('commons.performance')
-                }}
-              </el-tab-pane>
-            </el-tabs>
-          </el-col>
+            <el-tab-pane :label="$t('commons.performance')" name="performance" :disabled="true">
+              <el-row style="margin-top: 10px">
+                <span style="font-weight:bold">{{ this.$t('commons.enable_settings') }}</span>
+              </el-row>
+            </el-tab-pane>
+
+          </el-tabs>
         </el-card>
       </div>
     </ms-main-container>
@@ -105,16 +102,16 @@ import MsMainContainer from "@/business/components/common/components/MsMainConta
 
 import {
   getCurrentProjectID,
-  getCurrentUser,
   getCurrentUserId,
   getCurrentWorkspaceId,
-  getUUID, hasLicense,
-  hasPermission
+  hasLicense,
 } from "@/common/js/utils";
+import AppManageItem from "@/business/components/settings/common/AppManageItem";
 
 export default {
   name: "appManage",
   components: {
+    AppManageItem,
     MsMainContainer,
     MsContainer
   },
@@ -122,34 +119,14 @@ export default {
     return {
       activeName: 'test_track',
       form: {},
-      labelWidth: '400px',
       count: 0,
       isXpack: false,
       result: {}
     };
   },
   created() {
-    this.result = this.$get('/project/get/' + this.projectId, res => {
-      this.form = res.data;
-      this.count = 0
-    })
-    if (hasLicense()) {
-      this.isXpack = true;
-    } else {
-      this.isXpack = false;
-    }
-
-  },
-  watch: {
-    form: {
-      handler(val, oldVal) {
-        this.count++;
-        if (this.count > 1) {
-          this.submitForm();
-        }
-      },
-      deep: true
-    }
+    this.init();
+    this.isXpack = !!hasLicense();
   },
   computed: {
     projectId() {
@@ -157,48 +134,26 @@ export default {
     },
   },
   methods: {
-    handleClick() {
-
-    },
-    submitForm() {
+    chooseChange() {
       this.form.workspaceId = getCurrentWorkspaceId();
       this.form.createUser = getCurrentUserId();
-      this.form.id = getCurrentProjectID();
-      this.result = this.$post("/project/update", this.form, () => {
+      this.form.id = this.projectId;
+      this.$post("/project/update", this.form, () => {
         this.$success(this.$t('commons.save_success'));
+        this.init();
+      }, () => {
+        this.init();
       });
     },
-    chengeMockTcpSwitch(value) {
-      if (value && this.form.mockTcpPort === 0) {
-        this.result = this.$get('/project/genTcpMockPort/' + this.form.id, res => {
-          let port = res.data;
-          this.form.mockTcpPort = port;
-        })
-      }
+    init() {
+      this.result = this.$get('/project/get/' + this.projectId, res => {
+        this.form = res.data;
+      })
     }
-
   }
 };
 </script>
 
 <style scoped>
 
-/deep/ .el-form-item__label {
-  white-space: pre-line;
-}
-
-.divBorder {
-  border: 1px solid #DCDFE6;
-}
-
-.spanCss {
-  display: block;
-  color: #929295;
-  margin-left: 10px;
-  font-size: 13px
-}
-
-.el-divider--horizontal {
-  margin: 0 0 5px 0;
-}
 </style>

frontend/src/business/components/settings/common/AppManageItem.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="item_outer">
+    <el-row type="flex" justify="space-between">
+      <el-col :span="prependSpan">
+        <div class="item_prepend">
+          <slot name="prepend">
+            <span :class="titleClass">{{ title }}</span>
+            <span class="prepend_description">{{ description }}</span>
+          </slot>
+        </div>
+      </el-col>
+      <el-col :span="middleSpan">
+        <div class="item_middle">
+          <slot name="middle"></slot>
+        </div>
+      </el-col>
+      <el-col :span="appendSpan">
+        <div class="item_append">
+          <slot name="append"></slot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppManageItem",
+  props: {
+    title: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    description: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    prependSpan: {
+      type: Number,
+      default() {
+        return 12;
+      }
+    },
+    middleSpan: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    appendSpan: {
+      type: Number,
+      default() {
+        return 12;
+      }
+    }
+  },
+  computed: {
+    // todo 垂直居中
+    titleClass() {
+      return this.description ?
+        ['prepend_title'] : ['prepend_title', 'item_prepend_lh'];
+    }
+  }
+}
+</script>
+
+<style scoped>
+.item_outer {
+  border-radius: 2px;
+  width: 580px;
+  height: 40px;
+  border: 1px solid #DCDFE6;
+  padding-bottom: 15px;
+}
+
+.item_outer:not(:last-child) {
+  margin-bottom: -1px;
+}
+
+.item_prepend {
+  margin-top: 8px;
+}
+
+.item_prepend_lh {
+  line-height: 40px;
+}
+
+.item_middle {
+  line-height: 55px;
+}
+
+.item_append {
+  position: absolute;
+  line-height: 55px;
+  right: 20px;
+}
+
+.prepend_title {
+  margin-left: 10px;
+}
+
+.prepend_description {
+  display: block;
+  color: #929295;
+  margin-left: 10px;
+  font-size: 13px;
+}
+</style>