<template>
|
<div class="calendar_div" ref="calendar_div">
|
<div style="float: left; width: 75%;" class="z_calendar_table">
|
<ele-calendar
|
:render-content="renderContent"
|
:data="datedef"
|
:prop="prop"
|
@pick="datePick"
|
@date-change="dateChange"
|
></ele-calendar>
|
</div>
|
|
<div class="z_right" >
|
<div v-for="(task_itm, k) in DayDataTree" :key="k" class="right_row">
|
<h3>{{task_itm.name}}</h3>
|
<span>{{task_itm.desc}}</span>
|
<div v-for="(type_itm, k_) in task_itm.children" :key="k_" class="right_row_">
|
<span>{{k_+1}}、{{type_itm.name}}</span>
|
<el-button size="mini" type="primary" style="float: right; margin-top: 10px;" @click="handleTask(type_itm.id, type_itm.mustAttach)">处理任务</el-button>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog @close="Cancel" width="20%" top="10%" :visible.sync="dialog_1">
|
<div slot="title" class="dialog-title" style="text-align: left;">
|
<span> 上传交付物 </span>
|
</div>
|
<!-- 上传文件-->
|
<div style="height: 100px;">
|
<el-upload
|
class="upload-demo"
|
:action="upload_url"
|
multiple
|
:limit="3"
|
:file-list="fileList"
|
ref="upload"
|
>
|
<el-button size="medium" type="text">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip">文件不超过500kb</div>
|
</el-upload>
|
</div>
|
|
<!-- 处理完成 -->
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="Cancel">取 消</el-button>
|
<el-button type="primary" @click="doHandleTask">处理完成</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import eleCalendar from "ele-calendar";
|
import 'ele-calendar/dist/vue-calendar.css';
|
export default {
|
components: {
|
eleCalendar
|
},
|
data(){
|
return{
|
datedef:[
|
{'date': "2020-01-01", 'task': 3},
|
{'date': "2020-01-11", 'task': 2},
|
],
|
prop:'date' ,//对应日期字段名
|
DayDataTree: [],
|
|
dialog_1: false,
|
handleTaskType: {},
|
upload_url: "",
|
fileList: [],
|
}
|
},
|
|
mounted() {
|
let header_height = this.$refs.calendar_div.getElementsByClassName('z_calendar_table')[0].offsetHeight;
|
this.$refs.calendar_div.getElementsByClassName('z_right')[0].style['height'] = header_height + "px";
|
|
//获取当月数据
|
let nowDate = new Date();
|
var imoment = this.$moment(nowDate);
|
let iformat = imoment.format('YYYY-MM');
|
let systemDate = iformat + '-01';
|
this.getDatedef(systemDate);
|
|
},
|
|
methods: {
|
renderContent(h, parmas) {
|
let defdate= parmas.defdate;
|
//把时间转成时间戳
|
var imoment = this.$moment(defdate);
|
//把时间进行格式化
|
let geshi = imoment.format('YYYY-MM-DD');
|
//拿到时间所对应的星期
|
let week = imoment.day();
|
const loop = data =>{
|
return (
|
data.defvalue.value ? (<div class='z_calendar_s'><div>{data.defvalue.text}</div>
|
<span class='class_task'>{data.defvalue.value.task}个任务</span>
|
</div>) : <div>{data.defvalue.text}</div>);
|
};
|
return (
|
<div class="z_calendar_call" style="height: 10vh; min-height: 60px; border-right: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;">
|
<div style="height: 100%;" >
|
{loop(parmas)}
|
</div>
|
</div>
|
);
|
},
|
|
handleTask(id, mustAttach) {
|
this.handleTaskType.id = id;
|
if(mustAttach) {
|
this.dialog_1 = true;
|
}
|
else {
|
this.doHandleTask();
|
}
|
|
},
|
|
doHandleTask() {
|
//此id的明细任务完成
|
let id = this.handleTaskType.id;
|
//请求改变此明细的完成状态；
|
|
if (this.dialog_1) {
|
this.Cancel();
|
}
|
|
},
|
|
Cancel() {
|
this.dialog_1 = false;
|
},
|
|
dateChange(date_) {
|
var imoment = this.$moment(date_);
|
let iformat = imoment.format('YYYY-MM');
|
let systemDate = iformat + '-01';
|
this.getDatedef(systemDate);
|
},
|
|
datePick(date, event, row, dome) {
|
var imoment = this.$moment(date);
|
// 格式化成，年月日
|
let iformat = imoment.format('YYYY-MM-DD');
|
// 格式化，拿到日
|
let idate = imoment.date();
|
// 拿到星期
|
let week = imoment.day();
|
this.getDayData(iformat);
|
},
|
|
getDatedef(month_) {//获取指定年月的数据。参数是'2019-12-01'字符串，都是1号。在日历中显示
|
/* aa:[
|
{'date': "2020-01-01", 'task': 3}, //返回的数组字段包含这两个字段
|
{'date': "2020-01-11", 'task': 2},
|
], */
|
|
},
|
|
getDayData(date_) {//获取指定日的任务。如'2019-12-21'字符串。在右侧显示的
|
/* aa:[
|
{'id': "项目的id", 'name': "项目名称", 'desc': "项目描述"}, //返回的数组字段
|
{'id': "明细的ID(用于处理时知道是哪个项目哪个类型的处理)", 'name': "类型名称", 'mustAttach': "有无交付物", 'parentId': "项目id"}, //
|
], */
|
let DayDatas = [
|
{'id': "111", 'name': "测试1项目", 'desc': "此项目主要针对提高效率和销售量"}, //返回的数组字段
|
{'id': "111_1", 'name': "立题服务", 'mustAttach': true, 'parentId': "111"}, //
|
{'id': "111_2", 'name': "方案开发服务", 'mustAttach': true, 'parentId': "111"}, //
|
];
|
|
let list = DayDatas;
|
let parId = "";
|
let obj = {};
|
let result = [];
|
|
list.map(el => {
|
obj[el.id] = el;
|
})
|
for(let i=0, len = list.length; i < len; i++) {
|
let id = list[i].parentId;
|
//设置显示字段
|
list[i].value = list[i].id;
|
list[i].label = list[i].name;
|
|
if(id == parId || !id) {
|
if(!obj[list[i].id].children) {
|
obj[list[i].id].children = [];
|
}
|
result.push(list[i]);
|
continue;
|
}
|
if(obj[id].children) {
|
obj[id].children.push(list[i]);
|
} else {
|
obj[id].children = [list[i]];
|
}
|
}
|
this.DayDataTree = result;
|
|
}
|
|
}
|
}
|
</script>
|
|
<style>
|
.z_calendar_s{
|
height: 100%;
|
background-color: #40ff9e;
|
}
|
|
.z_calendar_call :hover{
|
background-color: #9ec6f1;
|
}
|
|
.z_right {
|
float: right;
|
width: 24%;
|
border: 1px solid #e4eef9;
|
overflow: auto;
|
border-radius: 10px;
|
box-shadow: 0px 0px 10px 5px #D0E2E9;
|
}
|
|
.class_task{
|
font-weight: bold;
|
font-size: 15px;
|
color: #999;
|
}
|
.calendar_div table th{
|
border-top: 1px solid #ebeef5;
|
border-right: 1px solid #ebeef5;
|
background-color: #b5d8fd;
|
}
|
.calendar_div .el-date-table-calendar td.current[data-v-55be3324]:not(.disabled){
|
|
}
|
.right_row {
|
padding: 5px;
|
padding-left: 10px;
|
text-align: left;
|
box-sizing: border-box;
|
border-bottom: 1px solid #999
|
}
|
.right_row_ {
|
height: 60px;
|
line-height: 60px;
|
text-align: left;
|
border-bottom: 1px solid #ece5e5
|
}
|
|
</style>
|
