dy-admin-manager/src/views/teamDetail/components/modals/view-student-list.vue

<template>
  <div>
    <el-form :modal="searchForm" ref="searchFormRef" class="forms" inline>
      <el-form-item prop="search">
        <el-input
          v-model="searchForm.search"
          placeholder="请输入姓名/手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="subjectId">
        <el-select
          v-model="searchForm.subjectId"
          clearable
          placeholder="请选择专业"
        >
          <el-option
            v-for="item in soundList"
            :value="item.id"
            :label="item.name"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="courseType">
        <el-select
          v-model="searchForm.courseType"
          clearable
          placeholder="请选择课程剩余时长"
        >
          <el-option
            v-for="item in courseTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset" type="danger">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      ref="studentTable"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      @select="onTableSelect"
      @select-all="onTableSelectALL"
      max-height="300px"
      @sort-change="sortChang"
    >
      <el-table-column
        v-if="isChiose"
        type="selection"
        :selectable="checkSelectable"
        width="55"
      >
      </el-table-column>
      <el-table-column
        prop="userId"
        align="center"
        width="80"
        label="学员编号"
      ></el-table-column>
      <el-table-column
        prop="nickName"
        align="center"
        width="120"
        label="学员姓名"
      ></el-table-column>
      <el-table-column prop="name" align="center" width="80" label="性别">
        <template slot-scope="scope">
          <div>
            {{ scope.row.gender | sex }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        width="120"
        label="联系电话"
      ></el-table-column>
      <el-table-column
        prop="subjectNames"
        align="center"
        width="80"
        label="专业"
      ></el-table-column>
      <el-table-column
        prop="single"
        align="center"
        label="声部课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.single || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="mix"
        align="center"
        label="合奏课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.mix || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="trainingSingle"
        align="center"
        label="集训声部课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.trainingSingle || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="trainingMix"
        align="center"
        label="集训合奏课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.trainingMix || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="high"
        align="center"
        label="基础技能课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.high || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="highOnline"
        align="center"
        label="线上基础技能课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.highOnline || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="comprehensive"
        align="center"
        label="综合课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.comprehensive || 0 }}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="classroom"
        align="center"
        label="课堂课"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.classroom || 0 }}分钟
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer" v-if="showOk">
      <span style="display: flex;align-items: center; font-size: 16px;padding-right: 8px">当前选中：<span style="color: red;">{{ selectList.length || 0 }}</span>人</span>
      <el-button type="primary" @click="$listeners.close(selectList)"
        >确 定</el-button
      >
    </div>
    <div style="clear: both;" v-if="showOk"></div>
  </div>
</template>
<script>
import { getClassAllStudent } from "@/api/studentManager";
export default {
  props: ["isChiose", "chioseList", "showOk", "disabledList", "soundList", "search", "classId"],
  data() {
    return {
      list: [],
      searchForm: {
        search: "",
        courseType: null,
        subjectId: null,
        sortField: null,
        sortType: null,
      },
      // classroom,comprehensive,high,high_online,mix,single,training_mix,training_single,no_course
      // 课堂 综合 基础技能 线上基础技能 合奏 声部 集训合奏 集训声部 无排课时长
      courseTypeList: [{
        id: 'no_course',
        name: '无排课时长'
      }, {
        id: 'single',
        name: '声部课'
      }, {
        id: 'mix',
        name: '合奏课'
      }, {
        id: 'trainingSingle',
        name: '集训声部课'
      }, {
        id: 'trainingMix',
        name: '集训合奏课'
      }, {
        id: 'high',
        name: '基础技能课'
      }, {
        id: 'highOnline',
        name: '线上基础技能课'
      }, {
        id: 'comprehensive',
        name: '综合课'
      }, {
        id: 'classroom',
        name: '课堂课'
      }],
      selectList: this.chioseList || [],
      loading: false,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getClassAllStudent({ classGroupId: this.classId, ...this.searchForm }).then(res => {
        if (res.code == 200) {
          this.loading = true;
          this.list = res.data?.map(item => {
            return {
              userId: item.userId,
              nickName: item.name,
              gender: item.gender,
              phone: item.parentsPhone,
              subjectNames: item.subjectName,
              single: item.single,
              mix: item.mix,
              classroom: item.classroom,
              comprehensive: item.comprehensive,
              highOnline: item.highOnline,
              trainingSingle: item.trainingSingle,
              trainingMix: item.trainingMix,
              high: item.high
            };
          });
          this.$nextTick(() => {
            if (this.selectList) {
              let idList = this.selectList.map((item, index) => {
                return item.userId;
              });
              this.list.forEach((item, index) => {
                if (idList.indexOf(item.userId) != -1) {
                  console.log(idList, item.userId)
                  this.$refs.studentTable.toggleRowSelection(item, true);
                }
              });

              this.loading = false
            }
          })
        }
      });
    },
    sortChang(val) {
      const dates = {
        ascending: "ASC",
        descending: "DESC",
      };

      if(val.prop && val.order) {
        this.searchForm.sortField = val.prop
        this.searchForm.sortType = dates[val.order]
      } else {
        this.searchForm.sortField = null
        this.searchForm.sortType = null
      }
      this.getList();
    },
    onSearch() {
      this.getList()
    },
    onReset() {
      // this.$refs.searchFormRef.resetFields()
      this.searchForm.search = ""
      this.searchForm.courseType = null
      this.searchForm.subjectId = null
      this.getList()
    },
    handleSelectionChange(val) {
    //   if(this.loading) {
    //     return
    //   }
    //   // console.log(val, 'val', val2)
    //   // let idList = val.map((group) => {
    //   //   return group.userId;
    //   // });
    //   this.selectList = val;
    },
    onTableSelectALL(val) {
      this.selectList = val
    },
    onTableSelect(rows, row) {
      let idList = this.selectList.map((group) => {
        return group.userId;
      });


      let inIdList = rows.map((group) => {
        return group.userId;
      });
      const isAdd = inIdList.indexOf(row.userId) === -1 ? false : true

      if(isAdd) {
        if(idList.indexOf(row.userId) === -1) {
          this.selectList.push(row)
        }
      } else {
        if(idList.indexOf(row.userId) !== -1) {
          this.selectList.splice(idList.indexOf(row.userId), 1)
        }
      }
    },
    clearCom() {
      this.selectList = [];
      this.$refs.studentTable.clearSelection();
    },
    checkSelectable(row) {
      let flag = true;
      if (this.disabledList && this.disabledList.length > 0) {
        this.disabledList.forEach(stu => {
          if (stu.userId == row.userId) {
            flag = false;
          }
        });
      }
      return flag;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .dialog-footer {
  margin-top: 10px;
}
.dialog-footer {
  float: right;
}
</style>