完善治具进站

src/views/pwoManage/infeed/mask/index.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { message } from 'ant-design-vue';
 import type { ColumnsType } from 'ant-design-vue/es/table/interface';
-import { listMaskCombination, listCombinationAssignMask } from "@/api/pwoManage/maskCombination";
+import { listMaskCombination } from "@/api/pwoManage/maskCombination";
+import { listStationBindMask, bindMaskCombinationToStations, unbindStationMask } from "@/api/pwoManage/mask";
+import { usePwoStore } from '@/store';
+
+const pwoStore = usePwoStore();
 
 interface MaskTableItem {
   key: string;
@@ -27,6 +31,7 @@ const maskColumns = [
   { title: '工序名称', dataIndex: 'operationTitle', key: 'operationTitle', align: 'center' },
   { title: '治具编码', dataIndex: 'maskCode', key: 'maskCode', align: 'center' },
   { title: '治具名称', dataIndex: 'maskName', key: 'maskName', align: 'center' },
+  { title: '操作', dataIndex: 'action', key: 'action', align: 'center' },
 ];
 
 // 治具表格
@@ -53,28 +58,56 @@ const fetchCombinationList = async () => {
   }
 }
 
-const existingCombination = ref(new Set())
 const handleBind = async (id: number) => {
-  const { rows } = await listCombinationAssignMask(id, {
-    maskStatus: "AVAILABLE",
-    orderByColumn: 'id',
-    orderBy: 'desc',
-  })
+  try {
+    await bindMaskCombinationToStations({
+      lotTraceOrderId: pwoStore.pwoInfo.id,
+      maskCombinationId: id
+    });
+    message.success('绑定成功');
+    fetchBoundMaskList();
+    openMaskModal.value = false;
+  } catch (error: any) {
+    message.error(`绑定失败: ${ error.message }`);
+  }
+}
 
-  const newCombination = rows.filter(item => !existingCombination.value.has(item.id))
-  newCombination.forEach(item => {
-    maskTableData.value.push({
-      key: item.id,
-      operationCode: item.operationCode,
-      operationTitle: item.operationTitle,
-      maskCode: item.maskCode,
-      maskName: item.maskName
-    })
-    existingCombination.value.add(item.id)
-  })
+const handleUnbind = async (id: number) => {
+  try {
+    await unbindStationMask(id);
+    message.success('解绑成功');
+    fetchBoundMaskList();
+    openMaskModal.value = false;
+  } catch (error: any) {
+    message.error(`解绑失败: ${ error.message }`);
+  }
+}
 
-  message.success('绑定成功')
-  openMaskModal.value = false
+// 获取已绑定的治具列表
+const loadingMask = ref(false);
+const fetchBoundMaskList = async () => {
+  const traceOrderId = pwoStore.pwoInfo.id;
+  if (!traceOrderId) return;
+  loadingMask.value = true;
+  try {
+    const { rows, total } = await listStationBindMask({ traceOrderId })
+    if (total as number <= 0) return;
+    maskTableData.value = rows;
+  } catch (error: any) {
+    message.error(error.message || '查询治具列表失败');
+  } finally {
+    loadingMask.value = false;
+  }
+}
+
+const inspectingMask = reactive({
+  maskCode: '',
+  maskName: '',
+})
+
+const rowClick = (record: MaskTableItem) => {
+  inspectingMask.maskCode = record.maskCode;
+  inspectingMask.maskName = record.maskName;
 }
 
 // 计算表格高度
@@ -96,6 +129,7 @@ defineExpose({
 });
 
 fetchCombinationList()
+fetchBoundMaskList()
 </script>
 
 <template>
@@ -103,12 +137,18 @@ fetchCombinationList()
     <a-row class="main-content" :gutter="24">
       <a-col :span="14" class="mask-item__container">
         <div class="main-title">治具组合信息</div>
+        <a-space>
           <a-button size="large" @click="() => openMaskModal = true">绑定治具组合</a-button>
+          <a-button size="large" @click="fetchBoundMaskList">刷新</a-button>
+        </a-space>
         <div class="table-wrapper" ref="customTable">
           <a-table :dataSource="maskTableData" :columns="maskColumns as ColumnsType<MaskTableItem>"
-            :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }">
-            <template #bodyCell="{ column, index }">
+            :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }" :loading="loadingMask">
+            <template #bodyCell="{ column, index, record }">
               <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+              <template v-if="column.key === 'action'">
+                <a-button @click="handleUnbind(record.id)">解绑</a-button>
+              </template>
             </template>
           </a-table>
         </div>
@@ -125,18 +165,18 @@ fetchCombinationList()
         </a-row>
         <div class="table-wrapper">
           <a-descriptions bordered :column="1">
-            <a-descriptions-item label="治具编码">Cloud Database</a-descriptions-item>
-            <a-descriptions-item label="治具名称">Prepaid</a-descriptions-item>
-            <a-descriptions-item label="治具组合">YES</a-descriptions-item>
-            <a-descriptions-item label="标准使用次数">YES</a-descriptions-item>
-            <a-descriptions-item label="当前使用次数">YES</a-descriptions-item>
-            <a-descriptions-item label="关联工序">YES</a-descriptions-item>
+            <a-descriptions-item label="治具编码"></a-descriptions-item>
+            <a-descriptions-item label="治具名称"></a-descriptions-item>
+            <a-descriptions-item label="治具组合"></a-descriptions-item>
+            <a-descriptions-item label="标准使用次数"></a-descriptions-item>
+            <a-descriptions-item label="当前使用次数"></a-descriptions-item>
+            <a-descriptions-item label="关联工序"></a-descriptions-item>
           </a-descriptions>
         </div>
       </a-col>
     </a-row>
 
-    <a-modal v-model:open="openMaskModal" title="绑定治具组合" width="50vw" :bodyStyle="{ padding: '20px 0' }">
+    <a-modal v-model:open="openMaskModal" title="绑定治具组合" width="50vw" :bodyStyle="{ padding: '20px 0' }" :footer="null">
       <a-table :dataSource="maskCombinationTableData" :columns="maskCombinationColumns as ColumnsType<MaskCombinationItem>"
         :pagination="false" bordered sticky :scroll="{ y: tableHeight }">
         <template #bodyCell="{ column, index, record }">