city-life-line/src/views/subSystem/dispatch/disOnDuty/gzjc.vue

<template>
  <div class="app-container gzjc-page">
    <!-- 搜索区（若依风格） -->
    <div class="filter-panel">
      <el-form :inline="true" :model="searchForm" class="filter-form" label-width="80px">
        <el-form-item label="事件状态">
          <el-select v-model="searchForm.status" placeholder="请选择事件状态" clearable style="width:140px">
            <el-option v-for="d in trackStatusOptions" :key="d.value" :label="d.label" :value="d.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件类别">
          <el-select v-model="searchForm.eventCategory" placeholder="请选择事件类别" clearable filterable style="width:140px">
            <el-option v-for="d in dis_event_category" :key="d.value" :label="d.label" :value="d.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="接报时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-panel">
      <el-table :data="tableData" border stripe style="width:100%" v-loading="loading">
        <el-table-column prop="eventNo" label="事件编号" width="140" />
        <el-table-column prop="eventCategory" label="事件类别" width="110">
          <template #default="{ row }">{{ dictLabel(dis_event_category, row.eventCategory) }}</template>
        </el-table-column>
        <el-table-column prop="eventLevel" label="事件等级" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.eventLevel" :type="levelTagType(row.eventLevel)" size="small">{{ dictLabel(dis_event_level, row.eventLevel) }}</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="发生地点" min-width="150" show-overflow-tooltip>
          <template #default="{ row }">{{ row.location || '-' }}</template>
        </el-table-column>
        <el-table-column prop="statusName" label="当前状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.status)" size="small">{{ row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="处置人" width="100">
          <template #default="{ row }">{{ row.handler || '-' }}</template>
        </el-table-column>
        <el-table-column prop="lastVisitTime" label="最近回访" width="150">
          <template #default="{ row }">{{ row.lastVisitTime || '-' }}</template>
        </el-table-column>
        <el-table-column prop="nextVisitTime" label="下次回访" min-width="150">
          <template #default="{ row }">{{ row.nextVisitTime || '-' }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column label="操作" width="260" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.status === 1 && isHandler(row)" type="primary" plain size="small" @click="openOperation(row, 'start')" v-hasPermi="['dispatch:event:handle']">开始处置</el-button>
            <el-button v-if="row.status === 2 && isHandler(row)" type="warning" plain size="small" @click="openOperation(row, 'track')" v-hasPermi="['dispatch:event:handle']">跟踪</el-button>
            <el-button v-if="row.status === 2 && isHandler(row)" type="primary" plain size="small" @click="openOperation(row, 'submit')" v-hasPermi="['dispatch:event:handle']">提交核验</el-button>
            <el-button v-if="row.status === 3 && isVerifier(row)" type="success" plain size="small" @click="handleAudit(row)" v-hasPermi="['dispatch:event:audit']">核验</el-button>
            <el-button type="info" plain size="small" @click="handleDetail(row)">详情</el-button>
            <el-button v-if="row.editable" type="danger" plain size="small" @click="handleDelete(row)" v-hasPermi="['dispatch:event:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 开始处置和跟踪共用备注+附件表单 -->
    <el-dialog v-model="operationVisible" :title="operationType === 'start' ? '开始处置' : operationType === 'submit' ? '提交核验' : '事件跟踪'" width="600px" :close-on-click-modal="false">
      <el-form :model="operationForm" :rules="operationRules" ref="operationFormRef" label-width="100px">
        <el-form-item label="备注" prop="operDesc">
          <el-input v-model="operationForm.operDesc" type="textarea" :rows="4" maxlength="1000" show-word-limit placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            ref="operationUploadRef"
            v-model:file-list="operationForm.fileList"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :limit="5"
            multiple
            accept=".jpg,.jpeg,.png,.gif,.bmp,.webp,.mp4,.mov,.m4v,.webm"
            :on-success="handleOperationAttachSuccess"
            :on-error="handleAttachError"
            :on-exceed="() => ElMessage.warning('附件最多 5 个')"
            :before-upload="handleAttachBefore"
          >
            <el-button type="primary" plain>上传附件</el-button>
            <template #tip><div class="el-upload__tip">图片或视频，单个不超过 50MB，最多 5 个</div></template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="operationVisible = false">取消</el-button>
        <el-button type="primary" :loading="operationSubmitting" @click="confirmOperation">{{ operationType === 'start' ? '开始处置' : operationType === 'submit' ? '提交核验' : '保存跟踪' }}</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="auditVisible" title="事件核验" width="560px" :close-on-click-modal="false">
      <el-form ref="auditFormRef" :model="auditForm" :rules="auditRules" label-width="100px">
        <el-form-item label="事件编号">{{ auditForm.eventNo }}</el-form-item>
        <el-form-item label="核验结果" prop="resolved">
          <el-radio-group v-model="auditForm.resolved"><el-radio :value="true">已解除</el-radio><el-radio :value="false">未解除</el-radio></el-radio-group>
        </el-form-item>
        <el-form-item label="核验意见" prop="opinion"><el-input v-model="auditForm.opinion" type="textarea" :rows="4" placeholder="请输入核验意见" /></el-form-item>
      </el-form>
      <template #footer><el-button @click="auditVisible = false">取消</el-button><el-button type="primary" @click="confirmAudit">确认提交</el-button></template>
    </el-dialog>

    <EventDetailDrawer ref="eventDetailRef" />
  </div>
</template>

<script setup name="Gzjc">
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDict } from '@/utils/dict'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
import {
  getEventPage, deleteEventInfo, startDisposeEvent, trackEvent, submitVerifyEvent, auditEvent,
  getEventStatusOptions
} from '@/api/dispatch'
import { Search, Refresh } from '@element-plus/icons-vue'

import EventDetailDrawer from './EventDetailDrawer.vue'

// ==================== 字典 ====================
const { dis_event_category, dis_event_level, dis_event_trend, dis_yes_no } = useDict(
  'dis_event_category', 'dis_event_level', 'dis_event_trend', 'dis_yes_no'
)
const userStore = useUserStore()
const isHandler = row => Number(userStore.id) > 0 && Number(userStore.id) === Number(row.handlerId)
const isVerifier = row => Number(userStore.id) > 0 && Number(userStore.id) === Number(row.verifierId)

function dictLabel(list, value) {
  if (value === null || value === undefined || value === '') return '-'
  const hit = (list || []).find(item => String(item.value) === String(value))
  return hit ? hit.label : value
}

// 本页覆盖「已核实(1) 待开始处置 / 处置中(2) 待跟踪 / 待验收(3) 待核验 / 已解除(4) 终态查看」
const trackStatusOptions = ref([])

async function loadStatusOptions() {
  try {
    const res = await getEventStatusOptions()
    trackStatusOptions.value = (res.data || []).filter(item => [1, 2, 3, 4].includes(item.value))
  } catch {
    trackStatusOptions.value = []
  }
}

// 状态码 -> 标签样式（0 待核实 1 已核实 2 处置中 3 待验收 4 已解除 5 不实事件）
const STATUS_TAG = { 0: 'warning', 1: 'success', 2: 'primary', 3: 'warning', 4: 'warning', 5: 'info' }
function statusTagType(status) {
  return STATUS_TAG[status] || 'info'
}

// 等级字典值 -> 标签样式（1 Ⅰ级紧急 2 Ⅱ级较大 3 Ⅲ级一般）
const LEVEL_TAG = { 1: 'danger', 2: 'warning', 3: 'info' }
function levelTagType(level) {
  return LEVEL_TAG[level] || 'info'
}

// ==================== 数据状态 ====================
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const searchForm = ref({ status: '', eventCategory: '', dateRange: null })
const pagination = ref({ page: 1, pageSize: 10 })

// 下拉清空后可能是 '' / null / undefined，统一判定，避免拼出空查询条件
const hasValue = (val) => val !== '' && val !== null && val !== undefined

// ==================== 加载数据 ====================
async function loadData() {
  loading.value = true
  try {
    const params = { statusList: [1, 2, 3, 4], orderAsc: true }
    if (hasValue(searchForm.value.status)) params.statusList = [searchForm.value.status]
    if (searchForm.value.eventCategory) params.eventCategory = searchForm.value.eventCategory
    if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
      params.startDate = searchForm.value.dateRange[0]
      params.endDate = searchForm.value.dateRange[1]
    }
    const res = await getEventPage(pagination.value.page, pagination.value.pageSize, params)
    tableData.value = res.data?.rows || res.data?.records || res.data || []
    total.value = res.data?.total || 0
  } catch (error) {
    ElMessage.error('加载数据失败：' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadStatusOptions()
  loadData()
})

// ==================== 搜索筛选 ====================
function handleSearch() {
  pagination.value.page = 1
  loadData()
}

function handleReset() {
  searchForm.value = { status: '', eventCategory: '', dateRange: null }
  pagination.value.page = 1
  loadData()
}

// ==================== 分页 ====================
function handleSizeChange(val) {
  pagination.value.pageSize = val
  pagination.value.page = 1
  loadData()
}

function handleCurrentChange(val) {
  pagination.value.page = val
  loadData()
}

// ==================== 开始处置 / 跟踪 ====================
const operationVisible = ref(false)
const operationFormRef = ref(null)
const operationUploadRef = ref(null)
const currentRow = ref(null)
const operationType = ref('start')
const operationSubmitting = ref(false)
const operationForm = ref({ operDesc: '', fileList: [], attachUrls: [] })
const operationRules = {
  operDesc: [{ required: true, message: '请输入备注', trigger: 'blur' }]
}
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/minio/upload?dir=dispatch'
const uploadHeaders = { Authorization: 'Bearer ' + getToken() }
const ALLOWED_ATTACH_EXT = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'mp4', 'mov', 'm4v', 'webm']
function handleAttachBefore(file) {
  const ext = String(file.name).split('.').pop().toLowerCase()
  if (!ALLOWED_ATTACH_EXT.includes(ext) || file.size / 1024 / 1024 >= 50) {
    ElMessage.error('仅支持图片/视频格式且单个不超过 50MB')
    return false
  }
  return true
}
function handleAttachError() { ElMessage.error('文件上传失败') }

