工控机出站界面搭建

2025-12-29 10:29:01 +08:00
parent 45a807ac06
commit b758c659c4
4 changed files with 331 additions and 3 deletions
--- a/src/views/pwoManage/outfeed/jobReport/index.vue
+++ b/src/views/pwoManage/outfeed/jobReport/index.vue
@@ -0,0 +1,174 @@
+<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>