页面修改

src/api/scheduling/schedu.js

@@ -185,13 +185,53 @@ export function SetVisitorReserve(data) {
 }
 
 /**
+<<<<<<< .merge_file_a15728
  * 约课管理
  * @param {JSON参数} data 
  */
 export function queryVisitorReservePage(data) {
   return request({
     url: '/VisitorReserve/GetVisitorReservePage',
+=======
+ * 获取详情
+ * @param {JSON参数} data 
+ */
+export function GetReserveClass(data) {
+  return request({
+    url: '/VisitorReserve/GetReserveClass',
+>>>>>>> .merge_file_a18140
+    method: 'post',
+    data
+  })
+}
+<<<<<<< .merge_file_a15728
+=======
+
+
+/**
+ * 删除试听课程
+ * @param {JSON参数} data 
+ */
+export function RemoveReserveClass(data) {
+  return request({
+    url: '/VisitorReserve/RemoveReserveClass',
     method: 'post',
     data
   })
 }
+
+/**
+ * 保存修改听课程
+ * @param {JSON参数} data 
+ */
+export function SetReserveClass(data) {
+  return request({
+    url: '/VisitorReserve/SetReserveClass',
+    method: 'post',
+    data
+  })
+}
+
+
+
+>>>>>>> .merge_file_a18140

src/components/schedul/reserve-form.vue

+<style>
+  .time-select {
+    z-index: 9999 !important;
+  }
+</style>
+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.ReserveClassId==0?'新增试听课程':'修改试听课程'}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="row wrap">
+          <q-input filled v-model="objOption.ClassDate" class="col-6 q-pr-lg q-pb-lg"
+            :rules="[val => !!val || '请选择预约日期']" ref="ClassDate" mask="date" label="预约日期">
+            <template v-slot:append>
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
+                  <q-date v-model="objOption.ClassDate" @input="() => $refs.qDateProxy1.hide()" />
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+          <div class="Sysuser_Date col-6 q-pb-lg">
+            <q-field filled>
+                <template v-slot:control>
+                <el-time-select v-model="objOption.ClassTime" ref="ClassTime" style="width:100%" :picker-options="{
+                    start: '09:00',
+                    step: '00:15',
+                    end: '21:00'
+                }" placeholder="预约时间">
+                </el-time-select>
+              </template>
+            </q-field>
+          </div>
+          <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="objOption.TeacherId"
+            ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
+            map-options />
+          <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="objOption.ClassRoomId"
+            ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6 q-pb-lg" emit-value
+            map-options />
+          <q-select filled stack-label option-value="Name" option-label="Name" v-model="objOption.ClassContent"
+            ref="ClassContent" :options="ContentList" label="主讲内容" :dense="false" class="col-12 q-pb-lg" emit-value
+            map-options />
+        </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="saveCategory" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+  import {
+    getTeacherDropDownList,
+    queryClassRoomList
+  } from "../../api/school/index";
+  import {
+    GetReserveClass,
+    SetReserveClass
+  } from '../../api/scheduling/schedu'
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          ReserveClassId: 0,
+          TeacherId: "",
+          ClassDate: "",
+          ClassTime: "",
+          ClassRoomId: "",
+          ClassContent: ''
+        },
+        saveLoading: false,
+        TeacherList: [],
+        ClassRoomList: [],
+        ContentList: [{
+          Id: 1,
+          Name: '少儿类：主要以丰富可与时间和兴趣为主，要求课堂轻松活跃。趣味性十足'
+        }, {
+          Id: 2,
+          Name: '兴趣类：成年人，对日语学习从兴趣开始，要求课堂丰富有趣'
+        }, {
+          Id: 3,
+          Name: '实用类：对于日语学习有一定的需求（考研、就业等），要求学习过程专业，干货多'
+        }, {
+          Id: 4,
+          Name: '留学类：打算去往日本留学（本科、硕士、语言学校、私塾等）'
+        }]
+      }
+    },
+    mounted() {
+      this.GetTeacherList();
+      this.getClassRoomList();
+      this.initObj()
+    },
+    methods: {
+      //初始化表单
+      initObj() {
+        if (this.saveObj && this.saveObj.ReserveClassId > 0) {
+          GetReserveClass({
+            ReserveClassId: this.saveObj.ReserveClassId
+          }).then(res => {
+            if (res.Code == 1) {
+              this.objOption.ReserveClassId = res.Data.ReserveClassId;
+              this.objOption.TeacherId = res.Data.TeacherId;
+              this.objOption.ClassDate = res.Data.ClassDateStr;
+              this.objOption.ClassTime = res.Data.ClassTime;
+              this.objOption.ClassRoomId = res.Data.ClassRoomId;
+              this.objOption.ClassContent = res.Data.ClassContent;
+            } else {
+              this.objOption.TeacherId = 0;
+              this.objOption.ClassDate = '';
+              this.objOption.ClassTime = '';
+              this.objOption.ClassRoomId = 0;
+              this.objOption.ClassContent = '';
+            }
+          })
+        }
+      },
+      //关闭弹窗
+      closeSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      //保存菜单
+      saveCategory() {
+        this.saveLoading = true
+        SetReserveClass(this.objOption).then(res => {
+          this.saveLoading = false
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          this.$emit("success")
+          this.closeSaveForm()
+        }).catch(() => {
+          this.saveLoading = false
+        })
+      },
+      //获取教师下拉
+      GetTeacherList() {
+        getTeacherDropDownList({}).then(res => {
+          if (res.Code == 1) {
+            this.TeacherList = res.Data;
+          }
+        });
+      },
+      //获取教室下拉
+      getClassRoomList() {
+        queryClassRoomList({}).then(res => {
+          if (res.Code == 1) {
+            this.ClassRoomList = res.Data;
+          }
+        })
+      },
+
+    }
+  }
+
+</script>

