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

<!--  -->
<template>
  <div>
    <!-- 班会佐证材料表格数据 -->
    <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%;" />
            <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingStuMgtList[0].classScoring" clearable size="mini">
            </el-input> -->
          </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次扣2分。质量评价2分。</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%;" />
            <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingStuMgtList[0].visitDormitoryScoring" clearable size="mini">
            </el-input> -->
          </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">考评要求:每月开展班团干部会议至少2次（5分）</el-col>
        <el-col :span="8">考评方式:《辅导员工作笔记》，照片记录，少1次扣2分。</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%;" />
            <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingStuMgtList[0].cadreScoring" clearable size="mini">
            </el-input> -->
          </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">考评要求:每月与带班学生谈心谈话，覆盖率不低于8%（10分）</el-col>
        <el-col :span="8">考评方式∶《辅导员工作笔记》，照片记录，少1次扣1分。</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%;" />
            <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingStuMgtList[0].stuTalkScoring" clearable size="mini">
            </el-input> -->
          </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].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%;" />
            <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingStuMgtList[0].stuActivityScoring" clearable size="mini">
            </el-input> -->
          </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 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
    }
  },
  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
          }
        }
      }
    }
  },
  // 生命周期 - 创建完成（访问当前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>