增加预览pdf

This commit is contained in:
lyc 2024-08-22 09:42:55 +08:00
parent 13598615c7
commit 8ec96996c6
4 changed files with 356 additions and 243 deletions

View File

@ -43,6 +43,7 @@
"pinia-plugin-persistedstate": "^3.2.1",
"spark-md5": "^3.0.2",
"vue-router": "^4.4.0",
"xgplayer": "^3.0.19",
"xlsx": "^0.18.5"
},
"devDependencies": {

View File

@ -8,7 +8,7 @@
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/> -->
<meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * 'self' data: blob:" />
<meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * 'self' ;img-src * 'self' data: blob:" />
</head>

View File

@ -0,0 +1,113 @@
<template>
<el-drawer v-model="model" class="preview-drawer" title="title" :modal="false" :with-header="false" append-to-body
size="50%" :before-close="handleClose">
<div class="flex drawer-header">
<div>
<div class="flex file-name">
<FileImage :size="30" :file-name="'xx.jpg'" />
<span class="name">地理0831-10</span>
</div>
<div class="flex file-tag">
<el-tag type="info" class="tag">图片</el-tag>
<el-tag type="info" class="tag">扩展素材</el-tag>
</div>
</div>
<div class="header-close" @click="onClose"><i class="iconfont icon-guanbi"></i></div>
</div>
<div class="drawer-content">
<!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> -->
<div ref="playerRef" class="video-box"></div>
</div>
</el-drawer>
</template>
<script setup>
import { watch, ref, nextTick } from 'vue'
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css'
import FileImage from '@/components/file-image/index.vue'
const model = defineModel()
const playerRef = ref();
const handleClose = () => {
}
//
const onClose = () => {
model.value = false
}
const init = () => {
nextTick(() => {
let player = new Player({
el: playerRef.value,
url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
width: '100%',
autoplay: false,// false
autoplayMuted: true,// false
screenShot: true,// 使false
videoAttributes: {// video
crossOrigin: 'anonymous',// CORS
},
marginControls: false,// false
loop:true,// false
volume:0.3,// ,0 ~ 1(0.6)
});
})
}
watch(model, (newVal) => {
if (newVal) {
init()
}
})
</script>
<style lang="scss" scoped>
:deep(.el-drawer__body) {
padding: 0;
}
.preview-drawer {
padding: 0;
}
.drawer-header {
justify-content: space-between;
align-items: center;
background-color: #fff;
.file-name {
align-items: center;
margin-bottom: 5px;
.name {
margin-left: 5px;
}
}
.file-tag {
.tag {
margin-right: 10px;
}
}
.header-close {
cursor: pointer;
.icon-guanbi {
font-size: 20px;
}
}
}
.drawer-content {
margin-top: 10px;
}
.video-box {
width: 100%;
height: 300px
}
</style>

View File

@ -1,17 +1,17 @@
<template>
<el-dialog v-model="dialogVisible" center top="10vh" width="600px" :show-close="false" append-to-body
<el-dialog v-model="model" center top="10vh" width="600px" :show-close="false" append-to-body
style="border-radius: 10px; padding: 10px 15px;">
<template #header>
<div class="homerwork-header flex">
<span>{{ title }}</span>
<i class="iconfont icon-guanbi" @click="cloneDialog"></i>
<i class="iconfont icon-guanbi" @click="cloneDialog(ruleFormRef)"></i>
</div>
</template>
<div v-loading="setLoading">
<el-form :model="form" label-width="80px" ref="ruleForm" :rules="rules">
<el-form :model="form" label-width="80px" ref="ruleFormRef" :rules="rules">
<el-form-item label="班级" prop="grade">
<el-scrollbar max-height="200px" style="width: 100%;">
<el-tree ref="treeRef" :data="gradeList" :props="defaultProps" :load="getLoad" node-key="id"
<el-tree ref="treeRef" :props="defaultProps" :load="getLoad" node-key="id" :default-expanded-keys="defaultExpandedKeys"
@check="handleCheckChange" lazy show-checkbox />
</el-scrollbar>
</el-form-item>
@ -41,8 +41,8 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click.stop="cloneDialog">取消</el-button>
<el-button type="primary" @click.stop="onSubmit('ruleForm')">
<el-button @click.stop="cloneDialog(ruleFormRef)">取消</el-button>
<el-button type="primary" @click.stop="onSubmit(ruleFormRef)">
确定
</el-button>
</div>
@ -50,256 +50,257 @@
</el-dialog>
</template>
<script>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { listClassmain, listClassgroup } from '@/api/classManage/index'
import { saveByClassWorkArray } from '@/api/teaching/classwork'
import useUserStore from '@/store/modules/user'
import { uniqBy, groupBy } from 'lodash'
export default {
props: {
modelValue: {
type: Boolean,
default: false
},
entpcourseid: {
default: ''
},
row: {
default: ''
},
title: {
type: String,
default: '布置作业'
}
const props = defineProps({
entpcourseid: {
default: ''
},
data() {
row: {
default: ''
},
title: {
type: String,
default: '布置作业'
}
})
const emit = defineEmits(['on-close', 'on-success'])
return {
dialogVisible: false,
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'leaf',
},
setLoading: false,
//
userInfo: null,
//
gradeList: [],
curGradeId: '',
//
groupList: [],
//
studentList: [],
//
form: {
feedback: '必做',
deaddate: '',
timelength: 1
},
//
rules: {
grade: [
{ validator: this.validateGrade, trigger: 'blur' }
],
student: [
{ validator: this.validateStudent, trigger: 'blur' }
]
}
const model = defineModel({ type: Boolean, default: false })
const ruleFormRef = ref('')
//
const defaultProps = {
children: 'children',
label: 'label',
isLeaf: 'leaf',
}
const treeRef = ref(null);
//
const defaultExpandedKeys = ref([])
// loading
const setLoading = ref(false)
//
const userInfo = useUserStore().user
//
const gradeList = ref([])
//
const studentList = ref([])
//
const form = reactive({
feedback: '必做',
deaddate: '',
timelength: 1
})
//
const validateGrade = (rule, value, callback) => {
if (studentList.value.length == 0) {
callback(new Error('请勾选班级或者学生'));
}
else {
callback()
}
}
const validateStudent = (rule, value, callback)=>{
if (studentList.value.length == 0) {
callback(new Error('学生不能为空'));
}
else {
callback()
}
}
const rules = reactive({
grade: [
{ validator: validateGrade, trigger: 'blur' }
],
student: [
{ validator: validateStudent, trigger: 'blur' }
]
})
}
},
created() {
//
this.form.deaddate = this.getCurrentDate() + ' ' + '10:00:00'
this.userInfo = useUserStore().user
},
methods: {
//
getGradeList() {
listClassmain({ classuserid: this.userInfo.userId, pageSize: 100, status: 'open' }).then(res => {
let list = res.rows
list.forEach(item => {
item.label = item.caption
item.level = 0
item.children = []
item.classstudentlist = JSON.parse("[" + item.classstudentlist + "]")
item.classstudentlist.forEach(el => {
el.classId = item.id
})
})
this.gradeList = list
})
},
//
getLoad(node, resolve) {
if (node.level == 0) return resolve([])
//
if (node.level == 1) {
listClassgroup({ classid: node.key, orderby: 'orderidx', pageSize: 100 }).then(res => {
if (res.rows.length > 0) {
let ary = []
res.rows.forEach(item => {
if (item.parentid === 0) {
//studentGroup
let studentGroup = JSON.parse("[" + item.studentlist + "]")
studentGroup.forEach(el => {
el.label = el.name
el.leaf = true
el.level = 2,
el.id = el.studentid
el.classId = item.classid
})
ary.push({
label: item.groupname,
...item,
level: 1,
children: studentGroup
})
}
//
const getGradeList = async ()=> {
let { rows } = await listClassmain({ classuserid: userInfo.userId, pageSize: 100, status: 'open' })
rows.forEach(item => {
item.label = item.caption
item.level = 0
item.leaf = false
item.children = []
item.classstudentlist = JSON.parse("[" + item.classstudentlist + "]")
item.classstudentlist.forEach(el => {
el.classId = item.id
})
})
return rows
}
//
const getLoad = async (node, resolve) => {
//
if (node.level == 0) {
gradeList.value = await getGradeList()
resolve(gradeList.value)
}
//
if (node.level == 1) {
listClassgroup({ classid: node.key, orderby: 'orderidx', pageSize: 100 }).then(res => {
if (res.rows.length > 0) {
let ary = []
res.rows.forEach(item => {
if (item.parentid === 0) {
//studentGroup
let studentGroup = JSON.parse("[" + item.studentlist + "]")
studentGroup.forEach(el => {
el.label = el.name
el.leaf = true
el.level = 2
el.id = el.studentid
el.classId = item.classid
})
ary.push({
label: item.groupname,
leaf: false,
...item,
level: 1,
// children
children: studentGroup
})
resolve(ary)
}
else {
resolve([])
}
})
}
//
if (node.level == 2) {
resolve(node.data.children)
}
},
//
handleCheckChange(data, checked) {
this.studentList = []
//
let checkNodes = checked.checkedNodes
let ary = []
checkNodes.forEach(item => {
//
if (item.level == 0) {
ary = [...ary, ...(item.classstudentlist)]
}
//
if (item.level == 1) {
ary = [...ary, ...(item.children)]
}
//
if (item.level == 2) {
ary = [...ary, item]
}
})
this.studentList = uniqBy(ary, 'studentid')
},
//
delStudent(index) {
this.studentList.splice(index, 1)
},
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
/**
* 根据学生列表中的classId分班
* studentList 为选中的所有学生 这些学生可能来自不同班级
*/
let gradeObj = groupBy(this.studentList, 'classId')
//
let ary = []
for (const value in gradeObj) {
// AIx web
let obj = {
id: 0,
parentid: this.row.id,
classid: value,
classcourseid: 0,
entpcourseid: this.entpcourseid,
studentlist: JSON.stringify(gradeObj[value]),
feedback: this.form.feedback,
workkey: "",
timelength: this.form.timelength,
weights: 1,
deaddate: this.form.deaddate,
workdate: this.getCurrentDate(),
uniquekey: this.row.uniquekey,
entpcourseworklist: "[" + this.row.entpcourseworklist + "]",
needMsgNotifine: 'false',
msgkey: 'newclasswork',
title: "作业任务",
msgcontent: '',
teachername: this.userInfo.nickName,
unixstamp: new Date().getTime(),
worktype: this.row.worktype
}
ary.push(obj)
}
this.setLoading = true
saveByClassWorkArray({
classworkarray: JSON.stringify(ary)
}).then(() => {
this.setLoading = false
ElMessage.success('操作成功')
this.cloneDialog()
}).catch(()=>{
this.setLoading = false
})
} else {
return false
}
})
},
//
cloneDialog() {
this.$emit('on-close')
this.studentList = []
this.$refs['ruleForm'].resetFields();
},
//
getCurrentDate() {
const now = new Date();
const year = now.getFullYear();
let month = now.getMonth() + 1; // 0+1
let day = now.getDate()
if(month < 10){
month = '0' + month
}
if(day < 10){
day = '0' + day
}
return `${year}-${month}-${day}`;
},
validateGrade(rule, value, callback) {
if (this.studentList.length == 0) {
callback(new Error('请勾选班级或者学生'));
resolve(ary)
}
else {
callback()
//
let students = node.data.classstudentlist
students.forEach(item =>{
item.label = item.name
item.level = 2
item.leaf = true
})
resolve(students)
}
},
validateStudent(rule, value, callback) {
if (this.studentList.length == 0) {
callback(new Error('学生不能为空'));
}
else {
callback()
}
},
},
watch: {
modelValue(val) {
this.dialogVisible = val
if (val) {
this.getGradeList()
}
}
},
})
}
//
if (node.level == 2) {
resolve(node.data.children)
}
}
//
const handleCheckChange = (data, checked)=> {
studentList.value = []
//
let checkNodes = checked.checkedNodes
let ary = []
checkNodes.forEach(item => {
//
if (item.level == 0) {
ary = [...ary, ...(item.classstudentlist)]
}
//
if (item.level == 1) {
ary = [...ary, ...(item.children)]
}
//
if (item.level == 2) {
ary = [...ary, item]
}
})
studentList.value = uniqBy(ary, 'studentid')
}
//
const delStudent = (index) => {
studentList.value.splice(index, 1)
}
const onSubmit = (formEl)=> {
if(!formEl) return
formEl.validate(valid => {
if (valid) {
/**
* 根据学生列表中的classId分班
* studentList 为选中的所有学生 这些学生可能来自不同班级
*/
let gradeObj = groupBy(studentList.value, 'classId')
//
let ary = []
for (const value in gradeObj) {
// AIx web
let obj = {
id: 0,
parentid: props.row.id,
classid: value,
classcourseid: 0,
entpcourseid: props.entpcourseid,
studentlist: JSON.stringify(gradeObj[value]),
feedback: form.feedback,
workkey: "",
timelength: form.timelength,
weights: 1,
deaddate: form.deaddate,
workdate: getCurrentDate(),
uniquekey: props.row.uniquekey,
entpcourseworklist: "[" + props.row.entpcourseworklist + "]",
needMsgNotifine: 'false',
msgkey: 'newclasswork',
title: "作业任务",
msgcontent: '',
teachername: userInfo.nickName,
unixstamp: new Date().getTime(),
worktype: props.row.worktype
}
ary.push(obj)
}
setLoading.value = true
saveByClassWorkArray({
classworkarray: JSON.stringify(ary)
}).then(() => {
setLoading.value = false
ElMessage.success('操作成功')
emit('on-success')
cloneDialog(formEl)
}).catch(()=>{
setLoading.value = false
})
} else {
return false
}
})
}
//
const cloneDialog = (formEl)=> {
studentList.value = []
treeRef.value.setCheckedKeys([])
defaultExpandedKeys.value = []
formEl.resetFields()
model.value = false
}
//
const getCurrentDate = ()=> {
const now = new Date();
const year = now.getFullYear();
let month = now.getMonth() + 1; // 0+1
let day = now.getDate()
if(month < 10){
month = '0' + month
}
if(day < 10){
day = '0' + day
}
return `${year}-${month}-${day}`;
}
onMounted(()=>{
//
form.deaddate = getCurrentDate() + ' ' + '10:00:00'
})
</script>
<style lang="scss" scoped>
@ -326,7 +327,5 @@ export default {
:deep(.el-checkbox){
transform : scale(1.3)
}
:deep(.el-icon){
transform : scale(1.3)
}
</style>