|
|
@@ -0,0 +1,243 @@
|
|
|
+<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>
|
Lijy