drp-ui/src/views/business/ehr/pm/finishMarkPm/detail.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">绩效考核表</span>-{{form.name}}
        <dict-tag :options="dict.type.ehr_pm_status" :value="form.status" style="display:inline-block;margin-right:5px;" />
        <el-tag v-if="form.isTwoEvaluation">双向评估</el-tag>
        <div style="float: right; padding: 3px 0; display:flex;justify-content:space-between" type="text">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <ApproveLogDialog style="margin: 0 10px" :pmId="form.id"></ApproveLogDialog>
          <AdjustlogDialog style="margin: 0 10px" :pmId="form.id"></AdjustlogDialog>
          <el-button size="mini" plain @click="btnPreviou" v-if="ids">上一个</el-button>
          <el-button size="mini" plain @click="btnNext" v-if="ids">下一个</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-form size="mini" ref="dataForm" :model="form" :rules="rules">
          <el-descriptions :column="6">
            <el-descriptions-item label="员工编号">{{form.staff}}</el-descriptions-item>
            <el-descriptions-item label="员工姓名">{{form.staffName}}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{form.dateJoin}}</el-descriptions-item>
            <el-descriptions-item label="转正日期">{{form.probationComplete}}</el-descriptions-item>
            <el-descriptions-item label="部门" span="2">{{form.deptName}}</el-descriptions-item>
            <el-descriptions-item label="职位">{{form.jobName}}</el-descriptions-item>
            <el-descriptions-item label="评估周期">{{form.name}}</el-descriptions-item>
            <el-descriptions-item label="评估人">{{form.evaluatorName}}</el-descriptions-item>
            <el-descriptions-item label="所属分组">
              <div v-for="dict in dict.type.ehr_pm_group" v-if="form.staffDivide == dict.value">
                <div>{{ dict.label }}</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="6 ">
            <el-descriptions-item label="自评分">{{form.saMark}}</el-descriptions-item>
            <el-descriptions-item label="上级评分">{{form.ldMark}}</el-descriptions-item>
            <el-descriptions-item label="综合得分">{{form.mark}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions>
            <el-descriptions-item label="个人总结">{{form.summary}}</el-descriptions-item>
          </el-descriptions>
          <div style="  display: flex;align-items: flex-start;justify-content: flex-start;margin-top: -20px;">
            <p>总评语:</p>
            <div style="margin-left: 18px;font-size: 15px;">
              <p v-for="(item,index) in comment" :key="index">{{item[0]}}:{{item[1]}}</p>
            </div>
          </div>
          
          <el-table size="mini"  :data="form.performanceItem" show-summary :summary-method="getSummaries" border>
            <el-table-column type="index" width="50" label="序号"/>
            <el-table-column width="100" :show-overflow-tooltip="!isUnfold" label="评估方面" align="center" prop="aspect">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ehr_pm_aspect" :value="scope.row.aspect"/>
              </template>
            </el-table-column>
            <el-table-column width="100" :show-overflow-tooltip="!isUnfold" label="评估指标" align="center" prop="target" />
            <el-table-column width="80" label="权重(%)" align="center" prop="weight">
              <template slot-scope="scope">
                {{scope.row.asItem ? "+/-" : scope.row.weight}}
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="!isUnfold" label="指标说明" align="center" prop="instructions">
              <template slot-scope="scope">
                <div style="white-space: pre-wrap;text-align: left">{{scope.row.instructions}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="!isUnfold" label="评分标准" align="center" prop="standard">
              <template slot-scope="scope">
                <div style="white-space: pre-wrap;text-align: left">{{scope.row.standard}}</div>
              </template>
            </el-table-column>
            <el-table-column width="100" label="数据来源" align="center" prop="source"/>
            <el-table-column width="80" label="自评分" align="center" prop="selfScoring"/>
            <el-table-column :show-overflow-tooltip="!isUnfold" label="自评语" align="center" prop="selfComment"/>
            <el-table-column width="80" label="评估人" align="center" prop="evaluatorName" v-if="form.isTwoEvaluation"/>
            <el-table-column width="80" label="上级评分" align="center" prop="leaderScoring"/>
            <el-table-column :show-overflow-tooltip="!isUnfold" label="上级评语" align="center" prop="leaderComment"/>
          </el-table>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import ApproveLogDialog from './btnApproveLog.vue'
import AdjustlogDialog from './btnAjMarkLog.vue'
import { getPerformance} from "@/api/business/ehr/pm/performance";

export default {
  name: 'detail',
  dicts: ['ehr_pm_aspect','ehr_pm_role','ehr_pm_group','ehr_pm_status'],
  props: ['pageStu','rowId',"ids"],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  components: {ApproveLogDialog,AdjustlogDialog},
  data() {
    return {
      //id
      id:null,
      //表单
      form:{},
      //遮罩
      loading: false,
      //是否展开
      isUnfold:false,
      //明细权重合计值
      weightSum: 0,
    }
  },
  computed: {
    comment() {
      if(this.form.comment){
        let obj = JSON.parse(this.form.comment);
        let arr = Object.entries(obj)
        return arr;
      }else{
        return [];
      }
    }
	},
  async created() {
    this.id = this.rowId;
    this.fetchPerformance(this.id);
    if(this.pageStu == 'add'){
    }
    if(this.pageStu == 'edit' || this.pageStu == 'see') {
    }
  },
  watch: {
  },
  methods: {
    //返回
    btnBack(){
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    //查询详情
    async fetchPerformance(id){
      this.loading = true;
      await getPerformance(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
         }
         this.loading = false;
      })
    },
    //上一个
    btnPreviou(){
      let i = this.ids.indexOf(this.id) - 1;
      if(i > -1){
        let id = this.ids[i];
        this.fetchPerformance(id);
      }else{
        this.$modal.msgSuccess("已经是当前页第一条了！");
      }
    },
    //下一个
    btnNext(){
      let i = this.ids.indexOf(this.id) + 1;
      if(i < this.ids.length){
        let id = this.ids[i];
        this.fetchPerformance(id);
      }else{
        this.$modal.msgSuccess("已经是当前页最后一条了！");
      }
      
    },
    //合计
    getSummaries(param){
      if(this.form.isTwoEvaluation){
        return ['合计','','',this.form.weight,'','','',this.form.saMark,'','',this.form.ldMark];
      }else{
        return ['合计','','',this.form.weight,'','','',this.form.saMark,'',this.form.ldMark];
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.btn_group {
  z-index: 500;
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}
</style>