function openOperation(row, type) {
  currentRow.value = { ...row }
  operationType.value = type
  operationForm.value = { operDesc: '', fileList: [], attachUrls: [] }
  operationVisible.value = true
  nextTick(() => operationFormRef.value?.clearValidate())
}

function handleOperationAttachSuccess(res) {
  if (res.code === 200 && res.url) {
    operationForm.value.attachUrls.push(res.relativePath || res.url)
  } else {
    ElMessage.error(res.msg || '上传失败')
  }
}

async function confirmOperation() {
  try {
    await operationFormRef.value.validate()
  } catch {
    return
  }
  operationSubmitting.value = true
  try {
    const payload = {
      eventId: currentRow.value.id,
      operDesc: operationForm.value.operDesc,
      attachUrl: operationForm.value.attachUrls.join(',')
    }
    if (operationType.value === 'start') {
      await startDisposeEvent(payload)
      ElMessage.success('已开始处置')
    } else if (operationType.value === 'submit') {
      await submitVerifyEvent(payload)
      ElMessage.success('已提交核验')
    } else {
      await trackEvent(payload)
      ElMessage.success('跟踪记录保存成功')
    }
    operationVisible.value = false
    operationUploadRef.value?.clearFiles()
    loadData()
  } catch (error) {
    ElMessage.error('操作失败：' + (error.message || '未知错误'))
  } finally {
    operationSubmitting.value = false
  }
}

