环境配置前端组件

frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog :title="'环境配置'" :visible.sync="visible" class="environment-dialog">
+    <el-container >
+      <ms-aside-item :title="'环境列表'" :data="environments" :add-fuc="addEnvironment" :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected"/>
+      <el-main>
+
+      </el-main>
+    </el-container>
+  </el-dialog>
+    
+</template>
+
+<script>
+    import MsApiCollapse from "./collapse/ApiCollapse";
+    import MsApiCollapseItem from "./collapse/ApiCollapseItem";
+    import draggable from 'vuedraggable';
+    import MsContainer from "../../../common/components/MsContainer";
+    import MsAsideContainer from "../../../common/components/MsAsideContainer";
+    import MsMainContainer from "../../../common/components/MsMainContainer";
+    import MsAsideItem from "../../../common/components/MsAsideItem";
+
+    export default {
+      name: "ApiEnvironmentConfig",
+      components: {
+        MsAsideItem,
+        MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable},
+      data() {
+        return {
+          visible:false,
+          environments: [{name: 'tesddd'}]
+        }
+      },
+      methods: {
+        open(project) {
+          this.visible = true
+        },
+        deleteEnvironment(environment) {
+          console.log(environment);
+          for (let i = 0; i < this.environments.length; i++) {
+            if (this.environments[i].name === environment.name) {
+              this.environments.splice(i, 1);
+              break;
+            }
+          }
+        },
+        addEnvironment() {
+          this.environments.push({name: '新建'});
+          console.log('add');
+        },
+        environmentSelected() {
+          console.log('select');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .environment-dialog >>> .el-dialog__body {
+    padding-top: 20px;
+  }
+
+  .ms-aside-container {
+    height: calc(100vh - 500px);
+  }
+
+</style>

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

@@ -1,6 +1,6 @@
 <template>
 
-  <el-aside class="ms-aside-container">
+  <el-aside :width="width" class="ms-aside-container">
     <slot></slot>
   </el-aside>
 
@@ -8,7 +8,13 @@
 
 <script>
     export default {
-      name: "MsAsideContainer"
+      name: "MsAsideContainer",
+      props: {
+        width: {
+          type: String,
+          default: '300px'
+        }
+      }
     }
 </script>
 

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

@@ -0,0 +1,104 @@
+<template>
+  <ms-aside-container :width="width">
+    <div class="title-bar">
+      <span class="title-left">{{title}}</span>
+      <span class="title-right">
+        <i class="el-icon-plus" @click="addFuc"/>
+      </span>
+    </div>
+
+    <div v-for="(item, index) in data" :key="index" class="item-bar" @click="itemSelected(index, item)" :class="{'item-selected' : index == selectIndex}">
+      <span class="item-left">{{item.name}}</span>
+      <span class="item-right">
+        <i class="el-icon-delete" @click="deleteFuc(item)"/>
+      </span>
+    </div>
+  </ms-aside-container>
+</template>
+
+<script>
+    import MsAsideContainer from "./MsAsideContainer";
+
+    export default {
+      name: "MsAsideItem",
+      components: {MsAsideContainer},
+      data() {
+        return {
+          selectIndex: -1
+        }
+      },
+      props: {
+        width: {
+          type: String,
+          default: '200px'
+        },
+        title: String,
+        data: Array,
+        deleteFuc: Function,
+        addFuc: Function,
+      },
+      methods: {
+        itemSelected(index, item) {
+          this.selectIndex = index;
+          this.$emit('itemSelected', item);
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .title-bar {
+    width: 100%;
+    background: #e9ebef;
+    height: 40px;
+    padding: 5px 10px;
+    box-sizing: border-box;
+  }
+
+  .title-bar span {
+    line-height: 30px;
+  }
+
+  .item-bar {
+    width: 100%;
+    background: #F9F9F9;
+    height: 35px;
+    padding: 5px 10px;
+    box-sizing: border-box;
+  }
+
+  .item-bar span {
+    line-height: 25px;
+  }
+
+  .title-right,.item-right {
+    float: right;
+  }
+
+  .item-right {
+    visibility: hidden;
+  }
+
+  .ms-aside-container {
+    padding: 0;
+  }
+
+  i:hover {
+    color: #409EFF;
+    font-size: large;
+  }
+
+  .item-bar:hover .item-right {
+    visibility: visible;
+  }
+
+  .item-selected {
+    background: #edf6fd;
+  }
+
+  .item-selected .item-right {
+    visibility: visible;
+  }
+
+</style>

frontend/src/business/components/project/MsProject.vue

@@ -29,8 +29,13 @@
             </template>
           </el-table-column>
           <el-table-column :label="$t('commons.operating')">
-            <template v-slot:default="scope">
-              <ms-table-operator :is-tester-permission="true" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)"/>
+            <template v-if="baseUrl == 'api'" v-slot:default="scope">
+              <ms-table-operator :is-tester-permission="true" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)">
+                <template v-slot:behind>
+                  <ms-table-operator-button :is-tester-permission="true" :tip="'环境配置'" icon="el-icon-setting"
+                                            type="info" @exec="openEnvironmentConfig(scope.row)"/>
+                </template>
+              </ms-table-operator>
             </template>
           </el-table-column>
         </el-table>
@@ -59,6 +64,8 @@
 
     <ms-delete-confirm :title="$t('project.delete')" @delete="_handleDelete" ref="deleteConfirm"/>
 
+    <api-environment-config ref="environmentConfig"/>
+
   </ms-container>
 </template>
 
@@ -74,10 +81,15 @@
   import MsMainContainer from "../common/components/MsMainContainer";
   import MsDeleteConfirm from "../common/components/MsDeleteConfirm";
   import {DEFAULT} from "../../../common/js/constants";
+  import MsTableOperatorButton from "../common/components/MsTableOperatorButton";
+  import ApiEnvironmentConfig from "../api/test/components/ApiEnvironmentConfig";
+
 
   export default {
     name: "MsProject",
     components: {
+      ApiEnvironmentConfig,
+      MsTableOperatorButton,
       MsDeleteConfirm,
       MsMainContainer,
       MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
@@ -227,6 +239,9 @@
         _sort(column, this.condition);
         this.list();
       },
+      openEnvironmentConfig(project) {
+        this.$refs.environmentConfig.open(project);
+      }
     }
   }
 </script>