事件批量删除

src/views/ecm/event.vue

@@ -2,100 +2,50 @@
   <el-container>
     <el-header>
       <div class="left-panel">
-        <el-select
+        <el-select v-model="query.cates" placeholder="事件种类" @change="handleQuery" clearable>
-          v-model="query.cates"
+          <el-option v-for="item in cateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          placeholder="事件种类"
-          @change="handleQuery"
-          clearable
-        >
-          <el-option
-            v-for="item in cateOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          ></el-option>
         </el-select>
-        <el-select
+        <el-select v-model="query.area" placeholder="发生区域" @change="handleQuery" style="margin-left:2px" clearable
-          v-model="query.area"
+          filterable>
-          placeholder="发生区域"
+          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          @change="handleQuery"
-          style="margin-left:2px"
-          clearable
-          filterable
-        >
-          <el-option
-            v-for="item in areaOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          ></el-option>
         </el-select>
-        <el-date-picker
+        <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="发生时间始"
-        v-model="timeRange"
+          end-placeholder="发生时间止" style="margin-left:2px" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery"
-        type="datetimerange"
+          clearable />
-        range-separator="至"
+        <el-button type="danger" @click="handleDelete">批量删除</el-button>
-        start-placeholder="发生时间始"
-        end-placeholder="发生时间止"
-        style="margin-left:2px"
-        value-format="YYYY-MM-DD HH:mm:ss"
-        @change="handleQuery"
-        clearable
-      />
       </div>
       <div class="right-panel">
-        <el-button
+        <el-button type="primary" :loading='dLoading' icon="el-icon-download" @click="exportList">下载</el-button>
-            type="primary"
-            :loading = 'dLoading'
-            icon="el-icon-download"
-            @click="exportList"
-          >下载</el-button>
       </div>
     </el-header>
     <el-main class="nopadding">
-      <scTable
+      <scTable ref="table" :apiObj="apiObj" row-key="id" fit stripe @selection-change="handleSelectionChange"
-        ref="table"
+        @resetQuery="resetQuery">
-        :apiObj="apiObj"
+        <el-table-column type="selection" width="55" />
-        row-key="id"
-        fit
-        stripe
-        @resetQuery="resetQuery"
-      >
         <el-table-column label="#" type="index" width="50"></el-table-column>
         <el-table-column label="事件种类" width="240" :show-overflow-tooltip="true">
           <template #default="scope">
-            <el-tag
+            <el-tag v-for="item in scope.row.cates_" :key="item.id" type="warning" effect="plain">{{ item.name }}</el-tag>
-              v-for="item in scope.row.cates_"
-              :key="item.id"
-              type="warning"
-              effect="plain"
-              >{{ item.name }}</el-tag
-            >
           </template>
         </el-table-column>
         <el-table-column label="发生区域" prop="area_.name"></el-table-column>
         <el-table-column label="事件类型" prop="obj_cate" width="100">
           <template #default="scope">
-            {{objCateOptions[scope.row.obj_cate]}}
+            {{ objCateOptions[scope.row.obj_cate] }}
           </template>
         </el-table-column>
         <el-table-column label="事件对象" :show-overflow-tooltip="true">
           <template #default="scope">
-            <span v-if="scope.row.opl">{{scope.row.operation_name}}</span>
+            <span v-if="scope.row.opl">{{ scope.row.operation_name }}</span>
             <span v-else-if="scope.row.employee">
