frappe gantt开源js甘特图插件在Vue3.0中的应用

最近发现了一款简易的开源甘特图控件，可以实现拖拽更改时间、项目连线等功能，更多功能还在摸索中，官网地址：Open Source Javascript Gantt (frappe.io)，github地址：https://github.com/frappe/gantt，官方案例是在html中运用的，于是想尝试一下能不能在vue中运行，下面将介绍在vue3中可用的一种方式

1、首先将frappe gantt的js以及css文件复制到项目中，可以直接去gantt/dist at master · frappe/gantt · GitHub中下载项目，将项目中的dist文件复制到项目中

2、更改frappe-gantt.js文件，在末尾添加导出，这样就可以在vue界面直接引入了

export default Gantt

　

 

 

 3、界面引入js文件以及css样式文件  注意：这里的文件路径请根据自己项目的实际情况进行更改

import Gantt from '@/assets/js/frappe-gantt'

　　

@import'~@/assets/js/frappe-gantt.css';

4、界面整体代码如下

<!--甘特图-->
<template>
  <div class="gantt-container">
    <el-row>
      <el-col :span="6">
        <div class="gantt-tasks">
          <div class="tasks-header">
            <span>生产计划列表</span> |
          </div>
          <div
            v-for="(item, index) in tasks"
            :id="'task-item-' + item.id"
            :key="index"
            :class="{'fill-bg': (index % 2 !== 0), 'task-item': true}"
          >
            {{ item.name }}
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <!--甘特图-->
        <div class="gantt-target" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import Gantt from '@/assets/js/frappe-gantt'
export default {
  setup() {
    const vueConfig = reactive({
      tasks: [{
        start: '2022-06-01',
        end: '2022-06-08',
        name: '测试任务1',
        id: '1',
        progress: 0
      },
      {
        start: '2022-06-03',
        end: '2022-06-06',
        name: '测试任务2',
        id: '2',
        progress: 0,
        dependencies: '1'
      },
      {
        start: '2022-06-04',
        end: '2022-06-08',
        name: '测试任务3',
        id: '3',
        progress: 0,
        dependencies: '1'
      },
      {
        start: '2022-06-08',
        end: '2022-06-09',
        name: '测试任务4',
        id: '4',
        progress: 0,
        dependencies: '2'
      },
      {
        start: '2022-06-08',
        end: '2022-06-10',
        name: '测试任务5',
        id: '5',
        progress: 0,
        dependencies: '2'
      }],
      gantt: null
    })
    onMounted(() => {
      const gantt = new Gantt('.gantt-target', vueConfig.tasks, {
        on_click: function(task) {
          console.log('我点击了', task)
        },
        on_date_change: function(task, start, end) {
          console.log(task, start, end)
        },
        on_progress_change: function(task, progress) {
          console.log(task, progress)
        },
        on_view_change: function(mode) {
          console.log(mode)
        },
        view_mode: 'Day',
        language: 'zh'
      })
      console.log('gantt111', gantt)
    })
    return {
      ...toRefs(vueConfig)
    }
  }
}
</script>

<style lang="scss" scoped>
@import'~@/assets/js/frappe-gantt.css';
  .gantt-container {
        background-color: transparent;
    }
    .gantt-tasks {
        background-color: #fff;
    }
    .task-item {
        height: 38px;
        font-size: 14px;
        padding-left: 15px;
        border-bottom: 2px solid #F5F7F8;
        line-height: 38px;
    }
    .tasks-header {
        height: 60px;
        padding-left: 15px;
        line-height: 60px;
        border-bottom: 2px solid #E9E9E9;
    }
    .details-container {
        width: 200px;
    }
    .fill-bg {
        background-color: #f5f5f5;
    }
    .task-date .el-date-editor {
        width: 100%;
        margin-top: 5px;
        border-bottom: none;
    }
    .task-name {
        color: #000;
        font-weight: 300;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 90%;
        text-align: left;
    }
    .task-name:hover {
        color: #8FBC8F;
    }
    .task-progress {
        margin-top: 5px;
    }
</style>

5、效果图如下

 

 此文章仅供个人学习积累使用，如果有描述不恰当的，欢迎留言