refactor: 消息弹框样式优化

--bug=1015665 --user=陈建星【所有模块】接口case转性能测试弹框显示优化+其他弹框显示位置保持一致。 https://www.tapd.cn/55049933/s/1235320
2022-08-29 17:53:38 +08:00 · 2022-08-29 17:53:38 +08:00 · e85b61d7b7
parent 377ead64b5
commit e85b61d7b7
31 changed files with 54 additions and 50 deletions
--- a/frontend/src/business/components/api/definition/components/import/SwaggerTaskList.vue
+++ b/frontend/src/business/components/api/definition/components/import/SwaggerTaskList.vue
@ -85,7 +85,7 @@ export default {
        message = this.$t('api_test.home_page.running_task_list.confirm.open_title');
      }
      row.enable = !row.enable;
-      operationConfirm(this, message, () => {
+      operationConfirm(message, () => {
        row.enable = !row.enable
        this.updateTask(row);
      });
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@ -232,7 +232,7 @@ import MsTableColumn from "@/business/components/common/components/table/MsTable
 import MsBottomContainer from "../BottomContainer";
 import MsBatchEdit from "../basis/BatchEdit";
 import {API_METHOD_COLOUR, API_STATUS, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from "../../model/JsonData";
-import {downloadFile, getCurrentProjectID, hasLicense} from "@/common/js/utils";
+import {downloadFile, getCurrentProjectID, hasLicense, operationConfirm} from "@/common/js/utils";
 import {API_LIST} from '@/common/js/constants';
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
@ -930,13 +930,8 @@ export default {
          // 删除提供列表删除和全部版本删除
          this.$refs.apiDeleteConfirm.open(api, this.$t('api_test.definition.request.delete_confirm'));
        } else {
-          this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                this._handleDelete(api, false);
-              }
-            }
+          operationConfirm(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name, () => {
+            this._handleDelete(api, false);
          });
        }
      });
