|
@@ -2,22 +2,30 @@
|
|
|
<div class='course-container'>
|
|
|
<div class="left">
|
|
|
<el-form :model="leftFrom"
|
|
|
+ ref='leftFrom'
|
|
|
+ :rules="leftRules"
|
|
|
:inline="true">
|
|
|
- <el-form-item label="合奏班">
|
|
|
- <el-select v-model="leftFrom.all">
|
|
|
- <el-option label="11"
|
|
|
- value='1'></el-option>
|
|
|
+ <el-form-item label="合奏班"
|
|
|
+ prop='all'>
|
|
|
+ <el-select v-model="leftFrom.all"
|
|
|
+ @change="changeMixClass">
|
|
|
+ <el-option v-for="(item,index) in maxClassList"
|
|
|
+ :key='index'
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="排课起始时间">
|
|
|
+ <el-form-item label="排课起始时间"
|
|
|
+ prop="time">
|
|
|
+ <!-- value-format="yyyy-MM-dd" -->
|
|
|
<el-date-picker v-model="leftFrom.time"
|
|
|
align="right"
|
|
|
type="date"
|
|
|
- placeholder="选择日期"
|
|
|
- :picker-options="pickerOptions">
|
|
|
+ placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="排课次数">
|
|
|
+ <el-form-item label="排课次数"
|
|
|
+ prop="num">
|
|
|
<el-input type="number"
|
|
|
v-model="leftFrom.num"></el-input>
|
|
|
</el-form-item>
|
|
@@ -25,10 +33,13 @@
|
|
|
<p>周次循环<span style="margin-left:10px;">上课时间</span></p>
|
|
|
<div class="checkWrap">
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周一"></el-checkbox>
|
|
|
+ <div class="chioseday"
|
|
|
+ v-for="(item,index) in week"
|
|
|
+ :key="index">
|
|
|
+ <el-checkbox :label="index"
|
|
|
+ v-model="item.isCheck">{{item.name}}</el-checkbox>
|
|
|
<el-time-select placeholder="起始"
|
|
|
- v-model="week.Monday.startTime"
|
|
|
+ v-model="item.startTime"
|
|
|
:picker-options="{
|
|
|
start: '06:30',
|
|
|
step: '00:05',
|
|
@@ -37,137 +48,12 @@
|
|
|
</el-time-select>
|
|
|
|
|
|
<el-time-select placeholder="结束"
|
|
|
- v-model="week.Monday.endTime"
|
|
|
+ v-model="item.endTime"
|
|
|
:picker-options="{
|
|
|
start: '08:30',
|
|
|
step: '00:15',
|
|
|
end: '23:30',
|
|
|
- minTime: week.Monday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周二"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Tuesday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Tuesday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Tuesday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周三"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Wednesday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
-
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Wednesday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Monday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周四"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Thursday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
-
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Thursday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Thursday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周五"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Friday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
-
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Friday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Friday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周六"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Saturday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
-
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Saturday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Saturday.startTime
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
- </div>
|
|
|
- <div class="chioseday">
|
|
|
- <el-checkbox label="周日"></el-checkbox>
|
|
|
- <el-time-select placeholder="起始"
|
|
|
- v-model="week.Sunday.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '06:30',
|
|
|
- step: '00:05',
|
|
|
- end: '18:30'
|
|
|
- }">
|
|
|
- </el-time-select>
|
|
|
-
|
|
|
- <el-time-select placeholder="结束"
|
|
|
- v-model="week.Sunday.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '08:30',
|
|
|
- step: '00:15',
|
|
|
- end: '23:30',
|
|
|
- minTime: week.Sunday.startTime
|
|
|
+ minTime: item.startTime
|
|
|
}">
|
|
|
</el-time-select>
|
|
|
</div>
|
|
@@ -177,22 +63,53 @@
|
|
|
</div>
|
|
|
<div class="btnWrap">
|
|
|
<div class="closeBtn">取消排课</div>
|
|
|
- <div class="okBtn">一件排课</div>
|
|
|
+ <div class="okBtn"
|
|
|
+ @click="classCard">一件排课</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <el-calendar>
|
|
|
- <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
|
|
|
- <template slot="dateCell"
|
|
|
- slot-scope="{date, data}">
|
|
|
- <p :class="data.isSelected ? 'is-selected' : ''">
|
|
|
- {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- </el-calendar>
|
|
|
- <div class="btnWrap">
|
|
|
+ <el-table :data='tableList'>
|
|
|
+ <el-table-column label="课次">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ scope.$index+1 }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="dateString"
|
|
|
+ label="日期"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="week"
|
|
|
+ label="星期"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="type"
|
|
|
+ label="课程类型"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name"
|
|
|
+ label="课程名称"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="classTime"
|
|
|
+ label="上课时间"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作"
|
|
|
+ width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-button type="text">展开</el-button>
|
|
|
+ <el-button type="text">修改</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="btnWrap"
|
|
|
+ style="margin-top:40px;">
|
|
|
<div class="nextBtn">下一步</div>
|
|
|
<div class="okBtn">确定</div>
|
|
|
</div>
|
|
@@ -200,7 +117,16 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { getAllClass, getAllSignClass } from '@/api/buildTeam'
|
|
|
+import axios from 'axios'
|
|
|
+import qs from 'qs'
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ teamid: {
|
|
|
+ type: String,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
leftFrom: {
|
|
@@ -208,65 +134,197 @@ export default {
|
|
|
time: '',
|
|
|
num: ''
|
|
|
},
|
|
|
- pickerOptions: {
|
|
|
- disabledDate (time) {
|
|
|
- return time.getTime() > Date.now();
|
|
|
- },
|
|
|
- shortcuts: [{
|
|
|
- text: '今天',
|
|
|
- onClick (picker) {
|
|
|
- picker.$emit('pick', new Date());
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '昨天',
|
|
|
- onClick (picker) {
|
|
|
- const date = new Date();
|
|
|
- date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
- picker.$emit('pick', date);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '一周前',
|
|
|
- onClick (picker) {
|
|
|
- const date = new Date();
|
|
|
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit('pick', date);
|
|
|
- }
|
|
|
- }]
|
|
|
- },
|
|
|
+ tableList: [],
|
|
|
checkList: [],
|
|
|
- week: {
|
|
|
- Monday: {
|
|
|
+ week: [
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期日'
|
|
|
},
|
|
|
- Tuesday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期一'
|
|
|
},
|
|
|
- Wednesday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期二'
|
|
|
},
|
|
|
- Thursday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期三'
|
|
|
},
|
|
|
- Friday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期四'
|
|
|
},
|
|
|
- Saturday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期五'
|
|
|
},
|
|
|
- Sunday: {
|
|
|
+ {
|
|
|
startTime: '',
|
|
|
- endTime: ''
|
|
|
+ endTime: '',
|
|
|
+ isCheck: false,
|
|
|
+ name: '星期六'
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ weekDay: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
|
|
+ maxClassList: [], // 所有的合奏班
|
|
|
+ activeSingleList: [], // 合奏班下的所有单技班
|
|
|
+ isholiday: false,
|
|
|
+ classCardList: [], //这个是传给后台的真正数据集合
|
|
|
+ allChioseDate: [], // 记录所有准备排课的日期
|
|
|
+ holidayList: [],
|
|
|
+ leftRules: {
|
|
|
+ all: [{ required: true, message: '请输选择合奏班', trigger: 'blur' }],
|
|
|
+ time: [{ required: true, message: '请选择排课时间', trigger: 'blur' }],
|
|
|
+ num: [{ required: true, message: '请输入排课次数', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // 根据乐团id 查询 此乐团所有的合奏班
|
|
|
+ getAllClass({ musicGroupId: this.teamid }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.maxClassList = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // getHolidays({ d: '20191016' }).then(res => {
|
|
|
+
|
|
|
+ // })
|
|
|
+ let year = new Date().getFullYear();
|
|
|
+ axios.post('/jiari/', qs.stringify({ d: year })).then(res => {
|
|
|
+ this.holidayList = Object.keys(res.data[year])
|
|
|
+ // this.holidayList = res.data[year]
|
|
|
+ // console.log(this.holidayList)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ classCard () {
|
|
|
+ let flag = false
|
|
|
+ this.$refs['leftFrom'].validate(val => {
|
|
|
+ if (val) {
|
|
|
+ flag = true
|
|
|
}
|
|
|
- },
|
|
|
- isholiday: false
|
|
|
+ })
|
|
|
+ if (!flag) {
|
|
|
+ this.$message.error('请填写必要参数在进行排课')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let classCount = parseInt(this.leftFrom.num);
|
|
|
+ let date = this.leftFrom.time;
|
|
|
+ let startWeekday = this.leftFrom.time.getDay();
|
|
|
+ // 第一次循环把所有要排的时间记录下来 请求接口 判断是否节假日
|
|
|
+ while (classCount && classCount > 0) {
|
|
|
+
|
|
|
+ for (let i in this.checkList) {
|
|
|
+ let num; // 下次上课上几天后
|
|
|
+ this.checkList[i] - date.getDay() >= 0 ? num = this.checkList[i] : num = this.checkList[i] - date.getDay() + 7
|
|
|
+ let dataStr = this.getThinkDate(date, num);
|
|
|
+ let monthDay = this.getThinkDate(date, num, 2)
|
|
|
+ if (this.isholiday) {
|
|
|
+ if (this.holidayList.indexOf(monthDay) != -1) {
|
|
|
+ // 这里说明有节假日
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let className;
|
|
|
+ this.maxClassList.map(item => {
|
|
|
+ if (item.id == this.leftFrom.all) {
|
|
|
+ className = item.name;
|
|
|
+ return item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 排的是合奏班
|
|
|
+ this.tableList.push({
|
|
|
+ 'dateString': dataStr,
|
|
|
+ 'week': this.week[this.checkList[i]].name,
|
|
|
+ 'type': 'SINGLE',
|
|
|
+ 'id': this.leftFrom.all,
|
|
|
+ date,
|
|
|
+ 'name': className,
|
|
|
+ 'classTime': this.week[this.checkList[i]].startTime + '-' + this.week[this.checkList[i]].endTime
|
|
|
+ })
|
|
|
+ // 这里我排单技课
|
|
|
+ for (let j in this.activeSingleList) {
|
|
|
+ this.classCardList.push({
|
|
|
+ 'classDate': dataStr,
|
|
|
+ 'classGroupId': this.activeSingleList[j].id,
|
|
|
+ 'startClassTime': this.week[this.checkList[i]].startTime,
|
|
|
+ 'endClassTime': this.week[this.checkList[i]].endTime,
|
|
|
+ 'type': 'SINGLE',
|
|
|
+ 'mixid': this.activeSingleList[j].mixid
|
|
|
+ })
|
|
|
+ }
|
|
|
+ classCount--
|
|
|
+ if (classCount == 0) break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(this.tableList)
|
|
|
+ // 清除现在所选的值
|
|
|
+ this.$refs['leftFrom'].resetFields();
|
|
|
+ this.week = this.$options.data().week;
|
|
|
+ this.checkList = [];
|
|
|
+ },
|
|
|
+ chioseWeek (val) {
|
|
|
+ },
|
|
|
+ getThinkDate (date, num, type = 1) {
|
|
|
+
|
|
|
+ let Stamp = date;
|
|
|
+ Stamp.setDate(date.getDate() + num) // 获取当前月数的第几天
|
|
|
+ // console.log(date.getMonth() + 1)
|
|
|
+ // console.log(Stamp.getMonth() + 1)
|
|
|
+ var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
|
|
|
+ var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
|
|
+ var mvar = '';
|
|
|
+ if (month < 10) {
|
|
|
+ mvar = '0' + month;
|
|
|
+ } else {
|
|
|
+ mvar = month + '';
|
|
|
+ }
|
|
|
+ var day = Stamp.getDate();
|
|
|
+ var dvar = '';
|
|
|
+ if (day < 10) {
|
|
|
+ dvar = '0' + day;
|
|
|
+ } else {
|
|
|
+ dvar = day + '';
|
|
|
+ }
|
|
|
+ if (type == 2) {
|
|
|
+ return mvar + dvar;
|
|
|
+ } else {
|
|
|
+ return year + "-" + mvar + '-' + dvar;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ changeMixClass (val) {
|
|
|
+ // 根据合奏班id获取合奏班下的所有单技班
|
|
|
+ this.activeSingleList = [];
|
|
|
+ getAllSignClass({ musicGroupId: this.teamid, mixClassGroupId: val }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.activeSingleList = res.data.map(item => {
|
|
|
+ item.mixid = val
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
}
|
|
|
</script>
|
|
@@ -278,8 +336,8 @@ export default {
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
.left {
|
|
|
- width: 300px;
|
|
|
- min-width: 300px;
|
|
|
+ width: 330px;
|
|
|
+ min-width: 330px;
|
|
|
margin-right: 90px;
|
|
|
.chioseday {
|
|
|
margin-top: 20px;
|