gdy_app_8/src/performance-07-19/view/navhome/me.vue

<template>
  <div class="all" :class="{ bg_fff: skeletonLoad }">
    <van-nav-bar title="我的绩效" left-text="返回" left-arrow @click-left="$route_back" />
    <div class="overall">
      <VanSkeleton :skeLoad="skeletonLoad">
        <scroller>
          <div class="title">
              <span>考核信息</span>
              <span class="more-btn" @click="goMorePage()">
                查看更多
                <van-icon name="arrow" />
              </span>

              </div>


          <div class="list-box">

            <div class="flex-box-ce" style="margin-bottom: 0.2rem;">
              <div>
                <userImage class="about-me__avatar" :id="showUserInfo.id" :img_url="showUserInfo.img_url"  :user_name="showUserInfo.name"  fontSize="0.24"  width="0.8rem"  height="0.8rem"></userImage>
              </div>
              <div class="user-info">
                <div style="margin-bottom: 0.05rem; color: #000;">{{ showUserInfo.name }}</div>
                <template v-if="showDeptList && showDeptList.length > 0">
                  <span v-for="item in showDeptList" :key="item.dept_id">{{ item.dept_name }}&nbsp;</span>
                </template>
              </div>
            </div>

            <div class="examine-info">
              <div class="info-item flex-box-ce">
                考核周期：&nbsp;&nbsp;&nbsp; <div class="cycle-type">{{ cycleType | formatCycleType }}</div>
              </div>
              <div class="info-item">
                <van-icon name="calendar" />考核时间：&nbsp;&nbsp;&nbsp;{{ startTime | formatDate }} 至 {{ endTime | formatDate }}
              </div>
              <div class="info-item">
                考核等级：&nbsp;&nbsp;&nbsp; <span style="color: #ff9600;">{{ levelName || '-' }}</span>
              </div>
              <div class="info-item">
                考核评分：&nbsp;&nbsp;&nbsp; <span style="color: #ff9600;">{{ score == undefined  || score == null || score == '' ? '-' : score }}</span>
              </div>
            </div>

          </div>

          <div class="title">指标列表</div>

          <div class="list-box">
            <div class="examine-info" v-for="(item, index) in indicators" :key="item.reviewIndicatorId">
              <div class="tips">
                <div class="tip-item" v-if="item.okrs && item.okrs.length > 0" @click="goMyTarget(item.okrs)">过程跟踪</div>
                <div class="tip-item" @click="goDetails(item)">处理详情</div>
              </div>
              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  审批阶段：
                </div>
                <div v-if="item.businessStatus !== 'end'" class="review-node">
                  {{ item.businessStatus | filterNodeStatus }}
                </div>
                <div v-else class="review-node" style="background-color: #FF9600;">
                  {{ item.businessStatus | filterNodeStatus }}
                </div>

              </div>

              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  指标：
                </div>
                {{ item.title }}
              </div>
              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  目标：
                </div>
                {{ item.target || '-' }} {{ item.target && item.unit ?  item.unit : '' }}
              </div>
              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  结果值：
                </div>
                {{ item.result || '-' }}
              </div>

              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  权重：
                </div>
                {{ item.weight || '-' }}
              </div>
              <div class="info-item flex-box-ce">
                <div class="info-item-title">
                  单位：
                </div>
                {{ item.unit || '-' }}
              </div>

              <div class="info-item" v-if="item.content">
                <div class="info-item-title">
                  规则：
                </div>
                <div class="bg-gray">
                  {{ item.content }}
                </div>
              </div>

              <div class="info-item" v-if="item.resultFiles && item.resultFiles.length > 0">
                <div class="info-item-title" style="width: 2rem;">
                  结果值附件：
                </div>
                <div class="bg-gray">
                  <div v-for="(item, index) in item.resultFiles">
                    附件{{ index + 1}}
                  </div>
                </div>

              </div>

              <div v-if="index !== indicators.length - 1" class="line"></div>
            </div>
          </div>

          <OperateLogVue v-if="reviewId" :reviewId="reviewId"/>

          <div style="width: 100%; height: 1rem;">

          </div>
        </scroller>
      </VanSkeleton>
    </div>
  </div>
