11

11

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

@@ -4,18 +4,24 @@
       <classListItem v-for="(item,index) in form.classList"
                      :key="index"
                      :index='index'
-                     :item='item' />
+                     :item='item'
+                     @deteleClass="deteleClass"
+                     :form="form"
+                     :classList="classList" />
     </el-form>
     <el-button icon="el-icon-circle-plus-outline"
                plain
                type="info"
                size="small"
-               style="width: 100%;margin: 20px 0;">添加班级</el-button>
+               style="width: 100%;margin: 20px 0;"
+               @click="addClass"
+               :disabled="form.classList.length >= classList.length">添加班级</el-button>
   </div>
 </template>
 <script>
 import classListItem from './classList-item'
 export default {
+  props: ['classList'],
   components: { classListItem },
   data () {
     return {
@@ -23,6 +29,14 @@ export default {
         classList: [{ classId: '', studentList: [], courseList: [], index: '', classList: [] }]
       },
     }
+  }, methods: {
+    addClass () {
+
+      this.form.classList.push({ classId: '', studentList: [], courseList: [], index: '', classList: [] })
+    },
+    deteleClass (index) {
+      this.form.classList.splice(index, 1)
+    }
   }
 }
 </script>

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

@@ -1,8 +1,9 @@
 <template>
   <div>
-    <el-alert title="班级1"
+    <!--     :closable="false" -->
+    <el-alert :title="'班级'+(index+1)"
               type="info"
-              :closable="false"
+              @close="deteleClass"
               class='alert'>
     </el-alert>
     <el-form-item label="选择班级"
@@ -11,22 +12,43 @@
       <el-select v-model="item.classId"
                  style="margin-right:20px;"
                  @change="changeValue">
-        <el-option label="1"
-                   value="2"></el-option>
+        <el-option :label="item.name"
+                   :value="item.id"
+                   v-for="(item,index) in classList"
+                   :key='index'
+                   :disabled="isDisabled(item)"></el-option>
       </el-select>
       <a>学员列表>></a>
     </el-form-item>
+    <div class="infomsg">
+      <div class="left">剩余课时:<p>合奏课:<span>1</span>节</p>
+      </div>
+      <div class="right">已选学员:<p><span>2</span>人</p>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
-  props: ['item', 'index'],
+  props: ['item', 'index', 'classList', 'form'],
   data () {
     return {}
   },
   methods: {
     changeValue (val) {
       console.log(val)
+    },
+    deteleClass () {
+      this.$emit('deteleClass', this.index)
+    },
+    isDisabled (item) {
+      let flag = false;
+      this.form?.classList?.forEach(some => {
+        if (item.id == some.classId) {
+          flag = true
+        }
+      })
+      return flag
     }
   }
 }
@@ -35,4 +57,26 @@ export default {
 .alert {
   margin-bottom: 10px;
 }
+.infomsg {
+  background-color: #f5faf9;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 25px;
+  color: #333;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  div {
+    display: flex;
+    flex-direction: row;
+    p {
+      color: #1a1a1a;
+      font-weight: bold;
+      span {
+        color: #3b7f7a;
+      }
+    }
+  }
+}
 </style>

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

@@ -6,12 +6,13 @@
               class="alert"
               show-icon>
     </el-alert>
-    <classListGroup />
+    <classListGroup :classList="classList" />
   </div>
 </template>
 <script>
 import classListGroup from './classList-group'
 export default {
+  props: ['classList'],
   components: {
     classListGroup
   },

src/views/teamDetail/components/resetClass.vue

@@ -363,7 +363,7 @@
     <el-dialog title='学员班级调整'
                width="700px"
                :visible.sync="studentResetVisiable">
-      <studentResetView />
+      <studentResetView :classList='activeSingleList' />
     </el-dialog>
   </div>
 </template>