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

<!--  -->
<template>
  <div>
    <div v-if="isGraduate" class="graduate-content">
      <!-- 毕业班内容 -->
      <!-- 班会佐证材料表格数据 -->
      <div>
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:每月通过线上线下方式定期召开班会开展教育（10分）</el-col>
          <el-col :span="8">考评方式:学工系统填报，照片记录，少1次扣2分。质量评价2分。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].classScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].classScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].classMeetingMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 谈心谈话佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:月度谈心谈话总量≥10人次，覆盖重点关注学生（困难救助、就业指导、心理危机、违纪待处理等）（10分）</el-col>
          <el-col :span="8">考评方式:抽查谈心谈话记录、学工系统填报情况等相关工作资料。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].stuTalkScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].stuTalkScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].stuTalkMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="学生名称" align="center" prop="stuName" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
          </el-table>
        </div>
      </div>
    </div>
    <div v-else class="ungraduate-content">
      <!-- 非毕业班内容 -->
      <!-- 班会佐证材料表格数据 -->
      <div>
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:每周日及节假日收假当天组织开展班会（10分）</el-col>
          <el-col :span="8">考评方式:学工系统填报开展情况，每缺报1次扣2分；工作质量评价项分值为2分，将根据实际完成质量进行评分。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].classScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].classScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].classMeetingMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 每周深入学生宿舍佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:每周深入学生宿舍走访至少2次（10分）</el-col>
          <el-col :span="8">考评方式:学工系统填报、宿舍管理员登记本信息核查，工作落实不到位或学生宿舍安全、卫生检查发现问题，经通报后未及时开展教育督促整改、复检仍不合格的，每有1次扣0.5分/间。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].visitDormitoryScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].visitDormitoryScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].visitDormitoryMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="走访班级名称" align="center" prop="visitClassName" />
            <el-table-column label="走访宿舍号" align="center" prop="visitDormitoryNum" />
            <el-table-column label="覆盖学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="学生交流内容/检查内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 谈心谈话佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:月度谈心谈话总量≥10人次，覆盖重点关注学生（困难救助、学业预警、心理危机、违纪待处理等）（10分）</el-col>
          <el-col :span="8">考评方式:抽查谈心谈话记录、学工系统填报情况等相关工作资料。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].stuTalkScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].stuTalkScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].stuTalkMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="学生名称" align="center" prop="stuName" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
          </el-table>
        </div>
      </div>
      <!-- 班团干部会议佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:每月开展班团干部培训、专题工作会议，频次均不少于1次（5分）</el-col>
          <el-col :span="8">考评方式:抽查工作记录、学工系统填报情况等相关工作资料。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].cadreScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].cadreScoring" :min="0" :max="5" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].cadreMeetingMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 学生活动佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:每月组织或参与学生社区育人活动、思政教育活动及文化艺术体育活动，频次不少于2次（5分）</el-col>
          <el-col :span="8">考评方式:学务办相关记录、学生社区建设工作记录，每缺少1次扣2分。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].stuActivityScoring }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].stuActivityScoring" :min="0" :max="5" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].stuActivityMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 职业测评/就业育人佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:根据学校就业育人工作部署，第一学期需指导并组织所带班级学生参与职业测评，整体完成率需≥90%；第二学期每月需开展1次就业育人相关活动。（5分）</el-col>
          <el-col :span="8">考评方式:（1）职业测评完成率考核（第一学期）：10月底前，班级职业测评完成率＜20%，扣1分；11月底前，班级职业测评完成率＜50%，扣1分；12月底前，班级职业测评完成率＜80%，扣1分；次年1月底前，班级职业测评完成率＜90%，扣2分。（2）就业育人活动考核（第二学期）：活动形式需围绕就业核心，包括职业体验实践、就业主题班会、就业指导讲座等标准化就业育人场景。3月-7月期间，每月需按要求组织1次相关活动，未完成当月活动任务，扣1分/次。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].edgScoring || 0 }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].edgScoring" :min="0" :max="5" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].edgMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 通知任务佐证材料表格数据 -->
      <div style="margin-top: 20px;">
        <el-row :gutter="10" style="display: flex; align-items: center;">
          <el-col :span="7">考评要求:按时按质完成学校及相关职能部门发布的与学生相关的各项工作通知、任务（5分）</el-col>
          <el-col :span="8">考评方式:学务办、职能部门各项工作记录，未能按规定完成1次扣1分。</el-col>
          <el-col :span="3">辅导员自评分: {{ form.kpiFillingStuMgtList[0].noticeScoring || 0 }}</el-col>
          <el-col v-show="isShow" :span="5">
            <div style="display: flex; align-items: center;">
              <div style="min-width: 70px;color: red;">调整分数：</div>
              <el-input-number v-model="form.kpiFillingStuMgtList[0].noticeScoring" :min="0" :max="5" label="调整分数" size="mini" style="width: 100%;" />
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;">
          <el-table :data="form.kpiFillingStuMgtList[0].noticeMaterialsList" border>
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="开展时间" align="center" prop="developmentTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.developmentTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="参与学生人数" align="center" prop="numberOfStudents" />
            <el-table-column label="主要内容" align="center" prop="mainContent" />
            <el-table-column label="相片" align="center" prop="photo" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo" :width="50" :height="50" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-if="form.kpiFillingStuMgtList[0].hasOwnProperty('id') && !(form.auditStatus === 1 && form.roleAudit === 4)" class="button">
      <el-button v-show="isShow" type="primary" @click="save">保 存</el-button>
      <el-button v-if="!roleGroup.includes('辅导员') && audit" type="warning" @click="switchIsShow">修 改</el-button>
    </div>
  </div>
