work/src/components/MainPage/Month.vue

<style lang="scss" scoped>
.day-cell{
  height: 100%;
}
.dialog-style{
  div{
    text-align: center;
    margin: 5px 0;
    label,/deep/ .el-input,/deep/ .el-textarea{
      display: inline-block;
      vertical-align: middle;
    }
    /deep/ .el-input{
      width: 200px;
    }
    /deep/ .el-textarea{
      width: 460px;
    }
    .el-select /deep/ .el-input{
      width: 70px;
    }
  }
  .add-bt{
    cursor: pointer;
    font-size: 18px;
    float: right;
  }
  .del-bt{
    cursor: pointer;
    font-size: 18px;
  }
}
.hide{
  opacity: 0;
}
</style>
<template>
<div>
  <el-calendar v-model="searchMonth">
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <div class="day-cell" @click="chooseDay(data)">
        <p>{{getDayNum(data.day)}}</p>
        <div v-if="new Date(data.day).getMonth() == searchMonth.getMonth()">
          <p v-for="item in planList[getDayNum(data.day)]" :key="item.id" :style="{'color':colorSet[item.status]}">
            {{item.name}}
          </p>
        </div>
      </div>
    </template>
  </el-calendar>
   <el-dialog
      class="dialog-style"
      title="编辑计划"
      :visible.sync="visibleChange"
      width="1000px">
      <div v-for="(item, index) in dayPlan" :key="index">
          <label>计划：</label>
          <el-input placeholder="" v-model="item.name" :disabled="!ableEdit"></el-input>
          &nbsp;
          <label>内容：</label>
          <el-input type="textarea" autosize placeholder="" v-model="item.content" :disabled="!ableEdit"></el-input>
          &nbsp;
          <label :class="{'hide':!item.id}">状态：</label>
          <el-select v-model="item.status" placeholder="请选择" size="mini" :class="{'hide':!item.id}" :disabled="item.id == null || !ableEdit">
            <el-option :label="'准备'" :value="0"></el-option>
            <el-option :label="'执行'" :value="1"></el-option>
            <el-option :label="'暂搁'" :value="2"></el-option>
            <el-option :label="'完成'" :value="3"></el-option>
            <el-option :label="'中止'" :value="4"></el-option>
          </el-select>
          &nbsp;
          <el-button @click="judgePlan(item)" type="text" :class="{'hide':!item.id}" :disabled="item.id == null">评价</el-button>
          &nbsp;
          <i class="el-icon-remove-outline del-bt" @click="visibleDelete = true;plan = item;deleteIndex = index" v-if="ableEdit"></i>
      </div>
      <i class="el-icon-circle-plus-outline add-bt" @click="addDayPlan()" v-if="ableEdit"></i>
      <span slot="footer" class="dialog-footer" v-if="ableEdit">
        <el-button @click="visibleChange = false">取 消</el-button>
        <el-button type="primary" @click="editTask">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        :title="plan.name + ' 任务评价'"
        :visible.sync="visibleJudge"
        width="800px">
        <div v-html="plan.evaluation" v-show="noEdit"></div>
        <Judge :planJudge="plan.evaluation" :changeSignal="changeSignal" @setEvaluation="setEvaluation" v-show="!noEdit"></Judge>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="noEdit = false;" v-if="noEdit">编辑</el-button>
            <el-button type="primary" @click="visibleJudge = false;plan={}" v-if="!noEdit">取消</el-button>
            <el-button type="primary" @click="editTask" v-if="!noEdit">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="visibleDelete"
      width="200px">
      <p class="center-text">确认删除?</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleDelete = false;plan={}">取 消</el-button>
        <el-button type="primary" @click="deletePlan">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { getMonthPlan,addPlan,updatePlan,deletePlan } from '@/api/month';
import Judge from "@/components/MainPage/Judge/Judge";

export default {
  name: 'Month',
  components: {
    Judge
  },
  data () {
    return {
      colorSet:{
        0:'gray',
        1:'blue',
        2:'red',
        3:'green',
        4:'yellow',
      },
      searchMonth: new Date(),
      params:{
        startTime: '',
        userId: this.$store.state.checkUser.id
      },
      visibleChange: false,
      planList: {},
      dayPlan: [],
      visibleDelete: false,
      plan:{},
      deleteIndex: '',
      noEdit: false,
      visibleJudge: false,
      changeSignal: false
	  }
  },
  created() {
    this.getMonthPlan();
  },
  watch: {
    searchMonth(val,old) {
      if(val.getMonth() != old.getMonth()){
        this.params.startTime = val.getTime();
        this.getMonthPlan();
      }
    },
    '$store.state.checkUser.id'(val){
      this.params.userId = val;
      this.getMonthPlan();
    }
  },
  computed: {
      ableEdit() {
          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
      },
  },
  methods: {
    getMonthPlan(){
      getMonthPlan(this.params).then((data) => {
        this.planList = {};
        for(let key in data.data){
          this.$set(this.planList,key,data.data[key]);
        }
      })
    },
    editTask(){
      this.visibleChange = false;
      this.dayPlan.forEach(item => {
        if(item.id){
          let temp = {
            "id": item.id,
            "name": item.name,
            "content": item.content,
            "status": item.status,
            "startTime": this.searchMonth.getTime(),
          }
          updatePlan(temp).then((data) => {
            if(!data.result){
              this.$message(data.message);
            }
            this.getMonthPlan();
          })
        }
        else{
          addPlan(item).then((data) => {
            if(!data.result){
              this.$message(data.message);
            }
            this.getMonthPlan();
          })
        }
      })
    },
    chooseDay(data){
      if(new Date(data.day).getMonth() != this.searchMonth.getMonth()){
        return;
      }
      this.visibleChange = true;
      let day = this.getDayNum(data.day);
      this.dayPlan = JSON.parse(JSON.stringify(this.planList[day]));
    },
    addDayPlan(){
      this.dayPlan.push({
        "name": "",
        "content": "",
        "year": this.searchMonth.getFullYear(),
        "userId": "",
        "startTime": this.searchMonth.getTime(),
      })
    },
    deletePlan(){
      if(this.plan.id){
        let temp = {
          id: this.plan.id
        }
        deletePlan(temp).then((data) => {
          if(!data.result){
            this.$message(data.message);
          }
          else{
            this.dayPlan.splice(this.deleteIndex,1);
          }
        })
      }
      else{
        this.dayPlan.splice(this.deleteIndex,1);
      }
      this.visibleDelete = false;
      this.plan={};
    },
    getDayNum(day){
      return ~~day.split('-')[2];
    },
    setEvaluation(val){
      this.plan.evaluation = val;
    },
    judgePlan(item){
      this.visibleJudge = true;
      this.noEdit = true;
      this.plan = JSON.parse(JSON.stringify( item ));
      this.changeSignal = !this.changeSignal;
    }
  }
}
</script>