item-management-web/src/views/item/planList.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
    </div>
    <div style="padding-top: 30px;">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="itemName +'【项目阶段确认和评价】' " name="first" class="pane">
          <div class="form-container" >
            <div style="height: 300px;">
              <el-timeline v-if="stageFlow.length>0">
                <el-timeline-item v-for="(s,index) in stageFlow" :key="index" :timestamp="s.name" placement="top"  color="green">
                  <el-card class="card">
                    <div class="it">
                      <span class="el-icon-s-flag">目标：</span> <el-tag type="success">{{s.target}}</el-tag>
                    </div>
                    <div class="it">
                      <span class="el-icon-time">时间段：</span> <el-tag>{{s.startDate}}</el-tag> 至 <el-tag>{{s.endDate}}</el-tag>
                    </div>
                    <div v-if="s.weight" class="it">
                      <span class="el-icon-coin">提成比重：</span> <el-tag type="danger">{{s.weight}}%</el-tag>
                    </div>
                    <div v-if="s.dutyer" class="it">
                      <span class="el-icon-user-solid">负责人：</span> <el-tag>{{s.dutyer}}</el-tag>
                    </div>
                    <div v-if="s.coefficient" class="it">
                      <span class="el-icon-coin">逾期提成系数：</span> <el-tag type="danger">{{s.coefficient}}%</el-tag>
                    </div>
                    <div v-if="s.participated" class="it" >
                      <icon class="el-icon-user"/> 参与人提成系数：
                      <span v-for="(p,index) in s.participated" :key="index"><el-tag>{{p.userName}} : {{p.weight}}%</el-tag>
                      </span>
                    </div>
                    <el-switch
                      class="del"
                      style="display: block"
                      v-model= s.overdue
                      active-color="#ff4949"
                      inactive-color="#13ce66"
                      active-text="逾期"
                      inactive-text="未逾期"
                      @change="updateOverdue(s)">
                    </el-switch>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <el-alert v-else
                title="此项目还未排期"
                type="error"
                :closable="false"
                show-icon>
              </el-alert>
            </div>
          </div>
          <div class="form-container" style="margin-left: 50px; margin-right:100px;">
            <el-form ref="postForm" :model="postForm" >
              <el-row>
                <el-col>
                  <el-form-item
                    label="项目评语："
                    prop="remark"
                    label-width="180px"
                    class="postInfo-container-item"
                  >
                    <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 8}" v-model="postForm.comments" class="filter-item" placeholder="200字符"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item
                    label="评价权重："
                    label-width="180px"
                    class="postInfo-container-item"
                  >
                    <div class="block" style="height: 250px">
                      <el-rate v-model="postForm.weight" :max="maxScore" score-template="{value}%" show-score allow-half	class="filter-item"></el-rate>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item
                    label-width="180px"
                    class="postInfo-container-item"
                  >
                    <el-button type="success" @click="commit" class="filter-item">提 交</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  export default {
    name: 'planList',
    components: {
      Breadcrumb,
    },
    data() {
      return {
        type: 'detail',
        itemId: this.$route.query.id,
        itemName: this.$route.query.itemName,
        id:null,
        activeName: 'first',
        vLoading: false,
        listQuery:{},
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
        stageFlow:[],
        stages:[],
        value1: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        maxScore:100,
        postForm:{
          id:null,
          itemId:null,
          weight:null,
          comments:null
        }
      }
    },
    created() {
      this.getFlow();
      this.getEvaluate();
    },
    methods: {
      commit(){
        if (!this.itemId){
          this.$notify({
            title: '错误',
            message: '提交失败',
            type: 'error',
            duration: 1000
          });
          return;
        }
        this.postForm.itemId = this.itemId;
        if (this.postForm.id){
          this.$api.itemEvaluate.edit(Object.assign({}, this.postForm, {
          })).then(res=>{
            if (res.code ===200){
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 1000
              });
              this.getEvaluate();
            }
          });
        }else {
          this.$api.itemEvaluate.add(Object.assign({}, this.postForm, {
          })).then(res=>{
            if (res.code ===200){
              this.$notify({
                title: '成功',
                message: '评价成功',
                type: 'success',
                duration: 1000
              });
              this.getEvaluate();
            }
          })
        }
      },
      getEvaluate(){
        this.$api.itemEvaluate.detailByItemId(this.itemId).then(res => {
          this.postForm = res.data === null ? [] : res.data;
        });
      },
      updateOverdue(stage){
        this.$api.itemStage.confirm({stageId:stage.id ,overdue:stage.overdue}).then(res=>{
          if (res.code === 200){
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            });
          }
        })
      },
      getSimpleAll() {
        this.$api.itemStage.simpleAll(this.itemId).then(res => {
          this.stages = res.data;
        });
      },
      getFlow() {
        this.$api.itemStage.flow(this.itemId).then(res => {
          this.stageFlow = res.data === null ? [] : res.data;
        });
      }
    }
  }
</script>
<style lang="css" scoped>
    .pane{
      display: flex;
    }
    .pane>div{
      flex: 1;
    }
    .form-container{
      padding-top: 30px;
      width: 500px;
      height: 800px;
      border: 1px solid darkgray;
      box-shadow: 10px 10px 5px #888888;;
      border-radius: 10px;
      overflow: auto;
    }
    .form-container:hover{

    }
    .evaluate{
      width: 300px;
      /*height: 800px;*/
      margin-left: 100px;
      overflow: auto;
    }
    div.it{
      margin-top: 10px;
    }
    .card{
      display: flex;
      width: 600px;
    }
    .del{
      position: absolute;
      top:60px;
      left: 480px;
    }
    .filter-item{
      width: 80%;
    }
  /deep/ .el-rate__icon{
    font-size: 30px;
  }
</style>