zhxg_pc/src/views/teacher/kpiFilling/components/bonusPoints.vue

<template>
  <div>
    <div v-if="form.kpiFillingBonusPointsList && form.kpiFillingBonusPointsList.length > 0">
      <el-table :data="form.kpiFillingBonusPointsList" border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="加分类型" align="center" prop="bonusType">
          <template slot-scope="scope">
            <span v-if="scope.row.bonusType === 'option1'">获得上级部门或学校表扬，妥善处置学生事件并形成典型案例，积极建言献策且建议被采纳，发挥模范带头作用的</span>
            <span v-else-if="scope.row.bonusType === 'option2'">在学校、学院阶段性重要任务推进过程中，主动担当作为，切实发挥作用的</span>
            <span v-else-if="scope.row.bonusType === 'option3'">协助学校开展辅导员培训、会议和学生活动，在活动中担任工作人员的</span>
            <span v-else>{{ scope.row.bonusType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分数" align="center" prop="bonusScoring" width="100" />
      </el-table>
    </div>
    <div v-else>
      <p>暂无加分项数据</p>
    </div>
    <div style="margin-top: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
      <p style="font-weight: bold; margin-bottom: 10px;">考评要求：</p>
      <div v-if="!isEdit">
        <p>1. 获得上级部门或学校表扬，妥善处置学生事件并形成典型案例，积极建言献策且建议被采纳，发挥模范带头作用的（10分）</p>
        <p>2. 在学校、学院阶段性重要任务推进过程中，主动担当作为，切实发挥作用的（10分）</p>
        <p>3. 协助学校开展辅导员培训、会议和学生活动，在活动中担任工作人员的（10分）</p>
      </div>
      <div v-else>
        <el-checkbox v-model="bonusForm.option1" @change="handleBonusChange('option1')">获得上级部门或学校表扬，妥善处置学生事件并形成典型案例，积极建言献策且建议被采纳，发挥模范带头作用的（10分）</el-checkbox>
        <el-checkbox v-model="bonusForm.option2" @change="handleBonusChange('option2')">在学校、学院阶段性重要任务推进过程中，主动担当作为，切实发挥作用的（10分）</el-checkbox>
        <el-checkbox v-model="bonusForm.option3" @change="handleBonusChange('option3')">协助学校开展辅导员培训、会议和学生活动，在活动中担任工作人员的（10分）</el-checkbox>
        <div style="margin-top: 10px;">
          <span>分数：</span>
          <el-input-number v-model="bonusForm.bonusScoring" :min="0" :max="10" size="mini" />
        </div>
      </div>
      <p style="font-weight: bold; margin: 10px 0;">考评方式：</p>
      <p>学务办、学工各项工作记录，按照完成情况、任务量加分，每次加2-4分。</p>
    </div>
    <div v-if="form.kpiFillingBonusPointsList && form.kpiFillingBonusPointsList.length > 0 && !(form.auditStatus === 1 && form.roleAudit === 4)" style="margin-top: 10px; text-align: right;">
      <el-button v-if="!isEdit && !roleGroup.includes('辅导员') && audit" type="warning" @click="startEdit">修 改</el-button>
      <el-button v-if="isEdit" type="primary" @click="saveBonus">保存</el-button>
      <el-button v-if="isEdit" @click="cancelEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
import { addKpiFillingBonusPoints, updateKpiFillingBonusPoints, delKpiFillingBonusPoints } from '@/api/teacher/kpiFilling'
export default {
  props: {
    form: {
      type: Object,
      default: []
    },
    roleGroup: {
      type: String,
      default: ''
    },
    audit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isEdit: false,
      bonusForm: {
        option1: false,
        option2: false,
        option3: false,
        bonusScoring: 0
      }
    }
  },
  created() {
  },
  methods: {
    startEdit() {
      if (this.form.kpiFillingBonusPointsList && this.form.kpiFillingBonusPointsList.length > 0) {
        const bonusType = this.form.kpiFillingBonusPointsList[0].bonusType
        this.bonusForm = {
          option1: bonusType === 'option1',
          option2: bonusType === 'option2',
          option3: bonusType === 'option3',
          bonusScoring: this.form.kpiFillingBonusPointsList[0].bonusScoring || 0
        }
      }
      this.isEdit = true
    },
    handleBonusChange(type) {
      if (type === 'option1' && this.bonusForm.option1) {
        this.bonusForm.option2 = false
        this.bonusForm.option3 = false
        this.bonusForm.bonusScoring = 10
      } else if (type === 'option2' && this.bonusForm.option2) {
        this.bonusForm.option1 = false
        this.bonusForm.option3 = false
        this.bonusForm.bonusScoring = 10
      } else if (type === 'option3' && this.bonusForm.option3) {
        this.bonusForm.option1 = false
        this.bonusForm.option2 = false
        this.bonusForm.bonusScoring = 10
      }
    },
    saveBonus() {
      let bonusType = ''
      if (this.bonusForm.option1) bonusType = 'option1'
      else if (this.bonusForm.option2) bonusType = 'option2'
      else if (this.bonusForm.option3) bonusType = 'option3'

      if (!bonusType) {
        this.$message.warning('请选择加分类型')
        return
      }

      const data = {
        bonusType: bonusType,
        bonusScoring: this.bonusForm.bonusScoring,
        fdyName: this.form.fdyName,
        fillingYear: this.form.fillingYear,
        fillingMonth: this.form.fillingMonth,
        classType: this.form.classType
      }

      if (this.form.kpiFillingBonusPointsList && this.form.kpiFillingBonusPointsList.length > 0) {
        data.id = this.form.kpiFillingBonusPointsList[0].id
        updateKpiFillingBonusPoints(data).then(response => {
          this.$message.success('保存成功')
          this.isEdit = false
          this.form.kpiFillingBonusPointsList[0].bonusType = bonusType
          this.form.kpiFillingBonusPointsList[0].bonusScoring = this.bonusForm.bonusScoring
        })
      } else {
        addKpiFillingBonusPoints(data).then(response => {
          this.$message.success('保存成功')
          this.isEdit = false
          this.form.kpiFillingBonusPointsList = [{
            bonusType: bonusType,
            bonusScoring: this.bonusForm.bonusScoring
          }]
        })
      }
    },
    cancelEdit() {
      this.isEdit = false
      this.bonusForm = {
        option1: false,
        option2: false,
        option3: false,
        bonusScoring: 0
      }
    }
  }
}
</script>

<style scoped>
p {
  margin: 5px 0;
  font-size: 14px;
}
</style>