StaffList.vue

<template>
  <div class="staff-list-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>工维人员管理</span>
          <div>
            <el-button type="primary" @click="handleAddStaff">新增工维人员</el-button>
            <el-button type="success" @click="handleDownloadTemplate">下载模板</el-button>
            <el-button type="primary" @click="handleBulkUpload">批量导入</el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="4">
            <el-input
              v-model="filterForm.phone"
              placeholder="登录手机号"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="filterForm.campaignId"
              placeholder="工维人员工号"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 工维人员列表 -->
      <el-table :data="tableData" :height="tableForm.height" border style="width: 100%" >
        <el-table-column prop="phone" label="登录手机号" width="220"></el-table-column>
        <el-table-column prop="campaignId" label="工维人员工号" width="220"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container" style="margin-top: 20px; text-align: right;">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper,sizes"
          :page-sizes="pagination.pageSizes"
          @sizeChange="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/修改工维人员对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="400px"
    >
      <el-form :model="staffForm" :rules="staffRules" ref="staffFormRef" label-width="120px">
        <el-form-item label="工维人员工号" prop="campaignId">
          <el-input v-model="staffForm.campaignId" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="登录手机号" prop="phone">
          <el-input v-model="staffForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmStaff">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 批量导入对话框 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="批量导入工维人员"
      width="700px"
      class="upload-dialog"
    >
      <div v-if="!importTableData.length">
        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          accept=".xlsx,.xls"
          :show-file-list="false"
        >
          <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">
              请上传Excel文件，且不超过10MB
            </div>
          </template>
        </el-upload>
      </div>

      <div v-else class="import-data-section">
        <div class="import-stats" style="margin-bottom: 20px;">
          <el-alert
            :title="`共解析到 ${importTableData.length} 条数据，其中 ${errorCount} 条有错误`"
            :type="errorCount > 0 ? 'warning' : 'success'"
            show-icon
            :closable="false"
          />
        </div>

        <el-table :data="importTableData" border style="width: 100%" max-height="400" :row-class-name="tableRowClassName">
          <el-table-column label="状态" width="80" align="center">
            <template #default="scope">
              <el-icon v-if="scope.row.reason && scope.row.reason.trim() !== ''" color="#f56c6c" size="20">
                <Warning />
              </el-icon>
              <el-icon v-else color="#67c23a" size="20">
                <SuccessFilled />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="campaignId" label="工维人员工号" width="180"></el-table-column>
          <el-table-column prop="phone" label="登录手机号" width="150"></el-table-column>
          <el-table-column prop="reason" label="错误信息" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.reason && scope.row.reason.trim() !== ''" style="color: #f56c6c;">
                <el-icon color="#f56c6c" style="margin-right: 5px;"><Warning /></el-icon>
                {{ scope.row.reason }}
              </span>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px; text-align: center;">
          <el-button @click="handleResetUpload">重新上传</el-button>
          <el-button type="success" :disabled="errorCount > 0" @click="confirmImportData">
            确认提交
          </el-button>
        </div>
      </div>

      <template #footer v-if="!importTableData.length">
        <span class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="删除工维人员"
      width="30%"
    >
      <p>确定要删除该工维人员吗？</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled, Warning, SuccessFilled } from '@element-plus/icons-vue'
import {
  getStaffList,
  addStaff,
  updateStaff,
  deleteStaff,
  bulkImportStaff,
  submitImportStaff
} from '../utils/api'

const tableData = ref([])
const dialogVisible = ref(false)
const uploadDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const isEdit = ref(false)
const dialogTitle = ref('新增工维人员')
const currentDeleteRow = ref(null)
const importTableData = ref([])
const tableForm = reactive({
  height: window.top.document.body.offsetHeight - 356
})

// 计算错误数量
const errorCount = computed(() => {
  return importTableData.value.filter(item => item.reason && item.reason.trim() !== '').length
})

const filterForm = reactive({
  phone: '',
  campaignId: ''
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  pageSizes: [20, 50, 100],
  total: 0
})

const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  pagination.currentPage = 1; // 重置到第一页
  getStaffListData();
};

const staffForm = reactive({
  id: '',
  campaignId: '',
  phone: ''
})

