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.keywords" 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="scenePhoto" label="照片" header-align="center" align="center" width="60">
          <template v-slot="{row}">
            <div class="custom-avatar">
              <el-image
                :src="row.sceneIcon"
                :preview-src-list="previewList(row.scenePhoto)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="dangerTitle" label="隐患名称" header-align="left" align="left">
          <template v-slot="{row}">
            <span>{{ row.dangerTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="dangerCatTitle" label="类别" header-align="center" align="center" width="100">
          <template v-slot="{row}">
            <span>{{ row.dangerCatTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="dangerLevel" 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.dangerLevel | 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.status!==0">-</span>
            <!-- color="rgb(38 69 90)" -->
            <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.status!==0">-</span>
            <span v-else><i class="el-icon-user-solid" />{{ row.curAccountName }}( {{ row.curPositionName }} )</span>
          </template>
        </el-table-column>

        <el-table-column prop="expectedEndTime" 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.status === 0 && 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 { dangerLevel, dangerStatus } from '@/utils'
import { mapGetters } from 'vuex'

export default {
  name: 'DangerList',
  components: { Pagination, SubmitActivity, ReviewActivity, RectifyActivity, AcceptActivity, DangerDetails },
  filters: {
    dangerLevelFilter(val) {
      return dangerLevel(val)
    },
    dangerStatusFilter(val) {
      return dangerStatus(val)
    },
    dangerDeadlineFilter(val) {

    }
  },
  data() {
    return {
      title: '',
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        keywords: '',
        status: undefined,
        day: undefined,
        submitAccountId: undefined,
        handleAccountId: undefined,
        curAccountId: undefined,
        startDate: undefined,
        endDate: undefined,
        groupId: undefined
      },
      action: ''
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  mounted() {
    // this.getData()
  },
  methods: {

    // 重置查询条件
    resetConditions() {
      this.conditions.keywords = ''
      this.conditions.status = undefined
      this.conditions.submitAccountId = undefined
      this.conditions.handleAccountId = undefined
      this.conditions.curAccountId = undefined
      this.conditions.groupId = undefined
    },

    // 加载数据
    loadData(action) {
      this.action = action
      const groupId = this.userData.groupId
      const userId = this.userData.userId

      switch (action) {
        case 'MyCreated':
          this.title = '我提交的隐患'
          this.resetConditions()
          this.conditions.submitAccountId = userId
          break

        case 'MyHandling':
          this.title = '我的待处理隐患'
          this.resetConditions()
          this.conditions.status = 0
          this.conditions.curAccountId = userId
          break

        case 'MyHandled':
          this.title = '我处理完的隐患'
          this.resetConditions()
          this.conditions.handleAccountId = userId
          break

        case 'MyCanceled':
          this.title = '我撤消的隐患'
          this.resetConditions()
          this.conditions.submitAccountId = userId
          this.conditions.status = -1
          break

        case 'GroupHandling':
          this.title = '部门待处理的隐患'
          this.resetConditions()
          this.conditions.curGroupId = groupId
          this.conditions.status = 0
          break

        case 'GroupSubmit':
          this.title = '部门提交的隐患'
          this.resetConditions()
          this.conditions.submitGroupId = groupId
          break

        case 'GroupReview':
          this.title = '部门参与评审的隐患'
          this.resetConditions()
          this.conditions.reviewGroupId = groupId
          break

        case 'GroupRectify':
          this.title = '部门整改的隐患'
          this.resetConditions()
          this.conditions.rectifyGroupId = groupId
          break

        case 'GroupAccept':
          this.title = '部门参与验收的隐患'
          this.resetConditions()
          this.conditions.acceptGroupId = groupId
          break
      }

      this.getData()
    },

    // Fetch Data
    getData() {
      this.listLoading = true
      const conditions = {
        page: 1,
        limit: 10
      }
      getDangerByPage(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 { curActivityCode, dangerId } = data
      this.$refs[curActivityCode].showModel(dangerId)
    },

    // Delete Handler
    handleDelete(data) {
      const { dangerId, dangerTitle } = data
      this.$confirm(`此操作将删除该数据${dangerTitle}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDangerById(dangerId).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 { dangerId } = data
      this.$refs['DangerDetails'].showView(dangerId)
    },

    // Update View
    formSuccess() {
      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>