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

2025-08-16 10:22:11 +08:00
parent 76408fda0d
commit ade5b538e9
3 changed files with 221 additions and 7 deletions
--- a/klp-ui/src/views/wms/print/scaner.vue
+++ b/klp-ui/src/views/wms/print/scaner.vue
@@ -67,7 +67,7 @@
          </el-table-column>
          <el-table-column label="存储位置" align="center">
            <template #default="scope">
-              <WarehouseSelect v-model="scope.row.warehouseId" />
+              <ELWarehouseSelect v-model="scope.row.warehouseId" />
            </template>
          </el-table-column>
          <el-table-column prop="stockIoId" label="挂载单据" align="center">
@@ -120,12 +120,14 @@
 import { listStockIo, scanInStock, scanOutStock } from '@/api/wms/stockIo';
 import { addStockIoDetail } from '@/api/wms/stockIoDetail';
 import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
+import ELWarehouseSelect from '@/components/KLPService/WarehouseSelect/index.vue';
 import ProductInfo from '@/components/KLPService/Renderer/ProductInfo.vue';
 import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo.vue';

 export default {
  components: {
    WarehouseSelect,
+    ELWarehouseSelect,
    ProductInfo,
    RawMaterialInfo,
  },
--- a/klp-ui/src/views/wms/work/schedule/index.vue
+++ b/klp-ui/src/views/wms/work/schedule/index.vue
@@ -1,4 +1,143 @@
 <template>
-
+  <el-row style="margin: 20px;">
+    <el-col :span="12">
+      <div style="max-height:60vh;overflow:auto;padding-right:8px;">
+        <el-form :model="detailForm" :rules="detailRules" ref="detailForm" label-width="80px" style="overflow:visible;">
+          <el-form-item label="产线" prop="lineId">
+            <el-select v-model="detailForm.lineId" placeholder="请选择产线" filterable @change="onLineChange">
+              <el-option v-for="item in productionLineList" :key="item.lineId" :label="item.lineName"
+                :value="item.lineId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="批次" prop="batchId">
+            <!-- <el-select v-model="detailForm.productId" placeholder="请选择产品" filterable>
+              <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
+                :value="item.productId" />
+            </el-select> -->
+            <el-select v-model="detailForm.batchId" placeholder="请选择批次" filterable @change="onBatchChange">
+              <el-option v-for="item in batchList" :key="item.batchId" :label="item.batchNo" :value="item.batchId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排产数量" prop="quantity">
+            <el-input-number v-model="detailForm.quantity" disabled :min="0.01" :step="0.01" style="width:100%" />
+          </el-form-item>
+          <el-form-item label="计划日期" prop="dateRange">
+            <el-date-picker v-model="detailForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" style="width:100%" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="detailForm.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-button type="primary" @click="submitDetailForm">提交排产</el-button>
+    </el-col>
+    <el-col :span="12">
+      <div style="margin: 12px 0; max-width:100%; min-width:600px; height:220px; overflow-x:auto; overflow-y:hidden;">
+        <GanttChartEcharts v-if="lineGanttTasks.length > 0 || previewTask"
+          :tasks="previewTask ? [...lineGanttTasks, previewTask] : lineGanttTasks"
+          style="height:220px; min-width:600px;" />
+        <el-empty v-else description="请选择产线以查看排产情况" />
+      </div>
+    </el-col>
+  </el-row>
 </template>

+<script>
+import { listProductionLine } from '@/api/wms/productionLine';
+import { ganttProductionLine } from '@/api/wms/productionLine';
+import { addSchedulePlanDetail, updateSchedulePlanDetail } from '@/api/wms/schedulePlanDetail';
+import { listBatch } from '@/api/wms/batch';
+
+import GanttChartEcharts from '../productionLine/GanttChartEcharts.vue';
+
+export default {
+  components: {
+    GanttChartEcharts
+  },
+  data() {
+    return {
+      detailForm: {
+        detailId: undefined,
+        planId: undefined,
+        lineId: undefined,
+        // productId: undefined,
+        batchId: undefined,
+        quantity: 0,
+        dateRange: [],
+        startDate: '',
+        endDate: '',
+        remark: ''
+      },
+      detailRules: {
+        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
+        lineId: [{ required: true, message: '请选择产线', trigger: 'change' }],
+        quantity: [{ required: true, message: '请输入排产数量', trigger: 'blur' }],
+        dateRange: [{ required: true, type: 'array', len: 2, message: '请选择计划日期区间', trigger: 'change' }]
+      },
+      lineGanttTasks: [],
+      productionLineList: [],
+      previewTask: null,
+    }
+  },
+  created() {
+    this.fetchBatchList();
+    this.fetchProductionLineList();
+  },
+  methods: {
+    fetchProductionLineList() {
+      listProductionLine({ pageNum: 1, pageSize: 1000 }).then(res => {
+        this.productionLineList = res.rows || [];
+      });
+    },
+    onLineChange(lineId) {
+      if (!lineId) {
+        this.lineGanttTasks = [];
+        return;
+      }
+      ganttProductionLine({ lineId }).then(res => {
+        this.lineGanttTasks = res.data.tasks || [];
+        this.updatePreviewTask();
+      });
+    },
+    onBatchChange(batchId) {
+      if (batchId) {
+        // 从batchList中查找
+        const batch = this.batchList.find(item => item.batchId == batchId);
+        console.log(batch);
+        if (batch) {
+          this.detailForm.quantity = batch.totalQuantity;
+          this.detailForm.dateRange = [
+            batch.estimatedStartTime,
+            batch.estimatedEndTime
+          ];
+        }
+      }
+    },
+    fetchBatchList() {
+      listBatch({ pageNum: 1, pageSize: 1000 }).then(res => {
+        this.batchList = res.rows || [];
+      });
+    },
+    submitDetailForm() {
+      this.$refs.detailForm.validate(valid => {
+        if (!valid) return;
+        if (this.detailForm.dateRange && this.detailForm.dateRange.length === 2) {
+          this.detailForm.startDate = this.detailForm.dateRange[0].replace(' ', "T") + '.000Z';
+          this.detailForm.endDate = this.detailForm.dateRange[1].replace(' ', "T") + '.000Z';
+        } else {
+          this.detailForm.startDate = '';
+          this.detailForm.endDate = '';
+        }
+        const api = this.detailForm.detailId ? updateSchedulePlanDetail : addSchedulePlanDetail;
+        const data = Object.assign({}, this.detailForm, { planId: this.planId });
+        api(data).then(() => {
+          this.$message.success(this.detailForm.detailId ? '修改成功' : '新增成功');
+          this.detailDialogVisible = false;
+          this.fetchDetailList();
+        });
+      });
+    }
+  }
+}
+</script>
--- a/klp-ui/src/views/wms/work/schedulePlan/panes/batch.vue
+++ b/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>