页面修改

src/pages/sale/appointManagement.vue

 <template>
   <div class="page-body">
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+        <div class="col-4">
+          <div class="col-4 Sysuser_Date">
+            <q-field filled>
+               <template v-slot:control>
+                <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
+                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
+                </el-date-picker>至
+                <el-date-picker v-model="msg.EndClassDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间"
+                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
+                </el-date-picker>
+              </template>
+            </q-field>
+          </div>
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" filled option-value="TId" option-label="TeacherName" v-model="msg.TeacherId"
+            :options="TeacherList" emit-value map-options label="老师" clearable />
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
+            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
+            class="col-6 q-pb-lg" emit-value map-options />
+        </div>
+      </div>
+    </div>
+
     <q-table :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
       separator="none" :data="dataList" :columns="columns" row-key="name">
       <template v-slot:top="props">
@@ -21,7 +49,7 @@
                   <q-item-label>流单</q-item-label>
                 </q-item-section>
               </q-item>
-              <q-item clickable v-close-popup @click="OperateVitior(props.row,3)"  >
+              <q-item clickable v-close-popup @click="OperateVitior(props.row,3)">
                 <q-item-section>
                   <q-item-label>取消</q-item-label>
                 </q-item-section>
@@ -35,7 +63,8 @@
           :input="true" @input="changePage" />
       </template>
     </q-table>
-    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" :save-obj="visitorItem" @close="closeYuekeForm" @success="refreshPage"></yuekeForm>
+    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" :save-obj="visitorItem" @close="closeYuekeForm"
+      @success="refreshPage"></yuekeForm>
     <exorderForm v-if="isShowExOrder" @close="closeOrderForm" @success="refreshPage"></exorderForm>
   </div>
 </template>
@@ -44,6 +73,10 @@
   import {
     queryVisitorReservePage
   } from '../../api/scheduling/schedu'
+  import {
+    getTeacherDropDownList,
+    queryClassRoomList
+  } from "../../api/school/index";
   import yuekeForm from '../../components/schedul/yueke-form'
   import exorderForm from '../../components/schedul/exorder-form'
 
@@ -59,7 +92,12 @@
       return {
         msg: {
           pageIndex: 1,
-          pageSize: 10
+          pageSize: 10,
+          rowsPerPage: 10,
+          StartClassDate: "", //开始日期
+          EndClassDate: "", //结束日期
+          TeacherId: "",
+          ClassRoomId: "",
         },
         dataList: [],
         loading: false,
@@ -112,17 +150,38 @@
             field: 'Id'
           }
         ],
-        isShowYue:false,
-        ChoiceType:0,
-        visitorItem:{},//选中的对象
-        isShowExOrder:false
+        isShowYue: false,
+        ChoiceType: 0,
+        visitorItem: {}, //选中的对象
+        isShowExOrder: false,
+        TeacherList: [], //教师列表
+        ClassRoomList: [], //教室列表
       }
     },
-
+    created() {
+      this.GetTeacherList();
+      this.getClassRoomList();
+    },
     mounted() {
       this.getList()
     },
     methods: {
+      //获取教师下拉
+      GetTeacherList() {
+        getTeacherDropDownList({}).then(res => {
+          if (res.Code == 1) {
+            this.TeacherList = res.Data;
+          }
+        });
+      },
+      //获取教室下拉
+      getClassRoomList() {
+        queryClassRoomList({}).then(res => {
+          if (res.Code == 1) {
+            this.ClassRoomList = res.Data;
+          }
+        })
+      },
       //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;
@@ -143,25 +202,24 @@
         })
       },
       //预约操作按钮
-      OperateVitior(item,type)
-      {
+      OperateVitior(item, type) {
         this.ChoiceType = type;
         this.isShowYue = true;
-        this.visitorItem=item;
+        this.visitorItem = item;
       },
-     //关闭弹窗
+      //关闭弹窗
       closeYuekeForm() {
         this.isShowYue = false
       },
-      closeOrderForm(){
+      closeOrderForm() {
         this.isShowExOrder = false
       },
       //刷新页面
       refreshPage() {
         this.getList();
       },
-      ExchangeOrder(){
-        this.isShowExOrder=true;
+      ExchangeOrder() {
+        this.isShowExOrder = true;
       }
 
     }