refactor(系统设置): 对话框按钮显示问题

--bug=1010843 --user=李玉号【系统设置】-环境管理-编辑/创建环境页面-取消和确定按钮离下拉框太近 https://www.tapd.cn/55049933/s/1114357 --bug=1010842 --user=李玉号【接口测试】-编辑case-环境配置-取消和确定按钮未置顶显示 https://www.tapd.cn/55049933/s/1114355
2022-03-07 11:16:11 +08:00 · 2022-03-07 11:16:11 +08:00 · d4475d06ab
parent dbd85c1495
commit d4475d06ab
6 changed files with 164 additions and 163 deletions
--- a/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
@ -2,6 +2,11 @@
  <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
             :visible.sync="visible" class="environment-dialog" width="80%" top="50px"
             @close="close" append-to-body destroy-on-close ref="environmentConfig">
+    <template #title>
+      <ms-dialog-header :title="$t('api_test.environment.environment_config')"
+                        @cancel="visible = false"
+                        @confirm="save"/>
+    </template>
    <el-container v-loading="result.loading">
      <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')"
                     :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
@ -24,13 +29,14 @@
  import EnvironmentEdit from "./environment/EnvironmentEdit";
  import {deepClone, hasPermission, listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
  import {Environment, parseEnvironment} from "../model/EnvironmentModel";
+  import MsDialogHeader from "@/business/components/common/components/MsDialogHeader";

  export default {
    name: "ApiEnvironmentConfig",
    components: {
      EnvironmentEdit,
      MsAsideItem,
-      MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable
+      MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable, MsDialogHeader
    },
    data() {
      return {
@ -178,6 +184,9 @@
          this.ifCreate = false;
        }
      },
+      save(){
+        this.$refs.environmentEdit.save();
+      },
      close() {
        this.$emit('close');
        this.visible = false;
--- a/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
+++ b/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
@ -1,9 +1,5 @@
 <template>
  <el-main v-loading="result.loading" class="environment-edit" style="margin-left: 0px">
-    <ms-dialog-header class="ms-opt-btn"
-                      :btn-size="'medium'"
-                      @cancel="cancel"
-                      @confirm="save()"/>
    <el-form :model="environment" :rules="rules" ref="environment" label-width="80px">
      <el-form-item prop="name" :label="$t('api_test.environment.name')">
        <el-input v-model="environment.name" :disabled="isReadOnly" :placeholder="this.$t('commons.input_name')"
--- a/frontend/src/business/components/common/components/MsDialogHeader.vue
+++ b/frontend/src/business/components/common/components/MsDialogHeader.vue
@ -1,14 +1,20 @@
 <template>

-  <div class="dialog-header">
-    <el-button @click="cancel" :size="btnSize">{{ $t('commons.cancel') }}</el-button>
-    <el-button type="primary" @click="confirm" @keydown.enter.native.prevent :size="btnSize">
-      {{ $t('commons.confirm') }}
-    </el-button>
-    <el-button type="primary" v-if="isShow" @click="saveAsEdit" @keydown.enter.native.prevent :size="btnSize">{{
-        title
-      }}
-    </el-button>
+  <div class="msDialogHeader">
+    <span style="float: left;font-size: 18px;color: #303133;">{{title}}</span>
+
+    <div style="float: right;width: fit-content;">
+      <div style="float: left; margin-right: 8px;">
+        <slot name="other"></slot>
+      </div>
+      <div class="ms_btn">
+        <el-button @click="cancel" :size="btnSize">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="confirm" @keydown.enter.native.prevent :size="btnSize">
+          {{ $t('commons.confirm') }}
+        </el-button>
+      </div>
+    </div>
+
  </div>

 </template>
@ -17,15 +23,11 @@
 export default {
  name: "MsDialogHeader",
  props: {
-    isShow: {
-      type: Boolean,
-      default: false,
-    },
    title: String,
    btnSize: {
      type: String,
      default() {
-        return 'mini';
+        return 'small';
      }
    }
  },
@ -35,25 +37,17 @@ export default {
    },
    confirm() {
      this.$emit("confirm");
-    },
-    saveAsEdit() {
-      this.$emit("saveAsEdit");
    }
  }
 }
 </script>

 <style scoped>
-
-.dialog-header {
-  top: 20px;
-  right: 20px;
-  padding: 0;
-  background: 0 0;
-  border: none;
-  outline: 0;
-  cursor: pointer;
-  display: inline-block
-}
-
+  .ms_btn {
+    float: right;
+    margin-right: 50px;
+  }
+  .msDialogHeader {
+    margin-bottom: 5px;
+  }
 </style>
--- a/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
+++ b/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
@ -62,7 +62,12 @@
    </el-card>

    <!-- 创建、编辑、复制环境时的对话框 -->
-    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :title="dialogTitle" top="50px" width="66%">
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" top="50px" width="66%">
+      <template #title>
+        <ms-dialog-header :title="dialogTitle"
+                          @cancel="dialogVisible = false"
+                          @confirm="save"/>
+      </template>
      <el-form label-width="80px" :rules="rules" style="display: flow-root">
        <el-form-item class="project-item" prop="currentProjectId" :label="$t('project.select')">
          <el-select @change="handleProjectChange" v-model="currentProjectId" filterable clearable>
--- a/frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue
@ -7,6 +7,10 @@
             :destroy-on-close="true"
             top="50px" append-to-body>

+    <template #title>
+      <slot name="title" :title="title"></slot>
+    </template>
+
    <el-header class="header-btn">
      <slot name="headerBtn"></slot>
    </el-header>
--- a/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
@ -1,24 +1,18 @@
 <template>
  <relevance-dialog :width="width" :title="dialogTitle" ref="relevanceDialog">
-
-    <template v-slot:headerBtn>
-
-      <div v-if="$slots.headerBtn">
-        <slot name="headerBtn"></slot>
-      </div>
-      <div v-else>
-        <div style="margin-bottom: 5px; display:inline-block" v-if="flag">
-          <el-checkbox v-model="checked" class="el-checkbox__label">{{
-              $t('test_track.sync_add_api_load')
-            }}
-          </el-checkbox>
-        </div>
-        <ms-dialog-header @cancel="close" v-loading="isSaving" @confirm="save"/>
-      </div>
+    <template slot="title" slot-scope="{title}">
+      <ms-dialog-header :title="title" @cancel="close" @confirm="save">
+        <template #other>
+          <div v-if="flag" style="margin-top: 5px;">
+            <el-checkbox v-model="checked" class="el-checkbox__label">{{ $t('test_track.sync_add_api_load') }}</el-checkbox>
+          </div>
+        </template>
+      </ms-dialog-header>
    </template>

    <template v-slot:aside>
-      <el-select v-if="isAcrossSpace" filterable slot="prepend" v-model="workspaceId" @change="changeWorkspace" style="width: 160px"
+      <el-select v-if="isAcrossSpace" filterable slot="prepend" v-model="workspaceId" @change="changeWorkspace"
+                 style="width: 160px"
                 size="small">
        <el-option v-for="(item,index) in workspaceList" :key="index" :label="item.name" :value="item.id"/>
      </el-select>
@ -54,132 +48,131 @@

 import MsDialogHeader from '../../../../../common/components/MsDialogHeader'
 import SelectMenu from "../../../../common/SelectMenu";
-  import RelevanceDialog from "./RelevanceDialog";
-  import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "@/common/js/utils";
+import RelevanceDialog from "./RelevanceDialog";
+import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "@/common/js/utils";

-  export default {
-    name: "TestCaseRelevanceBase",
-    components: {
-      RelevanceDialog,
-      SelectMenu,
-      MsDialogHeader,
+export default {
+  name: "TestCaseRelevanceBase",
+  components: {
+    RelevanceDialog,
+    SelectMenu,
+    MsDialogHeader,
+  },
+  data() {
+    return {
+      checked: true,
+      result: {},
+      currentProject: {},
+      projectId: '',
+      projectName: '',
+      projects: [],
+      workspaceId: '',
+      workspaceList: [],
+      currentWorkSpaceId: ''
+    };
+  },
+  props: {
+    planId: {
+      type: String
    },
-    data() {
-      return {
-        checked:true,
-        result: {},
-        currentProject: {},
-        projectId: '',
-        projectName: '',
-        projects: [],
-        workspaceId:'',
-        workspaceList:[],
-        currentWorkSpaceId:''
-      };
-    },
-    props: {
-      planId: {
-        type: String
-      },
-      dialogTitle: {
-        type: String,
-        default() {
-          return this.$t('test_track.plan_view.relevance_test_case');
-        }
-      },
-      flag:{
-        type:Boolean,
-      },
-      width: String,
-      isSaving:{
-        type:Boolean,
-        default() {
-          return false;
-        }
-      },
-      isAcrossSpace:{
-        type:Boolean,
-        default() {
-          return false;
-        }
-      },
-      multipleProject: {
-        type: Boolean,
-        default: true
+    dialogTitle: {
+      type: String,
+      default() {
+        return this.$t('test_track.plan_view.relevance_test_case');
      }
    },
-    methods: {
-      refreshNode() {
-        this.$emit('refresh');
-      },
+    flag: {
+      type: Boolean,
+    },
+    width: String,
+    isSaving: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    isAcrossSpace: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    multipleProject: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    refreshNode() {
+      this.$emit('refresh');
+    },

-      save() {
-        this.$emit('save',this.checked);
-      },
+    save() {
+      this.$emit('save', this.checked);
+    },

-      close() {
-        this.$refs.relevanceDialog.close();
-      },
+    close() {
+      this.$refs.relevanceDialog.close();
+    },

-      open() {
-        this.getProject();
-        this.$refs.relevanceDialog.open();
-      },
+    open() {
+      this.getProject();
+      this.$refs.relevanceDialog.open();
+    },

-      getProject() {
-        let realWorkSpaceId = this.isAcrossSpace?this.workspaceId:this.currentWorkSpaceId;
-        this.result = this.$post("/project/list/related", {userId: getCurrentUserId(), workspaceId: realWorkSpaceId}, res => {
-          let data = res.data;
-          if (data) {
-            const index = data.findIndex(d => d.id === getCurrentProjectID());
-            this.projects = data;
-            if (index !== -1) {
-              this.projectId = data[index].id;
-              this.projectName = data[index].name;
-              this.changeProject(data[index]);
-            } else {
-              this.projectId = data[0].id;
-              this.projectName = data[0].name;
-              this.changeProject(data[0]);
-            }
+    getProject() {
+      let realWorkSpaceId = this.isAcrossSpace ? this.workspaceId : this.currentWorkSpaceId;
+      this.result = this.$post("/project/list/related", {
+        userId: getCurrentUserId(),
+        workspaceId: realWorkSpaceId
+      }, res => {
+        let data = res.data;
+        if (data) {
+          const index = data.findIndex(d => d.id === getCurrentProjectID());
+          this.projects = data;
+          if (index !== -1) {
+            this.projectId = data[index].id;
+            this.projectName = data[index].name;
+            this.changeProject(data[index]);
+          } else {
+            this.projectId = data[0].id;
+            this.projectName = data[0].name;
+            this.changeProject(data[0]);
          }
-        })
-      },
-
-      changeProject(project) {
-        this.currentProject = project;
-        this.$emit('setProject', project.id);
-        // 获取项目时刷新该项目模块
-        this.$emit('refreshNode');
-      },
-
-      getWorkSpaceList(){
-        this.$get("/workspace/list/userworkspace/" + encodeURIComponent(getCurrentUserId()), response => {
-          this.workspaceList = response.data;
-        });
-      },
-
-      changeWorkspace(){
-        this.getProject();
-      }
+        }
+      })
    },
-    created() {
-      this.currentWorkSpaceId = getCurrentWorkspaceId();
-      this.workspaceId = this.currentWorkSpaceId;
-      if(this.isAcrossSpace){
-        this.getWorkSpaceList();
-      }
+
+    changeProject(project) {
+      this.currentProject = project;
+      this.$emit('setProject', project.id);
+      // 获取项目时刷新该项目模块
+      this.$emit('refreshNode');
+    },
+
+    getWorkSpaceList() {
+      this.$get("/workspace/list/userworkspace/" + encodeURIComponent(getCurrentUserId()), response => {
+        this.workspaceList = response.data;
+      });
+    },
+
+    changeWorkspace() {
+      this.getProject();
+    }
+  },
+  created() {
+    this.currentWorkSpaceId = getCurrentWorkspaceId();
+    this.workspaceId = this.currentWorkSpaceId;
+    if (this.isAcrossSpace) {
+      this.getWorkSpaceList();
    }
  }
+}
 </script>

 <style scoped>

-.el-checkbox__label {
-  display: inline-block;
-  padding-left: 10px;
-  line-height: 19px;
-  font-size: 14px;
-  padding-right: 10px;
-}
+/*.el-checkbox__label {*/
+/*  float: right;*/
+/*}*/
 </style>