refactor(项目设置): 优化删除误报的提示

--bug=1019782 --user=王孝刚 【项目设置】删除误报提示优化
https://www.tapd.cn/55049933/s/1300816

project-management/frontend/src/business/menu/errorreportlibrary/components/base/ErrorReportLibraryList.vue

@@ -1,115 +1,161 @@
 <template>
   <div>
     <el-card class="table-card" v-loading="loading">
-      <ms-table-header :condition.sync="condition" @search="initTableData"
+      <ms-table-header
-                       style="margin-bottom: 10px"
+        :condition.sync="condition"
-                       v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+CREATE']"
+        @search="initTableData"
-                       @create="createErrorReport"
+        style="margin-bottom: 10px"
-                       :createTip="$t('error_report_library.option.create')">
+        v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+CREATE']"
+        @create="createErrorReport"
+        :createTip="$t('error_report_library.option.create')"
+      >
         <template v-slot:button>
-          <span style="margin-left: 10px;">{{$t("error_report_library.tips")}}</span>
+          <span style="margin-left: 10px">{{
+            $t("error_report_library.tips")
+          }}</span>
         </template>
       </ms-table-header>
 
       <ms-table
-          v-loading="loading"
+        v-loading="loading"
-          :data="tableData"
+        :data="tableData"
-          :condition="condition"
+        :condition="condition"
-          :page-size="page.pageSize"
+        :page-size="page.pageSize"
-          :total="page.total"
+        :total="page.total"
-          :batch-operators="buttons"
+        :batch-operators="buttons"
-          :screenHeight="screenHeight"
+        :screenHeight="screenHeight"
-          :remember-order="true"
+        :remember-order="true"
-          row-key="id"
+        row-key="id"
-          operator-width="190px"
+        operator-width="190px"
-          @callBackSelectAll="callBackSelectAll"
+        @callBackSelectAll="callBackSelectAll"
-          @callBackSelect="callBackSelect"
+        @callBackSelect="callBackSelect"
-          @refresh="initTableData"
+        @refresh="initTableData"
-          ref="caseTable"
+        ref="caseTable"
       >
+        <ms-table-column
+          min-width="300"
+          prop="errorCode"
+          :label="$t('error_report_library.option.error_code')"
+          :show-overflow-tooltip="true"
+        />
 
-        <ms-table-column min-width="300" prop="errorCode" :label="$t('error_report_library.option.error_code')"
+        <ms-table-column
-                         :show-overflow-tooltip="true"/>
+          prop="matchType"
-
+          :label="$t('error_report_library.option.match_type')"
-        <ms-table-column prop="matchType" :label="$t('error_report_library.option.match_type')">
+        >
           <template v-slot:default="scope">
-            <ms-tag v-if="scope.row.matchType == 'Text'" effect="plain"
+            <ms-tag
-                    :content="$t('error_report_library.match_type.text')"/>
+              v-if="scope.row.matchType == 'Text'"
+              effect="plain"
+              :content="$t('error_report_library.match_type.text')"
+            />
           </template>
         </ms-table-column>
 
-        <ms-table-column width="100" :label="$t('error_report_library.option.status')">
+        <ms-table-column
+          width="100"
+          :label="$t('error_report_library.option.status')"
+        >
           <template v-slot:default="scope">
             <div>
               <el-switch
-                  v-model="scope.row.status"
+                v-model="scope.row.status"
-                  class="captcha-img"
+                class="captcha-img"
-                  @change="changeStatus(scope.row)"
+                @change="changeStatus(scope.row)"
               ></el-switch>
             </div>
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="createTime"
+        <ms-table-column
-                         :label="$t('commons.create_time' )"
+          prop="createTime"
-                         show-overflow-tooltip>
+          :label="$t('commons.create_time')"
+          show-overflow-tooltip
+        >
           <template v-slot:default="scope">
             <span>{{ scope.row.createTime | datetimeFormat }}</span>
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="updateTime"
+        <ms-table-column
-                         :label="$t('commons.update_time' )"
+          prop="updateTime"
-                         show-overflow-tooltip>
+          :label="$t('commons.update_time')"
+          show-overflow-tooltip
+        >
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | datetimeFormat }}</span>
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="createUser" :label="$t('commons.create_user')" show-overflow-tooltip/>
+        <ms-table-column
-        <ms-table-column prop="description" :label="$t('commons.description')" show-overflow-tooltip/>
+          prop="createUser"
+          :label="$t('commons.create_user')"
+          show-overflow-tooltip
+        />
+        <ms-table-column
+          prop="description"
+          :label="$t('commons.description')"
+          show-overflow-tooltip
+        />
 
         <ms-table-column min-width="150" :label="$t('commons.operating')">
           <template v-slot:default="scope">
             <div>