src/pages/sale/reserveClass.vue

+<style>
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+</style>
 <template>
   <div class="page-body">
-    <q-table :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table sticky-right-column-table"
+    <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 :pagination="msg" :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">
         <div class="col-2 q-table__title">试听课管理</div>
         <q-space />
-
+        <div class="page-option">
+          <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="添加试听" @click="editVisitor(null)" />
+        </div>
       </template>
-      <template v-slot:body-cell-Id="props">
+      <template v-slot:body-cell-TeacherId="props">
         <q-td :props="props">
-          <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="报入" />
+          <q-btn flat size="xs" icon="edit" color="accent" @click="editVisitor(props.row)" style="font-weight:400" label="修改" />
+          <q-btn flat size="xs" icon="delete" @click="deleteReserve(props.row)" color="negative" style="font-weight:400" label="删除" />
         </q-td>
       </template>
       <template v-slot:bottom>
@@ -17,28 +53,39 @@
           :input="true" @input="changePage" />
       </template>
     </q-table>
+    <reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage"></reserveForm>
   </div>
 </template>
 
 <script>
   import {
-    GetReserveClassPage
+    GetReserveClassPage,
+    RemoveReserveClass
   } from '../../api/scheduling/schedu'
+  import {
+    getTeacherDropDownList,
+    queryClassRoomList
+  } from "../../api/school/index";
+
+  import reserveForm from '../../components/schedul/reserve-form'
+
   export default {
     meta: {
       title: "试听课管理"
     },
-    components: {},
+    components: {
+      reserveForm
+    },
     data() {
       return {
         msg: {
           pageIndex: 1,
           pageSize: 10,
           rowsPerPage: 10,
-          StartClassDate:"",//开始时间
-          EndClassDate:"",//结束时间
-          TeacherId:"",//教师编号
-          ClassRoomId:"",//教室编号
+          StartClassDate: "", //开始时间
+          EndClassDate: "", //结束时间
+          TeacherId: "", //教师编号
+          ClassRoomId: "", //教室编号
         },
         dataList: [],
         loading: false,
@@ -86,14 +133,20 @@
             field: 'ClassContent',
           },
           {
-            name: 'CateId',
+            name: 'TeacherId',
             label: '操作',
-            field: 'CateId'
+            field: 'TeacherId'
           }
         ],
+        TeacherList: [],
+        ClassRoomList: [],
+        isShowReserve:false,
+        reserveObj: {}
       }
     },
     mounted() {
+      this.GetTeacherList();
+      this.getClassRoomList();
       this.getList()
     },
     methods: {
@@ -109,12 +162,73 @@
       //获取课程系列分页列表
       getList() {
         GetReserveClassPage(this.msg).then(res => {
-          console.log(res, '数据');
           if (res.Code == 1) {
             this.dataList = res.Data.PageData;
             this.PageCount = res.Data.PageCount;
           }
         })
+      },
+      //获取教师下拉
+      GetTeacherList() {
+        getTeacherDropDownList({}).then(res => {
+          if (res.Code == 1) {
+            this.TeacherList = res.Data;
+          }
+        });
+      },
+      //获取教室下拉
+      getClassRoomList() {
+        queryClassRoomList({}).then(res => {
+          if (res.Code == 1) {
+            this.ClassRoomList = res.Data;
+          }
+        })
+      },
+      //编辑试听
+      editVisitor(obj){
+        if (obj) {
+          this.reserveObj = obj
+        } else {
+          this.reserveObj = null
+        }
+        this.isShowReserve = true;
+      },
+      //删除试听课
+      deleteReserve(item){
+        let delMsg = {
+          ReserveClassId: item.ReserveClassId,
+        };
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除该试听课？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          RemoveReserveClass(delMsg).then(res => {
+            if (res.Code == 1) {
+              this.$q.notify({
+                icon: 'iconfont icon-chenggong',
+                color: 'accent',
+                timeout: 2000,
+                message: '删除成功！',
+                position: 'top'
+              })
+              this.getList();
+            }
+          })
+        }).onCancel(() => {
+
+        });
+      },
+      //关闭弹窗
+      closeReserveForm() {
+        this.isShowReserve = false
+      },
+      //刷新页面
+      refreshPage() {
+        this.getList();
       }
     }
   }