日历

zhangyanpeng

2020-01-20 eb84f1eb1253df3fea8a0a495d98f1a82db356b5

 src/views/calendarTask.vue

@@ -1,12 +1,257 @@
<template>
   <div>日历任务列表</div>
   <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>
   export default {
	  
   };
</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>