manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/vueGantt.vue

<template>
  <div>
     <el-table :data="treeDataList" height="490px" row-key="id" show-overflow-tooltip :cell-style="TableCellStyle" size="mini" :span-method="arraySpanMethod" style="width: 100%;margin-bottom: 20px;" border default-expand-all :tree-config="{children: 'children', expandAll: true}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="text" label="姓名" width="240" fixed="left"></el-table-column>
        <el-table-column :label="item.name" v-for="(item, index) in headerData" :key="index">
            <el-table-column :label="items" v-for="items, idx in item.children" :key="idx" width="160px">
              <template slot-scope="scope">
                <div>
                  {{scope.row.end_date | dataValue(scope.column, scope.row)}}
                </div>
              </template>
            </el-table-column>
        </el-table-column>
     </el-table>
  </div>
</template>

<script>
export default {
  props: {
    stafforpro: {
        type: [String, Array, Object],
        default: false
    },
    valueDate:{
        type: [String, Array, Object],
        default: false
    },
    updatakey1:{
        type: [String, Array, Object],
        default: false
    },
    tasks: {
        type: Array,
        default: []
    }
  },
  components: {},
  data() {
    return {
      tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        initialMonth: '', // 开始月份
        headerData: [], // 表头数据
        treeDataList: []
    };
  },
  filters: {
    dataValue: function (endDate, item, value) {
      if(endDate) {
        let biaoto = item.label
        if(biaoto >= value.start_date && biaoto < endDate) {
          return value.text
        }
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log(this.stafforpro)
    console.log(this.valueDate)
    console.log(this.updatakey1)
    console.log(this.tasks)
    let dataList = []
    let allDataList = []
    let star = this.valueDate[0].split('-')
    let end = this.valueDate[1].split('-')
    this.initialMonth = star[0] + '-' + star[1]
    dataList = this.getYearAndMonth(star[0] + '-' + star[1], end[0] + '-' + end[1])
    allDataList = this.getdiffdate(this.valueDate[0], this.valueDate[1])
    this.combination(dataList, allDataList)
    this.treeDataList = this.integrationTree(this.tasks.data)
  },
  methods: {
    // 截取两个日期的月份数
     getYearAndMonth(start, end) {
      console.log(start, end)
      let monthList = [];
      let starts = start.split('-');
      let ends = end.split('-');
      let staYear = parseInt(starts[0]);
      let staMon = parseInt(starts[1]);
      let endYear = parseInt(ends[0]);
      let endMon = parseInt(ends[1]);
      while (staYear <= endYear) {
        if (staYear === endYear) {
          while (staMon < endMon) {
            staMon++;
            var str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
            monthList.push(str);
          }
          staYear++;
        } else {
          staMon++;
          if (staMon > 12) {
            staMon = 1;
            staYear++;
          }
          let str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
          monthList.push(str);
        }
      }
      return monthList;
    },
    // 获取所有期间的日期
    getdiffdate(stime,etime){
      var diffdate = new Array();
      var i=0;
      while(stime<=etime){
          diffdate[i] = stime;
          var stime_ts = new Date(stime).getTime();
          var next_date = stime_ts + (24*60*60*1000);
          var next_dates_y = new Date(next_date).getFullYear()+'-';
          var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1)+'-':(new Date(next_date).getMonth()+1)+'-';
          var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();
          stime = next_dates_y+next_dates_m+next_dates_d;
          i++;
      }
      return diffdate
    },
    // 计算组合月份和日期
    combination(month, data) {
      let monthStr = [this.initialMonth, ...month]
      let arrList = []
      for(let i in monthStr) {
        let obj = {}
        obj.name = monthStr[i]
        obj.children = []
        for(let j in data) {
          if(data[j].indexOf(monthStr[i]) != '-1') {
            obj.children.push(data[j])
          }
        }
        arrList.push(obj)
      }
      this.headerData = arrList
      console.log(this.headerData)
    },
    // 接收的数据整合成树形结构
    integrationTree(data) {
       let treeData = []
       if(!Array.isArray(data)) {
           return treeData
       }
       data.forEach(item => {
           delete item.children;
       });
       let map = {};
       data.forEach(item => {
        if(item.text == '杨峰') {
          console.log(item)
        }
           map[item.id] = item;
       });
       data.forEach(item => {
           let parent = map[item.parent];
           if(parent) {
               (parent.children || (parent.children = [])).push(item);
           } else {
               treeData.push(item);
           }
       });
       return treeData;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex == 4) {
          if (columnIndex == 4) {
            return [1, 5];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
    },
    // 设置每一个单元格的样式
    TableCellStyle(row) {
      if(row.row.color) {
        let biaoto = row.column.label
        if(biaoto >= row.row.start_date && biaoto < row.row.end_date) {
          console.log('进来了')
          return 'background-color: '+ row.row.color +' !important;'
        }
      }
    }
  },
};
</script>

<style>
</style>