|
|
@@ -1,5 +1,363 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- 训练规划
|
|
|
+ <el-alert
|
|
|
+ title="训练规划"
|
|
|
+ :closable="false"
|
|
|
+ class="alert marginBtm22"
|
|
|
+ type="info"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <div class="alerTitle">
|
|
|
+ <p>
|
|
|
+ 师资安排
|
|
|
+ <span style="color: red; font-weight: bold"
|
|
|
+ >该乐团声部课剩余 2 课时、合奏课 4 课时未进行教学规划</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <el-button type="text" @click="addPlan">+新增训练规划</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
+ <save-form
|
|
|
+ :inline="true"
|
|
|
+ class="searchForm"
|
|
|
+ save-key="teamTrainPlan"
|
|
|
+ ref="searchForm"
|
|
|
+ @submit="search"
|
|
|
+ @reset="onReSet"
|
|
|
+ :model.sync="searchForm"
|
|
|
+ >
|
|
|
+ <el-form-item prop="year" label="年份">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 180px!important"
|
|
|
+ v-model="searchForm.year"
|
|
|
+ type="year"
|
|
|
+ value-format="yyyy"
|
|
|
+ placeholder="选择年"
|
|
|
+ :clearable="false"
|
|
|
+ @change="changeYear"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="term" label="学期">
|
|
|
+ <el-select
|
|
|
+ :disabled="!searchForm.year"
|
|
|
+ class="multiple"
|
|
|
+ filterable
|
|
|
+ style="width: 180px !important"
|
|
|
+ v-model.trim="searchForm.term"
|
|
|
+ placeholder="请选择学期"
|
|
|
+ @change="changeTerm"
|
|
|
+ >
|
|
|
+ <el-option value="0" label="上学期"></el-option>
|
|
|
+ <el-option value="1" label="下学期"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="classGroupId" label="班级">
|
|
|
+ <el-select
|
|
|
+ :disabled="!searchForm.term || !searchForm.year"
|
|
|
+ v-model.trim="searchForm.classGroupId"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择班级"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in classList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="课程类型"
|
|
|
+ prop="courseType"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请选择课程类型', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ :disabled="
|
|
|
+ !searchForm.term || !searchForm.year || !searchForm.classGroupId
|
|
|
+ "
|
|
|
+ style="width: 180px !important"
|
|
|
+ class="multiple"
|
|
|
+ v-model.trim="searchForm.courseType"
|
|
|
+ filterable
|
|
|
+ placeholder="课程类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in courseTypeList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </save-form>
|
|
|
+ <div class="timerWrap">
|
|
|
+ <div class="timerList">
|
|
|
+ <el-timeline>
|
|
|
+ <!-- timestamp="2018/4/12" :timestamp="item.timestamp" -->
|
|
|
+ <!-- {timer:time,index:`第${index+1}次训练`,courseType:filterCourseType[val],timestamp:timestamp} -->
|
|
|
+ <el-timeline-item v-for="item in planList"
|
|
|
+ :key="item.timestamp"
|
|
|
+ placement="top"
|
|
|
+ :hide-timestamp="true"
|
|
|
+ >
|
|
|
+ {{item.index}}
|
|
|
+ <div class="timeline">
|
|
|
+ <h4 class="time">{{item.timer}}</h4>
|
|
|
+ <p class="cuorseType">{{item.courseType}}</p>
|
|
|
+ <p class="concat">{{item.plan}}</p>
|
|
|
+ <el-button class="button" :disabled='!item.plan' type="text">修改</el-button>
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="planTitle" :visible.sync="planVisible" width="1100px" v-if="planVisible">
|
|
|
+ <addplan :form="{...searchForm}" :courseTypeList='courseTypeList' :classList="classList"/>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script>
|
|
|
+import { getMusicGroupAllClass } from "@/api/buildTeam";
|
|
|
+import { getCourseType, getPlanCourseNum,getMusicGroupTrainPlan } from "./api";
|
|
|
+import { filterCourseType } from "@/constant/index";
|
|
|
+import addplan from './modals/addPlan'
|
|
|
+export default {
|
|
|
+ components:{addplan},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchForm: {
|
|
|
+ year: "",
|
|
|
+ classGroupId: "",
|
|
|
+ term: "",
|
|
|
+ courseScheduleType: "",
|
|
|
+ musicGroupId: "",
|
|
|
+ courseType: "",
|
|
|
+ },
|
|
|
+ classList: [],
|
|
|
+ courseTypeList: [],
|
|
|
+ planList:[],
|
|
|
+ planTitle:'',
|
|
|
+ planVisible:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let date = new Date();
|
|
|
+ this.searchForm.year = String(date.getFullYear());
|
|
|
+ // console.log('year',date.getFullYear())
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ if (month > 3 && month < 8) {
|
|
|
+ this.searchForm.term = "0";
|
|
|
+ } else {
|
|
|
+ this.searchForm.term = "1";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.teamid = this.$route.query.id;
|
|
|
+ this.getMusicClass();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search() {},
|
|
|
+ onReSet() {},
|
|
|
+ getMusicClass() {
|
|
|
+ getMusicGroupAllClass({ musicGroupId: this.teamid }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.classList = res.data;
|
|
|
+ if (this.classList.length < 1) {
|
|
|
+ this.$message.error("当前乐团暂无班级");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.searchForm.classGroupId = this.classList[0].id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getCourseList(obj) {
|
|
|
+ try {
|
|
|
+ this.searchForm.courseType = "";
|
|
|
+ const res = await getCourseType(obj);
|
|
|
+ if (!res.data || res.data.length <= 0) {
|
|
|
+ this.$message.error("当前学期暂无课程类型");
|
|
|
+ } else {
|
|
|
+ this.courseTypeList = [];
|
|
|
+ res.data.forEach((course) => {
|
|
|
+ if (filterCourseType[course]) {
|
|
|
+ this.courseTypeList.push({
|
|
|
+ label: filterCourseType[course],
|
|
|
+ value: course,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.searchForm.courseType = this.courseTypeList[0].value;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeYear(val) {
|
|
|
+ if (val) {
|
|
|
+ if (this.searchForm.classGroupId && this.searchForm.term) {
|
|
|
+ let obj = {
|
|
|
+ classGroupId: this.searchForm.classGroupId,
|
|
|
+ musicGroupId: this.teamid,
|
|
|
+ term: this.searchForm.term,
|
|
|
+ year: val,
|
|
|
+ };
|
|
|
+ this.getCourseList(obj);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.searchForm.courseType = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTerm(val) {
|
|
|
+ if (val) {
|
|
|
+ if (this.searchForm.classGroupId && this.searchForm.year) {
|
|
|
+ let obj = {
|
|
|
+ classGroupId: this.searchForm.classGroupId,
|
|
|
+ musicGroupId: this.teamid,
|
|
|
+ term: val,
|
|
|
+ year: this.searchForm.year,
|
|
|
+ };
|
|
|
+ this.getCourseList(obj);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.searchForm.courseType = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addPlan(){
|
|
|
+ this.planTitle = '新增训练规划'
|
|
|
+ this.planVisible = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "searchForm.classGroupId"(val) {
|
|
|
+ if (val) {
|
|
|
+ if (this.searchForm.year && this.searchForm.term) {
|
|
|
+ let obj = {
|
|
|
+ classGroupId: val,
|
|
|
+ musicGroupId: this.teamid,
|
|
|
+ term: this.searchForm.term,
|
|
|
+ year: this.searchForm.year,
|
|
|
+ };
|
|
|
+ this.getCourseList(obj);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.searchForm.courseType = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "searchForm.courseType": {
|
|
|
+ immediate: true,
|
|
|
+ async handler(val) {
|
|
|
+ if (
|
|
|
+ val &&
|
|
|
+ this.teamid &&
|
|
|
+ this.searchForm.term &&
|
|
|
+ this.searchForm.year &&
|
|
|
+ this.searchForm.classGroupId
|
|
|
+ ) {
|
|
|
+ // 请求列表接口
|
|
|
+
|
|
|
+ try {
|
|
|
+ // const res = await getPlanCourseNum({
|
|
|
+ // classGroupId: this.searchForm.classGroupId,
|
|
|
+ // musicGroupId: this.teamid,
|
|
|
+ // term: this.searchForm.term,
|
|
|
+ // year: this.searchForm.year,
|
|
|
+ // courseScheduleType:val
|
|
|
+ // });
|
|
|
+ const res2 = await getMusicGroupTrainPlan({
|
|
|
+ classGroupId: this.searchForm.classGroupId,
|
|
|
+ musicGroupId: this.teamid,
|
|
|
+ term: this.searchForm.term,
|
|
|
+ year: this.searchForm.year,
|
|
|
+ courseScheduleType:val
|
|
|
+ })
|
|
|
+ let dayjs = this.$helpers.dayjs
|
|
|
+ let timestamp;
|
|
|
+ this.planList = res2.data.classDates.map((time,index)=>{
|
|
|
+ let dayStr = time.substring(0, 19)
|
|
|
+ timestamp = dayjs(dayStr).valueOf()
|
|
|
+ return {timer:time,index:`第${index+1}次训练`,courseType:filterCourseType[val],timestamp:timestamp}
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.marginBtm22 {
|
|
|
+ margin-bottom: 22px;
|
|
|
+}
|
|
|
+.timerWrap {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // .topDot {
|
|
|
+ // width: 30px;
|
|
|
+ // height: 30px;
|
|
|
+ // background-color: red;
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // left: 50%;
|
|
|
+ // margin-left: -15px;
|
|
|
+ // }
|
|
|
+ // .bottomDot {
|
|
|
+ // position: absolute;
|
|
|
+ // width: 30px;
|
|
|
+ // height: 30px;
|
|
|
+ // background-color: blue;
|
|
|
+ // bottom: 0;
|
|
|
+ // left: 50%;
|
|
|
+ // margin-left: -15px;
|
|
|
+ // }
|
|
|
+ .timerList {
|
|
|
+ padding: 30px 16px;
|
|
|
+ overflow: auto;
|
|
|
+ height: 300px;
|
|
|
+ .timeline {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .time {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .cuorseType {
|
|
|
+ width: 120px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .concat {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.alerTitle {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ .el-button {
|
|
|
+ padding: 0 20px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-alert__content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.searchForm {
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+</style>
|
mo