11/30 18:19

1

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

@@ -1,57 +1,111 @@
 <template>
   <div>
     <!--     :closable="false" -->
-    <el-alert :title="'班级'+(index+1)"
-              type="info"
-              @close="deteleClass"
-              class='alert'>
+    <el-alert
+      :title="'班级' + (index + 1)"
+      type="info"
+      @close="deteleClass"
+      :closable="index > 0"
+      class="alert"
+    >
     </el-alert>
-    <el-form-item label="选择班级"
-                  style="padding-left:20px;"
-                  :prop="'classList.'+index+'.value'">
-      <el-select v-model="item.classId"
-                 style="margin-right:20px;"
-                 @change="changeValue">
-        <el-option :label="item.name"
-                   :value="item.id"
-                   v-for="(item,index) in classList"
-                   :key='index'
-                   :disabled="isDisabled(item)"></el-option>
+    <el-form-item
+      label="选择班级"
+      style="padding-left: 20px"
+      :rules="[{ required: true, message: '请选择班级', trigger: 'change' }]"
+      :prop="'classList.' + index + '.classId'"
+    >
+      <el-select
+        v-model="item.classId"
+        style="margin-right: 20px"
+        @change="changeValue"
+      >
+        <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>
+      <a @click="lookStudentList"  class="studentTitle">学员列表>></a>
     </el-form-item>
     <div class="infomsg">
-      <div class="left">剩余课时:<p>合奏课:<span>1</span>节</p>
+      <div class="left">
+        剩余课时:
+        <p>合奏课:<span>1</span>节</p>
       </div>
-      <div class="right">已选学员:<p><span>2</span>人</p>
+      <div class="right">
+        已选学员:
+        <p><span>{{item.studentList.length}}</span>人</p>
       </div>
     </div>
+        <el-dialog title="学员列表"
+         width="700px"
+               :visible.sync="studentListModalVisible"
+               append-to-body
+               destroy-on-close>
+      <viewStudentList :list="studentList" :chioseList='item.studentList' v-if="studentListModalVisible"
+      :isChiose='true'
+                       @close="closeStudentView" />
+    </el-dialog>
   </div>
 </template>
 <script>
+import { getClassAllStudent } from "@/api/studentManager";
+import viewStudentList from './view-student-list'
 export default {
-  props: ['item', 'index', 'classList', 'form'],
-  data () {
-    return {}
+  props: ["item", "index", "classList", "form"],
+  components:{viewStudentList},
+  data() {
+    return {
+      studentList: [],
+      studentListModalVisible:false
+    };
   },
   methods: {
-    changeValue (val) {
-      console.log(val)
+    changeValue(val) {
+      console.log(val);
     },
-    deteleClass () {
-      this.$emit('deteleClass', this.index)
+    deteleClass() {
+      this.$emit("deteleClass", this.index);
     },
-    isDisabled (item) {
+    isDisabled(item) {
       let flag = false;
-      this.form?.classList?.forEach(some => {
+      this.form?.classList?.forEach((some) => {
         if (item.id == some.classId) {
-          flag = true
+          flag = true;
         }
-      })
-      return flag
+      });
+      return flag;
+    },
+    lookStudentList() {
+      if (!this.item.classId) {
+        this.$message.error("请先选择班级,再查询学生列表");
+        return;
+      }
+      // 查学生
+      getClassAllStudent({ classGroupId: this.item.classId }).then((res) => {
+        if (res.code == 200) {
+          this.studentList = res.data.map((item) => {
+            return {
+              userId: item.id,
+              nickName: item.name,
+              gender: item.gender,
+              phone: item.parentsPhone,
+              subjectNames: item.subjectName,
+            };
+          });
+          this.studentListModalVisible = true
+        }
+      });
+    },
+    closeStudentView(list){
+      this.item.studentList = list
+      this.studentListModalVisible = false
     }
-  }
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 .alert {
@@ -79,4 +133,15 @@ export default {
     }
   }
 }
+.studentTitle {
+  width: 120px !important;
+  text-align: right;
+  display: inline-block;
+  color: #409eff;
+}
+/deep/.dialog-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
 </style>

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

@@ -2,10 +2,17 @@
   <div>
     <el-table
       :data="list"
+      ref='studentTable'
       style
       :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
       tooltip-effect="dark"
+      
+       @selection-change="handleSelectionChange"
     >
+     <el-table-column v-if="isChiose"
+      type="selection"
+      width="55">
+    </el-table-column>
       <el-table-column
         prop="userId"
         align="center"
@@ -44,13 +51,32 @@
       ></el-table-column>
     </el-table>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="$listeners.close">确 定</el-button>
+      <el-button type="primary" @click="$listeners.close(selectList)">确 定</el-button>
     </div>
   </div>
 </template>
 <script>
 export default {
-  props: ['list'],
+  props: ['list','isChiose','chioseList'],
+  data(){
+    return{
+      selectList:this.chioseList
+    }
+  },mounted(){
+    let idList = this.chioseList.map((item,index)=>{
+      return item.userId
+    })
+    this.list.forEach((item,index)=>{
+      if(idList.indexOf(item.userId)!= -1){
+        this.$refs.studentTable.toggleRowSelection(item,true);
+      }
+    })
+  },
+  methods:{
+    handleSelectionChange(val){
+      this.selectList = val
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/views/teamDetail/components/resetClass.vue

@@ -355,6 +355,7 @@
     </el-dialog>
     <el-dialog title="学员列表"
                :visible.sync="studentListModalVisible"
+               
                destroy-on-close>
       <viewStudentList :list="studentListModal"
                        @close="studentListModalVisible = false" />