-              <ms-table-operator-button :tip="$t('commons.edit')" icon="el-icon-edit"
+              <ms-table-operator-button
-                                        :disabled="scope.row.status === 'SENDED'"
+                :tip="$t('commons.edit')"
-                                        v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+EDIT']"
+                icon="el-icon-edit"
-                                        @exec="editErrorReport(scope.row)"/>
+                :disabled="scope.row.status === 'SENDED'"
-              <ms-table-operator-button type="danger"
+                v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+EDIT']"
-                                        @exec="deleteReport(scope.row)"
+                @exec="editErrorReport(scope.row)"
-                                        v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+DELETE']"
+              />
-                                        :tip="$t('commons.delete')" icon="el-icon-delete"/>
+              <ms-table-operator-button
+                type="danger"
+                @exec="deleteReport(scope.row)"
+                v-permission="['PROJECT_ERROR_REPORT_LIBRARY:READ+DELETE']"
+                :tip="$t('commons.delete')"
+                icon="el-icon-delete"
+              />
             </div>
           </template>
         </ms-table-column>
       </ms-table>
-      <ms-table-pagination :change="initTableData" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize"
+      <ms-table-pagination
-                           :total="page.total"/>
+        :change="initTableData"
+        :current-page.sync="page.currentPage"
+        :page-size.sync="page.pageSize"
+        :total="page.total"
+      />
     </el-card>
   </div>
 </template>
 <script>
-import {getPageInfo} from "metersphere-frontend/src/utils/tableUtils";
+import { getPageInfo } from "metersphere-frontend/src/utils/tableUtils";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
 import MsTable from "metersphere-frontend/src/components/table/MsTable";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
 import ShowMoreBtn from "metersphere-frontend/src/components/table/ShowMoreBtn";
 import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
-import {hasPermission} from "metersphere-frontend/src/utils/permission";
+import { hasPermission } from "metersphere-frontend/src/utils/permission";
 import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOperatorButton";
 import MsTag from "metersphere-frontend/src/components/MsTag";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import {
   deleteErrorReportLibrary,
   getErrorReportLibraryById,
-  getErrorReportLibraryPages, modifyErrorReportLibrary
+  getErrorReportLibraryPages,
+  modifyErrorReportLibrary,
 } from "../../../../../api/error-report-library";