</template>
<script>
import VanSkeleton from '@/performance/components/public/VanSkeleton';
import OperateLogVue from '@/performance/components/public/OperateLog.vue'
import moment from 'moment';
  export default {
    components: {
      VanSkeleton,
      OperateLogVue
    },

  data() {
    return {
      skeletonLoad: true,
      userInfo: this.$userInfo(),
      meList: [],
      title: "",
      startTime: "",
      endTime: "",
      cycleType: "",
      score: 0,
      status: '',
      levelName: '', // 考核详情信息
      detailInfo: null,
      indicators: [],
      reviewId: '',
      employeeId: "",
      performList: [],
      params: {
        keyword: '',
        page: 1,
        pageSize: 10,
        startDate: '',
        endDate: '',
        employeeId: ''
      },
    };
  },

  filters: {
    filterNodeStatus(v) {
      if (v === 'start') return '开始'
      if (v === 'target_confirm') return '确认目标'
      if (v === 'result_input') return '录入结果值'
      if (v === 'score_self') return '自评'
      if (v === 'score_each_other') return '互评'
      if (v === 'score') return '评分'
      if (v === 'review') return '审批'
      if (v === 'cc') return '抄送'
      if (v === 'end') return '结束'
    },

    formatDate(val) {
      if (val) return moment(val).format('YYYY-MM-DD')
      else return "--"
    },

    formatCycleType(val) {
      if (val == 0) return '自定义'
      if (val == 1) return '年度'
      if (val == 2) return '半年'
      if (val == 3) return '季度'
      if (val == 4) return '月度'
      else return '--'
    },
  },

  computed: {
    showUserInfo() {
      return this.$getEmployeeMapItem(this.employeeId);
    },
    showDeptList() {
      return this.$getEmployeeMapItem(this.employeeId).employee_detail.dept_list
    }
  },

  methods: {
    getTemplateList() {
      let that = this
      let url = `/performance/statistics/reviews/${that.$userInfo().site_id}`
      // const startOfMonth = moment().startOf('month').format('YYYY-MM-DD') // 当月第一天
      // const endOfMonth = moment().endOf('month').format('YYYY-MM-DD'); // 当月最后一天
      let requestdata;
      if (that.cycleType == '-1') requestdata = { ...that.params }
      else requestdata = { ...that.params, cycleType: that.cycleType }
      that.$axiosUser('get', url, requestdata).then(res => {
          let { data: { data: { list, total }, code } } = res;
          if (code == 1) {
              if (list && list.length > 0) {
                  that.performList = list;
                  let { reviewId } = that.performList[0] || '';
                  if (reviewId) that.getDetails(reviewId);
              }
          } else {
              that.performList = [];
          }
      });
    },


    getDetails(reviewId) {
        // reviewId = reviewId ? reviewId : 24
        // this.loading = true
        let url = `/performance/statistics/review/info/${this.$userInfo().site_id}/${reviewId}`
        this.$axiosUser('get', url).then(res => {
            this.skeletonLoad = false;
            let { data: { reviewId, title, indicators, levelName, startTime, endTime, cycleType, score, status }, code } = res.data
            this.reviewId = reviewId
            if (code == 1) {
                console.log(res)
                this.detailInfo = res.data.data;
                this.title = title || ''
                this.cycleType = cycleType || ''
                this.score = score
                this.status = status || ''
                this.startTime = startTime || ''
                this.endTime = endTime || ''
                this.levelName = levelName || ''
                this.indicators = indicators.reverse() || [];

                // 处理附件列表
                if (this.tableData && this.tableData.length > 0) {
                    let resultFiles = []
                    this.tableData.forEach(item => {
                        if (item.flow.nodes && item.flow.nodes.length > 0) {
                            let resultInputNode = item.flow.nodes[1] // 取到结果值节点
                            if (resultInputNode.tasks && resultInputNode.tasks.length > 0) {
                                resultInputNode.tasks.forEach(task => {
                                    if (task.files && task.files.length > 0) {
                                        task.files.forEach(file => {
                                            resultFiles.push(file)
                                        })
                                    }
                                })
                                item.resultFiles = resultFiles
                            }
                        }
                    })
                }
            }

        });
    },

    goMorePage() {
      this.$router.push("/more")
    },

    goMyTarget(okrs) {
      this.$router.push({name: 'myTarget', query: {ids: JSON.stringify(okrs)}});
    },

    goDetails(item) {
      console.log(item);
      let { reviewId, reviewIndicatorId, flow: { nodes } } = item
      let showData = {
        nodes,
        reviewId,
        reviewIndicatorId
      }
      this.$router.push({ path: "/handleDetails", query: {showData: JSON.stringify(showData)} })
    },
  },

  watch: {
    // 路由参数变化（浏览器返回/前进、query 变化）也会再次执行
    '$route'(to, from) {
      let reviewId = this.$route.query.reviewId
      this.employeeId = this.$route.query.employeeId
      this.employeeId = this.employeeId ? this.employeeId : this.userInfo.id
      if(reviewId) {
        this.getDetails(reviewId);
      }else {
        this.getTemplateList()
      }
    }
  },


  created() {
    let reviewId = this.$route.query.reviewId
    this.employeeId = this.$route.query.employeeId
    this.employeeId = this.employeeId ? this.employeeId : this.userInfo.id
    if(this.reviewId) {
      this.getDetails(reviewId);
    }else {
      this.getTemplateList()
    }
  },
};
</script>

