拖拽任务功能

src/components/GanttChart/gantt-chart.vue

@@ -47,26 +47,39 @@ export default {
       for (let key in template) {
         gantt.templates[key] = template[key]
       }
+      this.addEvents()
+      gantt.init(this.$refs.gantt)
+      this.addBaseline()
+      gantt.parse(this.tasks)
+    },
+    addEvents() { // 添加触发事件
+      // 可以添加法定节假日
+      this.setHolidays()
+      // 显示悬浮窗
       gantt.showLightbox = (id) => {
         const task = gantt.getTask(id)
         this.curTask = task
         this.showModal = true
       }
+      // 调整进度或者拖拽柱子触发
       gantt.attachEvent('onAfterTaskDrag', (id, mode, e) => {
         const task = gantt.getTask(id)
         if (mode == 'progress') {
           this.$emit('progressChange', task)
         }
       })
-      this.setHolidays()
-      gantt.attachEvent('onTaskLoading', function (task) {
+      // 拖拽任务触发
+      gantt.attachEvent('onAfterTaskMove', (id, parentId, tindex) =>{
+        const task = gantt.getTask(id)
+        const parentTask = gantt.getTask(parentId)
+        this.$emit('taskChange', {task, parentTask})
+      })
+      // 任务加载后触发
+      gantt.attachEvent('onTaskLoading', task => {
         task.planned_start = gantt.date.parseDate(task.planned_start, 'xml_date')
         task.planned_end = gantt.date.parseDate(task.planned_end, 'xml_date')
         return true
       })
-      gantt.init(this.$refs.gantt)
-      this.addBaseline()
-      gantt.parse(this.tasks)
     },
     reset(config = {}){
       if (gantt.$container) {
@@ -143,11 +156,7 @@ export default {
       gantt.config.grid_width = left
       gantt.render()
     },
-    setHolidays(){
-      const holidays = [
-        new Date(2019,9,1),
-        new Date(2019,4,1),
-      ]
+    setHolidays(holidays = [new Date(2019,9,1)]){
       holidays.forEach(date => {
         gantt.setWorkTime({date: date, hours: false})
       })

src/components/GanttChart/gantt-config.js

@@ -13,13 +13,15 @@ export const config = {
   row_height: 24,
   date_scale: '%M%d日', // 列日期
   drag_links: false,
+  order_branch: true, // 拖拽任务
+  order_branch_free: true, // 拖拽任务
 }
 
 export const template = {
   task_text: (start, end, task) => { // 柱上加进度百分比
     return Math.round(task.progress * 100) + '%'
   },
-  tooltip_text: (start, end, task) => { // 浮框
+  tooltip_text: (start, end, task) => { // 悬浮窗内容
     return `
       <b>任务名：${task.text}</b><br/>
       <b>姓名：${task.name}</b><br/>

src/components/main.vue

@@ -15,7 +15,7 @@
     </a-dropdown>
   </a-tabs>
   <div class="container">
-    <GanttChart @progressChange="handleProgressChange" ref="gantt" :tasks="tasks"/>
+    <GanttChart @progressChange="handleProgressChange" @taskChange="handleTaskChange" ref="gantt" :tasks="tasks"/>
   </div>
 </div>
 </template>
@@ -144,6 +144,9 @@ export default {
         this.$message.success('调整进度成功')
       })
     },
+    handleTaskChange({task, parentTask}) {
+      console.log(task, parentTask)
+    },
     handleClick({key}) {
       switch (key) {
       case 'logout':

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import Main from '@/components/main'
-import Login from '@/components/login'
+import Cookie from '@/util/local-cookie'
+import routes from './routes'
 
 Vue.use(Router)
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'main',
-      component: Main
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: Login
-    },
-  ]
+const config = {
+  routes,
+}
+const router = new Router(config)
+
+router.beforeEach((to, from, next) => {
+  const token = Cookie.get('token')
+  if (!token && to.name !== 'login') {
+    next('/login')
+  } else {
+    next()
+  }
 })
+
+export default router

src/router/routes.js

+const Main = () => import('@/components/main')
+const Login = () => import('@/components/login')
+
+export default [
+  {
+    path: '/',
+    name: 'main',
+    component: Main
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
+]