yanghao
/
yunshengtai-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 Commits
2 Branches
0 Tags
34 MiB
 
 
 
 
 
Tree: 7a1ebfa537
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7a1ebfa537'
${ noResults }
yunshengtai-admin/src/views/course/index.vue

544 lines
19 KiB
Raw Blame History

<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<el-input
v-model="query.courseName"
clearable placeholder="输入搜索内容"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="crud.toQuery" />
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
<el-form-item label="课程模本" prop="modelId">
<el-select v-model="form.modelId">
<el-option v-for="item in modelList"
:key="item.id"
:label="item.courseName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="主讲老师" prop="masters">
<el-select v-model="form.masters" multiple>
<el-option v-for="item in masterList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="课程时间" prop="courseEndTime">
<el-date-picker
v-model="form.courseStartTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择课程开始时间"
:picker-options="courseStart"
@change="courseTimeChange">
</el-date-picker>
<span>~</span>
<el-date-picker
v-model="form.courseEndTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择课程结束时间"
:picker-options="courseEnd"
@change="courseTimeChange">
</el-date-picker>
</el-form-item>
<el-form-item label="签到时间" prop="signEndTime">
<el-date-picker
v-model="form.signStartTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择报名开始时间"
:picker-options="signStart">
</el-date-picker>
<span>~</span>
<el-date-picker
v-model="form.signEndTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择报名结束时间"
:picker-options="signEnd">
</el-date-picker>
</el-form-item>
<el-form-item label="报名时间" prop="enterEndTime">
<el-date-picker
v-model="form.enterStartTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择报名开始时间"
:picker-options="enterStart">
</el-date-picker>
<span>~</span>
<el-date-picker
v-model="form.enterEndTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择报名结束时间"
:picker-options="enterEnd">
</el-date-picker>
</el-form-item>
<el-form-item label="座位安排">
<el-radio-group v-model="form.seatArrange">
<el-radio :label="1">线上安排</el-radio>
<el-radio :label="2">签到安排</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="开课地点" prop="coursePlace">
<el-input v-model="form.coursePlace" />
</el-form-item>
<el-form-item label="开始详细地点" prop="detailedAddress" >
<el-input v-model="form.detailedAddress" />
</el-form-item>
<el-form-item label="报名人数" prop="courseEnterPerson">
<el-input v-model="form.courseEnterPerson" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
maxlength="6"/>
</el-form-item>
<!-- <el-form-item label="收费类型" prop="chargeType">
<el-radio-group v-model="form.chargeType">
<el-radio :label="0">免费</el-radio>
<el-radio :label="1">收费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="课程费用" prop="courseCharge" v-if="form.chargeType == 1">
<el-input v-model="form.courseCharge" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
maxlength="6" />
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="error" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="submit">确认</el-button>
<!-- <el-button type="warning" @click="againSubmit">重新发布</el-button> -->
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column v-if="columns.visible('id')" prop="id" label="id" width="75"/>
<el-table-column v-if="columns.visible('courseName')" prop="courseName" label="课程名称"/>
<el-table-column v-if="columns.visible('categoryName')" prop="categoryName" label="分类名称" />
<el-table-column v-if="columns.visible('courseIntroduce')" prop="courseIntroduce" label="课程简介" :show-overflow-tooltip="true"/>
<el-table-column prop="courseState" label="课程状态">
<template slot-scope="scope">
<span>{{scope.row.courseState == 1 ? '进行中' : scope.row.courseState == 2 ? '已结束' : '未开始' }}</span>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('courseStartTime')" prop="courseStartTime" label="课程时间" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.courseStartTime)}} ~ {{parseTime(scope.row.courseEndTime)}}</span>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('signStartTime')" label="签到时间" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.signStartTime) }} ~ {{ parseTime(scope.row.signEndTime) }}</span>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('enterStartTime')" label="报名开始时间" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.enterStartTime) }} ~ {{ parseTime(scope.row.enterEndTime) }}</span>
</template>
</el-table-column>
<el-table-column ref="table" prop="qrcodePath" label="课程二维码">
<template slot-scope="scope">
<a :href="scope.row.qrcodePath" style="color: #42b983" target="_blank">
<img :src="scope.row.qrcodePath" alt="点击打开" style="width:38px;height:38px;border-radius:4px;">
</a>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('coursePlace')" prop="coursePlace" label="开课地点"/>
<el-table-column v-if="columns.visible('courseEnterPerson')" prop="courseEnterPerson" label="报名人数" />
<el-table-column v-if="columns.visible('courseCharge')" prop="courseCharge" label="费用" />
<el-table-column v-permission="['admin','cyCourse:del']" label="操作" width="260px" align="center">
<template slot-scope="scope">
<el-button type="warning" size="mini" @click="createSeat(scope.row)" v-if="scope.row.seatArrange == 2">生成座位</el-button>
<udOperation
:data="scope.row"
:permission="permission"
/>
<el-button type="primary" icon="el-icon-view" size="mini" @click="showDetail(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!-- 课程详情弹框 -->
<el-dialog title="课程详情" :visible.sync="detailDialog" width="80%">
<div class="detail-box">
<el-row>
<el-col :span="12">
<span>课程名称：</span>
<span>{{detail.courseName}}</span>
</el-col>
<el-col :span="12" >
<span>课程分类：</span>
<span>{{detail.categoryName}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<span>课程时间：</span>
<span>{{detail.courseStartTime}}~{{detail.courseEndTime}}</span>
</el-col>
<el-col :span="12">
<span>课程地点：</span>
<span>{{detail.coursePlace}}</span>
</el-col>
</el-row>
</div>
<div class="title-w">报名信息 已签到（{{detail.signedNum}}）/ 报名数（{{detail.realEnterPerson}}）</div>
<div class="sign-up-table">
<el-table :data="detail.cyCourseMemberVos" size="small" style="width: 100%;">
<el-table-column label="会员姓名" prop="memberName"></el-table-column>
<el-table-column label="手机号" prop="phone"></el-table-column>
<el-table-column label="是否签到" prop="memberName">
<template slot-scope="scope">
<span style="" v-if="scope.row.signState == 0">未签到</span>
<span style="color:green" v-else>已签到</span>
</template>
</el-table-column>
<el-table-column label="服务老师" prop="sellerName"></el-table-column>
</el-table>
</div>
</el-dialog>
<el-dialog title="生成座位" :close-on-click-modal="false" :visible.sync="showCreateSeat" width="500px">
<el-form v-model="seatForm">
<el-form-item label="总桌数" prop="rowNum">
<el-input v-model="seatForm.rowNum" type="number" placeholder="请输入会场总桌数" />
</el-form-item>
<el-form-item label="每桌人数" prop="colNum">
<el-input v-model="seatForm.colNum" type="number" placeholder="请输入每桌人数" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelSubmit">取消</el-button>
<el-button type="primary" @click="submitSetSeat">确认</el-button>
</div>
</el-dialog>
<!--分页组件-->
<pagination />
</div>
</div>
</template>
<script>
import crudCyCourse from '@/api/cyCourse'
import crudCourseMaster from "@/api/CourseMaster";
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import picUpload from '@/components/pic-upload'
import MaterialList from "@/components/material"
import { initData } from '@/api/data'
import { parseTime } from '@/utils/index'
// crud交由presenter持有
const defaultCrud = CRUD({
title: '课程模块',
url: 'api/cyCourse',
sort: 'id,desc',
isModel:0,
crudMethod: { ...crudCyCourse }
})
const defaultForm = {
id: null,
modelId:'',
masters:[],
categoryIds: null,
level:null,
courseName: null,
categoryName: null,
courseIntroduce: null,
courseStartTime: null,
courseEndTime: null,
signStartTime: null,
signEndTime: null,
enterStartTime: null,
enterEndTime: null,
coursePlace: null,
courseEnterPerson: null,
seatArrange: 1,
chargeType: 0,
courseCharge: null,
createTime: null,
updateTime: null,
deleted: null,
createUser: null,
updateUser: null,
imageInput: '',
imageArr: [],
courseScheduleList:[],
}
export default {
name: 'CyCourse',
components: {picUpload, pagination, crudOperation, rrOperation, udOperation ,MaterialList},
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() {
return {
courseTime:null,
signTime:null,
permission: {
add: ['admin', 'cyCourse:add'],
edit: ['admin', 'cyCourse:edit'],
view: ['admin', 'cyCourse:view'],
del: ['admin', 'cyCourse:del']
},
categoryList: [],
rules: {
modelId: [
{ required: true, message: '请选择课程模板', trigger: 'blur' }
],
masters: [
{ required: true, message: '请选择授课老师', trigger: 'blur' }
],
courseEndTime: [
{ required: true, message: '课程时间不能为空', trigger: 'blur' }
],
signStartTime: [
{ required: true, message: '签到开始时间不能为空', trigger: 'blur' }
],
signEndTime: [
{ required: true, message: '签到结束时间不能为空', trigger: 'blur' }
],
enterEndTime: [
{ required: true, message: '报名结束时间不能为空', trigger: 'blur' }
],
courseEnterPerson: [
{ required: true, message: '课程报名人数不能为空', trigger: 'blur' }
],
coursePlace: [
{ required: true, message: '请填写开课地点', trigger: 'blur' }
],
detailedAddress: [
{ required: true, message: '请填写开课详细地点', trigger: 'blur' }
],
courseCharge: [
// { required: true, message: '课程费用不能为空', trigger: 'blur' }
]
},
courseStart: {
disabledDate: time => {
const endDateVal = new Date(this.form.courseEndTime).getTime()
if (endDateVal) {
return time.getTime() > endDateVal - 0
}
}
},
courseEnd: {
disabledDate: time => {
const beginDateVal = new Date(this.form.courseStartTime).getTime()
if (beginDateVal) {
return time.getTime() < beginDateVal - 0
}
}
},
signStart: {
disabledDate: time => {
const endDateVal = new Date(this.form.signEndTime).getTime()
if (endDateVal) {
return time.getTime() > endDateVal - 0
}
}
},
signEnd: {
disabledDate: time => {
const beginDateVal = new Date(this.form.signStartTime).getTime()
if (beginDateVal) {
return time.getTime() < beginDateVal - 86400000
}
}
},
enterStart: {
disabledDate: time => {
const endDateVal = new Date(this.form.enterEndTime).getTime()
if (endDateVal) {
return time.getTime() > endDateVal - 0
}
}
},
enterEnd: {
disabledDate: time => {
const beginDateVal = new Date(this.form.enterStartTime).getTime()
if (beginDateVal) {
return time.getTime() < beginDateVal - 0
}
}
},
detailDialog: false,
detail: {},
signUpData: [],
masterList: [],
showCreateSeat: false,
seatForm: {
rowNum: '',
colNum: '',
courseId: ''
},
modelList: []
}
},
watch: {
},
created(){
this.getCategory()
this.getCourseManage()
},
mounted(){
console.log(crudCourseMaster)
this.$http('api/CourseMaster','get').then((res) => {
this.masterList = res.content
})
},
methods: {
getCourseManage(){
crudCyCourse.getCourseManage(1).then((res) => {
this.modelList = res.content
})
},
createSeat(item){
this.seatForm.courseId = item.id;
this.seatForm.rowNum = item.tables;
this.seatForm.colNum = item.numOfTables;
this.showCreateSeat = true;
},
submitSetSeat(){
let data = {
colNum: this.seatForm.colNum,
rowNum: this.seatForm.rowNum,
courseId: this.seatForm.courseId,
}
crudCyCourse.courseSeat(this.seatForm).then((res)=>{
this.$message({
type:'success',
message:'操作成功！'
}).catch((res)=>{
console.log(res)
})
})
},
cancelSubmit(){
this.showCreateSeat = false;
this.seatForm = {
rowNum:'',
colNum:'',
courseId:'',
}
},
handleChange(value){
console.log(value)
// this.form.categoryId = value;
},
// 获取数据前设置好接口地址
[CRUD.HOOK.beforeRefresh]() {
return true
}, // 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
},
// toQuery(){
// console.log(this.crud)
// },
getCategory(){
initData('/api/CourseCategory',this.getQueryParams()).then((res)=>{
// console.log(res)
res.content.forEach((item)=>{
item.label = item.categoryName
item.value = item.id
item.children = item.categoryList
item.categoryList.forEach((child)=>{
child.label = child.categoryName
child.value = child.id
child.children = child.categoryList
})
})
this.categoryList = res.content
})
},
getQueryParams: function() {
return {
page: 0,
size: 200,
sort: ['id,desc'],
}
},
courseTimeChange(){
this.form.courseScheduleList = [];
if(this.form.courseStartTime && this.form.courseEndTime){
var day1 = new Date(this.form.courseStartTime)
var day2 = new Date(this.form.courseEndTime)
var num = (day2 - day1) / (1000 * 60 * 60 * 24) + 1 ;
for(let i = 0; i < num; i++){
let date = parseTime(day1.getTime()+(24*60*60*1000*i));
this.form.courseScheduleList.push({day:i+1,courseDate:date, courseContent:''})
}
}
// console.log(this.form.courseList)
},
submit(){
this.form.imageArr = [this.form.imageInput]
this.form.isModel = 0
this.crud.submitCU()
},
againSubmit(){
this.form.imageArr = [this.form.imageInput];
this.form.id = null;
this.form.courseState = null;
crudCyCourse.add(this.form).then((res)=>{
this.$message({
type:'success',
message:'操作成功！'
})
this.crud.status.cu = 0;
}).catch((res)=>{
console.log(res)
})
},
showDetail(row){
this.detail = row;
console.log(this.detail)
this.detailDialog = true;
},
}
}
</script>
<style scoped>
.table-img {
display: inline-block;
text-align: center;
background: #ccc;
color: #fff;
white-space: nowrap;
position: relative;
overflow: hidden;
vertical-align: middle;
width: 32px;
height: 32px;
line-height: 32px;
}
.detail-box{
width: 100%;
font-size: 16px;
padding: 24px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
border-radius: 12px;
}
.el-row{
margin: 24px 0;
}
.title-w{
font-size:19px;
font-weight: bold;
margin: 32px 0;
color: #000;
}
</style>