OrderList.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Download } from '@element-plus/icons-vue'
import type { Order, OrderQuery, DetailRecord, ApiResponse } from '../types/order'
import { qualityApi } from '../api'
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(0)

// --- Methods ---
const fetchData = async () => {
  loading.value = true
  try {
    // 构建接口参数,将前端筛选条件映射到后端接口参数
    const params: any = {
      pageNum: queryForm.page,
      pageSize: queryForm.pageSize
    }

    // 业务账号 -> accNbr
    if (queryForm.businessAccount) {
      params.accNbr = queryForm.businessAccount
    }

    // Apply_id
    if (queryForm.applyId) {
      params.applyId = queryForm.applyId
    }

    // 工单ID -> orderId
    if (queryForm.orderId) {
      params.orderId = queryForm.orderId
    }

    // 师傅工号 -> campaignId (根据实际业务逻辑,这里假设师傅工号对应 campaignId)
    if (queryForm.workerId) {
      params.campaignId = queryForm.workerId
    }

    // 所属地市 -> areaType
    if (queryForm.city) {
      params.areaType = queryForm.city
    }

    // 质检状态 -> checkStatus
    if (queryForm.status) {
      params.checkStatus = queryForm.status
    }

    // 质检时间范围 -> startTime, endTime
    if (queryForm.dateRange && queryForm.dateRange.length === 2) {
      params.startTime = queryForm.dateRange[0]
      params.endTime = queryForm.dateRange[1]
    }

    // 无法拍摄次数 -> noShowNumType
    if (queryForm.noPhotoCountMin !== undefined && queryForm.noPhotoCountMin > 0) {
      params.noShowNumType = queryForm.noPhotoCountMin
    }

    // 手动输入次数 -> manualInputNumType
    if (queryForm.manualInputCountMin !== undefined && queryForm.manualInputCountMin > 0) {
      params.manualInputNumType = queryForm.manualInputCountMin
    }

    // 环境异常次数 -> cheatNumType
    if (queryForm.envAbnormalCountMin !== undefined && queryForm.envAbnormalCountMin > 0) {
      params.cheatNumType = queryForm.envAbnormalCountMin
    }

    // 是否异常 -> isCheat
    if (queryForm.isAbnormal === 'abnormal') {
      params.isCheat = 1
    } else if (queryForm.isAbnormal === 'normal') {
      params.isCheat = 0
    }

    const response = await qualityApi.getQualityCheckList(params) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || { records: [], total: 0 }
      
      // 将后端数据映射到前端 Order 类型
      tableData.value = (data.records || []).map((item: any) => ({
        id: item.applyId, // 使用 applyId 作为唯一 id
        applyId: item.applyId,
        workerId: item.campaignId,
        businessAccount: item.accNbr,
        orderIds: [], // 工单ID列表需要单独查询或从其他字段获取
        city: item.areaName,
        status: item.checkStatusDesc || getStatusText(item.checkStatus),
        cannotQcReason: item.failReason || '',
        startTime: item.startTime || '',
        endTime: item.endTime || '',
        noPhotoCount: item.noShowNum || 0,
        manualInputCount: item.manualInputNum || 0,
        envAbnormalCount: item.cheatNum || 0,
        isCheating: item.isCheat === 1,
        cheatingReason: '',
        cheatingRemark: '',
        cheatingTime: ''
      }))
      
      total.value = data.total || 0
    }
  } catch (error) {
    console.error('获取质检工单列表失败:', error)
    // 错误提示已在 request.ts 中统一处理
  } finally {
    loading.value = false
  }
}

// 辅助函数:将数字状态转换为文字
const getStatusText = (status: number): string => {
  const statusMap: Record<number, string> = {
    0: '未开始',
    1: '未开始',
    2: '进行中',
    3: '已完成',
    4: '无法质检'
  }
  return statusMap[status] || '未知'
}


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

const handleReset = () => {
  // Reset all form fields
  queryForm.businessAccount = ''
  queryForm.applyId = ''
  queryForm.orderId = ''
  queryForm.workerId = ''
  queryForm.city = ''
  queryForm.status = ''
  queryForm.dateRange = undefined
  queryForm.noPhotoCountMin = undefined
  queryForm.manualInputCountMin = undefined
  queryForm.envAbnormalCountMin = undefined
  queryForm.isAbnormal = ''
  queryForm.page = 1
  handleSearch()
}

