|
|
<!-- 修改上课 -->
|
|
|
<template>
|
|
|
<el-dialog title='上课记录详情' :visible.sync="open" class="compact" width="1000px" >
|
|
|
<el-row v-loading="loadingClaDetail" class="cla-detail">
|
|
|
<div class="cla-base-info" style="border-bottom-width: 2px;">
|
|
|
<div class="item">
|
|
|
<div class="item-name">校区:</div>
|
|
|
<div class="item-value">{{ claInfo.deptName }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name">所属课程:</div>
|
|
|
<div class="item-value">{{ claCourseInfo.courseName }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name">班级:</div>
|
|
|
<div class="item-value">{{ claInfo.claName }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">上课教练:</div>
|
|
|
<div class="item-value">
|
|
|
<staff-select v-model="form.teacherId" :dept-id="claInfo.departId" placeholder="请选择上课教练" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">上课教室:</div>
|
|
|
<div class="item-value">
|
|
|
<room-select v-model="form.roomId" :dept-id="claInfo.departId" placeholder="请选择上课教室" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">上课日期:</div>
|
|
|
<div class="item-value">
|
|
|
<el-date-picker
|
|
|
v-model="form.claDate"
|
|
|
clearable
|
|
|
size="small"
|
|
|
type="date"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
placeholder="上课日期"
|
|
|
style="width: 135px;"
|
|
|
:picker-options="beginDatePickerOptions"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">
|
|
|
<span>上课时间:</span>
|
|
|
</div>
|
|
|
<div class="item-value">
|
|
|
<el-time-select
|
|
|
v-model="form.startTime"
|
|
|
size="small"
|
|
|
:picker-options="{
|
|
|
start: '08:00',
|
|
|
step: '00:01',
|
|
|
end: '20:00'
|
|
|
}"
|
|
|
style="width: 135px;"
|
|
|
placeholder="上课时间"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">
|
|
|
<span>下课时间:</span>
|
|
|
</div>
|
|
|
<div class="item-value">
|
|
|
<el-time-select
|
|
|
v-model="form.endTime"
|
|
|
size="small"
|
|
|
:picker-options="{
|
|
|
start: '08:00',
|
|
|
step: '00:01',
|
|
|
end: '20:00'
|
|
|
}"
|
|
|
style="width: 135px;"
|
|
|
placeholder="下课时间"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">上课主题:</div>
|
|
|
<div class="item-value">
|
|
|
<el-input v-model="form.classTheme" size="small" placeholder="输入上课主题" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-name required">
|
|
|
<span>备注:</span>
|
|
|
</div>
|
|
|
<div class="item-value">
|
|
|
<el-input v-model="form.memo" size="small" placeholder="备注" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
<el-row :gutter="10" class="mb8" style="margin-top: 10px;">
|
|
|
<span style="color: #999; font-size: 12px; "> * 说明：会员签到的同时系统自动划扣会员卡内次数或金额 ； 先签到，后上课；</span>
|
|
|
</el-row>
|
|
|
<el-table
|
|
|
ref="table"
|
|
|
v-loading="loading"
|
|
|
class="add-cla-time-attend-table"
|
|
|
:height="500"
|
|
|
:data="claStudentList"
|
|
|
border
|
|
|
:header-cell-style="{'text-align': 'center'}"
|
|
|
:cell-style="{'text-align': 'center'}"
|
|
|
>
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
<el-table-column align="center" prop="studentName" label="会员" fixed="left" />
|
|
|
<el-table-column align="center" prop="sex" label="性别" :formatter="sexFormatter" width="50" />
|
|
|
<el-table-column align="center" prop="phone" label="联系电话" width="110"/>
|
|
|
<el-table-column align="center" prop="bookStatus" label="预约状态" :formatter="bookStatusFormatter" width="80" />
|
|
|
<el-table-column align="center" prop="checkIn" label="是否签到" width="190" >
|
|
|
<template slot-scope="scope">
|
|
|
<el-radio-group v-model="scope.row.checkIn" >
|
|
|
<el-radio :label="0">未签到</el-radio>
|
|
|
<el-radio :label="1">已签到</el-radio>
|
|
|
</el-radio-group>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="cardNo" label="会员卡号" width="100" />
|
|
|
<el-table-column align="center" prop="cardTypeName" label="卡项名称" width="100" />
|
|
|
<el-table-column align="center" prop="remainingCount" label="会员卡余次" width="90" />
|
|
|
<el-table-column align="center" prop="remainingTotalFee" label="会员卡余额" width="90" />
|
|
|
<el-table-column align="center" prop="expiryDate" label="会员卡到期日" width="100" />
|
|
|
<el-table-column align="center" prop="chargeType" label="收费方式">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ chargeTypeFormatter(scope.row) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="deductCnt" label="划扣次数" width="80" />
|
|
|
<el-table-column align="center" prop="deductFee" label="划扣金额" width="80" />
|
|
|
|
|
|
<el-table-column align="center" prop="createTime" label="预约时间" width="100" />
|
|
|
<el-table-column align="center" prop="checkInTime" label="签到时间" width="100" />
|
|
|
<el-table-column align="center" prop="countBefore" label="划扣前次数" width="90" >
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.countBefore==null?'-':scope.row.countBefore}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="countAfter" label="划扣后次数" width="90" >
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.countAfter==null?'-':scope.row.countAfter}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="feeBefore" label="划扣前金额" width="90" >
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.feeBefore==null?'-':scope.row.feeBefore}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column align="center" prop="feeAfter" label="划扣后金额" width="90" >
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.feeAfter==null?'-':scope.row.feeAfter}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { selectDictLabel } from '@/utils/commonUtils'
|
|
|
import staffSelect from '@/components/system/staff/staffSelect'
|
|
|
import roomSelect from '@/components/sc/base/roomSelect'
|
|
|
import { allDetailInfoById } from '@/api/school/sc/cla'
|
|
|
import { claTimeInfo as loadClaTimeInfo, } from '@/api/school/sc/cla/claTime'
|
|
|
import moment from 'moment'
|
|
|
import { searchCourseClaStudent } from '@/api/school/sc/cla/index'
|
|
|
export default {
|
|
|
components: {
|
|
|
staffSelect,
|
|
|
roomSelect
|
|
|
},
|
|
|
props: {
|
|
|
claId: {
|
|
|
type: String,
|
|
|
default: undefined
|
|
|
},
|
|
|
// 上课记录
|
|
|
courseTimeId: {
|
|
|
type: String,
|
|
|
default: undefined
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
title: '记上课',
|
|
|
open: false,
|
|
|
loading: false,
|
|
|
loadingClaDetail: false,
|
|
|
// 班级信息
|
|
|
claInfo: {},
|
|
|
// 课程信息
|
|
|
claCourseInfo: {},
|
|
|
// 排课信息
|
|
|
claTimeInfo: {},
|
|
|
form: {
|
|
|
deptId: undefined,
|
|
|
claId: undefined,
|
|
|
claDate: '',
|
|
|
startTime: '',
|
|
|
endTime: '',
|
|
|
teacherId: undefined,
|
|
|
roomId: undefined,
|
|
|
classTheme: undefined
|
|
|
},
|
|
|
beginDatePickerOptions: {
|
|
|
disabledDate(time) {
|
|
|
return moment(time).add(0, 'days').valueOf() > Date.now()
|
|
|
}
|
|
|
},
|
|
|
claStudentList: [],
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 200,
|
|
|
courseTimeId: this.courseTimeId,
|
|
|
effect: true
|
|
|
},
|
|
|
chargeTypeOptions: [],
|
|
|
sexOptions: [],
|
|
|
// 选择上课的会员
|
|
|
chooseStudentCourseIds: [],
|
|
|
// 到课状态
|
|
|
attendStatusOptions: [],
|
|
|
// 每个会员 的到课状态
|
|
|
studentAttendStatusForm: {},
|
|
|
|
|
|
// 班级上课出席列表
|
|
|
chooseBookIds:[],
|
|
|
claTimeAttendList: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
// 已记录出席情况
|
|
|
claTimeAttendMap() {
|
|
|
const claTimeAttendMap = {}
|
|
|
this.claTimeAttendList.forEach(item => {
|
|
|
claTimeAttendMap[item.studentCourseId] = item
|
|
|
})
|
|
|
return claTimeAttendMap
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
open: {
|
|
|
handler(newValue) {
|
|
|
if (newValue === true) {
|
|
|
this.resetData()
|
|
|
this.loadClaAndClaTimeInfo()
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getDictListByDictType('charge_type').then(response => {
|
|
|
this.chargeTypeOptions = response.data
|
|
|
})
|
|
|
this.getDictListByDictType('sys_user_sex').then(response => {
|
|
|
this.sexOptions = response.data
|
|
|
})
|
|
|
this.getDictListByDictType('book_status').then(response => {
|
|
|
this.bookStatusOptions = response.data
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
resetData() {
|
|
|
this.claInfo = {
|
|
|
claName: '',
|
|
|
deptName: '',
|
|
|
departId: undefined
|
|
|
}
|
|
|
this.claCourseInfo = {
|
|
|
courseName: ''
|
|
|
}
|
|
|
this.claTimeInfo = {}
|
|
|
this.claStudentList = []
|
|
|
this.claTimeAttendList = []
|
|
|
this.studentAttendStatusForm = {}
|
|
|
},
|
|
|
// 加载班级 及 已上课信息
|
|
|
loadClaAndClaTimeInfo() {
|
|
|
if (this.courseTimeId) {
|
|
|
this.loadingClaDetail = true
|
|
|
loadClaTimeInfo(this.courseTimeId).then(response => {
|
|
|
this.claTimeInfo = response.data
|
|
|
// 自动设置表单信息
|
|
|
this.autoSetFormByClaTimeInfo()
|
|
|
return allDetailInfoById(this.claId)
|
|
|
}).then(response => {
|
|
|
this.loadingClaDetail = false
|
|
|
this.claInfo = response.data.courseCla
|
|
|
this.claCourseInfo = response.data.course
|
|
|
this.loadCourseClaStudentAndAttendDetail()
|
|
|
}).catch(() => {
|
|
|
this.loadingClaDetail = false
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 自动设置 表单信息
|
|
|
autoSetFormByClaTimeInfo() {
|
|
|
this.form.teacherId = this.claTimeInfo.teacherId
|
|
|
this.form.roomId = this.claTimeInfo.roomId
|
|
|
this.form.claDate = this.claTimeInfo.realClaDate
|
|
|
this.form.startTime = this.claTimeInfo.realStartTime.substr(0, 5)
|
|
|
this.form.endTime = this.claTimeInfo.realEndTime.substr(0, 5)
|
|
|
this.form.memo = this.claTimeInfo.memo
|
|
|
this.form.classTheme = this.claTimeInfo.classTheme
|
|
|
},
|
|
|
// 选择计划排课日期变化
|
|
|
handleClaDateChange(claTimeInfo) {
|
|
|
this.claTimeInfo = claTimeInfo
|
|
|
this.form.startTime = claTimeInfo.startTime.substr(0, 5)
|
|
|
this.form.endTime = claTimeInfo.endTime.substr(0, 5)
|
|
|
this.form.classTheme = claTimeInfo.classTheme
|
|
|
},
|
|
|
sexFormatter(row, column) {
|
|
|
return selectDictLabel(this.sexOptions, row.sex)
|
|
|
},
|
|
|
chargeTypeFormatter(row, column) {
|
|
|
return selectDictLabel(this.chargeTypeOptions, row.chargeType)
|
|
|
},
|
|
|
bookStatusFormatter(row, column) {
|
|
|
return selectDictLabel(this.bookStatusOptions, row.bookStatus)
|
|
|
},
|
|
|
// 班级所有会员,及到课状态
|
|
|
loadCourseClaStudentAndAttendDetail() {
|
|
|
this.loading = true
|
|
|
let claStudentList = []
|
|
|
searchCourseClaStudent({courseTimeId: this.courseTimeId}).then(response => {
|
|
|
claStudentList = response.data
|
|
|
this.total = response.data.total
|
|
|
|
|
|
this.claStudentList = claStudentList
|
|
|
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped src="@/styles/sc/cla/cla-detail.scss"></style>
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
.cla-detail .cla-base-info .item .item-name{
|
|
|
width: 90px;
|
|
|
}
|
|
|
</style>
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
.add-cla-time-attend-table .el-radio-button--mini .el-radio-button__inner {
|
|
|
padding: 7px;
|
|
|
}
|
|
|
</style>
|
