frontend_hmi_station/src/views/pwoManage/index.vue

<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>