130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch, getCurrentInstance } 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';
|
|
|
|
const { proxy } = getCurrentInstance() as any
|
|
const { mes_station_status } = proxy.useDict("mes_station_status", "lot_trace_order_status")
|
|
|
|
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 === 'status'">
|
|
<DictTag :options="mes_station_status" :value="record.status" size="large" />
|
|
</template>
|
|
<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>
|