first commit

src/views/safe/danger/officer/officer.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="officer-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">安全员管理</h2>
+      <div class="header-actions">
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="mdi:plus" class="mr-4px" />
+          新增安全员
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="searchForm" inline>
+        <el-form-item label="姓名">
+          <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable />
+        </el-form-item>
+        <el-form-item label="部门">
+          <el-input v-model="searchForm.department" placeholder="请输入部门" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
+            <el-option label="在职" value="active" />
+            <el-option label="离职" value="inactive" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <Icon icon="mdi:magnify" class="mr-4px" />
+            搜索
+          </el-button>
+          <el-button @click="handleReset">
+            <Icon icon="mdi:refresh" class="mr-4px" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 数据表格 -->
+    <el-card shadow="never" class="table-card">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="name" label="姓名" width="300" />
+        <el-table-column prop="phone" label="联系电话" width="300" />
+        <el-table-column prop="email" label="邮箱" width="477" />
+        <el-table-column prop="department" label="所属部门" width="140" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
+              {{ row.status === 'active' ? '在职' : '离职' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click="handleEdit(row)">
+              <Icon icon="mdi:pencil" class="mr-4px" />
+              编辑
+            </el-button>
+            <el-button type="text" @click="handleView(row)">
+              <Icon icon="mdi:eye" class="mr-4px" />
+              查看
+            </el-button>
+            <el-button type="text" @click="handleDelete(row)" class="text-red-500">
+              <Icon icon="mdi:delete" class="mr-4px" />
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      @close="handleDialogClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入姓名" />
+            </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
+            </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="formData.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="所属部门" prop="department">
+          <el-input v-model="formData.department" placeholder="请输入所属部门" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+            <el-option label="在职" value="active" />
+            <el-option label="离职" value="inactive" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleDialogClose">取消</el-button>
+          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 查看详情对话框 -->
+    <el-dialog
+      v-model="viewDialogVisible"
+      title="安全员详情"
+      width="400px"
+    >
+      <div v-if="viewData" class="view-content">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="ID">{{ viewData.id }}</el-descriptions-item>
+          <el-descriptions-item label="姓名">{{ viewData.name }}</el-descriptions-item>
+          <el-descriptions-item label="联系电话">{{ viewData.phone }}</el-descriptions-item>
+          <el-descriptions-item label="邮箱">{{ viewData.email }}</el-descriptions-item>
+          <el-descriptions-item label="所属部门">{{ viewData.department }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="viewData.status === 'active' ? 'success' : 'info'">
+              {{ viewData.status === 'active' ? '在职' : '离职' }}
+            </el-tag>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import * as OfficerApi from '@/api/safe/officer'
+
+defineOptions({ name: 'OfficerManage' })
+
+  // 搜索表单
+const searchForm = reactive({
+  name: '',
+  department: '',
+    status: ''
+  })
+
+  // 分页
+const pagination = reactive({
+    current: 1,
+    size: 10,
+    total: 0
+  })
+
+  // 表格数据
+const tableData = ref<any[]>([])
+  const loading = ref(false)
+
+  // 对话框相关
+  const dialogVisible = ref(false)
+  const viewDialogVisible = ref(false)
+  const dialogType = ref<'add' | 'edit'>('add')
+  const submitLoading = ref(false)
+
+  // 表单相关
+  const formRef = ref<FormInstance>()
+const formData = reactive({
+    id: '',
+  name: '',
+  phone: '',
+  email: '',
+  department: '',
+  status: 'active'
+  })
+
+  // 表单验证规则
+  const formRules = {
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  phone: [
+    { required: true, message: '请输入联系电话', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+    ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
+  ],
+  department: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+  }
+
+  // 查看相关
+const viewData = ref<any | null>(null)
+
+  // 计算属性
+  const dialogTitle = computed(() => {
+  return dialogType.value === 'add' ? '新增安全员' : '编辑安全员'
+  })
+
+  // 方法
+  const handleSearch = () => {
+    pagination.current = 1
+    fetchData()
+  }
+
+  const handleReset = () => {
+    Object.assign(searchForm, {
+    name: '',
+    department: '',
+      status: ''
+    })
+    handleSearch()
+  }
+
+  // 获取数据
+  const fetchData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        pageNo: pagination.current,
+        pageSize: pagination.size,
+      name: searchForm.name || undefined,
+      department: searchForm.department || undefined,
+      status: searchForm.status || undefined
+      }
+    const res = await OfficerApi.getOfficerPage(params)
+      tableData.value = res.list
+      pagination.total = res.total
+    } catch (error) {
+      ElMessage.error('获取数据失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 分页
+  const handleSizeChange = (size: number) => {
+    pagination.size = size
+    fetchData()
+  }
+
+  const handleCurrentChange = (current: number) => {
+    pagination.current = current
+    fetchData()
+  }
+
+  // 新增
+  const handleAdd = () => {
+    dialogType.value = 'add'
+    resetForm()
+    dialogVisible.value = true
+  }
+
+  // 编辑
+  const handleEdit = (row: any) => {
+    dialogType.value = 'edit'
+  Object.assign(formData, row)
+    dialogVisible.value = true
+  }
+
+  // 查看
+  const handleView = (row: any) => {
+    viewData.value = row
+    viewDialogVisible.value = true
+  }
+
+  // 删除
+  const handleDelete = async (row: any) => {
+    try {
+    await ElMessageBox.confirm('确定要删除该安全员吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    await OfficerApi.deleteOfficer(row.id)
+      ElMessage.success('删除成功')
+      fetchData()
+    } catch (error) {
+      if (error !== 'cancel') {
+        ElMessage.error('删除失败')
+      }
+    }
+  }
+
+  // 表单相关
+  const resetForm = () => {
+    Object.assign(formData, {
+      id: '',
+    name: '',
+    phone: '',
+    email: '',
+    department: '',
+    status: 'active'
+    })
+    formRef.value?.clearValidate()
+  }
+
+  const handleDialogClose = () => {
+    dialogVisible.value = false
+    resetForm()
+  }
+
+  const handleSubmit = async () => {
+    if (!formRef.value) return
+    try {
+      await formRef.value.validate()
+      submitLoading.value = true
+    // 保证 status 类型为 'active' | 'inactive'，并断言类型
+    const status = formData.status === 'active' ? 'active' : 'inactive'
+    const submitData = { ...formData, status } as OfficerApi.Officer
+      if (dialogType.value === 'add') {
+      await OfficerApi.createOfficer(submitData)
+        ElMessage.success('新增成功')
+      } else {
+      await OfficerApi.updateOfficer(submitData)
+        ElMessage.success('编辑成功')
+      }
+      dialogVisible.value = false
+      fetchData()
+    } catch (error) {
+      ElMessage.error('提交失败')
+    } finally {
+      submitLoading.value = false
+    }
+  }
+
+  // 生命周期
+  onMounted(() => {
+    fetchData()
+  })
+</script>
+
+<style scoped>
+.officer-container {
+    padding: 20px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  }
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  .header-actions {
+    display: flex;
+    gap: 12px;
+  }
+  .page-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #303133;
+  }
+  .search-card {
+    margin-bottom: 20px;
+  width: 100%;
+  max-width: 100%;
+  }
+  .table-card {
+    margin-bottom: 20px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.el-table {
+  width: 100%;
+  min-width: 1000px;
+}
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+  .dialog-footer {
+    text-align: right;
+  }
+  .view-content {
+    padding: 20px 0;
+  }
+</style>

src/views/safe/danger/report/report.vue

@@ -0,0 +1,798 @@
+<template>
+  <div class="danger-report-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">隐患上报管理</h2>
+      <div class="header-actions">
+<!--        <el-button @click="handleExport">-->
+<!--          <Icon icon="mdi:download" class="mr-4px" />-->
+<!--          导出Excel-->
+<!--        </el-button>-->
+        <el-button type="primary" @click="handleAdd">
+          <Icon icon="mdi:plus" class="mr-4px" />
+          新增隐患
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="searchForm" inline>
+        <el-form-item label="发现人">
+          <el-input v-model="searchForm.discoverer" placeholder="请输入发现人姓名" clearable />
+        </el-form-item>
+        <el-form-item label="安全员">
+          <el-input v-model="searchForm.safetyOfficer" placeholder="请输入安全员姓名" clearable />
+        </el-form-item>
+        <el-form-item label="发现时间">
+          <el-date-picker
+            v-model="searchForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
+            <el-option label="待处理" value="pending" />
+            <el-option label="处理中" value="processing" />
+            <el-option label="已处理" value="completed" />
+            <el-option label="已关闭" value="closed" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <Icon icon="mdi:magnify" class="mr-4px" />
+            搜索
+          </el-button>
+          <el-button @click="handleReset">
+            <Icon icon="mdi:refresh" class="mr-4px" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 数据表格 -->
+    <el-card shadow="never" class="table-card">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="编号" width="80" />
+        <el-table-column prop="discoverer" label="发现人" width="120" />
+        <el-table-column prop="discoverTime" label="发现时间" width="160">
+          <template #default="{ row }">
+            {{ formatTime(row.discoverTime, 'yyyy-MM-dd HH:mm:ss') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="location" label="位置" width="200" />
+        <el-table-column prop="description" label="问题描述" min-width="300" show-overflow-tooltip />
+        <el-table-column prop="safetyOfficer" label="安全员" width="120" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="images" label="现场照片" width="120">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.images && row.images.length > 0"
+              type="text"
+              @click="handleViewImages(row)"
+            >
+              查看照片 ({{ row.images.length }})
+            </el-button>
+            <span v-else class="text-gray-400">无照片</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click="handleEdit(row)">
+              <Icon icon="mdi:pencil" class="mr-4px" />
+              编辑
+            </el-button>
+            <el-button type="text" @click="handleView(row)">
+              <Icon icon="mdi:eye" class="mr-4px" />
+              查看
+            </el-button>
+            <el-button type="text" @click="handleDelete(row)" class="text-red-500">
+              <Icon icon="mdi:delete" class="mr-4px" />
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="800px"
+      :close-on-click-modal="false"
+      @close="handleDialogClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="发现人" prop="discoverer">
+              <el-input v-model="formData.discoverer" placeholder="请输入发现人姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发现时间" prop="discoverTime">
+              <el-date-picker
+                v-model="formData.discoverTime"
+                type="datetime"
+                placeholder="请选择发现时间"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="安全员" prop="safetyOfficer">
+              <el-select
+                v-model="formData.safetyOfficer"
+                placeholder="请选择安全员"
+                style="width: 100%"
+                filterable
+              >
+                <el-option
+                  v-for="officer in safetyOfficers"
+                  :key="officer.value"
+                  :label="officer.label"
+                  :value="officer.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+                <el-option label="待处理" value="pending" />
+                <el-option label="处理中" value="processing" />
+                <el-option label="已处理" value="completed" />
+                <el-option label="已关闭" value="closed" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="位置" prop="location">
+          <el-input v-model="formData.location" placeholder="请输入隐患位置" />
+        </el-form-item>
+
+        <el-form-item label="问题描述" prop="description">
+          <el-input
+            v-model="formData.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请详细描述隐患问题"
+          />
+        </el-form-item>
+
+        <el-form-item label="现场照片">
+          <div class="upload-container">
+            <el-upload
+              ref="uploadRef"
+              :file-list="fileList"
+              :before-upload="beforeUpload"
+              :on-remove="handleRemove"
+              :http-request="customUpload"
+              list-type="picture-card"
+              :limit="5"
+              accept="image/*"
+              drag
+            >
+              <div class="upload-area">
+                <Icon icon="mdi:camera" class="upload-icon" />
+                <div class="upload-text">
+                  <div>拖拽或单击后粘贴图片</div>
+                  <div class="upload-hint">单张20MB以内</div>
+                </div>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleDialogClose">取消</el-button>
+          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 查看详情对话框 -->
+    <el-dialog
+      v-model="viewDialogVisible"
+      title="隐患详情"
+      width="600px"
+    >
+      <div v-if="viewData" class="view-content">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="发现人">{{ viewData.discoverer }}</el-descriptions-item>
+          <el-descriptions-item label="发现时间">
+            {{ formatTime(viewData.discoverTime, 'yyyy-MM-dd HH:mm:ss') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="安全员">{{ viewData.safetyOfficer }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(viewData.status)">
+              {{ getStatusText(viewData.status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="位置" :span="2">{{ viewData.location }}</el-descriptions-item>
+          <el-descriptions-item label="问题描述" :span="2">{{ viewData.description }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div v-if="viewData.images && viewData.images.length > 0" class="image-gallery">
+          <h4>现场照片</h4>
+          <el-image
+            v-for="(image, index) in viewData.images"
+            :key="index"
+            :src="image.url"
+            :preview-src-list="viewData.images.map(img => img.url)"
+            :initial-index="index"
+            fit="cover"
+            class="gallery-image"
+          />
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 图片查看对话框 -->
+    <el-dialog
+      v-model="imageDialogVisible"
+      title="现场照片"
+      width="800px"
+    >
+      <div v-if="selectedImages" class="image-viewer">
+        <el-carousel :interval="4000" type="card" height="400px">
+          <el-carousel-item v-for="(image, index) in selectedImages" :key="index">
+            <el-image
+              :src="image.url"
+              fit="contain"
+              style="width: 100%; height: 100%"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { formatTime } from '@/utils'
+import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
+import type { DangerReport, SearchForm, Pagination, SafetyOfficer, FormData, DangerImage } from './types'
+import * as DangerReportApi from '@/api/safe/danger'
+import * as DangerImageApi from '@/api/safe/danger/image'
+
+defineOptions({ name: 'DangerReport' })
+
+// 搜索表单
+const searchForm = reactive<SearchForm>({
+  discoverer: '',
+  safetyOfficer: '',
+  dateRange: [],
+  status: ''
+})
+
+// 分页
+const pagination = reactive<Pagination>({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 表格数据
+const tableData = ref<DangerReport[]>([])
+const loading = ref(false)
+
+// 对话框相关
+const dialogVisible = ref(false)
+const viewDialogVisible = ref(false)
+const imageDialogVisible = ref(false)
+const dialogType = ref<'add' | 'edit'>('add')
+const submitLoading = ref(false)
+
+// 表单相关
+const formRef = ref<FormInstance>()
+const formData = reactive<FormData>({
+  id: '',
+  discoverer: '',
+  discoverTime: new Date(),
+  location: '',
+  description: '',
+  safetyOfficer: '',
+  status: 'pending',
+  images: []
+})
+
+// 表单验证规则
+const formRules = {
+  discoverer: [
+    { required: true, message: '请输入发现人姓名', trigger: 'blur' }
+  ],
+  discoverTime: [
+    { required: true, message: '请选择发现时间', trigger: 'change' }
+  ],
+  location: [
+    { required: true, message: '请输入位置', trigger: 'blur' }
+  ],
+  description: [
+    { required: true, message: '请输入问题描述', trigger: 'blur' }
+  ],
+  safetyOfficer: [
+    { required: true, message: '请选择安全员', trigger: 'change' }
+  ]
+}
+
+// 文件上传相关
+const uploadRef = ref()
+const fileList = ref<UploadUserFile[]>([])
+
+// 查看相关
+const viewData = ref<DangerReport | null>(null)
+const selectedImages = ref<DangerImage[]>([])
+
+// 安全员列表
+const safetyOfficers: SafetyOfficer[] = [
+  { label: '张三', value: '张三' },
+  { label: '李四', value: '李四' },
+  { label: '王五', value: '王五' },
+  { label: '赵六', value: '赵六' }
+]
+
+// 计算属性
+const dialogTitle = computed(() => {
+  return dialogType.value === 'add' ? '新增隐患' : '编辑隐患'
+})
+
+// 方法
+const getStatusType = (status: string) => {
+  const statusMap: Record<string, 'warning' | 'primary' | 'success' | 'info'> = {
+    pending: 'warning',
+    processing: 'primary',
+    completed: 'success',
+    closed: 'info'
+  }
+  return statusMap[status] || 'info'
+}
+
+const getStatusText = (status: string) => {
+  const statusMap = {
+    pending: '待处理',
+    processing: '处理中',
+    completed: '已处理',
+    closed: '已关闭'
+  }
+  return statusMap[status as keyof typeof statusMap] || '未知'
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleReset = () => {
+  Object.assign(searchForm, {
+    discoverer: '',
+    safetyOfficer: '',
+    dateRange: [],
+    status: ''
+  })
+  handleSearch()
+}
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const params = {
+      pageNo: pagination.current,
+      pageSize: pagination.size,
+      discoverer: searchForm.discoverer || undefined,
+      safetyOfficer: searchForm.safetyOfficer || undefined,
+      status: searchForm.status || undefined,
+      discoverTime: searchForm.dateRange?.length === 2 ? searchForm.dateRange : undefined
+    }
+
+    const res = await DangerReportApi.getDangerReportPage(params)
+    tableData.value = res.list
+    pagination.total = res.total
+  } catch (error) {
+    ElMessage.error('获取数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 分页
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  fetchData()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  fetchData()
+}
+
+// 新增
+const handleAdd = () => {
+  dialogType.value = 'add'
+  resetForm()
+  fileList.value = []
+  dialogVisible.value = true
+}
+
+// 编辑
+const handleEdit = (row: any) => {
+  dialogType.value = 'edit'
+  Object.assign(formData, {
+    ...row,
+    discoverTime: row.discoverTime ? new Date(row.discoverTime) : new Date()
+  })
+  fileList.value = (row.images || []).map((img: any, index: number) => ({
+    name: img.name || `image_${index}.jpg`,
+    url: img.url,
+    status: 'success',
+    uid: `existing_${index}`
+  }))
+  dialogVisible.value = true
+}
+
+// 查看
+const handleView = (row: any) => {
+  viewData.value = row
+  viewDialogVisible.value = true
+}
+
+// 删除
+const handleDelete = async (row: any) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条隐患记录吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await DangerReportApi.deleteDangerReport(row.id)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+// 查看图片
+const handleViewImages = (row: any) => {
+  selectedImages.value = row.images || []
+  imageDialogVisible.value = true
+}
+
+// 导出Excel
+const handleExport = async () => {
+  try {
+    const params = {
+      discoverer: searchForm.discoverer || undefined,
+      safetyOfficer: searchForm.safetyOfficer || undefined,
+      status: searchForm.status || undefined,
+      discoverTime: searchForm.dateRange?.length === 2 ? searchForm.dateRange : undefined
+    }
+    await DangerReportApi.exportDangerReport(params)
+    ElMessage.success('导出成功')
+  } catch (error) {
+    ElMessage.error('导出失败')
+  }
+}
+
+// 表单相关
+const resetForm = () => {
+  Object.assign(formData, {
+    id: '',
+    discoverer: '',
+    discoverTime: new Date(),
+    location: '',
+    description: '',
+    safetyOfficer: '',
+    status: 'pending',
+    images: []
+  })
+  if (dialogType.value === 'add') {
+    fileList.value = []
+  }
+  formRef.value?.clearValidate()
+}
+
+const handleDialogClose = () => {
+  dialogVisible.value = false
+  resetForm()
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+    submitLoading.value = true
+
+    // 收集有效的图片信息
+    const validImages = fileList.value
+      .filter(file => file.url && file.url.trim() !== '')
+      .map(file => ({
+        url: file.url!,
+        name: file.name || '未命名图片'
+      }))
+
+    const submitData = {
+      ...formData,
+      id: formData.id ? Number(formData.id) : undefined,
+      discoverTime: formData.discoverTime ? formatTime(formData.discoverTime, 'yyyy-MM-dd HH:mm:ss') : formatTime(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      images: validImages
+    }
+
+    // 调试日志
+    console.log('提交的数据:', submitData)
+    console.log('fileList:', fileList.value)
+    console.log('validImages:', validImages)
+    console.log('images:', submitData.images)
+
+    if (dialogType.value === 'add') {
+      await DangerReportApi.createDangerReport(submitData)
+      ElMessage.success('新增成功')
+    } else {
+      await DangerReportApi.updateDangerReport(submitData as DangerReportApi.DangerReportUpdateReqVO)
+      ElMessage.success('编辑成功')
+    }
+
+    dialogVisible.value = false
+    fetchData()
+  } catch (error) {
+    console.error('提交失败:', error)
+    ElMessage.error('提交失败')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+// 文件上传相关
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  const isImage = file.type.startsWith('image/')
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+
+  const isLt20M = file.size / 1024 / 1024 < 20
+  if (!isLt20M) {
+    ElMessage.error('图片大小不能超过 20MB!')
+    return false
+  }
+
+  return true
+}
+
+const handleRemove: UploadProps['onRemove'] = async (file, fileList) => {
+  try {
+    if (file.url && file.url.startsWith('http')) {
+      const urlParts = file.url.split('/')
+      const year = urlParts[urlParts.length - 4]
+      const month = urlParts[urlParts.length - 3]
+      const day = urlParts[urlParts.length - 2]
+      const filename = urlParts[urlParts.length - 1]
+      const datePath = `${year}/${month}/${day}`
+      await DangerImageApi.deleteDangerImage({
+        datePath,
+        filename
+      })
+    }
+  } catch (error) {
+    console.error('删除文件失败:', error)
+    ElMessage.error('删除文件失败')
+  }
+  debugger;
+  // 前端 fileList 兜底同步删除
+  const idx = fileList.value.findIndex(f => f.uid === file.uid)
+  if (idx !== -1) {
+    fileList.value.splice(idx, 1)
+  }
+}
+
+const customUpload: UploadProps['httpRequest'] = async (options) => {
+  const { file, onSuccess, onError } = options
+  try {
+    const response = await DangerImageApi.uploadDangerImage(file)
+    // 检查 fileList 是否已存在该文件
+    const exists = fileList.value.some(f => f.uid === file.uid)
+    if (!exists) {
+      fileList.value.push({
+        name: response.name || file.name,
+        url: response.url,
+        status: 'success',
+        uid: file.uid
+      })
+    }
+    ElMessage.success('上传成功')
+    onSuccess({
+      url: response.url,
+      name: response.name || file.name
+    })
+  } catch (error) {
+    ElMessage.error('上传失败')
+    onError({
+      status: 500,
+      method: 'POST',
+      url: '',
+      name: 'UploadError',
+      message: error instanceof Error ? error.message : '上传失败'
+    })
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.danger-report-container {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.search-card {
+  margin-bottom: 20px;
+}
+
+.table-card {
+  margin-bottom: 20px;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.upload-container {
+  width: 100%;
+}
+
+.upload-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+
+.upload-area:hover {
+  border-color: #409eff;
+}
+
+.upload-icon {
+  font-size: 32px;
+  color: #8c939d;
+  margin-bottom: 8px;
+}
+
+.upload-text {
+  text-align: center;
+  color: #606266;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.view-content {
+  padding: 20px 0;
+}
+
+.image-gallery {
+  margin-top: 20px;
+}
+
+.image-gallery h4 {
+  margin-bottom: 16px;
+  color: #303133;
+}
+
+.gallery-image {
+  width: 120px;
+  height: 80px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+}
+
+.image-viewer {
+  text-align: center;
+}
+
+:deep(.el-carousel__item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-upload--picture-card) {
+  width: 120px;
+  height: 120px;
+}
+
+:deep(.el-upload-list--picture-card .el-upload-list__item) {
+  width: 120px;
+  height: 120px;
+}
+</style>

src/views/safe/danger/report/types.ts

@@ -0,0 +1,47 @@
+// 隐患上报相关类型定义
+
+export interface DangerReport {
+  id: number
+  discoverer: string
+  discoverTime: Date
+  location: string
+  description: string
+  safetyOfficer: string
+  status: string
+  images: DangerImage[]
+  createTime: string
+}
+
+export interface DangerImage {
+  url: string
+  name: string
+}
+
+export interface SearchForm {
+  discoverer: string
+  safetyOfficer: string
+  dateRange: string[]
+  status: string
+}
+
+export interface Pagination {
+  current: number
+  size: number
+  total: number
+}
+
+export interface SafetyOfficer {
+  label: string
+  value: string
+}
+
+export interface FormData {
+  id: string
+  discoverer: string
+  discoverTime:  Date
+  location: string
+  description: string
+  safetyOfficer: string
+  status: 'pending' | 'processing' | 'completed' | 'closed'
+  images: DangerImage[]
+}

src/views/safe/home/types.ts

@@ -0,0 +1,49 @@
+// 人员定位首页相关类型定义
+
+export interface Personnel {
+  id: number
+  name: string
+  department: string
+  avatar: string
+  status: 'online' | 'offline' | 'warning'
+  currentLocation: string
+  lastUpdate: Date
+}
+
+export interface RealTimeActivity {
+  id: number
+  personName: string
+  action: string
+  location: string
+  time: Date
+  status: 'normal' | 'warning' | 'danger'
+  avatar: string
+}
+
+export interface Alert {
+  id: number
+  title: string
+  description: string
+  type: 'warning' | 'danger' | 'info'
+  time: Date
+}
+
+export interface AreaStat {
+  id: number
+  name: string
+  personCount: number
+  maxCapacity: number
+}
+
+export interface Statistics {
+  totalPersonnel: number
+  onlinePersonnel: number
+  alertCount: number
+  areaCount: number
+}
+
+export interface MapLayers {
+  showPersonnel: boolean
+  showAreas: boolean
+  showAlerts: boolean
+} 

src/views/safe/permit/ImportForm.vue

@@ -0,0 +1,111 @@
+<template>
+  <Dialog title="许可证照导入" v-model="dialogVisible" width="400px">
+    <div>
+      <el-upload
+        ref="uploadRef"
+        v-model:file-list="fileList"
+        :action="importUrl"
+        :headers="uploadHeaders"
+        :limit="1"
+        :on-success="submitFormSuccess"
+        :on-error="submitFormError"
+        :auto-upload="false"
+        accept=".xlsx, .xls"
+        drag
+      >
+        <Icon icon="ep:upload" />
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <div class="el-upload__tip">
+              <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">
+                下载模板
+              </el-link>
+            </div>
+            <div class="el-upload__tip" style="color: red">提示：仅允许导入xls、xlsx格式文件！</div>
+          </div>
+        </template>
+      </el-upload>
+    </div>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+import { PermitApi } from '@/api/safe/permit'
+
+defineOptions({ name: 'PermitImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/safe/permit/import-excel' // 导入的请求地址
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = () => {
+  if (fileList.value.length == 0) {
+    message.error('请选择要上传的文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const submitFormSuccess = (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+  // 拼接提示语
+  const data = response.data
+  let text = '上传成功数量：' + data.successCount + ';'
+  for (let name of data.errorMessages) {
+    text += '< br / >' + name
+  }
+  message.alert(text)
+  formLoading.value = false
+  dialogVisible.value = false
+  emit('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  fileList.value = []
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+  const res = await PermitApi.importPermitTemplate()
+  download.excel(res, '许可证照导入模板.xls')
+}
+</script>

src/views/safe/permit/PermitForm.vue

@@ -0,0 +1,171 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="证书名称" prop="certificateName">
+        <el-input v-model="formData.certificateName" placeholder="请输入证书名称" :readonly="isViewMode" />
+      </el-form-item>
+      <el-form-item label="编号" prop="certificateNumber">
+        <el-input v-model="formData.certificateNumber" placeholder="请输入编号" :readonly="isViewMode" />
+      </el-form-item>
+      <el-form-item label="发证部门" prop="issuingAuthority">
+        <el-input v-model="formData.issuingAuthority" placeholder="请输入发证部门" :readonly="isViewMode" />
+      </el-form-item>
+      <el-form-item label="颁证日期" prop="issueDate">
+        <el-date-picker
+          v-model="formData.issueDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择颁证日期"
+          :disabled="isViewMode"
+        />
+      </el-form-item>
+      <el-form-item label="换证日期" prop="renewalDate">
+        <el-date-picker
+          v-model="formData.renewalDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择换证日期"
+          :disabled="isViewMode"
+        />
+      </el-form-item>
+      <el-form-item label="到期日" prop="expiryDate">
+        <el-date-picker
+          v-model="formData.expiryDate"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="选择到期日"
+          :disabled="isViewMode"
+        />
+      </el-form-item>
+      <el-form-item label="责任人" prop="responsiblePerson">
+        <el-input v-model="formData.responsiblePerson" placeholder="请输入责任人" :readonly="isViewMode" />
+      </el-form-item>
+      <el-form-item label="附件" prop="attachments">
+        <UploadFile
+          v-model="formData.attachments"
+          :limit="5"
+          :file-type="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'txt']"
+          :file-size="50"
+          :disabled="isViewMode"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          placeholder="请输入备注"
+          :rows="3"
+          :readonly="isViewMode"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button v-if="!isViewMode" @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">{{ isViewMode ? '关 闭' : '取 消' }}</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { PermitApi, PermitVO } from '@/api/safe/permit'
+
+/** 许可证照 表单 */
+defineOptions({ name: 'PermitForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改；view - 查看
+const formData = ref({
+  id: undefined,
+  certificateName: undefined,
+  certificateNumber: undefined,
+  issuingAuthority: undefined,
+  issueDate: undefined,
+  renewalDate: undefined,
+  expiryDate: undefined,
+  responsiblePerson: undefined,
+  attachments: [],
+  remark: undefined
+})
+const formRules = reactive({
+  // 根据需要添加验证规则
+})
+const formRef = ref() // 表单 Ref
+
+// 计算属性：是否为查看模式
+const isViewMode = computed(() => formType.value === 'view' || formType.value === 'detail')
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'create' ? '添加许可证照' : (type === 'view' || type === 'detail') ? '查看许可证照' : '修改许可证照'
+  formType.value = type
+  resetForm()
+  // 修改或查看时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await PermitApi.getPermit(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 查看模式下不允许提交
+  if (isViewMode.value) {
+    return
+  }
+  
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as PermitVO
+    if (formType.value === 'create') {
+      await PermitApi.createPermit(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PermitApi.updatePermit(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    certificateName: undefined,
+    certificateNumber: undefined,
+    issuingAuthority: undefined,
+    issueDate: undefined,
+    renewalDate: undefined,
+    expiryDate: undefined,
+    responsiblePerson: undefined,
+    attachments: [],
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/safe/permit/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="证书名称" prop="certificateName">
+        <el-input
+          v-model="queryParams.certificateName"
+          placeholder="请输入证书名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="编号" prop="certificateNumber">
+        <el-input
+          v-model="queryParams.certificateNumber"
+          placeholder="请输入编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="发证部门" prop="issuingAuthority">
+        <el-input
+          v-model="queryParams.issuingAuthority"
+          placeholder="请输入发证部门"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="责任人" prop="responsiblePerson">
+        <el-input
+          v-model="queryParams.responsiblePerson"
+          placeholder="请输入责任人"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="到期日" prop="expiryDate">
+        <el-date-picker
+          v-model="queryParams.expiryDate"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="datetimerange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['safe:permit:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['safe:permit:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+          type="info"
+          plain
+          @click="handleImport"
+          v-hasPermi="['safe:permit:import']"
+        >
+          <Icon icon="ep:upload" class="mr-5px" /> 导入
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
+      <el-table-column label="主键ID" align="center" prop="id" />
+      <el-table-column label="证书名称" align="center" prop="certificateName" />
+      <el-table-column label="编号" align="center" prop="certificateNumber" />
+      <el-table-column label="发证部门" align="center" prop="issuingAuthority" />
+      <el-table-column
+        label="颁证日期"
+        align="center"
+        prop="issueDate"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="换证日期"
+        align="center"
+        prop="renewalDate"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="到期日"
+        align="center"
+        prop="expiryDate"
+        :formatter="dateFormatter"
+        width="180px"
+      >
+        <template #default="scope">
+          <span :class="getExpiryClass(scope.row.expiryDate)">
+            {{ dateFormatter(scope.row, scope.column, scope.row.expiryDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="责任人" align="center" prop="responsiblePerson" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="320">
+        <template #default="scope">
+          <el-button
+            link
+            type="info"
+            @click="openForm('view', scope.row.id)"
+            v-hasPermi="['safe:permit:query']"
+          >
+            查看
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['safe:permit:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['safe:permit:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <PermitForm ref="formRef" @success="getList" />
+
+  <!-- 导入对话框 -->
+  <ImportForm ref="importFormRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { PermitApi, PermitVO } from '@/api/safe/permit'
+import PermitForm from './PermitForm.vue'
+import ImportForm from './ImportForm.vue'
+
+/** 许可证照 列表 */
+defineOptions({ name: 'SafePermit' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<PermitVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  certificateName: undefined,
+  certificateNumber: undefined,
+  issuingAuthority: undefined,
+  issueDate: [],
+  renewalDate: [],
+  expiryDate: [],
+  responsiblePerson: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PermitApi.getPermitPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await PermitApi.deletePermit(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await PermitApi.exportPermit(queryParams)
+    download.excel(data, '许可证照.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 导入按钮操作 */
+const importFormRef = ref()
+const handleImport = () => {
+  importFormRef.value.open()
+}
+
+/** 行点击操作 */
+const handleRowClick = (row: PermitVO) => {
+  openForm('view', row.id)
+}
+
+/** 获取到期日样式 */
+const getExpiryClass = (expiryDate: string) => {
+  if (!expiryDate) return ''
+
+  const today = new Date()
+  const expiry = new Date(expiryDate)
+  const diffTime = expiry.getTime() - today.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+  if (diffDays < 0) {
+    return 'text-red-500' // 已过期
+  } else if (diffDays <= 30) {
+    return 'text-orange-500' // 30天内到期
+  } else if (diffDays <= 90) {
+    return 'text-yellow-500' // 90天内到期
+  }
+  return ''
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/safe/special/index.vue

@@ -0,0 +1,708 @@
+<template>
+  <div class="special-personnel-container">
+
+
+    <!-- 搜索区域 -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="searchForm" inline>
+        <el-form-item label="姓名">
+          <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable />
+        </el-form-item>
+        <el-form-item label="岗位">
+          <el-input v-model="searchForm.position" placeholder="请输入岗位" clearable />
+        </el-form-item>
+        <el-form-item label="证件编号">
+          <el-input v-model="searchForm.certificateNumber" placeholder="请输入证件编号" clearable />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="searchForm.remark" placeholder="请输入备注" clearable />
+        </el-form-item>
+        <el-form-item label="发证日期">
+          <el-date-picker
+            v-model="searchForm.issueDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="有效日期">
+          <el-date-picker
+            v-model="searchForm.validDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+            <Icon icon="mdi:magnify" class="mr-4px" />
+            搜索
+          </el-button>
+          <el-button @click="handleReset">
+            <Icon icon="mdi:refresh" class="mr-4px" />
+            重置
+          </el-button>
+          <el-button @click="handleExport">
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+          <el-button @click="handleImport">
+            <Icon icon="ep:upload" class="mr-5px" /> 导入
+          </el-button>
+          <el-button type="primary" @click="handleAdd">
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 数据表格 -->
+    <el-card shadow="never" class="table-card">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        stripe
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
+        :row-style="{ cursor: 'pointer' }"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="编号" width="80" />
+        <el-table-column prop="name" label="姓名" width="120" />
+        <el-table-column prop="position" label="岗位" width="150" />
+        <el-table-column prop="trainingContent" label="培训内容" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="certificateNumber" label="证件编号" width="150" />
+        <el-table-column prop="issueDate" label="发证日期" width="120" />
+        <el-table-column prop="validDate" label="有效日期" width="120">
+          <template #default="{ row }">
+            <span :class="getValidDateClass(row.validDate)">
+              {{ row.validDate }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="attachments" label="附件" width="100">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.attachments && row.attachments.length > 0"
+              type="text"
+              @click.stop="handleViewAttachments(row)"
+            >
+              查看({{ row.attachments.length }})
+            </el-button>
+            <span v-else>无</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="创建时间" width="160" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="text" @click.stop="handleView(row)">查看</el-button>
+            <el-button type="text" @click.stop="handleEdit(row)">编辑</el-button>
+            <el-button type="text" style="color: #f56c6c" @click.stop="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.pageNo"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="800px"
+      :before-close="handleDialogClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+      >
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="姓名">
+              <el-input v-model="formData.name" placeholder="请输入姓名" :readonly="isViewMode" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="岗位">
+              <el-input v-model="formData.position" placeholder="请输入岗位" :readonly="isViewMode" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="培训内容">
+          <el-input
+            v-model="formData.trainingContent"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入培训内容"
+            :readonly="isViewMode"
+          />
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="证件编号">
+              <el-input v-model="formData.certificateNumber" placeholder="请输入证件编号" :readonly="isViewMode" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="发证日期">
+              <el-date-picker
+                v-model="formData.issueDate"
+                type="date"
+                placeholder="请选择发证日期"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+                :disabled="isViewMode"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="有效日期">
+              <el-date-picker
+                v-model="formData.validDate"
+                type="date"
+                placeholder="请选择有效日期"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+                :disabled="isViewMode"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注信息"
+            :readonly="isViewMode"
+          />
+        </el-form-item>
+        <el-form-item label="上传附件">
+          <el-upload
+            ref="uploadRef"
+            :file-list="fileList"
+            :on-change="handleFileChange"
+            :on-remove="handleFileRemove"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :disabled="isViewMode"
+            multiple
+            drag
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">
+                支持 jpg/png/gif/pdf/doc/docx 文件，且不超过 10MB
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleDialogClose">{{ isViewMode ? '关闭' : '取消' }}</el-button>
+          <el-button v-if="!isViewMode" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 附件查看对话框 -->
+    <el-dialog v-model="attachmentDialogVisible" title="附件列表" width="600px">
+      <el-table :data="currentAttachments" stripe>
+        <el-table-column prop="name" label="文件名" />
+        <el-table-column prop="size" label="文件大小" width="120">
+          <template #default="{ row }">
+            {{ formatFileSize(row.size) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template #default="{ row }">
+            <el-button type="text" @click="handleDownload(row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 导入对话框 -->
+    <el-dialog v-model="importDialogVisible" title="导入Excel" width="400px">
+      <el-upload
+        ref="importUploadRef"
+        :auto-upload="false"
+        :on-change="handleImportFileChange"
+        accept=".xlsx,.xls"
+        drag
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将Excel文件拖到此处，或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            <div>
+              <el-link type="primary" :underline="false" @click="handleDownloadTemplate">
+                下载导入模板
+              </el-link>
+            </div>
+            <div style="color: red; margin-top: 5px;">
+              只能上传 xlsx/xls 文件
+            </div>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="importDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleImportSubmit" :loading="importLoading">确定导入</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
+import type { FormInstance, UploadFile, UploadFiles } from 'element-plus'
+import { SpecialPersonnelApi } from '@/api/safe/special'
+import type { SpecialPersonnelVO, SpecialPersonnelPageReqVO } from '@/api/safe/special'
+import download from '@/utils/download'
+
+// 响应式数据
+const loading = ref(false)
+const submitLoading = ref(false)
+const importLoading = ref(false)
+const dialogVisible = ref(false)
+const attachmentDialogVisible = ref(false)
+const importDialogVisible = ref(false)
+const isViewMode = ref(false)
+const tableData = ref<SpecialPersonnelVO[]>([])
+const selectedRows = ref<SpecialPersonnelVO[]>([])
+const currentAttachments = ref<any[]>([])
+const fileList = ref<UploadFile[]>([])
+const formRef = ref<FormInstance>()
+const uploadRef = ref()
+const importUploadRef = ref()
+const importFile = ref<File>()
+
+// 分页数据
+const pagination = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 搜索表单
+const searchForm = reactive<SpecialPersonnelPageReqVO>({
+  name: '',
+  position: '',
+  certificateNumber: '',
+  remark: '',
+  issueDateRange: [],
+  validDateRange: []
+})
+
+// 表单数据
+const formData = reactive<SpecialPersonnelVO>({
+  id: undefined,
+  name: '',
+  position: '',
+  trainingContent: '',
+  certificateNumber: '',
+  issueDate: '',
+  validDate: '',
+  attachments: [],
+  remark: ''
+})
+
+// 表单验证规则（所有字段都设置为非必填）
+const formRules = {
+  // 所有字段都设置为非必填
+}
+
+// 计算属性
+const dialogTitle = computed(() => {
+  if (isViewMode.value) {
+    return '查看特种岗位人员'
+  }
+  return formData.id ? '编辑特种岗位人员' : '新增特种岗位人员'
+})
+
+// 生命周期
+onMounted(() => {
+  getList()
+})
+
+// 方法
+const getList = async () => {
+  loading.value = true
+  try {
+    const params = {
+      ...searchForm,
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      issueDateStart: searchForm.issueDateRange?.[0],
+      issueDateEnd: searchForm.issueDateRange?.[1],
+      validDateStart: searchForm.validDateRange?.[0],
+      validDateEnd: searchForm.validDateRange?.[1]
+    }
+    delete params.issueDateRange
+    delete params.validDateRange
+
+    const response = await SpecialPersonnelApi.getSpecialPersonnelPage(params)
+    console.log('API响应数据:', response)
+
+    // 检查响应数据结构
+    if (response && response.list !== undefined) {
+      tableData.value = response.list || []
+      pagination.total = response.total || 0
+    } else {
+      console.error('API返回数据格式异常:', response)
+      tableData.value = []
+      pagination.total = 0
+      ElMessage.warning('数据格式异常，请检查后端接口')
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    tableData.value = []
+    pagination.total = 0
+    ElMessage.error('获取数据失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = () => {
+  pagination.pageNo = 1
+  getList()
+}
+
+const handleReset = () => {
+  Object.assign(searchForm, {
+    name: '',
+    position: '',
+    certificateNumber: '',
+    remark: '',
+    issueDateRange: [],
+    validDateRange: []
+  })
+  handleSearch()
+}
+
+const handleAdd = () => {
+  resetForm()
+  isViewMode.value = false
+  dialogVisible.value = true
+}
+
+const handleRowClick = (row: SpecialPersonnelVO) => {
+  handleView(row)
+}
+
+const handleEdit = (row: SpecialPersonnelVO) => {
+  resetForm()
+  isViewMode.value = false
+  Object.assign(formData, { ...row })
+  if (row.attachments) {
+    fileList.value = row.attachments.map((item, index) => ({
+      name: item.name,
+      url: item.url,
+      size: item.size,
+      status: 'success' as const,
+      uid: Date.now() + index
+    }))
+  }
+  dialogVisible.value = true
+}
+
+const handleView = (row: SpecialPersonnelVO) => {
+  resetForm()
+  isViewMode.value = true
+  Object.assign(formData, { ...row })
+  if (row.attachments) {
+    fileList.value = row.attachments.map((item, index) => ({
+      name: item.name,
+      url: item.url,
+      size: item.size,
+      status: 'success' as const,
+      uid: Date.now() + index
+    }))
+  }
+  dialogVisible.value = true
+}
+
+const handleDelete = async (row: SpecialPersonnelVO) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await SpecialPersonnelApi.deleteSpecialPersonnel(row.id!)
+    ElMessage.success('删除成功')
+    getList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error)
+    }
+  }
+}
+
+const handleSubmit = async () => {
+  try {
+    submitLoading.value = true
+
+    // 处理附件数据
+    const submitData = {
+      ...formData,
+      attachments: fileList.value.map(file => ({
+        name: file.name || '',
+        url: file.url || '',
+        size: file.size || 0
+      }))
+    }
+
+    if (submitData.id) {
+      await SpecialPersonnelApi.updateSpecialPersonnel(submitData)
+      ElMessage.success('更新成功')
+    } else {
+      await SpecialPersonnelApi.createSpecialPersonnel(submitData)
+      ElMessage.success('创建成功')
+    }
+
+    dialogVisible.value = false
+    getList()
+  } catch (error) {
+    console.error('提交失败:', error)
+    ElMessage.error('提交失败，请重试')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+const handleDialogClose = () => {
+  dialogVisible.value = false
+  isViewMode.value = false
+  resetForm()
+}
+
+const resetForm = () => {
+  Object.assign(formData, {
+    id: undefined,
+    name: '',
+    position: '',
+    trainingContent: '',
+    certificateNumber: '',
+    issueDate: '',
+    validDate: '',
+    attachments: [],
+    remark: ''
+  })
+  fileList.value = []
+  formRef.value?.clearValidate()
+}
+
+const handleSelectionChange = (selection: SpecialPersonnelVO[]) => {
+  selectedRows.value = selection
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  getList()
+}
+
+const handleCurrentChange = (page: number) => {
+  pagination.pageNo = page
+  getList()
+}
+
+const handleViewAttachments = (row: SpecialPersonnelVO) => {
+  currentAttachments.value = row.attachments || []
+  attachmentDialogVisible.value = true
+}
+
+const handleDownload = (attachment: any) => {
+  window.open(attachment.url, '_blank')
+}
+
+const handleExport = async () => {
+  try {
+    const params = {
+      ...searchForm,
+      issueDateStart: searchForm.issueDateRange?.[0],
+      issueDateEnd: searchForm.issueDateRange?.[1],
+      validDateStart: searchForm.validDateRange?.[0],
+      validDateEnd: searchForm.validDateRange?.[1]
+    }
+    delete params.issueDateRange
+    delete params.validDateRange
+
+    const data = await SpecialPersonnelApi.exportSpecialPersonnelExcel(params)
+    download.excel(data, '特种岗位人员台账.xls')
+    ElMessage.success('导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败，请重试')
+  }
+}
+
+const handleDownloadTemplate = async () => {
+  try {
+    const data = await SpecialPersonnelApi.downloadImportTemplate()
+    download.excel(data, '特种岗位人员台账导入模板.xls')
+    ElMessage.success('模板下载成功')
+  } catch (error) {
+    console.error('模板下载失败:', error)
+    ElMessage.error('模板下载失败，请重试')
+  }
+}
+
+const handleImport = () => {
+  importDialogVisible.value = true
+}
+
+const handleImportFileChange = (file: UploadFile) => {
+  importFile.value = file.raw
+}
+
+const handleImportSubmit = async () => {
+  if (!importFile.value) {
+    ElMessage.warning('请选择要导入的文件')
+    return
+  }
+
+  try {
+    importLoading.value = true
+    await SpecialPersonnelApi.importSpecialPersonnelExcel(importFile.value)
+    ElMessage.success('导入成功')
+    importDialogVisible.value = false
+    getList()
+  } catch (error) {
+    console.error('导入失败:', error)
+  } finally {
+    importLoading.value = false
+  }
+}
+
+const handleFileChange = (_file: UploadFile, _files: UploadFiles) => {
+  // 这里可以添加文件上传逻辑
+}
+
+const handleFileRemove = (_file: UploadFile) => {
+  // 文件移除逻辑
+}
+
+const beforeUpload = (file: File) => {
+  const isValidType = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(file.type)
+  const isValidSize = file.size / 1024 / 1024 < 10
+
+  if (!isValidType) {
+    ElMessage.error('文件格式不正确!')
+    return false
+  }
+  if (!isValidSize) {
+    ElMessage.error('文件大小不能超过 10MB!')
+    return false
+  }
+  return true
+}
+
+const getValidDateClass = (validDate: string) => {
+  if (!validDate) return ''
+
+  const today = new Date()
+  const valid = new Date(validDate)
+  const diffTime = valid.getTime() - today.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+  if (diffDays < 0) {
+    return 'text-red-500' // 已过期
+  } else if (diffDays <= 30) {
+    return 'text-orange-500' // 即将过期
+  }
+  return ''
+}
+
+const formatFileSize = (size: number) => {
+  if (!size) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(size) / Math.log(k))
+  return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+</script>
+
+<style scoped>
+.special-personnel-container {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.search-card {
+  margin-bottom: 20px;
+}
+
+.table-card {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.text-red-500 {
+  color: #f56c6c;
+}
+
+.text-orange-500 {
+  color: #e6a23c;
+}
+</style>