415 lines
14 KiB
Vue
415 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, nextTick, onUnmounted, getCurrentInstance } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { message } from 'ant-design-vue';
|
|
import { debounce } from 'lodash';
|
|
import { usePwoStore, useJobStore } from '@/store';
|
|
import { listLotTraceOrder, getLotTraceOrder, addQualityAbnormalContact } from '@/api/pwoManage';
|
|
import type { LotTraceOrderData } from '@/api/pwoManage/model';
|
|
|
|
const { proxy } = getCurrentInstance() as any
|
|
const { mes_station_status, lot_trace_order_status } = proxy.useDict("mes_station_status", "lot_trace_order_status")
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const pwoStore = usePwoStore();
|
|
const jobStore = useJobStore();
|
|
|
|
const workOrderInfo = reactive<LotTraceOrderData>({});
|
|
const processInfo = jobStore.jobInfo;
|
|
|
|
// 孙组件
|
|
const infeedRef = ref<any>(null);
|
|
const collapsed = ref(false);
|
|
const toggleCollapse = async () => {
|
|
collapsed.value = !collapsed.value;
|
|
await nextTick();
|
|
infeedRef.value?.renderTableHeight();
|
|
}
|
|
|
|
const redirectTo = (routeName: string) => {
|
|
router.push({ name: routeName });
|
|
if (routeName === 'PwoManage') {
|
|
handleRefresh();
|
|
}
|
|
}
|
|
|
|
const openHoldModal = ref(false);
|
|
const planFinishDate = ref('');
|
|
const handleHold = () => {
|
|
if (!workOrderInfo.code) {
|
|
message.error('请先选择工单！');
|
|
return;
|
|
}
|
|
openHoldModal.value = true;
|
|
};
|
|
const handleCloseHold = () => {
|
|
planFinishDate.value = '';
|
|
openHoldModal.value = false;
|
|
};
|
|
const handleSubmitHold = async () => {
|
|
const tmpPlanFinishDate = planFinishDate.value;
|
|
// 修改随工单状态
|
|
try {
|
|
message.success('Hold 成功！')
|
|
planFinishDate.value = '';
|
|
openHoldModal.value = false;
|
|
} catch (error: any) {
|
|
message.error(error.message || 'Hold 失败');
|
|
return;
|
|
}
|
|
|
|
// 添加修改记录
|
|
try {
|
|
addQualityAbnormalContact({
|
|
materialCode: workOrderInfo.tarMaterialCode,
|
|
abnormalOperation: processInfo.operationCode,
|
|
planFinishDate: tmpPlanFinishDate,
|
|
status: "Hold",
|
|
})
|
|
} catch (error: any) {
|
|
message.error(error.message || '添加记录异常');
|
|
return;
|
|
}
|
|
};
|
|
|
|
const handleCopy = async (text: string | number | undefined) => {
|
|
if (!text) return;
|
|
await navigator.clipboard.writeText(String(text));
|
|
message.success(`已复制: ${ text }`);
|
|
}
|
|
|
|
const pwoCodeOptions = ref<LotTraceOrderData[]>([])
|
|
const handleSearch = debounce(async (code: string) => {
|
|
if (!code) return;
|
|
try {
|
|
const { rows } = await listLotTraceOrder({
|
|
code,
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
});
|
|
pwoCodeOptions.value = rows.map(item => {
|
|
return {
|
|
id: item.id,
|
|
label: item.code,
|
|
value: item.code,
|
|
}
|
|
});
|
|
} catch (error: any) {
|
|
message.error(error.message || '获取工单信息失败');
|
|
}
|
|
}, 500)
|
|
|
|
const loadingPwoInfo = ref(false);
|
|
const handleChange = async (value: string, option: LotTraceOrderData) => {
|
|
workOrderInfo.code = value;
|
|
try {
|
|
loadingPwoInfo.value = true;
|
|
if (!option.id) throw new Error();
|
|
const { data } = await getLotTraceOrder(option.id)
|
|
Object.assign(workOrderInfo, data);
|
|
pwoStore.setInfo(data);
|
|
jobStore.resetInfo();
|
|
infeedRef.value?.fetchStations();
|
|
} catch (error: any) {
|
|
message.error(error.message || '获取工单信息失败');
|
|
} finally {
|
|
loadingPwoInfo.value = false;
|
|
}
|
|
}
|
|
|
|
// 刷新工单信息
|
|
const handleRefresh = async () => {
|
|
if (!workOrderInfo.id) return;
|
|
try {
|
|
loadingPwoInfo.value = true;
|
|
const { data } = await getLotTraceOrder(workOrderInfo.id)
|
|
Object.assign(workOrderInfo, data);
|
|
pwoStore.setInfo(data);
|
|
infeedRef.value?.fetchStations();
|
|
} catch (error: any) {
|
|
message.error(error.message || '刷新工单信息失败');
|
|
} finally {
|
|
loadingPwoInfo.value = false;
|
|
}
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
pwoStore.resetInfo();
|
|
jobStore.resetInfo();
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container">
|
|
<Header title="过站工控机" showHome showLogout>
|
|
<template #right-opts>
|
|
<a-button @click="toggleCollapse">{{ collapsed ? '展开' : '折叠' }}</a-button>
|
|
</template>
|
|
</Header>
|
|
|
|
<div class="content-wrapper">
|
|
<!-- Top Section -->
|
|
<div class="top-section">
|
|
<a-row :gutter="16" class="full-height-row">
|
|
<!-- Work Order Info -->
|
|
<a-col :span="13">
|
|
<a-spin :spinning="loadingPwoInfo">
|
|
<a-card title="工单信息" class="info-card" :bordered="false">
|
|
<a-form :model="workOrderInfo" :colon="false" v-show="!collapsed">
|
|
<a-row :gutter="36">
|
|
<a-col :span="12">
|
|
<a-form-item label="工单批次">
|
|
<a-input v-model:value="workOrderInfo.batchNo" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(workOrderInfo.batchNo)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="工单状态">
|
|
<a-input readonly>
|
|
<template #prefix>
|
|
<DictTag :options="lot_trace_order_status" :value="workOrderInfo.status" size="medium" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="总计数量">
|
|
<a-input v-model:value="workOrderInfo.planQty" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(workOrderInfo.planQty)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="产品编码">
|
|
<a-input v-model:value="workOrderInfo.tarMaterialCode" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(workOrderInfo.tarMaterialCode)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="产品名称">
|
|
<a-input v-model:value="workOrderInfo.tarMaterialName" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(workOrderInfo.tarMaterialName)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<!-- <a-form-item label="产品规格">
|
|
<a-input readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy('')" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item> -->
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
<template #extra>
|
|
<a-space>
|
|
工单编码
|
|
<a-select v-model:value="workOrderInfo.code" show-search placeholder="输入工单编码" style="width: 300px"
|
|
:show-arrow="false" :options="pwoCodeOptions" @search="handleSearch" :disabled="route.name !== 'PwoManageIndex'"
|
|
@change="(val, option) => handleChange(val as string, option as LotTraceOrderData)" />
|
|
<a-button @click="handleRefresh"><template #icon><i-lucide-rotate-cw /></template></a-button>
|
|
</a-space>
|
|
</template>
|
|
</a-card>
|
|
</a-spin>
|
|
</a-col>
|
|
|
|
<!-- Process Info -->
|
|
<a-col :span="8">
|
|
<a-spin :spinning="jobStore.loadingJobInfo">
|
|
<a-card title="工序信息" class="info-card" :bordered="false">
|
|
<a-form :model="processInfo" :colon="false" v-show="!collapsed">
|
|
<a-form-item label="工序名称">
|
|
<a-input v-model:value="processInfo.operationTitle" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(processInfo.operationTitle)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="工序状态">
|
|
<a-input readonly>
|
|
<template #prefix>
|
|
<DictTag :options="mes_station_status" :value="processInfo.status" size="medium" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item label="作业编码">
|
|
<a-input v-model:value="processInfo.code" readonly>
|
|
<template #suffix>
|
|
<a-button @click="handleCopy(processInfo.code)" size="small">
|
|
<template #icon><i-lucide-copy /></template>
|
|
</a-button>
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-form>
|
|
<template #extra>
|
|
<a-button @click="jobStore.refresh"><template #icon><i-lucide-rotate-cw /></template></a-button>
|
|
</template>
|
|
</a-card>
|
|
</a-spin>
|
|
</a-col>
|
|
|
|
<!-- Action Buttons -->
|
|
<a-col :span="3" class="action-buttons-col">
|
|
<div class="action-buttons" v-show="!collapsed">
|
|
<a-button class="action-btn green-btn" @click="redirectTo('PwoManage')">工单管理</a-button>
|
|
<a-button class="action-btn orange-btn" @click="redirectTo('PrimaryMaterial')">主材清单</a-button>
|
|
<a-button class="action-btn red-btn" @click="handleHold">Hold</a-button>
|
|
</div>
|
|
<a-card title="操作" class="info-card" :bordered="false" v-show="collapsed">
|
|
<template #extra>
|
|
<a-dropdown>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="1" @click="redirectTo('PwoManage')">工单管理</a-menu-item>
|
|
<a-menu-item key="2" @click="redirectTo('PrimaryMaterial')">主材清单</a-menu-item>
|
|
<a-menu-item key="4" @click="handleHold">Hold</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
<a-button>
|
|
更多
|
|
<i-lucide-chevron-down />
|
|
</a-button>
|
|
</a-dropdown>
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
|
|
<!-- Bottom Section -->
|
|
<main class="bottom-section">
|
|
<router-view v-slot="{ Component }">
|
|
<component :is="Component" ref="infeedRef" />
|
|
</router-view>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Hold Modal -->
|
|
<a-modal
|
|
v-model:open="openHoldModal"
|
|
title="Hold 操作"
|
|
@cancel="handleCloseHold"
|
|
@ok="handleSubmitHold"
|
|
>
|
|
<a-form :colon="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
|
<a-form-item label="工单编码">
|
|
<a-input v-model:value="workOrderInfo.code" readonly />
|
|
</a-form-item>
|
|
<a-form-item label="目标产品编码">
|
|
<a-input v-model:value="workOrderInfo.tarMaterialCode" readonly />
|
|
</a-form-item>
|
|
<a-form-item label="目标产品名称">
|
|
<a-input v-model:value="workOrderInfo.tarMaterialName" readonly />
|
|
</a-form-item>
|
|
<a-form-item label="发起工序名称">
|
|
<a-input v-model:value="processInfo.operationTitle" readonly />
|
|
</a-form-item>
|
|
<a-form-item label="产品规格">
|
|
<a-input readonly />
|
|
</a-form-item>
|
|
<a-form-item label="计划完成日期">
|
|
<a-date-picker v-model:value="planFinishDate" placeholder="选择计划完成日期"
|
|
valueFormat="YYYY-MM-DD HH:mm:ss" show-time style="width: 100%" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.page-container {
|
|
height: 100vh;
|
|
background-color: #f0f2f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 16px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.top-section {
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.ant-spin-nested-loading),
|
|
:deep(.ant-spin-container) {
|
|
height: 100%;
|
|
}
|
|
|
|
.info-card {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
|
|
:deep(.ant-card-head) {
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
border-bottom: none;
|
|
font-size: 20px;
|
|
}
|
|
|
|
:deep(.ant-card-body) {
|
|
padding: 1px 16px;
|
|
}
|
|
|
|
:deep(.ant-form-item) {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.action-buttons-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
height: 100%;
|
|
|
|
.action-btn {
|
|
height: 48px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.bottom-section {
|
|
background: #fff;
|
|
padding: 12px 14px;
|
|
border-radius: 8px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
</style>
|