QualityList.vue

<template>
  <div class="quality-list-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>质检信息列表</span>
        </div>
      </template>

      <div class="filter-section">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="5" style="margin-right: 20px;">
            <el-date-picker
              v-model="filterForm.uploadTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterForm.batchStatus"
              placeholder="批次状态"
              clearable
              multiple
              style="width: 100%"
            >
              <el-option v-for="status in pagination.list" :key="status.value" :label="status.label" :value="status.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :data="tableData" :height="tableForm.height" border style="width: 100%">
        <el-table-column prop="batchId" label="质检批次ID" width="220"></el-table-column>
        <el-table-column prop="orderCount" label="工单数量" width="100"></el-table-column>
        <el-table-column prop="userAccountCount" label="用户账号数量" width="120"></el-table-column>
        <el-table-column prop="staffCount" label="工维人员数量" width="120"></el-table-column>
        <el-table-column prop="createTime" label="上传时间" width="180"></el-table-column>
        <el-table-column prop="batchStatus" label="批次状态" width="120">
          <template #default="scope">
            <el-tag
              :type="getTagType(scope.row.batchStatus)"
            >
              {{ getStatusText(scope.row.batchStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="viewDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" style="margin-top: 20px; text-align: right;">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="pagination.pageSizes"
          @sizeChange="handleSizeChange"
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getQualityBatches , commonListEnum} from '../utils/api'

const router = useRouter()

const filterForm = reactive({
  uploadTime: '',
  batchStatus: []
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  pageSizes: [20, 50, 100],
  total: 0,
  list: []
})
const tableForm = reactive({
  height: window.top.document.body.offsetHeight - 346
})

const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  pagination.currentPage = 1; // 重置到第一页
  handleFilter();
};

const tableData = ref([])

const handleFilter = async () => {
  try {
    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
      batchStatusList: filterForm.batchStatus
    };

    if (filterForm.uploadTime && filterForm.uploadTime.length === 2) {
      params.uploadStartTime = filterForm.uploadTime[0];
      params.uploadEndTime = filterForm.uploadTime[1];
    }

    const response = await getQualityBatches(params);
    if (response.code === 200) {
      tableData.value = response.data.records || [];
      pagination.total = response.data.total;
      ElMessage.success('查询成功');
    } else {
      ElMessage.error(response.msg || '查询失败');
    }
  } catch (error) {
    ElMessage.error('查询失败: ' + error.message);
  }
}

const resetFilter = () => {
  filterForm.uploadTime = '';
  filterForm.batchStatus = [];
  handleFilter();
}

const getStatusText = (status) => {
  let ret = '未知'
  pagination.list.forEach(item => {
    if(item.value === status) {
      ret = item.label
    }
  })
  return ret
}

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

const viewDetail = (row) => {
  sessionStorage.setItem('selectedBatch', JSON.stringify(row))

  router.push(`/quality-detail`)
}

const handlePageChange = (page) => {
  pagination.currentPage = page;
  handleFilter();
}
const queryStatus = async () => {
  try {
    const response = await commonListEnum({ type: 4});
    if (response.code === 200) {
     pagination.list = response.data || []
    }
  } catch (error) {
  
  }
}
onMounted(() => {
  // 初始化数据
  handleFilter();
  queryStatus()
})
</script>

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

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