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

<template>
  <div>
    <div slot="header" class="clearfix">
      <span style="font-weight:bold">分数调整</span>
      <div style="float: right; padding: 3px 0" type="text">
        <el-button type="primary" size="mini" :loading="loading" @click="btnAdjustMark" v-if="flow.status == 0">调整完成</el-button>
        <el-button size="mini" plain @click="btnBack">返回</el-button>
      </div>
    </div>
    <div class="app-container">
      <el-table size="mini" height="500px" v-loading="loading" :data="listData">
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="员工姓名" align="center" prop="staffName" />
        <el-table-column label="评估周期" align="center" prop="name" />
        <el-table-column label="月度" align="center" prop="month" />
        <el-table-column label="权重" align="center" prop="weight" />
        <el-table-column label="自评分" align="center" prop="saMark" />
        <el-table-column label="上级评分" align="center" prop="ldMark" />
        <el-table-column label="调整后分数" align="center" prop="ajaMark" />
        <el-table-column width="100" label="调整分" align="center" prop="ajMark" v-if="flow.status == 0">
          <template slot-scope="scope">
            <el-input size="mini" type="number" v-model="scope.row.ajMark" v-only-number="{max:100,min:-100,precision:1}" @input="ajMarkChange(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column width="200" label="调整原因" align="center" prop="ajCause" v-if="flow.status == 0">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.ajCause"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listPerformance,adjustFinish} from "@/api/business/ehr/pm/gradeadjust";
import { getFlow} from "@/api/business/ehr/pm/flow"

export default {
  name: "AdjustGrade",
  dicts: ['ehr_pm_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      listData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999999,
        sourceId: null,
        staffName: null,
      },
      //流程数据
      flow:{},
    };
  },
  created() {
    this.queryParams.sourceId = this.$route.query.id;
    this.fetchFlow(this.$route.query.flowId);
    this.getList();
  },
  methods: {
    /** 查询绩效列表 */
    getList() {
      this.loading = true;
      listPerformance(this.queryParams).then(response => {
        response.rows.forEach(function(element) { element.ajaMark = element.mark});
        this.listData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //调整分数
    async btnAdjustMark(){
      let arr = this.listData.filter(ele => ele.ajMark);
      let v = false;
      arr.forEach(function(element) {
        if(element.ajMark && !element.ajCause){
          v = true;
        }
      });
      if(v){
        this.$modal.msgWarning("调整分数后，必须填写调整原因！");
        return;
      }
      arr.forEach(function(element) {
        element.performanceId = element.id;
        element.id = null;
      });
      let that = this;
      this.$modal.confirm('确认提交吗？').then(async function() {
        that.loading = true;
        let data = {
          adjustLog: arr,
          flow: that.flow
        }
        return await adjustFinish(data);
      }).then(() => {
        that.fetchFlow(that.flow.id).then(response => {
          this.$forceUpdate();
        });
        that.$modal.msgSuccess("调整完成");
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    //查询流程
    async fetchFlow(id){
      await getFlow(id).then(res => {
        this.flow = res.data;
      })
    },
    //返回
    btnBack(){
      this.$router.back();
    },
    //调整分改变后
    ajMarkChange(row){
      row.ajaMark = Number(row.mark)+Number(row.ajMark || 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.paginationClass {
  z-index: 500;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}
</style>