Skip to content

C
confucius
Commit 67c9c961 authored by 罗超's avatar 罗超
Browse files
Options

2

parent c84feae8
Show whitespace changes
Inline Side-by-side
Showing with 445 additions and 639 deletions
src/pages/studyAbroad/subscribe.vue
View file @ 67c9c961
......@@ -2,155 +2,57 @@
<div class="page-body">
<div class="col row wrap q-mr-lg q-col-gutter-md searchBox">
<div class="col-2">
<q-select
filled
dense
v-model="msg.TeacherId"
option-value="TId"
option-label="TeacherName"
:options="TeacherList"
emit-value
map-options
label="老师"
@input="getData"
/>
<q-select filled dense v-model="msg.TeacherId" option-value="TId" option-label="TeacherName"
:options="TeacherList" emit-value map-options label="老师" @input="getData" />
</div>
<div class="col-2">
<q-select
filled
dense
v-model="msg.ClassRoomId"
option-value="RoomId"
option-label="RoomName"
:options="classroomList"
emit-value
map-options
label="教室"
@input="getData"
/>
<q-select filled dense v-model="msg.ClassRoomId" option-value="RoomId" option-label="RoomName"
:options="classroomList" emit-value map-options label="教室" @input="getData" />
</div>
<div class="col-2">
<q-select
filled
dense
v-model="msg.ClassType"
option-value="Id"
option-label="label"
:options="ClassTypeList"
emit-value
map-options
label="课程类型"
@input="getData"
/>
<q-select filled dense v-model="msg.ClassType" option-value="Id" option-label="label" :options="ClassTypeList"
emit-value map-options label="课程类型" @input="getData" />
</div>
<div class="col-2">
<q-select
filled
dense
v-model="msg.AppointState"
option-value="Id"
option-label="label"
:options="AppointStateList"
emit-value
map-options
label="约课状态"
@input="getData"
/>
<q-select filled dense v-model="msg.AppointState" option-value="Id" option-label="label"
:options="AppointStateList" emit-value map-options label="约课状态" @input="getData" />
</div>
<div class="col-2">
<q-field filled dense label="选择日期" stack-label>
<template v-slot:control>
<el-date-picker
v-model="selectedDate"
type="date"
size="mini"
placeholder="开始日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:clearable="false"
@change="changeDate"
>
<el-date-picker v-model="selectedDate" type="date" size="mini" placeholder="开始日期" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" :clearable="false" @change="changeDate">
</el-date-picker>
</template>
</q-field>
</div>
<div class="col-2">
<q-select
filled
dense
v-model="viewType"
option-value="value"
option-label="name"
:options="viewTypeList"
emit-value
map-options
label="显示模式"
@input="changeDate"
/>
<q-select filled dense v-model="viewType" option-value="value" option-label="name" :options="viewTypeList"
emit-value map-options label="显示模式" @input="changeDate" />
</div>
</div>
<div class="row justify-center items-center q-mt-sm">
<q-btn
dense
text-color="primary"
flat
unelevated
:label="viewType == 'day' ? '上一天' : '上一周'"
@click="calendarPrev"
/>
<q-btn dense text-color="primary" flat unelevated :label="viewType == 'day' ? '上一天' : '上一周'"
@click="calendarPrev" />
<q-separator vertical />
<q-btn
dense
text-color="primary"
flat
unelevated
:label="viewType == 'day' ? '下一天' : '下一周'"
@click="calendarNext"
/>
<q-btn dense text-color="primary" flat unelevated :label="viewType == 'day' ? '下一天' : '下一周'"
@click="calendarNext" />
</div>
<div class="viewbox">
<q-calendar
v-model="selectedDate"
:view="viewType"
ref="calendar"
locale="zh-CN"
class="calendar-container "
bordered
no-scroll
hour24-format
:interval-start="8"
:interval-count="15"
:interval-height="60"
animated
transition-prev="slide-right"
transition-next="slide-left"
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
@input="onModelChanged"
@click:date2="onClickDate2"
@click:day:header2="onClickDayHeader2"
@click:interval2="onClickInterval2"
@click:time2="onClickTime2"
@click:interval:header2="onClickIntervalHeader2"
>
<q-calendar v-model="selectedDate" :view="viewType" ref="calendar" locale="zh-CN" class="calendar-container "
bordered no-scroll hour24-format :interval-start="8" :interval-count="15" :interval-height="60" animated
transition-prev="slide-right" transition-next="slide-left" :weekdays="[1, 2, 3, 4, 5, 6, 0]"
@input="onModelChanged" @click:date2="onClickDate2" @click:day:header2="onClickDayHeader2"
@click:interval2="onClickInterval2" @click:time2="onClickTime2"
@click:interval:header2="onClickIntervalHeader2">
<template #day-header="{ timestamp }">
<div v-if="viewType == 'week'">
<q-badge
:color="item.bg"
:label="item.TeacherName"
v-for="(item, index) in legendList"
:key="index"
class="q-mr-xs"
/>
<q-badge :color="item.bg" :label="item.TeacherName" v-for="(item, index) in legendList" :key="index"
class="q-mr-xs" />
</div>
<div class="flex no-wrap" v-if="viewType == 'day'">
<q-badge
:color="item.bg"
:label="item.TeacherName"
v-for="(item, index) in legendList"
:key="index"
style="height:20px"
:style="{ width: `${(1 / legendList.length) * 100}%` }"
/>
<q-badge :color="item.bg" :label="item.TeacherName" v-for="(item, index) in legendList" :key="index"
style="height:20px" :style="{ width: `${(1 / legendList.length) * 100}%` }" />
</div>
</template>
......@@ -158,13 +60,10 @@
<div v-for="(item, index) in events" :key="index">
<div v-if="item.ClassDate == timestamp.date">
<div v-for="(_item, _index) in item.RList" :key="_index">
<div
v-for="(__item, __index) in _item.SubList"
:key="__index"
<div v-for="(__item, __index) in _item.SubList" :key="__index"
class="my-event justify-center ellipsis courseItem"
:class="badgeClasses(__item, 'body', _item.TeacherId)"
style="overflow:hidden;box-shadow: 0px 10px 10px 0 rgba(36, 36, 36, 0.2);"
:style="
style="overflow:hidden;box-shadow: 0px 10px 10px 0 rgba(36, 36, 36, 0.2);" :style="
badgeStyles(
__item,
'body',
......@@ -173,86 +72,48 @@
_index,
item.RList.length
)
"
@click.stop="
" @click.stop="
showDetail(__item, item.ClassDate, _item.TeacherId)
"
>
">
<el-popover placement="top-start" width="200" trigger="hover">
<div slot="reference" style="height:80vh;position:relative">
<q-badge
rounded
color="red"
label="未成班"
style="position:absolute;top:0;right:0"
v-if="
<q-badge rounded color="red" label="未成班" style="position:absolute;top:0;right:0" v-if="
viewType == 'day' &&
isShowTag(
__item.GuestList,
__item.ScrollMinNum
)
"
/>
<q-icon
name="lock_open"
color="dark"
style="position:absolute;top:0;right:0"
v-if="
isShowTag(__item.GuestList, __item.ScrollMinNum)
" />
<q-icon name="lock_open" color="dark" style="position:absolute;top:0;right:0" v-if="
viewType == 'week' &&
isShowTag(
__item.GuestList,
__item.ScrollMinNum
)
"
/>
<div
v-if="viewType == 'day' || item.RList.length == 1"
class="q-pa-xs"
>
isShowTag(__item.GuestList, __item.ScrollMinNum)
" />
<div v-if="viewType == 'day' || item.RList.length == 1" class="q-pa-xs">
<!-- <div class="flex">
<span class="detailLabel">老师：</span
><span>{{ _item.TeacherName }}</span>
</div> -->
<div class="flex">
<span class="detailLabel">教室：</span
>{{ __item.RoomName }}
<span class="detailLabel">教室：</span>{{ __item.RoomName }}
</div>
<div class="flex no-wrap" v-if="__item.ClassType !== 2">
<span class="detailLabel">进度：</span
><span
>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span
>
<span class="detailLabel">进度：</span><span>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span>
</div>
<div class="row flex no-wrap">
<span class="detailLabel">课程：</span>
<div class="detailValue">{{ __item.CourseName }}</div>
</div>
<div class="flex no-wrap">
<span class="detailLabel">班级：</span
><span>{{ __item.ClassName }}</span>
<span class="detailLabel">班级：</span><span>{{ __item.ClassName }}</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel">时间：</span
><span
>{{ __item.StartTime }}-{{ __item.EndTime }}</span
>
<span class="detailLabel">时间：</span><span>{{ __item.StartTime }}-{{ __item.EndTime }}</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel">
类型：<span></span
><span v-if="__item.ClassType == 1">跟班</span
><span v-if="__item.ClassType == 2">试听课</span
><span v-if="__item.ClassType == 3"
>约课</span
></span
>
类型：<span></span><span v-if="__item.ClassType == 1">跟班</span><span
v-if="__item.ClassType == 2">试听课</span><span v-if="__item.ClassType == 3">约课</span></span>
</div>
<div class="flex no-wrap" v-if="__item.ClassType !== 2">
<span class="detailLabel">进度：</span
><span
>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span
>
<span class="detailLabel">进度：</span><span>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span>
<span class="q-ml-sm">{{
__item.CourseGradeName
}}</span>
......@@ -260,51 +121,35 @@
<div class="flex no-wrap" v-if="__item.ClassType !== 2">
<span class="detailLabel">学员：</span>
<div>
<span
v-for="(x, y) in __item.GuestList"
:key="y"
style="white-space:nowrap;"
>
<span v-for="(x, y) in __item.GuestList" :key="y"
style="white-space:nowrap;display:inline-block" class="q-mr-xs">
{{ x.GuestName }}
<span v-if="x.AppointType == 2">(补)</span>
<span v-if="x.AppointType == 3">(重)</span>,
<span v-if="x.AppointType == 3">(重)</span>
</span>
</div>
</div>
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="detailLabel">
状态：<span
v-if="__item.AppointState == 1"
style="color:#ef5350"
>待确认</span
><span
v-if="__item.AppointState == 2"
style="color:#21ba45"
>已确认</span
>
<q-btn
color="accent"
size="xs"
label="确认"
v-if="
<span class="detailLabel">状态：</span>
<div>
<span v-if="__item.AppointState == 1" style="color:#ef5350">待确认</span>
<span v-if="__item.AppointState == 2" style="color:#21ba45">已确认</span>
<q-btn color="accent" size="xs" label="确认" v-if="
__item.AppointState == 1 &&
__item.GuestList.length >=
__item.ScrollMinNum &&
auth.IsEdit
"
@click="
" @click="
confirmSub(
item.ClassDate,
_item.TeacherId,
__item
)
"
/>
</span>
" />
</div>
</div>
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最小成班人数：</span
><span>{{ __item.ScrollMinNum }}</span>
<span class="">最小成班人数：</span><span>{{ __item.ScrollMinNum }}</span>
</div>
<!-- <div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最大成班人数：</span
......@@ -313,108 +158,69 @@
</div>
</div>
<div style="position:relative">
<q-badge
rounded
color="red"
label="未成班"
style="position:absolute;top:0;right:0"
v-if="
isShowTag(
__item.GuestList,
__item.ScrollMinNum
)
"
/>
<q-badge rounded color="red" label="未成班" style="position:absolute;top:0;right:0"
v-if="isShowTag(__item.GuestList, __item.ScrollMinNum)" />
<div class="flex">
<span class="detailLabel">老师：</span
><span>{{ _item.TeacherName }}</span>
<span class="detailLabel">老师：</span><span>{{ _item.TeacherName }}</span>
</div>
<div class="flex">
<span class="detailLabel">教室：</span
>{{ __item.RoomName }}
<span class="detailLabel">教室：</span>{{ __item.RoomName }}
</div>
<div class="flex no-wrap">
<span class="detailLabel">课程：</span
><span>{{ __item.CourseName }}</span>
<span class="detailLabel">课程：</span><span>{{ __item.CourseName }}</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel">班级：</span
><span>{{ __item.ClassName }}</span>
<span class="detailLabel">班级：</span><span>{{ __item.ClassName }}</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel">时间：</span
><span
>{{ __item.StartTime }}-{{ __item.EndTime }}</span
>
<span class="detailLabel">时间：</span><span>{{ __item.StartTime }}-{{ __item.EndTime }}</span>
</div>
<div class="flex no-wrap" v-if="__item.ClassType !== 2">
<span class="detailLabel">进度：</span
><span
>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span
>
<span class="detailLabel">进度：</span><span>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span>
<span class="q-ml-sm">{{
__item.CourseGradeName
}}</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel"> 类型：</span
><span v-if="__item.ClassType == 1">跟班</span
><span v-if="__item.ClassType == 2">试听课</span
><span v-if="__item.ClassType == 3">约课</span>
<span class="detailLabel"> 类型：</span><span v-if="__item.ClassType == 1">跟班</span><span
v-if="__item.ClassType == 2">试听课</span><span v-if="__item.ClassType == 3">约课</span>
</div>
<div class="flex no-wrap" v-if="__item.ClassType !== 2">
<span class="detailLabel">学员：</span>
<div>
<span
v-for="(x, y) in __item.GuestList"
:key="y"
style="white-space:nowrap"
>
<div v-for="(x, y) in __item.GuestList" :key="y"
style="white-space:nowrap;display:inline-block" class="q-mr-sm">
{{ x.GuestName }}
<span v-if="x.AppointType == 2">(补)</span>
<span v-if="x.AppointType == 3">(重)</span>,
</span>
<span v-if="x.AppointType == 3">(重)</span>
</div>
</div>
</div>
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="detailLabel">
状态：<span
v-if="__item.AppointState == 1"
style="color:#ef5350"
>待确认</span
><span
v-if="__item.AppointState == 2"
style="color:#21ba45"
>已确认</span
>
<q-btn
color="accent"
size="xs"
label="确认"
v-if="
<span class="detailLabel">状态：</span>
<div>
<span v-if="__item.AppointState == 1" style="color:#ef5350">待确认</span>
<span v-if="__item.AppointState == 2" style="color:#21ba45">已确认</span>
<q-btn color="accent" size="xs" label="确认" v-if="
__item.AppointState == 1 &&
__item.GuestList.length >=
__item.ScrollMinNum &&
auth.IsEdit
"
@click="
" @click="
confirmSub(
item.ClassDate,
_item.TeacherId,
__item
)
"
/>
</span>
" />
</div>
</div>
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最小成班人数：</span
><span>{{ __item.ScrollMinNum }}</span>
<span class="">最小成班人数：</span><span>{{ __item.ScrollMinNum }}</span>
</div>
<!-- <div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最大成班人数：</span
><span>{{ __item.ScrollMaxNum }}</span>
<span class="">最大成班人数：</span><span>{{ __item.ScrollMaxNum }}</span>
</div> -->
</div>
</el-popover>
......@@ -425,33 +231,28 @@
</template>
</q-calendar>
</div>
<SubscribeForm
v-model="showForm"
:editType="editType"
:dateObj="dateObj"
:saveObj="saveObj"
:auth="auth"
:teacherList="TeacherList2"
@success="successHandle"
/>
<SubscribeForm v-model="showForm" :editType="editType" :dateObj="dateObj" :saveObj="saveObj" :auth="auth"
:teacherList="TeacherList2" @success="successHandle" />
</div>
</template>
<script>
import {
import {
GetAppointmentPlanStat,
SetSureAppointment,
GetAppointmentConfig
} from "../../api/studyabroad/subscribe.js";
import { date } from "quasar";
import {
} from "../../api/studyabroad/subscribe.js";
import {
date
} from "quasar";
import {
getTeacherDropDownList,
queryClassRoomList
} from "../../api/school/index";
import SubscribeForm from "../../components/stuMan/subscribe/subscribeForm";
import QCalendar from "@quasar/quasar-ui-qcalendar";
} from "../../api/school/index";
import SubscribeForm from "../../components/stuMan/subscribe/subscribeForm";
import QCalendar from "@quasar/quasar-ui-qcalendar";
export default {
export default {
data() {
return {
config: {
......@@ -468,8 +269,7 @@ export default {
}
},
viewType: "week",
viewTypeList: [
{
viewTypeList: [{
name: "天视图",
value: "day"
},
......@@ -491,8 +291,7 @@ export default {
},
TeacherList: [],
classroomList: [],
ClassTypeList: [
{
ClassTypeList: [{
label: "全部",
Id: 0
},
......@@ -509,8 +308,7 @@ export default {
Id: 3
}
],
AppointStateList: [
{
AppointStateList: [{
label: "全部",
Id: 0
},
......@@ -603,7 +401,9 @@ export default {
getHeight(event, timeDurationHeight) {
let gap = this.calcGap(event.StartTime, event.EndTime);
let height = timeDurationHeight(gap) + "px";
return { height: height + "px" };
return {
height: height + "px"
};
},
calendarNext() {
this.$refs.calendar.next();
......@@ -622,7 +422,10 @@ export default {
}, 100);
},
getTeacherList() {
getTeacherDropDownList({ LeaveStatus: 1, IsShow: 1 }).then(res => {
getTeacherDropDownList({
LeaveStatus: 1,
IsShow: 1
}).then(res => {
if (res.Code == 1) {
this.TeacherList = JSON.parse(JSON.stringify(res.Data));
var obj = {
......@@ -746,12 +549,12 @@ export default {
this.getData();
},
isShowTag(arr, min) {
let n=0
arr.map((e)=>{
if(e.AppointType!==3){
n+=1
let n = 0;
arr.map(e => {
if (e.AppointType !== 3) {
n += 1;
}
})
});
if (n < min) {
return true;
} else {
......@@ -771,46 +574,49 @@ export default {
}
}
}
};
};
</script>
<style lang="scss">
.viewbox {
// width:1500px;
.viewbox {
overflow-x: auto;
box-sizing: border-box;
}
.calendar-container {
}
.calendar-container {
position: relative;
// height: calc(100% - 32px);
// width: 200%;
overflow: auto;
}
.my-event {
}
.my-event {
position: absolute;
font-size: 12px;
}
.searchBox .el-input__inner {
}
.searchBox .el-input__inner {
border: none;
background-color: transparent;
}
}
.searchBox .el-input .el-input__inner,
.el-select .el-input {
.searchBox .el-input .el-input__inner,
.el-select .el-input {
border-radius: 0;
height: 25px;
}
.courseItem {
// overflow: auto;
// padding: 3px;
}
.courseItem {
height: 100%;
}
.detailLabel {
}
.detailLabel {
width: 35px;
white-space: nowrap;
}
.detailValue {
}
.detailValue {
width: 100%;
display: inline-block;
}
}
</style>
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