hcj
5 months ago
parent
862d6c5cdc
commit
882fa937ad
@ -0,0 +1,43 @@ |
||||
<template> |
||||
<div class="qrWrapper"> |
||||
<vueQr class="qr" :text="JSON.stringify(signInInfo)" :callback="test"></vueQr> |
||||
<span>有效时间：5min</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import vueQr from 'vue-qr' |
||||
export default { |
||||
props: { |
||||
signInInfo: Object |
||||
}, |
||||
components: { |
||||
vueQr |
||||
}, |
||||
data() { |
||||
return { |
||||
} |
||||
}, |
||||
methods: { |
||||
test(a, b) { |
||||
console.log("扫码成功"); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.qrWrapper { |
||||
width: 100%; |
||||
height: 200px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-items: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.qr { |
||||
height: 200px; |
||||
width: 200px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,16 @@ |
||||
function encodeChinese(str){ |
||||
if(!str){ |
||||
return '' |
||||
} |
||||
return encodeURIComponent(str) |
||||
} |
||||
|
||||
function decodeChinse(str){ |
||||
if(str){ |
||||
return decodeURIComponent(str) |
||||
} |
||||
} |
||||
|
||||
export { |
||||
encodeChinese,decodeChinse |
||||
} |
||||
@ -0,0 +1,258 @@ |
||||
<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> |
||||
Loading…
Reference in new issue