优化工单管理主界面架构

src/views/pwoManage/index.vue

@@ -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>

src/views/pwoManage/layout.vue

@@ -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 = '';
-  openHoldModal.value = false;
-};
-const handleSubmitHold = () => {
-  message.success('Hold 住！')
-  holdForm.planCompleteDate = '';
+  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;
+  }
 
-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 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>
+              <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="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>