|
|
@@ -1,9 +1,29 @@
|
|
|
<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 :data="treeDataList" height="490px" row-key="id" :key="'1'" show-overflow-tooltip :cell-style="TableCellStyle" size="mini" :span-method="arraySpanMethod" style="width: 100%;margin-bottom: 20px;" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
|
|
+ <el-table-column prop="text" label="姓名" width="240" fixed="left" v-if="stafforpro != '按项目查看'">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- user.userNameNeedTranslate == 1 -->
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && scope.row.type == 'department'"><ww-open-data type='departmentName' :openid='scope.row.text'></ww-open-data></span>
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && scope.row.type == 'user'"><ww-open-data type='userName' :openid='scope.row.text'></ww-open-data></span>
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && (scope.row.type == 'null' || scope.row.type == null)">{{scope.row.text}}</span>
|
|
|
+ <span v-if="user.userNameNeedTranslate != 1">{{scope.row.text}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="text" label="项目" width="240" fixed="left" v-if="stafforpro == '按项目查看'">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && scope.row.type == 'user'">
|
|
|
+ <span v-for="(item, index) in scope.row.userNameList" :key="index">
|
|
|
+ <ww-open-data type='userName' :openid='scope.row.text'></ww-open-data>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && scope.row.type == 'user'">{{scope.row.proNameText}}</span>
|
|
|
+ <span v-if="user.userNameNeedTranslate == 1 && (scope.row.type == 'null' || scope.row.type == null)"> {{scope.row.text}}</span>
|
|
|
+ <span v-if="user.userNameNeedTranslate != 1">{{scope.row.text}}</span>
|
|
|
+ </template>
|
|
|
+ </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">
|
|
|
+ <el-table-column :label="items" v-for="items, idx in item.children" :key="idx" width="120px" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div>
|
|
|
{{scope.row.end_date | dataValue(scope.column, scope.row)}}
|
|
|
@@ -38,71 +58,21 @@ export 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: []
|
|
|
+ treeDataList: [],
|
|
|
+ num: 0,
|
|
|
+ mergeList: [],
|
|
|
+ valueDateList: [],
|
|
|
+ user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
};
|
|
|
},
|
|
|
filters: {
|
|
|
dataValue: function (endDate, item, value) {
|
|
|
if(endDate) {
|
|
|
- let biaoto = item.label
|
|
|
- if(biaoto >= value.start_date && biaoto < endDate) {
|
|
|
- return value.text
|
|
|
+ let biaoto = item.label.split(' ')[0]
|
|
|
+ if(biaoto == value.end_date) {
|
|
|
+ // return value.text
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -111,21 +81,85 @@ export default {
|
|
|
watch: {},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
- console.log(this.stafforpro)
|
|
|
- console.log(this.valueDate)
|
|
|
- console.log(this.updatakey1)
|
|
|
- console.log(this.tasks)
|
|
|
+ console.log(this.stafforpro,'值')
|
|
|
+ // 重置两个属性值
|
|
|
+ this.num = 0,
|
|
|
+ this.mergeList = []
|
|
|
let dataList = []
|
|
|
let allDataList = []
|
|
|
+ this.valueDateList = this.valueDate
|
|
|
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)
|
|
|
+ // 递归加颜色
|
|
|
+ this.treeDataList = this.recursive(this.tasks.data);
|
|
|
+
|
|
|
+ // this.treeDataList = this.integrationTree(this.tasks.data)
|
|
|
+ console.log(this.mergeList, '合并数据')
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 递归加颜色以及存储需要合并的数据
|
|
|
+ recursive(data) {
|
|
|
+ for (let i in data) {
|
|
|
+ if(this.stafforpro == '按项目查看') {
|
|
|
+ data[i].color = '#409EFF'
|
|
|
+ if(data[i].type == 'user' && data[i].text) {
|
|
|
+ let arr = []
|
|
|
+ if(data[i].text.indexOf('/') != '-1') {
|
|
|
+ let str = data[i].text.split('/')[0]
|
|
|
+ if(str.indexOf(',') != '-1') {
|
|
|
+ let arrList = str.split(',')
|
|
|
+ data[i].userNameList = arrList
|
|
|
+ } else {
|
|
|
+ arr.push(str)
|
|
|
+ data[i].userNameList = arr
|
|
|
+ }
|
|
|
+ data[i].proNameText = data[i].text.split('/')[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.num++
|
|
|
+ let obj = {
|
|
|
+ ins: this.num,
|
|
|
+ numDay: 1,
|
|
|
+ column: 1
|
|
|
+ }
|
|
|
+ if(data[i].end_date) {
|
|
|
+ let day = this.dayjs(data[i].end_date).diff(data[i].start_date, 'day') // 和并多少行
|
|
|
+ let column = this.dayjs(data[i].end_date).diff(this.valueDateList[0], 'day') // 从多少列开始
|
|
|
+ console.log(day)
|
|
|
+ if(day >= 1) {
|
|
|
+ if(day >= 3) {
|
|
|
+ if(this.valueDateList[0] > data[i].start_date) {
|
|
|
+ obj.column = 1
|
|
|
+ day >= column ? obj.numDay = column : obj.numDay = day
|
|
|
+ } else {
|
|
|
+ let num = this.dayjs(data[i].start_date).diff(this.valueDateList[0], 'day')
|
|
|
+ obj.column = +num + 1
|
|
|
+ day >= column ? obj.numDay = column : obj.numDay = day
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ day >= column ? obj.numDay = column : obj.numDay = day
|
|
|
+ obj.column = column
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.mergeList.push(obj)
|
|
|
+ if(data[i].id.indexOf(this.$t('chu-cha')) != '-1') {
|
|
|
+ data[i].color = '#E6A23C'
|
|
|
+ }
|
|
|
+ if(data[i].id.indexOf(this.$t('other.AskForLeave')) != '-1') {
|
|
|
+ data[i].color = '#F56C6C'
|
|
|
+ }
|
|
|
+ if (data[i].children) {
|
|
|
+ this.recursive(data[i].children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ },
|
|
|
// 截取两个日期的月份数
|
|
|
getYearAndMonth(start, end) {
|
|
|
console.log(start, end)
|
|
|
@@ -176,13 +210,15 @@ export default {
|
|
|
combination(month, data) {
|
|
|
let monthStr = [this.initialMonth, ...month]
|
|
|
let arrList = []
|
|
|
+ let weekArrayList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六',]
|
|
|
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])
|
|
|
+ let index = new Date(data[j]).getDay()
|
|
|
+ if(data[j].indexOf(monthStr[i]) != '-1') {
|
|
|
+ obj.children.push(data[j] + ' (' + weekArrayList[index] + ')')
|
|
|
}
|
|
|
}
|
|
|
arrList.push(obj)
|
|
|
@@ -217,21 +253,31 @@ export default {
|
|
|
return treeData;
|
|
|
},
|
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
- if (rowIndex == 4) {
|
|
|
- if (columnIndex == 4) {
|
|
|
- return [1, 5];
|
|
|
- } else if (columnIndex === 1) {
|
|
|
- return [0, 0];
|
|
|
- }
|
|
|
- }
|
|
|
+ // if (rowIndex == 0) {
|
|
|
+ // if (columnIndex == 2) {
|
|
|
+ // return [1, 18];
|
|
|
+ // } else if(columnIndex == 1){
|
|
|
+ // return [0, 0];
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (rowIndex == +this.mergeList[rowIndex].ins -1) {
|
|
|
+ // if (columnIndex == +this.mergeList[rowIndex].column + 1) {
|
|
|
+ // return [1, +this.mergeList[rowIndex].numDay + 1];
|
|
|
+ // } 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;'
|
|
|
+ let biaoto = row.column.label.split(' ')[0]
|
|
|
+ // if(biaoto >= row.row.end_date || biaoto <= row.row.start_date) {
|
|
|
+ if(biaoto >= row.row.start_date && biaoto <= row.row.end_date) {
|
|
|
+ if(row.row.color) {
|
|
|
+ return 'background-color: '+ row.row.color +' !important;color: #fff'
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
Lijy