const staffRules = {
  campaignId: [
    { required: true, message: '请输入工维人员工号', trigger: 'blur' }
  ],
  phone: [
    { required: false, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const staffFormRef = ref()

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 获取工维人员列表
const getStaffListData = async () => {
  try {
    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize
    }

    if (filterForm.phone) params.phone = filterForm.phone
    if (filterForm.campaignId) params.campaignId = filterForm.campaignId

    const response = await getStaffList(params)
    if (response.code === 200) {
      tableData.value = response.data.records || []
      pagination.total = response.data.total
    } else {
      ElMessage.error(response.msg || '获取工维人员列表失败')
    }
  } catch (error) {
    ElMessage.error('获取工维人员列表失败: ' + error.message)
  }
}

// 筛选
const handleFilter = () => {
  pagination.currentPage = 1
  getStaffListData()
}

// 重置筛选
const resetFilter = () => {
  filterForm.phone = ''
  filterForm.campaignId = ''
  handleFilter()
}

// 分页切换
const handlePageChange = (page) => {
  pagination.currentPage = page
  getStaffListData()
}

// 新增工维人员
const handleAddStaff = () => {
  isEdit.value = false
  dialogTitle.value = '新增工维人员'
  staffForm.id = ''
  staffForm.campaignId = ''
  staffForm.phone = ''
  dialogVisible.value = true
}

// 修改工维人员
const handleEdit = (row) => {
  isEdit.value = true
  dialogTitle.value = '修改工维人员'
  staffForm.id = row.id
  staffForm.campaignId = row.campaignId
  staffForm.phone = row.phone || ''
  dialogVisible.value = true
}

// 确认新增/修改工维人员
const confirmStaff = async () => {
  if (!staffFormRef.value) return

  await staffFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        let response
        if (isEdit.value) {
          // 修改工维人员
          response = await updateStaff({
            campaignId: staffForm.campaignId,
            id: staffForm.id,
            phone: staffForm.phone
          })
        } else {
          // 新增工维人员
          response = await addStaff({
            campaignId: staffForm.campaignId,
            phone: staffForm.phone
          })
        }

        if (response.code === 200) {
          ElMessage.success(isEdit.value ? '修改成功' : '新增成功')
          dialogVisible.value = false
          getStaffListData()
        } else {
          ElMessage.error(response.msg || (isEdit.value ? '修改失败' : '新增失败'))
        }
      } catch (error) {
        ElMessage.error((isEdit.value ? '修改失败' : '新增失败') + ': ' + error.message)
      }
    }
  })
}

// 删除工维人员
const handleDelete = (row) => {
  currentDeleteRow.value = row
  deleteDialogVisible.value = true
}

// 确认删除工维人员
const confirmDelete = async () => {
  try {
    const response = await deleteStaff({
      campaignId: currentDeleteRow.value.campaignId,
      userIds: [currentDeleteRow.value.id]
    })
    if (response.code === 200) {
      ElMessage.success('删除成功')
      deleteDialogVisible.value = false
      getStaffListData()
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error) {
    ElMessage.error('删除失败: ' + error.message)
  }
}

// 下载模板
const handleDownloadTemplate = async () => {
  try {
    // 动态导入Excel文件
    const module = await import('/src/assets/employee_tem.xlsx')
    const response = await fetch(module.default)
    const blob = await response.blob()

    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = '工维人员信息模板.xlsx'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    ElMessage.success('模板下载成功')
  } catch (error) {
    ElMessage.error('模板下载失败: ' + error.message)
  }
}

// 批量导入
const handleBulkUpload = () => {
  uploadDialogVisible.value = true
}

// 上传前检查
const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('上传文件大小不能超过 10MB!')
  }
  return isLt10M
}

// 文件变化处理
const handleFileChange = async (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('上传文件大小不能超过 10MB!')
    return
  }

  try {
    // 使用bulkImportStaff接口上传文件
    const response = await bulkImportStaff(file.raw)

    if (response.code === 200) {
      // 展示解析的数据
      importTableData.value = response.data || []
      ElMessage.success('文件解析成功')
    } else if (response.code === 400 && response.data) {
      // 如果后端返回的是解析后的数据（包含错误信息）
      importTableData.value = response.data || []
      ElMessage.warning('文件解析完成，部分数据有错误')
    } else {
      ElMessage.error(response.msg || '导入失败')
    }
  } catch (error) {
    ElMessage.error('文件上传失败: ' + error.message)
    console.error('Upload error:', error)
  }
}

// 表格行样式类名
const tableRowClassName = ({ row, rowIndex }) => {
  // 如果reason有值，则添加错误行样式
  if (row.reason && row.reason.trim() !== '') {
    return 'error-row'
  }
  return ''
}

// 重新上传
const handleResetUpload = () => {
  importTableData.value = []
}

// 确认提交导入数据
const confirmImportData = async () => {
  if (errorCount.value > 0) {
    ElMessage.error('请先修正数据中的错误')
    return
  }

  try {
    // 过滤掉没有错误的数据
    const validData = importTableData.value.filter(item => !item.reason || item.reason.trim() === '')

    const response = await submitImportStaff({
      userAdminList: validData
    })

    if (response.code === 200) {
      ElMessage.success(`成功导入${validData.length}条工维人员记录`)
      uploadDialogVisible.value = false
      importTableData.value = []
      getStaffListData()
    } else {
      ElMessage.error(response.msg || '提交失败')
    }
  } catch (error) {
    ElMessage.error('提交失败: ' + error.message)
  }
}


// 初始化数据
onMounted(() => {
  getStaffListData()
})
</script>

<style scoped>
.staff-list-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-section {
  margin-bottom: 20px;
}

/* 导入弹窗样式 */
.upload-dialog .el-dialog__header {
  border-bottom: 1px solid #f0f0f0;
  padding: 15px 20px;
}

.upload-dialog .el-dialog__body {
  padding: 20px;
}

.import-data-section {
  padding: 10px 0;
}

/* 错误行样式 */
.error-row {
  background-color: #fef0f0 !important;
  border-left: 3px solid #f56c6c !important;
  animation: shake 0.5s ease-in-out;
}

.error-row:hover {
  background-color: #fde2e2 !important;
}

/* 错误行中的所有单元格样式 */
.error-row td {
  color: #f56c6c !important;
  font-weight: 500;
  border-color: #f56c6c !important;
}

/* 抖动动画效果 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.import-stats .el-alert {
  margin-bottom: 15px;
}
</style>