</template>

<script>
import { getTeacherKpiFillingMgt, updateTeacherKpiFillingMgt } from '@/api/teacher/teacherKpiFillingMgt'
export default {
  props: {
    form: {
      type: Object,
      default: []
    },
    roleGroup: {
      type: String,
      default: ''
    },
    audit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    isGraduate() {
      if (this.form.classType === 'graduate') {
        return true
      }
      if (this.form.kpiFillingStuMgtList && this.form.kpiFillingStuMgtList.length > 0) {
        return this.form.kpiFillingStuMgtList[0].classType === 'graduate'
      }
      return false
    }
  },
  watch: {
    'form.kpiFillingStuMgtList': {
      immediate: true,
      handler() {
        this.isShow = false
        if (this.form.kpiFillingStuMgtList.length === 0) {
          this.form.kpiFillingStuMgtList[0] = {
            cadreMeetingMaterialsList: [],
            cadreScoring: 0,
            classMeetingMaterialsList: [],
            classScoring: 0,
            stuActivityMaterialsList: [],
            stuActivityScoring: 0,
            stuTalkMaterialsList: [],
            stuTalkScoring: 0,
            visitDormitoryMaterialsList: [],
            visitDormitoryScoring: 0,
            edgMaterialsList: [],
            edgScoring: 0,
            noticeMaterialsList: [],
            noticeScoring: 0
          }
        }
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  // 离开当前页面时执行代码
  destroyed() {

  },
  methods: {
    switchIsShow() {
      this.isShow = !this.isShow
    },
    save() {
      this.$modal.loading('正在努力加载中，请稍等。。。')
      updateTeacherKpiFillingMgt(this.form.kpiFillingStuMgtList[0]).then(response => {
        // this.$modal.msgSuccess("修改成功");
        getTeacherKpiFillingMgt(this.form.kpiFillingStuMgtList[0].id).then(response => {
          this.form.kpiFillingStuMgtList[0].cadreScoring = response.data.cadreScoring,
          this.form.kpiFillingStuMgtList[0].classScoring = response.data.classScoring,
          this.form.kpiFillingStuMgtList[0].stuActivityScoring = response.data.stuActivityScoring,
          this.form.kpiFillingStuMgtList[0].stuTalkScoring = response.data.stuTalkScoring,
          this.form.kpiFillingStuMgtList[0].visitDormitoryScoring = response.data.visitDormitoryScoring
          this.$modal.msgSuccess('修改成功')
          this.switchIsShow()
          this.$modal.closeLoading()
        })
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.button {
  margin-top: 20px;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 100;
  text-align: right;
  padding: 10px;
}

</style>