选择学生

1

src/views/teamDetail/components/courseTransModals/transClass.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog
-      title="创建班级"
+      title="选择学员"
       append-to-body
       width="800px"
       :visible.sync="transClassVisible"
@@ -18,11 +18,11 @@
           </p>
         </el-alert>
         <el-form :model="form" ref="form">
-          <div class="classWrap">
+          <div class="classWrap" v-for="(item,index) in form.classList" :key="index">
             <h2 class="classTitle">
-              <span>线上基础技能班</span>
+              <span>线上基础技能班{{index+1}}</span>
               <i
-                @click="remove(scope.$index)"
+                @click="remove(index)"
                 v-if="form.classList.length > 1"
                 class="close-icon el-icon-delete-solid"
               ></i>
@@ -30,7 +30,7 @@
             <el-row :gutter="40">
               <el-col :span="12">
                 <el-form-item
-                  prop="classNames"
+                  :prop="'classList.' + index + '.name'"
                   :rules="[
                     {
                       required: true,
@@ -47,7 +47,7 @@
                     </p>
                   </template>
                   <el-input
-                    v-model="form.classNames"
+                    v-model="item.name"
                     style="width: 100%"
                     placeholder="请输入班级名称"
                   />
@@ -57,7 +57,7 @@
                 <el-form-item
                   :label="'声部'"
                   style="margin-right: 0"
-                  prop="sound"
+                  :prop="'classList.' + index + '.subjectIdList'"
                   :rules="[
                     { required: true, message: '请选择声部', trigger: 'blur' },
                   ]"
@@ -65,12 +65,12 @@
                   <template slot="label">
                     <p style="position: relative">
                       <span style="color: #f56c6c; margin-right: 4px">*</span>
-                      声部
+                      网络教室声部
                     </p>
                   </template>
-                  <select-all
-                    v-model="form.sound"
-                    style="width: 100%"
+                  <el-select
+                    v-model="item.subjectIdList"
+                    style="width: 100% !important"
                     clearable
                     multiple
                     collapse-tags
@@ -83,15 +83,15 @@
                       :label="item.name"
                       :value="item.id"
                     ></el-option>
-                  </select-all>
+                  </el-select>
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-row>
+            <el-row :gutter="40">
               <el-col :span="12">
                 <el-form-item
                   label="主教老师"
-                  prop="coreTeacher"
+                  :prop="'classList.' + index + '.coreTeacher'"
                   :rules="[{ required: true, message: '请选择主教老师' }]"
                 >
                   <template slot="label">
@@ -101,10 +101,11 @@
                     </p>
                   </template>
                   <el-select
-                    v-model.trim="form.coreTeacher"
+                    v-model.trim="item.coreTeacher"
                     placeholder="请选择主教老师"
                     clearable
                     filterable
+                    style="width: 100% !important"
                   >
                     <el-option
                       v-for="(item, index) in teacherList"
@@ -122,9 +123,30 @@
                   <!-- <remote-search :commit="'setTeachers'" v-model="form.coreTeacher"  /> -->
                 </el-form-item>
               </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <template slot="label">
+                    <p style="position: relative">
+                      &nbsp;
+                      <!-- <span style="color: #f56c6c; margin-right: 4px">*</span> -->
+                    </p>
+                  </template>
+                  <div class="studentTitle">
+                    <p>已选择<span style="color:red;">{{item.studentList.length}}</span>名</p>
+                  <el-button type="text" @click="chioseStudent(index)">选择学员 >></el-button>
+                  </div>
+
+                </el-form-item>
+              </el-col>
             </el-row>
           </div>
+          <el-button class="addButton" @click="addClass">添加+</el-button>
         </el-form>
+        <transStudent ref="transStudent" @close="()=>{showStudentVisible = false}" @submit="setStudent" v-if="showStudentVisible" :soundList="soundList" :studentList="studentList" :activeListStudent="activeListStudent" activeType='HIGH_ONLINE'/>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="transClassVisible = false">取 消</el-button>
+        <el-button type="primary" @click="gotoNext">下一步</el-button>
       </div>
     </el-dialog>
   </div>
@@ -132,28 +154,59 @@
 <script>
 import { getCourseScheduleConvert } from "../../api";
 import { findSound, getTeacher } from "@/api/buildTeam";
