✨ feat: 增加专门的排产页面

klp-ui/src/views/wms/work/schedulePlan/panes/batch.vue

@@ -1,14 +1,34 @@
 <template>
   <div class="app-container">
-    <el-row style="margin-bottom: 10px;">
-      <div v-for="(item, index) in taskList" style="display: flex; flex-wrap: wrap; gap: 10px; align-items: center;"
-        :key="index">
+    <el-row style="margin-bottom: 20px; padding: 0 10px;">
+  <!-- 任务列表容器 -->
+  <div class="task-list-container">
+    <!-- 单个任务项 -->
+    <div v-for="(item, index) in taskList" 
+         :key="index" 
+         class="task-item"
+         :style="{marginBottom: index === taskList.length - 1 ? '0' : '20px'}">
+      
+      <!-- 产品信息区域 -->
+      <div class="product-info-wrapper">
         <ProductInfo :productId="item && item[0] && item[0].productId" />
-        <div v-for="process in item" :key="process.processId">
+      </div>
+      
+      <!-- 工艺流程区域 -->
+      <div class="process-flow-container">
+        <div v-for="(process, pIndex) in item" 
+             :key="process.processId" 
+             class="process-item"
+             :style="{
+               marginRight: pIndex !== item.length - 1 ? '15px' : '0',
+               // 最后一个工艺项不加右侧间距
+             }">
           <CraftInfo :craftId="process.processId" />
         </div>
       </div>
-    </el-row>
+    </div>
+  </div>
+</el-row>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
@@ -414,3 +434,56 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+/* 任务列表容器 */
+.task-list-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 单个任务项样式 */
+.task-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+/* 鼠标悬停效果 */
+.task-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background-color: #fff;
+}
+
+/* 产品信息容器 */
+.product-info-wrapper {
+  min-width: 180px; /* 固定产品信息宽度，保证对齐 */
+  padding: 8px 0;
+  border-right: 1px dashed #e5e7eb; /* 分隔线 */
+  margin-right: 15px;
+}
+
+/* 工艺流程容器 */
+.process-flow-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px; /* 工艺项之间的间距 */
+  padding: 8px 0;
+  flex: 1; /* 占满剩余空间 */
+}
+
+/* 单个工艺项样式 */
+.process-item {
+  flex: 0 0 auto; /* 不自动拉伸 */
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  transition: border-color 0.2s ease;
+}
+
+.process-item:hover {
+  border-color: #409eff; /* 高亮边框 */
+}
+
+</style>