├── public
    ├── demo.png
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── css
    │   │   └── clear.css
    ├── pages
    │   ├── wl-gantt
    │   │   ├── index.js
    │   │   ├── components
    │   │   │   └── wl-contextmenu.vue
    │   │   ├── css
    │   │   │   ├── index.min.css
    │   │   │   ├── index.css
    │   │   │   └── index.scss
    │   │   └── index.vue
    │   └── index.js
    ├── main.js
    ├── plugins
    │   └── element.js
    ├── App.vue
    └── components
    │   └── gantt-bate.vue
├── lib
    ├── demo.html
    └── wl-gantt.css
├── babel.config.js
├── .gitignore
├── package.json
├── README.md
└── LICENSE


/public/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hql7/wl-gantt/HEAD/public/demo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hql7/wl-gantt/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hql7/wl-gantt/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/pages/wl-gantt/index.js:
--------------------------------------------------------------------------------
1 | import WlGantt from "./index.vue";
2 | 
3 | WlGantt.install = function(Vue) {
4 |   Vue.component(WlGantt.name, WlGantt);
5 | };
6 | 
7 | export default WlGantt;
8 | 


--------------------------------------------------------------------------------
/lib/demo.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <title>wl-gantt demo</title>
 3 | <script src="./wl-gantt.umd.js"></script>
 4 | 
 5 | <link rel="stylesheet" href="./wl-gantt.css">
 6 | 
 7 | 
 8 | <script>
 9 | console.log(wl-gantt)
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import './plugins/element.js'
 4 | import "@/assets/css/clear.css";
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   render: h => h(App),
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "presets": [
 3 |     "@vue/app"
 4 |   ],
 5 |   "plugins": [
 6 |     [
 7 |       "component",
 8 |       {
 9 |         "libraryName": "element-ui",
10 |         "styleLibraryName": "theme-chalk"
11 |       }
12 |     ]
13 |   ]
14 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | # /lib
 5 | src
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import WlGantt from "./wl-gantt/index.js";
 2 | 
 3 | const components = [WlGantt];
 4 | 
 5 | const install = function (Vue) {
 6 |   components.forEach(component => {
 7 |     Vue.component(component.name, component);
 8 |   });
 9 | };
10 | 
11 | if (typeof window !== "undefined" && window.Vue) {
12 |   install(window.Vue);
13 | }
14 | 
15 | export default {
16 |   install,
17 |   WlGantt,
18 | };
19 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { Table, TableColumn, DatePicker, Message, Popover, Select, Option, Form, FormItem, Input, Dialog, Button} from 'element-ui'
 3 | 
 4 | Vue.use(Table)
 5 | Vue.use(TableColumn)
 6 | Vue.use(Form)
 7 | Vue.use(FormItem)
 8 | Vue.use(DatePicker)
 9 | Vue.use(Popover)
