qa-prevention-gwj-vue/src/views/accident/event/components/list.vue

<template>
  <div class="app-container">
    <el-form ref="searchForm" :model="searchForm" label-width="100px">
      <el-row :gutter="22">
        <el-col :span="4">
          <el-form-item label="事件名称" prop="incidentName">
            <el-input v-model="searchForm.incidentName" placeholder="请输入事件名称" class="filter-item"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发生时间" prop="incidentDates">
            <el-date-picker
              v-model="searchForm.incidentDates"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
              style="width: 100%"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="发生地点" prop="location">
            <el-input v-model="searchForm.location" placeholder="请输入发生地点" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="事件类型" prop="incidentType">
            <el-select v-model="searchForm.incidentType" placeholder="请选择">
              <el-option v-for="item in incidentTypes" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button v-waves type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
          <el-button v-waves icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
      <!-- 搜索查询 end -->
    </el-form>

    <!-- table 表格 start -->
    <div style="margin-top: 16px;">
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="varList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column label="事件名称" prop="incidentName"/>
        <el-table-column label="所属公司" prop="companyName"/>
        <el-table-column label="发生时间" prop="incidentDate">
          <template v-slot="{row}">
            {{ formatDate(row.incidentDate,'YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="发生地点" prop="location"/>
        <el-table-column label="操作" width="300">
          <template v-slot="{row}">
            <el-button icon="el-icon-view" type="success" size="mini" @click="goView(row.id, '查看')">查看</el-button>
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="goEdit(row.id, '修改')">修改</el-button>
            <el-button icon="el-icon-delete-solid" type="danger" size="mini" @click="deleteRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- table 表格 end -->

    <div class="pagination-group">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-button type="primary" icon="el-icon-circle-plus" @click="goView('', '新增')">新增</el-button>
          <el-button icon="el-icon-s-promotion" @click="handleAllExport">全部导出</el-button>
          <el-button type="danger" icon="el-icon-delete-solid" @click="handleBatchDel">批量删除</el-button>
        </el-col>
        <el-col :span="8">
          <pagination :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="searchList" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import formatDate from '@/utils/dateformat'
import { requestFN } from '@/utils/request'

export default {
  components: { Pagination },
  directives: { waves },

  data() {
    return {
      // 搜索查询条件
      searchForm: {
        /** 事件名称 */
        incidentName: '',
        /** 发生时间 */
        incidentDates: [],
        /** 开始时间 */
        startTime: null,
        /** 结束时间 */
        endTime: null,
        /** 发生地点 */
        location: '',
        /** 事件类型 */
        incidentType: '',
        /** 事件等级 */
        incidentLevel: '',
        /** 类型 */
        type: ''
      },
      /** 当前选中行 */
      multipleSelection: [],
      /** 列表加载态 */
      listLoading: false,
      /** 源列表数据项 */
      varList: [],
      /** 事件类型 */
      incidentTypes: [],
      /** 事件等级 */
      incidentLevels: [],
      // 列表分页参数
      listQuery: {
        /** 当前页数 */
        page: 1,
        /** 分页数 */
        limit: 20,
        /** 总页数 */
        total: 0
      }
    }
  },

  created() {
    this.getDict()
    this.searchList()
  },

  methods: {
    /**
     * 查询搜索
     */
    searchList() {
      this.listLoading = true
      const dates = this.searchForm.incidentDates
      this.searchForm.type = 1
      if (dates != null && dates.length === 2) {
        this.searchForm.startTime = dates[0]
        this.searchForm.endTime = dates[1]
      }
      const url = '/accident/page?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page
      requestFN(url, { ...this.searchForm }).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.listQuery.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },

    /**
     * 重置搜索条件
     */
    handleReset() {
      this.searchForm = this.$options.data().searchForm
      this.searchList()
    },

    /**
     * 表格行选择器处理
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    /**
     * 跳转查看详情页面
     */
    goView(id, name) {
      this.$parent.id = id
      this.$parent.tableName = name
      this.$parent.activeName = 'AddOrEdit'
    },

    /**
     * 跳转修改页面
     */
    goEdit(id, name) {
      this.$parent.id = id
      this.$parent.tableName = name
      this.$parent.activeName = 'AddOrEdit'
    },

    /**
     * 删除行数据
     */
    deleteRow(id) {
      if (id === null || id === '') {
        this.$message.warning('请选择要删除的行')
        return
      }

      // 弹出确认框
      this.$confirm('确定要删除这调记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        const url = '/accident/delete/' + '' + id
        requestFN(url).then((response) => {
          // 删除成功后的处理
          this.$message.success('删除成功')
          this.searchList()
          // eslint-disable-next-line handle-callback-err
        }).catch((error) => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * 全部导出
     */
    handleAllExport() {
      this.$confirm('确定要下载excel模板吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + '/accident/export/excel?type=1'
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },

    /**
     * 下载附件
     */
    downloadTheAttachment(attachmentAddress) {
      this.$confirm('确定要下载附件吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.fileUrl + attachmentAddress
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.searchForm = this.$options.data().searchForm
      this.searchList()
      // this.toggleSelection()
    },

    /**
     * 批量删除
     */
    handleBatchDel() {
      // 获取选中的行数据
      const selectedRows = this.multipleSelection
      // 如果没有选中任何行，则提示用户
      if (this.multipleSelection === '' || selectedRows.length === 0) {
        this.$message.warning('请选择要删除的行')
        return
      }
      // 弹出确认框
      this.$confirm('确定要删除这些记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 获取所有选中行的 ID
        let ids = ''
        selectedRows.forEach(row => {
          ids += row.id + ','
        })
        // 发送批量删除请求
        const url = '/accident/delete/' + '' + ids
        requestFN(url).then((response) => {
          // 删除成功后的处理
          this.$message.success('删除成功')
          this.searchList()
          // eslint-disable-next-line handle-callback-err
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * 查询字典
     */
    getDict() {
      const url = '/dictionaries/listSelectTree'
      requestFN(url,
        {
          DICTIONARIES_ID: '8d4140a900184b60836ad1a6490fd510'
        }
      ).then((data) => {
        this.incidentTypes = JSON.parse(data.zTreeNodes)
      })
      requestFN(url,
        {
          DICTIONARIES_ID: 'b61a1edc59c0430c8741c5f51aa26c3c'
        }
      ).then((data) => {
        this.incidentLevels = JSON.parse(data.zTreeNodes)
      })
    },

    formatDate(date, format) {
      return formatDate(date, format)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-group {
  margin-top: 14px;
}
</style>