页面修改

src/pages/stuMan/stuList.vue

 <style>
-li {
+  li {
     list-style-type: none;
-}
+  }
 
-.stuList ul {
+  .stuList ul {
     padding: 0px;
-}
+  }
 
-.stuList li {
+  .stuList li {
     background: rgba(221, 222, 224, 0.2);
     border-radius: 4px;
     margin-top: 15px;
-}
+  }
 
-.stuList li .dline {
+  .stuList li .dline {
     display: table;
     width: 100%;
     display: flex;
     flex-direction: row;
-}
+  }
 
-.stuList li .d1,
-.stuList li .d2,
-.stuList li .d3,
-.stuList li .d4,
-.stuList li .d5 {
+  .stuList li .d1,
+  .stuList li .d2,
+  .stuList li .d3,
+  .stuList li .d4,
+  .stuList li .d5 {
     width: 18%;
     padding: 20px 20px 10px;
-}
+  }
 
-.stuList li .d7 {
+  .stuList li .d7 {
     flex: 1;
     width: 1px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.stuList li .d1 .di-title {
+  .stuList li .d1 .di-title {
     font-size: 16px;
     color: #111111;
-}
+  }
 
-.stuList li .d1 .di-c {
+  .stuList li .d1 .di-c {
     font-size: 14px;
     display: flex;
     line-height: 28px;
     color: #111111;
-}
+  }
 
-.stuList li .d6 {
+  .stuList li .d6 {
     padding: 10px 20px;
     width: 100%;
     height: inherit;
     position: relative;
     border-top: 1px solid #dddee0;
-}
+  }
 
-.stuList li .d6 .progress {
+  .stuList li .d6 .progress {
     width: 100%;
     height: 5px;
     position: absolute;
     left: 0;
     bottom: 0;
-}
+  }
 
-.stuList li .d2 div {
+  .stuList li .d2 div {
     margin: 2px 0;
     font-size: 14px;
     color: #111111;
-}
+  }
 
-.stuList li .d2-n {
+  .stuList li .d2-n {
     font-size: 12px;
     color: #999999;
     margin-right: 20px;
-}
+  }
 
-.stuList li .d3 .d3-s {
+  .stuList li .d3 .d3-s {
     color: var(--q-color-negative);
     font-weight: bold;
-}
+  }
 
-.stuList li .d3 div {
+  .stuList li .d3 div {
     margin: 2px 0;
     font-size: 14px;
-}
+  }
 
-.stuList li .d4 div {
+  .stuList li .d4 div {
     font-size: 14px;
     color: #111111;
     margin: 2px 0;
-}
+  }
 
-.stuList li .d5 div {
+  .stuList li .d5 div {
     font-size: 14px;
     color: #111111;
     margin: 2px 0;
-}
+  }
 
-.stuList .myCourseNName {
+  .stuList .myCourseNName {
     width: 25px;
     height: 25px;
     border-radius: 50%;
@@ -108,45 +108,45 @@ li {
     text-align: center;
     line-height: 25px;
     background-color: #004d40;
-}
+  }
 
-.stuList .app-image {
+  .stuList .app-image {
     background-position: center center;
     width: 50px;
     height: 50px;
     border-radius: 0%;
     float: left;
     margin-right: 8px;
-}
+  }
 
-.Sysuser_Date .el-input {
+  .Sysuser_Date .el-input {
     width: 100%;
     border: none;
     background-color: transparent;
-}
+  }
 
-.Sysuser_Date .el-input__inner {
+  .Sysuser_Date .el-input__inner {
     width: 100%;
     border: none;
     background-color: transparent;
-}
+  }
 
-.Sysuser_Date .el-range-editor .el-range-input {
+  .Sysuser_Date .el-range-editor .el-range-input {
     width: 100%;
     border: none;
     background-color: transparent;
-}
+  }
 
-.el-picker-panel {
+  .el-picker-panel {
     z-index: 99999 !important;
-}
+  }
 
-.syster_qDropdown .q-btn__wrapper {
+  .syster_qDropdown .q-btn__wrapper {
     padding: 0 3px;
     min-height: 0 !important;
-}
+  }
 
-.editOrderDrawerTop {
+  .editOrderDrawerTop {
     width: 100%;
     height: 50px;
     display: flex;
@@ -154,56 +154,28 @@ li {
     background-color: #f0f5fb;
     padding: 5px 10px;
     align-items: center;
-}
+  }
+
 </style>
 <template>
   <div class="page-body stuList">
     <div class="row q-mb-md">
       <q-space></q-space>
-      <!-- <el-badge :value="11" style="float:right"> -->
       <div style="position: relative">
-        <q-btn
-          color="accent"
-          label="高级查询"
-          @click="IsShowQuery = true"
-        ></q-btn>
+        <q-btn color="accent" label="高级查询" @click="IsShowQuery = true"></q-btn>
         <q-badge floating rounded color="red">{{ queryNum }}</q-badge>
       </div>
-
-      <!-- </el-badge> -->
     </div>
     <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"
-            standout="bg-primary text-white"
-            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" standout="bg-primary text-white" 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">
-          <q-select
-            @input="changeCourse"
-            standout="bg-primary text-white"
-            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" standout="bg-primary text-white" 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">
@@ -214,30 +186,16 @@ li {
           </q-select>
         </div>
         <div class="col-3">
-          <q-select
-            @input="resetSearch"
-            standout="bg-primary text-white"
-            v-model="msg.ClassId"
-            class="col-6"
-            use-input
-            @filter="filterClass"
-            option-label="ClassName"
-            option-value="ClassId"
-            :options="classList"
-            emit-value
-            map-options
-            label="班级"
-            clearable
-          >
-            <template
-              v-slot:option="{
+          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.ClassId" class="col-6" use-input
+            @filter="filterClass" option-label="ClassName" option-value="ClassId" :options="classList" emit-value
+            map-options label="班级" clearable>
+            <template v-slot:option="{
                 itemProps,
                 itemEvents,
                 opt,
                 selected,
                 toggleOption,
-              }"
-            >
+              }">
               <q-item v-bind="itemProps" v-on="itemEvents">
                 <q-item-section>
                   <q-item-label v-html="opt.ClassName"></q-item-label>
@@ -257,129 +215,84 @@ li {
           </q-select>
         </div>
         <div class="col-3">
-          <q-input
-            @input="resetSearch"
-            clearable
-            standout="bg-primary text-white"
-            v-model="msg.GuestName"
-            label="学员姓名"
-            @clear="resetSearch"
-            maxlength="20"
-          />
+          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="学员姓名"
+            @clear="resetSearch" maxlength="20" />
         </div>
       </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"
-      >
+      <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>
         <template v-slot:body-cell-ContractNo="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="seeContract(props.row)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="seeContract(props.row)">
               {{ props.row.ContractNo }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-ClassName="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="seeClassDetail(props.row)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="seeClassDetail(props.row)">
               {{ props.row.ClassName }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-OrderId="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showOrderDetail(props.row, 1)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 1)">
               {{ props.row.OrderId }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-Income="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showOrderDetail(props.row, 4)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 4)">
               {{ props.row.Income }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-Refund="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showOrderDetail(props.row, 4)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showOrderDetail(props.row, 4)">
               {{ props.row.Refund }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-CompleteHours="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="seeStudentsClassUse(props.row)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="seeStudentsClassUse(props.row)">
               {{ props.row.CompleteHours }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-MakeUpHours="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showList(props.row, 1)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 1)">
               {{ props.row.MakeUpHours }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-AbsenceNum="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showList(props.row, 2)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 2)">
               {{ props.row.AbsenceNum }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-LeaveNum="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showList(props.row, 3)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showList(props.row, 3)">
               {{ props.row.LeaveNum }}
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-EventlogNum="props">
           <q-td :props="props">
-            <div
-              style="color: #f00; cursor: pointer"
-              @click="showEventLog(props.row)"
-            >
+            <div style="color: #f00; cursor: pointer" @click="showEventLog(props.row)">
               {{ props.row.EventlogNum }}
             </div>
           </q-td>
@@ -387,37 +300,13 @@ li {
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
             <div>
-              <q-btn
-                flat
-                size="xs"
-                color="accent"
-                style="font-weight: 400"
-                label="停课"
-                v-if="props.row.GuestState === 1"
-                @click="ShowStopLesson(props.row)"
-              />
-              <q-btn
-                flat
-                size="xs"
-                color="accent"
-                style="font-weight: 400"
-                label="转班"
-                v-if="props.row.GuestState === 1"
-                @click="transferClass(props.row, 1)"
-              />
-              <q-btn-dropdown
-                flat
-                size="xs"
-                color="dark"
-                label="更多"
-                style="margin-left: 10px"
-              >
+              <q-btn flat size="xs" color="accent" style="font-weight: 400" label="停课" v-if="props.row.GuestState === 1"
+                @click="ShowStopLesson(props.row)" />
+              <q-btn flat size="xs" color="accent" style="font-weight: 400" label="转班" v-if="props.row.GuestState === 1"
+                @click="transferClass(props.row, 1)" />
+              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px">
                 <q-list>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="showAddEvent(props.row)"
-                  >
+                  <q-item clickable v-close-popup @click="showAddEvent(props.row)">
                     <q-item-section>
                       <q-item-label>添加事件</q-item-label>
                     </q-item-section>
@@ -428,98 +317,54 @@ li {
           </q-td>
         </template>
         <template v-slot:bottom>
-          <q-pagination
-            class="full-width justify-end"
-            v-model="msg.pageIndex"
-            color="primary"
-            :max="pageCount"
-            :input="true"
-            @input="changePage"
-          />
+          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
+            :input="true" @input="changePage" />
         </template>
       </q-table>
     </div>
     <!-- 高级查询 -->
-    <MoreQuery
-      v-if="IsShowQuery"
-      :typeEnum="typeEnum"
-      :warnEnum="warnEnum"
-      :saveQuery="msg"
-      @close="closeHandle"
-      @success="morequery"
-    >
+    <MoreQuery v-if="IsShowQuery" :typeEnum="typeEnum" :warnEnum="warnEnum" :saveQuery="msg" @close="closeHandle"
+      @success="morequery">
     </MoreQuery>
     <!-- 停课申请 -->
-    <StopLesson-form
-      v-if="isShowStopLesson"
-      :setObj="stuObj"
-      @success="resetSearch"
-      @close="closeHandle"
-    />
+    <StopLesson-form v-if="isShowStopLesson" :setObj="stuObj" @success="resetSearch" @close="closeHandle" />
     <!-- 转班申请 -->
-    <transferclass-form
-      v-if="isShowTransferClass"
-      :save-obj="orderObj"
-      :ChangeType="ChangeType"
-      @close="closeHandle"
-      @success="resetSearch"
-    ></transferclass-form>
+    <transferclass-form v-if="isShowTransferClass" :save-obj="orderObj" :ChangeType="ChangeType" @close="closeHandle"
+      @success="resetSearch"></transferclass-form>
     <!-- 添加事件 -->
-    <AddEvent-form
-      v-if="isShowAddEvent"
-      :setObj="eventObj"
-      @success="resetSearch"
-      @close="closeHandle"
-    />
+    <AddEvent-form v-if="isShowAddEvent" :setObj="eventObj" @success="resetSearch" @close="closeHandle" />
     <!-- 班级详情 -->
-    <classinfo-form
-      v-if="isShowClassInfo"
-      :seting-obj="eventObj"
-      @close="closeHandle"
-      @success="refreshPage"
-    />
+    <classinfo-form v-if="isShowClassInfo" :seting-obj="eventObj" @close="closeHandle" @success="refreshPage" />
     <!-- 订单详情 -->
-    <myOrder-form
-      v-if="isShowmyorderForm"
-      :save-obj="eventObj"
-      @close="closeHandle"
-    ></myOrder-form>
+    <myOrder-form v-if="isShowmyorderForm" :save-obj="eventObj" @close="closeHandle"></myOrder-form>
     <!-- 可补课课时，缺勤次数，请假次数 -->
-    <list
-      v-if="isShowList"
-      :type="showType"
-      :set-obj="eventObj"
-      @close="closeHandle"
-    />
+    <list v-if="isShowList" :type="showType" :set-obj="eventObj" @close="closeHandle" />
     <!-- 事件记录 -->
-    <eventLog
-      v-if="isShowEventLog"
-      :set-obj="eventObj"
-      @modify="modifyEvent"
-      @close="closeHandle"
-    />
+    <eventLog v-if="isShowEventLog" :set-obj="eventObj" @modify="modifyEvent" @close="closeHandle" />
   </div>
 </template>
 <script>
-import {
+  import {
     getSchoolDropdown,
     getClassDropDownList,
-} from "../../api/school/index";
-import { queryCourseDropdownList } from "../../api/course/index";
-import {
+  } from "../../api/school/index";
+  import {
+    queryCourseDropdownList
+  } from "../../api/course/index";
+  import {
     getStuList,
     getEarlyWarningEnum,
     getTypeEnum,
-} from "../../api/stuMan/index.js";
-import MoreQuery from "../../components/stuMan/moreQuery.vue";
-import StopLessonForm from "../../components/teacher/stopLessonForm";
-import transferclassForm from "../../components/sale/transferclass-form"; //转班信息
-import AddEventForm from "../../components/stuMan/addEvent-form.vue"; //转班信息
-import classinfoForm from "../../components/course/classinfo-form"; //班级详情
-import myOrderForm from "../../components/sale/myOrder-form"; //订单详情
-import list from "../../components/stuMan/makeUpHours.vue"; //可补课课时，缺勤次数，请假次数
-import eventLog from "../../components/stuMan/eventRecord.vue"; //事件记录
-export default {
+  } from "../../api/stuMan/index.js";
+  import MoreQuery from "../../components/stuMan/moreQuery.vue";
+  import StopLessonForm from "../../components/teacher/stopLessonForm";
+  import transferclassForm from "../../components/sale/transferclass-form"; //转班信息
+  import AddEventForm from "../../components/stuMan/addEvent-form.vue"; //转班信息
+  import classinfoForm from "../../components/course/classinfo-form"; //班级详情
+  import myOrderForm from "../../components/sale/myOrder-form"; //订单详情
+  import list from "../../components/stuMan/makeUpHours.vue"; //可补课课时，缺勤次数，请假次数
+  import eventLog from "../../components/stuMan/eventRecord.vue"; //事件记录
+  export default {
     meta: {
       title: "学员名单",
     },
@@ -542,7 +387,7 @@ export default {
           pageIndex: 1,
           pageSize: 10,
           rowsPerPage: 10,
-        School_Id: -1, //校区
+          School_Id: '', //校区
           CourseId: 0, //课程
           ClassId: 0, //班级
           GuestName: "", //学生姓名
@@ -556,8 +401,7 @@ export default {
           EndOrderTime: "", //下单结束时间
         },
         pageCount: 0,
-      columns: [
-        {
+        columns: [{
             name: "Id",
             label: "编号",
             field: "Id",
@@ -712,7 +556,7 @@ export default {
         queryClass: {
           CourseId: 0,
           IsAddDefault: 1,
-        SchoolId: -1,
+          SchoolId: '',
           Teacher_Id: 0,
           MoreStatus: "1,2,3",
           IsQuerySurplusPlan: 0,
@@ -748,11 +592,6 @@ export default {
         getSchoolDropdown({}).then((res) => {
           if (res.Code == 1) {
             this.SchoolList = res.Data;
-          var obj = {
-            SName: "不限",
-            SId: -1,
-          };
-          this.SchoolList.unshift(obj);
           }
         });
       },
@@ -947,7 +786,9 @@ export default {
       },
       //查看合同
       seeContract(item) {
-      this.OpenNewUrl("/contractView", { ContractId: item.ContractId });
+        this.OpenNewUrl("/contractView", {
+          ContractId: item.ContractId
+        });
       },
       //查看课时消耗
       seeStudentsClassUse(item) {
@@ -985,8 +826,10 @@ export default {
         this.isShowAddEvent = true;
       },
     },
-};
+  };
+
 </script>
 <style lang="sass">
-@import url('~assets/css/table.sass')
+  @import url('~assets/css/table.sass')
+
 </style>