lyc-dev #19
|
@ -5,7 +5,9 @@
|
||||||
<i class="iconfont icon-xiangyou"></i>
|
<i class="iconfont icon-xiangyou"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="book-list">
|
<div class="book-list">
|
||||||
<el-tree :data="treeData" :props="defaultProps" highlight-current @node-click="handleNodeClick">
|
<el-tree ref="treeref" :data="treeData" :props="defaultProps" node-key="id"
|
||||||
|
:default-expanded-keys="defaultExpandedKeys"
|
||||||
|
:current-node-key="currentNode" highlight-current @node-click="handleNodeClick">
|
||||||
<template #default="{ node }">
|
<template #default="{ node }">
|
||||||
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
@ -35,7 +37,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref, nextTick } from 'vue';
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
import { listEvaluation } from '@/api/subject'
|
import { listEvaluation } from '@/api/subject'
|
||||||
|
|
||||||
|
@ -63,6 +65,12 @@ const curBookName = ref('')
|
||||||
const volumeOne = ref([])
|
const volumeOne = ref([])
|
||||||
// 下册
|
// 下册
|
||||||
const volumeTwo = ref([])
|
const volumeTwo = ref([])
|
||||||
|
// 当前选中的节点
|
||||||
|
const currentNode = ref(0)
|
||||||
|
// 默认展开的节点
|
||||||
|
const defaultExpandedKeys = ref([])
|
||||||
|
// tree
|
||||||
|
const treeref = ref(null)
|
||||||
|
|
||||||
|
|
||||||
//获取教材下面的单元内容
|
//获取教材下面的单元内容
|
||||||
|
@ -101,6 +109,33 @@ const getTreeData = () => {
|
||||||
let upData = transData(volumeOne.value)
|
let upData = transData(volumeOne.value)
|
||||||
let downData = transData(volumeTwo.value)
|
let downData = transData(volumeTwo.value)
|
||||||
treeData.value = upData.length ? upData : downData
|
treeData.value = upData.length ? upData : downData
|
||||||
|
defaultExpandedKeys.value = [treeData.value[0].id]
|
||||||
|
nextTick(() => {
|
||||||
|
currentNode.value = getLastLevelData(treeData.value)[0].id
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLastLevelData = (tree) => {
|
||||||
|
let lastLevelData = [];
|
||||||
|
// 递归函数遍历树形结构
|
||||||
|
function traverseTree(nodes) {
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
// 如果当前节点有子节点,继续遍历
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
traverseTree(node.children);
|
||||||
|
} else {
|
||||||
|
// 如果没有子节点,说明是最后一层的节点
|
||||||
|
lastLevelData.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用递归函数开始遍历
|
||||||
|
traverseTree(tree);
|
||||||
|
|
||||||
|
// 返回最后一层的数据
|
||||||
|
return lastLevelData;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -146,9 +181,6 @@ const isHaveUnit = (id) => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderContent = (h, { node, data }) => {
|
|
||||||
console.log(node, data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleNodeClick = (data) => {
|
const handleNodeClick = (data) => {
|
||||||
emit('nodeClick', data)
|
emit('nodeClick', data)
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
<el-form>
|
<el-form>
|
||||||
<el-form-item label="文件">
|
<el-form-item label="文件">
|
||||||
<div class="create-item file-item flex">
|
<div class="create-item file-item flex">
|
||||||
<el-upload action="" multiple :before-upload="hanleFileBefore" :auto-upload="true">
|
<el-upload :file-list="fileList" :show-file-list="false" :auto-upload="false" multiple
|
||||||
|
:on-change="hanleFileChange">
|
||||||
<el-button slot="trigger">选择文件</el-button>
|
<el-button slot="trigger">选择文件</el-button>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<span class="upload-desc">说明:一次最多上传5个文件,单个文件大小不能大于100M</span>
|
<span class="upload-desc">说明:一次最多上传5个文件,单个文件大小不能大于100M</span>
|
||||||
|
@ -22,7 +23,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-type flex">
|
<div class="flex-type flex">
|
||||||
<span class="name">类别:</span>
|
<span class="name">类别:</span>
|
||||||
<el-select v-model="item.fileType" placeholder="Select" style="width: 100px">
|
<el-select v-model="item.fileData.fileFlag" placeholder="Select" style="width: 100px">
|
||||||
<el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" />
|
<el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
|
|
||||||
|
@ -78,10 +79,14 @@ const resourceType = ref([
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch(() => props.modelValue, (newVal) => {
|
watch(() => props.modelValue, (newVal) => {
|
||||||
dialogValue.value = newVal
|
dialogValue.value = newVal
|
||||||
})
|
})
|
||||||
const hanleFileBefore = (rawFile) => {
|
|
||||||
|
const hanleFileChange = (file) => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 音频 类型
|
// 音频 类型
|
||||||
const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
|
const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
|
||||||
|
@ -94,27 +99,47 @@ const hanleFileBefore = (rawFile) => {
|
||||||
// pdf 类型
|
// pdf 类型
|
||||||
const pdfTypes = ['application/pdf']
|
const pdfTypes = ['application/pdf']
|
||||||
|
|
||||||
const fileType = rawFile.type
|
const fileType = file.raw.type
|
||||||
if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType))) {
|
if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType))) {
|
||||||
ElMessage.error('文件格式错误! 请上传音频、视频、word、ppt、pdf文件!')
|
ElMessage.error('文件格式错误! 请上传音频、视频、word、ppt、pdf文件!')
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
// 验证文件大小
|
// 验证文件大小
|
||||||
const fileSize = rawFile.size / 1024 / 1024 > 100
|
const fileSize = file.raw.size / 1024 / 1024 > 100
|
||||||
if (fileSize) {
|
if (fileSize) {
|
||||||
ElMessage.error('文件大小错误! 请上传小于100M的文件!')
|
ElMessage.error('文件大小错误! 请上传小于100M的文件!')
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
console.log(rawFile)
|
if (file.status === 'ready') {
|
||||||
rawFile.fileType = 1
|
file.fileData = {
|
||||||
fileList.value.push(rawFile)
|
textbookId: '123',
|
||||||
|
levelFirstId: '123',
|
||||||
|
levelSecondId: '123',
|
||||||
|
fileSource: '平台',
|
||||||
|
fileFlag: 1,
|
||||||
|
fileRoot: '资源'
|
||||||
|
}
|
||||||
|
file.callback = successFile
|
||||||
|
fileList.value.push(file)
|
||||||
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let fileSuccessAry = []
|
||||||
|
let fileNums = 0;
|
||||||
|
const successFile = (res) => {
|
||||||
|
fileSuccessAry.push(res)
|
||||||
|
if(fileSuccessAry.length == fileNums){
|
||||||
|
let flag = fileSuccessAry.every(item => item.code == 200)
|
||||||
|
if(flag){
|
||||||
|
ElMessage.success('上传成功!')
|
||||||
|
fileNums = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const getFileTypeIcon = (fileName) => {
|
const getFileTypeIcon = (fileName) => {
|
||||||
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
||||||
console.log(name)
|
|
||||||
const iconObj = {
|
const iconObj = {
|
||||||
pdf: 'icon-pdf',
|
pdf: 'icon-pdf',
|
||||||
ppt: 'icon-ppt',
|
ppt: 'icon-ppt',
|
||||||
|
@ -132,18 +157,21 @@ const delFile = (index) => {
|
||||||
|
|
||||||
// 关闭弹窗前
|
// 关闭弹窗前
|
||||||
const beforeClose = (done) => {
|
const beforeClose = (done) => {
|
||||||
|
fileNums = fileList.value.length
|
||||||
fileList.value = []
|
fileList.value = []
|
||||||
emit('update:modelValue', false)
|
emit('update:modelValue', false)
|
||||||
done()
|
done()
|
||||||
}
|
}
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
|
fileNums = fileList.value.length
|
||||||
fileList.value = []
|
fileList.value = []
|
||||||
emit('update:modelValue', false)
|
emit('update:modelValue', false)
|
||||||
}
|
}
|
||||||
// 确定
|
// 确定
|
||||||
const submitFile = () => {
|
const submitFile = () => {
|
||||||
emit('submitFile', fileList.value)
|
emit('submitFile', fileList.value)
|
||||||
|
closeDialog()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -172,15 +200,18 @@ const submitFile = () => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
.file-name {
|
.file-name {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center
|
align-items: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-type {
|
.flex-type {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
@ -192,6 +223,7 @@ const submitFile = () => {
|
||||||
.name {
|
.name {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '*';
|
content: '*';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in New Issue