dy-admin-manager/src/views/teacherManager/teacherDetail/components/teacherNetwork.vue

<!--  -->
<template>
  <div class>
    <div class="newBand"
         @click="resetCourses"
         v-permission="'courseSchedule/batchPracticeGroupTeacherAdjust?t=819'">课程移交</div>
    <div class="m-core">
      <div class="tableWrap">
        <el-table style="width: 100%"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  @selection-change="handleSelectionChange"
                  :data="tableList">
          <el-table-column type="selection"
                           :selectable='selectable'
                           width="55">
          </el-table-column>
          <el-table-column align="center"
                           prop="id"
                           label="课程组编号"></el-table-column>
          <el-table-column align="center"
                           prop="name"
                           label="课程组名称"></el-table-column>
          <!-- <el-table-column align="center" prop="subjectName" label="声部"></el-table-column>
          <el-table-column align="center" prop="teacherName" label="指导老师"></el-table-column> -->
          <el-table-column align="center"
                           prop="type"
                           label="课程组类型"
                           width="100">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.type | comType}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="groupStatus"
                           label="课程组状态">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.groupStatus | comCourseGroup}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="开始时间">
            <template slot-scope="scope">
              <div>
                <div>{{scope.row.coursesStartDate|dateForMinFormat}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="结束时间">
            <template slot-scope="scope">
              <div>
                <div>{{scope.row.coursesExpireDate|dateForMinFormat}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否可调整"
                           align="center">
            <template slot-scope="scope">
              {{ scope.row.totalClassTimes-scope.row.currentClassTimes>0?'是':'否' }}
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="(scope.row.totalClassTimes-scope.row.currentClassTimes)>0"
                           v-permission="'courseSchedule/batchPracticeGroupTeacherAdjust?t=819'"
                           @click="resetCourse(scope.row)">课程移交</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
        sync
        :total.sync="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title='课程移交'
               :visible.sync="maskVisible"
               width="400px">
      <el-form :model="maskForm"
               ref="maskForm">
        <el-form-item label="选择老师"
                      prop="teacherId"
                      :rules="[{ required: true, message: '请选择老师',trigger: 'blur'}]">
          <el-select v-model="maskForm.teacherId"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :label="item.realName"
                       :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="备注"
                      :rules="[{ required: true, message: '请填写备注',trigger: 'blur'}]"
                      prop='memo'>
          <el-input type="textarea"
                    :rows="5"
                    v-model="maskForm.memo"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="maskVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitReset">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { practiceGroupManage, getTeacher, batchPracticeGroupTeacherAdjust } from "@/api/buildTeam";
export default {
  components: { pagination },
  data () {
    return {
      searchForm: {
        search: null
      },
      teacherId: null,
      tableList: [],
      isMultiple: false,
      maskVisible: false,
      teacherList: [],
      chioseList: [],
      maskForm: {
        teacherId: null,
        memo: null
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    getTeacher({}).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
    // 获取分部
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    selectable (row, index) {
      return row.totalClassTimes - row.currentClassTimes > 0
    },
    init () {
      this.teacherId = this.$route.query.teacherId
      this.getList();
    },
    getList () {
      practiceGroupManage({
        teacherId: this.teacherId,
        page: this.rules.page,
        rows: this.rules.limit
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    resetCourse (row) {
      this.activeRow = row;
      this.isMultiple = false
      this.maskVisible = true
    },
    resetCourses () {
      if (this.chioseList.length <= 0) {
        this.$message.error('请至少选择一个乐团')
        return
      }
      this.isMultiple = true
      this.maskVisible = true
    },
    handleSelectionChange (val) {
      this.chioseList = val
    },
    submitReset () {
      this.$refs['maskForm'].validate(valid => {
        if (valid) {
          let obj = {};
          if (this.isMultiple) {
            // 批量调整
            obj.practiceGroupId = this.chioseList.map(res => {
              return res.id
            }).join(',')
          } else {
            // 单词调整
            obj.practiceGroupId = this.activeRow.id
          }
          obj.teacherId = this.maskForm.teacherId;
          obj.oldTeacherId = this.teacherId;
          // obj.memo = this.maskForm.memo;
          batchPracticeGroupTeacherAdjust(obj).then(res => {
            if (res.code == 200) {
              this.maskVisible = false;
              this.$message.success('修改成功')
              this.getList()
            }
          })
        }
      })
    }
  },
  watch: {
    maskVisible (val) {
      if (!val) {
        this.maskForm.teacherId = null;
        this.maskForm.memo = null
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>