BusinessRulesManagement.vue

<template>
  <div class="space-y-6">
    <!-- 页面标题和操作区 -->
    <div class="flex items-center justify-between">
      <h3 class="text-neutral-900 text-[20px] font-bold">业务酬金管理</h3>
      <div class="flex">
        <el-button 
          @click="handleDownloadTemplate"
          class="h-10"
        >
          <Download class="h-4 w-4 mr-1" />
          下载模板
        </el-button>
        <el-button 
          @click="handleBatchUpload"
          class="h-10"
        >
          <Upload class="h-4 w-4 mr-1" />
          批量上传
        </el-button>
        <el-button 
          type="primary"
          @click="handleOpenDialog()"
          class="h-10"
        >
          <Plus class="h-4 w-4 mr-1" />
          新建业务
        </el-button>
      </div>
    </div>

    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInputRef"
      type="file"
      accept=".csv"
      @change="handleFileChange"
      style="display: none"
    />

    <!-- 筛选条件区 -->
    <el-card class="p-5">
      <div class="flex items-center gap-3 w-full">
        <!-- 搜索框 -->
        <div class="flex-1 relative">
          <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-neutral-500 z-10" />
          <el-input
            v-model="searchKeyword"
            placeholder="搜索业务代码或业务名称..."
            class="search-input"
            clearable
          />
        </div>
        
        <!-- 查询按钮 -->
        <div class="shrink-0">
          <el-button 
            type="primary"
            @click="handleSearch"
            class="h-10"
          >
            查询
          </el-button>
        </div>
      </div>
    </el-card>


    <!-- 业务规则表格 -->
    <el-card class="p-5">
      <div class="flex items-center justify-between mb-4">
        <div class="text-sm text-neutral-600">
          共 {{ filteredRules.length }} 条记录
        </div>
      </div>
      <div class="rounded-lg overflow-hidden">
        <el-table
          :data="paginatedRules"
          stripe
          class="w-full"
          :header-cell-style="{ backgroundColor: '#f3f4f6', color: '#374151', fontWeight: '500', borderBottom: '1px solid #e5e7eb' }"
          row-class-name="hover:bg-muted/30"
        >
          <el-table-column prop="businessCode" label="业务代码" min-width="120">
            <template #default="{ row }">
              <span class="font-mono">{{ row.businessCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="businessName" label="业务名称" min-width="150" />
          <el-table-column label="预计酬金（元）" min-width="120">
            <template #default="{ row }">
              ¥{{ row.estimatedReward.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="业务状态" min-width="100">
            <template #default="{ row }">
              <el-tag
                :type="row.status === '生效中' ? 'success' : 'info'"
                class="border-0"
              >
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="150">
            <template #default="{ row }">
              {{ row.createTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="150">
            <template #default="{ row }">
              {{ row.updateTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200" fixed="right">
            <template #default="{ row }">
              <div class="flex items-center gap-4">
                <button
                  @click="handleOpenDialog(row)"
                  :disabled="row.status === '已停用'"
                  class="text-brand-primary hover:text-brand-primary-hover disabled:text-neutral-400 disabled:cursor-not-allowed bg-transparent border-none cursor-pointer text-sm font-normal p-0"
                >
                  编辑
                </button>
                <button
                  @click="handleDeleteConfirm(row.id)"
                  class="text-brand-primary hover:text-brand-primary-hover bg-transparent border-none cursor-pointer text-sm font-normal p-0"
                >
                  删除
                </button>
              </div>
            </template>
          </el-table-column>
          
          <!-- 空状态 -->
          <template #empty>
            <div class="text-center py-12 text-neutral-500">
              {{ searchKeyword ? '没有找到匹配的业务' : '暂无业务规则' }}
            </div>
          </template>
        </el-table>
      </div>
      
      <!-- 分页组件 -->
      <div v-if="totalPages > 1" class="flex items-center justify-between px-6 py-4">
        <div class="text-sm text-neutral-600">
          显示第 {{ startIndex + 1 }}-{{ Math.min(endIndex, filteredRules.length) }} 条，共 {{ filteredRules.length }} 条
        </div>
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="filteredRules.length"
          layout="prev, pager, next"
          :pager-count="5"
          small
        />
      </div>
    </el-card>

    <!-- 新建/编辑业务规则对话框 -->
    <el-dialog
      v-model="isDialogOpen"
      :title="editingRule ? '编辑业务规则' : '新建业务规则'"
      width="500px"
      :close-on-click-modal="false"
      class="business-rule-dialog"
    >
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">
            业务代码 <span class="text-red-500">*</span>
          </label>
          <el-input
            v-model="formData.businessCode"
            placeholder="请输入业务代码，如：B5G001"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">
            业务名称 <span class="text-red-500">*</span>
          </label>
          <el-input
            v-model="formData.businessName"
            placeholder="请输入业务名称，如：5G套餐办理"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">
            预计酬金（元） <span class="text-red-500">*</span>
          </label>
          <el-input-number
            v-model="formData.estimatedReward"
            :min="0"
            :step="0.01"
            :precision="2"
            placeholder="请输入预计酬金"
            class="w-full"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">状态</label>
          <el-radio-group v-model="formData.status">
            <el-radio label="生效中">启用</el-radio>
            <el-radio label="已停用">停用</el-radio>
          </el-radio-group>
        </div>
      </div>
      
      <template #footer>
        <div class="flex gap-2 justify-end">
          <el-button @click="handleCloseDialog">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            {{ editingRule ? '保存' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 批量上传结果对话框 -->
    <el-dialog
      v-model="showUploadResult"
      title="批量上传结果"
      width="600px"
      class="upload-result-dialog"
    >
      <div class="space-y-4">
        <div class="flex items-center gap-4 p-4 bg-neutral-50 rounded-lg">
          <div class="flex items-center gap-2 flex-1">
            <CheckCircle class="h-5 w-5 text-green-500" />
            <span>成功导入：</span>
            <span class="text-green-500">{{ uploadResult?.success || 0 }}</span>
            <span>条</span>
          </div>
          <div class="flex items-center gap-2 flex-1">
            <AlertCircle class="h-5 w-5 text-red-500" />
            <span>导入失败：</span>
            <span class="text-red-500">{{ uploadResult?.failed || 0 }}</span>
            <span>条</span>
          </div>
        </div>

        <div v-if="uploadResult && uploadResult.errors.length > 0" class="space-y-2">
          <div class="text-sm text-neutral-600">错误详情：</div>
          <div class="max-h-60 overflow-y-auto border border-neutral-200 rounded p-3 space-y-1 bg-neutral-50">
            <div
              v-for="(error, index) in uploadResult.errors"
              :key="index"
              class="text-sm text-red-500"
            >
              {{ error }}
            </div>
            <div
              v-if="uploadResult.errors.length >= 20"
              class="text-sm text-neutral-500 italic"
            >
              仅显示前20条错误信息...
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button type="primary" @click="showUploadResult = false">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Download, Upload, Plus, Search, CheckCircle, AlertCircle } from 'lucide-vue-next'
// import * as XLSX from 'xlsx' // 暂时注释掉，因为没有安装xlsx包

// 业务规则类型定义
interface BusinessRule {
  id: string
  businessCode: string
  businessName: string
  estimatedReward: number
  status: '生效中' | '已停用'
  createTime?: string
  updateTime?: string
}

interface UploadResult {
  success: number
  failed: number
  errors: string[]
}

// Props
interface Props {
  rules: BusinessRule[]
}

const props = withDefaults(defineProps<Props>(), {
  rules: () => []
})

// Emits
const emit = defineEmits<{
  add: [rule: Omit<BusinessRule, 'id' | 'createTime'>]
  update: [id: string, updates: Partial<BusinessRule>]
  toggleStatus: [id: string]
  delete: [id: string]
}>()

// 响应式数据
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const isDialogOpen = ref(false)
const editingRule = ref<BusinessRule | null>(null)
const uploadResult = ref<UploadResult | null>(null)
const showUploadResult = ref(false)
const fileInputRef = ref<HTMLInputElement>()

const formData = ref({
  businessCode: '',
  businessName: '',
  estimatedReward: 0,
  status: '生效中' as '生效中' | '已停用'
})

// 计算属性
const filteredRules = computed(() => {
  return props.rules.filter(rule => {
    const matchesSearch = !searchKeyword.value || 
      rule.businessCode.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      rule.businessName.toLowerCase().includes(searchKeyword.value.toLowerCase())
    
    return matchesSearch
  })
})

const totalPages = computed(() => Math.ceil(filteredRules.value.length / pageSize.value))
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)
const endIndex = computed(() => startIndex.value + pageSize.value)
const paginatedRules = computed(() => filteredRules.value.slice(startIndex.value, endIndex.value))

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleOpenDialog = (rule?: BusinessRule) => {
  if (rule) {
    editingRule.value = rule
    formData.value = {
      businessCode: rule.businessCode,
      businessName: rule.businessName,
      estimatedReward: rule.estimatedReward,
      status: rule.status
    }
  } else {
    editingRule.value = null
    formData.value = {
      businessCode: '',
      businessName: '',
      estimatedReward: 0,
      status: '生效中'
    }
  }
  isDialogOpen.value = true
}

const handleCloseDialog = () => {
  isDialogOpen.value = false
  editingRule.value = null
  formData.value = {
    businessCode: '',
    businessName: '',
    estimatedReward: 0,
    status: '生效中'
  }
}

const handleSubmit = () => {
  if (!formData.value.businessCode.trim() || !formData.value.businessName.trim() || formData.value.estimatedReward <= 0) {
    ElMessage.error('请填写完整信息')
    return
  }

  if (editingRule.value) {
    emit('update', editingRule.value.id, {
      businessCode: formData.value.businessCode,
      businessName: formData.value.businessName,
      estimatedReward: formData.value.estimatedReward,
      status: formData.value.status
    })
  } else {
    emit('add', {
      businessCode: formData.value.businessCode,
      businessName: formData.value.businessName,
      estimatedReward: formData.value.estimatedReward,
      status: formData.value.status
    })
  }

  handleCloseDialog()
}

const handleToggleStatus = (id: string) => {
  emit('toggleStatus', id)
}

const handleDeleteConfirm = async (id: string) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条业务规则吗？此操作无法撤销。',
      '确认删除',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    emit('delete', id)
  } catch {
    // 用户取消删除
  }
}

const handleDownloadTemplate = () => {
  try {
    // 创建下载链接
    const link = document.createElement('a')
    // 使用相对路径，确保本地和线上都能正常访问
    link.href = '/static/file/rule_tem.xlsx'
    link.download = '业务规则批量上传模板.xlsx'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('下载模板失败:', error)
    ElMessage.error('模板下载失败，请稍后重试')
  }
}

const handleBatchUpload = () => {
  fileInputRef.value?.click()
}

const handleFileChange = async (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return

  // 重置文件输入框
  target.value = ''

  // 验证文件大小（2MB）
  const maxSize = 2 * 1024 * 1024
  if (file.size > maxSize) {
    ElMessage.error('文件大小超过2MB限制，请压缩后重新上传')
    return
  }

  // 验证文件格式
  const fileName = file.name.toLowerCase()
  if (!fileName.endsWith('.csv')) {
    ElMessage.error('目前仅支持 .csv 格式的文件')
    return
  }

  try {
    let data: any[] = []

    if (fileName.endsWith('.csv')) {
      // 解析 CSV 文件
      const text = await file.text()
      const lines = text.split('\n').filter(line => line.trim())
      
      if (lines.length < 2) {
        ElMessage.error('文件内容为空')
        return
      }

      // 跳过表头，从第二行开始解析
      for (let i = 1; i < lines.length; i++) {
        const line = (lines[i] || '').trim()
        if (!line) continue
        
        const columns = line.split(',').map(col => col.trim())
        if (columns.length >= 3) {
          data.push({
            businessName: columns[0],
            businessCode: columns[1],
            estimatedReward: columns[2]
          })
        }
      }
    } else {
      // 解析 XLSX 文件 (暂时禁用)
      ElMessage.error('XLSX功能暂未启用，请使用CSV格式')
      return
      // const arrayBuffer = await file.arrayBuffer()
      // const workbook = XLSX.read(arrayBuffer, { type: 'array' })
      // const sheetName = workbook.SheetNames[0]
      // const worksheet = workbook.Sheets[sheetName]
      // const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

      // 跳过表头（XLSX 逻辑禁用中）
    }

    // 验证数据量
    if (data.length === 0) {
      ElMessage.error('文件中没有有效数据')
      return
    }

    if (data.length > 1000) {
      ElMessage.error('数据量超过1000条限制，请分批上传')
      return
    }

    // 验证并导入数据
    processUploadData(data)
  } catch (error) {
    console.error('文件解析失败:', error)
    ElMessage.error('文件解析失败，请检查文件格式是否正确')
  }
}

const processUploadData = (data: any[]) => {
  const errors: string[] = []
  let successCount = 0
  let failedCount = 0

  // 获取现有的业务代码集合
  const existingCodes = new Set(props.rules.map(r => r.businessCode.toLowerCase()))

  data.forEach((row, index) => {
    const rowNum = index + 2 // Excel行号（从1开始，跳过表头）

    // 验证必填字段
    if (!row.businessName || !row.businessCode || !row.estimatedReward) {
      errors.push(`第${rowNum}行：缺少必填字段`)
      failedCount++
      return
    }

    // 验证业务代码是否重复（与现有数据）
    if (existingCodes.has(row.businessCode.toLowerCase())) {
      errors.push(`第${rowNum}行：业务代码"${row.businessCode}"已存在，请修改后重新上传`)
      failedCount++
      return
    }

    // 验证酬金金额
    const amount = parseFloat(row.estimatedReward)
    if (isNaN(amount) || amount <= 0) {
      errors.push(`第${rowNum}行：预计酬金格式不正确`)
      failedCount++
      return
    }

    // 验证通过，添加到系统
    try {
      emit('add', {
        businessCode: row.businessCode,
        businessName: row.businessName,
        estimatedReward: amount,
        status: '生效中'
      })
      
      // 将新添加的代码加入集合，避免批量数据内部重复
      existingCodes.add(row.businessCode.toLowerCase())
      successCount++
    } catch (error) {
      errors.push(`第${rowNum}行：添加失败`)
      failedCount++
    }
  })

  // 显示上传结果
  uploadResult.value = {
    success: successCount,
    failed: failedCount,
    errors: errors.slice(0, 20) // 最多显示20条错误
  }
  showUploadResult.value = true

  if (successCount > 0 && failedCount === 0) {
    ElMessage.success(`成功导入${successCount}条业务规则`)
  } else if (successCount > 0 && failedCount > 0) {
    ElMessage.warning(`成功导入${successCount}条，失败${failedCount}条`)
  } else {
    ElMessage.error(`导入失败，共${failedCount}条错误`)
  }
}
</script>

<style scoped>
/* 搜索框样式 */
:deep(.search-input .el-input__wrapper) {
  padding-left: 40px;
  background-color: #f5f5f5;
  border: none;
  box-shadow: none;
}

:deep(.search-input .el-input__inner) {
  background-color: transparent;
}

/* 状态选择器样式 */
:deep(.status-select .el-input__wrapper) {
  background-color: #f5f5f5;
  border: none;
  box-shadow: none;
}

/* 表格样式优化：圆角由全局控制描边，这里仅保持圆角一致 */
:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table .el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

:deep(.el-table .bg-blue-50\/50) {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

:deep(.el-table .hover\:bg-muted\/30:hover) {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* 分页样式 */
:deep(.el-pagination) {
  justify-content: flex-end;
}

:deep(.el-pagination .el-pager li) {
  min-width: 32px;
  height: 32px;
  line-height: 30px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  height: 32px;
  line-height: 30px;
}

/* 强制修复dialog遮罩层定位问题 */
:deep(.el-overlay-dialog) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

:deep(.el-overlay-dialog .el-dialog) {
  position: relative !important;
  margin: 0 auto !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  z-index: 10002 !important;
}
</style>