<style scoped lang="less">
.all {
  width: 100%;
  height: 100%;
  position: relative !important;
  background-color: #f5f7fa;
  box-sizing: border-box;

  .overall {
    height: calc(100% - 0.92rem) !important;
    position: relative;
    overflow-y: scroll;
  }
}



.title {
  margin: 0.2rem 0;
  padding: 0 0.2rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .more-btn {
    font-weight: normal;
    color: #0597ff;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      margin: 0.06rem 0 0 0.02rem;
    }
  }

}




.list-box {
  width: 96%;
  padding: 0.24rem;
  font-size: 0.32rem;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 0.24rem auto;
  .add-task-title {
    font-weight: 600;
    font-size: 0.32rem;
  }

  .user-info {
    font-size: 0.28rem;
    color: #89919F !important;
    margin: 0 0 0 0.2rem;
  }

  .cycle-type {
    padding: 0.08rem;
    border-radius: 0.1rem;
    color: #26a2ff;
    box-sizing: border-box;
    background-color: #ecf5ff;
  }

  .examine-info {
    font-size: 0.28rem;
    position: relative;

    .tips {
      position: absolute;
      top: 0.1rem;
      right: -0.2rem;
      .tip-item {
        padding: 0.1rem;
        border-top-left-radius: 0.1rem;
        border-bottom-left-radius: 0.1rem;
        color: #26a2ff;
        z-index: 999;
        box-sizing: border-box;
        background-color: #ecf5ff;
        margin-bottom: 0.1rem;
      }
    }
    .info-item {
      margin-bottom: 0.2rem;
      color: #89919F !important;
      .info-item-title {
        width: 1.4rem;
        color: #000;
      }
      .review-node {
        padding: 0.01rem 0.1rem;
        color: #fff;
        border-radius: 2px;
        font-size: 0.26rem;
        background-color: #67c23a;
        margin-left: 0.14rem;
      }
    }

    .line {
      width: 100%;
      margin: 0.5rem auto;
      height: 1px;
      background-color: #f1f1f1;
    }
  }


}

.bg-gray {
  background-color: #f5f5f5;
  padding: 0.2rem;
  box-sizing: border-box;
  margin: 0.1rem;
  color: #999;
  border-radius: 5px;
}


</style>