页面修改

src/components/sale/continueclass-form.vue

 <style>
-.Title_remark {
+  .Title_remark {
     font-size: 12px;
     color: #999999;
     margin-left: 20px;
-}
+  }
 
-.conTinuCheckdTable {
+  .conTinuCheckdTable {
     width: 100%;
     height: auto;
     text-align: left;
     margin-top: 20px;
     font-size: 12px;
-}
+  }
 
-.conTinuCheckdTable th {
+  .conTinuCheckdTable th {
     color: #888888;
-}
+  }
 
-.enrollTotalSearchTable {
+  .enrollTotalSearchTable {
     width: 100%;
-}
+  }
 
-.backContius {
+  .backContius {
     color: #2961fe;
     cursor: pointer;
-}
+  }
 
-.contiue_Top {
+  .contiue_Top {
     width: 100%;
     padding: 10px;
     border-bottom: 1px solid #d1d1d1;
-}
-.continus_ClassChoice {
+  }
+
+  .continus_ClassChoice {
     padding: 20px;
     max-height: 460px;
     overflow: auto;
-}
-.el-picker-panel {
+  }
+
+  .el-picker-panel {
     z-index: 9999 !important;
-}
-.Sysuser_Date .el-range-editor .el-range-input {
+  }
+
+  .Sysuser_Date .el-range-editor .el-range-input {
     background-color: transparent;
-}
+  }
 
-.Sysuser_Date .el-range-editor.el-input__inner {
+  .Sysuser_Date .el-range-editor.el-input__inner {
     background-color: transparent;
-}
-.conChoiceTeacherTable {
+  }
+
+  .conChoiceTeacherTable {
     width: 100%;
     border: 1px solid #d1d1d1;
-}
-.continus_ClassChoice::-webkit-scrollbar {
+  }
+
+  .continus_ClassChoice::-webkit-scrollbar {
     width: 4px;
     height: 8px;
-}
+  }
 
-.continus_ClassChoice::-webkit-scrollbar-thumb {
+  .continus_ClassChoice::-webkit-scrollbar-thumb {
     border-radius: 4px;
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
     background: #c9c9c9;
-}
+  }
 
-.continus_ClassChoice::-webkit-scrollbar-track {
+  .continus_ClassChoice::-webkit-scrollbar-track {
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     background: #ededed;
-}
+  }
 
-.contius_List {
+  .contius_List {
     width: 100%;
     height: 130px;
     border: 1px solid #d1d1d1;
@@ -75,73 +80,56 @@
     margin-bottom: 15px;
     font-size: 12px;
     box-shadow: 5px 5px 5px #d4d0d0;
-}
-.continu_Div {
+  }
+
+  .continu_Div {
     display: inline-block;
     min-height: 90px;
     border-right: 1px dashed #d1d1d1;
     padding: 10px;
     color: #000;
-}
-.continu_Div:last-child {
+  }
+
+  .continu_Div:last-child {
     border-right: 0;
-}
-.continu_Btm {
+  }
+
+  .continu_Btm {
     width: 100%;
     height: 30px;
     padding: 10px;
     border-top: 1px solid #d1d1d1;
-}
+  }
 </style>
 <!--续课-->
 <template>
-  <q-dialog
-    v-model="IsShowContinueClassDialog"
-    content-class="bg-grey-1"
-    persistent
-    transition-show="scale"
-    transition-hide="scale"
-  >
+  <q-dialog v-model="IsShowContinueClassDialog" content-class="bg-grey-1" persistent transition-show="scale"
+    transition-hide="scale">
     <q-card style="width: 850px; max-width: 900px">
       <template v-if="isShowTuike">
         <q-card-section>
           <div class="text-h6">
-            续课申请<span class="Title_remark"
-              >注：找不到学员？请确认学员是否已退课或已续班</span
-            >
+            续课申请<span class="Title_remark">注：找不到学员？请确认学员是否已退课或已续班</span>
           </div>
         </q-card-section>
         <div style="margin: 20px; border-bottom: 1px solid #e2e2e2">
-          <div
-            class="apply_List"
-            v-for="(item, index) in studentList"
-            v-if="item.IsShow"
-          >
+          <div class="apply_List" v-for="(item, index) in studentList" v-if="item.IsShow">
             <span style="width: 15%">{{ item.GuestName }}</span>
             <span style="width: 7%">{{ item.SexStr }}</span>
             <span style="width: 8%">{{ item.Age }}</span>
             <span style="width: 20%">{{ item.Mobile }}</span>
             <span style="width: 20%">
-              <template v-if="item.ClassHours"
-                >已学：{{ item.ClassHours }}课时</template
-              >
+              <template v-if="item.ClassHours">已学：{{ item.ClassHours }}课时</template>
             </span>
             <span style="width: 10%">{{ item.GuestStateStr }}</span>
             <span style="width: 20%" class="guest_Status">
-              <span v-if="item.GuestState == 1" @click="clickItem(item)"
-                >续费</span
-              >
+              <span v-if="item.GuestState == 1" @click="clickItem(item)">续费</span>
               <template v-if="chooseItem && chooseItem.Id == item.Id">
