页面修改

src/pages/stuMan/stuList.vue

@@ -155,7 +155,6 @@
     padding: 5px 10px;
     align-items: center;
   }
-
 </style>
 <template>
   <div class="page-body stuList">
@@ -170,13 +169,13 @@
     <div class="page-search row items-center flex">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3">
-          <q-select @input="changeSchool" dense filled v-model="msg.School_Id" class="col-6"
-            option-label="SName" option-value="SId" :options="SchoolList" emit-value map-options label="校区" />
+          <q-select @input="changeSchool" dense filled v-model="msg.School_Id" class="col-6" option-label="SName"
+            option-value="SId" :options="SchoolList" emit-value map-options label="校区" />
         </div>
         <div class="col-3" v-if="source!=1">
-          <q-select @input="changeCourse" dense filled v-model="msg.CourseId" class="col-6"
-            option-label="CourseName" option-value="CourseId" use-input :options="CourseList" @filter="filterCourse"
-            emit-value map-options label="课程" clearable>
+          <q-select @input="changeCourse" dense filled v-model="msg.CourseId" class="col-6" option-label="CourseName"
+            option-value="CourseId" use-input :options="CourseList" @filter="filterCourse" emit-value map-options
+            label="课程" clearable>
             <template v-slot:no-option>
               <q-item>
                 <q-item-section class="text-grey">
@@ -220,9 +219,8 @@
             @clear="resetSearch" maxlength="20" />
         </div>
         <div class="col-3">
-          <q-select @input="resetSearch" dense filled v-model="msg.GuestState" class="col-6"
-            option-label="Name" option-value="Id" use-input :options="GuestStateList" emit-value map-options
-            label="学员状态" clearable>
+          <q-select @input="resetSearch" dense filled v-model="msg.GuestState" class="col-6" option-label="Name"
+            option-value="Id" use-input :options="GuestStateList" emit-value map-options label="学员状态" clearable>
             <template v-slot:no-option>
               <q-item>
                 <q-item-section class="text-grey">
@@ -233,8 +231,8 @@
           </q-select>
         </div>
         <div class="col-3">
-          <q-select @input="getShaixuanFrom()" dense filled clearable filled option-value="Id" option-label="Name" v-model="msg.CreateType"
-            :options="customFromList" emit-value map-options label="客户来源" />
+          <q-select @input="getShaixuanFrom()" dense filled clearable filled option-value="Id" option-label="Name"
+            v-model="msg.CreateType" :options="customFromList" emit-value map-options label="客户来源" />
         </div>
         <div class="col-3" v-if="msg.CreateType == 1">
           <q-select filled v-model="msg.StuChannelId" @input="resetSearch" label="收客渠道" :dense="false"
@@ -274,12 +272,30 @@
         </div>
       </div>
     </div>
+    <div class="col row wrap q-gutter-x-md" v-if="staticObj">
+      <div class="col stics">
+        <span class="stics-name">正常学员数量</span>
+        <span>{{staticObj.NormalNum?staticObj.NormalNum:0}}人</span>
+      </div>
+      <div class="col stics">
+        <span class="stics-name">退课学员数量</span>
+        <span style="color: #F72E52">{{staticObj.DropOutNum?staticObj.DropOutNum:0}}人</span>
+      </div>
+      <div class="col stics">
+        <span class="stics-name">停课学员数量</span>
+        <span style="color:#2961FE;">{{staticObj.StopClassesNum?staticObj.StopClassesNum:0}}人</span>
+      </div>
+      <div class="col stics">
+        <span class="stics-name">毕业学员数量</span>
+        <span>{{staticObj.GraduateNum?staticObj.GraduateNum:0}}人</span>
+      </div>
+    </div>
     <div class="page-content">
       <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
         class="sticky-tow-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
         row-key="name">
-        <template v-slot:top="props">
-          <div class="col-2 q-table__title">学员名单</div>
+        <template v-slot:top>
+          <!-- <div class="col-2 q-table__title">学员名单</div> -->
         </template>
         <template v-slot:body-cell-ContractNo="props">
           <q-td :props="props">
@@ -382,7 +398,7 @@
                 @click="transferClass(props.row, 1)" />
               <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px">
                 <q-list>
-                  <q-item dense  clickable v-close-popup @click="showAddEvent(props.row)">
+                  <q-item dense clickable v-close-popup @click="showAddEvent(props.row)">
                     <q-item-section>
                       <q-item-label overline>添加事件</q-item-label>
                     </q-item-section>
@@ -426,7 +442,7 @@
       @close="closeStuForm" @success="refreshStuList" @reload="refreshStuList">
     </studentRight-form>
     <!-- 跳课 -->
-    <JumpCourse v-model="isShowChangeCourse" :saveObj="ChangeCourseObj" @success="refreshPage" ></JumpCourse>
+    <JumpCourse v-model="isShowChangeCourse" :saveObj="ChangeCourseObj" @success="refreshPage"></JumpCourse>
   </div>
 </template>
 <script>
@@ -762,8 +778,9 @@
         MyTransListData: [],
         source: 0, //1:从课程列表进入
         courseName: "",
-        isShowChangeCourse:false,
-        ChangeCourseObj:{}
+        isShowChangeCourse: false,
+        ChangeCourseObj: {},
+        staticObj: {}, //学生统计信息
       };
     },
     created() {
@@ -867,10 +884,10 @@
         });
       },
       //筛选客户来源
-      getShaixuanFrom(){
+      getShaixuanFrom() {
         this.msg.StuSourceId = ''
         this.msg.StuChannelId = ''
-        if(this.msg.CreateType==4){
+        if (this.msg.CreateType == 4) {
           this.getStudentDorpDown();
         }
         this.resetSearch()
@@ -896,7 +913,14 @@
       //获取学员状态列表
       getGuestStateList() {
         queryGuestStateList({}).then(res => {
-          this.GuestStateList = res.Data;
+          var tempArray = res.Data;
+          if (tempArray) {
+            tempArray.forEach(item => {
+              if (item.Id == 1 || item.Id == 2 || item.Id == 5 || item.Id == 7) {
+                this.GuestStateList.push(item);
+              }
+            });
+          }
         });
       },
       //获取校区下拉
@@ -982,8 +1006,9 @@
           .then(res => {
             this.loading = false;
             if (res.Code === 1) {
-              this.data = res.Data.PageData;
-              this.pageCount = res.Data.PageCount;
+              this.data = res.Data.pageModel.PageData;
+              this.pageCount = res.Data.pageModel.PageCount;
+              this.staticObj = res.Data.StudentStatic;
             }
           })
           .catch(err => {
@@ -1175,15 +1200,13 @@
       refreshStuList() {
         this.getList();
       },
-      showChangeCourse(item){
-        this.isShowChangeCourse=true
-        this.ChangeCourseObj=item
+      showChangeCourse(item) {
+        this.isShowChangeCourse = true
+        this.ChangeCourseObj = item
       }
     }
   };
-
 </script>
 <style lang="sass">
   @import url('~assets/css/table.sass')
-
-</style>
+</style>
\ No newline at end of file