From c0b9e7dcb8b0a9f7f69cd1bef52390cf70d03206 Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Mon, 11 Jul 2022 18:30:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=80=9A=E7=94=A8=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE=E4=B8=AD=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=B6=E9=9C=80=E5=A2=9E=E5=8A=A0=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--user=郭雨琦
--bug=1008105
https://www.tapd.cn/55049933/prong/stories/view/1155049933001008105
---
 .../environment/ApiEnvironmentConfig.vue      | 348 ++++++++-------
 .../test/components/ApiEnvironmentConfig.vue  | 402 ++++++++++--------
 2 files changed, 405 insertions(+), 345 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/environment/ApiEnvironmentConfig.vue b/frontend/src/business/components/api/definition/components/environment/ApiEnvironmentConfig.vue
index 7d080771d6..69c026d336 100644
--- a/frontend/src/business/components/api/definition/components/environment/ApiEnvironmentConfig.vue
+++ b/frontend/src/business/components/api/definition/components/environment/ApiEnvironmentConfig.vue
@@ -1,183 +1,213 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
-             :visible.sync="visible" class="environment-dialog" width="60%"
-             @close="close" append-to-body ref="environmentConfig">
-    <el-container v-loading="result.loading">
-      <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')"
-                     :env-add-permission="['PROJECT_ENVIRONMENT:READ+CREATE']"
-                     :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
-                     :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
-      <environment-edit :if-create="ifCreate" :environment="currentEnvironment" ref="environmentEdit" @close="close" :is-read-only="isReadOnly"/>
-    </el-container>
-  </el-dialog>
+  <div>
+    <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
+               :visible.sync="visible" class="environment-dialog" width="60%"
+               @close="close" append-to-body destroy-on-close ref="environmentConfig">
+      <el-container v-loading="result.loading">
+        <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')"
+                       :env-add-permission="['PROJECT_ENVIRONMENT:READ+CREATE']"
+                       :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
+                       :delete-fuc="openDelEnv" @itemSelected="environmentSelected" ref="environmentItems"/>
+        <environment-edit :if-create="ifCreate" :environment="currentEnvironment" ref="environmentEdit" @close="close"
+                          :is-read-only="isReadOnly"/>
+      </el-container>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="delDialogVisible"
+      append-to-body
+      width="30%">
+      <span style="color: #de9d1c; font-size: 18px;padding-right: 5px"><i class="el-icon-warning"/></span><span
+      style="font-size: 18px">{{ $t('commons.confirm_delete') + currentEnvironment.name }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="delDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="delEnvironment">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </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";
-  import EnvironmentEdit from "./EnvironmentEdit";
-  import {deepClone, hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils";
-  import {Environment, parseEnvironment} from "../../model/EnvironmentModel";
+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";
+import EnvironmentEdit from "./EnvironmentEdit";
+import {hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils";
+import {Environment, parseEnvironment} from "../../model/EnvironmentModel";
 
-  export default {
-    name: "ApiEnvironmentConfig",
-    components: {
-      EnvironmentEdit,
-      MsAsideItem,
-      MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable
+export default {
+  name: "ApiEnvironmentConfig",
+  components: {
+    EnvironmentEdit,
+    MsAsideItem,
+    MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable
+  },
+  data() {
+    return {
+      result: {},
+      visible: false,
+      projectId: '',
+      environments: [],
+      currentEnvironment: new Environment(),
+      environmentOperators: [
+        {
+          icon: 'el-icon-document-copy',
+          func: this.copyEnvironment,
+          permissions: ['PROJECT_ENVIRONMENT:READ+COPY']
+        },
+        {
+          icon: 'el-icon-delete',
+          func: this.deleteEnvironment,
+          permissions: ['PROJECT_ENVIRONMENT:READ+DELETE']
+        }
+      ],
+      selectEnvironmentId: '',
+      ifCreate: false, //是否是创建环境
+      delDialogVisible: false,
+      currentIndex: -1
+    }
+  },
+  computed: {
+    isReadOnly() {
+      return !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT');
+    }
+  },
+  methods: {
+    open: function (projectId, envId) {
+      this.visible = true;
+      this.projectId = projectId;
+      this.selectEnvironmentId = envId;
+      this.getEnvironments();
+      listenGoBack(this.close);
     },
-    data() {
-      return {
-        result: {},
-        visible: false,
-        projectId: '',
-        environments: [],
-        currentEnvironment: new Environment(),
-        environmentOperators: [
-          {
-            icon: 'el-icon-document-copy',
-            func: this.copyEnvironment,
-            permissions: ['PROJECT_ENVIRONMENT:READ+COPY']
-          },
-          {
-            icon: 'el-icon-delete',
-            func: this.deleteEnvironment,
-            permissions: ['PROJECT_ENVIRONMENT:READ+DELETE']
-          }
-        ],
-        selectEnvironmentId: '',
-        ifCreate: false, //是否是创建环境
+    deleteEnvironment(environment, index) {
+      alert(this.delDialogVisible);
+      if (this.delDialogVisible === false) {
+        this.delDialogVisible = true;
+        return;
       }
-    },
-    computed: {
-      isReadOnly() {
-        return !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT');
-      }
-    },
-    methods: {
-      open: function (projectId, envId) {
-        this.visible = true;
-        this.projectId = projectId;
-        this.selectEnvironmentId = envId;
-        this.getEnvironments();
-        listenGoBack(this.close);
-      },
-      deleteEnvironment(environment, index) {
-        this.ifCreate = false;
-        if (environment.id) {
-          this.result = this.$get('/api/environment/delete/' + environment.id, () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.getEnvironments();
-          });
-        }
-        else {
-          this.environments.splice(index, 1);
-        }
-      },
-      copyEnvironment(environment) {
-        this.ifCreate = false;
-        this.currentEnvironment = environment;
-        if (!environment.id) {
-          this.$warning(this.$t('commons.please_save'));
-          return;
-        }
-        let newEnvironment = {};
-        newEnvironment = new Environment(environment);
-        newEnvironment.id = null;
-        newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
-        if (!this.validateEnvironment(newEnvironment)) {
-          return;
-        }
-        this.$refs.environmentEdit._save(newEnvironment);
-        this.environments.push(newEnvironment);
-        this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
-      },
-      validateEnvironment(environment) {
-        if (!this.$refs.environmentEdit.validate()) {
-          this.$error(this.$t('commons.formatErr'));
-          return false;
-        }
-        return true;
-      },
-      getNoRepeatName(name) {
-        for (let i in this.environments) {
-          if (this.environments[i].name === name) {
-            return this.getNoRepeatName(name + ' copy');
-          }
-        }
-        return name;
-      },
-      addEnvironment() {
-        this.ifCreate = true;
-        let newEnvironment = new Environment({
-          projectId: this.projectId
+      this.ifCreate = false;
+      if (environment.id) {
+        this.result = this.$get('/api/environment/delete/' + environment.id, () => {
+          this.$success(this.$t('commons.delete_success'));
+          this.getEnvironments();
+          this.delDialogVisible = false;
         });
-        this.environments.push(newEnvironment);
-        this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
-      },
-      environmentSelected(environment) {
-        this.getEnvironment(environment);
-      },
-      getEnvironments() {
-        if (this.projectId) {
-          this.result = this.$get('/api/environment/list/' + this.projectId, response => {
-            this.environments = response.data;
-            if (this.environments.length > 0) {
-              if (this.selectEnvironmentId) {
-                const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
-                if (index !== -1) {
-                  this.$refs.environmentItems.itemSelected(index, this.environments[index]);
-                } else {
-                  this.$refs.environmentItems.itemSelected(0, this.environments[0]);
-                }
+      } else {
+        this.environments.splice(index, 1);
+        this.delDialogVisible = false;
+      }
+    },
+    copyEnvironment(environment) {
+      this.ifCreate = false;
+      this.currentEnvironment = environment;
+      if (!environment.id) {
+        this.$warning(this.$t('commons.please_save'));
+        return;
+      }
+      let newEnvironment = {};
+      newEnvironment = new Environment(environment);
+      newEnvironment.id = null;
+      newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
+      if (!this.validateEnvironment(newEnvironment)) {
+        return;
+      }
+      this.$refs.environmentEdit._save(newEnvironment);
+      this.environments.push(newEnvironment);
+      this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
+    },
+    validateEnvironment(environment) {
+      if (!this.$refs.environmentEdit.validate()) {
+        this.$error(this.$t('commons.formatErr'));
+        return false;
+      }
+      return true;
+    },
+    getNoRepeatName(name) {
+      for (let i in this.environments) {
+        if (this.environments[i].name === name) {
+          return this.getNoRepeatName(name + ' copy');
+        }
+      }
+      return name;
+    },
+    addEnvironment() {
+      this.ifCreate = true;
+      let newEnvironment = new Environment({
+        projectId: this.projectId
+      });
+      this.environments.push(newEnvironment);
+      this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
+    },
+    environmentSelected(environment) {
+      this.getEnvironment(environment);
+    },
+    getEnvironments() {
+      if (this.projectId) {
+        this.result = this.$get('/api/environment/list/' + this.projectId, response => {
+          this.environments = response.data;
+          if (this.environments.length > 0) {
+            if (this.selectEnvironmentId) {
+              const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
+              if (index !== -1) {
+                this.$refs.environmentItems.itemSelected(index, this.environments[index]);
               } else {
                 this.$refs.environmentItems.itemSelected(0, this.environments[0]);
               }
             } else {
-              let item = new Environment({
-                projectId: this.projectId
-              });
-              this.environments.push(item);
-              this.$refs.environmentItems.itemSelected(0, item);
+              this.$refs.environmentItems.itemSelected(0, this.environments[0]);
             }
-          });
-        }
-      },
-      getEnvironment(environment) {
-        parseEnvironment(environment);
-        this.currentEnvironment = environment;
-        if(this.currentEnvironment.name){
-          this.ifCreate = false;
-        }
-      },
-      close() {
-        this.$emit('close');
-        this.visible = false;
-        this.$refs.environmentEdit.clearValidate();
-        removeGoBackListener(this.close);
+          } else {
+            let item = new Environment({
+              projectId: this.projectId
+            });
+            this.environments.push(item);
+            this.$refs.environmentItems.itemSelected(0, item);
+          }
+        });
       }
+    },
+    getEnvironment(environment) {
+      parseEnvironment(environment);
+      this.currentEnvironment = environment;
+      if (this.currentEnvironment.name) {
+        this.ifCreate = false;
+      }
+    },
+    close() {
+      this.$emit('close');
+      this.visible = false;
+      this.$refs.environmentEdit.clearValidate();
+      removeGoBackListener(this.close);
+    },
+    openDelEnv(environment, index) {
+      this.currentEnvironment = environment;
+      this.currentIndex = index;
+      this.delDialogVisible = true
+    },
+    delEnvironment() {
+      this.deleteEnvironment(this.currentEnvironment, this.currentIndex)
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .environment-dialog >>> .el-dialog__body {
-    padding-top: 20px;
-  }
+.environment-dialog >>> .el-dialog__body {
+  padding-top: 20px;
+}
 
-  .el-container {
-    position: relative;
-  }
+.el-container {
+  position: relative;
+}
 
-  .ms-aside-container {
-    height: 100%;
-    position: absolute;
-  }
+.ms-aside-container {
+  height: 100%;
+  position: absolute;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue b/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
index d3d4956a6a..4b07c321cf 100644
--- a/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
@@ -1,211 +1,241 @@
 <template>
-  <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">
-    <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"
-                     :env-add-permission="ENV_CREATE"
-                     :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
-      <environment-edit :if-create="ifCreate" :project-id="projectId" :environment="currentEnvironment" ref="environmentEdit" :is-read-only="isReadOnly"
-                        @confirm="save"
-                        @close="close"/>
-    </el-container>
-  </el-dialog>
+  <div>
+    <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
+               :visible.sync="visible" class="environment-dialog" width="60%"
+               @close="close" append-to-body destroy-on-close ref="environmentConfig">
+      <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"
+                       :env-add-permission="ENV_CREATE"
+                       :delete-fuc="openDelEnv" @itemSelected="environmentSelected" ref="environmentItems"/>
+        <environment-edit :if-create="ifCreate" :project-id="projectId" :environment="currentEnvironment"
+                          ref="environmentEdit" :is-read-only="isReadOnly"
+                          @confirm="save"
+                          @close="close"/>
+      </el-container>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="delDialogVisible"
+      append-to-body
+      width="30%">
+      <span style="color: #de9d1c; font-size: 18px;padding-right: 5px"><i class="el-icon-warning"/></span><span
+      style="font-size: 18px">{{ $t('commons.confirm_delete') + currentEnvironment.name }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="delDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="delEnvironment">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </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";
-  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";
+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";
+import EnvironmentEdit from "./environment/EnvironmentEdit";
+import {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, MsDialogHeader
-    },
-    data() {
-      return {
-        result: {},
-        visible: false,
-        projectId: '',
-        environments: [],
-        currentEnvironment: new Environment(),
-        environmentOperators: [
-          {
-            icon: 'el-icon-document-copy',
-            func: this.copyEnvironment,
-            permissions: this.type === 'project' ?
-              ['PROJECT_ENVIRONMENT:READ+COPY'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY']
-          },
-          {
-            icon: 'el-icon-delete',
-            func: this.deleteEnvironment,
-            permissions: this.type === 'project' ?
-              ['PROJECT_ENVIRONMENT:READ+DELETE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE']
-          }
-        ],
-        selectEnvironmentId: '',
-        ifCreate: false, //是否是创建环境
+export default {
+  name: "ApiEnvironmentConfig",
+  components: {
+    EnvironmentEdit,
+    MsAsideItem,
+    MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable, MsDialogHeader
+  },
+  data() {
+    return {
+      result: {},
+      visible: false,
+      projectId: '',
+      environments: [],
+      currentEnvironment: new Environment(),
+      environmentOperators: [
+        {
+          icon: 'el-icon-document-copy',
+          func: this.copyEnvironment,
+          permissions: this.type === 'project' ?
+            ['PROJECT_ENVIRONMENT:READ+COPY'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY']
+        },
+        {
+          icon: 'el-icon-delete',
+          func: this.deleteEnvironment,
+          permissions: this.type === 'project' ?
+            ['PROJECT_ENVIRONMENT:READ+DELETE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE']
+        }
+      ],
+      selectEnvironmentId: '',
+      ifCreate: false, //是否是创建环境
+      delDialogVisible: false,
+      currentIndex: -1
+    }
+  },
+  props: {
+    type: {
+      type: String,
+      default() {
+        return "project";
       }
+    }
+  },
+  computed: {
+    ENV_CREATE() {
+      return this.type === 'project' ?
+        ['PROJECT_ENVIRONMENT:READ+CREATE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE'];
     },
-    props: {
-      type: {
-        type: String,
-        default() {
-          return "project";
-        }
+    ENV_EDIT() {
+      return this.type === 'project' ?
+        ['PROJECT_ENVIRONMENT:READ+EDIT'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT'];
+    },
+    isReadOnly() {
+      // 区分 工作空间下的环境相关菜单/项目下的环境相关菜单
+      return this.type === 'project' ?
+        !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT') : !hasPermission('WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT');
+    }
+  },
+  methods: {
+    open: function (projectId, envId) {
+      this.visible = true;
+      this.projectId = projectId;
+      this.selectEnvironmentId = envId;
+      this.getEnvironments();
+      listenGoBack(this.close);
+    },
+    deleteEnvironment(environment, index) {
+      if (this.delDialogVisible === false) {
+        this.delDialogVisible = true;
+        return;
       }
-    },
-    computed: {
-      ENV_CREATE() {
-        return this.type === 'project' ?
-          ['PROJECT_ENVIRONMENT:READ+CREATE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE'];
-      },
-      ENV_EDIT() {
-        return this.type === 'project' ?
-          ['PROJECT_ENVIRONMENT:READ+EDIT'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT'];
-      },
-      isReadOnly() {
-        // 区分 工作空间下的环境相关菜单/项目下的环境相关菜单
-        return this.type === 'project' ?
-          !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT') : !hasPermission('WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT');
-      }
-    },
-    methods: {
-      open: function (projectId, envId) {
-        this.visible = true;
-        this.projectId = projectId;
-        this.selectEnvironmentId = envId;
-        this.getEnvironments();
-        listenGoBack(this.close);
-      },
-      deleteEnvironment(environment, index) {
-        this.ifCreate = false;
-        if (environment.id) {
-          this.result = this.$get('/api/environment/delete/' + environment.id, () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.getEnvironments();
-          });
-        }
-        else {
-          this.environments.splice(index, 1);
-        }
-      },
-      copyEnvironment(environment) {
-        this.ifCreate = false;
-        //点击复制的时候先选择改行，否则会出现解析错误
-        this.environmentSelected(environment);
-        this.currentEnvironment = environment;
-        if (!environment.id) {
-          this.$warning(this.$t('commons.please_save'));
-          return;
-        }
-        let newEnvironment = {};
-        newEnvironment = new Environment(environment);
-        newEnvironment.id = null;
-        newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
-        if (!this.validateEnvironment(newEnvironment)) {
-          return;
-        }
-        this.$refs.environmentEdit._save(newEnvironment);
-        this.environments.push(newEnvironment);
-        this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
-      },
-      validateEnvironment(environment) {
-        if (!this.$refs.environmentEdit.validate()) {
-          this.$error(this.$t('commons.formatErr'));
-          return false;
-        }
-        return true;
-      },
-      getNoRepeatName(name) {
-        for (let i in this.environments) {
-          if (this.environments[i].name === name) {
-            return this.getNoRepeatName(name + ' copy');
-          }
-        }
-        return name;
-      },
-      addEnvironment() {
-        this.ifCreate = true;
-        let newEnvironment = new Environment({
-          projectId: this.projectId
+      this.ifCreate = false;
+      if (environment.id) {
+        this.result = this.$get('/api/environment/delete/' + environment.id, () => {
+          this.$success(this.$t('commons.delete_success'));
+          this.getEnvironments();
+          this.delDialogVisible = false;
         });
-        this.environments.push(newEnvironment);
-        this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
-      },
-      environmentSelected(environment) {
-        this.getEnvironment(environment);
-      },
-      getEnvironments() {
-        if (this.projectId) {
-          this.result = this.$get('/api/environment/list/' + this.projectId, response => {
-            this.environments = response.data;
-            if (this.environments.length > 0) {
-              if (this.selectEnvironmentId) {
-                const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
-                if (index !== -1) {
-                  this.$refs.environmentItems.itemSelected(index, this.environments[index]);
-                } else {
-                  this.$refs.environmentItems.itemSelected(0, this.environments[0]);
-                }
+      } else {
+        this.environments.splice(index, 1);
+        this.delDialogVisible = false;
+      }
+
+    },
+    copyEnvironment(environment) {
+      this.ifCreate = false;
+      //点击复制的时候先选择改行，否则会出现解析错误
+      this.environmentSelected(environment);
+      this.currentEnvironment = environment;
+      if (!environment.id) {
+        this.$warning(this.$t('commons.please_save'));
+        return;
+      }
+      let newEnvironment = {};
+      newEnvironment = new Environment(environment);
+      newEnvironment.id = null;
+      newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
+      if (!this.validateEnvironment(newEnvironment)) {
+        return;
+      }
+      this.$refs.environmentEdit._save(newEnvironment);
+      this.environments.push(newEnvironment);
+      this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
+    },
+    validateEnvironment(environment) {
+      if (!this.$refs.environmentEdit.validate()) {
+        this.$error(this.$t('commons.formatErr'));
+        return false;
+      }
+      return true;
+    },
+    getNoRepeatName(name) {
+      for (let i in this.environments) {
+        if (this.environments[i].name === name) {
+          return this.getNoRepeatName(name + ' copy');
+        }
+      }
+      return name;
+    },
+    addEnvironment() {
+      this.ifCreate = true;
+      let newEnvironment = new Environment({
+        projectId: this.projectId
+      });
+      this.environments.push(newEnvironment);
+      this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
+    },
+    environmentSelected(environment) {
+      this.getEnvironment(environment);
+    },
+    getEnvironments() {
+      if (this.projectId) {
+        this.result = this.$get('/api/environment/list/' + this.projectId, response => {
+          this.environments = response.data;
+          if (this.environments.length > 0) {
+            if (this.selectEnvironmentId) {
+              const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
+              if (index !== -1) {
+                this.$refs.environmentItems.itemSelected(index, this.environments[index]);
               } else {
                 this.$refs.environmentItems.itemSelected(0, this.environments[0]);
               }
             } else {
-              let item = new Environment({
-                projectId: this.projectId
-              });
-              this.environments.push(item);
-              this.$refs.environmentItems.itemSelected(0, item);
+              this.$refs.environmentItems.itemSelected(0, this.environments[0]);
             }
-          });
-        }
-      },
-      getEnvironment(environment) {
-        parseEnvironment(environment);
-        this.currentEnvironment = environment;
-        if(this.currentEnvironment.name){
-          this.ifCreate = false;
-        }
-      },
-      save(){
-        this.$refs.environmentEdit.save();
-      },
-      close() {
-        this.$emit('close');
-        this.visible = false;
-        this.$refs.environmentEdit.clearValidate();
-        removeGoBackListener(this.close);
+          } else {
+            let item = new Environment({
+              projectId: this.projectId
+            });
+            this.environments.push(item);
+            this.$refs.environmentItems.itemSelected(0, item);
+          }
+        });
       }
+    },
+    getEnvironment(environment) {
+      parseEnvironment(environment);
+      this.currentEnvironment = environment;
+      if (this.currentEnvironment.name) {
+        this.ifCreate = false;
+      }
+    },
+    save() {
+      this.$refs.environmentEdit.save();
+    },
+    close() {
+      this.$emit('close');
+      this.visible = false;
+      this.$refs.environmentEdit.clearValidate();
+      removeGoBackListener(this.close);
+    },
+    openDelEnv(environment, index) {
+      this.currentEnvironment = environment;
+      this.currentIndex = index;
+      this.delDialogVisible = true
+    },
+    delEnvironment() {
+      this.deleteEnvironment(this.currentEnvironment, this.currentIndex)
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .environment-dialog >>> .el-dialog__body {
-    padding-top: 20px;
-  }
+.environment-dialog >>> .el-dialog__body {
+  padding-top: 20px;
+}
 
-  .el-container {
-    position: relative;
-  }
+.el-container {
+  position: relative;
+}
 
-  .ms-aside-container {
-    height: 100%;
-    position: absolute;
-  }
+.ms-aside-container {
+  height: 100%;
+  position: absolute;
+}
 
 </style>