refactor(通用功能): 优化删除环境的提示信息

--bug=1025998 --user=郭雨琦
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001025998

framework/sdk-parent/frontend/src/components/environment/ApiEnvironmentConfig.vue

@@ -15,21 +15,6 @@
         </environment-edit>
       </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">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="delEnvironment">{{ $t('commons.confirm') }}</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
@@ -78,7 +63,6 @@ export default {
       ],
       selectEnvironmentId: '',
       ifCreate: false, //是否是创建环境
-      delDialogVisible: false,
       currentIndex: -1,
       isCopy: false
     }
@@ -134,7 +118,7 @@ export default {
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
-      this.$alert(this.$t('commons.confirm_delete') + environment.name, '', {
+      this.$alert(this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), '', {
         confirmButtonText: this.$t('commons.confirm'),
         cancelButtonText: this.$t('commons.cancel'),
         callback: (action) => {
@@ -143,11 +127,9 @@ export default {
               this.result = delApiEnvironment(environment.id).then(() => {
                 this.$success(this.$t('commons.delete_success'));
                 this.getEnvironments();
-                this.delDialogVisible = false;
               });
             } else {
               this.environments.splice(index, 1);
-              this.delDialogVisible = false;
             }
           }
         }
@@ -258,7 +240,6 @@ export default {
     openDelEnv(environment, index) {
       this.currentEnvironment = environment;
       this.currentIndex = index;
-      this.delDialogVisible = true
     },
     delEnvironment() {
       this.deleteEnvironment(this.currentEnvironment, this.currentIndex)

framework/sdk-parent/frontend/src/i18n/lang/en-US.js

@@ -930,6 +930,7 @@ const message = {
     info: "Info",
     member: "Member",
     env: "Environment",
+    del_env_tip: "may cause tests execution using this environment to fail",
     file_manage: "File",
     my_file: "My file",
     all_file: "All files",

framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js

@@ -908,6 +908,7 @@ const message = {
     info: "项目信息",
     member: "项目成员",
     env: "项目环境",
+    del_env_tip: "可能导致使用该环境的测试执行失败",
     file_manage: "文件管理",
     my_file: "我的文件",
     all_file: "所有文件",

framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js

@@ -907,6 +907,7 @@ const message = {
     info: "項目信息",
     member: "項目成員",
     env: "項目環境",
+    del_env_tip: "可能導致使用該環境的測試執行失敗",
     file_manage: "文件管理",
     my_file: "我的文件",
     all_file: "所有文件",

project-management/frontend/src/business/menu/environment/EnvironmentList.vue

@@ -141,7 +141,7 @@ import EnvironmentEdit from "./components/EnvironmentEdit";
 import MsAsideItem from "metersphere-frontend/src/components/MsAsideItem";
 import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import ProjectSwitch from "metersphere-frontend/src/components/head/ProjectSwitch";
-import {downloadFile, operationConfirm} from "metersphere-frontend/src/utils";
+import {downloadFile} from "metersphere-frontend/src/utils";
 import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
 import EnvironmentImport from "./EnvironmentImport";
 import MsMainContainer from "metersphere-frontend/src/components/MsMainContainer";
@@ -149,6 +149,7 @@ import MsContainer from "metersphere-frontend/src/components/MsContainer";
 import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
 import {listAllProject} from "../../../api/project";
 import {delEnvironmentById, getEnvironmentPages} from "../../../api/environment";
+import i18n from "@/i18n";
 
 export default {
   name: "EnvironmentList",
@@ -322,7 +323,7 @@ export default {
     },
     deleteEnv(environment) {
       if (environment.id) {
-        operationConfirm(this, this.$t('commons.confirm_delete') + environment.name, () => {
+        this.operationConfirm(this, this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), () => {
           this.loading = delEnvironmentById(environment.id).then(() => {
             this.$success(this.$t('commons.delete_success'));
             this.list();
@@ -332,6 +333,25 @@ export default {
         })
       }
     },
+    operationConfirm(v, tip, success, cancel) {
+      return v
+        .$confirm(tip, "", {
+          confirmButtonText: i18n.t("commons.confirm"),
+          cancelButtonText: i18n.t("commons.cancel"),
+          type: "warning",
+          center: false,
+        })
+        .then(() => {
+          if (success) {
+            success();
+          }
+        })
+        .catch(() => {
+          if (cancel) {
+            cancel();
+          }
+        });
+    },
     getNoRepeatName(name) {
       for (let i in this.environments) {
         if (this.environments[i].name === name) {

system-setting/frontend/src/business/workspace/environment/EnvironmentList.vue

@@ -138,7 +138,7 @@ import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOp
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import {Environment, parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel";
 import ProjectSwitch from "metersphere-frontend/src/components/head/ProjectSwitch";
-import {downloadFile, operationConfirm, strMapToObj} from "metersphere-frontend/src/utils";
+import {downloadFile, strMapToObj} from "metersphere-frontend/src/utils";
 import EnvironmentImport from "./EnvironmentImport";
 import ShowMoreBtn from "metersphere-frontend/src/components/table/ShowMoreBtn";
 import {
@@ -152,6 +152,7 @@ import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
 import EnvironmentEdit from "metersphere-frontend/src/components/environment/EnvironmentEdit"
 import {listAllProject} from "../../../api/project";
 import {batchAddEnvGroup, delEnvironmentById, getEnvironmentPages} from "../../../api/environment";
+import i18n from "@/i18n";
 
 
 export default {
@@ -350,7 +351,7 @@ export default {
     },
     deleteEnv(environment) {
       if (environment.id) {
-        operationConfirm(this, this.$t('commons.confirm_delete') + environment.name, () => {
+        this.operationConfirm(this, this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), () => {
           this.loading = delEnvironmentById(environment.id).then(() => {
             this.$success(this.$t('commons.delete_success'));
             this.list();
@@ -360,6 +361,25 @@ export default {
         })
       }
     },
+    operationConfirm(v, tip, success, cancel) {
+      return v
+        .$confirm(tip, "", {
+          confirmButtonText: i18n.t("commons.confirm"),
+          cancelButtonText: i18n.t("commons.cancel"),
+          type: "warning",
+          center: false,
+        })
+        .then(() => {
+          if (success) {
+            success();
+          }
+        })
+        .catch(() => {
+          if (cancel) {
+            cancel();
+          }
+        });
+    },
     getNoRepeatName(name) {
       for (let i in this.environments) {
         if (this.environments[i].name === name) {

workstation/frontend/src/business/module/api/ApiEnvironmentConfig.vue

@@ -10,17 +10,6 @@
                        :delete-fuc="openDelEnv" @itemSelected="environmentSelected" ref="environmentItems"/>
       </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>
 
@@ -68,8 +57,6 @@ export default {
         }
       ],
       selectEnvironmentId: '',
-      ifCreate: false, //是否是创建环境
-      delDialogVisible: false,
       currentIndex: -1
     }
   },
@@ -105,25 +92,24 @@ export default {
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
-      if (this.delDialogVisible === false) {
-        this.delDialogVisible = true;
-        return;
-      }
-      this.ifCreate = false;
-      if (environment.id) {
-        this.result = delApiEnvironment(environment.id).then(() => {
-          this.$success(this.$t('commons.delete_success'));
-          this.getEnvironments();
-          this.delDialogVisible = false;
-        });
-      } else {
-        this.environments.splice(index, 1);
-        this.delDialogVisible = false;
-      }
-
+      this.$alert(this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            if (environment.id) {
+              this.result = delApiEnvironment(environment.id).then(() => {
+                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;
@@ -188,9 +174,6 @@ export default {
     getEnvironment(environment) {
       parseEnvironment(environment);
       this.currentEnvironment = environment;
-      if (this.currentEnvironment.name) {
-        this.ifCreate = false;
-      }
     },
     save() {
       this.$refs.environmentEdit.save();
@@ -204,7 +187,6 @@ export default {
     openDelEnv(environment, index) {
       this.currentEnvironment = environment;
       this.currentIndex = index;
-      this.delDialogVisible = true
     },
     delEnvironment() {
       this.deleteEnvironment(this.currentEnvironment, this.currentIndex)

workstation/frontend/src/business/module/environment/ApiEnvironmentConfig.vue

@@ -10,17 +10,6 @@
                        :delete-fuc="openDelEnv" @itemSelected="environmentSelected" ref="environmentItems"/>
       </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>
 
@@ -64,8 +53,6 @@ export default {
         }
       ],
       selectEnvironmentId: '',
-      ifCreate: false, //是否是创建环境
-      delDialogVisible: false,
       currentIndex: -1,
       isCopy: false
     }
@@ -102,7 +89,7 @@ export default {
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
-      this.$alert(this.$t('commons.confirm_delete') + environment.name, '', {
+      this.$alert(this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), '', {
         confirmButtonText: this.$t('commons.confirm'),
         cancelButtonText: this.$t('commons.cancel'),
         callback: (action) => {
@@ -111,11 +98,9 @@ export default {
               this.result = delApiEnvironment(environment.id).then(() => {
                 this.$success(this.$t('commons.delete_success'));
                 this.getEnvironments();
-                this.delDialogVisible = false;
               });
             } else {
               this.environments.splice(index, 1);
-              this.delDialogVisible = false;
             }
           }
         }
@@ -123,7 +108,6 @@ export default {
 
     },
     copyEnvironment(environment) {
-      this.ifCreate = false;
       this.isCopy = true;
       //点击复制的时候先选择改行，否则会出现解析错误
       this.environmentSelected(environment);
@@ -190,9 +174,6 @@ export default {
     getEnvironment(environment) {
       parseEnvironment(environment);
       this.currentEnvironment = environment;
-      if (this.currentEnvironment.name) {
-        this.ifCreate = false;
-      }
     },
     save() {
       this.$refs.environmentEdit.save();
@@ -209,7 +190,6 @@ export default {
     openDelEnv(environment, index) {
       this.currentEnvironment = environment;
       this.currentIndex = index;
-      this.delDialogVisible = true
     },
     delEnvironment() {
       this.deleteEnvironment(this.currentEnvironment, this.currentIndex)