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

<template>
  <div class="courseInfo">
    <save-form :model="searchList" :inline="true" @submit="search" save-key='teacherDetail-courseInfo'>
      <el-form-item label="乐团状态">
        <el-select v-model.trim="searchList.status" clearable>
          <el-option
            v-for="item in musicGroupStatus"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" native-type="submit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <div
          class="newBand"
          @click="resetCourses"
          v-permission="'courseSchedule/classGroupTeacherAdjust'"
        >
          课程移交
        </div>
      </el-form-item>
    </save-form>
    <div class="tableWrap">
      <el-table
        :data="tableList"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column type="selection" :selectable="selectable" width="55">
        </el-table-column>
        <el-table-column label="乐团编号" align="center" prop="musicGroupId">
        </el-table-column>
        <el-table-column label="乐团名称" align="center" prop="musicGroupName">
        </el-table-column>
        <el-table-column label="老师类型" align="center" prop="jobType">
          <template slot-scope="scope">
            {{ scope.row.jobNature | jobNature }}
          </template>
        </el-table-column>
        <el-table-column label="乐团职位" align="center">
          <template slot-scope="scope">
            {{ scope.row.teacherRole | workType }}
          </template>
        </el-table-column>
        <el-table-column label="执教班级" align="center">
          <template slot-scope="scope">
            {{ scope.row.classGroupNames | joinArray }}
          </template>
        </el-table-column>
        <el-table-column label="乐团状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status | musicGroupType }}
          </template>
        </el-table-column>
        <el-table-column label="出勤次数" align="center" prop="attendanceNum">
        </el-table-column>
        <el-table-column label="是否可调整" align="center">
          <template slot-scope="scope">
            <!-- 1.没有剩余课时,2.乐团筹备中 -->
            <div>
              <p v-if="scope.row.status == 'PROGRESS'">
                {{ scope.row.hasRestClass > 0 ? "是" : "否" }}
              </p>
              <p v-else>否</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                v-if="
                  scope.row.hasRestClass > 0 && scope.row.status == 'PROGRESS'
                "
                v-permission="'courseSchedule/classGroupTeacherAdjust'"
                @click="resetCourse(scope.row)"
                >操作</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
      save-key='teacherDetail-courseInfo'
      sync
        :total.sync="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="targetTeacherId"
          :rules="[{ required: true, message: '请选择老师', trigger: 'blur' }]"
        >
          <el-select v-model="maskForm.targetTeacherId" 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 {
  getTeacherMusicClass,
  classGroupTeacherAdjust,
} from "@/api/teacherManager";
import { getTeacher } from "@/api/buildTeam";
import { musicGroupStatus } from "@/utils/searchArray";
import pagination from "@/components/Pagination/index";
import store from "@/store";
export default {
  name: "courseInfo",
  components: {
    pagination,
  },
  data() {
    return {
      tableList: [],
      teacherId: this.$route.query.teacherId,
      organId: null,
      searchList: {
        status: "",
      },
      musicGroupStatus,
      teacherList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      activeRow: null,
      maskVisible: false,
      maskForm: {
        targetTeacherId: null,
        memo: null,
      },
      isMultiple: false,
      chioseList: [],
    };
  },
  activated() {
    this.teacherId = this.$route.query.teacherId;
    this.getList();
    this.musicGroupStatus = musicGroupStatus;
  },
  mounted() {
    this.teacherId = this.$route.query.teacherId;
    this.getList();
    this.musicGroupStatus = musicGroupStatus;
    // 获取指导老师
    getTeacher({}).then((res) => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
  },
  methods: {
    selectable(row, index) {
      return row.hasRestClass > 0 && row.status == "PROGRESS";
    },
    handleSelectionChange(val) {
      this.chioseList = val;
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    getList() {
      getTeacherMusicClass({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        search: this.teacherId,
        status: this.searchList.status || null,
      }).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;
    },
    submitReset() {
      this.$refs["maskForm"].validate((valid) => {
        if (valid) {
          let obj = {};
          if (this.isMultiple) {
            // 批量调整
            obj.classGroupIds = this.chioseList
              .map((res) => {
                return res.classGroupIds;
              })
              .join(",");
          } else {
            // 单词调整
            obj.classGroupIds = this.activeRow.classGroupIds;
          }
          obj.targetTeacherId = this.maskForm.targetTeacherId;
          obj.teacherId = this.teacherId;
          // obj.memo = this.maskForm.memo;
          classGroupTeacherAdjust(obj).then((res) => {
            if (res.code == 200) {
              this.maskVisible = false;
              this.$message.success("修改成功");
              this.getList();
            }
          });
        }
      });
    },
  },
  watch: {
    maskVisible(val) {
      if (!val) {
        this.maskForm.targetTeacherId = null;
        this.maskForm.memo = null;
      }
    },
  },
};
</script>
<style lang="scss" scope>
.courseInfo {
  h4 {
    margin-bottom: 20px;
  }
  .tableMargin {
    margin-top: 20px;
  }
}
</style>