增加页面

src/components/schedul/appoint-form.vue

+<style>
+  .Appoint_Line {
+    width: 3px;
+    height: 11px;
+    margin-right: 10px;
+    background-color: #3FC4FF;
+    display: inline-block;
+  }
+
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .time-select {
+    z-index: 9999!important;
+  }
+
+</style>
+<template>
+  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeAppointForm">
+    <q-card style="margin-top:61px;width:400px" class="no-border-radius classinfo_Dialog">
+      <div style="padding:15px;">
+        <div style="margin-bottom:20px;">
+          <div class="Appoint_Line"></div>预约申请
+        </div>
+        <q-input filled v-model="addMsg.date" class="col-6 q-pb-lg" 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="addMsg.date" @input="() => $refs.qDateProxy1.hide()" />
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+        </q-input>
+        <div class="Sysuser_Date">
+          <q-field filled class="q-pb-lg">
+              <template v-slot:control>
+              <el-time-select v-model="addMsg.time" style="width:100%" :picker-options="{
+                    start: '00:00',
+                    step: '00:15',
+                    end: '23:59'
+                }" placeholder="选择时间">
+              </el-time-select>
+            </template>
+          </q-field>
+        </div>
+        <q-input v-model="addMsg.content" class="q-pb-lg" filled type="textarea" placeholder="主讲内容" />
+        <div style="display:flex;align-items:center;">
+          <q-select filled stack-label option-value="TId" style="width:90%" option-label="TeacherName" v-model="addMsg.teacher"
+            ref="Teacher_Id" :options="TeacherList" label="教师团队" :dense="false" class="col-6 q-pb-lg" emit-value
+            map-options multiple />
+          <div style="margin:-20px 0 0 9px" @click="isShowTeacher=true">选择</div>
+        </div>
+        <q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="addMsg.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="Id" option-label="Name" v-model="addMsg.customer"
+          ref="customer" :options="customerList" label="客户" :dense="false" class="col-6 q-pb-lg"
+          emit-value map-options />
+        <q-input v-model="addMsg.remark" class="q-pb-lg" filled type="textarea" placeholder="备注" />
+      </div>
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" size="sm" style="font-weight:400 !important" @click="closeAppointForm" />
+        <q-btn label="保存" color="accent q-px-md" size="sm" style="font-weight:400 !important" :loading="saveAppointLoading"
+          @click="saveAppointForm" />
+      </q-card-actions>
+    </q-card>
+    <div class="dialog-out-close" @click="closeAppointForm"
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+    <audition-form v-if="isShowTeacher" @close="closeAuditForm"></audition-form>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    getTeacherDropDownList,
+    queryClassRoomList
+  } from "../../api/school/index";
+  import auditionForm from '../schedul/audition-form'
+  export default {
+    props: {
+
+    },
+    components: {
+      auditionForm
+    },
+    data() {
+      return {
+        persistent: true,
+        loading: false,
+        addMsg: {
+          date: '', //日期
+          time: '', //时间
+          content: '', //主讲内容
+          teacher: '', //教师
+          ClassRoomId: '', //教室
+          customer: '', //客户
+          remark: '' //备注
+        },
+        TeacherList: [], //教师
+        ClassRoomList: [], //教室
+        customerList:[{
+          Name:'张三',
+          Id:1
+        },{
+          Name:'李四',
+          Id:2
+        }],
+        saveAppointLoading:false,
+        isShowTeacher:false, //显示选择框
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.GetTeacherList();
+      this.getClassRoomList();
+    },
+    methods: {
+      closeAppointForm() {
+        this.persistent = false;
+        this.$emit('close');
+      },
+      closeAuditForm(){
+        this.isShowTeacher=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;
+            var obj = {
+              RoomName: '请选择',
+              RoomId: 0
+            }
+            this.ClassRoomList.unshift(obj);
+          }
+        })
+      },
+      //保存
+      saveAppointForm(){
+
+      }
+    }
+  }
+
+</script>

src/components/schedul/audition-form.vue

+<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 class="q-pt-none scroll" style="max-height: 70vh">
+        <q-table :loading="loading" no-data-label="暂无相关数据" style="margin-top:20px;" 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" label="试听预约" />
+            </div>
+          </template>
+          <template v-slot:body-cell-Id="props">
+            <q-td :props="props">
+              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="报入" />
+            </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" />
+          </template> -->
+        </q-table>
+      </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" @click="savePlan" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  export default {
+    components: {},
+    data() {
+      return {
+        persistent: true,
+        loading: false,
+        columns: [{
+            name: 'Teacher',
+            label: '老师',
+            field: 'Teacher',
+            align: 'left'
+          },
+          {
+            name: 'Time',
+            field: 'Time',
+            label: '时间',
+            align: 'left',
+          },
+          {
+            name: 'date',
+            field: 'date',
+            label: '日期',
+            align: 'left'
+          },
+          {
+            name: 'classroom',
+            label: '教室',
+            field: 'classroom',
+            align: 'left'
+          },
+          {
+            name: 'peopleNum',
+            label: '人数',
+            field: 'peopleNum',
+            align: 'left'
+          },
+          {
+            name: 'content',
+            label: '主讲内容',
+            field: 'content',
+            align: 'left'
+          },
+          {
+            name: 'Id',
+            label: '操作',
+          }
+        ],
+        dataList:[]
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {
+      closeSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      savePlan() {
+
+      }
+    },
+  }
+
+</script>
+
+<style>
+</style>

src/pages/sale/visitorRegistrat.vue

@@ -40,6 +40,8 @@
           <q-td :props="props">
             <q-btn flat size="xs" @click="editVisitor(props.row)" icon="edit" color="accent" style="font-weight:400" label="编辑" />
             <q-btn flat size="xs" @click="getDetail(props.row)" icon="iconfont icon-View" color="accent" style="font-weight:400" label="详情" />
+            <q-btn flat size="xs" @click="getAppointment()" icon="iconfont icon-ziyuan1" color="accent" style="font-weight:400;" label="申请约课" />
+
           </q-td>
         </template>
         <template v-slot:bottom>
@@ -52,7 +54,9 @@
     <visitor-form v-if="isShowVisitor" :save-obj="visitObjOption" @close="closeVisitorForm"
       @success="refreshPage">
     </visitor-form>
+    <appoint-form v-if="isShowFangke" @close="closeAppoint">
 
+    </appoint-form>
   </div>
 </template>
 
@@ -62,13 +66,15 @@
   } from '../../api/scheduling/schedu'
   import schedulFanke from '../../components/schedul/schedul-fanke'
   import visitorForm from '../../components/schedul/visitor-form'
+  import appointForm from '../../components/schedul/appoint-form'
   export default {
     meta: {
       title: "访客登记"
     },
     components: {
       schedulFanke,
-      visitorForm
+      visitorForm,
+      appointForm
     },
     data() {
       return {
@@ -162,7 +168,10 @@
         sendObj:{},
         isShowDetail:false,
         isShowVisitor:false,
-        visitObjOption:null
+        visitObjOption:null,
+        
+        isShowFangke:false, //是否显示填写预约
+
       }
     },
     mounted() {
@@ -229,7 +238,13 @@
         this.isShowDetail = false;
         this.getList();
       },
-
+      //打开约课
+      getAppointment(){
+        this.isShowFangke = true;
+      },
+      closeAppoint(){
+        this.isShowFangke=false;
+      }
     }
   }