-                <span style="margin-left: 10px" @click="cancelApply"
-                  >取消续费</span
-                >
+                <span style="margin-left: 10px" @click="cancelApply">取消续费</span>
               </template>
             </span>
           </div>
-          <table
-            class="conTinuCheckdTable"
-            v-if="classItem.ClassId > 0 && studentList.length > 0 && isShowAdd"
-          >
+          <table class="conTinuCheckdTable" v-if="classItem.ClassId > 0 && studentList.length > 0 && isShowAdd">
             <tr>
               <th>续费班级</th>
               <th>续费班级</th>
@@ -152,11 +140,7 @@
             </tr>
             <tr>
               <td>
-                <span
-                  style="color: #2961fe; cursor: pointer"
-                  @click="getRenewClassList()"
-                  >+点击选择班级</span
-                >
+                <span style="color: #2961fe; cursor: pointer" @click="getRenewClassList()">+点击选择班级</span>
               </td>
               <td>{{ classItem.ClassName }}</td>
               <td>¥{{ classItem.SellPrice }}</td>
@@ -165,15 +149,10 @@
               <td>{{ classItem.OpenTime }}</td>
             </tr>
           </table>
-          <table
-            class="conTinuCheckdTable"
-            v-else-if="studentList.length > 0 && isShowAdd"
-          >
+          <table class="conTinuCheckdTable" v-else-if="studentList.length > 0 && isShowAdd">
             <tr>
               <td>
-                <span class="backContius" @click="getRenewClassList()"
-                  >+点击选择班级</span
-                >
+                <span class="backContius" @click="getRenewClassList()">+点击选择班级</span>
               </td>
               <td></td>
               <td></td>
@@ -182,120 +161,49 @@
               <td></td>
             </tr>
           </table>
-          <q-input
-            filled
-            stack-label
-            :dense="false"
-            v-model="SaleRemark"
-            style="margin-top: 20px"
-            type="textarea"
-            class="col-12"
-            label="销售备注"
-          />
+          <q-input filled stack-label :dense="false" v-model="SaleRemark" style="margin-top: 20px" type="textarea"
+            class="col-12" label="销售备注" />
           <q-separator />
         </div>
         <q-card-actions align="right" class="bg-white">
-          <q-btn
-            label="取消"
-            flat
-            color="grey-10"
-            style="font-weight: 400 !important"
-            @click="closeContinueClassForm"
-          />
-          <q-btn
-            label="确认续费"
-            color="accent"
-            class="q-px-md"
-            style="font-weight: 400 !important"
-            @click="setRenewOrder"
-          />
+          <q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeContinueClassForm" />
+          <q-btn label="确认续费" color="accent" class="q-px-md" style="font-weight: 400 !important"
+            @click="setRenewOrder" />
         </q-card-actions>
       </template>
       <template v-else>
         <div class="contiue_Top">
           <span class="backContius" @click="isShowTuike = true">
-            <i
-              style="font-size: 18px; margin-left: 15px"
-              title="返回"
-              class="iconfont icon-fanhui"
-            ></i
-          ></span>
+            <i style="font-size: 18px; margin-left: 15px" title="返回" class="iconfont icon-fanhui"></i></span>
           <span style="margin-left: 20px">班级选择 </span>
         </div>
         <div class="col row wrap q-mr-lg q-col-gutter-md" style="margin: 10px">
           <div class="col-3">
-            <q-select
-              @input="getRenewClassList"
-              filled
-              option-value="SId"
-              option-label="SName"
-              v-model="classMsg.School_Id"
-              :options="schoolList"
-              emit-value
-              map-options
-              label="关联校区"
-            />
+            <q-select @input="getRenewClassList" filled option-value="SId" option-label="SName"
+              v-model="classMsg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
           </div>
           <div class="col-3">
-            <q-select
-              filled
-              stack-label
-              option-value="CTypeId"
-              option-label="CTypeName"
-              v-model="classMsg.ClassType"
-              ref="CouseId"
-              :options="classTypeList"
-              label="班级类型"
-              :dense="false"
-              emit-value
-              map-options
-            />
+            <q-select filled stack-label option-value="CTypeId" option-label="CTypeName" v-model="classMsg.ClassType"
+              ref="CouseId" :options="classTypeList" label="班级类型" :dense="false" emit-value map-options />
           </div>
           <div class="col-5 Sysuser_Date">
             <q-field filled>
                <template v-slot:control>
-                <el-date-picker
-                  v-model="dateList"
-                  @change="getRenewClassList()"
-                  value-format="yyyy-MM-dd"
-                  type="daterange"
-                  style="border: none"
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                >
-                    </el-date-picker
-                >       
+                <el-date-picker v-model="dateList" @change="getRenewClassList()" value-format="yyyy-MM-dd"
+                  type="daterange" style="border: none" range-separator="至" start-placeholder="开始时间"
+                  end-placeholder="结束时间">
+                    </el-date-picker>       
               </template>
             </q-field>
           </div>
           <div class="col-3">
