Commit 811330fc authored by 黄奎's avatar 黄奎

页面修改

parent 2d9cb5bd
......@@ -49,16 +49,7 @@ export function GetStuAppointmentInfo(data) {
data
})
}
/**
* 后台约课
*/
export function SetAdminScrollAppointment(data) {
return request({
url: '/Scroll/SetAdminScrollAppointment',
method: 'post',
data
})
}
/**
* 后台确认约课
......@@ -133,16 +124,7 @@ export function getCanAppointmentStuList_V2(data) {
})
}
/**
* 新增约课
*/
export function setAdminScrollAppointment_V2(data) {
return request({
url: '/Scroll/SetAdminScrollAppointment_V2',
method: 'post',
data
})
}
/**
* 新增约课
......
......@@ -88,7 +88,7 @@
</el-table-column>
<el-table-column prop="State" label="状态" width="70">
<template slot-scope="scope">
<div v-if="scope.row.State == 1">
<div>
<span class="text-warning" v-if="scope.row.AppointState==1">待确认</span>
<span class="text-info" v-if="scope.row.AppointState==2">待上课</span>
<span class="text-positive" v-if="scope.row.AppointState==3">已上课</span>
......
<template>
<div>
<q-dialog v-model="show" persistent transition-show="scale" transition-hide="scale" @input="changeDig">
<q-card style="width: 800px;max-width:900px;">
<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">
<q-field filled label="日期" stack-label class="col-12">
<template v-slot:control>
<div>{{ dateObj.date }}</div>
</template>
</q-field>
<!-- 详情显示内容 start-->
<div class="col-12" v-if="editType == 2">
<Detail :dateObj="dateObj" :saveObj="saveObj" :auth="auth" :CourseChapterName="CourseChapterName" @success="detailSuccessHandle"
@close="detailCloseHandle" />
</div>
<!-- 详情显示内容 end -->
<q-select filled stack-label use-input option-value="CourseId" option-label="CourseName"
v-model="teaClassMsg.CourseId" ref="CourseId" :options="CourseList" label="课程" :dense="false"
class="col-12" emit-value map-options @filter="filterCourse"
@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>
<select-tree v-show="teaClassMsg.CourseId > 0 && editType == 1" :treeData="chapterList"
v-model="returnString" nodeKey="ChapterId" labelKey="ChapterName" childrenKey="ChildList"
tipText="章节" @getChild="getChapter" class="col-12" ref="selectTree"></select-tree>
<div class="row col-12 q-col-gutter-md">
<q-select v-show="teaClassMsg.CourseId > 0 && editType == 1" filled v-model="teaClassMsg.TeacherId"
option-value="TId" option-label="TeacherName" :options="teacherList" emit-value map-options label="老师"
class="col-6" @input="getCanTeacherTimeList" />
<q-select v-show="
teaClassMsg.CourseId > 0 &&
teaClassMsg.TeacherId &&
teacherTimeList.length > 0 &&
editType == 1
" filled v-model="saveMsg.RoomId" option-value="RoomId" option-label="RoomName"
:options="ClassRoomList" emit-value map-options label="教室" :disable="addStuList.length > 0"
class="col-6">
<template v-slot:selected-item="scope">
<div class="row col-12 flex justify-between"> <span>{{scope.opt.RoomName}}</span><span>{{ scope.opt.SchoolName}}</span></div>
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
<q-item-section>
<q-item-label class="row flex justify-between"> <span>{{scope.opt.RoomName}}</span><span>{{ scope.opt.SchoolName}}</span></q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-field filled 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 v-if="
item.CourseTimeList && item.CourseTimeList.length > 0
">
<div v-for="(_item, _index) in item.CourseTimeList" :key="_index" class="timeItem">
<q-checkbox v-model="courseCheckList" :val="_item">
{{ _item.StartTime }}-{{ _item.EndTime }}
</q-checkbox>
</div>
</div>
<div v-else>
暂无可约课程
</div>
</div>
</div>
<div v-else>
暂无可约课程
</div>
</template>
</q-field>
<div class="row col-12" v-show="
(editType == 1 && checkChapter.ChapterId > 0) ||
(saveObj.ClassType == 3 && saveObj.AppointState == 1)
">
<div class="row col-6">
<q-input filled stack-label v-model="stuMsg_v2.StuName" label="学员姓名" @keyup.enter.native="getStu_V2"
class="col-9" hint="提示:需输入学员姓名查询学员列表" />
<div class="col-3 q-pt-md q-pl-md">
<q-btn size="sm" color="accent" label="查询" @click="getStu_V2" />
</div>
</div>
<div class="row col-6">
<div class="col-9">
<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">
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
未找到相关数据
</q-item-section>
</q-item>
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
<q-item-section>
<div class="flex">
<span>{{ scope.opt.StuName }}</span>
<span v-if="scope.opt.State === 3">(重)</span>
<span class="q-ml-sm">{{
scope.opt.CourseName
}}</span>
</div>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-3 q-pt-md q-pl-md">
<q-btn size="sm" color="accent" label="添加" @click="subscribeCourse" :loading="addLoading"
:disable="!stuInfo.StuId || stuInfo.StuId <= 0" />
</div>
</div>
</div>
<q-field filled label="已约学员" stack-label disable class="col-12"
v-if="editType == 1 && addStuList.length > 0">
<template v-slot:control>
<div v-for="(item, index) in addStuList" :key="index" class="q-mr-md">
{{ item }}
</div>
</template>
</q-field>
</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="changeDig(false)" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import {
GetCanTeacherClassTimeList,
getCanAppointmentStuList_V2,
setAdminScrollAppointment_V2,
getScrollCourseChapterName,
} from "../../../api/studyabroad/subscribe.js";
import {
queryCourseDropdownList,
queryChapterTree
} from "../../../api/course/index";
import {
queryClassRoomList
} from "../../../api/school/index";
import selectTree from "./select-tree";
import Detail from "./detail.vue";
export default {
components: {
selectTree,
Detail
},
model: {
prop: "show",
event: "changeshow"
},
props: {
dateObj: {
type: Object,
default: null
},
saveObj: {
type: Object,
default: null
},
show: {
type: Boolean,
default: false
},
editType: {
type: Number,
default: 1 //1:新增,2详情
},
teacherList: {
type: Array,
default: () => []
},
auth: {
type: Object,
default: () => {
return {
IsEdit: false
};
}
}
},
watch: {
show(val) {
this.addLoading = false;
this.addStuList = [];
if (val) {
this.stuInfo = "";
this.teaClassMsg.CourseId = 0;
this.teaClassMsg.TeacherId = 0;
this.chapterList = [];
this.teacherTimeList = [];
this.courseCheckList = [];
this.stuList = [];
this.allStuList = [];
this.stuMsg_v2.StuName = "";
this.checkChapter = {};
if(this.editType==2&&this.saveObj.ClassType==3){
this.getScrollCourseChapterName()
}
}
}
},
data() {
return {
CourseList: [], //关联课程下拉数据
AllCourseList: [], //所有课程列表
teacherTimeList: [],
teaClassMsg: {
Date: "",
TeacherId: 0,
CourseId: 0
},
stuList: [],
allStuList: [],
stuMsg_v2: {
StuName: "",
NextCourseGradeNo: 0,
CourseGradeId: 0
},
detailObj: {},
detailMsg: {
StuId: 0,
GuestId: 0
},
saveMsg: {
Date: "",
TeacherId: 0,
ShiftSort: "",
StuId: 0,
GuestId: 0,
CourseId: 0,
CourseGradeId: 0,
CourseGradeNo: 0,
RoomId: 0,
},
stuInfo: "",
checkStuList: [],
courseCheckList: [],
addLoading: false,
chapterList: [], //章节列表,
checkChapter: {}, //选择的章节
returnString: [], //章节默认值
addStuList: [], //新增时展示用
ClassRoomList: [], //教室下拉
CourseChapterName:"",
};
},
mounted() {
this.getCourseList();
this.getClassRoomList();
},
methods: {
//获取教室下拉
getClassRoomList() {
queryClassRoomList({}).then(res => {
if (res.Code == 1) {
this.ClassRoomList = res.Data;
}
});
},
//开关弹窗
changeDig(val) {
this.$emit("changeshow", val);
if (!val) {
this.stuList = [];
this.allStuList = [];
}
},
//获取课程
getCourseList() {
queryCourseDropdownList({
IsQPrice: 1,
IsQuerySalePlat: 0,
IsScrollClass: 1
}).then(res => {
if (res.Code == 1) {
this.CourseList = res.Data;
var obj = {
CourseName: "请选择",
CourseId: 0
};
this.CourseList.unshift(obj);
this.AllCourseList = res.Data;
}
});
},
changeCourse() {
this.teaClassMsg.TeacherId = 0;
this.checkChapter = {};
this.checkStuList = [];
this.stuInfo = "";
this.$refs.selectTree.clearData();
},
//筛选课程
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.CourseName.toLowerCase().indexOf(needle) > -1
);
}
});
},
//获取老师的空闲上课时段
getCanTeacherTimeList() {
this.teaClassMsg.Date = this.dateObj.date;
this.courseCheckList = [];
this.stuInfo = "";
if (this.teaClassMsg.TeacherId == 0) return;
GetCanTeacherClassTimeList(this.teaClassMsg).then(res => {
this.teacherTimeList = res.Data;
if (res.Data.length > 0) {
this.saveMsg.RoomId = res.Data[0].RoomId;
} else {
this.saveMsg.RoomId = 0;
}
});
},
//筛选学生
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.StuName.toLowerCase().indexOf(needle) > -1
);
}
});
},
//获取学生列表
getStu_V2() {
// if (!this.stuMsg_v2.StuName) {
// this.$q.notify({
// position: "top",
// message: "请输入学生姓名",
// timeout: 2500
// });
// return;
// }
if (this.editType == 1) {
this.stuMsg_v2.NextCourseGradeNo = this.checkChapter.ChapterGradeNo;
this.stuMsg_v2.CourseGradeId = this.checkChapter.CourseRate;
}
if (this.editType == 2) {
this.stuMsg_v2.NextCourseGradeNo = this.saveObj.Ranks;
this.stuMsg_v2.CourseGradeId = this.saveObj.CourseGradeId;
}
getCanAppointmentStuList_V2(this.stuMsg_v2).then(res => {
this.stuList = JSON.parse(JSON.stringify(res.Data));
this.allStuList = JSON.parse(JSON.stringify(res.Data));
});
},
//获取章节
getChapterTree() {
if (this.teaClassMsg.CourseId == 0) return;
const msg = {
CourseId: this.teaClassMsg.CourseId
};
queryChapterTree(msg).then(res => {
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]);
}
});
},
//章节选择
getChapter(data) {
this.checkStuList = [];
this.stuInfo = "";
this.chapterList.map(e => {
if (e.ChapterId == data) {
this.checkChapter = e;
return;
}
});
this.teaClassMsg.TeacherId = 0;
this.teacherTimeList = [];
},
subscribeCourse() {
if (this.stuInfo.AppointDate) {
if (
new Date(this.dateObj.date).getTime() <
new Date(this.stuInfo.AppointDate).getTime()
) {
this.$q.notify({
message: `${this.stuInfo.StuName},不能预约${this.stuInfo.AppointDate}之前的日期`,
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;
}
}
}
this.saveMsg.Date = this.dateObj.date;
this.saveMsg.StuId = this.stuInfo.StuId;
this.saveMsg.StuName = this.stuInfo.StuName;
this.saveMsg.GuestId = this.stuInfo.GuestId;
this.saveMsg.CourseId = this.teaClassMsg.CourseId;
this.saveMsg.TeacherId = this.teaClassMsg.TeacherId;
this.saveMsg.CourseGradeNo = this.checkChapter.ChapterGradeNo;
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 = this.stuInfo.StuId;
this.saveMsg.StuName = this.stuInfo.StuName;
this.saveMsg.GuestId = this.stuInfo.GuestId;
this.saveMsg.CourseId = 0;
this.saveMsg.TeacherId = this.saveObj.Tid;
this.saveMsg.CourseGradeNo = this.saveObj.Ranks;
this.saveMsg.CourseGradeId = this.saveObj.CourseGradeId;
this.saveMsg.ShiftSort = this.saveObj.ShiftSort;
}
this.addLoading = true;
setAdminScrollAppointment_V2(this.saveMsg)
.then(res => {
this.addLoading = false;
if (res.Code == 1) {
this.$q.notify({
message: "操作成功",
position: "top"
});
if (this.editType == 1) {
this.addStuList.push(this.stuInfo.StuName);
}
if (this.editType == 2) {
this.saveObj.GuestList.push({
GuestName: this.stuInfo.StuName,
AppointmentId: res.Data
});
}
this.stuInfo = "";
this.stuMsg_v2.StuName = "";
this.$emit("success");
}
})
.catch(() => {
this.addLoading = false;
});
},
detailSuccessHandle(val) {
// this.getStu_V2();
this.stuMsg_v2.StuName = "";
this.stuList = [];
this.allStuList = [];
this.$emit("success");
},
detailCloseHandle() {
this.changeDig(false);
this.$emit("success");
},
getScrollCourseChapterName(){
const msg={
CourseId:this.saveObj.CourseId,
CourseGradeId:this.saveObj.CourseGradeId,
CourseGradeNo:this.saveObj.Ranks,
}
getScrollCourseChapterName(msg).then(res=>{
this.CourseChapterName=res.Data
})
}
}
};
</script>
<style>
.q-calendar-daily__day-interval:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__workweek:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__day:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-weekly__head-weekday:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-scheduler__day:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-resource__resource-interval:hover {
background: rgba(0, 0, 255, 0.1);
}
.q-calendar-daily__day:hover {
background: rgba(0, 0, 255, 0.1);
}
</style>
<style>
.upload-assiatant-box .q-uploader__list {
display: none;
}
.upload-assiatant-box .q-uploader {
width: auto;
}
.timeItem {
margin: 10px 0;
}
</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