10/15

21:12

src/api/buildTeam.js

@@ -134,4 +134,64 @@ export function getNoClassStudent (data) {
     params: data
 
   })
+}
+
+// 新增单技课班
+export function addSingleClass (data) {
+  return request({
+    url: '/web-server/classGroup/add',
+    method: 'post',
+    data
+
+  })
+}
+
+// 删除单技课班
+export function removeSingleClass (data) {
+  return request({
+    url: '/web-server/classGroup/delSingle',
+    method: 'post',
+    data: qs.stringify(data)
+
+  })
+}
+
+// 获取未分班的单技班
+export function findNoClassSingle (data) {
+  return request({
+    url: '/web-server/classGroup/findNoClassSubjects',
+    method: 'get',
+    params: data
+
+  })
+}
+// 添加合奏班
+export function addAllClass (data) {
+  return request({
+    url: '/web-server/classGroup/addMixClass',
+    method: 'post',
+    data: qs.stringify(data)
+
+  })
+}
+
+// 获取所有合奏班列表
+export function getAllClass (data) {
+  return request({
+    url: '/web-server/classGroup/findMixMusicGroupClass',
+    method: 'get',
+    params: data
+
+  })
+}
+
+// 删除合奏班
+
+export function removeAllClass (data) {
+  return request({
+    url: '/web-server/classGroup/delMix',
+    method: 'post',
+    data: qs.stringify(data)
+
+  })
 }

src/views/teamBuild/teamSeting/components/setClass.vue

@@ -18,50 +18,68 @@
       </el-table>
     </div>
     <div class="center">
-      <el-table :data='centertList'
+      <el-table :data='centerList'
                 :header-cell-style="{background:'#EDEEF0',color:'#444'}">
         <el-table-column label="
                   班级名称"
+                         prop="name"
                          align='center'>
         </el-table-column>
         <el-table-column label="声部"
+                         prop="subjectName"
                          align='center'>
         </el-table-column>
         <el-table-column label="班级人数"
+                         prop="studentNum"
                          align='center'>
         </el-table-column>
         <el-table-column label="操作"
                          align='center'>
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         @click="removeSingleClass(scope.row)">删除</el-button>
+            </div>
+          </template>
         </el-table-column>
       </el-table>
       <div class="centerInfo">
-        <p>当前班级总数（个）：30</p>
+        <p>当前班级总数（个）：{{ centerList.length }}</p>
         <div class="btnWrap">
           <div class="setBtn"
                @click="setSingleClass">设置单技课班</div>
-          <div class="okBtn">确定</div>
+          <!-- <div class="okBtn">确定</div> -->
         </div>
       </div>
     </div>
     <!-- v-if="centertList.length>0 " -->
     <div class="right">
-      <el-table :data='centertList'
+      <el-table :data='rightList'
                 :header-cell-style="{background:'#EDEEF0',color:'#444'}">
         <el-table-column label="
                   合奏班"
+                         prop="name"
                          align='center'>
         </el-table-column>
         <el-table-column label="班级组成"
+                         prop="classNames"
                          align='center'>
+
         </el-table-column>
         <el-table-column label="操作"
                          align='center'>
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         @click="removeAllClass(scope.row)">删除</el-button>
+            </div>
+          </template>
         </el-table-column>
       </el-table>
       <div class="centerInfo">
         <div class="btnWrap">
           <div class="setBtn"
-               @click="allVisible = true">添加</div>
+               @click="getNoclassSign">添加</div>
           <div class="okBtn">下一步</div>
         </div>
       </div>
@@ -84,15 +102,16 @@
           <div class="rightGroup"
                v-for="(item,index) in studentsGroup"
                :key='index'>
+            <!-- @change="handleCheckAllChange(item.rows,index)" -->
             <h3>{{item.subjectName}}的学员名单 <el-checkbox v-model="maskList.studentsGroup[index]"
-                           @change="handleCheckAllChange(item.rows)">全选</el-checkbox>
+                           @change="handleCheckAllChange(item.rows,index)">全选</el-checkbox>
             </h3>
             <el-checkbox-group v-model="maskList.checkList[index]"
-                               @change="handleCheckedCitiesChange"
+                               @change="handleCheckedCitiesChange(index,item.rows)"
                                class='checkGroup'>
               <el-checkbox v-for="(stu,num) in item.rows"
                            :key='num'
-                           :label="stu.id">{{ stu.name }}</el-checkbox>
+                           :label="stu.userId">{{ stu.name }}</el-checkbox>
             </el-checkbox-group>
           </div>
 
@@ -100,15 +119,21 @@
       </div>
       <div class="classMaskbottom">
         <h3></h3>
-        <el-form :inline="true">
-          <el-form-item label="班级名称">
-            <el-input></el-input>
+        <el-form :inline="true"
+                 :model="className"
+                 :rules="classNameRules"
+                 ref='className'>
+          <el-form-item label="班级名称"
+                        prop='name'>
+            <el-input v-model="className.name"></el-input>
           </el-form-item>
           <el-form-item label="已选声部">
