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.
258 lines
10 KiB
258 lines
10 KiB
<template>
|
|
<div class="container" style="padding: 30px">
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
|
|
style="display: flex;margin-left: 5px">
|
|
<div style="margin-top: 5px;margin-bottom:20px;margin-right: 5px">
|
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click="option({}, 'add')">新增课程</el-button>
|
|
</div>
|
|
<!-- <el-form-item label="学校名称" prop="schoolName">
|
|
<el-select v-model="queryParams.schoolName">
|
|
<el-option v-for="it in schoolList" :key="it.schoolId" :label="it.schoolName"
|
|
:value="it.schoolName"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="班级名称" prop="trainClassName">
|
|
<el-input v-model="queryParams.trainClassName" placeholder="请输入班级名称" clearable size="small" />
|
|
</el-form-item> -->
|
|
</el-form>
|
|
|
|
<el-table v-loading="loading" :data="courseList">
|
|
<el-table-column label="序号" align="center" type="index" />
|
|
<el-table-column label="课堂名称" align="center" prop="courseName" />
|
|
<el-table-column label="所属班级" align="center" prop="className">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.classType }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="课程链接" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.courseLink }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="课程资料" align="center" prop="courseSource" />
|
|
<el-table-column label="签到情况" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.signIn }} / 70
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" @click="option(scope.row, 'motify')">修改</el-button>
|
|
<el-button size="mini" type="text" @click="option(scope.row, 'delete')">删除</el-button>
|
|
<el-button size="mini" type="text" @click="option(scope.row, 'signIn')">签到</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
|
<el-dialog class="diaform" :title="title" :visible.sync="visibleopen" :close-on-click-modal="false"
|
|
width="700px" append-to-body @close="colsedia">
|
|
<div v-if="title == '签到码'">
|
|
<vueQr :signInInfo="signInInfo"></vueQr>
|
|
</div>
|
|
<el-form v-else :model="swiperInfo" :rules="rules" ref="form" label-width="150px" text-align:center>
|
|
|
|
<el-form-item label="所属班级" prop="filePath">
|
|
<el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
|
|
<el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
|
|
:value="item.train_class_id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="课程名称" prop="fileName">
|
|
<el-input v-model="swiperInfo.fileName"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="课堂老师" prop="fileType">
|
|
<el-radio-group v-model="swiperInfo.fileType">
|
|
<el-radio label="pc"></el-radio>
|
|
<el-radio label="app"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="课程资料">
|
|
<div>
|
|
<ImageUpload ref="imgupload" v-model="swiperInfo.filePath" listtype='picture-card'
|
|
class="widthFix" fileName="publicize" :limit="1" />
|
|
</div>
|
|
|
|
</el-form-item>
|
|
<el-form-item label="课时">
|
|
<el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
|
|
<el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
|
|
:value="item.train_class_id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="课时链接">
|
|
<el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
|
|
<el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
|
|
:value="item.train_class_id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="margin-top: 80px; text-align: center; margin-left: -150px">
|
|
<el-button type="primary" style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
|
|
@click="submitto('confirm')">确认</el-button>
|
|
<el-button style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
|
|
@click="colsedia">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getSwiperInfo, addSwiperInfo, getSwiperClass, delteSwiper } from '@/api/trainService/index'
|
|
import ImageUpload from '@/components/ImgUpload/index.vue'
|
|
import vueQr from '@/components/vueQr/index.vue'
|
|
import { deepClone } from '@/utils'
|
|
const titleMap = {
|
|
"motify": "修改",
|
|
"delete": "删除",
|
|
"signIn": "签到码",
|
|
"add": "新增"
|
|
}
|
|
export default {
|
|
name: 'peixunbaoming',
|
|
components: { ImageUpload, vueQr },
|
|
data() {
|
|
return {
|
|
imgAction: process.env.VUE_APP_BASE_API + '/upload',
|
|
loading: false,
|
|
// 传递给二维码的信息
|
|
signInInfo: {},
|
|
courseList: [
|
|
{
|
|
'courseName': 1,
|
|
'className': 1,
|
|
'classType': 1,
|
|
'courseLink': 1,
|
|
'courseSource': 1,
|
|
'signIn': 1
|
|
}
|
|
],
|
|
// 总条数
|
|
total: 0,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
swiperInfo: {
|
|
fileName: 1,
|
|
entityId: '',
|
|
fileType: '',
|
|
filePath: []
|
|
},
|
|
classList: [],
|
|
title: '新增图片',
|
|
visibleopen: false,
|
|
rules: {
|
|
filePath: [
|
|
{ required: true, message: '请上传图片', trigger: 'blur' },
|
|
],
|
|
fileName: [
|
|
{ required: true, trigger: 'blur', message: "请输入排序" },
|
|
{ pattern: /^\d+$/, message: "请输入正整数", trigger: "blur" }
|
|
],
|
|
fileType: [
|
|
{ required: true, message: '请选择类型', trigger: 'change' },
|
|
],
|
|
|
|
},
|
|
currentImage: '',
|
|
}
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
const res = await getSwiperInfo()
|
|
this.imageList = res.data
|
|
const classRes = await getSwiperClass()
|
|
console.log(classRes);
|
|
this.classList = classRes.data
|
|
},
|
|
addCourse() {
|
|
this.title = '新增图片'
|
|
this.visibleopen = true
|
|
},
|
|
previewImage(params) {
|
|
this.title = '图片预览'
|
|
console.log(params);
|
|
this.currentImage = process.env.VUE_APP_BASE_API + params.filePath
|
|
this.visibleopen = true
|
|
},
|
|
//修改资讯的弹窗
|
|
async modify(row) {
|
|
this.title = '修改图片'
|
|
this.visibleopen = true
|
|
this.form = row
|
|
},
|
|
async option(row, type) {
|
|
this.title = titleMap[type]
|
|
if (type === 'motify') {
|
|
|
|
} else if (type === 'delete') {
|
|
|
|
} else if (type === 'add') {
|
|
|
|
} else if (type === 'signIn') {
|
|
this.generateSignIn(row)
|
|
}
|
|
this.visibleopen = true
|
|
},
|
|
// 提交
|
|
submitto() {
|
|
this.$refs['form'].validate((valid) => {
|
|
if (valid) {
|
|
this.submit()
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
})
|
|
|
|
},
|
|
async submit() {
|
|
const data = deepClone(this.swiperInfo)
|
|
data.filePath = data.filePath[data.filePath.length - 1].toString()
|
|
data.entityId = data.entityId * 1
|
|
const res = await addSwiperInfo(data)
|
|
if (res.code == 200) {
|
|
this.$message.success('新增成功')
|
|
this.colsedia()
|
|
this.getList()
|
|
}
|
|
},
|
|
// 关闭
|
|
colsedia() {
|
|
this.$refs['form'].resetFields()
|
|
this.swiperInfo = {
|
|
fileName: '',
|
|
entityId: '',
|
|
fileType: '',
|
|
filePath: []
|
|
}
|
|
this.$refs.imgupload.clearImages()
|
|
this.currentImage = ""
|
|
this.visibleopen = false
|
|
},
|
|
// 生成二维码信息
|
|
generateSignIn(row) {
|
|
const time = new Date().getTime().toString()
|
|
this.signInInfo = { 'time': time, ...row }
|
|
this.title = '签到码'
|
|
this.visibleopen = true
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.getList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|
|
|