+import transStudent from './transStudent'
 export default {
+  props:{
+    students:{
+      type:Array,
+      default:[]
+    }
+  },
   data() {
     return {
       transClassVisible: false,
+      getStudentList:[],
       form: {
-        classList: [{}, {}],
+        classList: [{
+        expectStudentNum: 6,
+        groupType: "MUSIC",
+        musicGroupId: this.$route.query.id,
+        name: "",
+        studentList: [],
+        coreTeacher: '',
+        type: "HIGH_ONLINE",
+      }],
       },
       soundList: [],
       teacherList: [],
       teamid: "",
       organId: "",
+      showStudentVisible:false,
+      activeStudentIndex:0,
+      activeListStudent:[],
+      studentList:[]
     };
   },
-  mounted() {},
+  components:{
+    transStudent
+  },
+  mounted() {
+    this.init()
+  },
   methods: {
     async openDialog() {
       // 获取列表
       this.transClassVisible = true;
     },
     getList() {},
-    gotoNext() {},
-    remove(index) {},
+    gotoNext() {
+      this.$refs.form.validate(flag=>{
+
+      })
+    },
+    remove(index) {
+      this.form.classList.splice(index,1)
+    },
     init() {
       this.teamid = this.$route.query.id;
       this.organId = this.$route.query.organId;
@@ -172,6 +225,36 @@ export default {
         }
       });
     },
