1.递交

小小儁爺

2026-01-15 207babb2fe57b9a8d876fafb7e088c043aa6efc7

1.递交

 src/views/gantt/index.vue

@@ -2,8 +2,8 @@
  <div style="padding: 0 10px">

    <div style="padding: 10px 0;display: flex;">
      <el-button type="primary" size="mini" @click="ganttUndo">回退拖动操作</el-button>
      <el-button type="primary" size="mini" @click="ganttRedo">前进拖动操作</el-button>
      <!--      <el-button type="primary" size="mini" @click="ganttUndo">回退拖动操作</el-button>-->
      <!--      <el-button type="primary" size="mini" @click="ganttRedo">前进拖动操作</el-button>-->
      <el-button type="primary" size="mini" @click="ganttZoomIn">放大</el-button>
      <el-button type="primary" size="mini" @click="ganttZoomOut">缩小</el-button>
      <el-date-picker
@@ -102,7 +102,7 @@

      gantt.config.drag_progress = false // 禁止通过拖动进度条改变任务进度

      // gantt.config.readonly = true  //只读模式
      gantt.config.readonly = true // 只读模式

      /* ↓↓↓ Group configuration ↓↓↓ */
      gantt.serverList('task_priority', [
@@ -219,19 +219,19 @@

      // 是否是工作时间
      /* ↓↓↓ Working Time configuration ↓↓↓ */
      gantt.templates.scale_cell_class = function(date) {
        if (!gantt.isWorkTime(date)) {
          return 'weekend'
        }
      }
      // gantt.templates.scale_cell_class = function(date) {
      //   if (!gantt.isWorkTime(date)) {
      //     return 'weekend'
      //   }
      // }
      //
      // gantt.templates.timeline_cell_class = function(item, date) {
      //   if (!gantt.isWorkTime({ date: date, task: item })) {
      //     return 'weekend'
      //   }
      // }

      gantt.templates.timeline_cell_class = function(item, date) {
        if (!gantt.isWorkTime({ date: date, task: item })) {
          return 'weekend'
        }
      }

      gantt.config.work_time = true
      // gantt.config.work_time = true

      // gantt.addCalendar({
      //   id: 'custom1',
@@ -268,8 +268,17 @@
            return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
          }
        },
        { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, label: '任务名称', width: 200, resize: true, editor: textEditor },
        // { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, align: 'center', label: '任务名称', width: 240, resize: true, editor: textEditor },
        { name: 'saleOrder', align: 'center', label: '销售订单', width: 100, resize: true },
        { name: 'partName', align: 'center', label: '产品名称', width: 80, resize: true },
        { name: 'partCode', align: 'center', label: '产品编码', width: 80, resize: true },
        {
          name: 'progress', align: 'center', label: '进度', width: 120, resize: true, template: function(task) {
            return `<input type="range"  onmousedown="event.preventDefault()" onmouseup="event.preventDefault()" id="taskRange" value="${task.progress * 100}"/> ${task.progress * 100}%`
            // return `<el-progress :percentage='${task.progress * 100}'></el-progress> ${task.progress * 100}%`
          }
        },
        { name: 'start_date', align: 'center', label: '开始日期', width: 80, resize: true, editor: startDateEditor },
        {
          name: 'duration',
@@ -283,44 +292,19 @@
            // return (task.duration || 0) + 1 // 在当前duration的基础上加1
            return task.duration
          }
        },
        {
          name: 'owner', align: 'center', width: 75, label: '负责人', template: function(task) {
            // if (task.type == gantt.config.types.project) {
            //   return ''
            // }
            //
            // const store = gantt.getDatastore('resource')
            // const assignments = task[gantt.config.resource_property]
            //
            // if (!assignments || !assignments.length) {
            //   return 'Unassigned'
            // }
            //
            // if (assignments.length === 1) {
            //   return store.getItem(assignments[0].resource_id).text
            // }
            //
            // let result = ''
            // assignments.forEach(function(assignment) {
            //   const owner = store.getItem(assignment.resource_id)
            //   if (!owner) {
            //     return
            //   }
            //   result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
            // })
            //
            // return result
            return '张三'
          },
          resize: true
        },
        {
          name: 'priority', width: 60, label: '优先级', align: 'center', resize: true, template: function(task) {
            return byId(gantt.serverList('task_priority'), task.priority)
          }
        },
        { name: 'add', width: 44 }
        }
        // {
        //   name: 'owner', align: 'center', width: 75, label: '负责人', template: function(task) {
        //     return '张三'
        //   },
        //   resize: true
        // },
        // {
        //   name: 'priority', width: 60, label: '优先级', align: 'center', resize: true, template: function(task) {
        //     return byId(gantt.serverList('task_priority'), task.priority)
        //   }
        // },
        // { name: 'add', width: 44 }
      ]
      /* ↑↑↑ Grid Columns configuration ↑↑↑ */

