frontend_hmi_station/src/views/pwoManage/index.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { listStation } from '@/api/pwoManage/station';
import { usePwoStore, useJobStore } from '@/store';

interface TableItem {
  key: string;
  index: number;
  operationTitle: string;
  planQty: number;
  okQty: number;
  ngQty: number;
  status: string;
  [key: string]: any;
}

const router = useRouter();
const pwoStore = usePwoStore();
const jobStore = useJobStore();
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' },
];

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 handleInfeed = (record: any) => {
  jobStore.setInfo(record);
  router.push({ name: 'Infeed' });
};

const handleOutfeed = () => {
  router.push({ name: 'Outfeed' });
};

watch(
  () => pwoStore.pwoInfo.code,
  (val) => {
    if (val) {
      fetchStations(val);
    }
  },
  { immediate: true }
)

function rowClick(record: TableItem) {
  return {
    onClick: () => {
      jobStore.setInfo(record);
    },
  };
}
</script>

<template>
  <div class="table-wrapper">
    <a-table 
      :dataSource="tableData"
      :columns="columns as ColumnsType<TableItem>"
      :pagination="false"
      :loading="loadingStations"
      bordered
      sticky
      rowKey="key"
      class="custom-table"
      :customRow="rowClick"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button size="large" type="primary" @click="handleInfeed(record)">进站</a-button>
            <a-button size="large" type="primary" danger @click="handleOutfeed">出站</a-button>
          </a-space>
        </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>