-            <q-input
-              @change="getRenewClassList"
-              clearable
-              filled
-              v-model="classMsg.TeacherName"
-              label="带班老师"
-              @clear="getRenewClassList"
-              maxlength="20"
-            />
+            <q-input @change="getRenewClassList" clearable filled v-model="classMsg.TeacherName" label="带班老师"
+              @clear="getRenewClassList" maxlength="20" />
           </div>
           <div class="col-3">
-            <q-select
-              filled
-              stack-label
-              use-input
-              option-value="CourseId"
-              option-label="CourseName"
-              v-model="classMsg.CouseId"
-              :options="ClassList"
-              label="学习课程"
-              :dense="false"
-              emit-value
-              map-options
-              @filter="filterFn"
-              @input="getRenewClassList"
-            >
+            <q-select filled stack-label use-input option-value="CourseId" option-label="CourseName"
+              v-model="classMsg.CouseId" :options="ClassList" label="学习课程" :dense="false" emit-value map-options
+              @filter="filterFn" @input="getRenewClassList">
               <template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -326,32 +234,19 @@
               <div class="continu_Div" style="width: 20%">
                 <div>价格</div>
                 <div style="margin: 5px 0">续费价格：{{ cItem.SellPrice }}</div>
-                <template
-                  v-if="
+                <template v-if="
                     cItem.ClassStepPriceList &&
                     cItem.ClassStepPriceList.length > 0
-                  "
-                >
+                  ">
                   更多优惠价格
-                  <span
-                    class="iconfont icon-xiangxia"
-                    style="color: #2961fe; font-size: 10px"
-                  ></span>
+                  <span class="iconfont icon-xiangxia" style="color: #2961fe; font-size: 10px"></span>
                   <q-popup-proxy>
                     <q-banner>
                       <div class="price-popup">
-                        <div
-                          class="price-popup-item"
-                          v-for="(x, index2) in cItem.ClassStepPriceList"
-                          :key="index2"
-                          style="margin: 5px 0"
-                        >
-                          <span style="color: #2d2d2d; font-weight: bold"
-                            >{{ x.PersionNum }}人报名<span
-                              style="color: #2860fb; margin-left: 15px"
-                              >{{ x.PersionPrice.toFixed(2) }}</span
-                            ></span
-                          >
+                        <div class="price-popup-item" v-for="(x, index2) in cItem.ClassStepPriceList" :key="index2"
+                          style="margin: 5px 0">
+                          <span style="color: #2d2d2d; font-weight: bold">{{ x.PersionNum }}人报名<span
+                              style="color: #2860fb; margin-left: 15px">{{ x.PersionPrice.toFixed(2) }}</span></span>
                         </div>
                       </div>
                     </q-banner>
@@ -365,50 +260,43 @@
                 </div>
                 <div>
                   已招收
-                  <span style="color: blue">{{ cItem.OrderStudentCount }}</span
-                  >人
+                  <span style="color: blue">{{ cItem.OrderStudentCount }}</span>人
                 </div>
               </div>
               <div class="continu_Div" style="width: 15%">
-                <q-btn
-                  label="选择此班"
-                  size="sm"
-                  @click="clickClassItem(cItem)"
-                  color="accent q-px-md"
-                  style="
+                <q-btn label="选择此班" size="sm" @click="clickClassItem(cItem)" color="accent q-px-md" style="
                     font-weight: 400 !important;
                     display: block;
                     margin: 25px 0 0 10px;
                     padding: 0;
-                  "
-                />
+                  " />
               </div>
             </div>
             <div class="continu_Btm">OP备注 {{ cItem.InnerRemark }}</div>
           </div>
-          <q-pagination
-            class="full-width justify-end"
-            v-model="classMsg.pageIndex"
-            color="primary"
-            :max="classPageCount"
-            :input="true"
-            @input="changePage"
-          />
+          <q-pagination class="full-width justify-end" v-model="classMsg.pageIndex" color="primary"
+            :max="classPageCount" :input="true" @input="changePage" />
         </div>
       </template>
     </q-card>
   </q-dialog>
 </template>
 <script>
-import { getSchoolDropdown } from "../../api/school/index";
-import { GetClassTypeList } from "../../api/system/index";
-import { queryCourseDropdownList } from "../../api/course/index";
-import {
+  import {
+    getSchoolDropdown
+  } from "../../api/school/index";
+  import {
+    GetClassTypeList
+  } from "../../api/system/index";
+  import {
+    queryCourseDropdownList
+  } from "../../api/course/index";
+  import {
     getOrderGuestPageList,
     saveRenewOrder,
     queryRenewClass,
-} from "../../api/sale/sale";
-export default {
+  } from "../../api/sale/sale";
+  export default {
     name: "backclass-form",
     props: {
       saveObj: {
@@ -640,5 +528,5 @@ export default {
         this.getRenewClassList();
       },
     },
-};
+  };
 </script>
\ No newline at end of file