drp-ui/src/views/business/ehr/pm/verify/index.vue

<template>
  <div>
    <el-card v-if="flow.staff == this.$store.state.user.name">
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">绩效考核表</span>
        <div style="float: right; padding: 3px 0" type="text" v-if="flow.status == 0">
          <el-button size="mini" plain @click="btnTurnDown(1)">驳回</el-button>
          <el-button size="mini" type="primary" plain @click="btnverify(2)">通过</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <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="一级部门">{{form.oneDeptName}}</el-descriptions-item>
          <el-descriptions-item label="二级部门">{{form.twoDeptName}}</el-descriptions-item>
          <el-descriptions-item label="三级部门">{{form.threeDeptName}}</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="所属分组">{{form.deadlineTime}}</el-descriptions-item>
        </el-descriptions>
        <!-- <div style="float:right">
          <el-button size="mini" @click="btnUnfold">{{isUnfold == true ? "收起" : "展开"}}</el-button>
        </div> -->
        <el-table size="mini"  :data="form.performanceItem" show-summary :summary-method="getSummaries">
          <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 :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 width="100" label="角色" align="center" prop="role">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ehr_pm_role" :value="scope.row.role"/>
            </template>
          </el-table-column>
          <el-table-column width="80" label="权重" align="center" prop="weight"/>
          <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>
      </div>
    </el-card>

    <el-dialog title="" :visible.sync="turnDownOpen" width="1000px" :close-on-click-modal="false" :show-close="false">
      <el-form size="mini" label-position="right" ref="flow" :model="flow" :rules="flowRules" label-width="80px">
        <el-form-item label="驳回原因" prop="result">
          <el-input type="textarea" v-model="flow.result"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="btnTurnDownClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="btnTurnDownConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getPerformance,verify} from "@/api/business/ehr/pm/performance";
import { getFlow} from "@/api/business/ehr/pm/flow";

export default {
  name: "verify",
  dicts: ['ehr_pm_aspect','ehr_pm_role'],
  data() {
    return {
      //遮罩层
      loading: true,
      //表单
      form:{},
      //流程数据
      flow:{},
      //流程数据规则
      flowRules:{
        result: [
          { required: true, message: "驳回原因不能为空", trigger: "blur" },
        ],
      },
      //是否展开
      isUnfold:false,
      //是否显驳回弹出层
      turnDownOpen:false,
    };
  },
  created() {
    this.fetchPerformance(this.$route.query.performanceId);
    this.fetchFlow(this.$route.query.flowId);
  },
  methods: {
    //查询详情
    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;
      })
    },
    //查询流程详情
    async fetchFlow(id){
      this.loading = true;
      await getFlow(id).then(res => {
        if (res.code === 200) {
          this.flow = res.data;
         }
         this.loading = false;
      })
    },
    //展开/收起
    btnUnfold(){
      this.isUnfold = !this.isUnfold;
    },
    //合计
    getSummaries(param){
      const { columns, data } = param;
      let val = data.reduce((sum, e) => sum + Number(e.weight || 0), 0);
      this.weightSum = val;
      return ['合计','','','',val];
    },
    //驳回
    btnTurnDown(){
      this.turnDownOpen = true;
    },
    //驳回取消
    btnTurnDownClose(){
      this.turnDownOpen = false;
    },
    //驳回确认
    btnTurnDownConfirm(){
      this.$refs["flow"].validate(valid => {
        if (valid) {
          this.btnverify(1);
          this.turnDownOpen = false;
        }
      });
    },
    //绩效确认
    async btnverify(val){
      this.flow.status = val;
      if(this.flow.status == 2){
        this.flow.result = "同意";
      }
      await verify(this.flow).then(res => {
        if (res.code === 200) {
          this.fetchPerformance(this.$route.query.performanceId);
          this.fetchFlow(this.$route.query.flowId);
          this.$modal.msgSuccess("已确认");
        }
        this.loading = false;
      })
    },
  }
};
</script>

<style lang="scss" scoped>
</style>