Wance/frontend_hmi_station
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化工单管理主界面架构

Browse Source
This commit is contained in:
tao
2025-12-29 09:02:46 +08:00
parent d7e6889339
commit 40c5141385
2 changed files with 156 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/pwoManage/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
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/station';
import { usePwoStore } from '@/store';
import { listStation } from '@/api/pwoManage/station';
import { usePwoStore, useJobStore } from '@/store';
interface TableItem {
key: string;
@@ -17,8 +17,9 @@ interface TableItem {
[key: string]: any;
}
const route = useRoute();
const router = useRouter();
const pwoStore = usePwoStore();
const jobStore = useJobStore();
const tableData = ref<TableItem[]>([]);
const columns = [
@@ -28,7 +29,7 @@ const columns = [
{ 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 },
{ title: '操作', key: 'action', align: 'center' },
];
const loadingStations = ref(false);
@@ -50,30 +51,29 @@ const fetchStations = async (traceOrderCode: string) => {
}
};
const handleSubmit = (record: TableItem) => {
message.success(`提交了序号: ${record.index}`);
const handleInfeed = (record: any) => {
jobStore.setInfo(record);
router.push({ name: 'Infeed' });
};
onMounted(() => {
const traceOrderCode = route.query.traceOrderCode as string;
if (traceOrderCode) {
fetchStations(traceOrderCode);
}
});
const handleOutfeed = () => {
router.push({ name: 'Outfeed' });
};
watch(
() => route.query.t,
() => pwoStore.pwoInfo.code,
(val) => {
if (val) {
fetchStations(route.query.traceOrderCode as string);
fetchStations(val);
}
}
);
},
{ immediate: true }
)
function rowClick(record: TableItem) {
return {
onClick: () => {
pwoStore.setCurrentJob(record);
jobStore.setInfo(record);
},
};
}
@@ -88,14 +88,16 @@ function rowClick(record: TableItem) {
: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>
<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>

230
src/views/pwoManage/layout.vue
View File

@@ -1,53 +1,20 @@
<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { ref, reactive, nextTick, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Header from '@/components/Header/index.vue';
import { message } from 'ant-design-vue';
import { useAuthStore, usePwoStore } from '@/store';
import type { WorkOrderInfo } from './model';
import { listLotTraceOrder } from '@/api/pwoManage';
import { storeToRefs } from 'pinia';
import { debounce } from 'lodash';
import { usePwoStore, useJobStore } from '@/store';
import { listLotTraceOrder, getLotTraceOrder, addQualityAbnormalContact } from '@/api/pwoManage';
import type { LotTraceOrderData } from '@/api/pwoManage/model';
const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const pwoStore = usePwoStore();
const jobStore = useJobStore();
const workOrderInfo = reactive<WorkOrderInfo>({
code: '',
batchNo: '',
status: '',
tarMaterialName: '',
tarMaterialCode: '',
planQty: undefined,
});
const processInfo: any = storeToRefs(pwoStore).currentJob;
const loadingPwoInfo = ref(false);
const fetchLotTraceOrder = async () => {
if (!workOrderInfo.code) return;
try {
loadingPwoInfo.value = true;
const res = await listLotTraceOrder({
code: workOrderInfo.code,
});
if (res.total as number <= 0) {
throw new Error('未查询到工单信息，请检查工单编码')
};
workOrderInfo.status = res.rows[0].status;
workOrderInfo.batchNo = res.rows[0].batchNo;
workOrderInfo.tarMaterialName = res.rows[0].tarMaterialName;
workOrderInfo.tarMaterialCode = res.rows[0].tarMaterialCode;
workOrderInfo.planQty = res.rows[0].planQty;
router.replace({ query: { ...route.query, traceOrderCode: workOrderInfo.code, t: Date.now() } });
} catch (error: any) {
message.error(error.message || '获取工单信息失败');
} finally {
loadingPwoInfo.value = false;
}
};
const workOrderInfo = reactive<LotTraceOrderData>({});
const processInfo = jobStore.jobInfo;
// 孙组件
const infeedRef = ref<any>(null);
@@ -57,41 +24,51 @@ const toggleCollapse = async () => {
await nextTick();
infeedRef.value?.renderTableHeight();
}
const handlePwoManage = () => {
router.push({ name: 'PwoManage' })
const redirectTo = (routeName: string) => {
router.push({ name: routeName });
if (routeName === 'PwoManage') {
handleRefresh();
}
}
const handleWaferAppearance = () => {
message.info('点击了 Wafer');
};
const handleDieAppearance = () => {
message.info('点击了 Die');
};
const openHoldModal = ref(false);
const holdForm = reactive({
planCompleteDate: '',
});
const planFinishDate = ref('');
const handleHold = () => {
if (!workOrderInfo.code) {
message.error('请先选择工单！');
return;
}
openHoldModal.value = true;
};
const handleCloseHold = () => {
holdForm.planCompleteDate = '';
planFinishDate.value = '';
openHoldModal.value = false;
};
const handleSubmitHold = () => {
message.success('Hold 住！')
holdForm.planCompleteDate = '';
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;
}
const handleInfeed = () => {
router.push({ name: 'Infeed' });
};
const handleOutfeed = () => {
router.push({ name: 'Outfeed' });
// 添加修改记录
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) => {
@@ -99,11 +76,69 @@ const handleCopy = async (text: string | number | undefined) => {
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();
} 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);
} 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 showBack showLogout>
<Header title="过站工控机" showHome showLogout>
<template #right-opts>
<a-button @click="toggleCollapse">{{ collapsed ? '展开' : '折叠' }}</a-button>
</template>
@@ -167,20 +202,26 @@ const handleCopy = async (text: string | number | undefined) => {
</template>
</a-input>
</a-form-item>
<a-form-item label="产品规格">
<a-input v-model:value="workOrderInfo.planQty" readonly>
<!-- <a-form-item label="产品规格">
<a-input readonly>
<template #suffix>
<a-button @click="handleCopy(workOrderInfo.planQty)">
<a-button @click="handleCopy('')">
<template #icon><i-lucide-copy /></template>
</a-button>
</template>
</a-input>
</a-form-item>
</a-form-item> -->
</a-col>
</a-row>
</a-form>
<template #extra>
<a-input-search v-model:value="workOrderInfo.code" @search="fetchLotTraceOrder" placeholder="输入工单编码" enter-button />
<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>
@@ -189,18 +230,25 @@ const handleCopy = async (text: string | number | undefined) => {
<!-- Process Info -->
<a-col :span="8">
<a-card title="工序信息" class="info-card" :bordered="false">
<a-form :model="processInfo" :colon="false" :label-col="{ span: 4 }" :wrapper-col="{ span: 20, offset: 2 }"
v-show="!collapsed">
<a-form :model="processInfo" :colon="false" v-show="!collapsed">
<a-form-item label="工序名称">
<a-input v-model:value="processInfo.operationTitle" readonly>
<template #suffix>
<a-tag color="#f50" v-if="processInfo.status">{{ processInfo.status }}</a-tag>
<a-button @click="handleCopy(processInfo.operationTitle)">
<template #icon><i-lucide-copy /></template>
</a-button>
</template>
</a-input>
</a-form-item>
<a-form-item label="工序状态">
<a-input v-model:value="processInfo.status" readonly>
<template #suffix>
<a-button @click="handleCopy(processInfo.status)">
<template #icon><i-lucide-copy /></template>
</a-button>
</template>
</a-input>
</a-form-item>
<a-form-item label="作业编码">
<a-input v-model:value="processInfo.code" readonly>
<template #suffix>
@@ -210,15 +258,6 @@ const handleCopy = async (text: string | number | undefined) => {
</template>
</a-input>
</a-form-item>
<a-form-item label="设备名称">
<a-input v-model:value="processInfo.tarMaterialName" readonly>
<template #suffix>
<a-button @click="handleCopy(processInfo.tarMaterialName)">
<template #icon><i-lucide-copy /></template>
</a-button>
</template>
</a-input>
</a-form-item>
</a-form>
</a-card>
</a-col>
@@ -226,26 +265,18 @@ const handleCopy = async (text: string | number | undefined) => {
<!-- 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="handlePwoManage">工单管理</a-button>
<a-button class="action-btn orange-btn" @click="handleWaferAppearance">Wafer 清单</a-button>
<a-button class="action-btn blue-btn" @click="handleDieAppearance">Die 清单</a-button>
<a-space>
<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>
<a-button class="action-btn orange-btn" @click="handleInfeed">进站</a-button>
<a-button class="action-btn blue-btn" @click="handleOutfeed">出站</a-button>
</a-space>
</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="handlePwoManage">工单管理</a-menu-item>
<a-menu-item key="2" @click="handleWaferAppearance">Wafer 清单</a-menu-item>
<a-menu-item key="3" @click="handleDieAppearance">Die 清单</a-menu-item>
<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-item key="5" @click="handleInfeed">进站</a-menu-item>
<a-menu-item key="6" @click="handleOutfeed">出站</a-menu-item>
</a-menu>
</template>
<a-button>
@@ -274,7 +305,7 @@ const handleCopy = async (text: string | number | undefined) => {
@cancel="handleCloseHold"
@ok="handleSubmitHold"
>
<a-form :model="holdForm" :colon="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<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>
@@ -284,14 +315,15 @@ const handleCopy = async (text: string | number | undefined) => {
<a-form-item label="目标产品名称">
<a-input v-model:value="workOrderInfo.tarMaterialName" readonly />
</a-form-item>
<a-form-item label="工序名称">
<a-form-item label="发起工序名称">
<a-input v-model:value="processInfo.operationTitle" readonly />
</a-form-item>
<a-form-item label="产品规格">
<a-input v-model:value="processInfo.code" readonly />
<a-input readonly />
</a-form-item>
<a-form-item label="计划完成日期">
<a-input v-model:value="holdForm.planCompleteDate" />
<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>