--- a/frontend/src/business/components/api/definition/components/mock/MockConfig.vue
+++ b/frontend/src/business/components/api/definition/components/mock/MockConfig.vue
@ -221,7 +221,7 @@ export default {
    },

    removeExpect(row) {
-      operationConfirm(this, this.$t('api_test.mock.delete_mock_expect'), () => {
+      operationConfirm(this.$t('api_test.mock.delete_mock_expect'), () => {
        let mockInfoId = row.mockConfigId;
        let selectUrl = "/mockConfig/deleteMockExpectConfig/" + row.id;
        this.$get(selectUrl, response => {
--- a/frontend/src/business/components/api/definition/components/mock/MockTab.vue
+++ b/frontend/src/business/components/api/definition/components/mock/MockTab.vue
@ -327,7 +327,7 @@ export default {
      });
    },
    removeExpect(row) {
-      operationConfirm(this, this.$t('api_test.mock.delete_mock_expect'), () => {
+      operationConfirm(this.$t('api_test.mock.delete_mock_expect'), () => {
        let mockInfoId = row.mockConfigId;
        let selectUrl = "/mockConfig/deleteMockExpectConfig/" + row.id;
        this.$get(selectUrl, response => {
--- a/frontend/src/business/components/api/definition/components/mock/TcpMockConfig.vue
+++ b/frontend/src/business/components/api/definition/components/mock/TcpMockConfig.vue
@ -225,7 +225,7 @@ export default {
      });
    },
    removeExpect(row) {
-      operationConfirm(this, this.$t('api_test.mock.delete_mock_expect'), () => {
+      operationConfirm(this.$t('api_test.mock.delete_mock_expect'), () => {
        let mockInfoId = row.mockConfigId;
        let selectUrl = "/mockConfig/deleteMockExpectConfig/" + row.id;
        this.$get(selectUrl, response => {
--- a/frontend/src/business/components/api/homepage/components/ApiRunningTaskList.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiRunningTaskList.vue
@ -135,7 +135,7 @@ export default {
    closeTaskConfirm(row) {
      let flag = row.taskStatus;
      row.taskStatus = !flag; //保持switch点击前的状态
-      operationConfirm(this, this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
+      operationConfirm(this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
        this.updateTask(row);
      });
    },
--- a/frontend/src/business/components/api/homepage/components/RunningTaskList.vue
+++ b/frontend/src/business/components/api/homepage/components/RunningTaskList.vue
@ -134,7 +134,7 @@ export default {
    closeTaskConfirm(row){
      let flag = row.taskStatus;
      row.taskStatus = !flag; //保持switch点击前的状态
-      operationConfirm(this, this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
+      operationConfirm(this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
        this.updateTask(row);
      });
    },
--- a/frontend/src/business/components/performance/report/PerformanceReportView.vue
+++ b/frontend/src/business/components/performance/report/PerformanceReportView.vue
@ -337,7 +337,7 @@ export default {
      this.dialogFormVisible = false;
    },
    rerun(testId) {
-      operationConfirm(this, this.$t('report.test_rerun_confirm'), () => {
+      operationConfirm(this.$t('report.test_rerun_confirm'), () => {
        this.result = this.$post('/performance/run', {id: testId, triggerMode: 'MANUAL'}, (response) => {
          this.reportId = response.data;
          this.$router.push({path: '/performance/report/view/' + this.reportId});
--- a/frontend/src/business/components/performance/test/components/ExistFiles.vue
+++ b/frontend/src/business/components/performance/test/components/ExistFiles.vue
@ -330,7 +330,7 @@ export default {
      this.currentRow = row;
    },
    handleDelete(row) {
-      operationConfirm(this, this.$t('project.file_delete_tip', [row.name]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [row.name]), () => {
        this.$get('/project/delete/file/' + row.id, response => {
          Message.success(this.$t('commons.delete_success'));
          this.getProjectFiles();
--- a/frontend/src/business/components/performance/test/components/ResourceFiles.vue
+++ b/frontend/src/business/components/performance/test/components/ResourceFiles.vue
@ -197,7 +197,7 @@ export default {
      this.currentRow = row;
    },
    handleDelete(row) {
-      operationConfirm(this, this.$t('project.file_delete_tip', [row.name]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [row.name]), () => {
        this.$get('/project/delete/file/' + row.id, response => {
          Message.success(this.$t('commons.delete_success'));
          this.getProjectFiles();
--- a/frontend/src/business/components/project/menu/EditProject.vue
+++ b/frontend/src/business/components/project/menu/EditProject.vue
@ -288,7 +288,7 @@ export default {
      this.$refs.deleteConfirm.open(project);
    },
    _handleDelete(project) {
-      operationConfirm(this, this.$t('project.delete_tip'), () => {
+      operationConfirm(this.$t('project.delete_tip'), () => {
        this.$get('/project/delete/' + project.id, () => {
          if (project.id === getCurrentProjectID()) {
            localStorage.removeItem(PROJECT_ID);
--- a/frontend/src/business/components/project/menu/EnvironmentList.vue
+++ b/frontend/src/business/components/project/menu/EnvironmentList.vue
@ -305,7 +305,7 @@ export default {
    },
    deleteEnv(environment) {
      if (environment.id) {
-        operationConfirm(this, this.$t('commons.confirm_delete') + environment.name, () => {
+        operationConfirm(this.$t('commons.confirm_delete') + environment.name, () => {
          this.result = this.$get('/api/environment/delete/' + environment.id, () => {
            this.$success(this.$t('commons.delete_success'));
            this.list();
--- a/frontend/src/business/components/project/menu/Member.vue
+++ b/frontend/src/business/components/project/menu/Member.vue
@ -164,7 +164,7 @@ export default {
      this.$set(this.form, 'groupIds', groupIds);
    },
    del(row) {
-      operationConfirm(this, this.$t('member.remove_member'), () => {
+      operationConfirm(this.$t('member.remove_member'), () => {
        if (row.id === getCurrentUserId()) {
          this.$warning(this.$t('group.unable_to_remove_current_member'));
          return;
--- a/frontend/src/business/components/project/menu/file/edit/EditFileMetadata.vue
+++ b/frontend/src/business/components/project/menu/file/edit/EditFileMetadata.vue
@ -209,7 +209,7 @@ export default {
      this.$emit("download", this.data);
    },
    deleteData() {
-      operationConfirm(this, this.$t('project.file_delete_tip', [this.data.name]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [this.data.name]), () => {
        this.close();
        this.data.confirm = true;
        this.$emit("delete", this.data);
--- a/frontend/src/business/components/project/menu/file/list/FileMetadataList.vue
+++ b/frontend/src/business/components/project/menu/file/list/FileMetadataList.vue
@ -369,7 +369,7 @@ export default {
    },

    handleDeleteBatch() {
-      operationConfirm(this, this.$t('project.file_delete_tip', [this.$refs.table.selectIds.length + " 条 "]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [this.$refs.table.selectIds.length + " 条 "]), () => {
        this.$post('/file/metadata/delete/batch', this.$refs.table.selectIds, () => {
          this.$refs.table.clear();
          this.$success(this.$t('commons.delete_success'));
@ -387,7 +387,7 @@ export default {
        });
        return;
      }
-      operationConfirm(this, this.$t('project.file_delete_tip', [row.name]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [row.name]), () => {
        this.$get('/file/metadata/delete/' + row.id, response => {
          this.$success(this.$t('commons.delete_success'));
          this.getProjectFiles();
--- a/frontend/src/business/components/project/menu/file/quote/QuoteFileList.vue
+++ b/frontend/src/business/components/project/menu/file/quote/QuoteFileList.vue
@ -260,7 +260,7 @@ export default {
    },

    handleDeleteBatch() {
-      operationConfirm(this, this.$t('project.file_delete_tip', [this.$refs.table.selectIds.length + " 条 "]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [this.$refs.table.selectIds.length + " 条 "]), () => {
        this.$post('/file/metadata/delete/batch', this.$refs.table.selectIds, () => {
          this.$refs.table.clear();
          this.$success(this.$t('commons.delete_success'));
@ -269,7 +269,7 @@ export default {
      });
    },
    handleDelete(row) {
-      operationConfirm(this, this.$t('project.file_delete_tip', [row.name]), () => {
+      operationConfirm(this.$t('project.file_delete_tip', [row.name]), () => {
        this.$get('/file/metadata/delete/' + row.id, response => {
          this.$success(this.$t('commons.delete_success'));
          this.getProjectFiles();
--- a/frontend/src/business/components/settings/personal/ApiKeys.vue
+++ b/frontend/src/business/components/settings/personal/ApiKeys.vue
@ -109,7 +109,7 @@ export default {
      )
    },
    deleteApiKey(row) {
-      operationConfirm(this, this.$t('user.apikey_delete_confirm'), () => {
+      operationConfirm(this.$t('user.apikey_delete_confirm'), () => {
        this.result = this.$get("/user/key/delete/" + row.id, response => {
          this.$success(this.$t('commons.delete_success'));
          this.search();
--- a/frontend/src/business/components/settings/plugin/PluginConfig.vue
+++ b/frontend/src/business/components/settings/plugin/PluginConfig.vue
@ -129,7 +129,7 @@ export default {
      this.$refs.scriptView.open(row.scriptId);
    },
    handleDelete(id) {
-      operationConfirm(this, this.$t('api_test.jar_config.delete_tip'), () => {
+      operationConfirm(this.$t('api_test.jar_config.delete_tip'), () => {
        this.result = this.$get("/plugin/delete/" + id, () => {
          this.$success(this.$t('commons.delete_success'));
          this.initPlugins();
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@ -345,7 +345,7 @@ export default {
      this.$refs.deleteConfirm.open(workspace);
    },
    _handleDelete(workspace) {
-      operationConfirm(this, this.$t('workspace.delete_confirm'), () => {
+      operationConfirm(this.$t('workspace.delete_confirm'), () => {
        this.$get('/workspace/special/delete/' + workspace.id, () => {
          Message.success(this.$t('commons.delete_success'));
          this.list();
@ -353,7 +353,7 @@ export default {
      });
    },
    delMember(row) {
-      operationConfirm(this, this.$t('member.remove_member'), () => {
+      operationConfirm(this.$t('member.remove_member'), () => {
        this.result = this.$get('/user/special/ws/member/delete/' + this.currentWorkspaceRow.id + '/' + encodeURIComponent(row.id), () => {
          this.$success(this.$t('commons.remove_success'));
          this.cellClick(this.currentWorkspaceRow);
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@ -465,7 +465,7 @@ export default {
      this.infoList = resources;
    },
    del(row) {
-      operationConfirm(this, this.$t('test_resource_pool.delete_prompt'), () => {
+      operationConfirm(this.$t('test_resource_pool.delete_prompt'), () => {
        this.result = this.$get(`/testresourcepool/delete/${row.id}`, () => {
          this.initTableData();
          this.$success(this.$t('commons.delete_success'));
@ -549,7 +549,7 @@ export default {
      if (row.status === 'INVALID') {
        this.checkHaveTestUsePool(row).then(() => {
          if (this.updatePool && this.updatePool.haveTestUsePool) {
-            operationConfirm(this, this.$t('test_resource_pool.update_prompt', [this.updatePool.testName]), () => {
+            operationConfirm(this.$t('test_resource_pool.update_prompt', [this.updatePool.testName]), () => {
              this.updatePoolStatus(row);
            }, () => {
              row.status = 'VALID';
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@ -303,7 +303,7 @@ export default {
      listenGoBack(this.handleClose);
    },
    del(row) {
-      operationConfirm(this, this.$t('user.delete_confirm'), () => {
+      operationConfirm(this.$t('user.delete_confirm'), () => {
        this.result = this.$get(this.deletePath + encodeURIComponent(row.id), () => {
          this.$success(this.$t('commons.delete_success'));
          this.search();
--- a/frontend/src/business/components/settings/system/group/GroupMember.vue
+++ b/frontend/src/business/components/settings/system/group/GroupMember.vue
@ -252,7 +252,7 @@ export default {
      });
    },
    removeMember(row) {
-      operationConfirm(this, this.$t('member.remove_member'), () => {
+      operationConfirm(this.$t('member.remove_member'), () => {
        if (this.initUserUrl === 'user/ws/current/member/list') {
          if (row.id === getCurrentUserId()) {
            this.$warning(this.$t('group.unable_to_remove_current_member'));
--- a/frontend/src/business/components/settings/workspace/MsProject.vue
+++ b/frontend/src/business/components/settings/workspace/MsProject.vue
@ -346,7 +346,7 @@ export default {
      this.$refs.deleteConfirm.open(project);
    },
    _handleDelete(project) {
-      operationConfirm(this, this.$t('project.delete_tip'), () => {
+      operationConfirm(this.$t('project.delete_tip'), () => {
        this.$get('/project/delete/' + project.id, () => {
          if (project.id === getCurrentProjectID()) {
            localStorage.removeItem(PROJECT_ID);
@ -458,7 +458,7 @@ export default {
      this.$set(this.form, 'groupIds', groupIds);
    },
    delMember(row) {
-      operationConfirm(this, this.$t('member.remove_member'), () => {
+      operationConfirm(this.$t('member.remove_member'), () => {
        this.result = this.$get('/user/project/member/delete/' + this.currentProjectId + '/' + encodeURIComponent(row.id), () => {
          this.$success(this.$t('commons.remove_success'));
          this.dialogSearch();
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@ -236,7 +236,7 @@ export default {
      removeGoBackListener(this.handleClose);
    },
    del(row) {
-      operationConfirm(this, this.$t('member.remove_member'), () => {
+      operationConfirm(this.$t('member.remove_member'), () => {
        this.result = this.$get('/user/ws/member/delete/' + getCurrentWorkspaceId() + '/' + encodeURIComponent(row.id), () => {
          this.$success(this.$t('commons.remove_success'));
          this.initTableData();
--- a/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
+++ b/frontend/src/business/components/settings/workspace/environment/EnvironmentList.vue
@ -339,7 +339,7 @@ export default {
    },
    deleteEnv(environment) {
      if (environment.id) {
-        operationConfirm(this, this.$t('commons.confirm_delete') + environment.name, () => {
+        operationConfirm(this.$t('commons.confirm_delete') + environment.name, () => {
          this.result = this.$get('/api/environment/delete/' + environment.id, () => {
            this.$success(this.$t('commons.delete_success'));
            this.list();
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@ -780,7 +780,7 @@ export default {
      });
    },
    handleDelete(testCase) {
-      operationConfirm(this, this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
+      operationConfirm(this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
        this._handleDelete(testCase);
      });
    },
@ -800,7 +800,7 @@ export default {
          // 删除提供列表删除和全部版本删除
          this.$refs.apiDeleteConfirm.open(testCase, this.$t('test_track.case.delete_confirm'));
        } else {
-          operationConfirm(this, this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
+          operationConfirm(this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
             this._handleDeleteVersion(testCase, false);
          });
        }
@ -815,7 +815,7 @@ export default {
      });
    },
    handleDeleteBatch() {
-      operationConfirm(this, this.$t('test_track.case.delete_confirm'), () => {
+      operationConfirm(this.$t('test_track.case.delete_confirm'), () => {
        let param = buildBatchParam(this, this.$refs.table.selectIds);
        this.$post('/test/case/batch/delete', param, () => {
          this.$refs.table.clear();
@ -836,7 +836,7 @@ export default {
      });
    },
    handleDeleteBatchToGc() {
-      operationConfirm(this, this.$t('test_track.case.delete_confirm'), () => {
+      operationConfirm(this.$t('test_track.case.delete_confirm'), () => {
        let param = buildBatchParam(this, this.$refs.table.selectIds);
        this.$post('/test/case/batch/deleteToGc', param, () => {
          this.$refs.table.clear();
--- a/frontend/src/business/components/track/case/components/public/PublicTestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/public/PublicTestCaseList.vue
@ -421,7 +421,7 @@ export default {
          // 删除提供列表删除和全部版本删除
          this.$refs.apiDeleteConfirm.open(testCase, this.$t('test_track.case.delete_confirm'));
        } else {
-          operationConfirm(this, this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
+          operationConfirm(this.$t('test_track.case.delete_confirm') + '\'' + testCase.name + '\'', () => {
            this._handleDeleteVersion(testCase, false);
          });
        }
@ -482,7 +482,7 @@ export default {
      this.$emit('refreshAll');
    },
    handleDeleteBatchToPublic() {
-      operationConfirm(this, this.$t('test_track.case.delete_confirm'), () => {
+      operationConfirm(this.$t('test_track.case.delete_confirm'), () => {
        let param = buildBatchParam(this, this.$refs.table.selectIds);
        this.$post('/test/case/batch/movePublic/deleteToGc', param, () => {
          this.$refs.table.clear();
--- a/frontend/src/business/components/track/home/components/RunningTaskList.vue
+++ b/frontend/src/business/components/track/home/components/RunningTaskList.vue
@ -132,7 +132,7 @@ export default {
    closeTaskConfirm(row){
      let flag = row.taskStatus;
      row.taskStatus = !flag; //保持switch点击前的状态
-      operationConfirm(this, this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
+      operationConfirm(this.$t('api_test.home_page.running_task_list.confirm.close_title'), () => {
        this.updateTask(row);
      });
    },
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@ -705,7 +705,7 @@ export default {
        message = this.$t('api_test.home_page.running_task_list.confirm.open_title');
      }

-      operationConfirm(this, message, () => {
+      operationConfirm(message, () => {
        this.result = this.$post('/test/plan/update/scheduleByEnable', param, response => {
          if (row.scheduleOpen) {
            row.scheduleStatus = 'OPEN'
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@ -320,3 +320,8 @@ textarea {
 .el-form-item__error {
  position: relative;
 }
+
+/* 消息提示框上移一点 */
+.el-message-box {
+  margin-bottom: 20%;
+}
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@ -13,6 +13,7 @@ import {jsPDF} from "jspdf";
 import JSEncrypt from 'jsencrypt';
 import i18n from "@/i18n/i18n";
 import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
+import {MessageBox} from "element-ui";

 export function hasRole(role) {
  let user = getCurrentUser();
@ -600,14 +601,17 @@ export function getTypeByFileName(filename) {
  return type.toUpperCase();
 }

-export function operationConfirm(v, tip, success, cancel) {
+let confirm = MessageBox.confirm;
+
+export function operationConfirm(tip, success, cancel) {
  if (tip[tip.length - 1] !== '?' && tip[tip.length - 1] !== '？') {
    tip += '?';
  }
- return v.$confirm(tip, '', {
-    confirmButtonText: v.$t('commons.confirm'),
-    cancelButtonText: v.$t('commons.cancel'),
-    type: 'warning'
+ return confirm(tip, '', {
+   confirmButtonText: i18n.t('commons.confirm'),
+   cancelButtonText: i18n.t('commons.cancel'),
+   type: 'warning',
+   center: false
  }).then(() => {
    if (success) {
      success();