-            <el-input :disabled="true"></el-input>
+            <el-input :disabled="true"
+                      v-model="className.sound"></el-input>
           </el-form-item>
           <el-form-item label="班级人数">
-            <el-input :disabled="true"></el-input>
+            <el-input :disabled="true"
+                      :value="activeStudents.length"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -116,30 +141,39 @@
            class="dialog-footer">
         <el-button @click="classVisible = false">取 消</el-button>
         <el-button type="primary"
-                   @click="classVisible = false">确 定</el-button>
+                   @click="addNewClass">确 定</el-button>
       </div>
     </el-dialog>
     <el-dialog title="合奏班设置"
                width="600px"
                :visible.sync="allVisible">
       <el-checkbox-group v-model="allMaskList.signClassList"
-                         @change="handleCheckedCitiesChange"
                          class='checkGroup'>
-        <el-checkbox :label="1">我是学生1</el-checkbox>
-        <el-checkbox :label="1">我是学生1</el-checkbox>
-        <el-checkbox :label="1">我是学生1</el-checkbox>
+        <el-checkbox v-for="(item,index) in NoClassSingle"
+                     :key='index'
+                     :label="item.id">{{ item.name }}</el-checkbox>
       </el-checkbox-group>
+      <el-form :model="allList"
+               style="margin-top:30px;"
+               :rules="allRules"
+               :inline="true">
+        <el-form-item label="请输入合奏班名称"
+                      prop="name">
+          <el-input type="text"
+                    v-model="allList.name"></el-input>
+        </el-form-item>
+      </el-form>
       <div slot="footer"
            class="dialog-footer">
         <el-button @click="allVisible = false">取 消</el-button>
         <el-button type="primary"
