增加预览pdf
This commit is contained in:
parent
13598615c7
commit
8ec96996c6
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue