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

<script setup lang="ts">
import { ref, onMounted, computed, getCurrentInstance } from 'vue';
import { message } from 'ant-design-vue';
import { useJobStore } from '@/store';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { listMainMaterialEntryLog } from '@/api/pwoManage/primaryMaterial'
import { listMainMaterialOutboundLog } from '@/api/pwoManage/primaryMaterial';

const { proxy } = getCurrentInstance() as any
const { main_material_ok_level, main_material_ng_level } = proxy.useDict("main_material_ok_level", "main_material_ng_level")

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', align: 'center' },
  { title: '质量等级', dataIndex: 'qualityLevel', key: 'qualityLevel' },
  { 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 listMainMaterialEntryLog({ stationId });
    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">
    <Title name="主材报工" showRefresh @refresh="fetchPrimaryMaterialList" />
    <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="NG" checkedValue="NG" un-checked-children="OK" unCheckedValue="OK" />
          </template>
          <template v-if="column.key === 'qualityLevel'">
            <a-select v-model:value="record.qualityLevel" style="width: 80%" v-if="record.result === 'OK'">
              <a-select-option v-for="dict in main_material_ok_level" :value="dict.value">{{ dict.label }}</a-select-option>
            </a-select>
            <a-select v-model:value="record.qualityLevel" style="width: 80%" v-else>
              <a-select-option v-for="dict in main_material_ng_level" :value="dict.value">{{ dict.label }}</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;
  }
}

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

::v-deep(.ant-switch) {
  background-color: #04d903;
  &:hover {
    background-color: #02eb02;
  }

  &.ant-switch-checked {
    background-color: #ff0000;
    &:hover {
      background-color: #ff2525;
    }
  }
}
</style>