Commit 16c8c268 authored by youjie's avatar youjie

试听课兼容手机

parent 4e423b93
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
</q-card-section> </q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh"> <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="row wrap"> <div class="row wrap">
<q-input filled v-model="objOption.ClassDate" class="col-6 q-pr-lg q-pb-lg" <q-input filled v-model="objOption.ClassDate" class=""
:class="[$q.platform.is.desktop?'col-6 q-pr-lg q-pb-lg':'col-12 q-pb-sm']"
:rules="[val => !!val || '请选择预约日期']" ref="ClassDate" mask="date" label="预约日期"> :rules="[val => !!val || '请选择预约日期']" ref="ClassDate" mask="date" label="预约日期">
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
...@@ -21,8 +22,9 @@ ...@@ -21,8 +22,9 @@
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
<div class="Sysuser_Date col-6 q-pb-lg"> <div class="Sysuser_Date"
<q-field> :class="[$q.platform.is.desktop?'col-6 q-pb-lg':'col-12 q-pb-sm']">
<q-field filled dense>
<template v-slot:control> <template v-slot:control>
<el-time-select v-model="objOption.ClassTime" ref="ClassTime" style="width:50%" :picker-options="{ <el-time-select v-model="objOption.ClassTime" ref="ClassTime" style="width:50%" :picker-options="{
start: '09:00', start: '09:00',
...@@ -42,15 +44,18 @@ ...@@ -42,15 +44,18 @@
</q-field> </q-field>
</div> </div>
<q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="objOption.TeacherId" <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 ref="TeacherId" :options="TeacherList" label="选择教师" :dense="false" class="col-6 q-pr-lg"
:class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value
map-options /> map-options />
<q-select filled stack-label option-value="RoomId" option-label="RoomName" v-model="objOption.ClassRoomId" <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 ref="ClassRoomId" :options="ClassRoomList" label="关联教室" :dense="false" class="col-6"
:class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value
map-options /> map-options />
<q-select filled stack-label option-value="Id" option-label="LessonName" v-model="objOption.TrialLessonId" <q-select filled stack-label option-value="Id" option-label="LessonName" v-model="objOption.TrialLessonId"
:options="TrialList" label="试听课程" :dense="false" class="col-6 q-pb-lg q-pr-lg" emit-value map-options /> :options="TrialList" label="试听课程" :dense="false" class="col-6 q-pr-lg"
:class="[$q.platform.is.desktop?'q-pb-lg':'q-pb-sm']" emit-value map-options />
<q-select filled stack-label option-value="Name" option-label="Name" v-model="objOption.ClassContent" <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 ref="ClassContent" :options="ContentList" label="主讲内容" :dense="false" class="col-12 q-pb-lg" emit-value
...@@ -257,4 +262,4 @@ ...@@ -257,4 +262,4 @@
}, },
} }
} }
</script> </script>
\ No newline at end of file
<template> <template>
<div class="page-content"> <div class="page-content"
<q-table :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat :class="[$q.platform.is.desktop?'':'']">
<q-table v-if="$q.platform.is.desktop" :pagination="pageMsg" :loading="loading" no-data-label="暂无相关数据" flat
class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns" class="sticky-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
:visible-columns="visibleColumns" row-key="name"> :visible-columns="visibleColumns" row-key="name">
<template v-slot:top> <template v-slot:top>
<div class="col-2 q-table__title">试听开课管理</div> <div class="q-table__title"
:class="[$q.platform.is.desktop?'col-2':'col-12']">试听开课管理</div>
<q-space /> <q-space />
</template> </template>
<template v-slot:body-cell-ReservationDate="props"> <template v-slot:body-cell-ReservationDate="props">
<q-td> <q-td>
...@@ -20,7 +22,7 @@ ...@@ -20,7 +22,7 @@
<div style="min-width: 150px;word-break: break-word;white-space: normal;"> <div style="min-width: 150px;word-break: break-word;white-space: normal;">
{{ props.row.ClassDateStr }} {{ props.row.ClassTime }} {{ props.row.ClassDateStr }} {{ props.row.ClassTime }}
<template v-if="props.row.ClassDateStr&&props.row.ClassDateStr.length>0">-</template> <template v-if="props.row.ClassDateStr&&props.row.ClassDateStr.length>0">-</template>
{{ props.row.EndTime }} {{ props.row.EndTime }}
</div> </div>
</q-td> </q-td>
</template> </template>
...@@ -38,6 +40,39 @@ ...@@ -38,6 +40,39 @@
<template v-slot:bottom> <template v-slot:bottom>
</template> </template>
</q-table> </q-table>
<template v-if="$q.platform.is.mobile">
<q-card
class="light-shadow q-pa-md bg-grey-1 rounded-borders q-mb-md"
flat
v-for="(x, index) in data"
:key="index"
>
<div class="row justify-between">
<div>学生:<span class="text-blue-5">{{x.StuName}}</span></div>
<div>试听日期:<span class="text-blue-5">{{timeFormatSeconds(x.ReservationDate)}}</span></div>
</div>
<div class="bg-white q-pa-sm q-mt-sm" style="border-radius: 8px;">
<div>
<span class="text-grey-6">试听需求:</span><span v-html="">{{x.Demand}}</span>
</div>
</div>
<div class=" q-pa-sm border-radius q-mt-sm" v-if="x.ClassDateStr||x.TeacherName||x.LessonName||x.RoomName">
<div class="row justify-between" v-if="x.ClassDateStr||x.TeacherName">
<span v-if="x.ClassDateStr">预约时间:<span class="text-blue-5">{{x.ClassDateStr}}</span></span>
<span v-if="x.TeacherName">主讲老师:<span class="text-blue-5">{{x.TeacherName}}</span></span>
</div>
<div class="row justify-between" v-if="x.LessonName||x.RoomName">
<span v-if="x.LessonName">课程名称:<span class="text-blue-5">{{x.LessonName}}</span></span>
<span v-if="x.RoomName">教室:<span class="text-blue-5">{{x.RoomName}}</span></span>
</div>
</div>
<div class="row justify-end">
<q-btn label="修改" color="primary" flat @click="editVisitor(x)"/>
<q-btn label="删除" color="teal-10" flat @click="DeleteVisitorReserve(x.Id)"/>
</div>
</q-card>
</template>
<reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage"> <reserveForm v-if="isShowReserve" :save-obj="reserveObj" @close="closeReserveForm" @success="refreshPage">
</reserveForm> </reserveForm>
</div> </div>
...@@ -166,7 +201,7 @@ ...@@ -166,7 +201,7 @@
if (seconds < 10) seconds = '0' + seconds; if (seconds < 10) seconds = '0' + seconds;
timeStr+= ' ' + hours + ':' + min + ':' + seconds; timeStr+= ' ' + hours + ':' + min + ':' + seconds;
} }
timeStr=year + '-' + month + '-' + day +timeStr; timeStr=year + '-' + month + '-' + day +timeStr;
return timeStr; return timeStr;
}, },
...@@ -186,8 +221,8 @@ return timeStr; ...@@ -186,8 +221,8 @@ return timeStr;
refreshPage() { refreshPage() {
this.$emit('success'); this.$emit('success');
}, },
//删除试听 //删除试听
DeleteVisitorReserve(Id) { DeleteVisitorReserve(Id) {
let that = this; let that = this;
...@@ -221,4 +256,4 @@ return timeStr; ...@@ -221,4 +256,4 @@ return timeStr;
</script> </script>
<style lang="sass"> <style lang="sass">
@import url('~assets/css/table.sass') @import url('~assets/css/table.sass')
</style> </style>
\ No newline at end of file
...@@ -5,62 +5,65 @@ ...@@ -5,62 +5,65 @@
</style> </style>
<template> <template>
<div :class="[type?'q-pa-md':'']"> <div :class="[$q.platform.is.mobile?'q-pa-md bg-grey-1':'']">
<p class="text-center small text-weight-bold" v-if="type==1">试听开课</p> <p class="text-center small text-weight-bold text-h6" v-if="type">试听开课</p>
<div class="row wrap"> <div class="row wrap">
<div style="width:100%;margin-bottom:15px;">试听时间:<span style="color:red;">{{timeFormatSeconds(setClassMsg.ReservationDate)}}</span></div> <div style="width:100%;margin-bottom:15px;">试听时间:<span style="color:red;">{{timeFormatSeconds(setClassMsg.ReservationDate)}}</span></div>
<div style="width:100%;margin-bottom:15px;">试听需求:<span style="color:red;">{{setClassMsg.Demand}}</span></div> <div style="width:100%;margin-bottom:15px;">试听需求:<span style="color:red;">{{setClassMsg.Demand}}</span></div>
</div> </div>
<div class="row studentDate"> <q-card class="bg-white q-pa-md" flat>
<q-field filled dense <div class="row studentDate">
:class="[type?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']"> <q-field filled dense
<template v-slot:control> :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
<el-date-picker v-model="setClassMsg.ClassDate" ref="ClassDate" :rules="[val => !!val || '请选择预约日期']" <template v-slot:control>
style="width:100%" size="mini" type="date" placeholder="预约日期" value-format="yyyy-MM-dd"> <el-date-picker v-model="setClassMsg.ClassDate" ref="ClassDate" :rules="[val => !!val || '请选择预约日期']"
</el-date-picker> style="width:100%" size="mini" type="date" placeholder="预约日期" value-format="yyyy-MM-dd">
</template> </el-date-picker>
</q-field> </template>
<div class="Student_Date " </q-field>
:class="[type?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']"> <div class="Student_Date "
<q-field filled class="" dense> :class="[$q.platform.is.mobile?'col-12 q-pb-sm':'col-6 q-pr-lg q-pb-lg']">
<template v-slot:control> <q-field filled class="" dense>
<el-time-select v-model="setClassMsg.ClassTime" size="mini" ref="ClassTime" style="width:50%" :picker-options="{ <template v-slot:control>
start: '09:00', <el-time-select v-model="setClassMsg.ClassTime" size="mini" ref="ClassTime" style="width:49%;margin-right: 1%;" :picker-options="{
step: '00:15', start: '09:00',
end: '21:00', step: '00:15',
maxTime: setClassMsg.EndTime end: '21:00',
}" placeholder="预约开始时间"> maxTime: setClassMsg.EndTime
</el-time-select> }" placeholder="预约开始时间">
<el-time-select v-model="setClassMsg.EndTime" size="mini" dense ref="EndTime" style="width:50%" </el-time-select>
:picker-options="{ <el-time-select v-model="setClassMsg.EndTime" size="mini" dense ref="EndTime" style="width:49%;margin-left: 1%;"
start: '09:00', :picker-options="{
step: '00:15', start: '09:00',
end: '21:00', step: '00:15',
minTime: setClassMsg.ClassTime end: '21:00',
}" placeholder="预约结束时间"> minTime: setClassMsg.ClassTime
</el-time-select> }" placeholder="预约结束时间">
</template> </el-time-select>
</q-field> </template>
</div> </q-field>
</div> </div>
<div class="row wrap"> </div>
<q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="setClassMsg.TeacherId" <div class="row wrap">
ref="TeacherId" :options="TeacherList" label="选择教师" dense class="col-6" <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="setClassMsg.TeacherId"
:class="[type?'q-pr-sm q-pb-sm':'q-pr-lg q-pb-lg']"emit-value ref="TeacherId" :options="TeacherList" label="选择教师" dense class="col-6"
map-options /> :class="[$q.platform.is.mobile?'q-pr-sm q-pb-sm':'q-pr-lg q-pb-lg']"emit-value
<q-select filled stack-label option-value="RoomId" dense option-label="RoomName" v-model="setClassMsg.ClassRoomId" map-options />
ref="ClassRoomId" :options="ClassRoomList" label="关联教室" class="col-6" <q-select filled stack-label option-value="RoomId" dense option-label="RoomName" v-model="setClassMsg.ClassRoomId"
:class="[type?'q-pl-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value ref="ClassRoomId" :options="ClassRoomList" label="关联教室" class="col-6"
map-options /> :class="[$q.platform.is.mobile?'q-pl-sm q-pb-sm':'q-pr-lg q-pb-lg']" emit-value
<q-select filled stack-label option-value="Id" dense option-label="LessonName" v-model="setClassMsg.TrialLessonId" map-options />
:options="TrialList" label="试听课程" class="col-6" <q-select filled stack-label option-value="Id" dense option-label="LessonName" v-model="setClassMsg.TrialLessonId"
:class="[type?'q-pr-sm':'q-pr-lg q-pb-lg']" emit-value map-options /> :options="TrialList" label="试听课程" class="col-6"
</div> :class="[$q.platform.is.mobile?'q-pr-sm':'q-pr-lg q-pb-lg']" emit-value map-options />
</div>
</q-card>
<div slot="footer" class="dialog-footer" <div slot="footer" class="dialog-footer"
:class="[type?'text-center q-pt-lg row':'text-right q-pb-lg']"> :class="[$q.platform.is.mobile?'text-center q-pt-lg row':'text-right q-pb-lg']">
<el-button v-if="!type" @click="closeShitingKaiKe()">取 消</el-button> <el-button v-if="!$q.platform.is.mobile" @click="closeShitingKaiKe()">取 消</el-button>
<el-button type="primary" @click="SetVisitorReserveClass()" <el-button type="primary" @click="SetVisitorReserveClass()"
:class="[type?'col-12':'']">确 定</el-button> :class="[$q.platform.is.mobile?'col-12':'']">确 定</el-button>
</div> </div>
<statusPrompt v-if="isSuccess" :isSuccess="isSuccess" :isSuccessTitle="isSuccessTitle"></statusPrompt> <statusPrompt v-if="isSuccess" :isSuccess="isSuccess" :isSuccessTitle="isSuccessTitle"></statusPrompt>
</div> </div>
...@@ -214,16 +217,17 @@ ...@@ -214,16 +217,17 @@
} }
SetVisitorReserveClass(this.setClassMsg).then(res => { SetVisitorReserveClass(this.setClassMsg).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
this.$q.notify({ if(this.type){
this.isSuccess = true
this.isSuccessTitle = '试听课开课成功!'
}else{
this.$q.notify({
icon: "iconfont icon-chenggong", icon: "iconfont icon-chenggong",
color: "accent", color: "accent",
timeout: 2000, timeout: 2000,
message: res.Message, message: res.Message,
position: "top" position: "top"
}); });
if(this.type){
this.isSuccess = true
this.isSuccessTitle = '试听课开课成功!'
} }
this.$emit("success"); this.$emit("success");
} else { } else {
......
...@@ -6,10 +6,13 @@ ...@@ -6,10 +6,13 @@
</style> </style>
<template> <template>
<div class="page-body"> <div class="page-body">
<div class="page-search row items-center"> <div class="page-search"
<div class="col row wrap q-mr-lg q-col-gutter-md"> :class="[$q.platform.is.desktop?'row items-center':'']">
<div class="col-3"> <div class="col row wrap q-col-gutter-md"
<div class="col-4 Sysuser_Date"> :class="[$q.platform.is.desktop?'q-mr-lg':'']">
<div
:class="[$q.platform.is.desktop?'col-3':'col-12']">
<div class="Sysuser_Date">
<q-field filled> <q-field filled>
<template v-slot:control> <template v-slot:control>
<el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间" <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
...@@ -38,6 +41,21 @@ ...@@ -38,6 +41,21 @@
</div> </div>
</div> </div>
<reservelist :data="dataList" :authObj="authObj" :loading="loading" @success="refreshPage"></reservelist> <reservelist :data="dataList" :authObj="authObj" :loading="loading" @success="refreshPage"></reservelist>
<q-card
class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
v-if="msg.pageCount > 0"
flat
>
<q-pagination v-if="$q.platform.is.mobile"
class="full-width justify-end"
v-model="msg.pageIndex"
color="primary"
:max="msg.pageCount"
:input="true"
@update:model-value="changePageHandler"
/>
</q-card>
<q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true" <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true"
@input="changePage" /> @input="changePage" />
</div> </div>
...@@ -89,7 +107,7 @@ ...@@ -89,7 +107,7 @@
var month = nowDay.getMonth() + 1; //月 var month = nowDay.getMonth() + 1; //月
var day = nowDay.getDate(); //日 var day = nowDay.getDate(); //日
this.msg.StartClassDate = year + '-' + month + '-' + day this.msg.StartClassDate = year + '-' + month + '-' + day
if (this.$route.query) { if (this.$route.query) {
if (this.$route.query.StartClassDate) { if (this.$route.query.StartClassDate) {
this.msg.StartClassDate = this.$route.query.StartClassDate; this.msg.StartClassDate = this.$route.query.StartClassDate;
...@@ -100,12 +118,16 @@ ...@@ -100,12 +118,16 @@
if (this.$route.query.TeacherId) { if (this.$route.query.TeacherId) {
this.msg.TeacherId = Number(this.$route.query.TeacherId); this.msg.TeacherId = Number(this.$route.query.TeacherId);
} }
} }
// this.GetTeacherList(); // this.GetTeacherList();
// this.getClassRoomList(); // this.getClassRoomList();
this.getList() this.getList()
}, },
methods: { methods: {
changePageHandler(n) {
this.msg.pageIndex = n;
this.getList();
},
//重新查询 //重新查询
resetSearch() { resetSearch() {
this.msg.pageIndex = 1; this.msg.pageIndex = 1;
...@@ -153,4 +175,4 @@ ...@@ -153,4 +175,4 @@
</script> </script>
<style lang="sass"> <style lang="sass">
@import url('~assets/css/table.sass') @import url('~assets/css/table.sass')
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment