OrderList.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Download, View, Edit, Warning } from '@element-plus/icons-vue'
import type { Order, OrderQuery } from '../types/order'
import { generateMockOrders } from '../mock/orderData'
import { ElMessage, ElMessageBox } from 'element-plus'

// --- State ---
const loading = ref(false)
const tableData = ref<Order[]>([])
const cities = ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市']
const router = useRouter()

// Search Form
const queryForm = reactive<OrderQuery>({
  businessAccount: '',
  applyId: '',
  orderId: '',
  workerId: '',
  city: '',
  status: '',
  dateRange: undefined,
  noPhotoCountMin: undefined,
  manualInputCountMin: undefined,
  envAbnormalCountMin: undefined,
  isAbnormal: '',
  page: 1,
  pageSize: 10
})

const total = ref(100) // Mock total

// --- Methods ---
const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockOrders(queryForm.pageSize)
    loading.value = false
  }, 500)
}

const handleSearch = () => {
  queryForm.page = 1
  fetchData()
}

const handleReset = () => {
  // Reset logic
  queryForm.businessAccount = ''
  queryForm.applyId = '' 
  // ... others
  handleSearch()
}

const handleExport = () => {
  ElMessage.success('正在导出Excel...')
}

// Table Handlers
const handlePageChange = (val: number) => {
  queryForm.page = val
  fetchData()
}

// Dialogs State
const dialogVisible = reactive({
  orderIds: false,
  cannotQc: false,
  markCheating: false,
  cancelCheating: false,
  details: false,
  cheatingInfo: false
})

const currentOrder = ref<Order | null>(null)
const detailsType = ref<'noPhoto' | 'manual' | 'env'>('noPhoto')
const detailsTitle = ref('')
const detailsData = ref<DetailRecord[]>([])

// Forms
const cannotQcForm = reactive({
  type: '',
  reason: ''
})
const markCheatingForm = reactive({
  reason: '',
  remark: ''
})

// --- Actions ---

// 1. Order IDs
const openIdsDialog = (row: Order) => {
  currentOrder.value = row
  dialogVisible.orderIds = true
}

// 2. Numeric Details Popup
const openDetailsDialog = (row: Order, type: 'noPhoto' | 'manual' | 'env') => {
  currentOrder.value = row
  detailsType.value = type
  
  if (type === 'noPhoto') {
    detailsTitle.value = '无法拍摄明细'
    // Mock details
    detailsData.value = [
      { id: 1, process: '光猫识别', reason: '光线太暗', time: '2023-10-01 10:05:00' },
      { id: 2, process: '机顶盒识别', reason: '设备遮挡', time: '2023-10-01 10:10:00' }
    ]
  } else if (type === 'manual') {
    detailsTitle.value = '手动输入明细'
    detailsData.value = [
       { id: 1, process: 'SN码输入', time: '2023-10-01 10:15:00' }
    ]
  } else {
    detailsTitle.value = '环境异常明细'
    detailsData.value = [
       { id: 1, process: '背景检测', reason: '疑似非用户家', time: '2023-10-01 10:00:00' }
    ]
  }
  dialogVisible.details = true
}

// 3. Cheating Info Popup
const openCheatingInfo = (row: Order) => {
  currentOrder.value = row
  dialogVisible.cheatingInfo = true
}

// 4. Cannot QC Action
const openCannotQcDialog = (row: Order) => {
  currentOrder.value = row
  cannotQcForm.type = ''
  cannotQcForm.reason = ''
  dialogVisible.cannotQc = true
}
const submitCannotQc = () => {
  if (!cannotQcForm.type || !cannotQcForm.reason) {
    ElMessage.warning('请填写完整信息')
    return
  }
  ElMessage.success('提交成功')
  dialogVisible.cannotQc = false
  // Refresh data logic here
}

// 5. Mark Cheating Action
const openMarkCheating = (row: Order) => {
  currentOrder.value = row
  markCheatingForm.reason = ''
  markCheatingForm.remark = ''
  dialogVisible.markCheating = true
}
const submitMarkCheating = () => {
  if (!markCheatingForm.reason) {
    ElMessage.warning('请选择异常原因')
    return
  }
  ElMessage.success('标记成功')
  dialogVisible.markCheating = false
  if (currentOrder.value) currentOrder.value.isCheating = true
}

// 6. Cancel Cheating Action
const openCancelCheating = (row: Order) => {
  ElMessageBox.confirm(
    '确认要取消该工单的作弊标记吗？',
    '取消作弊',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('取消成功')
    row.isCheating = false
  })
}

// Initial Fetch
fetchData()
</script>

<template>
  <div class="p-4">
    <!-- Search Area -->
    <el-card shadow="never" class="mb-4">
      <el-form :model="queryForm" label-width="90px" class="flex flex-wrap">
        <el-form-item label="业务账号">
          <el-input v-model="queryForm.businessAccount" placeholder="手机号/固话" clearable class="!w-48" />
        </el-form-item>
        <el-form-item label="Apply_id">
          <el-input v-model="queryForm.applyId" placeholder="请输入" clearable class="!w-48" />
        </el-form-item>
        <el-form-item label="工单ID">
          <el-input v-model="queryForm.orderId" placeholder="请输入" clearable class="!w-48" />
        </el-form-item>
        <el-form-item label="师傅工号">
          <el-input v-model="queryForm.workerId" placeholder="请输入" clearable class="!w-48" />
        </el-form-item>
        <el-form-item label="所属地市">
          <el-select v-model="queryForm.city" placeholder="请选择" clearable class="!w-48">
            <el-option v-for="city in cities" :key="city" :label="city" :value="city" />
          </el-select>
        </el-form-item>
        <el-form-item label="质检状态">
          <el-select v-model="queryForm.status" placeholder="请选择" clearable class="!w-48">
            <el-option label="全部" value="" />
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已完成" value="已完成" />
            <el-option label="无法质检" value="无法质检" />
          </el-select>
        </el-form-item>
        <el-form-item label="质检时间">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="!w-80"
          />
        </el-form-item>
        <el-form-item label="无法拍摄">
          <el-input-number v-model="queryForm.noPhotoCountMin" :min="1" controls-position="right" class="!w-32" placeholder=">=1" />
        </el-form-item>
        <el-form-item label="手动输入">
          <el-input-number v-model="queryForm.manualInputCountMin" :min="1" controls-position="right" class="!w-32" placeholder=">=1" />
        </el-form-item>
        <el-form-item label="环境异常">
          <el-input-number v-model="queryForm.envAbnormalCountMin" :min="1" controls-position="right" class="!w-32" placeholder=">=1" />
        </el-form-item>
        <el-form-item label="是否异常">
          <el-select v-model="queryForm.isAbnormal" placeholder="请选择" clearable class="!w-32">
            <el-option label="全部" value="" />
            <el-option label="异常" value="abnormal" />
            <el-option label="正常" value="normal" />
          </el-select>
        </el-form-item>
        <el-form-item class="ml-auto">
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" :icon="Download" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Table Area -->
    <el-card shadow="never">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="applyId" label="Apply_id" min-width="120" />
        <el-table-column prop="workerId" label="师傅工号" width="100" />
        <el-table-column prop="businessAccount" label="业务账号" min-width="120" />
        <el-table-column label="工单ID" width="100">
          <template #default="{ row }">
            <el-button link type="primary" @click="openIdsDialog(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="所属地市" width="100" />
        <el-table-column prop="status" label="质检状态" width="100">
           <template #default="{ row }">
             <el-tag :type="row.status === '已完成' ? 'success' : row.status === '无法质检' ? 'info' : ''">{{ row.status }}</el-tag>
           </template>
        </el-table-column>
        <el-table-column prop="cannotQcReason" label="无法质检原因" min-width="120" show-overflow-tooltip />
        <el-table-column prop="startTime" label="开始时间" width="160" />
        <el-table-column prop="endTime" label="结束时间" width="160" />
        
        <!-- Numeric Columns with Sort -->
        <el-table-column prop="noPhotoCount" label="无法拍摄" sortable width="110">
           <template #default="{ row }">
             <span class="text-blue-500 cursor-pointer font-bold hover:underline" 
                   v-if="row.noPhotoCount > 0"
                   @click="openDetailsDialog(row, 'noPhoto')">
                {{ row.noPhotoCount }}
             </span>
             <span v-else>0</span>
           </template>
        </el-table-column>
        <el-table-column prop="manualInputCount" label="手动输入" sortable width="110">
          <template #default="{ row }">
             <span class="text-blue-500 cursor-pointer font-bold hover:underline" 
                   v-if="row.manualInputCount > 0"
                   @click="openDetailsDialog(row, 'manual')">
                {{ row.manualInputCount }}
             </span>
             <span v-else>0</span>
           </template>
        </el-table-column>
        <el-table-column prop="envAbnormalCount" label="环境异常" sortable width="110">
          <template #default="{ row }">
             <span class="text-blue-500 cursor-pointer font-bold hover:underline" 
                   v-if="row.envAbnormalCount > 0"
                   @click="openDetailsDialog(row, 'env')">
                {{ row.envAbnormalCount }}
            </span>
             <span v-else>0</span>
           </template>
        </el-table-column>
        
        <el-table-column label="疑似作弊" width="100">
          <template #default="{ row }">
            <span v-if="row.isCheating" class="text-red-500 cursor-pointer hover:underline" @click="openCheatingInfo(row)">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="router.push(`/order-detail/${row.id}`)">详情</el-button>
            <el-button link type="warning" @click="openCannotQcDialog(row)">无法质检</el-button>
            <el-button link type="danger" v-if="!row.isCheating" @click="openMarkCheating(row)">标记作弊</el-button>
            <el-button link type="info" v-else @click="openCancelCheating(row)">取消作弊</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="mt-4 flex justify-end">
        <el-pagination
          v-model:current-page="queryForm.page"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- Dialog: Order IDs -->
    <el-dialog v-model="dialogVisible.orderIds" title="工单ID列表" width="400px">
      <div v-if="currentOrder">
        <p class="mb-2"><strong>Apply_id:</strong> {{ currentOrder.applyId }}</p>
        <p class="mb-4"><strong>业务账号:</strong> {{ currentOrder.businessAccount }}</p>
        <el-table :data="currentOrder.orderIds.map(id => ({ id }))" border stripe max-height="300">
           <el-table-column prop="id" label="工单ID" />
        </el-table>
      </div>
    </el-dialog>

    <!-- Dialog: Numeric Details (NoPhoto/Manual/Env) -->
    <el-dialog v-model="dialogVisible.details" :title="detailsTitle" width="600px">
      <el-table :data="detailsData" border stripe>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="process" label="流程" />
        <el-table-column prop="reason" label="原因" v-if="detailsType !== 'manual'" />
        <el-table-column prop="time" label="提交时间" />
      </el-table>
    </el-dialog>

    <!-- Dialog: Cheating Info -->
    <el-dialog v-model="dialogVisible.cheatingInfo" title="疑似作弊详情" width="400px">
      <div v-if="currentOrder">
        <p class="mb-2"><strong>疑似作弊原因:</strong> {{ currentOrder.cheatingReason }}</p>
        <p class="mb-2"><strong>备注:</strong> {{ currentOrder.cheatingRemark || '无' }}</p>
        <p class="mb-2"><strong>标记时间:</strong> {{ currentOrder.cheatingTime }}</p>
      </div>
    </el-dialog>

    <!-- Dialog: Cannot QC Form -->
    <el-dialog v-model="dialogVisible.cannotQc" title="无法质检处理" width="500px">
      <el-form label-width="80px">
        <el-form-item label="原因类型" required>
          <el-radio-group v-model="cannotQcForm.type">
            <el-radio value="个人原因">个人原因</el-radio>
            <el-radio value="用户原因">用户原因</el-radio>
            <el-radio value="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="具体原因" required>
          <el-input type="textarea" v-model="cannotQcForm.reason" placeholder="请填写具体原因" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible.cannotQc = false">取消</el-button>
        <el-button type="primary" @click="submitCannotQc">提交</el-button>
      </template>
    </el-dialog>

    <!-- Dialog: Mark Cheating Form -->
    <el-dialog v-model="dialogVisible.markCheating" title="标记作弊" width="500px">
       <div v-if="currentOrder" class="mb-4 p-2 bg-gray-50 rounded">
         <p class="text-sm text-gray-600">Apply_id: {{ currentOrder.applyId }}</p>
         <p class="text-sm text-gray-600">业务账号: {{ currentOrder.businessAccount }}</p>
       </div>
       <el-form label-width="80px">
        <el-form-item label="异常原因" required>
          <el-select v-model="markCheatingForm.reason" class="w-full">
            <el-option value="在家质检" label="在家质检" />
            <el-option value="一直点击无法质检" label="一直点击无法质检" />
            <el-option value="其他" label="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="markCheatingForm.remark" placeholder="选填" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible.markCheating = false">取消</el-button>
        <el-button type="primary" @click="submitMarkCheating">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-form-item {
  margin-right: 16px;
  margin-bottom: 16px;
}
</style>