CKQ/src/views/goaf/danger/components/DangerList.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          {{ title }}
        </div>
      </el-col>

      <el-col :span="12" class="button-group">
        <div class="select-search right">
          <el-input v-model="conditions.hdangerTitle" class="search-input" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" @click="getData()" />
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-row class="content-body">
      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 230px)">

        <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />>
        <el-table-column prop="hdangerTitle" label="预警名称" header-align="left" align="left">
          <template v-slot="{row}">
            <span>{{ row.hdangerTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hdangerType" label="类型" header-align="center" align="center" min-width="120">
          <template v-slot="{row}">
            <el-tag v-if=" row.hdangerType===1" type="success" effect="plain" color="rgb(38 69 90)">传感器巡检</el-tag>
            <el-tag v-else effect="plain" color="rgb(38 69 90)">人员巡检</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hdangerLevel" label="级别" header-align="center" align="center" width="80">
          <template v-slot="{row}">
            <span><el-tag type="success" effect="plain" color="rgb(38 69 90)">{{ row.hdangerLevel | dangerLevelFilter }}</el-tag></span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" header-align="center" align="center" width="80">
          <template v-slot="{row}">
            <span><el-tag type="warning" effect="plain" color="rgb(38 69 90)">{{ row.status | dangerStatusFilter }}</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="curActivityTitle" label="当前关卡" header-align="center" align="center" width="80">
          <template v-slot="{row}">
            <span v-if="!row.curActivityTitle">--</span>
            <span v-else><el-tag type="danger" effect="plain" color="rgb(38 69 90)">{{ row.curActivityTitle }}</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="curAccountName" label="当前处理人" header-align="center" align="center" width="160">
          <template v-slot="{row}">
            <span v-if="!row.curAccountName">--</span>
            <span v-else><i class="el-icon-user-solid" />{{ row.curAccountName }}( {{ row.curPositionName }} )</span>
          </template>
        </el-table-column>

        <el-table-column prop="dangerDeadline" label="整改期限" header-align="center" align="center" width="165">
          <template v-slot="{row}">
            <span><i class="el-icon-timer" />{{ row.dangerDeadline }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center" align="center" width="180">
          <template v-slot="{row}">
            <el-button v-if="row.curAccountId===userData.userId" type="primary" size="mini" @click="handleDanger(row)">处理</el-button>
            <el-button size="mini" type="info" @click="handleDetail(row)">详情</el-button>
            <el-button v-if="row.submitAccountId===userData.userId" size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>
    <submit-activity ref="submit" title="登记预警" @formSuccess="formSuccess" />
    <review-activity ref="review" title="预警评审" @formSuccess="formSuccess" />
    <rectify-activity ref="rectify" title="预警整改" @formSuccess="formSuccess" />
    <accept-activity ref="accept" title="预警验收" @formSuccess="formSuccess" />
    <danger-details ref="DangerDetails" title="预警详情" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { deleteDangerById, getDangerByPage } from '@/api/goaf/dangerApi'
import SubmitActivity from '../activity/Submit'
import ReviewActivity from '../activity/Review'
import RectifyActivity from '../activity/Rectify'
import AcceptActivity from '../activity/Accept'
import DangerDetails from './Details'
import { mapGetters } from 'vuex'

export default {
  name: 'DangerList',
  components: { Pagination, SubmitActivity, ReviewActivity, RectifyActivity, AcceptActivity, DangerDetails },
  filters: {
    dangerLevelFilter(val) {
      const status = ['较低', '一般', '较大', '重大']
      return status[val]
    },
    dangerStatusFilter(val) {
      const status = ['待提交', '待评审', '待整改', '待验收', '完成']
      return val === -1 ? '撤销' : status[val]
    },
    dangerDeadlineFilter(val) {

    }
  },
  data() {
    return {
      title: '预警',
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        status: undefined,
        day: undefined,
        hdangerTitle: undefined
      },
      action: ''
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  created() {
    this.getData()
  },
  methods: {

    // 重置查询条件
    resetConditions() {
      this.conditions = {
        page: 1,
        limit: 10,
        status: undefined
      }
    },

    // 加载数据
    loadData(action) {
      this.conditions.status = action
      this.getData()
    },

    // Fetch Data
    getData() {
      this.listLoading = true
      getDangerByPage(this.conditions).then((resp) => {
        const { code, data, total, msg } = resp
        this.listLoading = false
        if (code === 0) {
          this.total = total
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 流程处理
    handleDanger(data) {
      const { hdangerId, curActivityCode } = data
      this.$refs[curActivityCode].showModel(hdangerId, data)
    },

    // Delete Handler
    handleDelete(data) {
      const { hdangerId, hdangerTitle } = data
      this.$confirm(`此操作将删除该数据${hdangerTitle}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDangerById(hdangerId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.$message.success(msg)
            this.getData()
          } else {
            this.$message.error(msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // Show Details
    handleDetail(data) {
      const { hdangerId } = data
      this.$refs['DangerDetails'].showView(hdangerId, JSON.parse(JSON.stringify(data)))
    },

    // Update View
    formSuccess() {
      this.resetConditions()
      this.getData()
      // this.$emit('actionUpdate')
    },

    // Preview Photo
    previewList(photos) {
      if (Array.isArray(photos)) {
        const list = photos.map((item) => {
          return item
        })
        return list
      }
      return [photos]
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  margin: 10px 10px 10px 0;
  height: calc(100vh - 95px);
}
</style>