12/01 18:04

11

src/store/getters.js

@@ -12,6 +12,7 @@ const getters = {
   checkinfo: state => state.buildTeam.checkinfo,
   payList: state => state.buildTeam.payList,
   phone: state => state.user.phone,
-  newStudentinfo: state => state.buildTeam.newStudentList
+  newStudentinfo: state => state.buildTeam.newStudentList,
+  reactClassStudentList:state=>state.reactClassStudent.classList 
 }
 export default getters

src/store/index.js

@@ -8,6 +8,7 @@ import permission from './modules/permission'
 import buildTeam from './modules/buildTeam'
 import tagsView from './modules/tagsView'
 import selects from './modules/selects'
+import reactClassStudent from './modules/reactClassStudent'
 
 Vue.use(Vuex)
 
@@ -19,7 +20,8 @@ const store = new Vuex.Store({
     permission,
     buildTeam,
     tagsView,
-    selects
+    selects,
+    reactClassStudent
   },
   getters
 })

src/store/modules/reactClassStudent.js

@@ -0,0 +1,19 @@
+const state = {
+    classList: []
+}
+
+const mutations = {
+    SET_CLASS_LIST (state, classList) {
+      state.classList = classList
+    }
+}
+const actions = {
+    setClassList ({ commit }, classList) {
+      commit('SET_CLASS_LIST', classList)
+    },
+  }
+  export default {
+    state,
+    mutations,
+    actions
+  }

src/views/teamDetail/components/modals/class-pay-list-item.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <el-form-item label="班级" style="padding-left: 20px">
+      <div></div>
+      <a @click="lookStudentList" class="studentTitle">学员列表>></a>
+    </el-form-item>
+    <div class="infomsg">
+      <div class="left">
+        剩余课时:
+        <p>合奏课:<span>1</span>节</p>
+      </div>
+      <div class="right">
+        已选学员:
+        <p>
+          <span>{{ item.studentList.length }}</span
+          >人
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+</style>

src/views/teamDetail/components/modals/class-pay-list.vue

@@ -1,35 +1,26 @@
 <template>
   <div>
-    <el-form-item
-      label="班级"
-      style="padding-left: 20px"
-     
-    >
-     <div></div>
-      <a @click="lookStudentList" class="studentTitle">学员列表>></a>
-    </el-form-item>
-        <div class="infomsg">
-      <div class="left">
-        剩余课时:
-        <p>合奏课:<span>1</span>节</p>
-      </div>
-      <div class="right">
-        已选学员:
-        <p><span>{{item.studentList.length}}</span>人</p>
-      </div>
-    
-    </div>
+
   </div>
 </template>
 <script>
+import classPayList from'./class-pay-list-item'
 export default {
+    components:{
+        classPayList
+    },
   data() {
     return {};
   },
 };
 </script>
 <style lang="scss" scoped>
-.studentTitle {
 
+.studentTitle {
+  width: 120px !important;
+  text-align: right;
+  display: inline-block;
+  color: #409eff;
 }
+
 </style>

src/views/teamDetail/components/modals/classList-group.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form :model="form">
+    <el-form :model="form" ref='form'>
       <classListItem
         v-for="(item, index) in form.classList"
         :key="index"
@@ -37,7 +37,6 @@ export default {
             studentList: [],
             courseList: [],
             index: "",
-            classList: [],
           },
         ],
       },
@@ -50,12 +49,33 @@ export default {
         studentList: [],
         courseList: [],
         index: "",
-        classList: [],
       });
     },
     deteleClass(index) {
       this.form.classList.splice(index, 1);
     },
+    gotoSecond(){
+      this.$refs.form.validate(res=>{
+        if(res){
+          let flag = false
+          this.form.classList.forEach(item=>{
+            if(item.studentList.length <=0){
+              flag = true
+            }
+          })
+          if(flag){
+            this.$message.error('每个班级至少勾选一名学员')
+            return
+          }
+          this.$store.dispatch('setClassList',this.form.classList)
+          console.log('跳转到第二页')
+          console.log(this.$store.getters.reactClassStudentList)
+        
+        
+        }
+      })
+      
+    }
    
   },
 };

src/views/teamDetail/components/modals/classList-item.vue

@@ -28,7 +28,7 @@
           :disabled="isDisabled(item)"
         ></el-option>
       </el-select>
-      <a @click="lookStudentList"  class="studentTitle">学员列表>></a>
+      <el-button type="text"  @click="lookStudentList" :disabled="!item.classId" class="studentTitle">学员列表>></el-button>
     </el-form-item>
     <div class="infomsg">
       <div class="left">
@@ -159,7 +159,7 @@ export default {
   width: 120px !important;
   text-align: right;
   display: inline-block;
-  color: #409eff;
+  // color: #409eff;
 }
 /deep/.dialog-footer {
   display: flex;

src/views/teamDetail/components/modals/student-reset-view.vue

@@ -6,10 +6,10 @@
               class="alert"
               show-icon>
     </el-alert>
-    <classListGroup :classList="classList" />
+    <classListGroup :classList="classList" ref='classListGroup'/>
      <div slot="footer" class="dialog-footer">
       <el-button @click="close">取 消</el-button>
-      <el-button type="primary" >下一步</el-button>
+      <el-button  type="primary" @click="gotoSecond">下一步</el-button>
     </div>
     <div style="clear:both;"></div>
   </div>
@@ -28,6 +28,9 @@ export default {
   },methods:{
      close(){
       this.$emit('close')
+    },
+    gotoSecond(){
+      this.$refs.classListGroup.gotoSecond()
     }
   }
 }