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