-              {{eTypeOptions[scope.row.employee_.type]}}-{{scope.row.employee_.name}}-{{ scope.row.employee_.belong_dept_name }}
+              {{ eTypeOptions[scope.row.employee_.type] }}-{{ scope.row.employee_.name }}-{{
+                scope.row.employee_.belong_dept_name }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column label="发生时间" prop="create_time" width="150"></el-table-column>
-          label="发生时间"
-          prop="create_time"
-          width="150"
-        ></el-table-column>
 
-        <el-table-column
+        <el-table-column label="处理人" prop="handle_user_name"></el-table-column>
-          label="处理人"
-          prop="handle_user_name"
-        ></el-table-column>
         <el-table-column label="事件标记" prop="mark">
           <template #default="scope">
             <el-tag v-if="scope.row.mark == 20" type="warning" effect="plain">误报</el-tag>
@@ -111,45 +61,27 @@
 
         <el-table-column label="操作" fixed="right" align="center">
           <template #default="scope">
-            <el-button
+            <el-button link type="info" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
-              link
+            <el-button link type="primary" size="small" v-if="scope.row.handle_user == null"
-              type="info"
+              @click="table_handle(scope.row, scope.$index)">处理</el-button>
-              size="small"
-              @click="table_show(scope.row, scope.$index)"
-              >查看</el-button
-            >
-            <el-button
-              link
-              type="primary"
-              size="small"
-              v-if="scope.row.handle_user == null"
-              @click="table_handle(scope.row, scope.$index)"
-              >处理</el-button
-            >
             <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
-								<template #reference>
+              <template #reference>
-									<el-button link type="danger" size="small">删除</el-button>
+                <el-button link type="danger" size="small">删除</el-button>
-								</template>
+              </template>
-							</el-popconfirm>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </scTable>
     </el-main>
-    <detail-dialog
+    <detail-dialog v-if="dialog.handle" ref="handleDialog" :eventID="eventID" @oplDetail="oplDetail"
-      v-if="dialog.handle"
+      @success="handleSuccess" @closed="dialog.handle = false"></detail-dialog>
-      ref="handleDialog"
-      :eventID="eventID"
-      @oplDetail="oplDetail"
-      @success="handleSuccess"
-      @closed="dialog.handle = false"
-    ></detail-dialog>
     <el-drawer :size="'50%'" v-model="showLimited" title="作业许可证详情" :close-on-click-modal="false">
       <sc-fire :id="oplId"></sc-fire>
     </el-drawer>
   </el-container>
 </template>
-    <script>
+<script>
-      import detailDialog from "./event_handlefrom.vue";
+import detailDialog from "./event_handlefrom.vue";
 import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
 export default {
   name: "event",
@@ -161,15 +93,16 @@ export default {
   data() {
     return {
       dLoading: false,
-      showLimited:false,
+      showLimited: false,
       defaultTime: ['00:00:00', '23:59:59'],
       timeRange: [],
+      selectionList: [],
       objCateOptions: {
-        'people':'人员',
+        'people': '人员',
         'opl': '作业',
         'other': '其他'
       },
-      eTypeOptions:{
+      eTypeOptions: {
         'employee': '正式员工',
         'remployee': '相关方',
         'visitor': '访客',
@@ -188,8 +121,8 @@ export default {
       search: {
         keyword: null,
       },
-      eventID:'',
+      eventID: '',
-      oplId:null,
+      oplId: null,
     };
   },
   created() {
@@ -205,11 +138,32 @@ export default {
         this.$refs.handleDialog.open("edit").setData(row);
       });
     },
-    table_del(row){
+    handleSelectionChange(val) {
-      this.$API.ecm.event.delete.req(row.id).then(res=>{
+      this.selectionList = val;
+    },
+    table_del(row) {
+      this.$API.ecm.event.delete.req(row.id).then(res => {
         this.$refs.table.refresh();
       })
     },
+    handleDelete() {
+      let that = this;
+      if (that.selectionList.length > 0) {
+        that.$confirm(`确定删除选中的${that.selectionList.length}条数据吗？`, "提示", { type: "warning" }).then(() => {
+          let ids = [];
+          that.selectionList.forEach(function (item) {
+            ids.push(item.id);
+          });
+          that.$API.ecm.event.delete.req('bulk', { ids: ids }).then((res) => {
+            that.$message.success("批量删除成功");
+            that.$refs.table.refresh();
+            return res;
+          }).catch((err) => {
+            that.$message.warning(err);
+          });
+        })
+      }
+    },
     //查看
     table_show(row) {
       this.eventID = row.id;
@@ -224,14 +178,14 @@ export default {
       });
     },
     getAreaOptions() {
-      this.$API.am.area.list.req({page: 0}).then(res=>{
+      this.$API.am.area.list.req({ page: 0 }).then(res => {
         this.areaOptions = res;
       })
     },
-    handleSuccess(){
+    handleSuccess() {
       this.$refs.table.refresh();
     },
-    oplDetail(data){
+    oplDetail(data) {
       debugger;
       console.log(data)
       this.oplId = data;
@@ -239,16 +193,16 @@ export default {
     },
     //搜索
     handleQuery() {
-      if(this.timeRange){
+      if (this.timeRange) {
         this.query.start_create = this.timeRange[0]
         this.query.end_create = this.timeRange[1]
-      }else{
+      } else {
         this.query.end_create = null
         this.query.start_create = null
       }
-      if(this.query.cates){
+      if (this.query.cates) {
 
-      }else{
+      } else {
         this.query.cates = null
       }
       this.$refs.table.queryData(this.query);
@@ -261,12 +215,12 @@ export default {
 
     exportList() {
       this.dLoading = true;
-     this.$API.ecm.event.export_excel
+      this.$API.ecm.event.export_excel
-      .req(this.query)
+        .req(this.query)
-      .then(res=>{
+        .then(res => {
-        window.open(res.path, "_blank");
+          window.open(res.path, "_blank");
-        this.dLoading = false;
+          this.dLoading = false;
-      }).catch(e=>{this.dLoading = false;})
+        }).catch(e => { this.dLoading = false; })
     }
   },
 };