const currentReleaseRow = ref(null)
// ==================== 最终核验 ====================
const auditVisible = ref(false)
const auditFormRef = ref(null)
const auditForm = ref({ eventNo: '', resolved: true, opinion: '' })
const auditRules = { opinion: [{ required: true, message: '请输入核验意见', trigger: 'blur' }] }
function handleAudit(row) {
  currentReleaseRow.value = row
  auditForm.value = { eventNo: row.eventNo, resolved: true, opinion: '' }
  auditVisible.value = true
}
async function confirmAudit() {
  try { await auditFormRef.value.validate() } catch { return }
  try {
    await auditEvent(currentReleaseRow.value.id, { resolved: auditForm.value.resolved, auditOpinion: auditForm.value.opinion })
    ElMessage.success('核验完成')
    auditVisible.value = false
    loadData()
  } catch (error) { ElMessage.error('操作失败：' + (error.message || '未知错误')) }
}

// ==================== 删除 ====================
async function handleDelete(row) {
  try {
    await ElMessageBox.confirm('确定要删除该事件吗？', '删除确认', { type: 'warning' })
    await deleteEventInfo(row.id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') {
      ElMessage.error('删除失败：' + (error.message || '未知错误'))
    }
  }
}

// ==================== 详情 ====================
const eventDetailRef = ref(null)

function handleDetail(row) {
  eventDetailRef.value?.open(row)
}
</script>

<style scoped>
.gzjc-page {
  padding: 16px;
  background: #f5f5f5;
  min-height: calc(100vh - 84px);
}

.filter-panel {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-form {
  display: flex;
  align-items: center;
  gap: 0 12px;
  flex-wrap: wrap;
}

/* 若依风格查询栏：内联表单项去默认外边距，间距统一交给 gap */
.filter-form :deep(.el-form-item) {
  margin-right: 0;
  margin-bottom: 0;
}

.table-panel {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 16px;
}

.pagination-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

</style>