From 8794a8cfc63f96985076b58f64d8b1b64b957f97 Mon Sep 17 00:00:00 2001
From: tzy <1042411602@qq.com>
Date: Mon, 1 Jun 2026 13:59:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=94=98=E7=89=B9=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  28 +++
 src/router/index.ts                           |  13 ++
 .../orderProject/components/GanttSchedule.vue | 211 ++++++++++++------
 src/views/biz/orderProject/index.vue          |  29 +--
 4 files changed, 194 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30b5d4e..14b0c0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
         "axios": "^1.6.5",
+        "dhtmlx-gantt": "^9.1.4",
         "disable-devtool": "^0.3.9",
         "echarts": "^6.0.0",
         "jsencrypt": "^3.3.2",
@@ -19,6 +20,7 @@
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
         "vue": "^3.4.15",
+        "vue-draggable-plus": "^0.6.1",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -1201,6 +1203,11 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="
+    },
     "node_modules/@vicons/ionicons5": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
@@ -1555,6 +1562,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/dhtmlx-gantt": {
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/dhtmlx-gantt/-/dhtmlx-gantt-9.1.4.tgz",
+      "integrity": "sha512-XCNA5QUiuV79Xq1ykNpH9LFNR2IVpDZMqnmBV6dsBeOkHyPMOpkyQ/gqAPCcK2GAvYHoN2nGAMYb2LldCWhMuQ=="
+    },
     "node_modules/disable-devtool": {
       "version": "0.3.9",
       "resolved": "https://registry.npmmirror.com/disable-devtool/-/disable-devtool-0.3.9.tgz",
@@ -2392,6 +2404,22 @@
         }
       }
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.6.1.tgz",
+      "integrity": "sha512-FbtQ/fuoixiOfTZzG3yoPl4JAo9HJXRHmBQZFB9x2NYCh6pq0TomHf7g5MUmpaDYv+LU2n6BPq2YN9sBO+FbIg==",
+      "dependencies": {
+        "@types/sortablejs": "^1.15.8"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz",
diff --git a/src/router/index.ts b/src/router/index.ts
index 5ceceab..711c57d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -116,6 +116,19 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/org/post/index.vue'),
         meta: { title: '岗位管理', icon: 'IdCardOutline' }
       },
+      // 项目管理
+      {
+        path: 'biz/orderProject',
+        name: 'OrderProject',
+        component: () => import('@/views/biz/orderProject/index.vue'),
+        meta: { title: '项目管理', icon: 'PersonOutline' }
+      },
+      {
+        path: 'biz/orderProject/gantt',
+        name: 'OrderProjectGantt',
+        component: () => import('@/views/biz/orderProject/components/GanttSchedule.vue'),
+        meta: { title: '甘特图排产', icon: 'CalendarOutline', activeMenu: '/biz/orderProject' }
+      },
       //运营管理
       {
         path: 'biz/product',
diff --git a/src/views/biz/orderProject/components/GanttSchedule.vue b/src/views/biz/orderProject/components/GanttSchedule.vue
index a9bb8be..e476c08 100644
--- a/src/views/biz/orderProject/components/GanttSchedule.vue
+++ b/src/views/biz/orderProject/components/GanttSchedule.vue
@@ -1,57 +1,66 @@
 <template>
-  <n-modal
-    v-model:show="visible"
-    preset="card"
-    title="甘特图排产"
-    class="gantt-modal"
-    :style="{ width: '96vw', maxWidth: '1920px' }"
-    :content-style="{ padding: '16px 24px', minHeight: '72vh', display: 'flex', flexDirection: 'column' }"
-    :mask-closable="false"
-  >
+  <div class="gantt-schedule-page">
+    <div class="gantt-header">
+      <n-space justify="space-between" align="center">
+        <n-h2 style="margin: 0">甘特图排产</n-h2>
+        <n-button @click="handleBack">返回</n-button>
+      </n-space>
+    </div>
     <div class="gantt-container" ref="ganttContainer"></div>
-  </n-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, toRaw } from 'vue'
 import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
 import { gantt } from 'dhtmlx-gantt'
 import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