+    addClass() {
+      this.form.classList.push({
+        expectStudentNum: 6,
+        groupType: "MUSIC",
+        musicGroupId: this.$route.query.id,
+        name: "",
+        studentList: [],
+        coreTeacher: '',
+        type: "HIGH_ONLINE",
+      });
+    },
+    setStudent(student){
+      console.log(this.activeStudentIndex)
+      this.form.classList[this.activeStudentIndex].studentList =[...student] ;
+      // 提交完的学生
+    },
+    chioseStudent(index){
+      this.activeStudentIndex = index;
+      this.activeListStudent =this.students.filter(item=>{
+        return this.form?.classList[index]?.studentList.indexOf(item.useId) != -1
+      })
+      this.studentList =this.students;
+      this.showStudentVisible = true;
+
+      this.$nextTick(()=>{
+        console.log( this.$refs.transStudent)
+        this.$refs.transStudent.openDialog()
+      })
+
+    }
   },
   computed: {
     chioseCourse() {
@@ -196,7 +279,8 @@ export default {
 }
 .classWrap {
   background-color: #f2f2f2;
-  padding: 10px;
+  padding: 20px 20px 10px;
+  margin-bottom: 20px;
   .classTitle {
     // width: 760px;
     display: flex;
@@ -211,18 +295,30 @@ export default {
     }
   }
 }
-::v-deep .el-form-item__label{
+::v-deep .el-form-item__label {
   display: block;
   width: 100%;
   text-align: left;
-  &::before{
+  &::before {
     content: "" !important;
-  position: absolute;
-  color: transparent;
-  margin-right: 4px;
+    position: absolute;
+    color: transparent;
+    margin-right: 4px;
   }
 }
 ::v-deep .el-form-item__content {
+  display: block;
   margin-left: 0;
 }
+.addButton {
+  width: 100%;
+}
+.studentTitle {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  p {
+    margin-right: 10px;
+  }
+}
 </style>>

src/views/teamDetail/components/courseTransModals/transStart.vue

@@ -20,7 +20,7 @@
           label="学员声部"
         ></el-table-column>
       </el-table>
-      <transClass ref='transClass'/>
+      <transClass ref='transClass' :students="tableList"/>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="transVisible = false">取 消</el-button>
@@ -53,7 +53,6 @@ export default {
   data() {
     return {
       tableList: [],
-
       transVisible: false,
       courseConvertSum: {
         courseMinute: 0,

src/views/teamDetail/components/courseTransModals/transStudent.vue

@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <el-dialog
+      title="选择学员"
+      append-to-body
+      width="800px"
+      :visible.sync="transStudentVisible"
+    >
+      <el-form
+        :model="form"
+        ref="form"
+        label-suffix=": "
+        inline
+        label-width="90px"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              :label="'声部筛选'"
+              style="margin-right: 0"
+              prop="sound"
+            >
+              <select-all
+                v-model="form.sound"
+                style="width: 100%"
+                clearable
+                multiple
+                collapse-tags
+                filterable
+                placeholder="请选择声部"
+              >
+                <el-option
+                  v-for="(item, index) in soundList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </select-all>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-transfer
+          filterable
+          :titles="['所有学员', '已选学员']"
+          filter-placeholder="请输入学生姓名"
+          :filter-method="filterStudent"
+          v-model="seleched"
+          :render-content="renderFunc"
+          :data="data"
+          :class="{ hideReturn: !canDelUser }"
+        >
+          <template #left-footer>
+            <div class="footer line">
+              <span>姓名</span>
+              <span>性别</span>
+              <span>专业</span>
+            </div>
+          </template>
+          <template #right-footer>
+            <div class="footer line">
+              <span>姓名</span>
+              <span>性别</span>
+              <span>专业</span>
+            </div>
+          </template>
+        </el-transfer>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="$listeners.close">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { genderType } from "@/constant";
+import { uniqBy } from "lodash";
+export default {
+  props: ["studentList", "soundList", "activeType", "activeListStudent"],
+  computed: {
+    data() {
+      return uniqBy([...this.studentList, ...this.activeListStudent], "userId")
+        .filter((item) => {
+          if (this.form.sound.length) {
+            return (
+              this.form.sound.includes(item.subjectId) ||
+              this.seleched.includes(item.userId)
+            );
+          }
+          return true;
+        })
+        .map((item) => ({
+          value: item.userId,
+          key: item.userId,
+          name: item.name,
+          subjectName: item.subjectName,
+          gender: genderType[item.gender],
+        }));
+    },
+    showName() {
+      return !this.isOnlyChangeUser && this.activeType != "MUSIC_NETWORK";
+    },
+    canDelUser() {
+      // console.log(this.isStudentRemove)
+      return (
+        this.$route.query.type !== "resetTeam" ||
+        !this.isOnlyChangeUser ||
+        this.isStudentRemove
+      );
+    },
+  },
+  data() {
+    return {
+      sound: [],
+      form: {
+        name: "",
+        coreTeacher: "",
+        assistant: "",
+        sound: [],
+      },
+      seleched: [],
+      transStudentVisible: true,
+    };
+  },
+  watch: {
+    activeListStudent() {
+      this.setSelectedUser();
+    },
+  },
+  mounted() {
+    this.setSelectedUser();
+  },
+  methods: {
+    setSelectedUser() {
+      const ids = this.activeListStudent.map((item) => item.userId);
+      this.seleched = [...ids];
+    },
+    filterStudent(query, item) {
+      return (
+        item.name.indexOf(query) > -1 ||
+        item.subjectName.indexOf(query) > -1 ||
+        item.gender.indexOf(query) > -1
+      );
+    },
+    renderFunc(h, option) {
+      return (
+        <div class="line">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="top"
+            open-delay={300}
+          >
+            <span slot="content">{option.name}</span>
+            <span class="select-item">{option.name}</span>
+          </el-tooltip>
+          <span>{option.gender}</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="top"
+            open-delay={300}
+          >
+            <span slot="content">{option.subjectName}</span>
+            <span class="select-item">{option.subjectName}</span>
+          </el-tooltip>
+        </div>
+      );
+    },
+    change(val) {
+      this.$listeners.changeActiveChioseSound(val);
+      this.$listeners.searchStudent();
+    },
+    submit() {
+      if (
+        !this.isOnlyChangeUser &&
+        this.activeType == "HIGH_ONLINE" &&
+        (this.seleched.length < 3 || this.seleched.length > 5)
+      ) {
+        return this.$message.error("线上技能班必须为3-5人");
+      }
+      this.$emit("submit", this.seleched);
+      this.transStudentVisible = false
+    },
+    openDialog() {
+      this.transStudentVisible = true;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+::v-deep .el-transfer {
+  display: flex;
+  align-items: center;
+  .el-transfer__buttons {
+    display: flex;
+    width: 110px;
+    flex-direction: column;
+    > button {
+      &:last-child {
+        margin-left: 0;
+      }
+    }
+  }
+  .el-transfer-panel {
+    width: 300px;
+  }
+}
+.footer {
+  margin-left: 35px;
+  margin-right: auto;
+  height: 40px;
+  line-height: 40px;
+}
+.hideReturn {
+  ::v-deep .el-transfer__buttons button:first-child {
+    display: none;
+  }
+}
+::v-deep .el-checkbox-group {
+  padding-bottom: 40px;
+}
+::v-deep .line {
+  width: 220px;
+  display: flex;
+  justify-content: space-around;
+  height: 30px;
+  line-height: 30px;
+  .select-item {
+    width: 33.33333%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+::v-deep .dialog-footer {
+  margin-top: 20px;
+  display: block;
+  text-align: right;
+}
+</style>