新增工单管理界面

2025-12-23 13:37:48 +08:00
parent 7025a5304f
commit 9e45b78f31
3 changed files with 513 additions and 0 deletions
--- a/src/views/pwoManage/index.vue
+++ b/src/views/pwoManage/index.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { message } from 'ant-design-vue';
+import type { ColumnsType } from 'ant-design-vue/es/table/interface';
+import { listStation } from '@/api/station';
+import { usePwoStore } from '@/store';
+
+interface TableItem {
+  key: string;
+  index: number;
+  operationTitle: string;
+  planQty: number;
+  okQty: number;
+  ngQty: number;
+  status: string;
+  [key: string]: any;
+}
+
+const route = useRoute();
+const pwoStore = usePwoStore();
+const tableData = ref<TableItem[]>([]);
+
+const columns = [
+  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
+  { title: '制程', dataIndex: 'operationTitle', key: 'operationTitle', align: 'center' },
+  { title: '总数量', dataIndex: 'planQty', key: 'planQty', align: 'center' },
+  { title: '合格数量', dataIndex: 'okQty', key: 'okQty', align: 'center' },
+  { title: '报废数量', dataIndex: 'ngQty', key: 'ngQty', align: 'center' },
+  { title: '状态', dataIndex: 'status', key: 'status', align: 'center' },
+  { title: '操作', key: 'action', align: 'center', width: 120 },
+];
+
+const loadingStations = ref(false);
+const fetchStations = async (traceOrderCode: string) => {
+  try {
+    loadingStations.value = true;
+    const res = await listStation({ traceOrderCode });
+    tableData.value = (res.rows || []).map((item: any, idx: number) => {
+      return {
+        key: String(item.id ?? idx),
+        index: item.seqNo ?? idx + 1,
+        ...item,
+      } as TableItem;
+    });
+  } catch (error: any) {
+    message.error(error?.msg || error?.message || '查询站点失败');
+  } finally {
+    loadingStations.value = false;
+  }
+};
+
+const handleSubmit = (record: TableItem) => {
+  message.success(`提交了序号: ${record.index}`);
+};
+
+onMounted(() => {
+  const traceOrderCode = route.query.traceOrderCode as string;
+  if (traceOrderCode) {
+    fetchStations(traceOrderCode);
+  }
+});
+
+watch(
+  () => route.query.t,
+  (val) => {
+    if (val) {
+      fetchStations(route.query.traceOrderCode as string);
+    }
+  }
+);
+
+function rowClick(record: TableItem) {
+  return {
+    onClick: () => {
+      pwoStore.setCurrentJob(record);
+    },
+  };
+}
+</script>
+
+<template>
+  <div class="table-wrapper">
+    <a-table 
+      :dataSource="tableData"
+      :columns="columns as ColumnsType<TableItem>"
+      :pagination="false"
+      :loading="loadingStations"
+      bordered
+      sticky
+      size="middle"
+      rowKey="key"
+      class="custom-table"
+      :customRow="rowClick"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-button type="primary" @click="handleSubmit(record as TableItem)">进入</a-button>
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table-wrapper {
+  height: 100%;
+  overflow: auto;
+
+  .custom-table {
+    :deep(.ant-table-thead > tr > th) {
+      background-color: #e6f7ff;
+      font-weight: bold;
+    }
+    
+    :deep(.ant-table-tbody > tr > td) {
+      padding: 12px 8px;
+    }
+  }
+}
+</style>