-
+import { operationConfirm } from "metersphere-frontend/src/utils";
 export default {
   name: "ProjectReportList",
   components: {
-    MsTable, MsTableColumn, ShowMoreBtn, MsTableHeader, MsTableOperatorButton, MsTag, MsTablePagination
+    MsTable,
+    MsTableColumn,
+    ShowMoreBtn,
+    MsTableHeader,
+    MsTableOperatorButton,
+    MsTag,
+    MsTablePagination,
   },
   data() {
     return {
@@ -118,29 +164,31 @@ export default {
       page: getPageInfo(),
       condition: {
         filters: {},
-        orders: [{name: "create_time", type: "desc"}]
+        orders: [{ name: "create_time", type: "desc" }],
       },
       tableData: [],
-      buttons: [{
+      buttons: [
-        name: this.$t('api_test.definition.request.batch_delete'),
+        {
-        handleClick: this.handleBatchDelete,
+          name: this.$t("api_test.definition.request.batch_delete"),
-        permissions: ['PROJECT_ERROR_REPORT_LIBRARY:READ+BATCH_DELETE']
+          handleClick: this.handleBatchDelete,
-      }],
+          permissions: ["PROJECT_ERROR_REPORT_LIBRARY:READ+BATCH_DELETE"],
+        },
+      ],
       selectNodeIds: [],
-      screenHeight: 'calc(100vh - 150px)',//屏幕高度
+      screenHeight: "calc(100vh - 150px)", //屏幕高度
       selectRows: new Set(),
       selectDataCounts: 0,
-    }
+    };
   },
   created() {
     this.initTableData();
   },
   methods: {
-    callBackSelectAll(selections){
+    callBackSelectAll(selections) {
-      this.selectNodeIds = Array.from(selections).map(o => o.id);
+      this.selectNodeIds = Array.from(selections).map((o) => o.id);
     },
-    callBackSelect(selections){
+    callBackSelect(selections) {
-      this.selectNodeIds = Array.from(selections).map(o => o.id);
+      this.selectNodeIds = Array.from(selections).map((o) => o.id);
     },
     initTableData() {
       if (!getCurrentProjectID()) {
@@ -149,53 +197,57 @@ export default {
       this.selectDataCounts = 0;
       this.selectRows = new Set();
       this.condition.projectId = getCurrentProjectID();
-      let selectParam = {"condition":this.condition};
+      let selectParam = { condition: this.condition };
-      if(this.condition.name){
+      if (this.condition.name) {
         selectParam.errorCode = this.condition.name;
       }
-      this.loading = getErrorReportLibraryPages(this.page.currentPage, this.page.pageSize, selectParam)
+      this.loading = getErrorReportLibraryPages(
-        .then(response => {
+        this.page.currentPage,
-          let data = response.data;
+        this.page.pageSize,
-          this.page.total = data.itemCount;
+        selectParam
-          this.tableData = data.listObject;
+      ).then((response) => {
-        });
+        let data = response.data;
+        this.page.total = data.itemCount;
+        this.tableData = data.listObject;
+      });
     },
     createErrorReport() {
       this.$emit("createErrorReport");
     },
     deleteReport(row) {
-      this.$alert(this.$t('commons.confirm') + this.$t('commons.delete') + row.errorCode + "？", '', {
+      operationConfirm(
-        confirmButtonText: this.$t('commons.confirm'),
+        this,
-        callback: (action) => {
+        this.$t("commons.confirm") +
-          if (action === 'confirm') {
+          this.$t("commons.delete") +
-            let param = {id: row.id, projectId: getCurrentProjectID()};
+          row.errorCode +
-            deleteErrorReportLibrary(param).then(() => {
+          "？",
-              this.$success(this.$t('commons.delete_success'));
+        () => {
-              this.initTableData();
+          let param = { id: row.id, projectId: getCurrentProjectID() };
-            })
+          deleteErrorReportLibrary(param).then(() => {
-          }
+            this.$success(this.$t("commons.delete_success"));
+            this.initTableData();
+          });
         }
-      });
+      );
     },
     handleBatchDelete() {
-      this.$alert(this.$t('pj_batch_delete.error_library') + "？", '', {
+      operationConfirm(
-        confirmButtonText: this.$t('commons.confirm'),
+        this,
-        callback: (action) => {
+        this.$t("pj_batch_delete.error_library") + "？",
-          if (action === 'confirm') {
+        () => {
-            let sendParam = {};
+          let sendParam = {};
-            sendParam.ids = this.selectNodeIds;
+          sendParam.ids = this.selectNodeIds;
-            sendParam.projectId = getCurrentProjectID();
+          sendParam.projectId = getCurrentProjectID();
-            sendParam.condition = this.condition;
+          sendParam.condition = this.condition;
-            deleteErrorReportLibrary(sendParam).then(() => {
+          deleteErrorReportLibrary(sendParam).then(() => {
-              this.$success(this.$t('commons.delete_success'));
+            this.$success(this.$t("commons.delete_success"));
-              this.initTableData();
+            this.initTableData();
-            })
+          });
-          }
         }
-      });
+      );
     },
     editErrorReport(row) {
-      getErrorReportLibraryById(row.id).then(response => {
+      getErrorReportLibraryById(row.id).then((response) => {
         if (response.data) {
           let libraryData = response.data;
           this.$emit("editErrorReport", libraryData);
@@ -203,23 +255,22 @@ export default {
       });
     },
     changeStatus(row) {
-      if (!hasPermission('PROJECT_ERROR_REPORT_LIBRARY:READ+EDIT')) {
+      if (!hasPermission("PROJECT_ERROR_REPORT_LIBRARY:READ+EDIT")) {
         row.status = !row.status;
-        this.$alert(this.$t('commons.project_permission'));
+        this.$alert(this.$t("commons.project_permission"));
         return false;
       } else {
-        let param = {id: row.id, status: row.status};
+        let param = { id: row.id, status: row.status };
         this.loading = modifyErrorReportLibrary(param).then(() => {
-          this.$success(this.$t('commons.save_success'));
+          this.$success(this.$t("commons.save_success"));
         });
       }
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 .table-page {
   padding-top: 20px;
   margin-right: -9px;
@@ -237,7 +288,6 @@ export default {
 
 .request-method {
   padding: 0 5px;
-  color: #1E90FF;
+  color: #1e90ff;
 }
-
 </style>