work/src/components/MainPage/Year.vue

<style lang="scss" scoped>
.year{
  display: flex;
  height: 100%;
}
.tool-panel{
  width: 250px;
  padding: 15px;
  background-color: #F8F9FB;
  *{
    width: 100%;
    margin: 5px 0;
  }
}
table{
  flex: auto;
  thead{
    color: #909399;
    font-weight: 500;
  }
  tr{
    background-color: #FFF;
  }
  th,td{
    padding: 12px 0;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #EBEEF5;
    a{
      cursor: pointer;
    }
  }
}
.search-part{
  padding: 5px 15px;
  .add-user{
    float: right;
  }
}
.dialog-style{
  div{
    text-align: center;
    margin: 5px;
    label{
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .el-textarea,.el-input{
      display: inline-block;
      width: 400px;
    }
    .text-label{
      vertical-align: top;
      margin-top: 10px;
    }
  }
}
.center-text{
  text-align: center;
}
</style>
<template>
<div class="year">
  <div class="tool-panel">
    <el-button type="primary" @click="visibleChange = true;noEdit = false;plan = {};">新增年度计划</el-button>
  </div>
  <table>
    <thead>
        <tr>
            <th>计划名</th>
            <!-- <th>部门</th> -->
            <!-- <th>参与成员</th> -->
            <th>年份</th>
            <th>内容</th>
            <th style="width:120px;text-align: center;">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in planeList" :key="index">
          <td>{{item.name}}</td>
          <!-- <td>{{item.depart}}</td> -->
          <!-- <td>{{item.member}}</td> -->
          <td>{{item.year}}</td>
          <td>{{item.content}}</td>
          <td>
            <a @click="changeData(item,true)">详情</a>
            &nbsp;&nbsp;
            <a @click="changeData(item)">修改</a>
            &nbsp;&nbsp;
            <a @click="judgePlan(item)">评价</a>
            &nbsp;&nbsp;
            <a @click="visibleDelete = true;plan.id = item.id">删除</a>
          </td>
        </tr>
    </tbody>
  </table>
  <el-dialog
        class="dialog-style"
        :title="noEdit?'详情':'编辑'"
        :visible.sync="visibleChange"
        width="600px">
        <div>
          <label>名称：</label>
          <el-input name="name" v-model="plan.name" placeholder="请输入名称" required="required" :disabled="noEdit"></el-input>
        </div>
        <div>
          <label>年份：</label>
          <el-date-picker
            v-model="yearData"
            type="year"
            :disabled="noEdit"
            placeholder="选择年">
          </el-date-picker>
        </div>
        <div>
          <label class="text-label">内容：</label>
          <el-input v-model="plan.content" placeholder="请输入内容" required="required" type="textarea" :autosize="{ minRows: 5}" :disabled="noEdit"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="visibleChange = false;plan={}" v-if="!noEdit">取消</el-button>
            <el-button type="primary" @click="change" v-if="!noEdit">确 定</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="change" 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 { getPlanList,addPlan,updatePlan,deletePlan } from '@/api/year';
import Judge from "@/components/MainPage/Judge/Judge";

export default {
  name: 'Year',
  components:{
    Judge
  },
  data () {
      return {
        params:{
          userId: this.$store.state.checkUser.id
        },
        planeList:[],
        plan:{},
        yearData:'',
        noEdit: false,
        visibleChange: false,
        visibleDelete: false,
        visibleJudge: false,
        changeSignal: false
      }
  },
  created() {
    this.getPlanList();
  },
  methods: {
    getPlanList(){
      getPlanList().then((data) => {
        this.planeList = data.data;
      })
    },
    deletePlan(){
      deletePlan(this.plan).then((result) => {
        this.$message(result?'删除成功':'删除失败');
        this.visibleDelete = false;
        this.plan = {};
        this.getPlanList();
      })
    },
    changeData(item,flag){
      this.visibleChange = true;
      this.noEdit = flag;
      this.plan = JSON.parse(JSON.stringify( item ));
      this.yearData = new Date(item.year,1,1);
    },
    change(){
      this.plan.year = this.yearData.getFullYear();
      if(this.plan.id){
        updatePlan(this.plan).then((result) => {
          this.$message(result.result?'更新成功':'更新失败');
          this.visibleChange = false;
          this.visibleJudge = false;
          this.plan = {};
          this.getPlanList();
          this.$store.dispatch('setCurPlanSin');
        })
      }
      else{
        addPlan(this.plan).then((result) => {
          this.$message(result.result?'添加成功':'添加失败');
          this.visibleChange = false;
          this.plan = {};
          this.getPlanList();
          this.$store.dispatch('setCurPlanSin');
        })
      }
    },
    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;
      this.yearData = new Date(item.year,1,1);
    }
  }
}
</script>