2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

 src/views/calendarTask.vue

@@ -1,12 +1,366 @@
<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.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 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"
               :on-success="upSuccess"
               :on-error="upError"
               >
               <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="请输入内容"
               @change="setDesc"
               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>
   export default {
	  
   };
</script>
   import eleCalendar from "ele-calendar";
   import 'ele-calendar/dist/vue-calendar.css';
    export default {
        components: {
               eleCalendar
        },
        data(){
           return{
                  isZ: true,
                  me_date: null,
              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();
               this.me_date = nowDate;
               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');
               this.userId = this.$cookies.get('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;
               },
					
               setDesc(val) {
                  this.upData = {//设置要传的参数
                     desp: val
                  };
               },
					
               doHandleTask() {
                  //此id的明细任务完成
                  let id = this.handleTaskType.id;
                  if (!this.desc_task) {
                     this.$message('请填写描述');
                     return
                  }
						
                  if(this.handleTaskType.mustAttach) {
                     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();//开始上传
             },
				 
             upSuccess(response, file, fileList) {
                this.$message('上传成功');
                this.Cancel();
             },
				 
             upError(err, file, fileList) {
                this.$message('上传失败');
             },
					
               Cancel() {
                  this.isZ = false;
                  this.isZ = true;
                  this.dialog_1 = false;
						
               //   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";
                  this.DayDataTree = [];
                  var imoment = this.$moment(this.me_date);
                  let iformat = imoment.format('YYYY-MM');
                  let systemDate = iformat + '-01 00:00:00';
                  this.getDatedef(systemDate);
               },
					
               dateChange(date_) {
                  this.me_date = 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_);
                        window.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_);
                        window.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>