修改

src/api/course/class.js

@@ -69,3 +69,36 @@ export function RemoveClassPlan(data) {
   });
 }
 
+/**
+ * 学员退课
+ */
+export function StudentDropOut(data) {
+  return request({
+    url: '/Class/UpdateClassStudentDropOut',
+    method: 'post',
+    data
+  });
+}
+
+/**
+ * 获取学员下拉数据
+ */
+export function GetStudentList(data) {
+  return request({
+    url: '/class/GetStudentList',
+    method: 'post',
+    data
+  });
+}
+
+/**
+ * 邀请学员
+ */
+export function AddClassStudent(data) {
+  return request({
+    url: '/class/AddClassStudent',
+    method: 'post',
+    data
+  });
+}
+

src/components/course/classinfo-form.vue

@@ -34,6 +34,10 @@
   .classinfo_Dialog .normalInner {
     color: #111111;
   }
+  .drop_NameDown{
+    margin-top:20px;
+    width:300px;
+  }
 </style>
 <template>
   <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
@@ -85,11 +89,55 @@
       </q-tabs>
       <div v-if="tabCheck=='first'" style="margin:0 15px;">
         <div style="text-align:right;">
-          <q-btn outline color="black" label="退课" size="12px" style="margin-right:20px;" />
-          <q-btn color="primary" class="q-mr-md" size="12px" icon="add" label="邀请新学员" />
+          <q-btn outline color="black" label="退课" @click="dropClass()" size="12px" style="margin-right:20px;">
+            <q-popup-proxy>
+              <q-banner v-if="isShowDropPop">
+                <div class="dropClassDialog">
+                  <div style="margin:10px 0 15px 0;">退课</div>
+                </div>
+                <q-input square filled v-model="dropMsg.DropOutRemark" borderless label="退课原因" ref="reason" type="textarea" counter 
+                  :rules="[val => !!val || '请填写退课原因']" maxlength="200" />
+                <div class="drop_NameDown">
+                    <q-chip v-for="item in selectedStudent">
+                      <q-avatar rounded size="sm" v-if="item.UserIcon">
+                        <img :src="item.UserIcon" />
+                      </q-avatar>
+                      <q-avatar rounded size="sm" color="teal-10" text-color="white" v-if="!item.UserIcon">
+                        {{item.GuestName[0]}}</q-avatar>
+                      {{item.GuestName}}
+                    </q-chip>
+                </div>
+                <q-card-actions align="right" class="bg-white">
+                  <q-btn label="取消" flat color="grey-10"
+                    style="font-weight:400 !important" @click="isShowDropPop=false" />
+                  <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
+                    @click="saveDrop()" />
+                </q-card-actions>
+              </q-banner>
+            </q-popup-proxy>
+          </q-btn>
+          <q-btn color="primary" class="q-mr-md" size="12px" icon="add" label="邀请新学员" @click="ishowInvit=true">
+            <q-popup-proxy>
+              <q-banner v-if="ishowInvit">
+                <div class="dropClassDialog">
+                  <div style="margin:10px 0 15px 0;">邀请新学员</div>
+                </div>
+                <div class="drop_NameDown">
+                  <q-select standout="bg-primary text-white" v-model="checkedStudent" :options="InvitationList"
+                    option-value="StuId" option-label="StuName" label="选择学员" />
+                </div>
+                <q-card-actions align="right" class="bg-white" style="margin-top:20px;">
+                  <q-btn label="取消" flat color="grey-10"
+                    style="font-weight:400 !important" @click="ishowInvit=false" />
+                  <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important"
+                    @click="saveStudent()" />
+                </q-card-actions>
+              </q-banner>
+            </q-popup-proxy>
+          </q-btn>
         </div>
         <q-table :loading="loading" no-data-label="暂无相关数据" flat selection="multiple"
-          :selected.sync="selected" class="sticky-right-column-table sticky-tow-column-table" separator="none"
+          :selected.sync="selectedStudent" class="sticky-column-table" separator="none"
           title="学员信息" :data="studentList" :columns="columns" hide-bottom row-key="Id">
           <template v-slot:body-cell-IsRenew="props">
             <q-td auto-width :props="props"> 
@@ -113,6 +161,9 @@
 <script>
   import {
     queryClassStudent,
+    StudentDropOut,
+    GetStudentList,
+    AddClassStudent
   } from '../../api/course/class';
   import lessForm from '../course/lesson-form';
   export default {
@@ -183,14 +234,31 @@
 
         },
         studentList: [], //学员信息数据
-        selected: [], //选中
+        selectedStudent: [], //选中
+        dropMsg:{
+          ClassId:0, //班级id
+          Ids:'', //学员id
+          DropOutRemark:'', //退课原因
+          StudentName:'' //学员名称
+        },
+        isShowDropPop:false,
+
+        ishowInvit:false,
+        invitationMsg:{
+          ClassId:0, //班级id
+          GuestName:'', //学员名称
+          Sex:'', //性别
+          Mobile:'' //手机号
+        },
+        InvitationList:[], //学员下拉数据
+        checkedStudent:'', //选择学员
       }
     },
     created() {
       this.getStudentData();
     },
     mounted() {
-      console.log("aaa", this.setingObj);
+      this.getStudentList();
     },
     methods: {
       closeShenheForm() {
@@ -214,6 +282,80 @@
         }
         return (Math.round(num / total * 100) / 100.00);
       },
+      //退课
+      dropClass(){
+        if(this.selectedStudent.length==0){
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请选择退课学员`
+          })
+          return;
+        }else{
+          this.isShowDropPop=true;
+        }
+      },
+      //保存退课信息
+      saveDrop(){
+        if(this.selectedStudent.length==0){
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请选择退课学员`
+          })
+          return;
+        }else{
+          this.dropMsg.ClassId = this.setingObj.ClassId; 
+          let StuArr = [];
+          let StrName = []; 
+          this.selectedStudent.forEach(x=>{
+            StuArr.push(x.Id);
+            StrName.push(x.GuestName);
+          })
+          this.dropMsg.Ids = StuArr.toString();
+          this.dropMsg.StudentName = StrName.toString();
+          StudentDropOut(this.dropMsg).then(res => {
+            if (res.Code == 1) {
+              this.isShowDropPop = false;
+              this.dropMsg.DropOutRemark='';
+              this.selectedStudent=[];
+              this.getStudentData();
+            }
+          })
+        }
+      },
+      //获取学员下拉信息
+      getStudentList(){
+        GetStudentList({
+          SchoolId: this.setingObj.School_Id
+        }).then(res => {
+          if (res.Code == 1) {
+             this.InvitationList = res.Data;
+          }
+        })
+      },
+      //保存邀请新学员保存
+      saveStudent(){
+        if(this.checkedStudent==''){
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请选择学员`
+          })
+          return;
+        }else{
+          this.invitationMsg.ClassId = this.setingObj.ClassId;
+          this.invitationMsg.GuestName = this.checkedStudent.StuName;
+          this.invitationMsg.Sex = this.checkedStudent.StuSex;
+          this.invitationMsg.Mobile = this.checkedStudent.StuTel;
+          AddClassStudent(this.invitationMsg).then(res => {
+            if (res.Code == 1) {
+              this.ishowInvit = false;
+              this.getStudentData();
+            }
+          })
+        }
+      } 
     },
   }