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,.xlsx"
      @change="handleFileChange"
      style="display: none"
    />


    <!-- 业务规则表格 -->
    <el-card class="p-5">
      <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="jobId" label="业务代码" min-width="120">
            <template #default="{ row }">
              <span class="font-mono">{{ row.jobId }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="jobName" label="业务名称" min-width="150" />
          <el-table-column label="预计酬金（元）" min-width="120">
            <template #default="{ row }">
              ¥{{ row.totalPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="业务状态" min-width="100">
            <template #default="{ row }">
              <el-tag
                :type="row.status === 1 ? 'success' : 'info'"
                class="border-0"
              >
                {{ row.status===1?'生效中':'已停用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="150">
            <template #default="{ row }">
              {{ $utils.detailTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="150">
            <template #default="{ row }">
              {{ $utils.detailTime(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>
    </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="1">生效</el-radio>
            <el-radio label="0">停用</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>
        </div>
      </div>
      
      <template #footer>
        <el-button type="primary" @click="submitExcelData">{{(uploadResult?.failed || 0)>0?'确定':'提交'}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick ,onMounted,getCurrentInstance} 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包
const { $api,$utils } = getCurrentInstance()!.appContext.config.globalProperties
// 业务规则类型定义
interface BusinessRule {
  id: string
  jobId: string
  jobName: string
  totalPrice: number
  status: '1' | '0'
  createTime?: string
  updateTime?: string
}

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

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

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

onMounted(() => {
  queryRewardList()
})
const queryRewardList = async ()=>{
  try {
    const response = await $api.queryAllRewardList({})
    
    if (response.c === 0 && response.d) {
      paginatedRules.value = response.d
    } else {
      
    }
  } catch (error) {
    
  }
}

// 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: '1'
})

const paginatedRules = ref([])

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

const handleOpenDialog = (rule?: BusinessRule) => {
  if (rule) {
    editingRule.value = rule
    formData.value = {
      businessCode: rule.jobId,
      businessName: rule.jobName,
      estimatedReward: rule.totalPrice,
      status: rule.status+''
    }
  } else {
    editingRule.value = null
    formData.value = {
      businessCode: '',
      businessName: '',
      estimatedReward: 0,
      status: '1'
    }
  }
  isDialogOpen.value = true
}

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

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

  try {
    const response = await $api.updateReward({
      id: editingRule.value?editingRule.value.id:'',
      jobName: formData.value.businessName,
      jobId: formData.value.businessCode,
      totalPrice: formData.value.estimatedReward,
      status: formData.value.status
    })
    if(response.c === 0){
      ElMessage.success('新建成功')

      queryRewardList()
    }else{
      ElMessage.error(response.m)
    }
  } catch (error) {
    ElMessage.error('文件解析失败，请检查文件格式是否正确')
  }

  handleCloseDialog()
}

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

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

    if(response.c === 0){
      ElMessage.success('删除成功')
      queryRewardList()
    }else{
      ElMessage.error(response.m || '删除失败')
    }
  } 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') && !fileName.endsWith('.xlsx')) {
    ElMessage.error('目前仅支持 csv和xlsx 格式的文件')
    return
  }

  try {
      const fd = new FormData()
      fd.append('file', file)

      const response = await $api.uploadReward(fd)
      if(response.c === 0){
        processUploadData(response.d.list)
      }else{
        ElMessage.error(response.m)
      }
  } catch (error) {
    ElMessage.error('文件解析失败，请检查文件格式是否正确')
  }
}

const submitExcelData = async ()=>{
  if((uploadResult.value?.failed || 0) > 0){
    showUploadResult.value = false
    return 
  }

  try {
      const response = await $api.uploadRewardSave({
        list: excelShowdData.value
      })
      if(response.c === 0){
        ElMessage.success('上传成功')
        showUploadResult.value = false
        queryRewardList()
      }else{
        ElMessage.error(response.m)
      }
  } catch (error) {
    ElMessage.error('文件解析失败，请检查文件格式是否正确')
  }
}

const excelShowdData = ref<any[]>([])
const processUploadData = (data: any[]) => {
  const errors: string[] = []
  let successCount = 0
  let failedCount = 0
  excelShowdData.value = data

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

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

    if (row.memo) {
      errors.push(`第${rowNum}行：${row.memo}`)
      failedCount++
      return
    }

    // 验证通过，添加到系统
    try {
      successCount++
    } catch (error) {
      errors.push(`第${rowNum}行：添加失败`)
      failedCount++
    }
  })

  // 显示上传结果
  uploadResult.value = {
    success: successCount,
    failed: failedCount,
    errors: errors
  }
  showUploadResult.value = true
}
</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>