feat(通用设置): 环境配置中环境删除时需增加提示信息

--user=郭雨琦
--bug=1008105
https://www.tapd.cn/55049933/prong/stories/view/1155049933001008105

frontend/src/business/components/api/definition/components/environment/ApiEnvironmentConfig.vue

@@ -1,15 +1,29 @@
 <template>
+  <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 ref="environmentConfig">
+               @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="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
-      <environment-edit :if-create="ifCreate" :environment="currentEnvironment" ref="environmentEdit" @close="close" :is-read-only="isReadOnly"/>
+                       :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>
@@ -21,7 +35,7 @@
 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 {hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import {Environment, parseEnvironment} from "../../model/EnvironmentModel";
 
 export default {
@@ -52,6 +66,8 @@
       ],
       selectEnvironmentId: '',
       ifCreate: false, //是否是创建环境
+      delDialogVisible: false,
+      currentIndex: -1
     }
   },
   computed: {
@@ -68,15 +84,21 @@
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
+      alert(this.delDialogVisible);
+      if (this.delDialogVisible === false) {
+        this.delDialogVisible = true;
+        return;
+      }
       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;
         });
-        }
-        else {
+      } else {
         this.environments.splice(index, 1);
+        this.delDialogVisible = false;
       }
     },
     copyEnvironment(environment) {
@@ -160,6 +182,14 @@
       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)
     }
   }
 }

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

@@ -1,17 +1,31 @@
 <template>
+  <div>
     <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
-             :visible.sync="visible" class="environment-dialog" width="80%" top="50px"
+               :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="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
-      <environment-edit :if-create="ifCreate" :project-id="projectId" :environment="currentEnvironment" ref="environmentEdit" :is-read-only="isReadOnly"
+                       :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>
@@ -23,7 +37,7 @@
 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 {hasPermission, listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
 import {Environment, parseEnvironment} from "../model/EnvironmentModel";
 import MsDialogHeader from "@/business/components/common/components/MsDialogHeader";
 
@@ -57,6 +71,8 @@
       ],
       selectEnvironmentId: '',
       ifCreate: false, //是否是创建环境
+      delDialogVisible: false,
+      currentIndex: -1
     }
   },
   props: {
@@ -91,16 +107,22 @@
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
+      if (this.delDialogVisible === false) {
+        this.delDialogVisible = true;
+        return;
+      }
       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;
         });
-        }
-        else {
+      } else {
         this.environments.splice(index, 1);
+        this.delDialogVisible = false;
       }
+
     },
     copyEnvironment(environment) {
       this.ifCreate = false;
@@ -188,6 +210,14 @@
       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)
     }
   }
 }