const handleExport = async () => {
  try {
    loading.value = true
    // 使用相同的查询参数进行导出
    const params: any = {
      pageNum: queryForm.page,
      pageSize: queryForm.pageSize
    }

    if (queryForm.businessAccount) params.accNbr = queryForm.businessAccount
    if (queryForm.applyId) params.applyId = queryForm.applyId
    if (queryForm.orderId) params.orderId = queryForm.orderId
    if (queryForm.workerId) params.campaignId = queryForm.workerId
    if (queryForm.city) params.areaType = queryForm.city
    if (queryForm.status) params.checkStatus = queryForm.status
    if (queryForm.dateRange && queryForm.dateRange.length === 2) {
      params.startTime = queryForm.dateRange[0]
      params.endTime = queryForm.dateRange[1]
    }
    if (queryForm.noPhotoCountMin !== undefined && queryForm.noPhotoCountMin > 0) {
      params.noShowNumType = queryForm.noPhotoCountMin
    }
    if (queryForm.manualInputCountMin !== undefined && queryForm.manualInputCountMin > 0) {
      params.manualInputNumType = queryForm.manualInputCountMin
    }
    if (queryForm.envAbnormalCountMin !== undefined && queryForm.envAbnormalCountMin > 0) {
      params.cheatNumType = queryForm.envAbnormalCountMin
    }
    if (queryForm.isAbnormal === 'abnormal') {
      params.isCheat = 1
    } else if (queryForm.isAbnormal === 'normal') {
      params.isCheat = 0
    }

    const response = await qualityApi.exportQualityCheckList(params)
    
    // 处理文件下载
    const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `质检工单列表_${new Date().getTime()}.xlsx`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    // 错误提示已在 request.ts 中统一处理
  } finally {
    loading.value = false
  }
}

// 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 = async (row: Order) => {
  currentOrder.value = row
  
  try {
    // 调用接口获取工单设备列表
    const response = await qualityApi.getDevicesByApplyId({
      applyId: row.applyId
    }) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      // 更新当前订单的工单设备列表
      const devices = response.data || []
      
      // 将设备列表映射为包含工单号和设备串号的对象数组
      currentOrder.value.orderIds = devices.map((device: any) => ({
        orderCode: device.orderCode || '',
        deviceNumber: device.deviceNumber || ''
      }))
    }
  } catch (error) {
    console.error('获取工单设备列表失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
  
  dialogVisible.orderIds = true
}

// 2. Numeric Details Popup
const openDetailsDialog = async (row: Order, type: 'noPhoto' | 'manual' | 'env') => {
  currentOrder.value = row
  detailsType.value = type
  
  // 设置标题
  if (type === 'noPhoto') {
    detailsTitle.value = '无法拍摄明细'
  } else if (type === 'manual') {
    detailsTitle.value = '手动输入明细'
  } else {
    detailsTitle.value = '环境异常明细'
  }
  
  try {
    // 调用接口获取流程明细列表
    const response = await qualityApi.getProcessDetailList({
      applyId: row.applyId
    }) as ApiResponse<any[]>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || []
      
      // 根据类型过滤数据
      // 这里假设后端返回的数据包含 type 字段来区分不同类型
      // 实际字段名需要根据后端接口文档调整
      detailsData.value = data.map((item: any, index: number) => ({
        id: index + 1,
        process: item.processName || item.process || '',
        reason: item.reason || '',
        time: item.createTime || item.time || ''
      }))
    } else {
      detailsData.value = []
    }
  } catch (error) {
    console.error('获取流程明细失败:', error)
    detailsData.value = []
    // 错误提示已在 request.ts 中统一处理
  }
  
  dialogVisible.details = true
}

// 3. Cheating Info Popup
const openCheatingInfo = async (row: Order) => {
  currentOrder.value = row
  
  try {
    // 调用接口获取作弊标记详情
    const response = await qualityApi.getCheatMarkDetail({
      applyId: row.applyId
    }) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      // 更新当前订单的作弊信息
      if (response.data && currentOrder.value) {
        currentOrder.value.cheatingReason = response.data.cause || row.cheatingReason
        currentOrder.value.cheatingRemark = response.data.causeOther || row.cheatingRemark
        currentOrder.value.cheatingTime = response.data.createTime || row.cheatingTime
      }
    }
  } catch (error) {
    console.error('获取作弊详情失败:', error)
    // 即使获取失败也显示弹窗,使用现有数据
  }
  
  dialogVisible.cheatingInfo = true
}

