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

--bug=1010843 --user=李玉号 【系统设置】-环境管理-编辑/创建环境页面-取消和确定按钮离下拉框太近
https://www.tapd.cn/55049933/s/1114357
--bug=1010842 --user=李玉号
【接口测试】-编辑case-环境配置-取消和确定按钮未置顶显示 https://www.tapd.cn/55049933/s/1114355

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;

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')"

frontend/src/business/components/common/components/MsDialogHeader.vue

@@ -1,14 +1,20 @@
 <template>
 
-  <div class="dialog-header">
+  <div class="msDialogHeader">
-    <el-button @click="cancel" :size="btnSize">{{ $t('commons.cancel') }}</el-button>
+    <span style="float: left;font-size: 18px;color: #303133;">{{title}}</span>
-    <el-button type="primary" @click="confirm" @keydown.enter.native.prevent :size="btnSize">
+
-      {{ $t('commons.confirm') }}
+    <div style="float: right;width: fit-content;">
-    </el-button>
+      <div style="float: left; margin-right: 8px;">
-    <el-button type="primary" v-if="isShow" @click="saveAsEdit" @keydown.enter.native.prevent :size="btnSize">{{
+        <slot name="other"></slot>
-        title
+      </div>
-      }}
+      <div class="ms_btn">
-    </el-button>
+        <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>
-
+  .ms_btn {
-.dialog-header {
+    float: right;
-  top: 20px;
+    margin-right: 50px;
-  right: 20px;
+  }
-  padding: 0;
+  .msDialogHeader {
-  background: 0 0;
+    margin-bottom: 5px;
-  border: none;
+  }
-  outline: 0;
-  cursor: pointer;
-  display: inline-block
-}
-
 </style>

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>

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>

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 slot="title" slot-scope="{title}">
-    <template v-slot:headerBtn>
+      <ms-dialog-header :title="title" @cancel="close" @confirm="save">
-
+        <template #other>
-      <div v-if="$slots.headerBtn">
+          <div v-if="flag" style="margin-top: 5px;">
-        <slot name="headerBtn"></slot>
+            <el-checkbox v-model="checked" class="el-checkbox__label">{{ $t('test_track.sync_add_api_load') }}</el-checkbox>
-      </div>
+          </div>
-      <div v-else>
+        </template>
-        <div style="margin-bottom: 5px; display:inline-block" v-if="flag">
+      </ms-dialog-header>
-          <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>
 
     <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 RelevanceDialog from "./RelevanceDialog";
-  import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "@/common/js/utils";
+import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "@/common/js/utils";
 
-  export default {
+export default {
-    name: "TestCaseRelevanceBase",
+  name: "TestCaseRelevanceBase",
-    components: {
+  components: {
-      RelevanceDialog,
+    RelevanceDialog,
-      SelectMenu,
+    SelectMenu,
-      MsDialogHeader,
+    MsDialogHeader,
+  },
+  data() {
+    return {
+      checked: true,
+      result: {},
+      currentProject: {},
+      projectId: '',
+      projectName: '',
+      projects: [],
+      workspaceId: '',
+      workspaceList: [],
+      currentWorkSpaceId: ''
+    };
+  },
+  props: {
+    planId: {
+      type: String
     },
-    data() {
+    dialogTitle: {
-      return {
+      type: String,
-        checked:true,
+      default() {
-        result: {},
+        return this.$t('test_track.plan_view.relevance_test_case');
-        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
       }
     },
-    methods: {
+    flag: {
-      refreshNode() {
+      type: Boolean,
-        this.$emit('refresh');
+    },
-      },
+    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() {
+    save() {
-        this.$emit('save',this.checked);
+      this.$emit('save', this.checked);
-      },
+    },
 
-      close() {
+    close() {
-        this.$refs.relevanceDialog.close();
+      this.$refs.relevanceDialog.close();
-      },
+    },
 
-      open() {
+    open() {
-        this.getProject();
+      this.getProject();
-        this.$refs.relevanceDialog.open();
+      this.$refs.relevanceDialog.open();
-      },
+    },
 
-      getProject() {
+    getProject() {
-        let realWorkSpaceId = this.isAcrossSpace?this.workspaceId:this.currentWorkSpaceId;
+      let realWorkSpaceId = this.isAcrossSpace ? this.workspaceId : this.currentWorkSpaceId;
-        this.result = this.$post("/project/list/related", {userId: getCurrentUserId(), workspaceId: realWorkSpaceId}, res => {
+      this.result = this.$post("/project/list/related", {
-          let data = res.data;
+        userId: getCurrentUserId(),
-          if (data) {
+        workspaceId: realWorkSpaceId
-            const index = data.findIndex(d => d.id === getCurrentProjectID());
+      }, res => {
-            this.projects = data;
+        let data = res.data;
-            if (index !== -1) {
+        if (data) {
-              this.projectId = data[index].id;
+          const index = data.findIndex(d => d.id === getCurrentProjectID());
-              this.projectName = data[index].name;
+          this.projects = data;
-              this.changeProject(data[index]);
+          if (index !== -1) {
-            } else {
+            this.projectId = data[index].id;
-              this.projectId = data[0].id;
+            this.projectName = data[index].name;
-              this.projectName = data[0].name;
+            this.changeProject(data[index]);
-              this.changeProject(data[0]);
+          } 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();
+    changeProject(project) {
-      this.workspaceId = this.currentWorkSpaceId;
+      this.currentProject = project;
-      if(this.isAcrossSpace){
+      this.$emit('setProject', project.id);
-        this.getWorkSpaceList();
+      // 获取项目时刷新该项目模块
-      }
+      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 {
+/*.el-checkbox__label {*/
-  display: inline-block;
+/*  float: right;*/
-  padding-left: 10px;
+/*}*/
-  line-height: 19px;
-  font-size: 14px;
-  padding-right: 10px;
-}
 </style>