|
|
<template>
|
|
|
<div class="backward1-container">
|
|
|
<el-card class="query-card" shadow="never">
|
|
|
<el-form :model="queryParams" :inline="true" label-width="80px">
|
|
|
<el-form-item label="条码类型">
|
|
|
<el-select v-model="queryParams.barcodeType" placeholder="请选择" style="width: 150px" @change="handleBarcodeTypeChange">
|
|
|
<el-option label="架子号" value="1" />
|
|
|
<el-option label="半制品卡号" value="2" />
|
|
|
<el-option label="成型号" value="3" />
|
|
|
<el-option label="硫化号" value="4" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="条码号">
|
|
|
<el-input v-model="queryParams.barcodeNo" placeholder="请输入条码号" clearable style="width: 220px" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="开始时间">
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.startTime"
|
|
|
type="datetime"
|
|
|
placeholder="开始时间"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 200px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="结束时间">
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.endTime"
|
|
|
type="datetime"
|
|
|
placeholder="结束时间"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 200px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="班次">
|
|
|
<el-select v-model="queryParams.shift" placeholder="全部" clearable style="width: 120px">
|
|
|
<el-option label="早" value="早" />
|
|
|
<el-option label="中" value="中" />
|
|
|
<el-option label="夜" value="夜" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="班组">
|
|
|
<el-select v-model="queryParams.team" placeholder="全部" clearable style="width: 120px">
|
|
|
<el-option label="甲班" value="甲班" />
|
|
|
<el-option label="乙班" value="乙班" />
|
|
|
<el-option label="丙班" value="丙班" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="机台">
|
|
|
<el-input v-model="queryParams.machine" placeholder="请输入机台" clearable style="width: 150px" />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
|
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="table-card" shadow="never">
|
|
|
<div class="table-scroll">
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
border
|
|
|
stripe
|
|
|
:fit="false"
|
|
|
:scrollbar-always-on="true"
|
|
|
height="520"
|
|
|
@row-click="handleRowClick"
|
|
|
:row-style="{ cursor: 'pointer' }"
|
|
|
>
|
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
|
|
|
<template v-if="queryParams.barcodeType === '1'">
|
|
|
<el-table-column prop="vulcanizationNo" label="硫化号" min-width="150" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="planDate" label="计划日期" min-width="120" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="shift" label="班次" min-width="80" align="center" />
|
|
|
<el-table-column prop="team" label="班组" min-width="90" align="center" />
|
|
|
<el-table-column prop="machineNo" label="机台号" min-width="110" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="materialSpec" label="物料规格" min-width="260" align="center" show-overflow-tooltip />
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="queryParams.barcodeType === '2'">
|
|
|
<el-table-column prop="cardNo" label="流转卡号" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="toolingNo" label="工装号" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="shift" label="班次" min-width="80" align="center" />
|
|
|
<el-table-column prop="team" label="班组" min-width="90" align="center" />
|
|
|
<el-table-column prop="recorder" label="记录人" min-width="90" align="center" />
|
|
|
<el-table-column prop="startTime" label="开始时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="endTime" label="结束时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="machineNo" label="机台号" min-width="120" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="qty" label="数量" min-width="90" align="right" />
|
|
|
<el-table-column prop="leftQty" label="剩余数量" min-width="100" align="right" />
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="queryParams.barcodeType === '3'">
|
|
|
<el-table-column prop="greenTyreNo" label="成型号" min-width="170" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="materialSpec" label="物料规格" min-width="260" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="shift" label="班次" min-width="80" align="center" />
|
|
|
<el-table-column prop="team" label="班组" min-width="90" align="center" />
|
|
|
<el-table-column prop="recorder" label="记录人" min-width="90" align="center" />
|
|
|
<el-table-column prop="startTime" label="开始时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="endTime" label="结束时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="machineNo" label="机台号" min-width="120" align="center" show-overflow-tooltip />
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
<el-table-column prop="vulcanizationNo" label="硫化号" min-width="150" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="moldingNo" label="成型号" min-width="150" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="materialSpec" label="物料规格" min-width="260" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="shift" label="班次" min-width="80" align="center" />
|
|
|
<el-table-column prop="team" label="班组" min-width="90" align="center" />
|
|
|
<el-table-column prop="startTime" label="开始时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="endTime" label="结束时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="machineNo" label="机台号" min-width="120" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="moldPosition" label="左右模" min-width="90" align="center" />
|
|
|
</template>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
<el-pagination
|
|
|
v-model:current-page="queryParams.pageNum"
|
|
|
v-model:page-size="queryParams.pageSize"
|
|
|
:total="total"
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
style="margin-top: 16px; text-align: right"
|
|
|
/>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="MixTraceBackward1">
|
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import backwardData from './data/backward1.json';
|
|
|
import backwardDetailData from './data/backward2.json';
|
|
|
|
|
|
type BarcodeType = '1' | '2' | '3' | '4';
|
|
|
|
|
|
interface BackwardRow {
|
|
|
id: string;
|
|
|
detailId?: string;
|
|
|
barcodeType: BarcodeType;
|
|
|
vulcanizationNo?: string;
|
|
|
cardNo?: string;
|
|
|
greenTyreNo?: string;
|
|
|
planDate?: string;
|
|
|
startTime?: string;
|
|
|
endTime?: string;
|
|
|
shift?: string;
|
|
|
team?: string;
|
|
|
machineNo?: string;
|
|
|
}
|
|
|
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const detailMap = (backwardDetailData as any).detailMap || {};
|
|
|
|
|
|
const queryParams = reactive({
|
|
|
startTime: '',
|
|
|
endTime: '',
|
|
|
shift: '',
|
|
|
barcodeType: '4' as BarcodeType,
|
|
|
barcodeNo: '',
|
|
|
team: '',
|
|
|
machine: '',
|
|
|
pageNum: 1,
|
|
|
pageSize: 10
|
|
|
});
|
|
|
|
|
|
const initFromRoute = () => {
|
|
|
// 默认反向追溯条码类型为硫化号(4)
|
|
|
const typeFromRoute = String(route.query.barcodeType || '').trim();
|
|
|
const noFromRoute = String(route.query.barcodeNo || '').trim();
|
|
|
|
|
|
queryParams.barcodeType = (typeFromRoute || '4') as BarcodeType;
|
|
|
if (noFromRoute) {
|
|
|
queryParams.barcodeNo = noFromRoute;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const tableData = ref<BackwardRow[]>([]);
|
|
|
const total = ref(0);
|
|
|
|
|
|
const getDataByType = (type: BarcodeType): BackwardRow[] => {
|
|
|
const data = backwardData as any;
|
|
|
if (type === '1') return data.shelfData || [];
|
|
|
if (type === '2') return data.semiCardData || [];
|
|
|
if (type === '3') return data.moldingData || [];
|
|
|
return data.curingData || [];
|
|
|
};
|
|
|
|
|
|
const getRowBarcode = (row: BackwardRow): string => {
|
|
|
return String(row.vulcanizationNo || row.cardNo || row.greenTyreNo || '');
|
|
|
};
|
|
|
|
|
|
const toTimestamp = (timeStr?: string): number | null => {
|
|
|
if (!timeStr) return null;
|
|
|
const ms = Date.parse(timeStr.replace(/\//g, '-'));
|
|
|
return Number.isNaN(ms) ? null : ms;
|
|
|
};
|
|
|
|
|
|
const getRowTime = (row: BackwardRow): number | null => {
|
|
|
if (row.startTime) return toTimestamp(row.startTime);
|
|
|
if (row.planDate) return toTimestamp(`${row.planDate} 00:00:00`);
|
|
|
return null;
|
|
|
};
|
|
|
|
|
|
const refreshTable = () => {
|
|
|
const all = getDataByType(queryParams.barcodeType);
|
|
|
const barcodeKeyword = queryParams.barcodeNo.trim().toLowerCase();
|
|
|
const machineKeyword = queryParams.machine.trim().toLowerCase();
|
|
|
const startTs = toTimestamp(queryParams.startTime);
|
|
|
const endTs = toTimestamp(queryParams.endTime);
|
|
|
|
|
|
const filtered = all.filter((row) => {
|
|
|
const rowBarcode = getRowBarcode(row).toLowerCase();
|
|
|
const machine = String(row.machineNo || '').toLowerCase();
|
|
|
const rowTs = getRowTime(row);
|
|
|
|
|
|
if (barcodeKeyword && !rowBarcode.includes(barcodeKeyword)) return false;
|
|
|
if (queryParams.shift && row.shift !== queryParams.shift) return false;
|
|
|
if (queryParams.team && row.team !== queryParams.team) return false;
|
|
|
if (machineKeyword && !machine.includes(machineKeyword)) return false;
|
|
|
if (startTs !== null && rowTs !== null && rowTs < startTs) return false;
|
|
|
if (endTs !== null && rowTs !== null && rowTs > endTs) return false;
|
|
|
return true;
|
|
|
});
|
|
|
|
|
|
total.value = filtered.length;
|
|
|
const start = (queryParams.pageNum - 1) * queryParams.pageSize;
|
|
|
tableData.value = filtered.slice(start, start + queryParams.pageSize);
|
|
|
};
|
|
|
|
|
|
const handleQuery = () => {
|
|
|
queryParams.pageNum = 1;
|
|
|
refreshTable();
|
|
|
};
|
|
|
|
|
|
const handleBarcodeTypeChange = () => {
|
|
|
handleQuery();
|
|
|
};
|
|
|
|
|
|
const resetQuery = () => {
|
|
|
queryParams.startTime = '';
|
|
|
queryParams.endTime = '';
|
|
|
queryParams.shift = '';
|
|
|
queryParams.barcodeType = '4';
|
|
|
queryParams.barcodeNo = '';
|
|
|
queryParams.team = '';
|
|
|
queryParams.machine = '';
|
|
|
queryParams.pageNum = 1;
|
|
|
queryParams.pageSize = 10;
|
|
|
refreshTable();
|
|
|
};
|
|
|
|
|
|
const handleSizeChange = () => {
|
|
|
queryParams.pageNum = 1;
|
|
|
refreshTable();
|
|
|
};
|
|
|
|
|
|
const handleCurrentChange = () => {
|
|
|
refreshTable();
|
|
|
};
|
|
|
|
|
|
const handleRowClick = (row: BackwardRow) => {
|
|
|
const detailId = String(row.detailId || row.id || '');
|
|
|
if (!detailId) {
|
|
|
ElMessage.error('当前行缺少 detailId，无法跳转详情');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const detail = detailMap[detailId];
|
|
|
if (!detail) {
|
|
|
ElMessage.error(`未找到详情数据: ${detailId}`);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const rowType = String(row.barcodeType || queryParams.barcodeType || '4');
|
|
|
const detailType = String(detail.barcodeType || rowType || '4');
|
|
|
if (rowType !== detailType) {
|
|
|
ElMessage.warning(`条码类型已按详情修正: ${rowType} -> ${detailType}`);
|
|
|
}
|
|
|
|
|
|
router.push({
|
|
|
path: '/mes/mixTrace/show/backward2',
|
|
|
query: {
|
|
|
id: detailId,
|
|
|
barcodeType: detailType
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
initFromRoute();
|
|
|
refreshTable();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.backward1-container {
|
|
|
padding: 20px;
|
|
|
|
|
|
.query-card {
|
|
|
margin-bottom: 16px;
|
|
|
:deep(.el-card__body) {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.table-card {
|
|
|
:deep(.el-card__body) {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.table-scroll {
|
|
|
width: 100%;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table__body td) {
|
|
|
padding: 8px 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|