frontend_hmi_station/src/views/pwoManage/outfeed/jobReport/index.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { message } from 'ant-design-vue';
import { useJobStore } from '@/store';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { delay } from '@/utils/mock';

const jobStore = useJobStore();

interface PrimaryMaterialTableItem {
  key: string;
  waferCode: string;
  dieCode: string;
  result: 'OK' | 'NG';
  qualityLevel: string;
  [key: string]: any;
}

const primaryMaterialColumns = [
  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
  { title: 'Wafer ID', dataIndex: 'waferCode', key: 'waferCode', align: 'center' },
  { title: 'Die ID', dataIndex: 'dieCode', key: 'dieCode', align: 'center' },
  { title: '结果', dataIndex: 'result', key: 'result', filters: [{ text: 'OK', value: 'OK', }, { text: 'NG', value: 'NG', }], onFilter: (value: string, record: any) => record.result.indexOf(value) === 0, align: 'center' },
  { title: '质量等级', dataIndex: 'qualityLevel', key: 'qualityLevel', filters: [{ text: 'A', value: 'A', }, { text: 'B', value: 'B', }], onFilter: (value: string, record: any) => record.qualityLevel.indexOf(value) === 0, align: 'center' },
  { title: '操作', key: 'action', align: 'center', width: 120 },
];

const totals = computed(() => {
  let okNum = 0;
  let ngNum = 0;

  primaryMaterialTableData.value.forEach(({ result, qualityLevel }) => {
    if (result === 'OK') {
      okNum++;
    } else {
      ngNum++;
    }
  });
  return { okNum, ngNum };
});

const primaryMaterialTableData = ref<PrimaryMaterialTableItem[]>([]);

const loadingPrimaryMaterialList = ref(false);
const fetchPrimaryMaterialList = async () => {
  // const stationId = jobStore.jobInfo.id;
  // if (!stationId) return;
  loadingPrimaryMaterialList.value = true;
  try {
    const rows = await delay(1000, [
      { key: '1', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'OK', qualityLevel: 'A' },
      { key: '2', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'NG', qualityLevel: 'A' },
      { key: '3', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'OK', qualityLevel: 'B' }
    ]);
    primaryMaterialTableData.value = rows;
  } catch (error: any) {
    message.error(error.message || '查询治具列表失败');
  } finally {
    loadingPrimaryMaterialList.value = false;
  }
}

// 计算表格高度
const customTable = ref<HTMLElement | null>(null)
const tableHeight = ref(200)
const renderTableHeight = () => {
  if (customTable.value) {
    tableHeight.value = customTable.value.clientHeight - 50
    console.log('元素高度：', tableHeight.value)
  }
}

onMounted(() => {
  renderTableHeight()
})

defineExpose({
  renderTableHeight
});

fetchPrimaryMaterialList()
</script>

<template>
  <div class="equipment__container">
    <div class="main-title">主材报工</div>
    <div class="table-wrapper" ref="customTable">
      <a-table :dataSource="primaryMaterialTableData" :columns="primaryMaterialColumns as ColumnsType<PrimaryMaterialTableItem>"
        :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }"
        :loading="loadingPrimaryMaterialList">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
          <template v-if="column.key === 'result'">
            <a-switch v-model:checked="record.result" checked-children="OK" checkedValue="OK" un-checked-children="NG" unCheckedValue="NG" />
          </template>
          <template v-if="column.key === 'qualityLevel'">
            <a-select v-model:value="record.qualityLevel" style="width: 80%">
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="B">B</a-select-option>
            </a-select>
          </template>
          <template v-if="column.key === 'action'">
            <a-button @click="">查看明细</a-button>
          </template>
        </template>
        <template #summary>
          <a-table-summary-row>
            <a-table-summary-cell>总计</a-table-summary-cell>
            <a-table-summary-cell>
              <a-typography-text>OK: {{ totals.okNum }}</a-typography-text>
            </a-table-summary-cell>
            <a-table-summary-cell>
              <a-typography-text>NG: {{ totals.ngNum }}</a-typography-text>
            </a-table-summary-cell>
          </a-table-summary-row>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.equipment__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-content {
  flex: 1;
  overflow: hidden;
}

.input__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  height: 100%;

  .description-wrapper {
    flex: 1;
    overflow: auto;
  }
}

.main-title {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #c9c9c9;
  padding: 0 0 8px;
}

.table-wrapper {
  height: 100%;
  overflow: auto;
}

::v-deep(.ant-switch) {
  background-color: #ff0000;
  &:hover {
    background-color: #ff2525;
  }

  &.ant-switch-checked {
    background-color: #04d903;

    &:hover {
      background-color: #02eb02;
    }
  }
}
</style>