// 4. Cannot QC Action
const openCannotQcDialog = (row: Order) => {
  currentOrder.value = row
  cannotQcForm.type = ''
  cannotQcForm.reason = ''
  dialogVisible.cannotQc = true
}
const submitCannotQc = async () => {
  if (!cannotQcForm.type || !cannotQcForm.reason) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  if (!currentOrder.value) {
    ElMessage.warning('未选择工单')
    return
  }

  try {
    // 将原因类型映射为对应的 checkStatus
    // 个人原因: 2, 用户原因: 3, 其他: 4
    let checkStatus = 4 // 默认为"其他"
    if (cannotQcForm.type === '个人原因') {
      checkStatus = 2
    } else if (cannotQcForm.type === '用户原因') {
      checkStatus = 3
    }
    
    await qualityApi.unCheckByOpt({
      applyId: currentOrder.value.applyId,
      checkStatus,
      failReason: cannotQcForm.reason
    })
    
    ElMessage.success('提交成功')
    dialogVisible.cannotQc = false
    
    // 刷新列表
    fetchData()
  } catch (error) {
    console.error('无法质检提交失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
}

// 5. Mark Cheating Action
const openMarkCheating = (row: Order) => {
  currentOrder.value = row
  markCheatingForm.reason = ''
  markCheatingForm.remark = ''
  dialogVisible.markCheating = true
}
const submitMarkCheating = async () => {
  if (!markCheatingForm.reason) {
    ElMessage.warning('请选择异常原因')
    return
  }
  
  if (!currentOrder.value) {
    ElMessage.warning('未选择工单')
    return
  }

  try {
    // 调用标记作弊接口, markType=1 表示标记作弊
    await qualityApi.markCheat({
      applyId: currentOrder.value.applyId,
      markType: 1,
      cause: markCheatingForm.reason,
      causeOther: markCheatingForm.remark || undefined
    })
    
    ElMessage.success('标记成功')
    dialogVisible.markCheating = false
    
    // 刷新列表
    fetchData()
  } catch (error) {
    console.error('标记作弊失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
}

// 6. Cancel Cheating Action
const openCancelCheating = async (row: Order) => {
  try {
    await ElMessageBox.confirm(
      '确认要取消该工单的作弊标记吗？',
      '取消作弊',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用取消作弊接口, markType=2 表示取消作弊标记
    await qualityApi.markCheat({
      applyId: row.applyId,
      markType: 2
    })
    
    ElMessage.success('取消成功')
    
    // 刷新列表
    fetchData()
  } catch (error: any) {
    // 用户取消操作时不显示错误
    if (error !== 'cancel') {
      console.error('取消作弊失败:', error)
      // 错误提示已在 request.ts 中统一处理
    }
  }
}

// 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="1" />
            <el-option label="进行中" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="无法质检" :value="4" />
          </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" show-overflow-tooltip />
        <el-table-column prop="workerId" label="师傅工号" width="100" show-overflow-tooltip />
        <el-table-column prop="businessAccount" label="业务账号" min-width="120" show-overflow-tooltip />
        <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" show-overflow-tooltip />
        <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" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" width="160" show-overflow-tooltip />
        
        <!-- 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({ path: `/order-detail/${row.applyId}`, query: { data: JSON.stringify(row) } })">详情</el-button>
            <el-button link type="warning" v-if="row.status !== '已完成' && row.status !== '无法质检'" @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="工单设备列表" width="600px">
      <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" border stripe max-height="300">
           <el-table-column type="index" label="序号" width="60" align="center" />
           <el-table-column prop="orderCode" label="工单号" show-overflow-tooltip />
           <el-table-column prop="deviceNumber" label="设备串号" show-overflow-tooltip />
        </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-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;
}

/* 表格单元格不换行,超出显示省略号 */
:deep(.el-table) {
  .el-table__cell {
    /* 防止单元格内容换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 固定表格行高 */
  .el-table__row {
    height: 50px;
  }
  
  /* 单元格内容垂直居中 */
  .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 50px;
  }
}
</style>