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

<template>
  <div class='courseInfo'>
    <div class="newBand"
         @click="resetCourses"
         v-permission="'studentManage/batchUpdateAdviser'">学员移交</div>
    <div class="tableWrap tableMargin">
      <!-- <h4>试听课</h4> -->
      <el-table :data='tableList'
                @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column label="学员编号"
                         width="150"
                         prop='userId'>
        </el-table-column>
        <el-table-column label="学员名字"
                         width="150"
                         prop="name">
        </el-table-column>
        <el-table-column label="操作"
                         align="right"
                         prop="subjectNames">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'studentManage/batchUpdateAdviser'"
                         @click="resetCourse(scope.row)">操作</el-button>
            </div>
          </template>

        </el-table-column>
        <el-table-column width="40"
                         align="right">
        </el-table-column>
      </el-table>
      <pagination :total="pageInfo.total"
                  :page.sync="pageInfo.page"
                  :limit.sync="pageInfo.limit"
                  :page-sizes="pageInfo.page_size"
                  @pagination="getList" />
    </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="备注"
                      prop='memo'
                      :rules="[{ required: true, message: '请填写备注',trigger: 'blur'}]">
          <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 { queryStudent, batchUpdateAdviser } from '@/api/teacherManager'
import { getTeacher } from "@/api/buildTeam";
import pagination from '@/components/Pagination/index'
import store from '@/store'
export default {
  name: 'courseInfo2',
  components: {
    pagination
  },
  data () {
    return {
      tableList: [],
      organId: null,
      teacherId: this.$route.query.teacherId,
      isMultiple: false,
      maskVisible: false,
      teacherList: [],
      chioseList: [],
      maskForm: {
        educationalTeacherId: null,
        memo: null
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  mounted () {
    getTeacher({}).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
    // this.getList()
  },
  activated () {
    this.teacherId = this.$route.query.teacherId
    this.getList()
  },
  methods: {
    getList () {
      queryStudent({
        search: this.teacherId,
        page: this.pageInfo.page,
        rows: this.pageInfo.limit
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.pageInfo.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.studentIds = this.chioseList.map(res => {
              return res.userId
            }).join(',')
          } else {
            // 单词调整
            obj.studentIds = this.activeRow.userId
          }
          obj.teacherId = this.maskForm.teacherId;
          // obj.memo = this.maskForm.memo;
          batchUpdateAdviser(obj).then(res => {
            if (res.code == 200) {
              this.maskVisible = false;
              this.$message.success('修改成功')
              this.getList()
            }
          })
        }
      })

    }
  },
  watch: {
    maskVisible (val) {
      if (!val) {
        this.maskForm.teacherId = null;
      }
    }
  }
}
</script>
<style lang="scss" scope>
.courseInfo {
  h4 {
    margin-bottom: 20px;
  }
  .tableMargin {
    margin-top: 20px;
  }
}
</style>