-                   @click="allVisible = false">确 定</el-button>
+                   @click="addAllClass">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { getTeamRecruit, getSingleClass, getNoClassStudent } from "@/api/buildTeam"
+import { getTeamRecruit, getSingleClass, getNoClassStudent, addSingleClass, removeSingleClass, addAllClass, getAllClass, findNoClassSingle, removeAllClass } from "@/api/buildTeam"
 export default {
   props: {
     teamid: {
@@ -152,20 +186,42 @@ export default {
       classVisible: false, // 班级设置弹窗
       allVisible: false, // 合奏班弹窗设置
       leftList: [],
-      centertList: [],
+      centerList: [],
       rightList: [],
       maskList: {
         subjectCheckList: [],
         checkList: [],
         checkAll: false,
-        isIndeterminate: false,
+        isIndeterminate: [],
         studentsGroup: []
       },
       allMaskList: {
         signClassList: []
       },
       soundSize: 0,
-      studentsGroup: {} // 存储所有声部 所有学生的集合表
+      activeStudents: [],  // 选中的所有学生
+      studentsGroup: {}, // 存储所有声部 所有学生的集合表
+      className: {
+        name: '',
+        sound: ''
+      },
+      classNameRules: {
+        name: [
+          { required: true, message: '请输入班级名称', trigger: 'blur' },
+          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
+        ]
+      },
+      allList: { //合奏班名字确认
+        name: ''
+      },
+      allRules: {
+        name: [
+          { required: true, message: '请输入班级名称', trigger: 'blur' },
+          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
+        ]
+      },
+      NoClassSingle: []
+
     }
   },
   mounted () {
@@ -176,44 +232,161 @@ export default {
         this.leftList = res.data;
       }
     })
-    getSingleClass({ musicGroupId: this.teamid }).then(res => {
-      if (res.code == 200) {
-        // 单技班列表
-        this.centerList = res.data;
-      }
-    })
+    this.getSingleClass();
+    this.getAllClass();
+
   }, methods: {
-    handleCheckAllChange (val) {
-      console.log(val);
+    getAllClass () {
+      getAllClass({ musicGroupId: this.teamid }).then(res => {
+        if (res.code == 200) {
+          this.rightList = res.data;
+        }
+      })
+    },
+    getSingleClass () {
+      getSingleClass({ musicGroupId: this.teamid }).then(res => {
+        if (res.code == 200) {
+          // 单技班列表
+          this.centerList = res.data;
+        }
+      })
+    },
+    handleCheckAllChange (val, index) {
+      // 全选
+      // 1.val:选项框里的所有选项
+      // 2.哪一个
+      // console.log(this.maskList.studentsGroup[index])
+      if (this.maskList.studentsGroup[index]) {
+        this.maskList.checkList[index] = []
+        for (let i in val) {
+          // 存储的数组
+
+          this.maskList.checkList[index].push(val[i].id);
+          this.activeStudents.push(val[i].id)
+
+          // 并且把所有的学生 添加到勾选的学生列表
+
+          // console.log(this.maskList.checkList[index])
+        }
+      } else {
+        for (let i in this.activeStudents) {
+          for (let j in this.maskList.checkList[index]) {
+            if (this.maskList.checkList[index][j] == this.activeStudents[i]) {
+              this.activeStudents.splice(i, 1);
+            }
+          }
+        }
+        this.maskList.checkList[index] = []
+      }
 
-      // this.checkedCities = val ? this.maskList.checkList : [];
-      // this.isIndeterminate = false;
     },
-    handleCheckedCitiesChange (val) {
-      // let checkedCount = value.length;
-      // this.checkAll = checkedCount === this.cities.length;
-      // this.maskList.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    handleCheckedCitiesChange (index, list) {
+      // 单选学生触发事件
+      // 此处需要同步全选按钮状态
+      // maskList.studentsGroup[index]
+      if (list.length == this.maskList.checkList[index].length) {
+        //全选选中
+        this.maskList.studentsGroup[index] = true;
+      } else {
+        this.maskList.studentsGroup[index] = false;
+      }
+
+      let arr = [];
+      for (let i in this.maskList.checkList) {
+        for (let j in this.maskList.checkList[i]) {
+          arr.push(this.maskList.checkList[i][j])
+        }
+      }
+
+      this.activeStudents = arr;
     },
     setSingleClass () {
       this.classVisible = true;
     },
     chioseSound (val) {
-      console.log(val);
       this.soundSize = val.length;
-      // val 是一个数组
-      // 根据学生id和乐团id 查未报名的学生
-      //getNoClassStudent
-      // for (let i in val){
-      //   // 发请求分部获取
-      // }
       getNoClassStudent({
         musicGroupId: this.teamid,
         actualSubjectId: val.join(',')
       }).then(res => {
         if (res.code == 200) {
           this.studentsGroup = res.data
+          let str = ''
+          // // 生成动态的checkList
+          for (let key in this.studentsGroup) {
+            this.$set(this.maskList.checkList, key, []);
+            str += this.studentsGroup[key].subjectName + '+';
+          }
+          str = str.substring(0, str.length - 1);
+          this.className.sound = str;
+        }
+      })
+    },
+    // 添加单技班
+    addNewClass () {
+      this.$refs['className'].validate(valid => {
+        if (valid) {
+          addSingleClass({
+            musicGroupId: this.teamid,
+            name: this.className.name,
+            subjectIdList: this.maskList.subjectCheckList.join(','),
+            teachMode: 'OFFLINE',
+            userIds: this.activeStudents.join(','),
+            studentNum: this.activeStudents.length,
+            type: 'NORMAL'
+          }).then(res => {
+            if (res.code == 200) {
+              // 成功刷新班级列表 清空数据
+              this.$message.success('添加成功');
+              this.classVisible = false;
+              this.getSingleClass();
+            }
+          })
+        } else {
+          this.$message.error('请输入班级名称')
+        }
+      })
+      return;
+
+    },
+    removeSingleClass (row) {
+      removeSingleClass({ classGroupId: row.id }).then(res => {
+        if (res.code == 200) {
+          this.$message.success('删除成功');
+          this.getSingleClass();
         }
       })
+    },
+    getNoclassSign () {
+      findNoClassSingle({ musicGroupId: this.teamid }).then(res => {
+        if (res.code == 200) {
+          this.NoClassSingle = res.data;
+          this.allVisible = true;
+        }
+      })
+    },
+    // 添加合奏班
+    addAllClass () {
+      addAllClass({
+        musicGroupId: this.teamid,
+        name: this.allList.name,
+        classGroupIds: this.allMaskList.signClassList.join(',')
+      }).then(res => {
+        if (res.code == 200) {
+          this.$message.success('恭喜您创建成功')
+          this.allVisible = false;
+          this.getAllClass();
+        }
+      })
+    },
+    // 删除合奏班
+    removeAllClass (row) {
+      removeAllClass({ classGroupId: row.id }).then(res => {
+        if (res.code == 200) {
+          this.$message.success('删除成功')
+          this.getAllClass();
+        }
+      });
     }
   },
 

src/views/teamBuild/teamSeting/components/setTeacher.vue

@@ -13,11 +13,11 @@
                 :header-cell-style="{background:'#EDEEF0',color:'#444'}">
         <el-table-column label="单技课班级名称"
                          prop='name'
-                         width="160px">
+                         width="180px">
 
         </el-table-column>
         <el-table-column label="主教老师"
-                         width="160px">
+                         width="200px">
           <template slot-scope="scope">
             <div>
               <el-select v-model="scope.row.coreTeacher">

src/views/teamBuild/teamSeting/index.vue

@@ -10,7 +10,7 @@
               @click="activeIndex=0">
           <div class="step1 sptep"
                :class="activeIndex >= 0?'activestep':''">
-            基本信息
+            班级设置
           </div>
           <img :src="activeIndex >= 0?stepImgs.nol:stepImgs.active"
                alt=""
@@ -99,7 +99,9 @@ export default {
     }
   },
   created () {
-    this.id = this.$route.query.id || '191015094822001'
+    // 191015151405001
+    // 191015094822001
+    this.id = this.$route.query.id || '191015094822001';
   },
   mounted () {