<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.desp}}</span>
|
<div v-for="(type_itm, k_) in task_itm.children" :key="k_" class="right_row_">
|
<span>{{k_+1}}、{{type_itm.typeStr}}</span>
|
<el-button size="mini" type="primary" v-if="userId === task_itm.userId" style="float: right; margin-top: 10px;" @click="handleTask(type_itm.id, type_itm.mustAttach, type_itm)">处理任务</el-button>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog @close="Cancel" width="40%" top="10%" :visible.sync="dialog_1" v-if="dialog_1">
|
<div slot="title" class="dialog-title" style="text-align: left;">
|
<span> 任务处理 </span>
|
</div>
|
<!-- 上传文件-->
|
<div v-if="handleTaskType.mustAttach" style="height: 150px;">
|
<el-upload
|
class="upload-demo"
|
:action="upload_url"
|
|
:data="upData"
|
:limit="1"
|
:file-list="fileList"
|
:auto-upload='false'
|
ref="upload"
|
>
|
<el-button size="medium" type="text">选择文件</el-button>
|
<div slot="tip" class="el-upload__tip">文件不超过50M</div>
|
</el-upload>
|
</div>
|
<div style="text-align: left;">
|
<span>描述</span>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入内容"
|
v-model="desc_task">
|
</el-input>
|
</div>
|
|
<!-- 处理完成 -->
|
<div slot="footer" class="dialog-footer">
|
<el-button v-if="handleTaskType.mustAttach" @click="submitUpload">点击上传</el-button>
|
<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: [],
|
userId:undefined,
|
dialog_1: false,
|
handleTaskType: {},
|
upload_url: "",
|
desc_task: "",
|
upData: {},
|
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 00:00:00';
|
this.getDatedef(systemDate);
|
this.userId = localStorage.getItem('userId');
|
},
|
|
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, type_itm) {
|
this.upload_url = "/api/api/file/fileUpload/" + id;
|
this.handleTaskType = type_itm;
|
this.dialog_1 = true;
|
},
|
|
doHandleTask() {
|
//此id的明细任务完成
|
let id = this.handleTaskType.id;
|
if(this.handleTaskType.mustAttach) {
|
this.upData = {//设置要传的参数
|
desp: this.desc_task
|
},
|
|
this.$refs.upload.submit();//开始上传
|
}
|
else {
|
var me = this;
|
let params = this.upData
|
let url = "/api/detail/deal/" + id;
|
this.$axios.get(url, {
|
params
|
})
|
.then(data_ => {
|
console.log(data_);
|
if(data_.data.success) {
|
this.$message('处理成功');
|
me.Cancel();
|
}else {
|
this.$message({message:'处理任务失败', type: 'warning'});
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
}
|
|
|
|
if (this.dialog_1) {
|
this.Cancel();
|
}
|
},
|
|
// submitUpload() {
|
// this.handleTaskType; //要处理的明细数据
|
|
// this.upData = {//设置要传的参数
|
|
// },
|
// this.upload_url = ""; //设置上传接口
|
// this.$refs.upload.submit();//开始上传
|
// },
|
|
Cancel() {
|
this.dialog_1 = false;
|
},
|
|
dateChange(date_) {
|
var imoment = this.$moment(date_);
|
let iformat = imoment.format('YYYY-MM');
|
let systemDate = iformat + '-01 00:00:00';
|
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},
|
], */
|
let url = "/api/detail/getMonth";
|
let params = {
|
startTime: this.$moment(month_).format('YYYY-MM-DD')
|
};
|
|
this.$axios.get(url, {
|
params
|
})
|
.then(data_ => {
|
console.log(data_);
|
let datas= data_.data.data;
|
datas = datas.map(el => {
|
var imoment = this.$moment(el.date);
|
// 格式化成，年月日
|
let iformat = imoment.format('YYYY-MM-DD');
|
el.date = iformat;
|
return el;
|
})
|
this.datedef = datas;
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
|
getDayData(date_) {//获取指定日的任务。如'2019-12-21'字符串。在右侧显示的
|
let url = "/api/detail/getDay";
|
let params = {
|
startTime: this.$moment(date_).format('YYYY-MM-DD')
|
};
|
|
this.$axios.get(url, {
|
params
|
})
|
.then(data_ => {
|
console.log(data_);
|
// let DayDatas = [
|
// {'id': "111", 'name': "测试1项目", 'desc': "此项目主要针对提高效率和销售量"}, //返回的数组字段
|
// {'id': "111_1", 'name': "立题服务", 'mustAttach': true, 'parentId': "111"}, //
|
// {'id': "111_2", 'name': "方案开发服务", 'mustAttach': false, 'parentId': "111"}, //
|
// ];
|
let list = data_.data.data;
|
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;
|
}).catch(error => {
|
console.log(error);
|
})
|
|
}
|
|
}
|
}
|
</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>
|