@@ -449,7 +433,15 @@
      gantt.templates.tooltip_text = function(start, end, task) {
        // console.log(JSON.parse(JSON.stringify(task)))
        // return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end)
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
        // return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDatetime2(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
      }

      gantt.templates.task_text = function(start, end, task) {
        // return '<span style="color: white; font-weight: bold; text-shadow: 1px 1px 1px #000;">' +
        //   task.description + ' - ' +
        //   '</span>'
        return task.description
      }

      gantt.init('gantt_here')
@@ -491,46 +483,137 @@
      this.allTasks = [
        {
          'id': 1,
          'text': '项目1',
          'text': '工单:MO-2025-05-001',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          // 'duration': 5,
          'progress': 0.4,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'parent': 0,
          'checked': false,
          render: 'split'
          'checked': false
          // render: 'split'
        },
        {
          'id': 2,
          'text': '任务2',
          'type': 'task',
          'text': '工序:切割',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          'duration': 2,
          'progress': 0.6,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': '1',
          checked: false
        },
        {
          'id': 3,
          'text': '任务3',
          'text': '设备:金工车间1号设备',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'task',
          'start_date': '2025-04-07 00:00',
          'parent': '1',
          'duration': 3,
          'progress': 0.6,
          'parent': '2',
          'duration': 4,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 4,
          'text': '任务4',
          'text': '设备:金工车间2号设备',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'task',
          'start_date': '2025-04-15 00:00',
          'parent': '1',
          'parent': '2',
          'duration': 3,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        }, {
          'id': 5,
          'text': '工单:MO-2025-05-002',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          // 'duration': 5,
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'parent': 0,
          'checked': false
          // render: 'split'
        },
        {
          'id': 6,
          'text': '工序:切割',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          'duration': 5,
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': '5',
          checked: false
        },
        {
          'id': 7,
          'text': '设备:金工车间3号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          'type': 'task',
          'start_date': '2025-04-07 00:00',
          'parent': '6',
          'duration': 3,
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 8,
          'text': '设备:金工车间4号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:600 进度:60%',
          'type': 'task',
          'start_date': '2025-04-12 00:00',
          'parent': '6',
          'duration': 4,
          'progress': 0.6,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 9,
          'text': '设备:金工车间5号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:400 进度:40%',
          'type': 'task',
          'start_date': '2025-04-10 00:00',
          'parent': '6',
          'duration': 3,
          'progress': 0.4,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        }
@@ -678,14 +761,14 @@
  margin: unset;
}

.gantt_task_cell {
  background: rgba(5, 185, 100, .1);
}
/*.gantt_task_cell {*/
/*  background: rgba(5, 185, 100, .1);*/
/*}*/

/*非工作日*/
.weekend {
  background: rgba(255, 255, 255, 0.5);
}
/*!*非工作日*!*/
/*.weekend {*/
/*  background: rgba(255, 255, 255, 0.5);*/
/*}*/

/* 为任务条内部的进度条添加圆角，保持视觉统一 */
.gantt_task_progress {
@@ -713,4 +796,32 @@
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

#taskRange {
  width: 80px;
  height: 6px;
  border-radius: 2px;

}

/* 隐藏滑块 */
#taskRange::-webkit-slider-thumb {
  opacity: 0;
   -webkit-appearance: none !important;
  width: 1px!important;
  height: 1px!important;
}

#taskRange::-moz-range-thumb {
  opacity: 0;
  width:  1px!important;
  height:  1px!important;
}

#taskRange::-ms-thumb {
  opacity: 0;
  width: 1px!important;
  height: 1px!important;
}

</style>