增加搜索功能

src/components/GanttChart/gantt-chart.vue

@@ -34,6 +34,7 @@ export default {
       left: config.grid_width,
       curTask: {},
       columns: config.columns,
+      event: null,
     }
   },
   mounted() {
@@ -81,6 +82,23 @@ export default {
         return true
       })
     },
+    search(val = null) { // 搜索
+      if (this.event) {
+        // 移除原先的事件，否则搜索事件会一直叠加
+        gantt.detachEvent(this.event)
+      }
+      gantt.eachTask(function(task){
+        task.$open = true
+      })
+      this.event = gantt.attachEvent('onBeforeTaskDisplay', (id, task) => {
+        if (!val) return true
+        const taskText = task.text.toLowerCase()
+        const taskPerson = task.name.toLowerCase()
+        const searchText = val.toLowerCase()
+        return (taskText.indexOf(searchText) > -1 || taskPerson.indexOf(searchText) > -1)
+      })
+      gantt.render()
+    },
     reset(config = {}){
       if (gantt.$container) {
         gantt.clearAll()

src/components/GanttChart/gantt-config.js

@@ -15,6 +15,7 @@ export const config = {
   drag_links: false,
   order_branch: true, // 拖拽任务
   order_branch_free: true, // 拖拽任务
+  open_tree_initially: true, // 初始默认展开所有树
 }
 
 export const template = {

src/components/main.vue

@@ -4,15 +4,18 @@
   <a-tabs class="chart-tab" defaultActiveKey="1" @change="getData">
     <a-tab-pane tab="基于任务" key="1"/>
     <a-tab-pane tab="基于人员" key="2"/>
-    <a-dropdown class="user" slot="tabBarExtraContent">
-      <span>
-        <a-icon type="user" /> <span class="name">{{info.username || '用户名'}}</span>
-        <a-icon type="down" />
-      </span>
-      <a-menu slot="overlay" @click="handleClick">
-        <a-menu-item key="logout">退出登录</a-menu-item>
-      </a-menu>
-    </a-dropdown>
+    <div slot="tabBarExtraContent">
+      <a-input-search class="search-input" @search="handleSearch" :allowClear="true" size="small" placeholder="搜索任务名、人名"/>
+      <a-dropdown class="user">
+        <span>
+          <a-icon type="user" /> <span class="name">{{info.username || '用户名'}}</span>
+          <a-icon type="down" />
+        </span>
+        <a-menu slot="overlay" @click="handleClick">
+          <a-menu-item key="logout">退出登录</a-menu-item>
+        </a-menu>
+      </a-dropdown>
+    </div>
   </a-tabs>
   <div class="container">
     <GanttChart @progressChange="handleProgressChange" @taskChange="handleTaskChange" ref="gantt" :tasks="tasks"/>
@@ -113,7 +116,7 @@ export default {
         const data = this.$com.confirm(res[0], 'data.content', [])
         const baseData = this.$com.confirm(res[1], 'data.content.content1', [])
         this.tasks.data = data.map(item => {
-          const plan = baseData.find(base => base.id === item.id)
+          const plan = baseData.find(base => base.tid === item.tid)
           const result = {
             id: item.tid,
             dataId: item.id,
@@ -147,6 +150,9 @@ export default {
     handleTaskChange({task, parentTask}) {
       console.log(task, parentTask)
     },
+    handleSearch(val) {
+      this.$refs.gantt.search(val)
+    },
     handleClick({key}) {
       switch (key) {
       case 'logout':
@@ -186,4 +192,12 @@ export default {
 .user {
   cursor: pointer;
 }
+.search-input {
+  width: 150px;
+  margin-right: 50px;
+  transition: all 0.5s;
+}
+.search-input:hover {
+  width: 200px;
+}
 </style>