+import { orderProjectApi } from '@/api/orderProject'
 
-const props = defineProps<{
-  show: boolean
-  data: any[] // 传入的排产数据（主单及工序）
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:show', val: boolean): void
-  (e: 'update-time', payload: { id: string; type: string; item: any; start: string; end: string }): void
-}>()
-
-const visible = ref(props.show)
-watch(() => props.show, (val) => {
-  visible.value = val
-  if (val) {
-    nextTick(() => {
-      initGantt()
-    })
-  }
-})
-
-watch(visible, (val) => {
-  emit('update:show', val)
-})
-
+const router = useRouter()
 const ganttContainer = ref<HTMLElement | null>(null)
 const message = useMessage()
 let ganttEventIds: string[] = []
 
+const tableData = ref<any[]>([])
+
+function handleBack() {
+  router.back()
+}
+
+onMounted(async () => {
+  try {
+  
+    initGantt()
+    
+    
+    const stateStr = sessionStorage.getItem('gantt_schedule_data')
+    if (stateStr) {
+      const parsedData = JSON.parse(stateStr)
+      tableData.value = parsedData
+      renderGanttData()
+    } else {
+      message.warning('未获取到排产数据')
+    }
+  } catch (error) {
+    message.error('加载排产数据失败')
+  }
+})
+
+function formatGanttDate(date: Date) {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
 function initGantt() {
   if (!ganttContainer.value) return
 
   // 清理之前的事件绑定
   ganttEventIds.forEach(id => gantt.detachEvent(id))
   ganttEventIds = []
+  
+  gantt.clearAll()
 
   // 配置甘特图
   gantt.config.date_format = "%Y-%m-%d %H:%i:%s"
@@ -61,36 +70,71 @@ function initGantt() {
     { unit: "day", step: 1, format: "%d日" }
   ]
   gantt.config.columns = [
-    { name: "text", label: "工单 / 工序", tree: true, width: 220, resize: true },
-    { name: "start_date", label: "计划开始", align: "center", width: 120 },
-    { name: "end_date", label: "计划结束", align: "center", width: 120 },
+    { name: "text", label: "单号 / 序号", tree: true, width: 200, resize: true },
+    { name: "materialCode", label: "物料编码", align: "center", width: 140, resize: true },
+    { name: "name", label: "名称", align: "center", width: 160, resize: true },
+    { name: "start_date", label: "计划开始", align: "center", width: 130 },
+    { name: "end_date", label: "计划结束", align: "center", width: 130 },
   ]
   
   // 行为配置
   gantt.config.drag_progress = false // 禁用进度拖拽
   gantt.config.drag_links = false    // 禁用连线拖拽（视需求而定）
-  gantt.config.work_time = true      // 启用工作时间计算（如果需要可配置）
+  gantt.config.work_time = true      // 启用工作时间计算
+  // 注意：gantt.config.auto_scheduling 是商业版功能，开源版不能开启，否则会报错
   
   gantt.i18n.setLocale("cn")
 
+  // 启用 marker 插件（今日时间轴）
+  gantt.plugins({
+    marker: true
+  })
+
+  // 图表条块文字自定义
+  gantt.templates.task_text = function(start, end, task) {
+    if (task._type === 'route') {
+      return task.name; // 工序在图上显示工序名称
+    }
+    return task.text;
+  };
+
   gantt.init(ganttContainer.value)
 
+  // 添加今日时间轴标记
+  const today = new Date()
+  gantt.addMarker({
+    start_date: today,
+    css: "today-marker",
+    text: "今日",
+    title: "今日: " + formatGanttDate(today)
+  })
+}
+
+function renderGanttData() {
+  gantt.clearAll()
   // 转换数据格式
   const tasks: any[] = []
   
-  props.data.forEach((mo) => {
-    const moId = `mo_${mo.productionOrderNo}_${mo.billNo}`
-    
+ 
+  const rawData = toRaw(tableData.value) || []
+  const processColors = ['#3498db', '#1abc9c', '#9b59b6', '#e67e22', '#e74c3c', '#2ecc71', '#f1c40f', '#34495e', '#7f8c8d']
+  
+  rawData.forEach((mo: any, moIndex: number) => {
+    const moId = `mo_${moIndex}_${mo.productionOrderNo}_${mo.billNo}`
     // 寻找子工序中最早和最晚的时间作为项目时间（或者使用默认时间）
     let minDate: Date | null = mo.planStartTime ? new Date(mo.planStartTime.replace(' ', 'T')) : null
     let maxDate: Date | null = mo.planFinishTime ? new Date(mo.planFinishTime.replace(' ', 'T')) : null
-    
+    if (!minDate || isNaN(minDate.getTime())) minDate = new Date()
+    if (!maxDate || isNaN(maxDate.getTime())) maxDate = new Date(minDate.getTime() + 86400000)
+    if (maxDate <= minDate) maxDate = new Date(minDate.getTime() + 86400000)
     tasks.push({
       id: moId,
-      text: `${mo.materialName || '产品'} (${mo.productionOrderNo})`,
-      start_date: minDate || new Date(),
-      end_date: maxDate || new Date(Date.now() + 86400000),
-      open: true,
+      text: mo.productionOrderNo || mo.billNo || '未知单号',
+      materialCode: mo.materialCode || '',
+      name: mo.materialName || '产品',
+      start_date: formatGanttDate(minDate),
+      end_date: formatGanttDate(maxDate),
+      open: false, // 树形默认关闭
       type: gantt.config.types.project,
       _type: 'mo',
       _raw: mo
@@ -98,15 +142,22 @@ function initGantt() {
 
     if (mo.processRoutes && mo.processRoutes.length > 0) {
       mo.processRoutes.forEach((route: any, index: number) => {
-        const routeId = `route_${mo.productionOrderNo}_${route.operNumber}_${index}`
-        const rStart = route.planStartTime ? new Date(route.planStartTime.replace(' ', 'T')) : (minDate || new Date())
-        const rEnd = route.planFinishTime ? new Date(route.planFinishTime.replace(' ', 'T')) : (maxDate || new Date(Date.now() + 86400000))
+        const routeId = `route_${moId}_${index}`
+        let rStart = route.planStartTime ? new Date(route.planStartTime.replace(' ', 'T')) : null
+        let rEnd = route.planFinishTime ? new Date(route.planFinishTime.replace(' ', 'T')) : null
+        
+        if (!rStart || isNaN(rStart.getTime())) rStart = minDate
+        if (!rEnd || isNaN(rEnd.getTime())) rEnd = maxDate
+        if (rEnd <= rStart) rEnd = new Date(rStart!.getTime() + 3600000) // 默认工序时长加1小时
         
         tasks.push({
           id: routeId,
-          text: `${route.operDescription || route.processProperty} (${route.operNumber})`,
-          start_date: rStart,
-          end_date: rEnd,
+          text: route.operNumber != null ? String(route.operNumber) : String(index + 1),
+          materialCode: '',
+          name: route.processProperty || '工序', 
+          color: processColors[index % processColors.length],
+          start_date: formatGanttDate(rStart!),
+          end_date: formatGanttDate(rEnd),
           parent: moId,
           _type: 'route',
           _raw: route
@@ -115,9 +166,18 @@ function initGantt() {
     }
   })
 
-  gantt.clearAll()
   gantt.parse({ data: tasks, links: [] })
 
+  // 限制只能拖拽工序，不能直接拖拽主工单（项目）
+  const evDragId = gantt.attachEvent("onBeforeTaskDrag", (id, mode, e) => {
+    const task = gantt.getTask(id)
+    if (task.type === gantt.config.types.project) {
+      return false
+    }
+    return true
+  })
+  ganttEventIds.push(evDragId)
+
   // 绑定拖拽结束事件
   const evId = gantt.attachEvent("onAfterTaskDrag", (id, mode, e) => {
     const task = gantt.getTask(id)
@@ -127,14 +187,14 @@ function initGantt() {
       
       message.success(`任务 [${task.text}] 计划时间已更新: ${start} ~ ${end}`)
       
-      // 触发更新事件给父组件，同步表格数据
-      emit('update-time', {
-        id: id as string,
-        type: task._type,
-        item: task._raw,
-        start,
-        end
-      })
+      // 更新原数据
+      if (task._type === 'mo') {
+        task._raw.planStartTime = start
+        task._raw.planFinishTime = end
+      } else if (task._type === 'route') {
+        task._raw.planStartTime = start
+        task._raw.planFinishTime = end
+      }
     }
   })
   ganttEventIds.push(evId)
@@ -147,16 +207,37 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.gantt-modal :deep(.n-card__content) {
+.gantt-schedule-page {
   display: flex;
   flex-direction: column;
+  height: calc(100vh - 120px);
+  background-color: var(--n-color);
+  padding: 16px;
+  border-radius: 8px;
+  box-sizing: border-box;
 }
+
+.gantt-header {
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+
 .gantt-container {
   flex: 1;
   width: 100%;
-  height: 100%;
-  min-height: 500px;
+  min-height: 0; /* 必须设置min-height以允许flex子元素内部滚动 */
   border: 1px solid var(--n-border-color);
   border-radius: 4px;
+  overflow: hidden;
+}
+
+:deep(.today-marker) {
+  background-color: #ff5252;
+}
+:deep(.today-marker .gantt_marker_content) {
+  background-color: #ff5252;
+  color: white;
+  border-radius: 2px;
+  padding: 0 4px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/biz/orderProject/index.vue b/src/views/biz/orderProject/index.vue
index 914de76..c8d7bc2 100644
--- a/src/views/biz/orderProject/index.vue
+++ b/src/views/biz/orderProject/index.vue
@@ -214,13 +214,6 @@
         <n-button @click="importModalVisible = false">关闭</n-button>
       </template>
     </n-modal>
-
-    <!-- 甘特图排产组件 -->
-    <GanttSchedule
-      v-model:show="ganttModalVisible"
-      :data="kingdeeTableData"
-      @update-time="handleGanttTimeUpdate"
-    />
   </div>
 </template>
 
@@ -231,11 +224,13 @@ import { SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline,
 import { orderProjectApi, type OrderProject, type KingdeePrdMo, type KingdeeProcessRoute } from '@/api/orderProject'
 import { dictDataApi } from '@/api/org'
 import { useUserStore } from '@/stores/user'
-import GanttSchedule from './components/GanttSchedule.vue'
+
+import { useRouter } from 'vue-router'
 
 const message = useMessage()
 const dialog = useDialog()
 const userStore = useUserStore()
+const router = useRouter()
 const hasPermission = (permission: string) => userStore.hasPermission(permission)
 
 // 搜索表单
@@ -264,7 +259,6 @@ const importModalVisible = ref(false)
 const kingdeeModalVisible = ref(false)
 const kingdeeModalTitle = ref('金蝶生产订单')
 const kingdeeLoading = ref(false)
-const ganttModalVisible = ref(false)
 /** 主表行：工序仅存 processRoutes，避免 children 触发树形重复行 */
 type KingdeeMoTableRow = Omit<KingdeePrdMo, 'children'> & { processRoutes: KingdeeProcessRoute[] }
 
@@ -647,19 +641,10 @@ async function handleSubmit() {
 
 // 甘特图排产
 function handleGanttSchedule() {
-  ganttModalVisible.value = true
-}
-
-// 接收甘特图拖拽更新的时间
-function handleGanttTimeUpdate(payload: { id: string; type: string; item: any; start: string; end: string }) {
-  const { type, item, start, end } = payload
-  if (type === 'mo') {
-    item.planStartTime = start
-    item.planFinishTime = end
-  } else if (type === 'route') {
-    item.planStartTime = start
-    item.planFinishTime = end
-  }
+  // 将待排产数据存入 sessionStorage
+  sessionStorage.setItem('gantt_schedule_data', JSON.stringify(kingdeeTableData.value))
+  // 跳转到甘特图排产独立页面
+  router.push('/biz/orderProject/gantt')
 }
 
 // 金蝶预生产查询