10 | Vue.use(Option)
11 | Vue.use(Select)
12 | Vue.use(Input)
13 | Vue.use(Dialog)
14 | Vue.use(Button)
15 | Vue.prototype.$message = Message;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>wl-gantt</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but wl-gantt doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/assets/css/clear.css:
--------------------------------------------------------------------------------
1 | body{line-height:1.666;color:#666;font-size:14px}body,input{font-family:"verdana"}body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,dl,dt,dd,table,th,td{margin:0;padding:0}table,th,td,img{border:0}em,i,th{font-style:normal;text-decoration:none}h1,h2,h3,h4,h5,h6,th{font-size:100%;font-weight:normal}input,select,button,textarea,table{margin:0;font-family:inherit;font-size:100%}input,button{outline:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}th,caption{text-align:left}a{color:#666;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}select{background-color:#fff}iframe{width:100%;height:100%;border:none}
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wl-gantt",
 3 |   "version": "1.0.6",
 4 |   "private": false,
 5 |   "author": "weilan<https://github.com/hql7>",
 6 |   "license": "GNU",
 7 |   "main": "lib/wl-gantt.umd.min.js",
 8 |   "bugs": {
 9 |     "url": "https://github.com/hql7/wl-gantt/issues"
10 |   },
11 |   "homepage": "https://github.com/hql7/wl-gantt#readme",
12 |   "keyword": "gantt project wl-gantt 甘特图 项目管理 任务管理 vue element-ui 饿了么ui甘特图",
13 |   "description": "一个基于vue和element-ui的甘特图组件，gantt、项目管理",
14 |   "scripts": {
15 |     "serve": "vue-cli-service serve",
16 |     "build": "vue-cli-service build",
17 |     "lib": "vue-cli-service build --target lib --name wl-gantt --dest lib ./src/pages/index.js",
18 |     "lint": "vue-cli-service lint"
19 |   },
20 |   "dependencies": {
21 |     "core-js": "^2.6.5",
22 |     "dayjs": "^1.8.16",
23 |     "element-ui": "^2.13.2",
24 |     "uuid": "^3.3.3",
25 |     "vue": "^2.6.10",
26 |     "vue-virtual-scroller": "^1.0.0-rc.2",
27 |     "wl-core": "^1.1.8"
28 |   },
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "^3.11.0",
31 |     "@vue/cli-plugin-eslint": "^3.11.0",
32 |     "@vue/cli-service": "^3.11.0",
33 |     "babel-eslint": "^10.0.1",
34 |     "babel-plugin-component": "^1.1.1",
35 |     "eslint": "^5.16.0",
36 |     "eslint-plugin-vue": "^5.0.0",
37 |     "node-sass": "^4.13.0",
38 |     "sass-loader": "^8.0.0",
39 |     "vue-cli-plugin-element": "^1.0.1",
40 |     "vue-template-compiler": "^2.6.10"
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended"
50 |     ],
51 |     "rules": {},
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     }
55 |   },
56 |   "postcss": {
57 |     "plugins": {
58 |       "autoprefixer": {}
59 |     }
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/pages/wl-gantt/components/wl-contextmenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ft-context-menu" v-if="flag" :style="style">
  3 |     <ul class="menu-liet" v-if="useDefault">
  4 |       <li
  5 |         class="menu-item"
  6 |         v-for="(item, index) of menuList"
  7 |         :key="index"
  8 |         @click="handleMenuItem(item)"
  9 |       >
 10 |         <div class="memu-item-icon" :class="item.icon"></div>
 11 |         <div class="memu-item-title">{{item.label}}</div>
 12 |         <div class="memu-item-value">{{item.value}}</div>
 13 |       </li>
 14 |       <li class="menu-item" v-if="menuList.length === 0" @click="flag = false">
 15 |         <span class="memu-item-title">暂无菜单</span>
 16 |       </li>
 17 |     </ul>
 18 |     <slot />
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | export default {
 24 |   name: "ft-contextmenu",
 25 |   props: {
 26 |     visible: {
 27 |       type: Boolean,
 28 |       default: false
 29 |     }, // 是否打开上下文菜单
 30 |     x: {
 31 |       type: Number,
 32 |       default: 0
 33 |     }, // 菜单打开坐标x轴
 34 |     y: {
 35 |       type: Number,
 36 |       default: 0
 37 |     }, // 菜单打开坐标y轴
 38 |     useDefault: {
 39 |       type: Boolean,
 40 |       default: true
 41 |     }, // 是否使用内置菜单样式
 42 |     menuList: {
 43 |       type: Array,
 44 |       default: () => []
 45 |     } // 使用内置菜单样式是，菜单列表
 46 |   },
 47 |   computed: {
 48 |     flag: {
 49 |       get() {
 50 |         if (this.visible) {
 51 |           // 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
 52 |           window.addEventListener("mousedown", this.watchContextmenu);
 53 |         }
 54 |         return this.visible;
 55 |       },
 56 |       set(newVal) {
 57 |         this.$emit("update:visible", newVal);
 58 |       }
 59 |     },
 60 |     style() {
 61 |       return {
 62 |         left: this.x + "px",
 63 |         top: this.y + "px",
 64 |         display: this.visible ? "block" : "none "
 65 |       };
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     // 菜单点击事件
 70 |     handleMenuItem(item) {
 71 |       this.$emit("rowClick", item);
 72 |     },
 73 |     watchContextmenu(event) {
 74 |       if (!this.$el.contains(event.target) || event.button !== 0)
 75 |         this.flag = false;
 76 |       window.removeEventListener("mousedown", this.watchContextmenu);
 77 |       return false;
 78 |     }
 79 |   },
 80 |   mounted() {
 81 |     // 将菜单放置到body下
 82 |     document.querySelector("body").appendChild(this.$el);
 83 |   }
 84 | };
 85 | </script>
 86 | 
 87 | <style lang="scss">
 88 | .ft-context-menu {
 89 |   position: absolute;
 90 |   padding: 5px 0;
 91 |   z-index: 2018;
 92 |   background: #fff;
 93 |   border: 1px solid #cfd7e5;
 94 |   border-radius: 4px;
 95 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 96 | 
 97 |   .menu-liet {
 98 |     min-width: 260px;
 99 |   }
100 |   .menu-item {
101 |     display: flex;
102 |     padding: 8px 20px 8px 15px;
103 |     margin: 0;
104 |     font-size: 14px;
105 |     color: #606266;
106 |     cursor: pointer;
107 |     &:hover {
108 |       background: #ecf5ff;
109 |       color: #66b1ff;
110 |     }
111 |     .memu-item-icon {
112 |       font-size: 16px;
113 |       font-weight: 600;
114 |     }
115 |     .memu-item-title {
116 |       width: 80px;
117 |       margin-left: 10px;
118 |     }
119 |     .memu-item-value {
120 |       flex: 1;
121 |     }
122 |   }
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/pages/wl-gantt/css/index.min.css:
--------------------------------------------------------------------------------
1 | .wl-gantt .wl-gantt-header>th{text-align:center}.wl-gantt .h-full{height:100%}.wl-gantt .wl-gantt-item{position:relative;transition:all 0.3s}.wl-gantt .wl-gantt-item>.cell{padding:0}.wl-gantt .u-full.el-input{width:100%}.wl-gantt .wl-item-on{position:absolute;top:50%;left:0;right:-1px;margin-top:-8px;height:16px;background:#409eff;transition:all 0.4s}.wl-gantt .wl-item-start{left:50%}.wl-gantt .wl-item-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-item-end{right:50%}.wl-gantt .wl-item-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .wl-item-full{left:0;right:0}.wl-gantt .wl-item-full:before{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-item-full:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .wl-real-on{position:absolute;top:70%;left:0;right:-1px;margin-top:-8px;height:16px;background:#faa792;transition:all 0.4s}.wl-gantt .wl-real-start{left:50%}.wl-gantt .wl-real-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#faa792 transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-real-end{right:50%}.wl-gantt .wl-real-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #faa792;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .wl-real-full{left:0;right:0}.wl-gantt .wl-real-full:before{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#faa792 transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-real-full:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #faa792;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .name-col{position:relative}.wl-gantt .name-col:hover .name-col-edit{display:inline-block}.wl-gantt .name-col .name-col-edit{display:none;position:absolute;right:0}.wl-gantt .name-col .name-col-icon{padding:6px 3px;cursor:pointer;font-size:16px}.wl-gantt .name-col .task-remove{color:#f56c6c}.wl-gantt .name-col .task-add{color:#409eff}.year-and-month .wl-item-start{left:5%}.year-and-month .wl-item-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.year-and-month .wl-item-end{right:5%}.year-and-month .wl-item-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.year-and-month .wl-item-full{left:5%;right:5%}.year-and-month .wl-item-full:before{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.year-and-month .wl-item-full:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.wl-info-card{position:fixed;top:0;left:0;z-index:99;padding:10px;width:360px;min-height:120px;transition:all 0.4s ease-out;transform:translate(-100%, -120%);border-radius:4px;box-shadow:inset 0px 0px 11px 0px #e6e6e6;background:#fff}
2 | 


--------------------------------------------------------------------------------
/lib/wl-gantt.css:
--------------------------------------------------------------------------------
1 | .ft-context-menu{position:absolute;padding:5px 0;z-index:2018;background:#fff;border:1px solid #cfd7e5;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.ft-context-menu .menu-liet{min-width:260px}.ft-context-menu .menu-item{display:-webkit-box;display:-ms-flexbox;display:flex;padding:8px 20px 8px 15px;margin:0;font-size:14px;color:#606266;cursor:pointer}.ft-context-menu .menu-item:hover{background:#ecf5ff;color:#66b1ff}.ft-context-menu .menu-item .memu-item-icon{font-size:16px;font-weight:600}.ft-context-menu .menu-item .memu-item-title{width:80px;margin-left:10px}.ft-context-menu .menu-item .memu-item-value{-webkit-box-flex:1;-ms-flex:1;flex:1}.wl-gantt .wl-gantt-header>th{text-align:center}.wl-gantt .h-full{height:100%}.wl-gantt .wl-gantt-item{position:relative;-webkit-transition:all .3s;transition:all .3s}.wl-gantt .wl-gantt-item>.cell{padding:0}.wl-gantt .u-full.el-input{width:100%}.wl-gantt .wl-item-on{position:absolute;top:50%;left:0;right:-1px;margin-top:-8px;height:16px;background:#409eff;-webkit-transition:all .4s;transition:all .4s}.wl-gantt .wl-item-start{left:50%}.wl-gantt .wl-item-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-item-end{right:50%}.wl-gantt .wl-item-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .wl-item-full{left:0;right:0}.wl-gantt .wl-item-full:before{left:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0}.wl-gantt .wl-item-full:after,.wl-gantt .wl-item-full:before{position:absolute;top:16px;z-index:1;content:"";width:0;height:0;border-style:solid}.wl-gantt .wl-item-full:after{right:0;border-color:transparent #409eff;border-width:0 6px 6px 0}.wl-gantt .wl-real-on{position:absolute;top:70%;left:0;right:-1px;margin-top:-8px;height:16px;background:#faa792;-webkit-transition:all .4s;transition:all .4s}.wl-gantt .wl-real-start{left:50%}.wl-gantt .wl-real-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#faa792 transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.wl-gantt .wl-real-end{right:50%}.wl-gantt .wl-real-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #faa792;border-width:0 6px 6px 0;border-style:solid}.wl-gantt .wl-real-full{left:0;right:0}.wl-gantt .wl-real-full:before{left:0;border-color:#faa792 transparent transparent;border-width:6px 6px 6px 0}.wl-gantt .wl-real-full:after,.wl-gantt .wl-real-full:before{position:absolute;top:16px;z-index:1;content:"";width:0;height:0;border-style:solid}.wl-gantt .wl-real-full:after{right:0;border-color:transparent #faa792;border-width:0 6px 6px 0}.wl-gantt .name-col{position:relative}.wl-gantt .name-col:hover .name-col-edit{display:inline-block}.wl-gantt .name-col .name-col-edit{display:none;position:absolute;right:0}.wl-gantt .name-col .name-col-icon{padding:6px 3px;cursor:pointer;font-size:16px}.wl-gantt .name-col .task-remove{color:#f56c6c}.wl-gantt .name-col .task-add{color:#409eff}.year-and-month .wl-item-start{left:5%}.year-and-month .wl-item-start:after{position:absolute;top:16px;left:0;z-index:1;content:"";width:0;height:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0;border-style:solid}.year-and-month .wl-item-end{right:5%}.year-and-month .wl-item-end:after{position:absolute;top:16px;right:0;z-index:1;content:"";width:0;height:0;border-color:transparent #409eff;border-width:0 6px 6px 0;border-style:solid}.year-and-month .wl-item-full{left:5%;right:5%}.year-and-month .wl-item-full:before{left:0;border-color:#409eff transparent transparent;border-width:6px 6px 6px 0}.year-and-month .wl-item-full:after,.year-and-month .wl-item-full:before{position:absolute;top:16px;z-index:1;content:"";width:0;height:0;border-style:solid}.year-and-month .wl-item-full:after{right:0;border-color:transparent #409eff;border-width:0 6px 6px 0}.wl-info-card{position:fixed;top:0;left:0;z-index:99;padding:10px;width:360px;min-height:120px;-webkit-transition:all .4s ease-out;transition:all .4s ease-out;-webkit-transform:translate(-100%,-120%);transform:translate(-100%,-120%);border-radius:4px;-webkit-box-shadow:inset 0 0 11px 0 #e6e6e6;box-shadow:inset 0 0 11px 0 #e6e6e6;background:#fff}


--------------------------------------------------------------------------------
/src/pages/wl-gantt/css/index.css:
--------------------------------------------------------------------------------
  1 | .wl-gantt .wl-gantt-header > th {
  2 |   text-align: center;
  3 | }
  4 | 
  5 | .wl-gantt .h-full {
  6 |   height: 100%;
  7 | }
  8 | 
  9 | .wl-gantt .wl-gantt-item {
 10 |   position: relative;
 11 |   transition: all 0.3s;
 12 | }
 13 | 
 14 | .wl-gantt .wl-gantt-item > .cell {
 15 |   padding: 0;
 16 | }
 17 | 
 18 | .wl-gantt .u-full.el-input {
 19 |   width: 100%;
 20 | }
 21 | 
 22 | .wl-gantt .wl-item-on {
 23 |   position: absolute;
 24 |   top: 50%;
 25 |   left: 0;
 26 |   right: -1px;
 27 |   margin-top: -8px;
 28 |   height: 16px;
 29 |   background: #409eff;
 30 |   transition: all 0.4s;
 31 | }
 32 | 
 33 | .wl-gantt .wl-item-start {
 34 |   left: 50%;
 35 | }
 36 | 
 37 | .wl-gantt .wl-item-start:after {
 38 |   position: absolute;
 39 |   top: 16px;
 40 |   left: 0;
 41 |   z-index: 1;
 42 |   content: "";
 43 |   width: 0;
 44 |   height: 0;
 45 |   border-color: #409eff transparent transparent;
 46 |   border-width: 6px 6px 6px 0;
 47 |   border-style: solid;
 48 | }
 49 | 
 50 | .wl-gantt .wl-item-end {
 51 |   right: 50%;
 52 | }
 53 | 
 54 | .wl-gantt .wl-item-end:after {
 55 |   position: absolute;
 56 |   top: 16px;
 57 |   right: 0;
 58 |   z-index: 1;
 59 |   content: "";
 60 |   width: 0;
 61 |   height: 0;
 62 |   border-color: transparent #409eff;
 63 |   border-width: 0 6px 6px 0;
 64 |   border-style: solid;
 65 | }
 66 | 
 67 | .wl-gantt .wl-item-full {
 68 |   left: 0;
 69 |   right: 0;
 70 | }
 71 | 
 72 | .wl-gantt .wl-item-full:before {
 73 |   position: absolute;
 74 |   top: 16px;
 75 |   left: 0;
 76 |   z-index: 1;
 77 |   content: "";
 78 |   width: 0;
 79 |   height: 0;
 80 |   border-color: #409eff transparent transparent;
 81 |   border-width: 6px 6px 6px 0;
 82 |   border-style: solid;
 83 | }
 84 | 
 85 | .wl-gantt .wl-item-full:after {
 86 |   position: absolute;
 87 |   top: 16px;
 88 |   right: 0;
 89 |   z-index: 1;
 90 |   content: "";
 91 |   width: 0;
 92 |   height: 0;
 93 |   border-color: transparent #409eff;
 94 |   border-width: 0 6px 6px 0;
 95 |   border-style: solid;
 96 | }
 97 | 
 98 | .wl-gantt .wl-real-on {
 99 |   position: absolute;
100 |   top: 70%;
101 |   left: 0;
102 |   right: -1px;
103 |   margin-top: -8px;
104 |   height: 16px;
105 |   background: #faa792;
106 |   transition: all 0.4s;
107 | }
108 | 
109 | .wl-gantt .wl-real-start {
110 |   left: 50%;
111 | }
112 | 
113 | .wl-gantt .wl-real-start:after {
114 |   position: absolute;
115 |   top: 16px;
116 |   left: 0;
117 |   z-index: 1;
118 |   content: "";
119 |   width: 0;
120 |   height: 0;
121 |   border-color: #faa792 transparent transparent;
122 |   border-width: 6px 6px 6px 0;
123 |   border-style: solid;
124 | }
125 | 
126 | .wl-gantt .wl-real-end {
127 |   right: 50%;
128 | }
129 | 
130 | .wl-gantt .wl-real-end:after {
131 |   position: absolute;
132 |   top: 16px;
133 |   right: 0;
134 |   z-index: 1;
135 |   content: "";
136 |   width: 0;
137 |   height: 0;
138 |   border-color: transparent #faa792;
139 |   border-width: 0 6px 6px 0;
140 |   border-style: solid;
141 | }
142 | 
143 | .wl-gantt .wl-real-full {
144 |   left: 0;
145 |   right: 0;
146 | }
147 | 
148 | .wl-gantt .wl-real-full:before {
149 |   position: absolute;
150 |   top: 16px;
151 |   left: 0;
152 |   z-index: 1;
153 |   content: "";
154 |   width: 0;
155 |   height: 0;
156 |   border-color: #faa792 transparent transparent;
157 |   border-width: 6px 6px 6px 0;
158 |   border-style: solid;
159 | }
160 | 
161 | .wl-gantt .wl-real-full:after {
162 |   position: absolute;
163 |   top: 16px;
164 |   right: 0;
165 |   z-index: 1;
166 |   content: "";
167 |   width: 0;
168 |   height: 0;
169 |   border-color: transparent #faa792;
170 |   border-width: 0 6px 6px 0;
171 |   border-style: solid;
172 | }
173 | 
174 | .wl-gantt .name-col {
175 |   position: relative;
176 | }
177 | 
178 | .wl-gantt .name-col:hover .name-col-edit {
179 |   display: inline-block;
180 | }
181 | 
182 | .wl-gantt .name-col .name-col-edit {
183 |   display: none;
184 |   position: absolute;
185 |   right: 0;
186 | }
187 | 
188 | .wl-gantt .name-col .name-col-icon {
189 |   padding: 6px 3px;
190 |   cursor: pointer;
191 |   font-size: 16px;
192 | }
193 | 
194 | .wl-gantt .name-col .task-remove {
195 |   color: #f56c6c;
196 | }
197 | 
198 | .wl-gantt .name-col .task-add {
199 |   color: #409eff;
200 | }
201 | 
202 | .year-and-month .wl-item-start {
203 |   left: 5%;
204 | }
205 | 
206 | .year-and-month .wl-item-start:after {
207 |   position: absolute;
208 |   top: 16px;
209 |   left: 0;
210 |   z-index: 1;
211 |   content: "";
212 |   width: 0;
213 |   height: 0;
214 |   border-color: #409eff transparent transparent;
215 |   border-width: 6px 6px 6px 0;
216 |   border-style: solid;
217 | }
218 | 
219 | .year-and-month .wl-item-end {
220 |   right: 5%;
221 | }
222 | 
223 | .year-and-month .wl-item-end:after {
224 |   position: absolute;
225 |   top: 16px;
226 |   right: 0;
227 |   z-index: 1;
228 |   content: "";
229 |   width: 0;
230 |   height: 0;
231 |   border-color: transparent #409eff;
232 |   border-width: 0 6px 6px 0;
233 |   border-style: solid;
234 | }
235 | 
236 | .year-and-month .wl-item-full {
237 |   left: 5%;
238 |   right: 5%;
239 | }
240 | 
241 | .year-and-month .wl-item-full:before {
242 |   position: absolute;
243 |   top: 16px;
244 |   left: 0;
245 |   z-index: 1;
246 |   content: "";
247 |   width: 0;
248 |   height: 0;
249 |   border-color: #409eff transparent transparent;
250 |   border-width: 6px 6px 6px 0;
251 |   border-style: solid;
252 | }
253 | 
254 | .year-and-month .wl-item-full:after {
255 |   position: absolute;
256 |   top: 16px;
257 |   right: 0;
258 |   z-index: 1;
259 |   content: "";
260 |   width: 0;
261 |   height: 0;
262 |   border-color: transparent #409eff;
263 |   border-width: 0 6px 6px 0;
264 |   border-style: solid;
265 | }
266 | 
267 | .wl-info-card {
268 |   position: fixed;
269 |   top: 0;
270 |   left: 0;
271 |   z-index: 99;
272 |   padding: 10px;
273 |   width: 360px;
274 |   min-height: 120px;
275 |   transition: all 0.4s ease-out;
276 |   transform: translate(-100%, -120%);
277 |   border-radius: 4px;
278 |   box-shadow: inset 0px 0px 11px 0px #e6e6e6;
279 |   background: #fff;
280 | }
281 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <img src="./assets/logo.png" />
  4 |     <div class="wl-gantt-demo">
  5 |       <wlGantt
  6 |         ref="wl-gantt-demo"
  7 |         use-real-time
  8 |         end-date="2019-11-02"
  9 |         start-date="2019-9-06"
 10 |         date-type="monthAndDay"
 11 |         :data="data"
 12 |         :columns="columns"
 13 |         :contextMenuOptions="contextMenuOptions"
 14 |         @selection-change="selectionChange"
 15 |         @expand-change="expandChange"
 16 |         @timeChange="timeChange"
 17 |         @taskRemove="taskRemove"
 18 |         @preChange="preChange"
 19 |         @taskAdd="taskAdd"
 20 |       >
 21 |         <template slot="prv">
 22 |           <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
 23 |           <el-table-column type="index" width="55" label="序号"> </el-table-column>
 24 |         </template>
 25 |         <template #info-card="{ row }">
 26 |           <ul>
 27 |             <li>
 28 |               <label for="name">名称：</label><span id="name">{{ row.name }}</span>
 29 |             </li>
 30 |           </ul>
 31 |         </template>
 32 |       </wlGantt>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import WlGantt from "@/pages/wl-gantt";
 39 | 
 40 | export default {
 41 |   name: "app",
 42 |   data() {
 43 |     return {
 44 |       projectTime: {},
 45 |       data: [
 46 |         {
 47 |           id: "1",
 48 |           pid: "0",
 49 |           name: "旅行",
 50 |           startDate: "2019-09-07",
 51 |           realStartDate: "2019-09-10",
 52 |           endDate: "2019-10-31",
 53 |           realEndDate: "2019-10-19",
 54 |           children: [
 55 |             {
 56 |               id: "1-1",
 57 |               pid: "1",
 58 |               name: "云台之间",
 59 |               startDate: "2019-09-10",
 60 |               endDate: "2019-09-13",
 61 |               children: [
 62 |                 {
 63 |                   id: "1-1-1",
 64 |                   pid: "1-1",
 65 |                   name: "日落云巅",
 66 |                   startDate: "2019-09-10",
 67 |                   endDate: "2019-09-13",
 68 |                 },
 69 |               ],
 70 |             },
 71 |             {
 72 |               id: "1-2",
 73 |               pid: "1",
 74 |               name: "天空之镜",
 75 |               startDate: "2019-09-17",
 76 |               endDate: "2019-09-22",
 77 |             },
 78 |             {
 79 |               id: "1-3",
 80 |               name: "蓬莱之岛",
 81 |               pid: "1",
 82 |               startDate: "2019-09-25",
 83 |               endDate: "2019-09-30",
 84 |             },
 85 |             {
 86 |               id: "1-4",
 87 |               pid: "1",
 88 |               name: "西塘之南",
 89 |               startDate: "2019-10-03",
 90 |               endDate: "2019-10-07",
 91 |             },
 92 |             {
 93 |               pid: "1",
 94 |               id: "1-5",
 95 |               name: "凤凰之缘",
 96 |               startDate: "2019-10-11",
 97 |               endDate: "2019-10-19",
 98 |             },
 99 |           ],
100 |         },
101 |         {
102 |           id: "2",
103 |           name: "租房子",
104 |           startDate: "2019-09-20",
105 |           endDate: "2019-10-31",
106 |         },
107 |       ], // 数据
108 |       selected: [], // 选中数据
109 |       contextMenuOptions: [
110 |         { label: "任务名称", prop: "name" },
111 |         { label: "开始时间", prop: "startDate" },
112 |         { label: "结束时间", prop: "endDate" },
113 |       ],
114 |       columns: [{ type: "name", minWidth: 200, colType: "expand" }], // 可通过此参数配置列。其中内置有名称name、开始日期startDate、结束日期endDate、前置任务preTask，如果cloumns中有type等于这四个且slot为false时，将使用内置代码，当然除了内容使用内置代码，其他字段你还拥有配置权。另外如果不是为了配置内置列参数，slot中的prv和default仍可以用来自定义列
115 |     };
116 |   },
117 |   methods: {
118 |     aa(row) {
119 |       console.log(row, 99);
120 |     },
121 |     /**
122 |      * 时间发生更改
123 |      * row: Object 当前行数据c
124 |      */
125 |     timeChange(row) {
126 |       console.log("时间修改:", row);
127 |     },
128 |     //
129 |     /**
130 |      * 前置任务发生更改
131 |      * row: Object 当前行数据
132 |      * oldval: [String, Array] 前置修改前的旧数据
133 |      * handle: Boolean 是否用户编辑产生的改变
134 |      */
135 |     preChange(row, oldval, handle) {
136 |       console.log("前置修改:", row, oldval, handle);
137 |     },
138 |     // 数表展开行
139 |     expandChange(row, expanded) {
140 |       console.log("展开行:", row, expanded);
141 |     },
142 |     // 多选选择
143 |     selectionChange(/* val */) {
144 |       // console.log("多选：", val);
145 |     },
146 |     // 删除任务
147 |     taskRemove(item) {
148 |       console.log("删除任务：", item);
149 |     },
150 |     // 添加任务
151 |     taskAdd(item) {
152 |       console.log("添加任务：", item);
153 |       // 非懒加载方式直接设置子数据
154 |       /* this.$set(
155 |         item,
156 |         "children",
157 |         item.children.concat([
158 |           {
159 |             pid: item.id,
160 |             id: "###",
161 |             name: "一轮新月",
162 |             startDate: "2019-10-11",
163 |             endDate: "2019-10-19"
164 |           }
165 |         ])
166 |       ); */
167 |       this.$refs["wl-gantt-demo"].loadTreeAdd(item.id, [
168 |         {
169 |           pid: item.id,
170 |           id: "###",
171 |           name: "一轮新月",
172 |           startDate: "2019-10-11",
173 |           endDate: "2019-10-19",
174 |         },
175 |       ]);
176 |     },
177 |     // 懒加载
178 |     lazyLoad(tree, treeNode, resolve) {
179 |       setTimeout(() => {
180 |         resolve([
181 |           {
182 |             id: "1-1-1",
183 |             pid: tree.id,
184 |             name: "日落云巅",
185 |             startDate: "2019-09-10",
186 |             endDate: "2019-09-13",
187 |           },
188 |         ]);
189 |       }, 1000);
190 |     },
191 |   },
192 |   components: {
193 |     WlGantt,
194 |   },
195 | };
196 | </script>
197 | 
198 | <style lang="scss">
199 | #app {
200 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
201 |   -webkit-font-smoothing: antialiased;
202 |   -moz-osx-font-smoothing: grayscale;
203 |   color: #2c3e50;
204 |   padding: 20px 25px 0;
205 | }
206 | 
207 | .wl-gantt-demo {
208 |   margin: 40px auto;
209 |   // width: 800px;
210 | }
211 | </style>
212 | 


--------------------------------------------------------------------------------
/src/pages/wl-gantt/css/index.scss:
--------------------------------------------------------------------------------
  1 | $gantt_item: 16px;
  2 | $gantt_item_half: 8px;
  3 | 
  4 | .wl-gantt {
  5 |   .wl-gantt-header > th {
  6 |     text-align: center;
  7 |   }
  8 | 
  9 |   .h-full {
 10 |     height: 100%;
 11 |   }
 12 | 
 13 |   .wl-gantt-item {
 14 |     position: relative;
 15 |     transition: all 0.3s;
 16 |     > .cell {
 17 |       padding: 0;
 18 |     }
 19 |   }
 20 | 
 21 |   .u-full.el-input {
 22 |     width: 100%;
 23 |   }
 24 | 
 25 |   // 计划时间gantt开始
 26 |   .wl-item-on {
 27 |     position: absolute;
 28 |     top: 50%;
 29 |     left: 0;
 30 |     right: -1px;
 31 |     margin-top: -$gantt_item_half;
 32 |     height: $gantt_item;
 33 |     background: #409eff;
 34 |     transition: all 0.4s;
 35 |   }
 36 | 
 37 |   .wl-item-start {
 38 |     left: 50%;
 39 |     &:after {
 40 |       position: absolute;
 41 |       top: $gantt_item;
 42 |       left: 0;
 43 |       z-index: 1;
 44 |       content: "";
 45 |       width: 0;
 46 |       height: 0;
 47 |       border-color: #409eff transparent transparent;
 48 |       border-width: 6px 6px 6px 0;
 49 |       border-style: solid;
 50 |     }
 51 |   }
 52 | 
 53 |   .wl-item-end {
 54 |     right: 50%;
 55 |     &:after {
 56 |       position: absolute;
 57 |       top: $gantt_item;
 58 |       right: 0;
 59 |       z-index: 1;
 60 |       content: "";
 61 |       width: 0;
 62 |       height: 0;
 63 |       border-color: transparent #409eff;
 64 |       border-width: 0 6px 6px 0;
 65 |       border-style: solid;
 66 |     }
 67 |   }
 68 | 
 69 |   .wl-item-full {
 70 |     left: 0;
 71 |     right: 0;
 72 |     &:before {
 73 |       position: absolute;
 74 |       top: $gantt_item;
 75 |       left: 0;
 76 |       z-index: 1;
 77 |       content: "";
 78 |       width: 0;
 79 |       height: 0;
 80 |       border-color: #409eff transparent transparent;
 81 |       border-width: 6px 6px 6px 0;
 82 |       border-style: solid;
 83 |     }
 84 |     &:after {
 85 |       position: absolute;
 86 |       top: $gantt_item;
 87 |       right: 0;
 88 |       z-index: 1;
 89 |       content: "";
 90 |       width: 0;
 91 |       height: 0;
 92 |       border-color: transparent #409eff;
 93 |       border-width: 0 6px 6px 0;
 94 |       border-style: solid;
 95 |     }
 96 |   }
 97 |   // 计划时间gantt结束
 98 | 
 99 |   // 实际时间gantt开始
100 |   .wl-real-on {
101 |     position: absolute;
102 |     top: 70%;
103 |     left: 0;
104 |     right: -1px;
105 |     margin-top: -$gantt_item_half;
106 |     height: $gantt_item;
107 |     background: #faa792; //rgba(250, 167, 146, .6);
108 |     transition: all 0.4s;
109 |   }
110 |   .wl-real-start {
111 |     left: 50%;
112 |     &:after {
113 |       position: absolute;
114 |       top: $gantt_item;
115 |       left: 0;
116 |       z-index: 1;
117 |       content: "";
118 |       width: 0;
119 |       height: 0;
120 |       border-color: #faa792 transparent transparent;
121 |       border-width: 6px 6px 6px 0;
122 |       border-style: solid;
123 |     }
124 |   }
125 | 
126 |   .wl-real-end {
127 |     right: 50%;
128 |     &:after {
129 |       position: absolute;
130 |       top: $gantt_item;
131 |       right: 0;
132 |       z-index: 1;
133 |       content: "";
134 |       width: 0;
135 |       height: 0;
136 |       border-color: transparent #faa792;
137 |       border-width: 0 6px 6px 0;
138 |       border-style: solid;
139 |     }
140 |   }
141 | 
142 |   .wl-real-full {
143 |     left: 0;
144 |     right: 0;
145 |     &:before {
146 |       position: absolute;
147 |       top: $gantt_item;
148 |       left: 0;
149 |       z-index: 1;
150 |       content: "";
151 |       width: 0;
152 |       height: 0;
153 |       border-color: #faa792 transparent transparent;
154 |       border-width: 6px 6px 6px 0;
155 |       border-style: solid;
156 |     }
157 |     &:after {
158 |       position: absolute;
159 |       top: $gantt_item;
160 |       right: 0;
161 |       z-index: 1;
162 |       content: "";
163 |       width: 0;
164 |       height: 0;
165 |       border-color: transparent #faa792;
166 |       border-width: 0 6px 6px 0;
167 |       border-style: solid;
168 |     }
169 |   }
170 |   // 实际时间gantt结束
171 | 
172 |   // 名称列
173 |   .name-col {
174 |     position: relative;
175 |     &:hover .name-col-edit {
176 |       display: inline-block;
177 |     }
178 | 
179 |     .name-col-edit {
180 |       display: none;
181 |       position: absolute;
182 |       right: 0;
183 |     }
184 | 
185 |     .name-col-icon {
186 |       padding: 6px 3px;
187 |       cursor: pointer;
188 |       font-size: 16px;
189 |     }
190 | 
191 |     .task-remove {
192 |       color: #f56c6c;
193 |     }
194 |     .task-add {
195 |       color: #409eff;
196 |     }
197 |   }
198 | }
199 | 
200 | .year-and-month {
201 |   .wl-item-start {
202 |     left: 5%;
203 |     &:after {
204 |       position: absolute;
205 |       top: $gantt_item;
206 |       left: 0;
207 |       z-index: 1;
208 |       content: "";
209 |       width: 0;
210 |       height: 0;
211 |       border-color: #409eff transparent transparent;
212 |       border-width: 6px 6px 6px 0;
213 |       border-style: solid;
214 |     }
215 |   }
216 | 
217 |   .wl-item-end {
218 |     right: 5%;
219 |     &:after {
220 |       position: absolute;
221 |       top: $gantt_item;
222 |       right: 0;
223 |       z-index: 1;
224 |       content: "";
225 |       width: 0;
226 |       height: 0;
227 |       border-color: transparent #409eff;
228 |       border-width: 0 6px 6px 0;
229 |       border-style: solid;
230 |     }
231 |   }
232 | 
233 |   .wl-item-full {
234 |     left: 5%;
235 |     right: 5%;
236 |     &:before {
237 |       position: absolute;
238 |       top: $gantt_item;
239 |       left: 0;
240 |       z-index: 1;
241 |       content: "";
242 |       width: 0;
243 |       height: 0;
244 |       border-color: #409eff transparent transparent;
245 |       border-width: 6px 6px 6px 0;
246 |       border-style: solid;
247 |     }
248 |     &:after {
249 |       position: absolute;
250 |       top: $gantt_item;
251 |       right: 0;
252 |       z-index: 1;
253 |       content: "";
254 |       width: 0;
255 |       height: 0;
256 |       border-color: transparent #409eff;
257 |       border-width: 0 6px 6px 0;
258 |       border-style: solid;
259 |     }
260 |   }
261 | }
262 | 
263 | .wl-info-card {
264 |   position: fixed;
265 |   top: 0;
266 |   left: 0;
267 |   z-index: 99;
268 |   padding: 10px;
269 |   width: 360px;
270 |   min-height: 120px;
271 |   transition: all 0.4s ease-out;
272 |   transform: translate(-100%, -120%);
273 |   border-radius: 4px;
274 |   box-shadow: inset 0px 0px 11px 0px #e6e6e6;
275 |   background: #fff;
276 | }
277 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # wl-gantt
  2 | 
  3 | # 简介
  4 |   甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。  
  5 |   目前市面上最有名的几个gantt插件占据江湖了非常久远的时间，它们古老又强大。 
  6 |   但无一例外的是：它们收费或极其难用并且依赖非常古老的技术，其中有些技术现在入行的新手甚至从未听闻。  
  7 |  【jQueryGantt】【plusgantt】【dhtmlx】  不可否认它们都非常的强大，不管是从性能还是功能性。但是大多的业务需求并不需要如此庞然大物才能满足需求。 另一方面古老的技术稀缺的文档又让开发者无从下手（收费版甚至不提供文档，而你的老板又肯定不会提供钱买下授权）。  
  8 |  `wl-gantt`出现的背景就是笔者在公司的Vue项目中使用B***Gantt插件所受到的巨大伤害：基于extjs（对于17年入行的我来说没听过）、不提供开发文档、没有中文资料、源码加密，开发全靠打印实例找属性。 `wl-gantt`是一个基于Vue及elementUi的gantt甘特图插件，是一个896的码奴在仅有的剩余的1中挤时间开发而成。   
  9 |   它目提供的功能有：自动检查源数据是否符合project任务安排规则、结束后开始的前置任务规则、yearAndmonth|yearAndWeek|ManthAndDay日期跨度地洞切换、内置前置任务管理器。     
 10 |   它的优点：非常简单易用，并且高度可配置，自动抹平不合格数据并给与提示，不会无缘无故产生异常。  
 11 |   它正在逐渐长大，下个阶段，它将学会：    
 12 |     1. yearAndMonth、monthAndDay、yearAndWeek时间跨度配置 【已完成，month及week格子起止位置待精确化】  
 13 |     2. 内置前置任务选择器 【已完成】  
 14 |     3. 整合树表全选联动功能 【已完成】  
 15 |     4. 添加、移除任务回调 【已完成】        
 16 |     4. 任务连接线   
 17 |     5. 任务自定义悬浮提示   
 18 |     6. 和所有你觉得需要用到的需求 
 19 | 
 20 | ### [在线演示](http://wlui.com.cn/ui/gantt) - [GitHub](https://github.com/hql7)
 21 | 
 22 | ### wl-gantt 与市面应用较广的大佬型插件对比
 23 | 
 24 | > wl-gantt 外观简洁清爽，非常简单易用，高度可配置
 25 |   ![wl-gantt](http://wlsy.oss-cn-hangzhou.aliyuncs.com/wl-gantt.png)
 26 |   
 27 | > jquery Gantt 笨重、老旧、较丑但文档还算清晰
 28 |   ![jquery Gantt](http://wlsy.oss-cn-hangzhou.aliyuncs.com/jq-gantt.png)
 29 | 
 30 | > js gantt 不想多说了
 31 |   ![js gantt](http://wlsy.oss-cn-hangzhou.aliyuncs.com/js-gantt.png)
 32 | 
 33 | > dhtmlxGantt 功能强大、全面；但是使用难度高，不切合现代框架及ui库，很难在项目中完美应用
 34 |   ![dhtmlxGantt](http://wlsy.oss-cn-hangzhou.aliyuncs.com/dhtmlxGantt.png)
 35 | 
 36 | > frappe-gantt 功能好少
 37 |   ![frappe](http://wlsy.oss-cn-hangzhou.aliyuncs.com/frappe.png)
 38 | 
 39 | > bryntum 唯一较美观的，但是可配置性差，无法和组件结合;不校验源数据正确性就报错、崩溃;规则死板不符合项目使用；收费年950$; 功能强大但文档只有简单介绍，详细用法只能控制台打印
 40 |   ![bryntum](http://wlsy.oss-cn-hangzhou.aliyuncs.com/bryntum.png)
 41 | 
 42 | ### 更新说明
 43 |   > 2020-04-03 懒加载
 44 |   > 2020-02-20 更新gantt，详见版本说明1.0.1
 45 |   > 2019-12-14 更新gantt，增加内置前置任务列，支持多选前置和单选前置，并自动校验源数据前置任务合法性。
 46 |   > 2019-12-3 更新gantt。1表格支持[el-table](https://element.eleme.cn/#/zh-CN/component/table)大部分`Attributes`和`Events`,详细列表见下方；2名称列增加`nameFormatter`格式化内容函数支持；3日期列改为点击显示编辑输入框的形式。  
 47 |   > 2019-12-2 更新gantt.1日期支持` yearAndMonth、monthAndDay、yearAndWeek`类型，详见`版本记录1`；2修复部分时间更改情况不回调的问题。
 48 | 
 49 | 
 50 | #### 已支持el-table参数及事件列表
 51 | ```
 52 |     :fit="fit"
 53 |     :size="size"
 54 |     :border="border"
 55 |     :data="selfData"
 56 |     :stripe="stripe"
 57 |     :height="height"
 58 |     :row-key="rowKey"
 59 |     :row-style="rowStyle"
 60 |     :class="dateTypeClass"
 61 |     :cell-style="cellStyle"
 62 |     :max-height="maxHeight"
 63 |     :tree-props="selfProps"
 64 |     :current-row-key="rowKey"
 65 |     :row-class-name="rowClassName"
 66 |     :cell-class-name="cellClassName"
 67 |     :expand-row-keys="expandRowKeys"
 68 |     :header-row-style="headerRowStyle"
 69 |     :header-cell-style="headerCellStyle"
 70 |     :default-expand-all="defaultExpandAll"
 71 |     :header-row-class-name="headerRowClassName"
 72 |     :highlight-current-row="highlightCurrentRow"
 73 |     :header-cell-class-name="headerCellClassName"
 74 |     @header-contextmenu="handleHeaderContextMenu"
 75 |     @selection-change="handleSelectionChange"
 76 |     @row-contextmenu="handleRowContextMenu"
 77 |     @current-change="handleCurrentChange"
 78 |     @cell-mouse-enter="handleMouseEnter"
 79 |     @cell-mouse-leave="handleMouseLeave"
 80 |     @expand-change="handleExpandChange"
 81 |     @filter-change="handleFilterChange"
 82 |     @cell-dblclick="handleCellDbClick"
 83 |     @header-click="handleHeaderClick"
 84 |     @row-dblclick="handleRowDbClick"
 85 |     @sort-change="handleSortChange"
 86 |     @cell-click="handleCellClick"
 87 |     @select-all="handleSelectAll"
 88 |     @row-click="handleRowClick"
 89 |     @select="handleSelect"
 90 | ```
 91 | 
 92 | ## 快速上手
 93 | 
 94 | `npm i wl-gantt --save` 
 95 |   
 96 |   或  
 97 |   
 98 |   `npm i wl-gantt -S` 
 99 | 
100 | `import wlGantt from 'wl-gantt'`  
101 | 
102 | `import "wl-gantt/lib/wl-gantt.css"`  
103 | 
104 | `Vue.use(wlGantt)`  
105 | 
106 | ## 文档
107 | ###  Attributes 参数
108 |   | 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 注意 |
109 |   | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
110 |   | 1 | data | 数据 | Array | - | [] | - |
111 |   | 2 | dateType | gantt图区日期表头类型 | String | monthAndDay、yearAndMonth、yearAndDay | yearAndMonth | - |
112 |   | 3 | treeProps | 树表配置项 | Object | - | - | 见下方props |
113 |   | 4 | startDate | 项目开始时间 | String、Object | 必填 |-| 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间 |
114 |   | 5 | endDate | 项目结束时间 | String、Object | 必填 | - | 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间 |
115 |   | 6 | checkSource | 是否检查源数据符合规则 | Boolean | - | - | 检查源数据为自动修改不符合规范的时间为符合规则的期望值 |
116 |   | 7 | treatIdAsIdentityId | 是否使用id来作为自增id | Boolean | - | false | 如果是请保证id本来就简短的数字型而不是较长的字符串或guid |
117 |   | 8 | autoGanttDateType | 自动调整gantt时间跨度类型，具体规则见`版本记录1` | Boolean | - | true | - |
118 |   | 9 | nameFormatter | 名称列格式化内容函数 | Function | - | - | Function(row, column, cellValue, index) |
119 |   | 10 | 其他Table Attributes | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - | - | - |
120 |   | 11 | usePreColumn | 是否使用内置前置任务列 | Boolean | - | false | - |
121 |   | 12 | preMultiple | 前置任务是否可以多选 | Boolean | - | true | 如果开启多选则pre字段必须是Array，否则可以是Number\String | 
122 |   | 13 | preFormatter | 前置内容列格式化函数 | Function | - | - | 如不传则根据`prop name字段+，`拼接 | 
123 |   | 14 | emptyCellText | 空值单元格占位符 | String | - | '-' | - | 
124 |   | 15 | useCheckColumn | 是否使用内置复选框列 | Boolean | - | false | - |
125 |   | 16 | useIndexColumn | 是否使用内置序号列 | Boolean | - | false | - | 
126 |   | 17 | edit | 是否可编辑 | Boolean | - | true | - |
127 |   | 18 | parentChild | 使用复选框时，是否父子关联 | Boolean | - | true | 必须配置props的id、children字段 |
128 |   | 19 | ganttOnly | 是否只显示图形 | Boolean | - | false | - |
129 |   | 20 | lazy | 同el-table | Boolean | - | false | - |
130 |   | 21 | load | 同el-table | Function | - | - | - |
131 |   | 22 | contextMenuOptions | 右键浮窗配置项，如果存在则点击gantt右键显示配置的浮窗信息 | Array | - | - | 数组内对象属性有：* @param {String} label 展示名称 * @param {String} prop 绑定的字段 * @param {String} icon 可选 字体图标class |
132 |   | 23 | useRealTime | 是否使用实际开始时间、实际结束时间，开启则在计划时间蓝色条外展示实际时间棕红色条 | Boolean | - | false | - | 
133 |   | 24 | useCard | 是否使用表格hover窗口 | Boolean | - | false | - |
134 | 
135 | ### props 配置项
136 | | 序号 | 参数 | 说明 | 默认值 |
137 | | ---- | ---- | ---- | ---- |
138 | | 1 | children | 数据的子集children字段,表示为树表 | children |
139 | | 2 | name | 用于显示名字的字段 | name |
140 | | 3 | id | 每条数据的id，必须唯一 | id |
141 | | 4 | pid | 每条数据的父节点id字段 | pid |
142 | | 5 | startDate | 每条数据的开始时间字段 | startDate |
143 | | 6 | endDate | 每条数据的结束时间字段| endDate |
144 | | 7 | identityId | 数据自增id | identityId |
145 | | 8 | parents | 自增父级id树，逗号分隔 | parents |
146 | | 9 | pre | 前置任务字段，字段值应是前置任务的id | pre |
147 | | 10 | hasChildren | 指定哪些行是包含子节点 | hasChildren | 
148 | | 11 | realStartDate | 实际开始时间字段 | realEndDate |
149 | | 12 | realEndDate | 实际结束时间字段 | realEndDate |
150 | 
151 | ### Events 事件
152 |   | 序号 | 事件名 | 说明 | 回调参数 |
153 |   | ---- | ---- | ---- | ---- |
154 |   | 1 | timeChange | 当任务时间发生更改时触发 | function(row) 依次为当前行数据 |
155 |   | 2 | 其他Table Events | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - |
156 |   | 3 | preChange | 前置任务修改事件 | function(row) 依次为当前行数据 |
157 |   | 4 | nameChange | 名称修改事件 |  function(row) 依次为当前行数据 |
158 |   | 5 | taskAdd | 添加任务事件 |  function(row) 依次为当前行数据 |
159 |   | 6 | taskRemove | 删除任务事件 |  function(row) 依次为当前行数据 |
160 | 
161 | ### Methods 方法
162 |   | 序号 | 方法名 | 说明 | 回调参数 |
163 |   | ---- | ---- | ---- | ---- |
164 |   | 1 | loadTree | 手动调用树表懒加载 | function(row) 依次为要展开的行信息 |
165 |   | 2 | loadTreeAdd | 更新树表懒加载后的子节点 | function(id, list) 依次为要更新的节点id，要添加的子节点list，注意此为合并list和原来的子节点数据 |
166 |   | 3 | loadTreeRemove | 移除懒加载数据的子节点 | function(id, list) 依次为要更新的节点id，要删掉的子字节的rowKey |
167 | 
168 | ### slot
169 |   | 序号 | 名字 | 说明 |
170 |   | ---- | ---- | ---- |
171 |   | 1 | prv | 用于插入列表中名称前的列，如不生效需加`fixed` |
172 |   | 2 | - | 插入在默认列及甘特图之间的列 |
173 | 
174 | ### 版本记录
175 | 
176 | > 1.0.6 修复任务结束日期更改超出项目时间范围时，gantt图形未动态规划的错误；另发现useCard体验不好
177 | 
178 | > 1.0.5 增加列表行hover窗口
179 | 
180 | > 1.0.3版本，修复超过一年的时间跨度展示错误；增加右键浮窗功能
181 | 
182 | > 1.0.2版本，增加lazy和load参数，支持懒加载，并提供懒加载时的方法：Methods：1,2,3；增加ganttOnly参数支持只显示图形
183 | 
184 | > 1.0.1版本 增加内置复选框列、序号列；增加是否可编辑参数；修改内置前置任务列配置参数值为false；增加复选框的父子联动属性；增加名称列可编辑逻辑；增加添加、移除任务事件；
185 | 
186 | > 1.0.0版本 增加内置前置任务列，支持多选前置和单选前置，并自动校验源数据前置任务合法性。
187 | 
188 | > 0.1.6版本 更新gantt。1表格支持[el-table](https://element.eleme.cn/#/zh-CN/component/table)大部分`Attributes`和`Events`；2名称列增加`nameFormatter`格式化内容函数支持；3日期列改为点击显示编辑输入框的形式。注意树表时`rowKey`参数必须传，默认为`id`。
189 | 
190 | > 0.1.5版本 更新gantt日期支持` yearAndMonth、monthAndDay、yearAndWeek`类型，并自动调整，规则为：大于12个月的自动调整为`yearAndMonth`,3个月到12个月之间的，自动调整为`yearAndWeek`, 2个月及以内的自动调整为`monthAndDay`。新增参数`autoGanttDateType`可以管理是否自动调整，如果要关闭自动调整请保证时间跨度尽可能的少，否则会有明显的性能问题。修复部分时间更改情况不回调的问题。


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------
/src/components/gantt-bate.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 | <div class="wl-gantt"> 
   3 |   <!-- 主体图形部分 -->
   4 |   <el-table
   5 |     ref="wl-gantt"
   6 |     :fit="fit"
   7 |     :size="size"
   8 |     :border="border"
   9 |     :data="selfData"
  10 |     :stripe="stripe"
  11 |     :height="height"
  12 |     :row-key="rowKey"
  13 |     :row-style="rowStyle"
  14 |     :class="dateTypeClass"
  15 |     :cell-style="cellStyle"
  16 |     :max-height="maxHeight"
  17 |     :tree-props="selfProps"
  18 |     :current-row-key="rowKey"
  19 |     :row-class-name="rowClassName"
  20 |     :cell-class-name="cellClassName"
  21 |     :expand-row-keys="expandRowKeys"
  22 |     :header-row-style="headerRowStyle"
  23 |     :header-cell-style="headerCellStyle"
  24 |     :default-expand-all="defaultExpandAll"
  25 |     :header-row-class-name="headerRowClassName"
  26 |     :highlight-current-row="highlightCurrentRow"
  27 |     :header-cell-class-name="headerCellClassName"
  28 |     @header-contextmenu="handleHeaderContextMenu"
  29 |     @selection-change="handleSelectionChange"
  30 |     @row-contextmenu="handleRowContextMenu"
  31 |     @current-change="handleCurrentChange"
  32 |     @cell-mouse-enter="handleMouseEnter"
  33 |     @cell-mouse-leave="handleMouseLeave"
  34 |     @expand-change="handleExpandChange"
  35 |     @filter-change="handleFilterChange"
  36 |     @cell-dblclick="handleCellDbClick"
  37 |     @header-click="handleHeaderClick"
  38 |     @row-dblclick="handleRowDbClick"
  39 |     @sort-change="handleSortChange"
  40 |     @cell-click="handleCellClick"
  41 |     @select-all="handleSelectAll"
  42 |     @row-click="handleRowClick"
  43 |     @select="handleSelect"
  44 |     >
  45 |     <slot name="prv"></slot>
  46 |     <el-table-column
  47 |       fixed
  48 |       label="名称"
  49 |       min-width="200"
  50 |       show-overflow-tooltip
  51 |       :prop="selfProps.name"
  52 |       :formatter="nameFormatter"
  53 |     ></el-table-column>
  54 |     <el-table-column
  55 |       :resizable="false"
  56 |       fixed
  57 |       min-width="110"
  58 |       align="center"
  59 |       :prop="selfProps.startDate"
  60 |       label="开始日期"
  61 |      >
  62 |       <template slot-scope="scope">
  63 |         {{timeFormat(scope.row[selfProps.startDate])}}
  64 |         <!-- <el-date-picker
  65 |           v-if="self_cell_edit === '_s_d_' + scope.$index"
  66 |           v-model="scope.row[selfProps.startDate]"
  67 |           @change="startDateChange(scope.row)"
  68 |           @blur="self_cell_edit = null"
  69 |           type="date"
  70 |           size="medium"
  71 |           class="u-full"
  72 |           :clearable="false"
  73 |           ref="wl-start-date"
  74 |           value-format="yyyy-MM-dd"
  75 |           placeholder="请选择开始日期"
  76 |         ></el-date-picker>
  77 |         <div
  78 |           v-else
  79 |           class="h-full"
  80 |           @click="cellEdit( '_s_d_' + scope.$index, 'wl-start-date')"
  81 |         >{{timeFormat(scope.row[selfProps.startDate])}}</div> -->
  82 |       </template>
  83 |     </el-table-column>
  84 |     <el-table-column
  85 |       fixed
  86 |       :resizable="false"
  87 |       min-width="110"
  88 |       align="center"
  89 |       :prop="selfProps.endDate"
  90 |       label="结束日期"
  91 |       >
  92 |       <template slot-scope="scope">
  93 |         {{timeFormat(scope.row[selfProps.endDate])}}
  94 |         <!-- <el-date-picker
  95 |           v-if="self_cell_edit === '_e_d_' + scope.$index"
  96 |           v-model="scope.row[selfProps.endDate]"
  97 |           @change="endDateChange(scope.row)"
  98 |           @blur="self_cell_edit = null"
  99 |           type="date"
 100 |           size="medium"
 101 |           class="u-full"
 102 |           :clearable="false"
 103 |           ref="wl-end-date"
 104 |           value-format="yyyy-MM-dd"
 105 |           placeholder="请选择结束日期"
 106 |         ></el-date-picker>
 107 |         <div
 108 |           v-else
 109 |           class="h-full"
 110 |           @click="cellEdit('_e_d_' + scope.$index, 'wl-end-date')"
 111 |         >{{timeFormat(scope.row[selfProps.endDate])}}</div> -->
 112 |       </template>
 113 |     </el-table-column>
 114 |     <el-table-column
 115 |       v-if="usePreColumn"
 116 |       align="center"
 117 |       min-width="100"
 118 |       label="前置任务"
 119 |       show-overflow-tooltip
 120 |       :prop="selfProps.endDate"
 121 |       >
 122 |       <template slot-scope="scope">
 123 |         {{preFormat(scope.row)}}
 124 |         <!-- @blur="self_cell_edit = null" @blur="preEditBlur" -->
 125 |         <!-- <el-select
 126 |           v-if="self_cell_edit === '_p_t_' + scope.$index"
 127 |           @change="preChange"
 128 |           v-model="scope.row[selfProps.pre]"
 129 |           collapse-tags
 130 |           :multiple="preMultiple"
 131 |           ref="wl-pre-select"
 132 |           placeholder="请选择前置任务"
 133 |           >
 134 |           <el-option
 135 |             v-for="item in pre_options"
 136 |             :key="item[selfProps.id]"
 137 |             :label="item[selfProps.name]"
 138 |             :value="item[selfProps.id]"
 139 |           ></el-option>
 140 |         </el-select>
 141 |         <div
 142 |           v-else
 143 |           class="h-full"
 144 |           @click="preCellEdit(scope.row, '_p_t_' + scope.$index, 'wl-pre-select')"
 145 |         >{{preFormat(scope.row)}}</div> -->
 146 |       </template>
 147 |     </el-table-column>
 148 |     <slot></slot>
 149 |     <!-- year and mouth gantt -->
 150 |     <template v-if="self_date_type === 'yearAndMonth'">
 151 |       <el-table-column
 152 |         :resizable="false"
 153 |         v-for="year in ganttTitleDate"
 154 |         :label="year.name"
 155 |         :key="year.id"
 156 |       >
 157 |         <el-table-column
 158 |           class-name="wl-gantt-item"
 159 |           v-for="month in year.children"
 160 |           :resizable="false"
 161 |           :key="month.id"
 162 |           :label="month.name"
 163 |         >
 164 |           <template slot-scope="scope">
 165 |             <div :class="dayGanttType(scope.row, month.full_date, 'months')"></div>
 166 |             <div v-if="useRealTime" :class="realDayGanttType(scope.row, month.full_date, 'months')"></div>
 167 |           </template>
 168 |         </el-table-column>
 169 |       </el-table-column>
 170 |     </template>
 171 |     <!-- year and week gantt -->
 172 |     <template v-else-if="self_date_type === 'yearAndWeek'">
 173 |       <el-table-column
 174 |         :resizable="false"
 175 |         v-for="i in ganttTitleDate"
 176 |         :label="i.full_date"
 177 |         :key="i.id"
 178 |       >
 179 |         <el-table-column
 180 |           class-name="wl-gantt-item"
 181 |           v-for="t in i.children"
 182 |           :resizable="false"
 183 |           :key="t.id"
 184 |           :label="t.name"
 185 |         >
 186 |           <template slot-scope="scope">
 187 |             <div :class="dayGanttType(scope.row, t.full_date, 'week')"></div>
 188 |             <div v-if="useRealTime" :class="realDayGanttType(scope.row, t.full_date, 'week')"></div>
 189 |           </template>
 190 |         </el-table-column>
 191 |       </el-table-column>
 192 |     </template>
 193 |     <!-- mouth and day gantt -->
 194 |     <template v-else>
 195 |       <el-table-column
 196 |         :resizable="false"
 197 |         v-for="i in ganttTitleDate"
 198 |         :label="i.full_date"
 199 |         :key="i.id"
 200 |       >
 201 |         <el-table-column
 202 |           class-name="wl-gantt-item"
 203 |           v-for="t in i.children"
 204 |           :resizable="false"
 205 |           :key="t.id"
 206 |           :label="t.name"
 207 |         >
 208 |           <template slot-scope="scope">
 209 |             <div :class="dayGanttType(scope.row, t.full_date)"></div>
 210 |             <div v-if="useRealTime" :class="realDayGanttType(scope.row, t.full_date)"></div>
 211 |           </template>
 212 |         </el-table-column>
 213 |       </el-table-column>
 214 |     </template>
 215 |   </el-table>
 216 |   <!-- 编辑表单部分 -->
 217 |   <el-dialog class="wl-gantt-dialog" title="编辑任务" :modal="false" :visible.sync="task_edit_show" width="420px">
 218 |   <el-form :model="task_edit_form" size="medium" label-width="110px">
 219 |     <el-form-item label="任务名称">
 220 |       <el-input v-model="task_edit_form.name" placeholder="请填写任务名称"></el-input>
 221 |     </el-form-item>
 222 |     <el-form-item label="开始时间">
 223 |       <el-date-picker
 224 |         class="u-full"
 225 |         v-model="task_edit_form.start_time"
 226 |         type="date"
 227 |         placeholder="请选择开始时间">
 228 |       </el-date-picker>
 229 |     </el-form-item>
 230 |     <el-form-item label="结束时间">
 231 |       <el-date-picker
 232 |         class="u-full"
 233 |         v-model="task_edit_form.end_time"
 234 |         type="date"
 235 |         placeholder="请选择结束时间">
 236 |       </el-date-picker>
 237 |     </el-form-item>
 238 |     <el-form-item label="实际开始时间">
 239 |       <el-date-picker
 240 |         class="u-full"
 241 |         v-model="task_edit_form.real_start_time"
 242 |         type="date"
 243 |         placeholder="请选择实际开始时间">
 244 |       </el-date-picker>
 245 |     </el-form-item>
 246 |     <el-form-item label="实际结束时间">
 247 |       <el-date-picker
 248 |         class="u-full"
 249 |         v-model="task_edit_form.real_end_time"
 250 |         type="date"
 251 |         placeholder="请选择实际结束时间">
 252 |       </el-date-picker>
 253 |     </el-form-item>
 254 |     <el-form-item label="前置任务">
 255 |       <el-select
 256 |           class="u-full"
 257 |           @change="preChange"
 258 |           v-model="task_edit_form.pre_task"
 259 |           collapse-tags
 260 |           :multiple="preMultiple"
 261 |           placeholder="请选择前置任务"
 262 |           >
 263 |           <el-option
 264 |             v-for="item in pre_options"
 265 |             :key="item[selfProps.id]"
 266 |             :label="item[selfProps.name]"
 267 |             :value="item[selfProps.id]"
 268 |           ></el-option>
 269 |         </el-select>
 270 |     </el-form-item>
 271 |   </el-form>
 272 |   <div slot="footer" class="dialog-footer">
 273 |     <el-button @click="task_edit_show = false">取 消</el-button>
 274 |     <el-button type="primary" @click="taskEdit()">确 定</el-button>
 275 |   </div>
 276 |   </el-dialog>
 277 | </div>
 278 | </template>
 279 | 
 280 | <script>
 281 | import dayjs from "dayjs"; // 导入日期js
 282 | const uuidv4 = require("uuid/v4"); // 导入uuid生成插件
 283 | import isBetween from "dayjs/plugin/isBetween";
 284 | dayjs.extend(isBetween);
 285 | import { deepClone, flattenDeep, getMin, getMax } from "@/assets/array.js";
 286 | export default {
 287 |   name: "wlGantt",
 288 |   data() {
 289 |     return {
 290 |       self_start_date: "", // 项目开始时间
 291 |       self_end_date: "", // 项目结束时间
 292 |       self_data_list: [], // 一维化后的gantt数据
 293 |       self_date_type: "", // 自身日期类型
 294 |       self_id: 1, // 自增id
 295 |       self_cell_edit: null, // 正在编辑的单元格
 296 |       self_dependent_store: [], // 自身依赖库
 297 |       multipleSelection: [], // 多选数据
 298 |       currentRow: null, // 单选数据
 299 |       pre_options: [], // 可选前置节点
 300 |       task_edit_show: false, // 是否显示任务编辑表单
 301 |       task_edit_form: {}, // 任务编辑表单
 302 |       edit_row: {}, // 记录编辑行
 303 |       update: true // 更新视图
 304 |     };
 305 |   },
 306 |   props: {
 307 |     // gantt数据
 308 |     data: {
 309 |       type: Array,
 310 |       default: () => {
 311 |         return [];
 312 |       }
 313 |     },
 314 |     // 日期类型
 315 |     dateType: {
 316 |       type: String,
 317 |       default: "yearAndMonth" // monthAndDay,yearAndMonth,yearAndWeek
 318 |     },
 319 |     // 树表配置项
 320 |     props: Object,
 321 |     // 开始日期
 322 |     startDate: {
 323 |       type: [String, Object],
 324 |       required: true
 325 |     },
 326 |     // 结束时间
 327 |     endDate: {
 328 |       type: [String, Object],
 329 |       required: true
 330 |     },
 331 |     // 是否使用实际开始时间、实际结束时间
 332 |     useRealTime: {
 333 |       type: Boolean,
 334 |       default: false
 335 |     },
 336 |     // 是否检查源数据符合规则，默认开启，如果源数据已遵循project规则，可设置为false以提高性能
 337 |     checkSource: {
 338 |       type: Boolean,
 339 |       default: true
 340 |     },
 341 |     // 废弃：反而会因为频繁的判断而影响性能
 342 |     // 是否生成自增id并组成parents来满足树链的查询条件，如果数据本身已有自增id，可设置为false以提高性能
 343 |     // 如果设置为false，则数据内必须包含自增id字段：identityId，parents字段必须以`,`分割。
 344 |     // 字段名可通过props配置，自增id必须唯一并尽可能的短，如1，2，3...，parents应为祖先自增id通过`,`拼接直至父级
 345 |     recordParents: {
 346 |       type: Boolean,
 347 |       default: true
 348 |     },
 349 |     // 是否使用id来作为自增id，如果是请保证id本来就简短的数字型而不是较长的字符串或guid
 350 |     treatIdAsIdentityId: {
 351 |       type: Boolean,
 352 |       default: false
 353 |     },
 354 |     // 自动变化gantt标题日期模式
 355 |     autoGanttDateType: {
 356 |       type: Boolean,
 357 |       default: true
 358 |     },
 359 |     nameFormatter: Function, // 名称列的格式化内容函数
 360 |     // 是否使用内置前置任务列
 361 |     usePreColumn: {
 362 |       type: Boolean,
 363 |       default: true
 364 |     },
 365 |     // 是否开启前置任务多选 如果开启多选则pre字段必须是Array，否则可以是Number\String
 366 |     preMultiple: {
 367 |       type: Boolean,
 368 |       default: true
 369 |     },
 370 |     preFormatter: Function, // 前置任务列的格式化内容函数
 371 |     // 空单元格占位符
 372 |     emptyCellText: {
 373 |       type: String,
 374 |       default: ""
 375 |     },
 376 |     // 内置列
 377 |     builtInColumn: Object,
 378 |     // ---------------------------------------------以下为el-table Attributes--------------------------------------------
 379 |     defaultExpandAll: {
 380 |       type: Boolean,
 381 |       default: false
 382 |     }, // 是否全部展开
 383 |     rowKey: {
 384 |       type: String,
 385 |       default: "id"
 386 |     }, // 必须指定key来渲染树形数据
 387 |     height: [String, Number], // 列表高度
 388 |     maxHeight: [String, Number], // 列表最大高度
 389 |     stripe: {
 390 |       type: Boolean,
 391 |       default: false
 392 |     }, // 是否为斑马纹
 393 |     highlightCurrentRow: {
 394 |       type: Boolean,
 395 |       default: false
 396 |     }, // 是否要高亮当前行
 397 |     border: {
 398 |       type: Boolean,
 399 |       default: true
 400 |     }, // 是否带有纵向边框
 401 |     fit: {
 402 |       type: Boolean,
 403 |       default: true
 404 |     }, // 列的宽度是否自撑开
 405 |     size: String, // Table 的尺寸
 406 |     rowClassName: Function, // 行的 className 的回调方法
 407 |     rowStyle: Function, // 行的 style 的回调方法
 408 |     cellClassName: Function, // 单元格的 className 的回调方法
 409 |     cellStyle: Function, // 单元格的 style 的回调方法
 410 |     headerRowClassName: {
 411 |       type: [Function, String],
 412 |       default: "wl-gantt-header"
 413 |     }, // 表头行的 className 的回调方法
 414 |     headerRowStyle: [Function, Object], // 表头行的 style 的回调方法
 415 |     headerCellClassName: [Function, String], // 表头单元格的 className 的回调方法
 416 |     headerCellStyle: [Function, Object], // 表头单元格的 style 的回调方法
 417 |     expandRowKeys: Array // 可以通过该属性设置 Table 目前的展开行
 418 |     // 是否使用一维数据组成树
 419 |     /* arrayToTree: {
 420 |       type: Boolean,
 421 |       default: false
 422 |     } */
 423 |   },
 424 |   computed: {
 425 |     // 甘特图标题日期分配
 426 |     ganttTitleDate() {
 427 |       // 分解开始和结束日期
 428 |       let start_date_spilt = dayjs(this.self_start_date)
 429 |         .format("YYYY-M-D")
 430 |         .split("-");
 431 |       let end_date_spilt = dayjs(this.self_end_date)
 432 |         .format("YYYY-M-D")
 433 |         .split("-");
 434 |       let start_year = Number(start_date_spilt[0]);
 435 |       let start_mouth = Number(start_date_spilt[1]);
 436 |       let end_year = Number(end_date_spilt[0]);
 437 |       let end_mouth = Number(end_date_spilt[1]);
 438 |       // 自动更新日期类型以适应任务时间范围跨度
 439 |       if (this.autoGanttDateType) {
 440 |         // 计算日期跨度
 441 |         let mouth_diff = this.timeDiffTime(
 442 |           this.self_start_date,
 443 |           this.self_end_date,
 444 |           "months"
 445 |         );
 446 |         if (mouth_diff > 12) {
 447 |           // 12个月以上的分到yearAndMouth
 448 |           this.self_date_type = "yearAndMonth";
 449 |         } else if (mouth_diff > 2) {
 450 |           // 2个月以上的分到yearAndWeek
 451 |           this.self_date_type = "yearAndWeek";
 452 |         } else {
 453 |           this.self_date_type = "monthAndDay";
 454 |         }
 455 |       }
 456 |       // 不自动更新日期类型，以dateType固定展示
 457 |       if (this.self_date_type === "yearAndWeek") {
 458 |         return this.yearAndWeekTitleDate(
 459 |           start_year,
 460 |           start_mouth,
 461 |           end_year,
 462 |           end_mouth
 463 |         );
 464 |       } else if (this.self_date_type === "monthAndDay") {
 465 |         return this.mouthAndDayTitleDate(
 466 |           start_year,
 467 |           start_mouth,
 468 |           end_year,
 469 |           end_mouth
 470 |         );
 471 |       } else {
 472 |         return this.yearAndMouthTitleDate(
 473 |           start_year,
 474 |           start_mouth,
 475 |           end_year,
 476 |           end_mouth
 477 |         );
 478 |       }
 479 |     },
 480 |     // 数据
 481 |     selfData() {
 482 |       let _data = this.data || [];
 483 |       // 生成一维数据
 484 |       this.self_data_list = flattenDeep(_data, this.selfProps.children);
 485 |       // 处理源数据合法性
 486 |       this.handleData(_data);
 487 |       // 处理前置依赖
 488 |       this.handleDependentStore();
 489 |       return _data;
 490 |     },
 491 |     // 树表配置项
 492 |     selfProps() {
 493 |       return {
 494 |         hasChildren: "hasChildren", // 字段来指定哪些行是包含子节点
 495 |         children: "children", // children字段来表示有子节点
 496 |         name: "name", // 任务名称字段
 497 |         id: "id", // id字段
 498 |         pid: "pid", // pid字段
 499 |         startDate: "startDate", // 开始时间字段
 500 |         realStartDate: "realStartDate", // 实际开始时间字段
 501 |         endDate: "endDate", // 结束时间字段
 502 |         realEndDate: "realEndDate", // 实际结束时间字段
 503 |         identityId: "identityId",
 504 |         parents: "parents",
 505 |         pre: "pre", // 前置任务字段【注意：如果使用recordParents，则pre值应是目标对象的identityId字段(可配置)】
 506 |         ...this.props
 507 |       };
 508 |     },
 509 |     // 内置表格列
 510 |     selfBuiltInColumn(){
 511 |       return {
 512 |         
 513 |       }
 514 |     },
 515 |     // 根据日期类型改样式
 516 |     dateTypeClass() {
 517 |       if (this.self_date_type === "yearAndMonth") {
 518 |         return "year-and-month";
 519 |       } else if (this.self_date_type === "monthAndDay") {
 520 |         return "month-and-day";
 521 |       } else if (this.self_date_type === "yearAndWeek") {
 522 |         return "year-and-week";
 523 |       }
 524 |     }
 525 |   },
 526 |   methods: {
 527 |     // 任务编辑
 528 |     taskEdit(){
 529 |       this.$set(this.edit_row,)
 530 |       this.task_edit_show = false;
 531 |     },
 532 |     /**
 533 |      * 开始时间改变
 534 |      * row: object 当前行数据
 535 |      */
 536 |     startDateChange(row) {
 537 |       // 如果将开始时间后移，结束时间也应后移
 538 |       let _delay = this.timeIsBefore(
 539 |         row._oldStartDate,
 540 |         row[this.selfProps.startDate]
 541 |       );
 542 |       if (_delay) {
 543 |         row[this.selfProps.endDate] = this.timeAdd(
 544 |           row[this.selfProps.endDate],
 545 |           row._cycle
 546 |         );
 547 |       }
 548 |       // 如果开始早于项目开始，则把项目开始提前
 549 |       let _early_project_start = this.timeIsBefore(
 550 |         row[this.selfProps.startDate],
 551 |         this.self_start_date
 552 |       );
 553 |       if (_early_project_start) {
 554 |         this.self_start_date = row[this.selfProps.startDate];
 555 |       }
 556 |       this.emitTimeChange(row);
 557 |     },
 558 |     /**
 559 |      * 结束时间改变
 560 |      * row: object 当前行数据
 561 |      */
 562 |     endDateChange(row) {
 563 |       this.emitTimeChange(row);
 564 |       // 如果开始晚于结束，提示
 565 |       /* if (
 566 |         this.timeIsBefore(
 567 |           row[this.selfProps.endDate],
 568 |           row[this.selfProps.startDate]
 569 |         )
 570 |       ) {
 571 |         row[this.selfProps.startDate] = row._oldStartDate;
 572 |         this.$message({
 573 |           showClose: true,
 574 |           message: "开始时间不可以晚于结束时间",
 575 |           type: "error"
 576 |         });
 577 |         return;
 578 |       } */
 579 |     },
 580 |     /**
 581 |      * 前置任务改变
 582 |      * row: object 当前行数据
 583 |      */
 584 |     preChange(row) {
 585 |       this.emitTimeChange(row);
 586 |       this.self_cell_edit = null;
 587 |       // 如果开始晚于结束，提示
 588 |       /* if (
 589 |         this.timeIsBefore(
 590 |           row[this.selfProps.endDate],
 591 |           row[this.selfProps.startDate]
 592 |         )
 593 |       ) {
 594 |         row[this.selfProps.startDate] = row._oldStartDate;
 595 |         this.$message({
 596 |           showClose: true,
 597 |           message: "开始时间不可以晚于结束时间",
 598 |           type: "error"
 599 |         });
 600 |         return;
 601 |       } */
 602 |     },
 603 |     /**
 604 |      * 前置任务内容格式化函数
 605 |      * data：[String, Array] 前置任务
 606 |      */
 607 |     preFormat(row) {
 608 |       // 自定义格式化前置任务列函数
 609 |       if (this.preFormatter) {
 610 |         return this.preFormatter(row);
 611 |       }
 612 |       let data = row[this.selfProps.pre];
 613 |       if (!data) return this.emptyCellText;
 614 |       if (Array.isArray(data)) {
 615 |         if (data.length === 0) return this.emptyCellText;
 616 |         let _pre_text = "";
 617 |         data.forEach(i => {
 618 |           let _act = this.self_data_list.find(t => t[this.selfProps.id] === i);
 619 |           if (_act) _pre_text += `${_act[this.selfProps.name]},`;
 620 |         });
 621 |         return _pre_text;
 622 |       }
 623 |       let _act = this.self_data_list.find(t => t[this.selfProps.id] === data);
 624 |       return _act ? _act[this.selfProps.name] : this.emptyCellText;
 625 |     },
 626 |     // 前置下拉框失去焦点事件，change会触发blur，如果不延时则chang失效，如果延时则也只是延迟触发，会造成选一次就关闭无法多选
 627 |     /* preEditBlur(){
 628 |       setTimeout(()=>{
 629 |         this.self_cell_edit = null
 630 |       },500)
 631 |     }, */
 632 |     /**
 633 |      * 前置任务编辑
 634 |      */
 635 |     preCellEdit(row) {
 636 |       this.pre_options = [];
 637 |       this.self_data_list.forEach(i => {
 638 |         if (i[this.selfProps.id] !== row[this.selfProps.id]) {
 639 |           this.pre_options.push({ ...i, [this.selfProps.children]: null });
 640 |         }
 641 |       });
 642 |       // 再剔除所有前置链涉及到的节点
 643 |       this.deepFindToSelf(row);
 644 |     },
 645 |     /**
 646 |      * 找出to为当前元素的form，并将form作为to继续查找
 647 |      * item: Object 当前元素
 648 |      * targets: Array 需要过滤的数据(废弃)
 649 |      */
 650 |     deepFindToSelf(item) {
 651 |       let _parents = item._parents.split(","); // 父祖节点不可选
 652 |       let _children = item._all_children.map(i => i._identityId); // 子孙节点不可选
 653 |       let _parents_and_children = _children.concat(_parents);
 654 |       this.pre_options = this.pre_options.filter(
 655 |         i => !_parents_and_children.some(t => t == i._identityId)
 656 |       );
 657 |       this.self_dependent_store.forEach(i => {
 658 |         let _tag = this.preMultiple
 659 |           ? i.to.some(t => t[this.selfProps.id] === item[this.selfProps.id])
 660 |           : i.to[this.selfProps.id] === item[this.selfProps.id];
 661 |         if (_tag) {
 662 |           this.pre_options = this.pre_options.filter(
 663 |             t => t[this.selfProps.id] !== i.form[this.selfProps.id]
 664 |           );
 665 |           this.deepFindToSelf(i.form);
 666 |         }
 667 |       });
 668 |     },
 669 |     /**
 670 |      * 单元格编辑(废弃)
 671 |      * key: string 需要操作的单元格key
 672 |      * ref：object 需要获取焦点的dom
 673 |      */
 674 |     /* cellEdit(key, ref) {
 675 |       this.self_cell_edit = key;
 676 |       this.$nextTick(() => {
 677 |         this.$refs[ref].focus();
 678 |       });
 679 |     }, */
 680 |     // 以下是表格-日期-gantt生成函数----------------------------------------生成gantt表格-------------------------------------
 681 |     /**
 682 |      * 年-月模式gantt标题
 683 |      * start_year: 起始年
 684 |      * start_mouth：起始月
 685 |      * end_year：结束年
 686 |      * end_mouth：结束月
 687 |      */
 688 |     yearAndMouthTitleDate(start_year, start_mouth, end_year, end_mouth) {
 689 |       // 日期数据盒子
 690 |       let dates = [
 691 |         {
 692 |           name: `${start_year}年`,
 693 |           date: start_year,
 694 |           id: uuidv4(),
 695 |           children: []
 696 |         }
 697 |       ];
 698 |       // 处理年份
 699 |       let year_diff = end_year - start_year;
 700 |       // 年间隔为同一年
 701 |       if (year_diff === 0) {
 702 |         let isLeap = this.isLeap(start_year); // 是否闰年
 703 |         let mouths = this.generationMonths(
 704 |           start_year,
 705 |           start_mouth,
 706 |           end_mouth + 1,
 707 |           isLeap,
 708 |           false
 709 |         ); // 处理月份
 710 |         dates[0].children = mouths;
 711 |         return dates;
 712 |       }
 713 |       // 处理开始月份
 714 |       let startIsLeap = this.isLeap(start_year);
 715 |       let start_mouths = this.generationMonths(
 716 |         start_year,
 717 |         start_mouth,
 718 |         13,
 719 |         startIsLeap,
 720 |         false
 721 |       );
 722 |       // 处理结束月份
 723 |       let endIsLeap = this.isLeap(end_year);
 724 |       let end_mouths = this.generationMonths(
 725 |         end_year,
 726 |         1,
 727 |         end_mouth + 1,
 728 |         endIsLeap,
 729 |         false
 730 |       );
 731 |       // 年间隔等于一年
 732 |       if (year_diff === 1) {
 733 |         dates[0].children = start_mouths;
 734 |         dates.push({
 735 |           name: `${end_year}年`,
 736 |           date: end_year,
 737 |           children: end_mouths,
 738 |           id: uuidv4()
 739 |         });
 740 |         return dates;
 741 |       }
 742 |       // 年间隔大于1年
 743 |       if (year_diff > 1) {
 744 |         for (let i = 1; i < year_diff; i++) {
 745 |           let item_year = start_year + i;
 746 |           let isLeap = this.isLeap(item_year);
 747 |           let month_and_day = this.generationMonths(
 748 |             item_year,
 749 |             1,
 750 |             13,
 751 |             isLeap,
 752 |             false
 753 |           );
 754 |           dates.push({
 755 |             name: `${item_year}年`,
 756 |             date: item_year,
 757 |             id: uuidv4(),
 758 |             children: month_and_day
 759 |           });
 760 |         }
 761 |         dates.push({
 762 |           name: `${end_year}年`,
 763 |           date: item_year,
 764 |           children: end_mouths,
 765 |           id: uuidv4()
 766 |         });
 767 |         return dates;
 768 |       }
 769 |     },
 770 |     /**
 771 |      * 年-周模式gantt标题
 772 |      * start_year: 起始年
 773 |      * start_mouth：起始月
 774 |      * end_year：结束年
 775 |      * end_mouth：结束月
 776 |      */
 777 |     yearAndWeekTitleDate(start_year, start_mouth, end_year, end_mouth) {
 778 |       // 处理年份
 779 |       let year_diff = end_year - start_year;
 780 |       // 只存在同年或前后年的情况
 781 |       if (year_diff === 0) {
 782 |         // 年间隔为同一年
 783 |         let isLeap = this.isLeap(start_year); // 是否闰年
 784 |         let mouths = this.generationMonths(
 785 |           start_year,
 786 |           start_mouth,
 787 |           end_mouth + 1,
 788 |           isLeap,
 789 |           true,
 790 |           true
 791 |         ); // 处理月份
 792 |         return mouths;
 793 |       }
 794 |       // 处理开始月份
 795 |       let startIsLeap = this.isLeap(start_year);
 796 |       let start_mouths = this.generationMonths(
 797 |         start_year,
 798 |         start_mouth,
 799 |         13,
 800 |         startIsLeap,
 801 |         true,
 802 |         true
 803 |       );
 804 |       // 处理结束月份
 805 |       let endIsLeap = this.isLeap(end_year);
 806 |       let end_mouths = this.generationMonths(
 807 |         end_year,
 808 |         1,
 809 |         end_mouth + 1,
 810 |         endIsLeap,
 811 |         true,
 812 |         true
 813 |       );
 814 |       return start_mouths.concat(end_mouths);
 815 |     },
 816 |     /**
 817 |      * 月-日模式gantt标题
 818 |      * start_year: 起始年
 819 |      * start_mouth：起始月
 820 |      * end_year：结束年
 821 |      * end_mouth：结束月
 822 |      */
 823 |     mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth) {
 824 |       // 处理年份
 825 |       let year_diff = end_year - start_year;
 826 |       // 只存在同年或前后年的情况
 827 |       if (year_diff === 0) {
 828 |         // 年间隔为同一年
 829 |         let isLeap = this.isLeap(start_year); // 是否闰年
 830 |         let mouths = this.generationMonths(
 831 |           start_year,
 832 |           start_mouth,
 833 |           end_mouth + 1,
 834 |           isLeap
 835 |         ); // 处理月份
 836 |         return mouths;
 837 |       }
 838 |       // 处理开始月份
 839 |       let startIsLeap = this.isLeap(start_year);
 840 |       let start_mouths = this.generationMonths(
 841 |         start_year,
 842 |         start_mouth,
 843 |         13,
 844 |         startIsLeap
 845 |       );
 846 |       // 处理结束月份
 847 |       let endIsLeap = this.isLeap(end_year);
 848 |       let end_mouths = this.generationMonths(
 849 |         end_year,
 850 |         1,
 851 |         end_mouth + 1,
 852 |         endIsLeap
 853 |       );
 854 |       return start_mouths.concat(end_mouths);
 855 |     },
 856 |     /**
 857 |      * 生成月份函数
 858 |      * year: Number 当前年份
 859 |      * start_num: Number 开始月分
 860 |      * end_num：Number 结束月份
 861 |      * isLeap: Boolean 是否闰年
 862 |      * insert_days: Boolean 是否需要插入 日
 863 |      * week: 是否以周的间隔
 864 |      */
 865 |     generationMonths(
 866 |       year,
 867 |       start_num = 1,
 868 |       end_num = 13,
 869 |       isLeap = false,
 870 |       insert_days = true,
 871 |       week = false
 872 |     ) {
 873 |       let months = [];
 874 |       if (insert_days) {
 875 |         // 无需 日 的模式
 876 |         for (let i = start_num; i < end_num; i++) {
 877 |           // 需要 日 的模式
 878 |           let days = this.generationDays(year, i, isLeap, week);
 879 |           months.push({
 880 |             name: `${i}月`,
 881 |             date: i,
 882 |             full_date: `${year}-${i}`,
 883 |             children: days,
 884 |             id: uuidv4()
 885 |           });
 886 |         }
 887 |         return months;
 888 |       }
 889 |       for (let i = start_num; i < end_num; i++) {
 890 |         // 需要 日 的模式
 891 |         months.push({
 892 |           name: `${i}月`,
 893 |           date: i,
 894 |           full_date: `${year}-${i}`,
 895 |           id: uuidv4()
 896 |         });
 897 |       }
 898 |       return months;
 899 |     },
 900 |     /**
 901 |      * 生成日期函数
 902 |      * year: Number 当前年份
 903 |      * month: Number 当前月份
 904 |      * isLeap: Boolean 是否闰年
 905 |      * week: Boolean 是否间隔一周
 906 |      */
 907 |     generationDays(year, month, isLeap = false, week = false) {
 908 |       let big_month = [1, 3, 5, 7, 8, 10, 12].includes(month);
 909 |       let small_month = [4, 6, 9, 11].includes(month);
 910 |       let dates_num = big_month ? 32 : small_month ? 31 : isLeap ? 30 : 29;
 911 |       let days = [];
 912 |       if (week) {
 913 |         let _day = 1; // 从周日开始
 914 |         let _start_day_inweek = this.timeInWeek(`${year}-${month}-1`);
 915 |         if (_start_day_inweek !== 0) {
 916 |           _day = 8 - _start_day_inweek;
 917 |         }
 918 |         for (let i = _day; i < dates_num; i += 7) {
 919 |           days.push({
 920 |             date: i,
 921 |             name: `${i}日`,
 922 |             id: uuidv4(),
 923 |             full_date: `${year}-${month}-${i}`
 924 |           });
 925 |         }
 926 |       } else {
 927 |         for (let i = 1; i < dates_num; i++) {
 928 |           days.push({
 929 |             date: i,
 930 |             name: `${i}日`,
 931 |             id: uuidv4(),
 932 |             full_date: `${year}-${month}-${i}`
 933 |           });
 934 |         }
 935 |       }
 936 |       return days;
 937 |     },
 938 |     /**
 939 |      * 是否闰年函数
 940 |      * year: Number 当前年份
 941 |      */
 942 |     isLeap(year) {
 943 |       return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
 944 |     },
 945 |     /**
 946 |      * 当前日期gantt状态
 947 |      * row: object 当前行信息
 948 |      * date: string 当前格子日期
 949 |      * unit: string 时间单位，以天、月、年计算
 950 |      */
 951 |     dayGanttType(row, date, unit = "days") {
 952 |       let start_date = row[this.selfProps.startDate];
 953 |       let end_date = row[this.selfProps.endDate];
 954 |       let between = dayjs(date).isBetween(start_date, end_date, unit);
 955 |       if (between) {
 956 |         return "wl-item-on";
 957 |       }
 958 |       let start = dayjs(start_date).isSame(date, unit);
 959 |       let end = dayjs(end_date).isSame(date, unit);
 960 |       if (start && end) {
 961 |         return "wl-item-on wl-item-full";
 962 |       }
 963 |       if (start) {
 964 |         return "wl-item-on wl-item-start";
 965 |       }
 966 |       if (end) {
 967 |         return "wl-item-on wl-item-end";
 968 |       }
 969 |     },
 970 |     /**
 971 |      * 实际日期gantt状态
 972 |      * row: object 当前行信息
 973 |      * date: string 当前格子日期
 974 |      * unit: string 时间单位，以天、月、年计算
 975 |      */
 976 |     realDayGanttType(row, date, unit = "days") {
 977 |       let start_date = row[this.selfProps.realStartDate];
 978 |       let end_date = row[this.selfProps.realEndDate];
 979 |       let between = dayjs(date).isBetween(start_date, end_date, unit);
 980 |       if (between) {
 981 |         return "wl-real-on";
 982 |       }
 983 |       let start = dayjs(start_date).isSame(date, unit);
 984 |       let end = dayjs(end_date).isSame(date, unit);
 985 |       if (start && end) {
 986 |         return "wl-real-on wl-real-full";
 987 |       }
 988 |       if (start) {
 989 |         return "wl-real-on wl-real-start";
 990 |       }
 991 |       if (end) {
 992 |         return "wl-real-on wl-real-end";
 993 |       }
 994 |     },
 995 |     // 以下是时间计算类函数 ------------------------------------------------------时间计算---------------------------------------
 996 |     /**
 997 |      * 计算时差
 998 |      * startDate：开始时间
 999 |      * endDate：结束时间
1000 |      * unit：单位 days、months、yesrs
1001 |      */
1002 |     timeDiffTime(startDate, endDate, unit = "days") {
1003 |       return dayjs(endDate).diff(startDate, unit);
1004 |     },
1005 |     /**
1006 |      * 比较时间，是否之前
1007 |      * startDate：开始时间
1008 |      * endDate：结束时间
1009 |      * unit：单位 days、months、yesrs
1010 |      */
1011 |     timeIsBefore(startDate, endDate, unit = "days") {
1012 |       return dayjs(startDate).isBefore(endDate, unit);
1013 |     },
1014 |     /**
1015 |      * 时间加计算函数
1016 |      * date：原时间
1017 |      * num：需要增加的时间数量
1018 |      * nuit：增加时间的单位 day year
1019 |      */
1020 |     timeAdd(date, num = 1, nuit = "day", format = "YYYY-MM-DD") {
1021 |       return dayjs(date)
1022 |         .add(num, nuit)
1023 |         .format(format);
1024 |     },
1025 |     /**
1026 |      * 时间格式化函数
1027 |      * date 需要格式化的数据
1028 |      * format 格式化的格式
1029 |      */
1030 |     timeFormat(date, format = "YYYY-MM-DD") {
1031 |       return date ? dayjs(date).format(format) : this.emptyCellText;
1032 |     },
1033 |     /**
1034 |      * 查询时间是周几
1035 |      */
1036 |     timeInWeek(date) {
1037 |       return dayjs(date).day();
1038 |     },
1039 |     // 以下为输出数据函数 --------------------------------------------------------------输出数据------------------------------------
1040 |     // 任务时间更改
1041 |     emitTimeChange(item) {
1042 |       this.$emit("timeChange", item);
1043 |       this.$nextTick(() => {
1044 |         this.$set(item, "_oldStartDate", item[this.selfProps.startDate]);
1045 |         this.$set(item, "_oldEndDate", item[this.selfProps.endDate]);
1046 |       });
1047 |     },
1048 |     /**
1049 |      * 前置任务更改
1050 |      * item: Object 发生更改的行数据
1051 |      * oldval: [String, Array] 修改前数据
1052 |      * handle: Boolean true为操作选择框修改 false为源数据不符合规范的修正更改
1053 |      */
1054 |     emitPreChange(item, oldval, handle = false) {
1055 |       this.$emit("preChange", item, oldval, handle);
1056 |     },
1057 |     // 处理外部数据 ---------------------------------------------------------------原始数据处理-------------------------------------
1058 |     handleData(data, parent = null, level = 0) {
1059 |       level++;
1060 |       data.forEach(i => {
1061 |         this.$set(i, "_parent", parent); // 添加父级字段
1062 |         this.$set(i, "_level", level); // 添加层级字段
1063 |         if (!i._oldStartDate) {
1064 |           this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
1065 |         }
1066 |         if (!i._oldEndDate) {
1067 |           this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
1068 |         }
1069 |         // 当结束时间早于开始时间时，自动处理结束时间为开始时间延后一天
1070 |         let _end_early_start = this.timeIsBefore(
1071 |           i[this.selfProps.endDate],
1072 |           i[this.selfProps.startDate]
1073 |         );
1074 |         if (_end_early_start) {
1075 |           this.$set(i, this.selfProps.endDate, i[this.selfProps.startDate]);
1076 |           this.$set(i, "_cycle", 1); // 添加工期字段
1077 |           this.emitTimeChange(i); // 将发生时间更新的数据输出
1078 |         } else {
1079 |           let _time_diff = this.timeDiffTime(
1080 |             i[this.selfProps.startDate],
1081 |             i[this.selfProps.endDate]
1082 |           );
1083 |           this.$set(i, "_cycle", _time_diff + 1); // 添加工期字段
1084 |         } // 添加工期字段
1085 |         // 添加自增id字段及树链组成的parents字段
1086 |         this.recordIdentityIdAndParents(i);
1087 |         // 处理前置任务
1088 |         // this.handlePreTask(i);
1089 |         // 如果当前节点的开始时间早于父节点的开始时间，则将开始时间与父节点相同
1090 |         this.parentStartDateToChild(i);
1091 |         // 校验结束时间是否晚于子节点，如不则将节点结束时间改为最晚子节点
1092 |         this.childEndDateToParent(i);
1093 |         if (Array.isArray(i[this.selfProps.children])) {
1094 |           this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
1095 |           let _all_children = flattenDeep(
1096 |             i[this.selfProps.children],
1097 |             this.selfProps.children
1098 |           );
1099 |           this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
1100 |           this.handleData(i[this.selfProps.children], i, level);
1101 |         } else {
1102 |           this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
1103 |           this.$set(i, "_all_children", []); // 添加全部子节点字段
1104 |         }
1105 |       });
1106 |     },
1107 |     // 取父节点开始时间给早于父节点开始时间的子节点
1108 |     parentStartDateToChild(item) {
1109 |       if (!item._parent) return;
1110 |       // 如果子节点时间早于父节点，则将子节点开始时间后移至父节点开始时间,并将结束时间平移【即工期不变】
1111 |       let _child_early_parent = this.timeIsBefore(
1112 |         item[this.selfProps.startDate],
1113 |         item._parent[this.selfProps.startDate]
1114 |       );
1115 |       if (_child_early_parent) {
1116 |         // 修正子节点开始时间
1117 |         this.$set(
1118 |           item,
1119 |           this.selfProps.startDate,
1120 |           item._parent[this.selfProps.startDate]
1121 |         );
1122 |         // 修正子节点结束时间
1123 |         let _to_endDate = this.timeAdd(
1124 |           item[this.selfProps.startDate],
1125 |           item._cycle
1126 |         );
1127 |         this.$set(item, this.selfProps.endDate, _to_endDate);
1128 |         this.emitTimeChange(item); // 将发生时间更新的数据输出
1129 |       }
1130 |     },
1131 |     // 取数组结束时间最大值，如果最大值比父级结束时间大，更新父级结束时间
1132 |     childEndDateToParent(item) {
1133 |       if (!Array.isArray(item[this.selfProps.children])) return;
1134 |       let _child_max = getMax(
1135 |         item[this.selfProps.children],
1136 |         this.selfProps.endDate,
1137 |         true
1138 |       ); // 取子节点中最晚的结束时间
1139 |       let _parent_end = dayjs(item[this.selfProps.endDate]).valueOf();
1140 |       if (_child_max > _parent_end) {
1141 |         // 如果子节点结束时间比父节点晚，则将父节点结束时间退后
1142 |         this.$set(item, this.selfProps.endDate, this.timeFormat(_child_max));
1143 |         this.emitTimeChange(item); // 将发生时间更新的数据输出
1144 |       }
1145 |     },
1146 |     // 处理前置任务节点    /// ---- 此使前置任务校验处理还没开始，因此出错，前置处理后手动调用vue视图更新试试
1147 |     handlePreTask(item) {
1148 |       // 统一在一维化数据中处理前置任务
1149 |       let _pre_target = this.self_dependent_store.find(
1150 |         i => i.form[this.selfProps.id] === item[this.selfProps.id]
1151 |       );
1152 |       if (!_pre_target) return;
1153 |       let _pre_end_date = this.preMultiple
1154 |         ? getMax(_pre_target.to, this.selfProps.endDate, true) // 取前置点中最晚的结束时间
1155 |         : _pre_target.to[this.selfProps.endDate];
1156 |       /* 在数据循环中处理前置
1157 |       let pres = item[this.selfProps.pre];
1158 |       if(!pres) return;
1159 |       let _pre_target = null, _pre_end_date = null;
1160 |       if(this.preMultiple){
1161 |         if(!Array.isArray(pres) || pres.length ===0) return;
1162 |         _pre_target = this.self_data_list.filter(i => pres.includes(i[this.selfProps.id]));
1163 |         _pre_end_date = getMax(_pre_target, this.selfProps.endDate, true);
1164 |       }else{
1165 |         _pre_target = this.self_data_list.find(i => i[this.selfProps.id] === pres);
1166 |         if(!_pre_target) return;
1167 |         _pre_end_date = _pre_target[this.selfProps.endDate]
1168 |       } */
1169 |       // 查看是否需要根据前置时间，如果不符合规则，更新后置时间
1170 |       let _start_early_prvend = this.timeIsBefore(
1171 |         item[this.selfProps.startDate],
1172 |         _pre_end_date
1173 |       );
1174 |       if (_start_early_prvend) {
1175 |         let _cycle = item._cycle - 1;
1176 |         let _to_startDate = this.timeAdd(_pre_end_date, 1);
1177 |         let _to_endDate = this.timeAdd(_to_startDate, _cycle);
1178 |         this.$set(item, this.selfProps.startDate, _to_startDate);
1179 |         this.$set(item, this.selfProps.endDate, _to_endDate);
1180 |       }
1181 |     },
1182 |     /**
1183 |      * 检查前置任务合法性
1184 |      * ！！已废弃：改为从一维数据列收集form、to并校验，不再在递归中检查 -> handleDependentStore
1185 |      */
1186 |     checkPreTaskValidity(item) {
1187 |       // 没有前置任务退出
1188 |       if (!item[this.selfProps.pre]) return false;
1189 |       // 多前置任务模式
1190 |       if (this.preMultiple) {
1191 |         let _pres = item[this.selfProps.pre];
1192 |         // 不是数组退出
1193 |         if (!Array.isArray(_pres)) {
1194 |           this.emitPreChange(item, item[this.selfProps.pre]);
1195 |           this.$set(item, this.selfProps.pre, []);
1196 |           return false;
1197 |         }
1198 |         // 数组为空退出
1199 |         if (_pres.length === 0) return false;
1200 |         // 前置任务有自己时，剔除自己
1201 |         let _net_self_pres = _pres.filter(i => i !== item[this.selfProps.id]);
1202 |         if (_net_self_pres.length !== _pres.length) {
1203 |           this.emitPreChange(item, item[this.selfProps.pre]);
1204 |           this.$set(item, this.selfProps.pre, _net_self_pres);
1205 |         }
1206 |         // 剔除前置任务找不到目标数据的元素
1207 |         let _pre_exist = _net_self_pres.filter(i => this.targetInAllData(i));
1208 |         if (_pre_exist.length !== _net_self_pres.length) {
1209 |           this.emitPreChange(item, item[this.selfProps.pre]);
1210 |           this.$set(item, this.selfProps.pre, _pre_exist);
1211 |         }
1212 |         let _no_par_chi = []; // 声明非父、祖、子、孙节点的盒子
1213 |         for (let i of _pre_exist) {
1214 |           let _pre_target = this.self_data_list.find(
1215 |             t => t[this.selfProps.id] === i
1216 |           );
1217 |           if (!_pre_target) continue;
1218 |           let _pre_par_chi = this.targetInParentsOrChildren(item, _pre_target);
1219 |           _pre_par_chi || _no_par_chi.push(i);
1220 |         }
1221 |         // 前置任务是自己的父祖或子孙节点, 剔除此前置
1222 |         if (_no_par_chi.length !== _pre_exist.length) {
1223 |           this.emitPreChange(item, item[this.selfProps.pre]);
1224 |           this.$set(item, this.selfProps.pre, _no_par_chi);
1225 |         }
1226 |         // 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1227 |         this.targetLinkLoopback(item);
1228 |         return true;
1229 |       }
1230 |       // 单前置任务模式
1231 |       if (item[this.selfProps.pre] === item[this.selfProps.id]) {
1232 |         this.$set(item, this.selfProps.pre, null);
1233 |         return false;
1234 |       } // 前置任务是自己退出
1235 |       // 找到前置目标节点
1236 |       let _pre_target = this.self_data_list.find(
1237 |         i => i[this.selfProps.id] == item[this.selfProps.pre]
1238 |       );
1239 |       // 没找到前置任务节点数据退出
1240 |       if (!_pre_target) {
1241 |         this.$set(item, this.selfProps.pre, null);
1242 |         return false;
1243 |       }
1244 |       // 前置任务是自己的父祖或子孙节点退出
1245 |       let is_pre_standard = this.targetInParentsOrChildren(item, _pre_target);
1246 |       if (is_pre_standard) {
1247 |         this.$set(item, this.selfProps.pre, null);
1248 |         return false;
1249 |       }
1250 |       // 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1251 |       this.targetLinkLoopback(item);
1252 |       return true;
1253 |     },
1254 |     // 处理数据生成自增id和树链parents
1255 |     recordIdentityIdAndParents(item) {
1256 |       // if (!this.recordParents) return;
1257 |       if (this.treatIdAsIdentityId) {
1258 |         let _parents = item._parent
1259 |           ? item._parent._parents + "," + item._parent[this.selfProps.id]
1260 |           : "";
1261 |         this.$set(item, "_parents", _parents);
1262 |         this.$set(item, "_identityId", item[this.selfProps.id]);
1263 |         return;
1264 |       }
1265 |       // 添加自增id
1266 |       this.$set(item, "_identityId", this.self_id);
1267 |       this.self_id++;
1268 |       // 添加parents字段
1269 |       let _parents = item._parent
1270 |         ? item._parent._parents + "," + item._parent._identityId
1271 |         : "";
1272 |       this.$set(item, "_parents", _parents);
1273 |     },
1274 |     /**
1275 |      * 查询目标是否在父级链或者全部子集中
1276 |      * item 当前节点
1277 |      * pre 前置节点
1278 |      */
1279 |     targetInParentsOrChildren(item, pre) {
1280 |       let _parents = item._parents.split(",");
1281 |       let _children = item._all_children.map(i => i._identityId);
1282 |       return _children.concat(_parents).some(i => i == pre._identityId);
1283 |     },
1284 |     // 查询目标节点是否在数据中存在,并返回数据
1285 |     targetInAllData(target_id) {
1286 |       return this.self_data_list.find(i => i[this.selfProps.id] === target_id);
1287 |     },
1288 |     /**
1289 |      * 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1290 |      * item: Object 当前节点数据
1291 |      * pre_tesk: Array 前置链上所有id
1292 |      * ！！已废弃：下方尝试改成form to结构收集起来处理，不再循环中反复循环处理 -> terseTargetLinkLoopback
1293 |      */
1294 |     targetLinkLoopback(item, pre_tesk = []) {
1295 |       pre_tesk.push(item[this.selfProps.id]);
1296 |       let _pres = item[this.selfProps.pre];
1297 |       if (this.preMultiple) {
1298 |         let _legal_pres = _pres.filter(i => !pre_tesk.includes(i));
1299 |         if (_legal_pres.length !== _pres.length) {
1300 |           this.emitPreChange(item, item[this.selfProps.pre]);
1301 |           this.$set(item, this.selfProps.pre, _no_par_chi);
1302 |         }
1303 |         _legal_pres.forEach(i => {
1304 |           let _pre_target = this.self_data_list.find(
1305 |             t => t[this.selfProps.id] === i
1306 |           );
1307 |           if (
1308 |             _pre_target &&
1309 |             Array.isArray(_pre_target[this.selfProps.pre]) &&
1310 |             _pre_target[this.selfProps.pre].length > 0
1311 |           ) {
1312 |             this.targetLinkLoopback(_pre_target, pre_tesk);
1313 |           }
1314 |         });
1315 |       } else {
1316 |         if (pre_tesk.includes(_pres)) {
1317 |           this.emitPreChange(item, item[this.selfProps.pre]);
1318 |           this.$set(item, this.selfProps.pre, _no_par_chi);
1319 |         }
1320 |         let _pre_target = this.self_data_list.find(
1321 |           t => t[this.selfProps.id] === i
1322 |         );
1323 |         if (_pre_target) {
1324 |           this.targetLinkLoopback(_pre_target, pre_tesk);
1325 |         }
1326 |       }
1327 |     },
1328 |     /**
1329 |      * 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1330 |      * item: Object 当前节点数据
1331 |      * flow_pre_tesk: Array 前置链上所有id
1332 |      */
1333 |     terseTargetLinkLoopback(item, flow_pre_tesk = []) {
1334 |       flow_pre_tesk.push(item.form[this.selfProps.id]);
1335 |       if (this.preMultiple) {
1336 |         let _legal_pre = [], // 收集合法数据
1337 |           _next_form = []; // 收集所有前置的前置
1338 |         for (let i of item.to) {
1339 |           let _to_id = i[this.selfProps.id];
1340 |           if (flow_pre_tesk.includes(_to_id)) continue;
1341 |           _legal_pre.push(_to_id);
1342 |           flow_pre_tesk.push(_to_id);
1343 |           let _store_next_form = this.self_dependent_store.filter(
1344 |             t => t.form[this.selfProps.id] === _to_id
1345 |           );
1346 |           _next_form = _next_form.concat(_store_next_form);
1347 |         }
1348 |         // 剔除不合法前置
1349 |         if (_legal_pre.length !== item.to.length) {
1350 |           this.emitPreChange(item.form, item.form[this.selfProps.pre]);
1351 |           this.$set(item.form, this.selfProps.pre, _legal_pre);
1352 |         }
1353 |         // 向前置的前置递归
1354 |         _next_form.forEach(t => {
1355 |           this.terseTargetLinkLoopback(t, flow_pre_tesk);
1356 |         });
1357 |       } else {
1358 |         let _to_id = item.to[this.selfProps.id];
1359 |         if (flow_pre_tesk.includes(_to_id)) {
1360 |           this.emitPreChange(item.form, item.form[this.selfProps.pre]);
1361 |           this.$set(item.form, this.selfProps.pre, null);
1362 |           return;
1363 |         }
1364 |         let _next_form = this.self_dependent_store.find(
1365 |           t => t.form[this.selfProps.id] === _to_id
1366 |         );
1367 |         if (!_next_form) return;
1368 |         this.terseTargetLinkLoopback(_next_form, flow_pre_tesk);
1369 |       }
1370 |     },
1371 |     // 简洁处理数据
1372 |     terseHandleData(data, parent = null, level = 0) {
1373 |       level++;
1374 |       data.forEach(i => {
1375 |         this.$set(i, "_parent", parent); // 添加父级字段
1376 |         this.$set(i, "_level", level); // 添加层级字段
1377 |         let _time_diff = this.timeDiffTime(
1378 |           i[this.selfProps.startDate],
1379 |           i[this.selfProps.endDate]
1380 |         );
1381 |         i._cycle = _time_diff + 1;
1382 |         if (!i._oldStartDate) {
1383 |           // 添加开始时间字段
1384 |           this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
1385 |         }
1386 |         if (!i._oldEndDate) {
1387 |           // 添加结束字段时间
1388 |           this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
1389 |         }
1390 |         // 添加自增id字段及树链组成的parents字段
1391 |         this.recordIdentityIdAndParents(i);
1392 |         if (Array.isArray(i[this.selfProps.children])) {
1393 |           this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
1394 |           let _all_children = flattenDeep(
1395 |             i[this.selfProps.children],
1396 |             this.selfProps.children
1397 |           );
1398 |           this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
1399 |           this.terseHandleData(i[this.selfProps.children], i, level);
1400 |         } else {
1401 |           this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
1402 |         }
1403 |         // 处理前置任务
1404 |         // this.handlePreTask(i);
1405 |       });
1406 |     },
1407 |     // 生成前置依赖库, 校验前置合法性并剔除不合法数据
1408 |     handleDependentStore() {
1409 |       this.self_dependent_store = [];
1410 |       // 多选前置模式
1411 |       if (this.preMultiple) {
1412 |         for (let i of this.self_data_list) {
1413 |           let _pres = i[this.selfProps.pre];
1414 |           if (!_pres) continue;
1415 |           // 不是数组退出
1416 |           if (!Array.isArray(_pres)) {
1417 |             this.emitPreChange(i, i[this.selfProps.pre]);
1418 |             this.$set(i, this.selfProps.pre, []);
1419 |             continue;
1420 |           }
1421 |           // 数组为空退出
1422 |           if (_pres.length === 0) continue;
1423 |           // 查询不到数据的不收集，是父、祖、子、孙节点的不收集
1424 |           let _pre_exist_node = [],
1425 |             _pre_exist_id = [];
1426 |           for (let t of _pres) {
1427 |             let target_node = this.targetInAllData(t);
1428 |             if (!target_node) continue; // 查询不到数据的不收集
1429 |             let in_per_chi = this.targetInParentsOrChildren(i, target_node);
1430 |             if (in_per_chi) continue; // 是父、祖、子、孙节点的不收集
1431 |             _pre_exist_node.push(target_node);
1432 |             _pre_exist_id.push(target_node[this.selfProps.id]);
1433 |           }
1434 |           if (_pre_exist_node.length !== _pres.length) {
1435 |             this.emitPreChange(i, i[this.selfProps.pre]);
1436 |             this.$set(i, this.selfProps.pre, _pre_exist_id);
1437 |           }
1438 |           this.self_dependent_store.push({
1439 |             form: i,
1440 |             to: _pre_exist_node
1441 |           });
1442 |         }
1443 |       } else {
1444 |         // 单选前置模式
1445 |         for (let i of this.self_data_list) {
1446 |           if (!i[this.selfProps.pre]) continue;
1447 |           let _pre_target = this.targetInAllData(i[this.selfProps.pre]);
1448 |           // 处理前置任务找不到的情况
1449 |           if (!_pre_target) {
1450 |             this.emitPreChange(i, i[this.selfProps.pre]);
1451 |             this.$set(i, this.selfProps.pre, null);
1452 |             continue;
1453 |           }
1454 |           // 处理前置任务是父祖子孙节点的情况
1455 |           let in_per_chi = this.targetInParentsOrChildren(i, _pre_target);
1456 |           if (in_per_chi) {
1457 |             this.emitPreChange(i, i[this.selfProps.pre]);
1458 |             this.$set(i, this.selfProps.pre, null);
1459 |             continue;
1460 |           }
1461 |           this.self_dependent_store.push({
1462 |             form: i,
1463 |             to: _pre_target
1464 |           });
1465 |         }
1466 |       }
1467 |       // 处理合格前置任务
1468 |       this.self_dependent_store.forEach(i => {
1469 |         this.terseTargetLinkLoopback(i);
1470 |       });
1471 |       // 处理前置依赖
1472 |       this.self_data_list.forEach(i => {
1473 |         this.handlePreTask(i);
1474 |       });
1475 |       // 暂时强制更新视图
1476 |       if (this.update) {
1477 |         this.update = false;
1478 |         this.selfData.sort();
1479 |       }
1480 |     },
1481 |     // el-table事件----------------------------------------------以下为原el-table事件输出------------------------------------------------
1482 |     handleSelectionChange(val) {
1483 |       this.$emit("selection-change", val);
1484 |       this.multipleSelection = val;
1485 |     }, // 当选择项发生变化时会触发该事件
1486 |     handleCurrentChange(val, oldVal) {
1487 |       this.$emit("current-change", val, oldVal);
1488 |       this.currentRow = val;
1489 |     }, // 当表格的当前行发生变化的时候会触发该事件
1490 |     handleSelectAll(val) {
1491 |       this.$emit("select-all", val);
1492 |     }, // 当用户手动勾选全选 Checkbox 时触发的事件
1493 |     handleSelect(selection, row) {
1494 |       this.$emit("select", selection, row);
1495 |     }, // 当用户手动勾选全选 Checkbox 时触发的事件
1496 |     handleMouseEnter(row, column, cell, event) {
1497 |       this.$emit("cell-mouse-enter", row, column, cell, event);
1498 |     }, // 当单元格 hover 进入时会触发该事件
1499 |     handleMouseLeave(row, column, cell, event) {
1500 |       this.$emit("cell-mouse-leave", row, column, cell, event);
1501 |     }, // 当单元格 hover 退出时会触发该事件
1502 |     handleCellClick(row, column, cell, event) {
1503 |       this.$emit("cell-click", row, column, cell, event);
1504 |     }, // 当某个单元格被点击时会触发该事件
1505 |     handleCellDbClick(row, column, cell, event) {
1506 |       this.$emit("cell-dblclick", row, column, cell, event);
1507 |     }, // 当某个单元格被双击击时会触发该事件
1508 |     handleRowClick(row, column, event) {
1509 |       this.$emit("row-click", row, column, event);
1510 |     }, // 当某一行被点击时会触发该事件
1511 |     handleRowContextMenu(row, column, event) {
1512 |       this.$emit("row-contextmenu", row, column, event);
1513 |     }, // 当某一行被鼠标右键点击时会触发该事件
1514 |     handleRowDbClick(row, column, event) {
1515 |       this.preCellEdit(row);
1516 |       this.task_edit_form = {
1517 |         name: row[this.selfProps.name],
1518 |         start_time: row[this.selfProps.startDate],
1519 |         end_time: row[this.selfProps.endDate],
1520 |         real_start_time: row[this.selfProps.realStartDate],
1521 |         real_end_time: row[this.selfProps.realEndDate],
1522 |         pre_task: row[this.selfProps.pre]
1523 |       }
1524 |       this.task_edit_show = true;
1525 |       this.edit_row = row;
1526 |       this.$emit("row-dblclick", row, column, event);
1527 |     }, // 当某一行被双击时会触发该事件
1528 |     handleHeaderClick(column, event) {
1529 |       this.$emit("header-click", column, event);
1530 |     }, // 当某一列的表头被点击时会触发该事件
1531 |     handleHeaderContextMenu(column, event) {
1532 |       this.$emit("header-contextmenu", column, event);
1533 |     }, // 当某一列的表头被鼠标右键点击时触发该事件
1534 |     handleSortChange(e) {
1535 |       this.$emit("sort-change", e);
1536 |     }, // 当表格的排序条件发生变化的时候会触发该事件
1537 |     handleFilterChange(filters) {
1538 |       this.$emit("filter-change", filters);
1539 |     }, // 当表格的筛选条件发生变化的时候会触发该事件
1540 |     handleExpandChange(row, expanded) {
1541 |       this.$emit("expand-change", row, expanded);
1542 |     } // 当表格的筛选条件发生变化的时候会触发该事件
1543 |   },
1544 |   watch: {
1545 |     dateType(val) {
1546 |       this.self_date_type = val;
1547 |     },
1548 |     startDate(val) {
1549 |       this.self_start_date = val;
1550 |     },
1551 |     endDate(val) {
1552 |       this.self_end_date = val;
1553 |     }
1554 |   },
1555 |   created() {
1556 |     this.self_date_type = this.dateType;
1557 |     this.self_start_date = this.startDate;
1558 |     this.self_end_date = this.endDate;
1559 |   }
1560 | };
1561 | </script>
1562 | 
1563 | <!-- Add "scoped" attribute to limit CSS to this component only -->
1564 | <style lang="scss">
1565 | $gantt_item: 16px;
1566 | $gantt_item_half: 8px;
1567 | 
1568 | .wl-gantt {
1569 |   .wl-gantt-header > th {
1570 |     text-align: center;
1571 |   }
1572 | 
1573 |   .h-full {
1574 |     height: 100%;
1575 |   }
1576 | 
1577 |   .wl-gantt-item {
1578 |     position: relative;
1579 |     transition: all 0.3s;
1580 |     > .cell {
1581 |       padding: 0;
1582 |     }
1583 |   }
1584 | 
1585 |   .u-full, .u-full.el-input {
1586 |     width: 100%;
1587 |   }
1588 | 
1589 |   // 计划时间gantt开始
1590 |   .wl-item-on {
1591 |     position: absolute;
1592 |     top: 50%;
1593 |     left: 0;
1594 |     right: -1px;
1595 |     margin-top: -$gantt_item_half;
1596 |     height: $gantt_item;
1597 |     background: #409eff;
1598 |     transition: all 0.4s;
1599 |   }
1600 | 
1601 |   .wl-item-start {
1602 |     left: 50%;
1603 |     &:after {
1604 |       position: absolute;
1605 |       top: $gantt_item;
1606 |       left: 0;
1607 |       z-index: 1;
1608 |       content: "";
1609 |       width: 0;
1610 |       height: 0;
1611 |       border-color: #409eff transparent transparent;
1612 |       border-width: 6px 6px 6px 0;
1613 |       border-style: solid;
1614 |     }
1615 |   }
1616 | 
1617 |   .wl-item-end {
1618 |     right: 50%;
1619 |     &:after {
1620 |       position: absolute;
1621 |       top: $gantt_item;
1622 |       right: 0;
1623 |       z-index: 1;
1624 |       content: "";
1625 |       width: 0;
1626 |       height: 0;
1627 |       border-color: transparent #409eff;
1628 |       border-width: 0 6px 6px 0;
1629 |       border-style: solid;
1630 |     }
1631 |   }
1632 | 
1633 |   .wl-item-full {
1634 |     left: 0;
1635 |     right: 0;
1636 |     &:before {
1637 |       position: absolute;
1638 |       top: $gantt_item;
1639 |       left: 0;
1640 |       z-index: 1;
1641 |       content: "";
1642 |       width: 0;
1643 |       height: 0;
1644 |       border-color: #409eff transparent transparent;
1645 |       border-width: 6px 6px 6px 0;
1646 |       border-style: solid;
1647 |     }
1648 |     &:after {
1649 |       position: absolute;
1650 |       top: $gantt_item;
1651 |       right: 0;
1652 |       z-index: 1;
1653 |       content: "";
1654 |       width: 0;
1655 |       height: 0;
1656 |       border-color: transparent #409eff;
1657 |       border-width: 0 6px 6px 0;
1658 |       border-style: solid;
1659 |     }
1660 |   }
1661 |   // 计划时间gantt结束
1662 | 
1663 |   // 实际时间gantt开始
1664 |   .wl-real-on {
1665 |     position: absolute;
1666 |     top: 70%;
1667 |     left: 0;
1668 |     right: -1px;
1669 |     z-index: 1;
1670 |     margin-top: -$gantt_item_half;
1671 |     height: $gantt_item;
1672 |     background: #faa792; //rgba(250, 167, 146, .6);
1673 |     transition: all 0.4s;
1674 |   }
1675 |   .wl-real-start {
1676 |     left: 50%;
1677 |     &:after {
1678 |       position: absolute;
1679 |       top: $gantt_item;
1680 |       left: 0;
1681 |       z-index: 2;
1682 |       content: "";
1683 |       width: 0;
1684 |       height: 0;
1685 |       border-color: #faa792 transparent transparent;
1686 |       border-width: 6px 6px 6px 0;
1687 |       border-style: solid;
1688 |     }
1689 |   }
1690 | 
1691 |   .wl-real-end {
1692 |     right: 50%;
1693 |     &:after {
1694 |       position: absolute;
1695 |       top: $gantt_item;
1696 |       right: 0;
1697 |       z-index: 2;
1698 |       content: "";
1699 |       width: 0;
1700 |       height: 0;
1701 |       border-color: transparent #faa792;
1702 |       border-width: 0 6px 6px 0;
1703 |       border-style: solid;
1704 |     }
1705 |   }
1706 | 
1707 |   .wl-real-full {
1708 |     left: 0;
1709 |     right: 0;
1710 |     &:before {
1711 |       position: absolute;
1712 |       top: $gantt_item;
1713 |       left: 0;
1714 |       z-index: 2;
1715 |       content: "";
1716 |       width: 0;
1717 |       height: 0;
1718 |       border-color: #faa792 transparent transparent;
1719 |       border-width: 6px 6px 6px 0;
1720 |       border-style: solid;
1721 |     }
1722 |     &:after {
1723 |       position: absolute;
1724 |       top: $gantt_item;
1725 |       right: 0;
1726 |       z-index: 2;
1727 |       content: "";
1728 |       width: 0;
1729 |       height: 0;
1730 |       border-color: transparent #faa792;
1731 |       border-width: 0 6px 6px 0;
1732 |       border-style: solid;
1733 |     }
1734 |   }
1735 |   // 实际时间gantt结束
1736 | 
1737 |     // 任务编辑表单区
1738 |   .wl-gantt-dialog{
1739 |     .el-dialog__body{
1740 |       padding: 0 20px;
1741 |     }
1742 |   }
1743 | }
1744 | 
1745 | .year-and-month {
1746 |   .wl-item-start {
1747 |     left: 5%;
1748 |     &:after {
1749 |       position: absolute;
1750 |       top: $gantt_item;
1751 |       left: 0;
1752 |       z-index: 1;
1753 |       content: "";
1754 |       width: 0;
1755 |       height: 0;
1756 |       border-color: #409eff transparent transparent;
1757 |       border-width: 6px 6px 6px 0;
1758 |       border-style: solid;
1759 |     }
1760 |   }
1761 | 
1762 |   .wl-item-end {
1763 |     right: 5%;
1764 |     &:after {
1765 |       position: absolute;
1766 |       top: $gantt_item;
1767 |       right: 0;
1768 |       z-index: 1;
1769 |       content: "";
1770 |       width: 0;
1771 |       height: 0;
1772 |       border-color: transparent #409eff;
1773 |       border-width: 0 6px 6px 0;
1774 |       border-style: solid;
1775 |     }
1776 |   }
1777 | 
1778 |   .wl-item-full {
1779 |     left: 5%;
1780 |     right: 5%;
1781 |     &:before {
1782 |       position: absolute;
1783 |       top: $gantt_item;
1784 |       left: 0;
1785 |       z-index: 1;
1786 |       content: "";
1787 |       width: 0;
1788 |       height: 0;
1789 |       border-color: #409eff transparent transparent;
1790 |       border-width: 6px 6px 6px 0;
1791 |       border-style: solid;
1792 |     }
1793 |     &:after {
1794 |       position: absolute;
1795 |       top: $gantt_item;
1796 |       right: 0;
1797 |       z-index: 1;
1798 |       content: "";
1799 |       width: 0;
1800 |       height: 0;
1801 |       border-color: transparent #409eff;
1802 |       border-width: 0 6px 6px 0;
1803 |       border-style: solid;
1804 |     }
1805 |   }
1806 | }
1807 | </style>
1808 | 


--------------------------------------------------------------------------------
/src/pages/wl-gantt/index.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div class="wl-gantt" id="wl-gantt">
   3 |     <!-- 甘特图区 -->
   4 |     <el-table
   5 |       ref="wl-gantt"
   6 |       class="wl-gantt-table"
   7 |       :fit="fit"
   8 |       :size="size"
   9 |       :load="load"
  10 |       :lazy="lazy"
  11 |       :border="border"
  12 |       :data="selfData"
  13 |       :stripe="stripe"
  14 |       :height="height"
  15 |       :row-key="rowKey"
  16 |       :row-style="rowStyle"
  17 |       :class="dateTypeClass"
  18 |       :cell-style="cellStyle"
  19 |       :max-height="maxHeight"
  20 |       :tree-props="selfProps"
  21 |       :current-row-key="rowKey"
  22 |       :row-class-name="rowClassName"
  23 |       :cell-class-name="cellClassName"
  24 |       :expand-row-keys="expandRowKeys"
  25 |       :header-row-style="headerRowStyle"
  26 |       :header-cell-style="headerCellStyle"
  27 |       :default-expand-all="defaultExpandAll"
  28 |       :header-row-class-name="headerRowClassName"
  29 |       :highlight-current-row="highlightCurrentRow"
  30 |       :header-cell-class-name="headerCellClassName"
  31 |       @header-contextmenu="handleHeaderContextMenu"
  32 |       @selection-change="handleSelectionChange"
  33 |       @row-contextmenu="handleRowContextMenu"
  34 |       @contextmenu.native="handleContextmenu"
  35 |       @current-change="handleCurrentChange"
  36 |       @cell-mouse-enter="handleMouseEnter"
  37 |       @cell-mouse-leave="handleMouseLeave"
  38 |       @expand-change="handleExpandChange"
  39 |       @filter-change="handleFilterChange"
  40 |       @cell-dblclick="handleCellDbClick"
  41 |       @header-click="handleHeaderClick"
  42 |       @row-dblclick="handleRowDbClick"
  43 |       @sort-change="handleSortChange"
  44 |       @cell-click="handleCellClick"
  45 |       @select-all="handleSelectAll"
  46 |       @row-click="handleRowClick"
  47 |       @select="handleSelect"
  48 |     >
  49 |       <template v-if="!ganttOnly">
  50 |         <slot name="prv"></slot>
  51 |         <el-table-column
  52 |           v-if="useCheckColumn"
  53 |           fixed
  54 |           type="selection"
  55 |           width="55"
  56 |           align="center"
  57 |         ></el-table-column>
  58 |         <el-table-column
  59 |           v-if="useIndexColumn"
  60 |           fixed
  61 |           type="index"
  62 |           width="50"
  63 |           label="序号"
  64 |         ></el-table-column>
  65 |         <el-table-column
  66 |           fixed
  67 |           label="名称"
  68 |           min-width="200"
  69 |           class-name="name-col"
  70 |           :prop="selfProps.name"
  71 |           :formatter="nameFormatter"
  72 |           :show-overflow-tooltip="name_show_tooltip"
  73 |         >
  74 |           <template slot-scope="scope">
  75 |             <el-input
  76 |               v-if="self_cell_edit === '_n_m_' + scope.$index"
  77 |               v-model="scope.row[selfProps.name]"
  78 |               @change="nameChange(scope.row)"
  79 |               @blur="nameBlur()"
  80 |               size="medium"
  81 |               class="u-full"
  82 |               ref="wl-name"
  83 |               placeholder="请输入名称"
  84 |             ></el-input>
  85 |             <strong v-else class="h-full">
  86 |               <span @click="cellEdit('_n_m_' + scope.$index, 'wl-name')">
  87 |                 {{
  88 |                   nameFormatter
  89 |                     ? nameFormatter(scope.row, scope.column, scope.treeNode, scope.$index)
  90 |                     : scope.row[selfProps.name]
  91 |                 }}
  92 |               </span>
  93 |               <span class="name-col-edit">
  94 |                 <i
  95 |                   class="el-icon-remove-outline name-col-icon task-remove"
  96 |                   @click="emitTaskRemove(scope.row)"
  97 |                 ></i>
  98 |                 <i
  99 |                   class="el-icon-circle-plus-outline name-col-icon task-add"
 100 |                   @click="emitTaskAdd(scope.row)"
 101 |                 ></i>
 102 |               </span>
 103 |             </strong>
 104 |           </template>
 105 |         </el-table-column>
 106 |         <el-table-column
 107 |           :resizable="false"
 108 |           fixed
 109 |           width="160"
 110 |           align="center"
 111 |           :prop="selfProps.startDate"
 112 |           label="开始日期"
 113 |         >
 114 |           <template slot-scope="scope">
 115 |             <el-date-picker
 116 |               v-if="self_cell_edit === '_s_d_' + scope.$index"
 117 |               v-model="scope.row[selfProps.startDate]"
 118 |               @change="startDateChange(scope.row)"
 119 |               @blur="self_cell_edit = null"
 120 |               type="date"
 121 |               size="medium"
 122 |               class="u-full"
 123 |               :clearable="false"
 124 |               ref="wl-start-date"
 125 |               value-format="yyyy-MM-dd"
 126 |               placeholder="请选择开始日期"
 127 |             ></el-date-picker>
 128 |             <div
 129 |               v-else
 130 |               class="h-full"
 131 |               @click="cellEdit('_s_d_' + scope.$index, 'wl-start-date')"
 132 |             >
 133 |               {{ timeFormat(scope.row[selfProps.startDate]) }}
 134 |             </div>
 135 |           </template>
 136 |         </el-table-column>
 137 |         <el-table-column
 138 |           fixed
 139 |           :resizable="false"
 140 |           width="160"
 141 |           align="center"
 142 |           :prop="selfProps.endDate"
 143 |           label="结束日期"
 144 |         >
 145 |           <template slot-scope="scope">
 146 |             <el-date-picker
 147 |               v-if="self_cell_edit === '_e_d_' + scope.$index"
 148 |               v-model="scope.row[selfProps.endDate]"
 149 |               @change="endDateChange(scope.row)"
 150 |               @blur="self_cell_edit = null"
 151 |               type="date"
 152 |               size="medium"
 153 |               class="u-full"
 154 |               :clearable="false"
 155 |               ref="wl-end-date"
 156 |               value-format="yyyy-MM-dd"
 157 |               placeholder="请选择结束日期"
 158 |             ></el-date-picker>
 159 |             <div
 160 |               v-else
 161 |               class="h-full"
 162 |               @click="cellEdit('_e_d_' + scope.$index, 'wl-end-date')"
 163 |             >
 164 |               {{ timeFormat(scope.row[selfProps.endDate]) }}
 165 |             </div>
 166 |           </template>
 167 |         </el-table-column>
 168 |         <el-table-column
 169 |           v-if="usePreColumn"
 170 |           align="center"
 171 |           min-width="140"
 172 |           label="前置任务"
 173 |           show-overflow-tooltip
 174 |           :prop="selfProps.endDate"
 175 |         >
 176 |           <template slot-scope="scope">
 177 |             <!-- @blur="self_cell_edit = null" @blur="preEditBlur" -->
 178 |             <el-select
 179 |               v-if="self_cell_edit === '_p_t_' + scope.$index"
 180 |               @change="preChange"
 181 |               v-model="scope.row[selfProps.pre]"
 182 |               collapse-tags
 183 |               :multiple="preMultiple"
 184 |               ref="wl-pre-select"
 185 |               placeholder="请选择前置任务"
 186 |             >
 187 |               <el-option
 188 |                 v-for="item in pre_options"
 189 |                 :key="item[selfProps.id]"
 190 |                 :label="item[selfProps.name]"
 191 |                 :value="item[selfProps.id]"
 192 |               ></el-option>
 193 |             </el-select>
 194 |             <div
 195 |               v-else
 196 |               class="h-full"
 197 |               @click="preCellEdit(scope.row, '_p_t_' + scope.$index, 'wl-pre-select')"
 198 |             >
 199 |               {{ preFormat(scope.row) }}
 200 |             </div>
 201 |           </template>
 202 |         </el-table-column>
 203 |         <slot></slot>
 204 |       </template>
 205 |       <!-- year and mouth gantt -->
 206 |       <template v-if="self_date_type === 'yearAndMonth'">
 207 |         <el-table-column
 208 |           :resizable="false"
 209 |           v-for="year in ganttTitleDate"
 210 |           :label="year.name"
 211 |           :key="year.id"
 212 |         >
 213 |           <el-table-column
 214 |             class-name="wl-gantt-item"
 215 |             v-for="month in year.children"
 216 |             :resizable="false"
 217 |             :key="month.id"
 218 |             :label="month.name"
 219 |           >
 220 |             <template slot-scope="scope">
 221 |               <div :class="dayGanttType(scope.row, month.full_date, 'months')"></div>
 222 |               <div
 223 |                 v-if="useRealTime"
 224 |                 :class="realDayGanttType(scope.row, month.full_date, 'months')"
 225 |               ></div>
 226 |             </template>
 227 |           </el-table-column>
 228 |         </el-table-column>
 229 |       </template>
 230 |       <!-- year and week gantt -->
 231 |       <template v-else-if="self_date_type === 'yearAndWeek'">
 232 |         <el-table-column
 233 |           :resizable="false"
 234 |           v-for="i in ganttTitleDate"
 235 |           :label="i.full_date"
 236 |           :key="i.id"
 237 |         >
 238 |           <el-table-column
 239 |             class-name="wl-gantt-item"
 240 |             v-for="t in i.children"
 241 |             :resizable="false"
 242 |             :key="t.id"
 243 |             :label="t.name"
 244 |           >
 245 |             <template slot-scope="scope">
 246 |               <div :class="dayGanttType(scope.row, t.full_date, 'week')"></div>
 247 |               <div
 248 |                 v-if="useRealTime"
 249 |                 :class="realDayGanttType(scope.row, t.full_date, 'week')"
 250 |               ></div>
 251 |             </template>
 252 |           </el-table-column>
 253 |         </el-table-column>
 254 |       </template>
 255 |       <!-- mouth and day gantt -->
 256 |       <template v-else>
 257 |         <el-table-column
 258 |           :resizable="false"
 259 |           v-for="i in ganttTitleDate"
 260 |           :label="i.full_date"
 261 |           :key="i.id"
 262 |         >
 263 |           <el-table-column
 264 |             class-name="wl-gantt-item"
 265 |             v-for="t in i.children"
 266 |             :resizable="false"
 267 |             :key="t.id"
 268 |             :label="t.name"
 269 |           >
 270 |             <template slot-scope="scope">
 271 |               <div :class="dayGanttType(scope.row, t.full_date)"></div>
 272 |               <div
 273 |                 v-if="useRealTime"
 274 |                 :class="realDayGanttType(scope.row, t.full_date)"
 275 |               ></div>
 276 |             </template>
 277 |           </el-table-column>
 278 |         </el-table-column>
 279 |       </template>
 280 |     </el-table>
 281 |     <!-- 组件区 -->
 282 |     <!-- 右键菜单 -->
 283 |     <context-menu
 284 |       :visible.sync="contextMenu.show"
 285 |       :x="contextMenu.x"
 286 |       :y="contextMenu.y"
 287 |       :menuList="contextMenu.data"
 288 |     ></context-menu>
 289 |     <!-- hover 看板 -->
 290 |     <div v-show="infoCard.show" class="wl-info-card" :style="infoCardStyle">
 291 |       <slot
 292 |         name="info-card"
 293 |         :row="infoCard.row"
 294 |         :column="infoCard.column"
 295 |         :cell="infoCard.cell"
 296 |         :event="infoCard.event"
 297 |       ></slot>
 298 |     </div>
 299 |   </div>
 300 | </template>
 301 | 
 302 | <script>
 303 | import dayjs from "dayjs"; // 导入日期js
 304 | const uuidv4 = require("uuid/v4"); // 导入uuid生成插件
 305 | import isBetween from "dayjs/plugin/isBetween";
 306 | dayjs.extend(isBetween);
 307 | import { flattenDeep, getMax, flattenDeepParents, regDeepParents } from "wl-core"; // 导入数组操作函数
 308 | import ContextMenu from "./components/wl-contextmenu";
 309 | 
 310 | export default {
 311 |   name: "WlGantt",
 312 |   components: { ContextMenu },
 313 |   data() {
 314 |     return {
 315 |       self_start_date: "", // 项目开始时间
 316 |       self_end_date: "", // 项目结束时间
 317 |       self_data_list: [], // 一维化后的gantt数据
 318 |       self_date_type: "", // 自身日期类型
 319 |       self_id: 1, // 自增id
 320 |       self_cell_edit: null, // 正在编辑的单元格
 321 |       self_dependent_store: [], // 自身依赖库
 322 |       multipleSelection: [], // 多选数据
 323 |       currentRow: null, // 单选数据
 324 |       pre_options: [], // 可选前置节点
 325 |       name_show_tooltip: true, // 名称列是否开启超出隐藏
 326 |       update: true, // 更新视图
 327 |       selectionList: [], // 多选选中数据
 328 |       contextMenu: {
 329 |         show: false, // 显示
 330 |         x: 0, // 坐标点
 331 |         y: 0, // 坐标点
 332 |         data: [], // 整理后要显示的数据
 333 |       }, // 右键菜单配置项
 334 |       infoCard: {
 335 |         show: false,
 336 |         x: 0,
 337 |         y: 0,
 338 |         row: {},
 339 |         column: {},
 340 |         cell: null,
 341 |         event: {},
 342 |         timer: null,
 343 |       }, // 看板信息
 344 |     };
 345 |   },
 346 |   props: {
 347 |     useCard: {
 348 |       type: Boolean,
 349 |       default: false,
 350 |     }, // 是否使用hover看板
 351 |     /**
 352 |      * @name 右键扩展菜单
 353 |      * @param {String} label 展示名称
 354 |      * @param {String} prop 绑定的字段
 355 |      * @param {String} icon 可选 字体图标class
 356 |      */
 357 |     contextMenuOptions: Array,
 358 |     // gantt数据
 359 |     data: {
 360 |       type: Array,
 361 |       default: () => {
 362 |         return [];
 363 |       },
 364 |     },
 365 |     // 日期类型
 366 |     dateType: {
 367 |       type: String,
 368 |       default: "yearAndMonth", // monthAndDay,yearAndMonth,yearAndWeek
 369 |     },
 370 |     // 树表配置项
 371 |     props: Object,
 372 |     // 开始日期
 373 |     startDate: {
 374 |       type: [String, Object],
 375 |       required: true,
 376 |     },
 377 |     // 结束时间
 378 |     endDate: {
 379 |       type: [String, Object],
 380 |       required: true,
 381 |     },
 382 |     // 是否使用实际开始时间、实际结束时间
 383 |     useRealTime: {
 384 |       type: Boolean,
 385 |       default: false,
 386 |     },
 387 |     // 是否检查源数据符合规则，默认开启，如果源数据已遵循project规则，可设置为false以提高性能
 388 |     checkSource: {
 389 |       type: Boolean,
 390 |       default: true,
 391 |     },
 392 |     // 废弃：反而会因为频繁的判断而影响性能
 393 |     // 是否生成自增id并组成parents来满足树链的查询条件，如果数据本身已有自增id，可设置为false以提高性能
 394 |     // 如果设置为false，则数据内必须包含自增id字段：identityId，parents字段必须以`,`分割。
 395 |     // 字段名可通过props配置，自增id必须唯一并尽可能的短，如1，2，3...，parents应为祖先自增id通过`,`拼接直至父级
 396 |     recordParents: {
 397 |       type: Boolean,
 398 |       default: true,
 399 |     },
 400 |     // 是否使用id来作为自增id，如果是请保证id本来就简短的数字型而不是较长的字符串或guid
 401 |     treatIdAsIdentityId: {
 402 |       type: Boolean,
 403 |       default: false,
 404 |     },
 405 |     // 自动变化gantt标题日期模式
 406 |     autoGanttDateType: {
 407 |       type: Boolean,
 408 |       default: true,
 409 |     },
 410 |     nameFormatter: Function, // 名称列的格式化内容函数
 411 |     // 是否使用内置前置任务列
 412 |     usePreColumn: {
 413 |       type: Boolean,
 414 |       default: false,
 415 |     },
 416 |     // 是否使用复选框列
 417 |     useCheckColumn: {
 418 |       type: Boolean,
 419 |       default: false,
 420 |     },
 421 |     // 是否使用序号列
 422 |     useIndexColumn: {
 423 |       type: Boolean,
 424 |       default: false,
 425 |     },
 426 |     // 是否可编辑
 427 |     edit: {
 428 |       type: Boolean,
 429 |       default: true,
 430 |     },
 431 |     // 复选框是否父子关联
 432 |     parentChild: {
 433 |       type: Boolean,
 434 |       default: true,
 435 |     },
 436 |     // 是否开启前置任务多选 如果开启多选则pre字段必须是Array，否则可以是Number\String
 437 |     preMultiple: {
 438 |       type: Boolean,
 439 |       default: true,
 440 |     },
 441 |     preFormatter: Function, // 前置任务列的格式化内容函数
 442 |     // 空单元格占位符
 443 |     emptyCellText: {
 444 |       type: String,
 445 |       default: "-",
 446 |     },
 447 |     // 多选时，是否可以点击行快速选中复选框
 448 |     /* quickCheck: {
 449 |       type: Boolean,
 450 |       default: false
 451 |     }, */
 452 |     ganttOnly: {
 453 |       type: Boolean,
 454 |       default: false,
 455 |     }, // 是否只显示图形
 456 |     // ---------------------------------------------以下为el-table Attributes--------------------------------------------
 457 |     defaultExpandAll: {
 458 |       type: Boolean,
 459 |       default: false,
 460 |     }, // 是否全部展开
 461 |     rowKey: {
 462 |       type: String,
 463 |       default: "id",
 464 |     }, // 必须指定key来渲染树形数据
 465 |     height: [String, Number], // 列表高度
 466 |     maxHeight: [String, Number], // 列表最大高度
 467 |     stripe: {
 468 |       type: Boolean,
 469 |       default: false,
 470 |     }, // 是否为斑马纹
 471 |     highlightCurrentRow: {
 472 |       type: Boolean,
 473 |       default: false,
 474 |     }, // 是否要高亮当前行
 475 |     border: {
 476 |       type: Boolean,
 477 |       default: true,
 478 |     }, // 是否带有纵向边框
 479 |     fit: {
 480 |       type: Boolean,
 481 |       default: true,
 482 |     }, // 列的宽度是否自撑开
 483 |     size: String, // Table 的尺寸
 484 |     rowClassName: Function, // 行的 className 的回调方法
 485 |     rowStyle: Function, // 行的 style 的回调方法
 486 |     cellClassName: Function, // 单元格的 className 的回调方法
 487 |     cellStyle: Function, // 单元格的 style 的回调方法
 488 |     headerRowClassName: {
 489 |       type: [Function, String],
 490 |       default: "wl-gantt-header",
 491 |     }, // 表头行的 className 的回调方法
 492 |     headerRowStyle: [Function, Object], // 表头行的 style 的回调方法
 493 |     headerCellClassName: [Function, String], // 表头单元格的 className 的回调方法
 494 |     headerCellStyle: [Function, Object], // 表头单元格的 style 的回调方法
 495 |     expandRowKeys: Array, // 可以通过该属性设置 Table 目前的展开行
 496 |     lazy: {
 497 |       type: Boolean,
 498 |       default: false,
 499 |     }, // 是否懒加载子节点数据
 500 |     load: Function, // 加载子节点数据的函数，lazy 为 true 时生效
 501 |     // 是否使用一维数据组成树
 502 |     /* arrayToTree: {
 503 |       type: Boolean,
 504 |       default: false
 505 |     } */
 506 |   },
 507 |   computed: {
 508 |     // 甘特图标题日期分配
 509 |     ganttTitleDate() {
 510 |       // 分解开始和结束日期
 511 |       let start_date_spilt = dayjs(this.self_start_date).format("YYYY-M-D").split("-");
 512 |       let end_date_spilt = dayjs(this.self_end_date).format("YYYY-M-D").split("-");
 513 |       let start_year = Number(start_date_spilt[0]);
 514 |       let start_mouth = Number(start_date_spilt[1]);
 515 |       let end_year = Number(end_date_spilt[0]);
 516 |       let end_mouth = Number(end_date_spilt[1]);
 517 |       // 自动更新日期类型以适应任务时间范围跨度
 518 |       if (this.autoGanttDateType) {
 519 |         // 计算日期跨度
 520 |         let mouth_diff = this.timeDiffTime(
 521 |           this.self_start_date,
 522 |           this.self_end_date,
 523 |           "months"
 524 |         );
 525 |         if (mouth_diff > 12) {
 526 |           // 12个月以上的分到yearAndMouth
 527 |           this.setDataType("yearAndMonth");
 528 |         } else if (mouth_diff > 2) {
 529 |           // 2个月以上的分到yearAndWeek
 530 |           this.setDataType("yearAndWeek");
 531 |         } else {
 532 |           this.setDataType("monthAndDay");
 533 |         }
 534 |       }
 535 |       // 不自动更新日期类型，以dateType固定展示
 536 |       if (this.self_date_type === "yearAndWeek") {
 537 |         return this.yearAndWeekTitleDate(start_year, start_mouth, end_year, end_mouth);
 538 |       } else if (this.self_date_type === "monthAndDay") {
 539 |         return this.mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth);
 540 |       } else {
 541 |         return this.yearAndMouthTitleDate(start_year, start_mouth, end_year, end_mouth);
 542 |       }
 543 |     },
 544 |     // 数据
 545 |     selfData() {
 546 |       let _data = this.data || [];
 547 |       // 生成一维数据
 548 |       this.setListData();
 549 |       // 处理源数据合法性
 550 |       this.handleData(_data);
 551 |       // 处理前置依赖
 552 |       this.handleDependentStore();
 553 |       return _data;
 554 |     },
 555 |     // 树表配置项
 556 |     selfProps() {
 557 |       return {
 558 |         hasChildren: "hasChildren", // 字段来指定哪些行是包含子节点
 559 |         children: "children", // children字段来表示有子节点
 560 |         name: "name", // 任务名称字段
 561 |         id: "id", // id字段
 562 |         pid: "pid", // pid字段
 563 |         startDate: "startDate", // 开始时间字段
 564 |         realStartDate: "realStartDate", // 实际开始时间字段
 565 |         endDate: "endDate", // 结束时间字段
 566 |         realEndDate: "realEndDate", // 实际结束时间字段
 567 |         identityId: "identityId",
 568 |         parents: "parents",
 569 |         pre: "pre", // 前置任务字段【注意：如果使用recordParents，则pre值应是目标对象的identityId字段(可配置)】
 570 |         ...this.props,
 571 |       };
 572 |     },
 573 |     // 根据日期类型改样式
 574 |     dateTypeClass() {
 575 |       if (this.self_date_type === "yearAndMonth") {
 576 |         return "year-and-month";
 577 |       } else if (this.self_date_type === "monthAndDay") {
 578 |         return "month-and-day";
 579 |       } else if (this.self_date_type === "yearAndWeek") {
 580 |         return "year-and-week";
 581 |       }
 582 |       return "";
 583 |     },
 584 |     // 看板样式
 585 |     infoCardStyle() {
 586 |       return {
 587 |         left: this.infoCard.x + "px",
 588 |         top: this.infoCard.y + "px",
 589 |       };
 590 |     },
 591 |   },
 592 |   methods: {
 593 |     // 设置dateType
 594 |     setDataType(type) {
 595 |       this.self_date_type = type;
 596 |     },
 597 |     // 生成一维数据
 598 |     setListData() {
 599 |       this.self_data_list = flattenDeep(this.data, this.selfProps.children);
 600 |     },
 601 |     /**
 602 |      * 开始时间改变
 603 |      * row: object 当前行数据
 604 |      */
 605 |     startDateChange(row) {
 606 |       // 如果将开始时间后移，结束时间也应后移
 607 |       let _delay = this.timeIsBefore(row._oldStartDate, row[this.selfProps.startDate]);
 608 |       if (_delay) {
 609 |         row[this.selfProps.endDate] = this.timeAdd(
 610 |           row[this.selfProps.endDate],
 611 |           row._cycle
 612 |         );
 613 |       }
 614 |       // 如果开始早于项目开始，则把项目开始提前
 615 |       let _early_project_start = this.timeIsBefore(
 616 |         row[this.selfProps.startDate],
 617 |         this.self_start_date
 618 |       );
 619 |       if (_early_project_start) {
 620 |         this.self_start_date = row[this.selfProps.startDate];
 621 |       }
 622 |       this.emitTimeChange(row);
 623 |     },
 624 |     /**
 625 |      * 结束时间改变
 626 |      * row: object 当前行数据
 627 |      */
 628 |     endDateChange(row) {
 629 |       // 如果开始晚于项目结束，则把项目结束延后
 630 |       let _early_project_end = this.timeIsBefore(
 631 |         this.self_end_date,
 632 |         row[this.selfProps.endDate]
 633 |       );
 634 |       if (_early_project_end) {
 635 |         this.self_end_date = row[this.selfProps.endDate];
 636 |       }
 637 |       this.emitTimeChange(row);
 638 |       // 如果开始晚于结束，提示
 639 |       /* if (
 640 |         this.timeIsBefore(
 641 |           row[this.selfProps.endDate],
 642 |           row[this.selfProps.startDate]
 643 |         )
 644 |       ) {
 645 |         row[this.selfProps.startDate] = row._oldStartDate;
 646 |         this.$message({
 647 |           showClose: true,
 648 |           message: "开始时间不可以晚于结束时间",
 649 |           type: "error"
 650 |         });
 651 |         return;
 652 |       } */
 653 |     },
 654 |     /**
 655 |      * 前置任务改变
 656 |      * row: object 当前行数据
 657 |      */
 658 |     preChange(row) {
 659 |       this.emitTimeChange(row);
 660 |       this.self_cell_edit = null;
 661 |       // 如果开始晚于结束，提示
 662 |       /* if (
 663 |         this.timeIsBefore(
 664 |           row[this.selfProps.endDate],
 665 |           row[this.selfProps.startDate]
 666 |         )
 667 |       ) {
 668 |         row[this.selfProps.startDate] = row._oldStartDate;
 669 |         this.$message({
 670 |           showClose: true,
 671 |           message: "开始时间不可以晚于结束时间",
 672 |           type: "error"
 673 |         });
 674 |         return;
 675 |       } */
 676 |     },
 677 |     /**
 678 |      * 前置任务内容格式化函数
 679 |      * data：[String, Array] 前置任务
 680 |      */
 681 |     preFormat(row) {
 682 |       // 自定义格式化前置任务列函数
 683 |       if (this.preFormatter) {
 684 |         return this.preFormatter(row);
 685 |       }
 686 |       let data = row[this.selfProps.pre];
 687 |       if (!data) return this.emptyCellText;
 688 |       if (Array.isArray(data)) {
 689 |         if (data.length === 0) return this.emptyCellText;
 690 |         let _pre_text = "";
 691 |         data.forEach((i) => {
 692 |           let _act = this.self_data_list.find((t) => t[this.selfProps.id] === i);
 693 |           if (_act) _pre_text += `${_act[this.selfProps.name]},`;
 694 |         });
 695 |         return _pre_text;
 696 |       }
 697 |       let _act = this.self_data_list.find((t) => t[this.selfProps.id] === data);
 698 |       return _act ? _act[this.selfProps.name] : this.emptyCellText;
 699 |     },
 700 |     // 前置下拉框失去焦点事件，change会触发blur，如果不延时则chang失效，如果延时则也只是延迟触发，会造成选一次就关闭无法多选
 701 |     /* preEditBlur(){
 702 |       setTimeout(()=>{
 703 |         this.self_cell_edit = null
 704 |       },500)
 705 |     }, */
 706 |     /**
 707 |      * 前置任务编辑
 708 |      */
 709 |     preCellEdit(row, key, ref) {
 710 |       /* let _parents = row._parents.split(","); // 父祖节点不可选
 711 |       let _children = row._all_children.map(i => i._identityId); // 子孙节点不可选
 712 |       let _self = row[this.selfProps.id]; // 自己不可选
 713 |       let _parents_and_children = _children.concat(_parents, [_self]);
 714 |       let filter_options = this.self_data_list.filter(
 715 |         i => !_parents_and_children.some(t => t == i._identityId)
 716 |       );
 717 |       this.pre_options = filter_options; */
 718 |       if (!this.edit) return;
 719 |       this.pre_options = [];
 720 |       this.self_data_list.forEach((i) => {
 721 |         if (i[this.selfProps.id] !== row[this.selfProps.id]) {
 722 |           this.pre_options.push({ ...i, [this.selfProps.children]: null });
 723 |         }
 724 |       });
 725 |       // 再剔除所有前置链涉及到的节点
 726 |       this.deepFindToSelf(row);
 727 |       // 调用单元格编辑
 728 |       this.cellEdit(key, ref);
 729 |     },
 730 |     /**
 731 |      * 找出to为当前元素的form，并将form作为to继续查找
 732 |      * item: Object 当前元素
 733 |      * targets: Array 需要过滤的数据(废弃)
 734 |      */
 735 |     deepFindToSelf(item) {
 736 |       let _parents = item._parents.split(","); // 父祖节点不可选
 737 |       let _children = item._all_children.map((i) => i._identityId); // 子孙节点不可选
 738 |       let _parents_and_children = _children.concat(_parents);
 739 |       this.pre_options = this.pre_options.filter(
 740 |         (i) => !_parents_and_children.some((t) => t == i._identityId)
 741 |       );
 742 |       this.self_dependent_store.forEach((i) => {
 743 |         let _tag = this.preMultiple
 744 |           ? i.to.some((t) => t[this.selfProps.id] === item[this.selfProps.id])
 745 |           : i.to[this.selfProps.id] === item[this.selfProps.id];
 746 |         if (_tag) {
 747 |           this.pre_options = this.pre_options.filter(
 748 |             (t) => t[this.selfProps.id] !== i.form[this.selfProps.id]
 749 |           );
 750 |           this.deepFindToSelf(i.form);
 751 |         }
 752 |       });
 753 |     },
 754 |     /**
 755 |      * 单元格编辑
 756 |      * key: string 需要操作的单元格key
 757 |      * ref：object 需要获取焦点的dom
 758 |      */
 759 |     cellEdit(key, ref) {
 760 |       if (!this.edit) return;
 761 |       if (ref === "wl-name") {
 762 |         this.name_show_tooltip = false;
 763 |       }
 764 |       this.self_cell_edit = key;
 765 |       this.$nextTick(() => {
 766 |         this.$refs[ref].focus();
 767 |       });
 768 |     },
 769 |     // 名称编辑事件
 770 |     nameChange(row) {
 771 |       this.self_cell_edit = null;
 772 |       this.name_show_tooltip = true;
 773 |       this.emitNameChange(row);
 774 |     },
 775 |     // 名称列编辑输入框blur事件
 776 |     nameBlur() {
 777 |       this.self_cell_edit = null;
 778 |       this.name_show_tooltip = true;
 779 |     },
 780 |     // 以下是表格-日期-gantt生成函数----------------------------------------生成gantt表格-------------------------------------
 781 |     /**
 782 |      * 年-月模式gantt标题
 783 |      * start_year: 起始年
 784 |      * start_mouth：起始月
 785 |      * end_year：结束年
 786 |      * end_mouth：结束月
 787 |      */
 788 |     yearAndMouthTitleDate(start_year, start_mouth, end_year, end_mouth) {
 789 |       // 日期数据盒子
 790 |       let dates = [
 791 |         {
 792 |           name: `${start_year}年`,
 793 |           date: start_year,
 794 |           id: uuidv4(),
 795 |           children: [],
 796 |         },
 797 |       ];
 798 |       // 处理年份
 799 |       let year_diff = end_year - start_year;
 800 |       // 年间隔小于一年
 801 |       if (year_diff === 0) {
 802 |         let isLeap = this.isLeap(start_year); // 是否闰年
 803 |         let mouths = this.generationMonths(
 804 |           start_year,
 805 |           start_mouth,
 806 |           end_mouth + 1,
 807 |           isLeap,
 808 |           false
 809 |         ); // 处理月份
 810 |         dates[0].children = mouths;
 811 |         return dates;
 812 |       }
 813 |       // 处理开始月份
 814 |       let startIsLeap = this.isLeap(start_year);
 815 |       let start_mouths = this.generationMonths(
 816 |         start_year,
 817 |         start_mouth,
 818 |         13,
 819 |         startIsLeap,
 820 |         false
 821 |       );
 822 |       // 处理结束月份
 823 |       let endIsLeap = this.isLeap(end_year);
 824 |       let end_mouths = this.generationMonths(
 825 |         end_year,
 826 |         1,
 827 |         end_mouth + 1,
 828 |         endIsLeap,
 829 |         false
 830 |       );
 831 |       // 年间隔等于一年
 832 |       if (year_diff === 1) {
 833 |         dates[0].children = start_mouths;
 834 |         dates.push({
 835 |           name: `${end_year}年`,
 836 |           date: end_year,
 837 |           children: end_mouths,
 838 |           id: uuidv4(),
 839 |         });
 840 |         return dates;
 841 |       }
 842 |       // 年间隔大于1年
 843 |       if (year_diff > 1) {
 844 |         dates[0].children = start_mouths;
 845 |         for (let i = 1; i < year_diff; i++) {
 846 |           let item_year = start_year + i;
 847 |           let isLeap = this.isLeap(item_year);
 848 |           let month_and_day = this.generationMonths(item_year, 1, 13, isLeap, false);
 849 |           dates.push({
 850 |             name: `${item_year}年`,
 851 |             date: item_year,
 852 |             id: uuidv4(),
 853 |             children: month_and_day,
 854 |           });
 855 |         }
 856 |         dates.push({
 857 |           name: `${end_year}年`,
 858 |           date: end_year,
 859 |           children: end_mouths,
 860 |           id: uuidv4(),
 861 |         });
 862 |         return dates;
 863 |       }
 864 |     },
 865 |     /**
 866 |      * 年-周模式gantt标题
 867 |      * start_year: 起始年
 868 |      * start_mouth：起始月
 869 |      * end_year：结束年
 870 |      * end_mouth：结束月
 871 |      */
 872 |     yearAndWeekTitleDate(start_year, start_mouth, end_year, end_mouth) {
 873 |       // 处理年份
 874 |       let year_diff = end_year - start_year;
 875 |       // 只存在同年或前后年的情况
 876 |       if (year_diff === 0) {
 877 |         // 年间隔为同一年
 878 |         let isLeap = this.isLeap(start_year); // 是否闰年
 879 |         let mouths = this.generationMonths(
 880 |           start_year,
 881 |           start_mouth,
 882 |           end_mouth + 1,
 883 |           isLeap,
 884 |           true,
 885 |           true
 886 |         ); // 处理月份
 887 |         return mouths;
 888 |       }
 889 |       // 处理开始月份
 890 |       let startIsLeap = this.isLeap(start_year);
 891 |       let start_mouths = this.generationMonths(
 892 |         start_year,
 893 |         start_mouth,
 894 |         13,
 895 |         startIsLeap,
 896 |         true,
 897 |         true
 898 |       );
 899 |       // 处理结束月份
 900 |       let endIsLeap = this.isLeap(end_year);
 901 |       let end_mouths = this.generationMonths(
 902 |         end_year,
 903 |         1,
 904 |         end_mouth + 1,
 905 |         endIsLeap,
 906 |         true,
 907 |         true
 908 |       );
 909 |       return start_mouths.concat(end_mouths);
 910 |     },
 911 |     /**
 912 |      * 月-日模式gantt标题
 913 |      * start_year: 起始年
 914 |      * start_mouth：起始月
 915 |      * end_year：结束年
 916 |      * end_mouth：结束月
 917 |      */
 918 |     mouthAndDayTitleDate(start_year, start_mouth, end_year, end_mouth) {
 919 |       // 处理年份
 920 |       let year_diff = end_year - start_year;
 921 |       // 只存在同年或前后年的情况
 922 |       if (year_diff === 0) {
 923 |         // 年间隔为同一年
 924 |         let isLeap = this.isLeap(start_year); // 是否闰年
 925 |         let mouths = this.generationMonths(
 926 |           start_year,
 927 |           start_mouth,
 928 |           end_mouth + 1,
 929 |           isLeap
 930 |         ); // 处理月份
 931 |         return mouths;
 932 |       }
 933 |       // 处理开始月份
 934 |       let startIsLeap = this.isLeap(start_year);
 935 |       let start_mouths = this.generationMonths(start_year, start_mouth, 13, startIsLeap);
 936 |       // 处理结束月份
 937 |       let endIsLeap = this.isLeap(end_year);
 938 |       let end_mouths = this.generationMonths(end_year, 1, end_mouth + 1, endIsLeap);
 939 |       return start_mouths.concat(end_mouths);
 940 |     },
 941 |     /**
 942 |      * 生成月份函数
 943 |      * year: Number 当前年份
 944 |      * start_num: Number 开始月分
 945 |      * end_num：Number 结束月份
 946 |      * isLeap: Boolean 是否闰年
 947 |      * insert_days: Boolean 是否需要插入 日
 948 |      * week: 是否以周的间隔
 949 |      */
 950 |     generationMonths(
 951 |       year,
 952 |       start_num = 1,
 953 |       end_num = 13,
 954 |       isLeap = false,
 955 |       insert_days = true,
 956 |       week = false
 957 |     ) {
 958 |       let months = [];
 959 |       if (insert_days) {
 960 |         // 无需 日 的模式
 961 |         for (let i = start_num; i < end_num; i++) {
 962 |           // 需要 日 的模式
 963 |           let days = this.generationDays(year, i, isLeap, week);
 964 |           months.push({
 965 |             name: `${i}月`,
 966 |             date: i,
 967 |             full_date: `${year}-${i}`,
 968 |             children: days,
 969 |             id: uuidv4(),
 970 |           });
 971 |         }
 972 |         return months;
 973 |       }
 974 |       for (let i = start_num; i < end_num; i++) {
 975 |         // 需要 日 的模式
 976 |         months.push({
 977 |           name: `${i}月`,
 978 |           date: i,
 979 |           full_date: `${year}-${i}`,
 980 |           id: uuidv4(),
 981 |         });
 982 |       }
 983 |       return months;
 984 |     },
 985 |     /**
 986 |      * 生成日期函数
 987 |      * year: Number 当前年份
 988 |      * month: Number 当前月份
 989 |      * isLeap: Boolean 是否闰年
 990 |      * week: Boolean 是否间隔一周
 991 |      */
 992 |     generationDays(year, month, isLeap = false, week = false) {
 993 |       let big_month = [1, 3, 5, 7, 8, 10, 12].includes(month);
 994 |       let small_month = [4, 6, 9, 11].includes(month);
 995 |       let dates_num = big_month ? 32 : small_month ? 31 : isLeap ? 30 : 29;
 996 |       let days = [];
 997 |       if (week) {
 998 |         let _day = 1; // 从周日开始
 999 |         let _start_day_inweek = this.timeInWeek(`${year}-${month}-1`);
1000 |         if (_start_day_inweek !== 0) {
1001 |           _day = 8 - _start_day_inweek;
1002 |         }
1003 |         for (let i = _day; i < dates_num; i += 7) {
1004 |           days.push({
1005 |             date: i,
1006 |             name: `${i}日`,
1007 |             id: uuidv4(),
1008 |             full_date: `${year}-${month}-${i}`,
1009 |           });
1010 |         }
1011 |       } else {
1012 |         for (let i = 1; i < dates_num; i++) {
1013 |           days.push({
1014 |             date: i,
1015 |             name: `${i}日`,
1016 |             id: uuidv4(),
1017 |             full_date: `${year}-${month}-${i}`,
1018 |           });
1019 |         }
1020 |       }
1021 |       return days;
1022 |     },
1023 |     /**
1024 |      * 是否闰年函数
1025 |      * year: Number 当前年份
1026 |      */
1027 |     isLeap(year) {
1028 |       return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
1029 |     },
1030 |     /**
1031 |      * 当前日期gantt状态
1032 |      * row: object 当前行信息
1033 |      * date: string 当前格子日期
1034 |      * unit: string 时间单位，以天、月、年计算
1035 |      */
1036 |     dayGanttType(row, date, unit = "days") {
1037 |       let start_date = row[this.selfProps.startDate];
1038 |       let end_date = row[this.selfProps.endDate];
1039 |       let between = dayjs(date).isBetween(start_date, end_date, unit);
1040 |       if (between) {
1041 |         return "wl-item-on";
1042 |       }
1043 |       let start = dayjs(start_date).isSame(date, unit);
1044 |       let end = dayjs(end_date).isSame(date, unit);
1045 |       if (start && end) {
1046 |         return "wl-item-on wl-item-full";
1047 |       }
1048 |       if (start) {
1049 |         return "wl-item-on wl-item-start";
1050 |       }
1051 |       if (end) {
1052 |         return "wl-item-on wl-item-end";
1053 |       }
1054 |     },
1055 |     /**
1056 |      * 实际日期gantt状态
1057 |      * row: object 当前行信息
1058 |      * date: string 当前格子日期
1059 |      * unit: string 时间单位，以天、月、年计算
1060 |      */
1061 |     realDayGanttType(row, date, unit = "days") {
1062 |       let start_date = row[this.selfProps.realStartDate];
1063 |       let end_date = row[this.selfProps.realEndDate];
1064 |       let between = dayjs(date).isBetween(start_date, end_date, unit);
1065 |       if (between) {
1066 |         return "wl-real-on";
1067 |       }
1068 |       let start = dayjs(start_date).isSame(date, unit);
1069 |       let end = dayjs(end_date).isSame(date, unit);
1070 |       if (start && end) {
1071 |         return "wl-real-on wl-real-full";
1072 |       }
1073 |       if (start) {
1074 |         return "wl-real-on wl-real-start";
1075 |       }
1076 |       if (end) {
1077 |         return "wl-real-on wl-real-end";
1078 |       }
1079 |     },
1080 |     // 以下是时间计算类函数 ------------------------------------------------------时间计算---------------------------------------
1081 |     /**
1082 |      * 计算时差
1083 |      * startDate：开始时间
1084 |      * endDate：结束时间
1085 |      * unit：单位 days、months、yesrs
1086 |      */
1087 |     timeDiffTime(startDate, endDate, unit = "days") {
1088 |       return dayjs(endDate).diff(startDate, unit);
1089 |     },
1090 |     /**
1091 |      * 比较时间，是否之前
1092 |      * startDate：开始时间
1093 |      * endDate：结束时间
1094 |      * unit：单位 days、months、yesrs
1095 |      */
1096 |     timeIsBefore(startDate, endDate, unit = "days") {
1097 |       return dayjs(startDate).isBefore(endDate, unit);
1098 |     },
1099 |     /**
1100 |      * 时间加计算函数
1101 |      * date：原时间
1102 |      * num：需要增加的时间数量
1103 |      * nuit：增加时间的单位 day year
1104 |      */
1105 |     timeAdd(date, num = 1, nuit = "day", format = "YYYY-MM-DD") {
1106 |       return dayjs(date).add(num, nuit).format(format);
1107 |     },
1108 |     /**
1109 |      * 时间格式化函数
1110 |      * date 需要格式化的数据
1111 |      * format 格式化的格式
1112 |      */
1113 |     timeFormat(date, format = "YYYY-MM-DD") {
1114 |       return date ? dayjs(date).format(format) : this.emptyCellText;
1115 |     },
1116 |     /**
1117 |      * 查询时间是周几
1118 |      */
1119 |     timeInWeek(date) {
1120 |       return dayjs(date).day();
1121 |     },
1122 |     // 以下为输出数据函数 --------------------------------------------------------------输出数据------------------------------------
1123 |     // 删除任务
1124 |     emitTaskRemove(item) {
1125 |       this.$emit("taskRemove", item);
1126 |     },
1127 |     // 添加任务
1128 |     emitTaskAdd(item) {
1129 |       this.$emit("taskAdd", item);
1130 |     },
1131 |     // 任务名称更改
1132 |     emitNameChange(item) {
1133 |       this.$emit("nameChange", item);
1134 |     },
1135 |     // 任务时间更改
1136 |     emitTimeChange(item) {
1137 |       this.$emit("timeChange", item);
1138 |       this.$nextTick(() => {
1139 |         this.$set(item, "_oldStartDate", item[this.selfProps.startDate]);
1140 |         this.$set(item, "_oldEndDate", item[this.selfProps.endDate]);
1141 |       });
1142 |     },
1143 |     /**
1144 |      * 前置任务更改
1145 |      * item: Object 发生更改的行数据
1146 |      * oldval: [String, Array] 修改前数据
1147 |      * handle: Boolean true为操作选择框修改 false为源数据不符合规范的修正更改
1148 |      */
1149 |     emitPreChange(item, oldval, handle = false) {
1150 |       this.$emit("preChange", item, oldval, handle);
1151 |     },
1152 |     // 处理外部数据 ---------------------------------------------------------------原始数据处理-------------------------------------
1153 |     handleData(data, parent = null, level = 0) {
1154 |       level++;
1155 |       data.forEach((i) => {
1156 |         this.$set(i, "_parent", parent); // 添加父级字段
1157 |         this.$set(i, "_level", level); // 添加层级字段
1158 |         if (!i._oldStartDate) {
1159 |           this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
1160 |         }
1161 |         if (!i._oldEndDate) {
1162 |           this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
1163 |         }
1164 |         // 当结束时间早于开始时间时，自动处理结束时间为开始时间延后一天
1165 |         let _end_early_start = this.timeIsBefore(
1166 |           i[this.selfProps.endDate],
1167 |           i[this.selfProps.startDate]
1168 |         );
1169 |         if (_end_early_start) {
1170 |           this.$set(i, this.selfProps.endDate, i[this.selfProps.startDate]);
1171 |           this.$set(i, "_cycle", 1); // 添加工期字段
1172 |           this.emitTimeChange(i); // 将发生时间更新的数据输出
1173 |         } else {
1174 |           let _time_diff = this.timeDiffTime(
1175 |             i[this.selfProps.startDate],
1176 |             i[this.selfProps.endDate]
1177 |           );
1178 |           this.$set(i, "_cycle", _time_diff + 1); // 添加工期字段
1179 |         } // 添加工期字段
1180 |         // 添加自增id字段及树链组成的parents字段
1181 |         this.recordIdentityIdAndParents(i);
1182 |         // 处理前置任务
1183 |         // this.handlePreTask(i);
1184 |         // 如果当前节点的开始时间早于父节点的开始时间，则将开始时间与父节点相同
1185 |         this.parentStartDateToChild(i);
1186 |         // 校验结束时间是否晚于子节点，如不则将节点结束时间改为最晚子节点
1187 |         this.childEndDateToParent(i);
1188 |         if (Array.isArray(i[this.selfProps.children])) {
1189 |           this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
1190 |           let _all_children = flattenDeep(
1191 |             i[this.selfProps.children],
1192 |             this.selfProps.children
1193 |           );
1194 |           this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
1195 |           this.handleData(i[this.selfProps.children], i, level);
1196 |         } else {
1197 |           this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
1198 |           this.$set(i, "_all_children", []); // 添加全部子节点字段
1199 |         }
1200 |       });
1201 |     },
1202 |     // 取父节点开始时间给早于父节点开始时间的子节点
1203 |     parentStartDateToChild(item) {
1204 |       if (!item._parent) return;
1205 |       // 如果子节点时间早于父节点，则将子节点开始时间后移至父节点开始时间,并将结束时间平移【即工期不变】
1206 |       let _child_early_parent = this.timeIsBefore(
1207 |         item[this.selfProps.startDate],
1208 |         item._parent[this.selfProps.startDate]
1209 |       );
1210 |       if (_child_early_parent) {
1211 |         // 修正子节点开始时间
1212 |         this.$set(item, this.selfProps.startDate, item._parent[this.selfProps.startDate]);
1213 |         // 修正子节点结束时间
1214 |         let _to_endDate = this.timeAdd(item[this.selfProps.startDate], item._cycle);
1215 |         this.$set(item, this.selfProps.endDate, _to_endDate);
1216 |         this.emitTimeChange(item); // 将发生时间更新的数据输出
1217 |       }
1218 |     },
1219 |     // 取数组结束时间最大值，如果最大值比父级结束时间大，更新父级结束时间
1220 |     childEndDateToParent(item) {
1221 |       if (!Array.isArray(item[this.selfProps.children])) return;
1222 |       let _child_max = getMax(
1223 |         item[this.selfProps.children],
1224 |         this.selfProps.endDate,
1225 |         true
1226 |       ); // 取子节点中最晚的结束时间
1227 |       let _parent_end = dayjs(item[this.selfProps.endDate]).valueOf();
1228 |       if (_child_max > _parent_end) {
1229 |         // 如果子节点结束时间比父节点晚，则将父节点结束时间退后
1230 |         this.$set(item, this.selfProps.endDate, this.timeFormat(_child_max));
1231 |         this.emitTimeChange(item); // 将发生时间更新的数据输出
1232 |       }
1233 |     },
1234 |     // 处理前置任务节点    /// ---- 此使前置任务校验处理还没开始，因此出错，前置处理后手动调用vue视图更新试试
1235 |     handlePreTask(item) {
1236 |       // 统一在一维化数据中处理前置任务
1237 |       let _pre_target = this.self_dependent_store.find(
1238 |         (i) => i.form[this.selfProps.id] === item[this.selfProps.id]
1239 |       );
1240 |       if (!_pre_target) return;
1241 |       let _pre_end_date = this.preMultiple
1242 |         ? getMax(_pre_target.to, this.selfProps.endDate, true) // 取前置点中最晚的结束时间
1243 |         : _pre_target.to[this.selfProps.endDate];
1244 |       /* 在数据循环中处理前置
1245 |       let pres = item[this.selfProps.pre];
1246 |       if(!pres) return;
1247 |       let _pre_target = null, _pre_end_date = null;
1248 |       if(this.preMultiple){
1249 |         if(!Array.isArray(pres) || pres.length ===0) return;
1250 |         _pre_target = this.self_data_list.filter(i => pres.includes(i[this.selfProps.id]));
1251 |         _pre_end_date = getMax(_pre_target, this.selfProps.endDate, true);
1252 |       }else{
1253 |         _pre_target = this.self_data_list.find(i => i[this.selfProps.id] === pres);
1254 |         if(!_pre_target) return;
1255 |         _pre_end_date = _pre_target[this.selfProps.endDate]
1256 |       } */
1257 |       // 查看是否需要根据前置时间，如果不符合规则，更新后置时间
1258 |       let _start_early_prvend = this.timeIsBefore(
1259 |         item[this.selfProps.startDate],
1260 |         _pre_end_date
1261 |       );
1262 |       if (_start_early_prvend) {
1263 |         let _cycle = item._cycle - 1;
1264 |         let _to_startDate = this.timeAdd(_pre_end_date, 1);
1265 |         let _to_endDate = this.timeAdd(_to_startDate, _cycle);
1266 |         this.$set(item, this.selfProps.startDate, _to_startDate);
1267 |         this.$set(item, this.selfProps.endDate, _to_endDate);
1268 |       }
1269 |     },
1270 |     /**
1271 |      * 检查前置任务合法性
1272 |      * ！！已废弃：改为从一维数据列收集form、to并校验，不再在递归中检查 -> handleDependentStore
1273 |      */
1274 |     checkPreTaskValidity(item) {
1275 |       // 没有前置任务退出
1276 |       if (!item[this.selfProps.pre]) return false;
1277 |       // 多前置任务模式
1278 |       if (this.preMultiple) {
1279 |         let _pres = item[this.selfProps.pre];
1280 |         // 不是数组退出
1281 |         if (!Array.isArray(_pres)) {
1282 |           this.emitPreChange(item, item[this.selfProps.pre]);
1283 |           this.$set(item, this.selfProps.pre, []);
1284 |           return false;
1285 |         }
1286 |         // 数组为空退出
1287 |         if (_pres.length === 0) return false;
1288 |         // 前置任务有自己时，剔除自己
1289 |         let _net_self_pres = _pres.filter((i) => i !== item[this.selfProps.id]);
1290 |         if (_net_self_pres.length !== _pres.length) {
1291 |           this.emitPreChange(item, item[this.selfProps.pre]);
1292 |           this.$set(item, this.selfProps.pre, _net_self_pres);
1293 |         }
1294 |         // 剔除前置任务找不到目标数据的元素
1295 |         let _pre_exist = _net_self_pres.filter((i) => this.targetInAllData(i));
1296 |         if (_pre_exist.length !== _net_self_pres.length) {
1297 |           this.emitPreChange(item, item[this.selfProps.pre]);
1298 |           this.$set(item, this.selfProps.pre, _pre_exist);
1299 |         }
1300 |         let _no_par_chi = []; // 声明非父、祖、子、孙节点的盒子
1301 |         for (let i of _pre_exist) {
1302 |           let _pre_target = this.self_data_list.find((t) => t[this.selfProps.id] === i);
1303 |           if (!_pre_target) continue;
1304 |           let _pre_par_chi = this.targetInParentsOrChildren(item, _pre_target);
1305 |           _pre_par_chi || _no_par_chi.push(i);
1306 |         }
1307 |         // 前置任务是自己的父祖或子孙节点, 剔除此前置
1308 |         if (_no_par_chi.length !== _pre_exist.length) {
1309 |           this.emitPreChange(item, item[this.selfProps.pre]);
1310 |           this.$set(item, this.selfProps.pre, _no_par_chi);
1311 |         }
1312 |         // 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1313 |         this.targetLinkLoopback(item);
1314 |         return true;
1315 |       }
1316 |       // 单前置任务模式
1317 |       if (item[this.selfProps.pre] === item[this.selfProps.id]) {
1318 |         this.$set(item, this.selfProps.pre, null);
1319 |         return false;
1320 |       } // 前置任务是自己退出
1321 |       // 找到前置目标节点
1322 |       let _pre_target = this.self_data_list.find(
1323 |         (i) => i[this.selfProps.id] == item[this.selfProps.pre]
1324 |       );
1325 |       // 没找到前置任务节点数据退出
1326 |       if (!_pre_target) {
1327 |         this.$set(item, this.selfProps.pre, null);
1328 |         return false;
1329 |       }
1330 |       // 前置任务是自己的父祖或子孙节点退出
1331 |       let is_pre_standard = this.targetInParentsOrChildren(item, _pre_target);
1332 |       if (is_pre_standard) {
1333 |         this.$set(item, this.selfProps.pre, null);
1334 |         return false;
1335 |       }
1336 |       // 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1337 |       this.targetLinkLoopback(item);
1338 |       return true;
1339 |     },
1340 |     // 处理数据生成自增id和树链parents
1341 |     recordIdentityIdAndParents(item) {
1342 |       // if (!this.recordParents) return;
1343 |       if (this.treatIdAsIdentityId) {
1344 |         let _parents = item._parent
1345 |           ? item._parent._parents + "," + item._parent[this.selfProps.id]
1346 |           : "";
1347 |         this.$set(item, "_parents", _parents);
1348 |         this.$set(item, "_identityId", item[this.selfProps.id]);
1349 |         return;
1350 |       }
1351 |       // 添加自增id
1352 |       this.$set(item, "_identityId", this.self_id);
1353 |       this.self_id++;
1354 |       // 添加parents字段
1355 |       let _parents = item._parent
1356 |         ? item._parent._parents + "," + item._parent._identityId
1357 |         : "";
1358 |       this.$set(item, "_parents", _parents);
1359 |     },
1360 |     /**
1361 |      * 查询目标是否在父级链或者全部子集中
1362 |      * item 当前节点
1363 |      * pre 前置节点
1364 |      */
1365 |     targetInParentsOrChildren(item, pre) {
1366 |       let _parents = item._parents.split(",");
1367 |       let _children = item._all_children.map((i) => i._identityId);
1368 |       return _children.concat(_parents).some((i) => i == pre._identityId);
1369 |     },
1370 |     // 查询目标节点是否在数据中存在,并返回数据
1371 |     targetInAllData(target_id) {
1372 |       return this.self_data_list.find((i) => i[this.selfProps.id] === target_id);
1373 |     },
1374 |     /**
1375 |      * 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1376 |      * item: Object 当前节点数据
1377 |      * pre_tesk: Array 前置链上所有id
1378 |      * ！！已废弃：下方尝试改成form to结构收集起来处理，不再循环中反复循环处理 -> terseTargetLinkLoopback
1379 |      */
1380 |     targetLinkLoopback(item, pre_tesk = []) {
1381 |       pre_tesk.push(item[this.selfProps.id]);
1382 |       let _pres = item[this.selfProps.pre];
1383 |       let _legal_pres = _pres.filter((i) => !pre_tesk.includes(i));
1384 |       if (this.preMultiple) {
1385 |         if (_legal_pres.length !== _pres.length) {
1386 |           this.emitPreChange(item, item[this.selfProps.pre]);
1387 |           this.$set(item, this.selfProps.pre, _legal_pres);
1388 |         }
1389 |         _legal_pres.forEach((i) => {
1390 |           let _pre_target = this.self_data_list.find((t) => t[this.selfProps.id] === i);
1391 |           if (
1392 |             _pre_target &&
1393 |             Array.isArray(_pre_target[this.selfProps.pre]) &&
1394 |             _pre_target[this.selfProps.pre].length > 0
1395 |           ) {
1396 |             this.targetLinkLoopback(_pre_target, pre_tesk);
1397 |           }
1398 |         });
1399 |       } else {
1400 |         if (pre_tesk.includes(_pres)) {
1401 |           this.emitPreChange(item, item[this.selfProps.pre]);
1402 |           this.$set(item, this.selfProps.pre, _legal_pres);
1403 |         }
1404 |         let _pre_target = this.self_data_list.find(
1405 |           (t) => t[this.selfProps.id] === item[this.selfProps.id]
1406 |         );
1407 |         if (_pre_target) {
1408 |           this.targetLinkLoopback(_pre_target, pre_tesk);
1409 |         }
1410 |       }
1411 |     },
1412 |     /**
1413 |      * 处理前置任务链链中产生了回环【A->B,B->C,C->D,D->B】即前置链中形成了相互前置的节点，剔除其错误前置数据
1414 |      * item: Object 当前节点数据
1415 |      * flow_pre_tesk: Array 前置链上所有id
1416 |      */
1417 |     terseTargetLinkLoopback(item, flow_pre_tesk = []) {
1418 |       flow_pre_tesk.push(item.form[this.selfProps.id]);
1419 |       if (this.preMultiple) {
1420 |         let _legal_pre = [], // 收集合法数据
1421 |           _next_form = []; // 收集所有前置的前置
1422 |         for (let i of item.to) {
1423 |           let _to_id = i[this.selfProps.id];
1424 |           if (flow_pre_tesk.includes(_to_id)) continue;
1425 |           _legal_pre.push(_to_id);
1426 |           flow_pre_tesk.push(_to_id);
1427 |           let _store_next_form = this.self_dependent_store.filter(
1428 |             (t) => t.form[this.selfProps.id] === _to_id
1429 |           );
1430 |           _next_form = _next_form.concat(_store_next_form);
1431 |         }
1432 |         // 剔除不合法前置
1433 |         if (_legal_pre.length !== item.to.length) {
1434 |           this.emitPreChange(item.form, item.form[this.selfProps.pre]);
1435 |           this.$set(item.form, this.selfProps.pre, _legal_pre);
1436 |         }
1437 |         // 向前置的前置递归
1438 |         _next_form.forEach((t) => {
1439 |           this.terseTargetLinkLoopback(t, flow_pre_tesk);
1440 |         });
1441 |       } else {
1442 |         let _to_id = item.to[this.selfProps.id];
1443 |         if (flow_pre_tesk.includes(_to_id)) {
1444 |           this.emitPreChange(item.form, item.form[this.selfProps.pre]);
1445 |           this.$set(item.form, this.selfProps.pre, null);
1446 |           return;
1447 |         }
1448 |         let _next_form = this.self_dependent_store.find(
1449 |           (t) => t.form[this.selfProps.id] === _to_id
1450 |         );
1451 |         if (!_next_form) return;
1452 |         this.terseTargetLinkLoopback(_next_form, flow_pre_tesk);
1453 |       }
1454 |     },
1455 |     // 简洁处理数据
1456 |     terseHandleData(data, parent = null, level = 0) {
1457 |       level++;
1458 |       data.forEach((i) => {
1459 |         this.$set(i, "_parent", parent); // 添加父级字段
1460 |         this.$set(i, "_level", level); // 添加层级字段
1461 |         let _time_diff = this.timeDiffTime(
1462 |           i[this.selfProps.startDate],
1463 |           i[this.selfProps.endDate]
1464 |         );
1465 |         i._cycle = _time_diff + 1;
1466 |         if (!i._oldStartDate) {
1467 |           // 添加开始时间字段
1468 |           this.$set(i, "_oldStartDate", i[this.selfProps.startDate]);
1469 |         }
1470 |         if (!i._oldEndDate) {
1471 |           // 添加结束字段时间
1472 |           this.$set(i, "_oldEndDate", i[this.selfProps.endDate]);
1473 |         }
1474 |         // 添加自增id字段及树链组成的parents字段
1475 |         this.recordIdentityIdAndParents(i);
1476 |         if (Array.isArray(i[this.selfProps.children])) {
1477 |           this.$set(i, "_isLeaf", false); // 添加是否叶子节点字段
1478 |           let _all_children = flattenDeep(
1479 |             i[this.selfProps.children],
1480 |             this.selfProps.children
1481 |           );
1482 |           this.$set(i, "_all_children", _all_children); // 添加全部子节点字段
1483 |           this.terseHandleData(i[this.selfProps.children], i, level);
1484 |         } else {
1485 |           this.$set(i, "_isLeaf", true); // 添加是否叶子节点字段
1486 |         }
1487 |         // 处理前置任务
1488 |         // this.handlePreTask(i);
1489 |       });
1490 |     },
1491 |     // 生成前置依赖库, 校验前置合法性并剔除不合法数据
1492 |     handleDependentStore() {
1493 |       this.self_dependent_store = [];
1494 |       // 多选前置模式
1495 |       if (this.preMultiple) {
1496 |         for (let i of this.self_data_list) {
1497 |           let _pres = i[this.selfProps.pre];
1498 |           if (!_pres) continue;
1499 |           // 不是数组退出
1500 |           if (!Array.isArray(_pres)) {
1501 |             this.emitPreChange(i, i[this.selfProps.pre]);
1502 |             this.$set(i, this.selfProps.pre, []);
1503 |             continue;
1504 |           }
1505 |           // 数组为空退出
1506 |           if (_pres.length === 0) continue;
1507 |           // 查询不到数据的不收集，是父、祖、子、孙节点的不收集
1508 |           let _pre_exist_node = [],
1509 |             _pre_exist_id = [];
1510 |           for (let t of _pres) {
1511 |             let target_node = this.targetInAllData(t);
1512 |             if (!target_node) continue; // 查询不到数据的不收集
1513 |             let in_per_chi = this.targetInParentsOrChildren(i, target_node);
1514 |             if (in_per_chi) continue; // 是父、祖、子、孙节点的不收集
1515 |             _pre_exist_node.push(target_node);
1516 |             _pre_exist_id.push(target_node[this.selfProps.id]);
1517 |           }
1518 |           if (_pre_exist_node.length !== _pres.length) {
1519 |             this.emitPreChange(i, i[this.selfProps.pre]);
1520 |             this.$set(i, this.selfProps.pre, _pre_exist_id);
1521 |           }
1522 |           this.self_dependent_store.push({
1523 |             form: i,
1524 |             to: _pre_exist_node,
1525 |           });
1526 |         }
1527 |       } else {
1528 |         // 单选前置模式
1529 |         for (let i of this.self_data_list) {
1530 |           if (!i[this.selfProps.pre]) continue;
1531 |           let _pre_target = this.targetInAllData(i[this.selfProps.pre]);
1532 |           // 处理前置任务找不到的情况
1533 |           if (!_pre_target) {
1534 |             this.emitPreChange(i, i[this.selfProps.pre]);
1535 |             this.$set(i, this.selfProps.pre, null);
1536 |             continue;
1537 |           }
1538 |           // 处理前置任务是父祖子孙节点的情况
1539 |           let in_per_chi = this.targetInParentsOrChildren(i, _pre_target);
1540 |           if (in_per_chi) {
1541 |             this.emitPreChange(i, i[this.selfProps.pre]);
1542 |             this.$set(i, this.selfProps.pre, null);
1543 |             continue;
1544 |           }
1545 |           this.self_dependent_store.push({
1546 |             form: i,
1547 |             to: _pre_target,
1548 |           });
1549 |         }
1550 |       }
1551 |       // 处理合格前置任务
1552 |       this.self_dependent_store.forEach((i) => {
1553 |         this.terseTargetLinkLoopback(i);
1554 |       });
1555 |       // 处理前置依赖
1556 |       this.self_data_list.forEach((i) => {
1557 |         this.handlePreTask(i);
1558 |       });
1559 |       // 暂时强制更新视图
1560 |       if (this.update) {
1561 |         this.update = false;
1562 |         this.selfData.sort();
1563 |       }
1564 |     },
1565 |     // 父子关联
1566 |     tableSelect(val, row) {
1567 |       if (!this.parentChild) return;
1568 |       // 选中
1569 |       if (val.some((item) => item[this.selfProps.id] == row[this.selfProps.id])) {
1570 |         // 父元素选中全选所有子孙元素
1571 |         // for (let item of val) {
1572 |         row._all_children.forEach((i) => {
1573 |           this.$refs["wl-gantt"].toggleRowSelection(i, true);
1574 |         });
1575 |         // }
1576 |         // 子元素全选向上查找所有满足条件的祖先元素
1577 |         regDeepParents(row, "_parent", (parents) => {
1578 |           let reg =
1579 |             parents &&
1580 |             parents[this.selfProps.children].every((item) => {
1581 |               return val.some((it) => it[this.selfProps.id] == item[this.selfProps.id]);
1582 |             });
1583 |           if (reg) this.$refs["wl-gantt"].toggleRowSelection(parents, true);
1584 |         });
1585 |       } else {
1586 |         // 非选中将所有子孙元素及支线上祖先元素清除
1587 |         let cancel_data = [...row._all_children, ...flattenDeepParents([row], "_parent")];
1588 |         for (let item of cancel_data) {
1589 |           this.$refs["wl-gantt"].toggleRowSelection(item, false);
1590 |         }
1591 |       }
1592 |     },
1593 |     // el-table事件----------------------------------------------以下为原el-table事件输出------------------------------------------------
1594 |     handleSelectionChange(val) {
1595 |       this.$emit("selection-change", val);
1596 |       this.multipleSelection = val;
1597 |     }, // 当选择项发生变化时会触发该事件
1598 |     handleCurrentChange(val, oldVal) {
1599 |       this.$emit("current-change", val, oldVal);
1600 |       this.currentRow = val;
1601 |     }, // 当表格的当前行发生变化的时候会触发该事件
1602 |     handleSelectAll(val) {
1603 |       let is_check = val.length > 0;
1604 |       this.self_data_list.forEach((i) => {
1605 |         this.$refs["wl-gantt"].toggleRowSelection(i, is_check);
1606 |       });
1607 |       this.$emit("select-all", val);
1608 |     }, // 当用户手动勾选全选 Checkbox 时触发的事件
1609 |     handleSelect(selection, row) {
1610 |       this.tableSelect(selection, row);
1611 |       let _is_add = selection.some((i) => i[this.rowKey] === row[this.rowKey]);
1612 |       this.selectionList = selection;
1613 |       this.$emit("select", selection, row, _is_add);
1614 |     }, // 当用户手动勾选全选 Checkbox 时触发的事件
1615 |     handleMouseEnter(row, column, cell, event) {
1616 |       if (this.useCard) {
1617 |         this.infoCard.show = true;
1618 |         this.infoCard.x = event.screenX;
1619 |         this.infoCard.y = event.screenY;
1620 |         this.infoCard.row = { ...row };
1621 |         this.infoCard.column = column;
1622 |         this.infoCard.cell = cell;
1623 |         this.infoCard.event = event;
1624 |         this.infoCard.timer && clearTimeout(this.infoCard.timer);
1625 |       }
1626 |       this.$emit("cell-mouse-enter", row, column, cell, event);
1627 |     }, // 当单元格 hover 进入时会触发该事件
1628 |     handleMouseLeave(row, column, cell, event) {
1629 |       if (this.useCard) {
1630 |         this.infoCard.timer = setTimeout(() => {
1631 |           this.infoCard.show = false;
1632 |           clearTimeout(this.infoCard.timer);
1633 |           this.infoCard.timer = null;
1634 |         }, 500);
1635 |       }
1636 |       this.$emit("cell-mouse-leave", row, column, cell, event);
1637 |     }, // 当单元格 hover 退出时会触发该事件
1638 |     handleCellClick(row, column, cell, event) {
1639 |       this.$emit("cell-click", row, column, cell, event);
1640 |     }, // 当某个单元格被点击时会触发该事件
1641 |     handleCellDbClick(row, column, cell, event) {
1642 |       this.$emit("cell-dblclick", row, column, cell, event);
1643 |     }, // 当某个单元格被双击击时会触发该事件
1644 |     handleRowClick(row, column, event) {
1645 |       /* if (this.useCheckColumn && this.quickCheck) {
1646 |         let is_check = this.selectionList.some(
1647 |           i => i[this.rowKey] == row[this.rowKey]
1648 |         );
1649 |         this.$refs["wl-gantt"].toggleRowSelection(row, !is_check);
1650 |         this.$nextTick(() => {
1651 |           this.handleSelect(this.selectionList, row, !is_check);
1652 |         });
1653 |       } */
1654 |       this.$emit("row-click", row, column, event);
1655 |     }, // 当某一行被点击时会触发该事件
1656 |     handleRowContextMenu(row, column, event) {
1657 |       this.$emit("row-contextmenu", row, column, event);
1658 |       // 处理右键菜单浮窗
1659 |       if (!Array.isArray(this.contextMenuOptions)) return;
1660 |       this.contextMenu.data = [];
1661 |       this.contextMenuOptions.forEach((i) => {
1662 |         let _item = {
1663 |           label: i.label,
1664 |           icon: i.icon,
1665 |           value: row[i.prop],
1666 |         };
1667 |         this.contextMenu.data.push(_item);
1668 |       });
1669 |       this.contextMenu.x = event.x;
1670 |       this.contextMenu.y = event.y;
1671 |       this.contextMenu.show = true;
1672 |     }, // 当某一行被鼠标右键点击时会触发该事件
1673 |     handleContextmenu() {
1674 |       event.preventDefault();
1675 |       event.stopPropagation();
1676 |     }, // 右键菜单事件
1677 |     handleRowDbClick(row, column, event) {
1678 |       this.$emit("row-dblclick", row, column, event);
1679 |     }, // 当某一行被双击时会触发该事件
1680 |     handleHeaderClick(column, event) {
1681 |       this.$emit("header-click", column, event);
1682 |     }, // 当某一列的表头被点击时会触发该事件
1683 |     handleHeaderContextMenu(column, event) {
1684 |       this.$emit("header-contextmenu", column, event);
1685 |     }, // 当某一列的表头被鼠标右键点击时触发该事件
1686 |     handleSortChange(e) {
1687 |       this.$emit("sort-change", e);
1688 |     }, // 当表格的排序条件发生变化的时候会触发该事件
1689 |     handleFilterChange(filters) {
1690 |       this.$emit("filter-change", filters);
1691 |     }, // 当表格的筛选条件发生变化的时候会触发该事件
1692 |     handleExpandChange(row, expanded) {
1693 |       this.$emit("expand-change", row, expanded);
1694 |     }, // 当表格的筛选条件发生变化的时候会触发该事件
1695 |     // ------------------------------------------- 以下为提供方法 ------------------------------------
1696 |     /**
1697 |      * 手动调用树表懒加载
1698 |      * row 要展开的行信息
1699 |      */
1700 |     loadTree(row) {
1701 |       this.$refs["tableRef"].store.loadOrToggle(row);
1702 |     },
1703 |     /**
1704 |      * 更新树表懒加载后的子节点
1705 |      * 要更新的节点id
1706 |      * 要添加的节点list
1707 |      */
1708 |     loadTreeAdd(id, list) {
1709 |       let _children = this.$refs["wl-gantt"].store.states.lazyTreeNodeMap[id] || [];
1710 |       this.$set(
1711 |         this.$refs["wl-gantt"].store.states.lazyTreeNodeMap,
1712 |         id,
1713 |         list.concat(_children)
1714 |       );
1715 |     },
1716 |     /**
1717 |      * 更新树表懒加载后的子节点
1718 |      * 要更新的节点id
1719 |      * 要删掉的字节的rowKey
1720 |      */
1721 |     loadTreeRemove(id, key) {
1722 |       let _children = this.$refs["wl-gantt"].store.states.lazyTreeNodeMap[id];
1723 |       let _new_children = _children.filter((i) => i[this.rowKey] != key);
1724 |       this.$set(this.$refs["wl-gantt"].store.states.lazyTreeNodeMap, id, _new_children);
1725 |     },
1726 |   },
1727 |   created() {
1728 |     this.self_date_type = this.dateType;
1729 |     this.self_start_date = this.startDate;
1730 |     this.self_end_date = this.endDate;
1731 |   },
1732 |   beforeDestroy() {
1733 |     if (this.infoCard.timer) {
1734 |       clearTimeout(this.infoCard.timer);
1735 |       this.infoCard.timer = null;
1736 |     }
1737 |   },
1738 | };
1739 | </script>
1740 | 
1741 | <!-- Add "scoped" attribute to limit CSS to this component only -->
1742 | <style lang="scss">
1743 | @import "./css/index.min.css";
1744 | </style>
1745 | 


--------------------------------------------------------------------------------