QualityDetail.vue

<template>
  <div class="quality-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>质检信息明细</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <!-- 顶部统计信息 -->
      <el-row :gutter="20" style="margin-bottom: 30px;">
        <el-col :span="8">
          <div class="statistic-card">
            <div class="statistic-title">工单数量</div>
            <div class="statistic-value">{{ filterForm.orderCount }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <div class="statistic-title">用户账号数量</div>
            <div class="statistic-value">{{ filterForm.userAccountCount }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <div class="statistic-title">工维人员数量</div>
            <div class="statistic-value">{{ filterForm.staffCount }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="4">
            <el-input
              v-model="filterForm.campaignId"
              clearable
              placeholder="工维人员工号"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="filterForm.accNbr"
              clearable
              placeholder="用户账号"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterForm.finish"
              placeholder="质检状态"
              clearable
            >
              <el-option label="未完成" value="0"></el-option>
              <el-option label="已完成" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 表格数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="batchId" label="质检批次ID" width="220"></el-table-column>
        <el-table-column prop="applyId" label="质检号ID" width="220"></el-table-column>
        <el-table-column prop="campaignId" label="工维人员工号" width="120"></el-table-column>
        <el-table-column prop="accNbr" label="用户账号" width="120"></el-table-column>
        <el-table-column prop="orderCode" label="工单号" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="addressName" label="工单地址" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="orderType" label="工单类型" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceType" label="设备类型" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="finish" label="质检状态" width="120">
          <template #default="scope">
            <el-tag
              :type="getquality_statusType(scope.row.finish)"
            >
              {{ getquality_statusText(scope.row.finish) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="finishTime" label="完成时间" width="180"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-button size="small" type="danger" @click="deleteWorkOrder(scope.row)" :disabled="scope.row.finish === 1">
                删除
              </el-button>
              <el-button size="small" type="primary" @click="addWorkOrder(scope.row)" :disabled="scope.row.finish===1 || (scope.row.orderType&&scope.row.orderType.includes('故障投诉'))">
                新增工单
              </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 删除工单对话框 -->
    <el-dialog
      v-model="delForm.isShow"
      title="删除工单"
      width="700px"
      class="delete-dialog"
    >
      <!-- 工单列表表格 -->
      <el-table
        ref="deleteTableRef"
        :data="deleteTableData"
        border
        style="width: 100%"
        max-height="700"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderCode" label="工单号" width="100" />
        <el-table-column prop="serviceName" label="工单类型" width="200" show-overflow-tooltip />
        <el-table-column prop="terminalClass" label="设备类型"/>
        <el-table-column prop="deviceNumber" label="串号" show-overflow-tooltip />
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delForm.isShow = false">取消</el-button>
          <el-button type="primary" @click="confirmDeleteSelected">删除</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增工单类型对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="新增工单"
      width="400px"
    >
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="工单号">
          <el-input
              v-model="addForm.orderCode"
            ></el-input>
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select v-model="addForm.orderType" placeholder="请选择工单类型">
            <el-option label="个人宽带-装机" value="个人宽带-装机"></el-option>
            <el-option label="互联网电视订购-装机" value="互联网电视订购-装机"></el-option>
            <el-option label="第二台互联网电视订购-装机" value="第二台互联网电视订购-装机"></el-option>
            <el-option label="第三台互联网电视订购-装机" value="第三台互联网电视订购-装机"></el-option>
            <el-option label="个人宽带-移机" value="个人宽带-移机"></el-option>
            <el-option label="FTTR-装机" value="FTTR-装机"></el-option>
            <el-option label="家庭组网（服务模式）-装机" value="家庭组网（服务模式）-装机"></el-option>
            <el-option label="智能组网（一次性收费）-装机" value="智能组网（一次性收费）-装机"></el-option>
            <el-option label="家庭安防服务-装机" value="家庭安防服务-装机"></el-option>
            <el-option label="云电脑（家庭版）-装机" value="云电脑（家庭版）-装机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="addForm.deviceType" placeholder="请选择设备类型">
            <el-option label="普通光猫" value="普通光猫"></el-option>
            <el-option label="机顶盒" value="机顶盒"></el-option>
            <el-option label="主光猫" value="主光猫"></el-option>
            <el-option label="子光猫" value="子光猫"></el-option>
            <el-option label="路由器" value="路由器"></el-option>
            <el-option label="室外安防" value="室外安防"></el-option>
            <el-option label="室内安防" value="室内安防"></el-option>
            <el-option label="软终端" value="软终端"></el-option>
            <el-option label="云电脑设备" value="云电脑设备"></el-option>
            <el-option label="POE面板" value="POE面板"></el-option>
            <el-option label="POE交换机" value="POE交换机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="串号">
          <el-input
              v-model="addForm.deviceNumber"
            ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getQualityBatchDetail,
  queryOrderAndDevice,
  deleteWorkOrder as apiDeleteWorkOrder,
  addWorkOrder as apiAddWorkOrder
} from '../utils/api'

const route = useRoute()
const router = useRouter()

const filterForm = reactive({
  batchId: '',
  campaignId: '',
  accNbr: '',
  finish: ''
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const addDialogVisible = ref(false)
const deleteTableRef = ref(null)

const currentDeleteRow = ref(null)
const currentEditRow = ref(null)
const deleteTableData = ref([])
const selectedRows = ref([])
const addForm = reactive({
  orderCode: '',
  orderType: '',
  deviceType: '',
  deviceNumber: ''
})
const delForm = reactive({
  batchId: '',
  applyId: '',
  isShow: false,
  orderIds: []
})

const tableData = ref([])

const goBack = () => {
  router.push('/quality-list')
}

const handleFilter = async () => {
  try {
    const params = Object.assign({
      page: pagination.currentPage,
      pageSize: pagination.pageSize
    }, filterForm);

    const response = await getQualityBatchDetail(params);
    if (response.code === 200) {
      response.data.forEach(item => {
        item.batchId = filterForm.batchId
      });

      tableData.value = response.data || [];
      // pagination.total = response.data.pagination.total;
      ElMessage.success('查询成功');
    } else {
      ElMessage.error(response.msg || '查询失败');
    }
  } catch (error) {
    ElMessage.error('查询失败: ' + error.message);
  }
}

const resetFilter = () => {
  filterForm.campaignId = '';
  filterForm.accNbr = '';
  filterForm.finish = '';
  handleFilter();
}

const getquality_statusText = (status) => {
  const statusMap = {
    0: '待完成',
    1: '已完成'
  }
  return statusMap[status] || '未知'
}

const getquality_statusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success'
  }
  return typeMap[status] || 'info'
}

const deleteWorkOrder = async (row) => {
  try {
    // 获取所有工单数据
    const response = await queryOrderAndDevice({
      batchId: row.batchId,
      applyId: row.applyId
    });

    if (response.code === 200) {
      deleteTableData.value = response.data || [];
      delForm.batchId = row.batchId;
      delForm.applyId = row.applyId;
      delForm.isShow = true;
    } else {
      ElMessage.error('获取工单数据失败');
    }
  } catch (error) {
    ElMessage.error('获取工单数据失败: ' + error.message);
  }
}

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
}

const confirmDeleteSelected = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的工单');
    return;
  }

  try {
    const orderIds = selectedRows.value.map(row =>{
      return row.id
    });

    const response = await apiDeleteWorkOrder({
      batchId: delForm.batchId,
      applyId: delForm.applyId,
      orderIds: orderIds
    });

    if (response.code === 200) {
      deleteTableData.value = response.data || [];
      ElMessage.success(`成功删除 ${selectedRows.value.length} 个工单`);
      delForm.isShow = false;

      // 重新加载数据
      handleFilter();
    } else {
      ElMessage.error('工单删除失败，请重试');
    }
  } catch (error) {
    ElMessage.error('删除失败: ' + error.message);
  }
}

const addWorkOrder = (row) => {
  // 保存当前行的索引或ID，以便后续更新
  currentEditRow.value = row;
  addForm.orderCode = row.orderCode || '';
  addForm.orderType = '';
  addForm.deviceType = '';
  addForm.deviceNumber = ''
  addDialogVisible.value = true;
}

const confirmAdd = async () => {
  if (!addForm.orderType || !addForm.deviceType) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  if (addForm.deviceType=='软终端' && !addForm.deviceNumber) {
    ElMessage.warning('请填写串号');
    return;
  }

  try {
    // 准备请求数据
    const requestData = {
      batchId: currentEditRow.value.batchId,
      applyId: currentEditRow.value.applyId,
      orderCode: addForm.orderCode,
      orderType: addForm.orderType,
      deviceType: addForm.deviceType,
      deviceNumber: addForm.deviceNumber
    };

    // 调用后端API新增工单
    const response = await apiAddWorkOrder(requestData);

    if (response.code === 200) {
      ElMessage.success('新增工单成功');
      addDialogVisible.value = false;
      // 重新加载数据以刷新表格
      handleFilter();
    } else {
      ElMessage.error(response.msg || '新增失败');
    }
  } catch (error) {
    ElMessage.error('新增失败: ' + error.message);
  }
}

const handlePageChange = (page) => {
  pagination.currentPage = page;
  handleFilter();
}

onMounted(() => {
  let pa = JSON.parse(sessionStorage.getItem('selectedBatch'))
  filterForm.batchId = pa.batchId
  filterForm.orderCount = pa.orderCount
  filterForm.userAccountCount = pa.userAccountCount
  filterForm.staffCount = pa.staffCount

  // 初始化数据
  handleFilter()
})
</script>

<style scoped>
.quality-detail-container {
  padding: 20px;
}

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

.statistic-card {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.statistic-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

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

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

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.delete-dialog .el-table {
  border: 1px solid #e0e0e0;
}

.delete-dialog .el-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.delete-dialog .el-table td {
  padding: 8px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>