Skip to content

C
confucius
Commit 4d58c90d authored by 罗超's avatar 罗超
Browse files
Options

2

parent 7c0ef37a
Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 165 deletions
src/components/stuMan/subscribe/subscribeForm.vue
View file @ 4d58c90d
......@@ -7,10 +7,11 @@
transition-hide="scale"
@input="changeDig"
>
<!-- content-class="bg-grey-1" -->
<q-card style="width: 800px;max-width:900px;">
<q-card-section>
<div class="text-h6">编辑</div>
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">{{ editType == 1 ? "新增" : "详情" }}</div>
<q-space />
<q-btn icon="close" flat round dense @click="changeDig(false)" />
</q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="row col q-mr-lg q-col-gutter-md">
......@@ -34,24 +35,213 @@
emit-value
map-options
@filter="filterCourse"
@input="getCanTeacherTimeList(), getStu(), getChapterTree()"
/>
<q-field filled label="章节" stack-label class="col-12">
@input="getCanTeacherTimeList(), getChapterTree(), changeCourse()"
v-if="editType == 1"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
未找到相关数据
</q-item-section>
</q-item>
</template>
</q-select>
<!-- 详情显示内容 start-->
<q-field
filled
label="老师"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>{{ saveObj.TeacherName }}</div>
</template>
</q-field>
<q-field
filled
label="教室"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>{{ saveObj.RoomName }}</div>
</template>
</q-field>
<q-field
filled
label="课程"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>{{ saveObj.CourseName }}</div>
</template>
</q-field>
<q-field
filled
label="班级"
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType !== 3"
>
<template v-slot:control>
<div>{{ saveObj.ClassName }}</div>
</template>
</q-field>
<q-field
filled
label="等级"
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType == 3"
>
<template v-slot:control>
<div>{{ saveObj.CourseGradeName }}</div>
</template>
</q-field>
<q-field
filled
label="类型"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>
<span v-if="saveObj.ClassType == 1">跟班</span
><span v-if="saveObj.ClassType == 2">试听课</span
><span v-if="saveObj.ClassType == 3">约课</span>
</div>
</template>
</q-field>
<q-field
filled
label="课程时间"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>{{ saveObj.StartTime }}-{{ saveObj.EndTime }}</div>
</template>
</q-field>
<q-field
filled
label="进度"
stack-label
class="col-12"
v-if="editType == 2"
>
<template v-slot:control>
<div>
{{
saveObj.CompleteProgress > 0 ? saveObj.CompleteProgress : 0
}}%
</div>
</template>
</q-field>
<q-field
filled
label="预约状态："
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType == 3"
>
<template v-slot:control>
<div>
<span v-if="saveObj.AppointState == 1">待确认</span
><span v-if="saveObj.AppointState == 2">已确认</span>
</div>
</template>
</q-field>
<q-field
filled
label="最小成班人数："
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType == 3"
>
<template v-slot:control>
<div>{{ saveObj.ScrollMinNum }}</div>
</template>
</q-field>
<q-field
filled
label="最大成班人数："
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType == 3"
>
<template v-slot:control>
<select-tree
:treeData="chapterList"
:defaultArray="returnString"
nodeKey="ChapterId"
labelKey="ChapterName"
childrenKey="ChildList"
tipText="课程系列"
@getChild="getChild"
></select-tree>
<div>{{ saveObj.ScrollMaxNum }}</div>
</template>
</q-field>
<q-field
filled
label="已约学员："
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType == 3"
>
<template v-slot:control>
<div v-if="saveObj.AppointState == 1">
<div class="q-mt-sm flex justify-start">
<q-btn
color="accent"
size="xs"
label="取消预约"
@click="cancelSub()"
:disable="checkStuType2.length==0"
/>
</div>
<div class="row">
<q-checkbox
v-model="checkStuType2"
v-for="(item, index) in saveObj.GuestList"
:key="index"
:label="item.GuestName"
:val="item.StuId"
/>
</div>
</div>
<div v-else>
{{ saveObj.GuestList.map(e => e.GuestName).toString() }}
</div>
</template>
</q-field>
<q-field
filled
label="学员名单："
stack-label
class="col-12"
v-if="editType == 2 && saveObj.ClassType !== 3"
>
<template v-slot:control>
<div>
{{ saveObj.GuestList.map(e => e.GuestName).toString() }}
</div>
</template>
</q-field>
<!-- 详情显示内容 end -->
<select-tree
v-show="teaClassMsg.CourseId > 0 && editType == 1"
:treeData="chapterList"
:defaultArray="returnString"
nodeKey="ChapterId"
labelKey="ChapterName"
childrenKey="ChildList"
tipText="章节"
@getChild="getChapter"
class="col-12"
ref="selectTree"
></select-tree>
<q-select
v-if="teaClassMsg.CourseId > 0"
v-if="teaClassMsg.CourseId > 0 && editType == 1"
filled
v-model="teaClassMsg.TeacherId"
option-value="TId"
......@@ -65,15 +255,33 @@
/>
<q-field
filled
label="上课时段"
label-slot
stack-label
class="col-12"
v-if="teaClassMsg.TeacherId > 0"
>
<template #label>
<div class="row flex">
上课时段
<span
style="color:#f5576c;font-size:13px;margin-left:5px;font-weight:500"
>(按顺序选择)</span
>
<div
style="color:#333;font-size:13px;margin-left:10px;font-weight:500"
>
需选课时：{{ checkChapter.StudyMinutes }}分钟
</div>
</div>
</template>
<template v-slot:control>
<div v-if="teacherTimeList.length > 0">
<div v-for="(item, index) in teacherTimeList" :key="index">
<div>
<div
v-if="
item.CourseTimeList && item.CourseTimeList.length > 0
"
>
<div
v-for="(_item, _index) in item.CourseTimeList"
:key="_index"
......@@ -85,6 +293,9 @@
</q-checkbox>
</div>
</div>
<div v-else>
暂无可约课程
</div>
</div>
</div>
<div v-else>
......@@ -92,49 +303,75 @@
</div>
</template>
</q-field>
{{ courseCheckList }}
<q-field
filled
label="学生列表"
stack-label
<div
class="col-12"
v-if="teaClassMsg.CourseId > 0 && stuList.length > 0"
v-show="editType == 1 || saveObj.ClassType == 3"
>
<template v-slot:control>
<div class="q-gutter-sm">
<div
v-for="(item, index) in checkStuList"
:key="index"
class="q-my-sm"
>
<div>
<span>
{{ item.StuName }}
</span>
（
<span> 当前课章节:{{ item.CourseChapterNo }}， </span>
<span> 下次课章节:{{ item.NextChapterNo }}， </span>
<span> 已约次数:{{ item.AppointNum }}， </span>
<span v-if="item.AppointDate">
已约至:{{ item.AppointDate }}
</span>
）
</div>
</div>
<div class="full-width">
<div @click="showAddStu">
<q-chip
icon="add"
label="添加学员"
color="primary"
text-color="white"
size="sm"
/>
<q-select
filled
stack-label
use-input
option-value="StuId"
option-label="StuName"
v-model="stuInfo"
ref="CourseId"
:options="stuList"
label="选择学员"
:dense="false"
class="col-6"
@filter="filterStu"
@input="addStu"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
未找到相关数据
</q-item-section>
</q-item>
</template>
</q-select>
<div style="height:1px;background-color:#111"></div>
<q-field filled label="学员列表" stack-label class="col-12">
<template v-slot:control>
<div class="q-gutter-sm">
<div
v-for="(item, index) in checkStuList"
:key="index"
class="q-my-sm"
>
<div class="row">
<span>
{{ item.StuName }}
</span>
（
<span> 当前课章节:{{ item.CourseChapterNo }}， </span>
<span> 下次课章节:{{ item.NextChapterNo }}， </span>
<span> 已约次数:{{ item.AppointNum }}， </span>
<span v-if="item.AppointDate">
已约至:{{ item.AppointDate }}
</span>
）
<div>
<q-btn
size="xs"
color="accent"
label="添加"
@click="subscribeCourse(item)"
class="q-mr-md"
/>
<q-btn
size="xs"
color="accent"
label="取消"
@click="cancelStu(item, index)"
/>
</div>
</div>
</div>
</div>
</div>
</template>
</q-field>
</template>
</q-field>
</div>
</div>
</q-card-section>
......@@ -147,58 +384,6 @@
style="font-weight:400 !important"
@click="changeDig(false)"
/>
<q-btn
label="立即提交"
color="accent"
class="q-px-md"
style="font-weight:400 !important"
@click=""
/>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog
v-model="showStu"
persistent
content-class="bg-grey-1"
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 600px;max-width:600px;">
<q-card-section>
<div class="text-h6">选择学员</div>
</q-card-section>
<q-card-section>
<q-select
filled
stack-label
use-input
option-value="StuId"
option-label="StuName"
v-model="stuInfo"
ref="CourseId"
:options="stuList"
label="选择学员"
:dense="false"
class="col-12"
@filter="filterStu"
/>
</q-card-section>
<q-card-actions align="right" class="bg-white">
<q-btn
label="取消"
flat
color="grey-10"
style="font-weight:400 !important"
@click="showStu = false"
/>
<q-btn
label="添加"
color="accent"
class="q-px-md"
style="font-weight:400 !important"
@click="addStu"
/>
</q-card-actions>
</q-card>
</q-dialog>
......@@ -208,14 +393,15 @@
import {
GetCanTeacherClassTimeList,
GetCanAppointmentStuList,
GetStuAppointmentInfo,
SetAdminScrollAppointment
SetAdminScrollAppointment,
CancelAppointment
} from "../../../api/studyabroad/subscribe.js";
import {
queryCourseDropdownList,
queryChapterTree
} from "../../../api/course/index";
import selectTree from "../../../components/common/select-tree";
import QCalendar from "@quasar/quasar-ui-qcalendar";
export default {
components: {
selectTree
......@@ -237,15 +423,21 @@ export default {
type: Boolean,
default: false
},
editType: {
type: Number,
default: 1 //1:新增，2详情
},
teacherList: {
type: Array,
default: () => []
}
},
watch: {
dateObj: {
saveObj: {
handler(val) {
console.log(63, val);
if (this.editType == 2 && val.ClassType == 3) {
this.getStu();
}
},
deep: true
}
......@@ -278,17 +470,18 @@ export default {
StuId: 0,
GuestId: 0,
CourseId: 0,
ChapterNo: 0
ChapterNo: 0,
CourseGradeId: 0
},
showStu: false,
stuInfo: "",
checkStuList: [],
courseCheckList: [],
chapterList: [],
returnString: [], //默认值
chapterList: [], //章节列表，
checkChapter: {}, //选择的章节
returnString: [], //章节默认值
checkStuType2: [] //
};
},
created() {},
mounted() {
this.getCourseList();
},
......@@ -314,15 +507,22 @@ export default {
}
});
},
changeCourse() {
this.teaClassMsg.TeacherId = 0;
this.checkChapter = {};
this.checkStuList = [];
this.stuInfo = "";
this.$refs.selectTree.clearData();
},
//筛选课程
filterStu(val, update) {
filterCourse(val, update) {
update(() => {
if (val === "") {
this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList));
} else {
const needle = val.toLowerCase();
this.CourseList = this.AllCourseList.filter(
v => v.StuName.toLowerCase().indexOf(needle) > -1
v => v.CourseName.toLowerCase().indexOf(needle) > -1
);
}
});
......@@ -338,65 +538,216 @@ export default {
});
},
getStu() {
this.stuMsg.CourseId = this.teaClassMsg.CourseId;
this.stuMsg.CourseId = this.teaClassMsg.CourseId || 0;
this.stuMsg.CourseGradeId =
this.checkChapter.CourseRate || this.saveObj.CourseGradeId;
this.stuMsg.NextChapterNo =
this.checkChapter.ChapterNo || this.saveObj.Ranks;
GetCanAppointmentStuList(this.stuMsg).then(res => {
console.log(199, res);
this.stuList = JSON.parse(JSON.stringify(res.Data));
this.allStuList = JSON.parse(JSON.stringify(res.Data));
});
},
//筛选学员
filterCourse(val, update) {
filterStu(val, update) {
update(() => {
if (val === "") {
this.stuList = JSON.parse(JSON.stringify(this.allStuList));
} else {
const needle = val.toLowerCase();
this.stuList = this.allStuList.filter(
v => v.CourseName.toLowerCase().indexOf(needle) > -1
v => v.StuName.toLowerCase().indexOf(needle) > -1
);
}
});
},
getStuDetail(item) {
const msg = {
StuId: item.StuId,
GuestId: item.GuestId
};
console.log(msg);
return;
GetStuAppointmentInfo(msg).then(res => {
console.log(res);
});
},
showAddStu() {
this.showStu = true;
this.stuInfo = "";
},
addStu() {
this.showStu = false;
if (this.stuInfo) {
console.log(this.stuInfo);
this.checkStuList.push(this.stuInfo);
this.stuList.forEach(e => {
this.checkStuList.map(_e => {
if (e.StuId == _e.StuId) {
e.disable = true;
}
});
});
this.allStuList.forEach(e => {
this.checkStuList.map(_e => {
if (e.StuId == _e.StuId) {
e.disable = true;
}
});
});
}
},
cancelStu(item, index) {
this.checkStuList.splice(index, 1);
this.stuList.forEach(e => {
if (e.StuId == item.StuId) {
e.disable = false;
}
});
this.allStuList.forEach(e => {
if (e.StuId == item.StuId) {
e.disable = false;
}
});
},
//获取章节
getChapterTree() {
if (this.teaClassMsg.CourseId == 0) return;
const msg = { CourseId: this.teaClassMsg.CourseId };
queryChapterTree(msg).then(res => {
console.log(387, res);
this.chapterList=res.Data
this.chapterList = res.Data;
this.chapterList.forEach(e => {
this.mapChapter(e.ChildList, "ChildList");
});
});
},
//禁用第一层后的子级
mapChapter(arr = [], key) {
arr.forEach(e => {
e.disabled = true;
if (e[key] && e[key].length > 0) {
this.mapChapter(e[key]);
}
});
},
//章节选择
getChild(data) {
console.log(data)
getChapter(data) {
this.checkStuList = [];
this.stuInfo = "";
this.chapterList.map(e => {
if (e.ChapterId == data) {
this.checkChapter = e;
console.log(407, this.checkChapter);
return;
}
});
if (this.checkChapter.CourseRate && this.checkChapter.ChapterNo) {
this.getStu();
}
},
},
watch: {}
subscribeCourse(stuInfo) {
if (
new Date(this.dateObj.date).getTime() <
new Date(QCalendar.today()).getTime()
) {
this.$q.notify({
message: `日期小于今天，请重新选择日期`,
position: "top",
type: "negative"
});
return;
}
if (stuInfo.Date) {
if (
new Date(this.dateObj.date).getTime() <
new Date(stuInfo.Date).getTime()
) {
this.$q.notify({
message: `${stuInfo.StuName},不能预约${stuInfo.Date}之前的日期`,
position: "top",
type: "negative"
});
return;
}
}
if (this.editType == 1) {
if (this.courseCheckList.length === 0) {
this.$q.notify({
message: "请选择上课时段",
position: "top",
type: "negative"
});
return;
}
const totalTime = this.courseCheckList.reduce((pre, cur) => {
return (pre += cur.Minutes);
}, 0);
if (this.checkChapter.StudyMinutes !== totalTime) {
this.$q.notify({
message: "课时不匹配，请重新上课时段",
position: "top",
type: "negative"
});
return;
}
let newCourseCheckList = this.courseCheckList.sort((a, b) => {
return a.Sort - b.Sort;
});
for (let i = 0; i < newCourseCheckList.length; i++) {
if (i > 0) {
const cur = newCourseCheckList[i].Sort;
const pre = newCourseCheckList[i - 1].Sort;
if (cur - pre > 1) {
this.$q.notify({
message: "请按顺序选择上课时段",
position: "top",
type: "negative"
});
return;
}
}
}
}
if (this.editType == 1) {
this.saveMsg.Date = this.dateObj.date;
this.saveMsg.StuId = stuInfo.StuId;
this.saveMsg.StuName = stuInfo.StuName;
this.saveMsg.GuestId = stuInfo.GuestId;
this.saveMsg.CourseId = this.teaClassMsg.CourseId;
this.saveMsg.TeacherId = this.teaClassMsg.TeacherId;
this.saveMsg.ChapterNo = this.checkChapter.ChapterNo;
this.saveMsg.CourseGradeId = this.checkChapter.CourseRate;
this.saveMsg.ShiftSort = newCourseCheckList.map(e => e.Sort).toString();
} else if (this.editType == 2) {
this.saveMsg.Date = this.dateObj.date;
this.saveMsg.StuId = stuInfo.StuId;
this.saveMsg.StuName = stuInfo.StuName;
this.saveMsg.GuestId = stuInfo.GuestId;
this.saveMsg.CourseId = 0;
this.saveMsg.TeacherId = this.saveObj.Tid;
this.saveMsg.ChapterNo = this.saveObj.Ranks;
this.saveMsg.CourseGradeId = this.saveObj.CourseGradeId;
this.saveMsg.ShiftSort = this.saveObj.ShiftSort;
}
console.log(447, this.saveMsg);
SetAdminScrollAppointment(this.saveMsg).then(res => {
if (res.Code == 1) {
this.$q.notify({
message: "预约成功",
position: "top"
});
this.getStu();
if (this.editType == 2) {
this.changeDig(false);
}
this.$emit("success");
}
});
},
//取消预约
cancelSub() {
const msg = {
Date: this.dateObj.date,
TeacherId: this.saveObj.Tid,
StuIds: this.checkStuType2.toString()
};
CancelAppointment(msg).then(res => {
if (res.Code == 1) {
this.$q.notify({
message: "操作成功",
position: "top"
});
this.changeDig(false);
this.$emit("success");
}
});
}
}
};
</script>
<style>
......
src/pages/studyAbroad/subscribe.vue
View file @ 4d58c90d
......@@ -160,7 +160,7 @@
item.RList.length
)
"
@click.stop="showDetail(__item)"
@click.stop="showDetail(__item, item.ClassDate,_item.TeacherId)"
>
<div v-if="viewType == 'day' || item.RList.length == 1">
<div class="itemRow">{{ _item.TeacherName }}</div>
......@@ -211,10 +211,10 @@
><span v-if="__item.ClassType == 3">约课</span></span
>
</div>
<div class="flex no-wrap">
<span class="detailLabel">进度：</span
><span>{{ __item.Ranks }}/{{ __item.TotalPlanNum }}</span>
><span>{{ __item.CompleteProgress>0?__item.CompleteProgress:0 }}%</span>
</div>
<div class="flex no-wrap">
<span class="detailLabel">学员：</span
......@@ -226,21 +226,27 @@
<span class="detailLabel">
预约状态：<span></span
><span v-if="__item.AppointState == 1">待确认</span
><span v-if="__item.AppointState == 2">已确认</span
></span
>
><span v-if="__item.AppointState == 2">已确认</span>
<q-btn
color="accent"
size="xs"
label="确认"
v-if="__item.AppointState == 1"
@click="
confirmSub(item.ClassDate, _item.TeacherId, __item)
"
/>
</span>
</div>
<div class="flex no-wrap">
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最小成班人数：</span
><span>{{ __item.ScrollMinNum }}</span>
</div>
<div class="flex no-wrap">
<div class="flex no-wrap" v-if="__item.ClassType == 3">
<span class="">最大成班人数：</span
><span>{{ __item.ScrollMaxNum }}</span>
</div>
<div>
</div>
<div></div>
</div>
</el-popover>
</div>
......@@ -251,15 +257,20 @@
</q-calendar>
<SubscribeForm
v-model="showForm"
:editType="editType"
:dateObj="dateObj"
:saveObj="saveObj"
:teacherList="TeacherList2"
@success="saveObj={},getData"
/>
</div>
</template>
<script>
import { GetAppointmentPlanStat } from "../../api/studyabroad/subscribe.js";
import {queryChapterTree} from "../../api/course/index";
import {
GetAppointmentPlanStat,
SetSureAppointment
} from "../../api/studyabroad/subscribe.js";
import { date } from "quasar";
import {
getTeacherDropDownList,
......@@ -283,6 +294,7 @@ export default {
}
],
showForm: false,
editType: 1,
selectedDate: "",
msg: {
StartDate: "",
......@@ -346,7 +358,8 @@ export default {
legendList: [],
TeacherList2: [],
events: [],
dateObj: {}
dateObj: {},
saveObj: {}
};
},
components: {
......@@ -493,14 +506,46 @@ export default {
onClickTime2(data) {
console.log(5, data);
this.showForm = true;
this.editType = 1;
this.saveObj = {};
this.dateObj = data.scope.timestamp;
console.log("5.1", this.dateObj);
},
onClickIntervalHeader2(data) {
console.log(6, data);
},
showDetail(data) {
showDetail(data, date,tid) {
console.log(7, data);
this.showForm = true;
this.editType = 2;
this.dateObj.date = date;
this.saveObj = data;
this.saveObj.Tid=tid
},
confirmSub(date, id, item) {
if (item.EnrollNum < item.ScrollMinNum) {
this.$q.notify({
message: `最小开班人数为${item.ScrollMinNum}`,
position: "top",
type: "negative"
});
return;
}
const msg = {
Date: date,
TeacherId: id,
ShiftSort: item.ShiftSort
};
SetSureAppointment(msg).then(res => {
if (res.Code == 1) {
this.$q.notify({
message: "操作成功",
position: "top",
type: "positive"
});
this.getData()
}
});
}
}
};
......
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