01/07 17:13

11

src/api/buildTeam.js

@@ -1459,3 +1459,14 @@ export function getClassGroupPage(data) {
     data:{}
   })
 }
+
+// 获取合班学员缴费金额
+export function getStudentPaymentCalenders(data) {
+  return request2({
+    url: api + `/classGroup/queryStudentPaymentCalenders`,
+    method: 'post',
+    params:{},
+    data:data
+  })
+}
+

src/views/teamDetail/componentClass/calenderStudentList.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-collapse v-model="activeNames" >
+      <el-collapse-item title="一致性 Consistency" name="1">
+        <div>
+          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+        </div>
+        <div>
+          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+export default {
+  props:['studentIds', 'masterClassGroupId', 'classGroupStudents'],
+  data() {
+    return {
+      activeNames:[]
+    };
+  },
+  mounted(){
+    console.log(this.studentIds, this.masterClassGroupId, this.classGroupStudents)
+  }
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/teamDetail/componentClass/classCompound.vue

@@ -18,7 +18,7 @@
             >清空列表</el-button
           >
           <div>
-            <el-radio-group v-model="radio">
+            <el-radio-group v-model="radio" @change="changeMasterClass">
               <el-table
                 :data="dataList"
                 height="300px"
@@ -48,8 +48,8 @@
                 >
                   <!--    -->
                   <template slot-scope="scope">
-                    <div v-if="scope.row.studentList">
-                      {{ scope.row.studentList.length }}
+                    <div>
+                      {{ scope.row.studentList?scope.row.studentList.length:0 }}
                     </div>
                   </template>
                 </el-table-column>
@@ -59,7 +59,7 @@
                     <el-button type="text" @click="cancleCom(scope.row)"
                       >取消</el-button
                     >
-                    <el-button type="text" @click="showStudentList(scope.row)"
+                    <el-button type="text" @click="showStudentList(scope.row)" :disabled="scope.row.id==radio"
                       >添加学生</el-button
                     >
                   </template>
@@ -89,6 +89,8 @@
       width="800px"
     >
       <viewStudentList
+      :classId="activeRow.id"
+      :disabledList='allStudentList'
         :list="studentList"
         :chioseList="activeRow.studentList"
         v-if="studentListModalVisible"
@@ -97,15 +99,30 @@
         @close="closeStudentView"
       />
     </el-dialog>
+
+       <el-dialog
+      :visible.sync="calenderStudentVisible"
+      title="学员缴费列表"
+      append-to-body
+      width="800px"
+    >
+    <!--   studentIds:[],
+      masterClassGroupId:'',
+      classGroupStudents:[] -->
+      <calenderStudentList  v-if="calenderStudentVisible" :studentIds='studentIds' :masterClassGroupId='masterClassGroupId' :classGroupStudents='classGroupStudents'/>
+    </el-dialog>
   </div>
 </template>
 <script>
 // import compoundClass from './compoundClass' compoundClass
-import viewStudentList from "../components/modals/view-student-list";
+import viewStudentList from "./student-list";
+import calenderStudentList from "./calenderStudentList"
 import { getClassAllStudent } from "@/api/studentManager";
+import { getStudentPaymentCalenders } from '@/api/buildTeam'
+let that;
 export default {
   props: ["compoundList"],
-  components: { viewStudentList },
+  components: { viewStudentList,calenderStudentList },
   data() {
     return {
       radio: "",
@@ -116,8 +133,17 @@ export default {
       studentList: [],
       studentListModalVisible: false,
       activeRow: null,
+      calenderStudentVisible:false,
+      studentIds:[],
+      masterClassGroupId:'',
+      classGroupStudents:[],
+      mergeInfo:{}
+
     };
   },
+  created(){
+    that = this;
+  },
   methods: {
     cancleCom(row) {
       this.$emit("cancleCompound", row);
@@ -125,19 +151,27 @@ export default {
     clearCom() {
       this.$emit("clearCom");
     },
-    submitClass() {
+   async submitClass() {
       if (!this.radio) {
         this.$message.error("请选择一个主班");
         return;
       }
       // let arr = []
-      let idList = [];
+      // 主班id
+      // 第一个是所有学员 this.radio
+      // 班级和学生id的键值对
+      // 第三个是主班编号 this.radio
+      let idList = []; // 所有的班级id
+       this.classGroupStudents= []
       let flag = false
       this.dataList.forEach((com) => {
         // arr.push(com.type)
-        if(!com.studentList || com.studentList.length<=0){
+        if(!com.studentList&&com.id!=this.radio || com.studentList?.length<=0&&com.id!=this.radio){
           flag = true
         }
+        if(com.id!=this.radio){
+          this.classGroupStudents.push({[com.id]:com.studentList.map(stu=>stu.userId).join(',')})
+        }
         idList.push(com.id);
       });
       if (this.dataList.length <= 1) {
@@ -149,9 +183,23 @@ export default {
         return
       }
       // 做判断
-      this.idList = idList.join(",");
       this.show = true;
       this.isLook = false;
+       this.masterClassGroupId = this.radio;
+      this.studentIds = this.allStudentList.map(stu=>{
+        return stu.userId
+      })
+
+      try{
+        const rest = await getStudentPaymentCalenders({studentIds:this.studentIds,masterClassGroupId:this.masterClassGroupId,classGroupStudents:this.classGroupStudents})
+        this.mergeInfo = rest.data
+        this.calenderStudentVisible = true;
+      }catch(e){
+        console.log(e)
+      }
+
+
+      // 试着请求
     },
     getList() {},
     closeReset() {
@@ -182,12 +230,34 @@ export default {
       this.dataList.splice(1, 0);
       this.studentListModalVisible = false;
     },
+    changeMasterClass(val){
+      this.dataList.forEach(classes=>{
+        if(classes.id == val){
+          classes.studentList = null;
+           this.dataList.splice(1, 0);
+        }
+      })
+    }
   },
   watch: {
     compoundList(val) {
       this.dataList = val;
     },
   },
+  computed:{
+      allStudentList(){
+        let arr = []
+        that.dataList.forEach(classes=>{
+          if(classes.studentList){
+            arr = arr.concat(classes.studentList.map(stu=>{
+              stu.classId = classes.id
+              return stu
+            }))
+          }
+        })
+        return arr
+      }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/views/teamDetail/componentClass/student-list.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-table
+      :data="list"
+      ref='studentTable'
+      style
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      tooltip-effect="dark"
+
+       @selection-change="handleSelectionChange"
+       max-height='300px'
+    >
+     <el-table-column v-if="isChiose"
+      type="selection"
+      :selectable="checkSelectable"
+      width="55">
+    </el-table-column>
+      <el-table-column
+        prop="userId"
+        align="center"
+        width="120"
+        label="学员编号"
+      ></el-table-column>
+      <el-table-column
+        prop="nickName"
+        align="center"
+        width="120"
+        label="学员姓名"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="120"
+        label="性别"
+      >
+      <template slot-scope="scope">
+        <div>
+          {{scope.row.gender| sex}}
+        </div>
+      </template>
+      </el-table-column>
+      <el-table-column
+        prop="phone"
+        align="center"
+        width="120"
+        label="联系电话"
+      ></el-table-column>
+      <el-table-column
+        prop="subjectNames"
+        align="center"
+        label="专业"
+      ></el-table-column>
+    </el-table>
+    <div slot="footer" class="dialog-footer" v-if="showOk">
+      <el-button type="primary" @click="$listeners.close(selectList)">确 定</el-button>
+    </div>
+    <div style="clear: both;" v-if="showOk"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list','isChiose','chioseList','showOk','disabledList','classId'],
+  data(){
+    return{
+      selectList:this.chioseList
+    }
+  },mounted(){
+    if(this.chioseList){
+          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
+    },
+    checkSelectable(row){
+      let flag = true
+      if(this.disabledList&&this.disabledList.length >0){
+        this.disabledList.forEach(stu=>{
+          if(stu.userId == row.userId &&stu.classId!=this.classId){
+            flag = false
+          }
+        })
+      }
+      return flag
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/.dialog-footer{
+  margin-top: 10px;
+}
+  .dialog-footer {
+  float: right;
+
+}
+
+</style>

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

@@ -12,6 +12,7 @@
     >
      <el-table-column v-if="isChiose"
       type="selection"
+      :selectable="checkSelectable"
       width="55">
     </el-table-column>
       <el-table-column
@@ -58,7 +59,7 @@
 </template>
 <script>
 export default {
-  props: ['list','isChiose','chioseList','showOk'],
+  props: ['list','isChiose','chioseList','showOk','disabledList'],
   data(){
     return{
       selectList:this.chioseList
@@ -78,6 +79,17 @@ export default {
   methods:{
     handleSelectionChange(val){
       this.selectList = val
+    },
+    checkSelectable(row){
+      let flag = true
+      if(this.disabledList&&this.disabledList.length >0){
+        this.disabledList.forEach(stu=>{
+          if(stu.userId == row.userId){
+            flag = false
+          }
+        })
+      }
+      return flag
     }
   }
 };