缺少产线时间冲突爆红问题

klp-ui/src/views/wms/schedulePlan/detail.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div slot="header">
+        <span>排产计划详情</span>
+        <el-button style="float: right;" @click="$router.back()" size="mini">返回</el-button>
+      </div>
+      <el-descriptions :title="'排产计划编号：' + (planInfo.planCode || '-')" :column="2" border>
+        <el-descriptions-item label="计划ID">{{ planInfo.planId }}</el-descriptions-item>
+        <el-descriptions-item label="关联订单ID">{{ planInfo.orderId }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ planInfo.status }}</el-descriptions-item>
+        <el-descriptions-item label="备注">{{ planInfo.remark }}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="mt20">
+      <div slot="header">
+        <span>排产计划明细</span>
+        <el-button type="primary" size="mini" style="float:right" @click="openDetailDialog()">新增明细</el-button>
+      </div>
+      <el-table :data="detailList" v-loading="loading" style="width: 100%">
+        <el-table-column prop="detailId" label="明细ID" align="center" />
+        <el-table-column prop="lineName" label="产线名称" align="center" />
+        <el-table-column prop="productName" label="产品名称" align="center" />
+        <el-table-column prop="quantity" label="排产数量" align="center" />
+        <el-table-column prop="startDate" label="开始日期" align="center" />
+        <el-table-column prop="endDate" label="结束日期" align="center" />
+        <el-table-column prop="remark" label="备注" align="center" />
+        <el-table-column label="操作" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="openDetailDialog(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="detailDialogTitle" :visible.sync="detailDialogVisible" width="700px" :modal-append-to-body="false" @close="resetDetailForm" :style="{maxHeight: '80vh'}">
+      <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="productId">
+            <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-form-item>
+          <el-form-item label="排产数量" prop="quantity">
+            <el-input-number v-model="detailForm.quantity" :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 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>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailDialogVisible=false">取 消</el-button>
+        <el-button type="primary" @click="submitDetailForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getSchedulePlan } from '@/api/wms/schedulePlan';
+import { listSchedulePlanDetail, addSchedulePlanDetail, updateSchedulePlanDetail } from '@/api/wms/schedulePlanDetail';
+import { listProduct } from '@/api/wms/product';
+import { listProductionLine } from '@/api/wms/productionLine';
+import GanttChartEcharts from '../productionLine/GanttChartEcharts.vue';
+import { ganttProductionLine } from '@/api/wms/productionLine';
+
+export default {
+  name: 'SchedulePlanDetail',
+  components: { GanttChartEcharts },
+  data() {
+    return {
+      planId: null,
+      planInfo: {},
+      detailList: [],
+      loading: false,
+      detailDialogVisible: false,
+      detailDialogTitle: '',
+      detailForm: {
+        detailId: undefined,
+        planId: undefined,
+        lineId: undefined,
+        productId: undefined,
+        quantity: 1,
+        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' }]
+      },
+      productList: [],
+      productionLineList: [],
+      lineGanttTasks: [],
+      previewTask: null
+    };
+  },
+  created() {
+    this.planId = this.$route.query.planId;
+    if (this.planId) {
+      this.fetchPlanInfo();
+      this.fetchDetailList();
+      this.fetchProductList();
+      this.fetchProductionLineList();
+    }
+  },
+  methods: {
+    fetchPlanInfo() {
+      getSchedulePlan(this.planId).then(res => {
+        this.planInfo = res.data || {};
+      });
+    },
+    fetchDetailList() {
+      this.loading = true;
+      listSchedulePlanDetail({ planId: this.planId }).then(res => {
+        this.detailList = res.rows || [];
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    fetchProductList() {
+      listProduct({ pageNum: 1, pageSize: 1000 }).then(res => {
+        this.productList = res.rows || [];
+      });
+    },
+    fetchProductionLineList() {
+      listProductionLine({ pageNum: 1, pageSize: 1000 }).then(res => {
+        this.productionLineList = res.rows || [];
+      });
+    },
+    openDetailDialog(row) {
+      if (row) {
+        this.detailDialogTitle = '编辑明细';
+        this.detailForm = Object.assign({}, row);
+        this.detailForm.dateRange = row.startDate && row.endDate ? [row.startDate, row.endDate] : [];
+      } else {
+        this.detailDialogTitle = '新增明细';
+        this.detailForm = {
+          detailId: undefined,
+          planId: this.planId,
+          lineId: undefined,
+          productId: undefined,
+          quantity: 1,
+          dateRange: [],
+          startDate: '',
+          endDate: '',
+          remark: ''
+        };
+      }
+      this.lineGanttTasks = [];
+      this.detailDialogVisible = true;
+    },
+    resetDetailForm() {
+      this.$refs.detailForm && this.$refs.detailForm.resetFields();
+    },
+    onLineChange(lineId) {
+      if (!lineId) {
+        this.lineGanttTasks = [];
+        return;
+      }
+      ganttProductionLine({ lineId }).then(res => {
+        this.lineGanttTasks = res.data.tasks || [];
+        this.updatePreviewTask();
+      });
+    },
+    // 监听日期区间变化，生成预览任务条
+    updatePreviewTask() {
+      const { lineId, productId, dateRange, quantity } = this.detailForm;
+      if (!lineId || !dateRange || dateRange.length !== 2) {
+        this.previewTask = null;
+        return;
+      }
+      const startDate = dateRange[0];
+      const endDate = dateRange[1];
+      // 判断是否与已有任务冲突（只要有一天重合就算冲突）
+      let hasConflict = false;
+      console.log(this.lineGanttTasks);
+
+      for (const t of this.lineGanttTasks) {
+        if (!t.startDate || !t.endDate) continue;
+        const s1 = new Date(startDate).getTime();
+        const e1 = new Date(endDate).getTime();
+        const s2 = new Date(t.startDate).getTime();
+        const e2 = new Date(t.endDate).getTime();
+        // 只要有一天重合就算冲突
+        if (!(e1 < s2 || s1 > e2)) {
+          hasConflict = true;
+          break;
+        }
+
+
+      }
+
+      this.previewTask = {
+        name: '新任务(预览)',
+        startDate,
+        endDate,
+        quantity,
+        lineId,
+        productId,
+        itemStyle: { color: hasConflict ? '#F56C6C' : '#67C23A', borderRadius: 6 },
+      };
+    },
+    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];
+          this.detailForm.endDate = this.detailForm.dateRange[1];
+        } 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();
+        });
+      });
+    }
+  },
+  watch: {
+    'detailForm.dateRange': {
+      handler() {
+        this.updatePreviewTask();
+      },
+      deep: true
+    },
+    'detailForm.lineId': function() {
+      this.updatePreviewTask();
+    },
+    'detailForm.productId': function() {
+      this.updatePreviewTask();
+    },
+    'detailForm.quantity': function() {
+      this.updatePreviewTask();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mt20 { margin-top: 20px; }
+</style>

klp-ui/src/views/wms/schedulePlan/index.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="排产计划编号" prop="planCode">
+          <el-input
+            v-model="queryParams.planCode"
+            placeholder="请输入排产计划编号"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="关联订单ID" prop="orderId">
+          <el-input
+            v-model="queryParams.orderId"
+            placeholder="请输入关联订单ID"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+  
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['klp:schedulePlan:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['klp:schedulePlan:edit']"
+          >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['klp:schedulePlan:remove']"
+          >删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['klp:schedulePlan:export']"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+  
+      <el-table v-loading="loading" :data="schedulePlanList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="排产计划ID" align="center" prop="planId" v-if="true"/>
+        <el-table-column label="排产计划编号" align="center" prop="planCode" />
+        <el-table-column label="关联订单ID" align="center" prop="orderId" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <el-tag :type="statusTagType(scope.row.status)" disable-transitions>
+              {{ statusText(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['klp:schedulePlan:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['klp:schedulePlan:remove']"
+            >删除</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-document"
+              @click="handleDetail(scope.row)"
+            >详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+  
+      <!-- 添加或修改排产计划对话框 -->
+      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+          <el-form-item label="计划编号" prop="planCode">
+            <el-input v-model="form.planCode" placeholder="请输入排产计划编号" />
+          </el-form-item>
+          <el-form-item label="计划版本" prop="version">
+            <el-input v-model="form.version" placeholder="请输入计划版本" />
+          </el-form-item>
+          <el-form-item label="关联订单" prop="orderId">
+            <el-select v-model="form.orderId" placeholder="请选择关联订单" filterable clearable>
+              <el-option v-for="item in orderList" :key="item.orderId" :label="item.orderCode || item.orderId" :value="item.orderId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import { listSchedulePlan, getSchedulePlan, delSchedulePlan, addSchedulePlan, updateSchedulePlan } from "@/api/wms/schedulePlan";
+  import { listOrder } from "@/api/wms/order";
+  
+  export default {
+    name: "SchedulePlan",
+    data() {
+      return {
+        // 按钮loading
+        buttonLoading: false,
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 排产计划表格数据
+        schedulePlanList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          planCode: undefined,
+          orderId: undefined,
+          status: undefined,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+        },
+        orderList: [], // 新增：订单列表
+      };
+    },
+    created() {
+      this.getList();
+      this.getOrderList(); // 新增：获取订单列表
+    },
+    methods: {
+      /** 查询排产计划列表 */
+      getList() {
+        this.loading = true;
+        listSchedulePlan(this.queryParams).then(response => {
+          this.schedulePlanList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          planId: undefined,
+          planCode: undefined,
+          version: undefined,
+          orderId: undefined,
+          status: undefined,
+          remark: undefined,
+          delFlag: undefined,
+          createTime: undefined,
+          createBy: undefined,
+          updateTime: undefined,
+          updateBy: undefined
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.planId)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加排产计划";
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.loading = true;
+        this.reset();
+        const planId = row.planId || this.ids
+        getSchedulePlan(planId).then(response => {
+          this.loading = false;
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改排产计划";
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            this.buttonLoading = true;
+            if (this.form.planId != null) {
+              updateSchedulePlan(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }).finally(() => {
+                this.buttonLoading = false;
+              });
+            } else {
+              addSchedulePlan(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }).finally(() => {
+                this.buttonLoading = false;
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const planIds = row.planId || this.ids;
+        this.$modal.confirm('是否确认删除排产计划编号为"' + planIds + '"的数据项？').then(() => {
+          this.loading = true;
+          return delSchedulePlan(planIds);
+        }).then(() => {
+          this.loading = false;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {
+        }).finally(() => {
+          this.loading = false;
+        });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('klp/schedulePlan/export', {
+          ...this.queryParams
+        }, `schedulePlan_${new Date().getTime()}.xlsx`)
+      },
+      /** 获取订单列表 */
+      getOrderList() {
+        listOrder({ pageNum: 1, pageSize: 1000 }).then(res => {
+          this.orderList = res.rows || [];
+        });
+      },
+      /** 详情按钮操作 */
+      handleDetail(row) {
+        this.$router.push({
+          path: '/production/schedulePlan/detail',
+          query: { planId: row.planId }
+        });
+      },
+      statusText(val) {
+        switch (val) {
+          case 0:
+          case '0':
+            return '新建';
+          case 1:
+          case '1':
+            return '已排产';
+          case 2:
+          case '2':
+            return '生产中';
+          case 3:
+          case '3':
+            return '已完成';
+          default:
+            return val;
+        }
+      },
+      statusTagType(val) {
+        switch (val) {
+          case 0:
+          case '0':
+            return 'info'; // 新建-灰色
+          case 1:
+          case '1':
+            return 'warning'; // 已排产-橙色
+          case 2:
+          case '2':
+            return 'primary'; // 生产中-蓝色
+          case 3:
+          case '3':
+            return 'success'; // 已完成-绿色
+          default:
+            return '';
+        }
+      }
+    }
+  };
+  </script>
+