|
|
@@ -20,24 +20,30 @@
|
|
|
<div class="div_title">
|
|
|
<span>下册</span>
|
|
|
{{ item.title }}
|
|
|
- <el-popover v-if="isupdateCourse" placement="bottom" :width="200" trigger="click" show-after="1000"
|
|
|
- @hide="checked1 = false">
|
|
|
+ <!-- v-if="isupdateCourse" -->
|
|
|
+ <el-popover placement="bottom" :width="210" trigger="click" show-after="500" @hide="checked1 = false">
|
|
|
<template #reference>
|
|
|
<img :src="DownloadImg" alt="" @click="getDate(item.id)">
|
|
|
</template>
|
|
|
<div>
|
|
|
<div>
|
|
|
<span>资源列表（{{ item.dataList.length }}）</span>
|
|
|
- <el-checkbox v-model="checked1" label="全选" size="large" @click="checkedAll(item.id)" />
|
|
|
+ <el-checkbox style="position: relative;top: 0;left: 35px;height: 30px;" v-model="checked1"
|
|
|
+ label="全选" size="large" @click="checkedAll(item.id)" />
|
|
|
</div>
|
|
|
<div v-if="item.dataList.length > 0">
|
|
|
- <div v-for="dataitem in item.dataList" :key="dataitem.id">
|
|
|
- <img :src="dataitem.url" alt="">
|
|
|
- <span>{{ dataitem.name }}</span>
|
|
|
- <img :src="DownloadImg" alt="" @click="download(dataitem.url)">
|
|
|
- <el-checkbox v-if="checked1" v-model="dataitem.check" label="全选" size="large" />
|
|
|
- <el-button v-if="checked1" @click="DownloadProcessing()">批量下载</el-button>
|
|
|
+ <div class="div_hover" v-for="dataitem in item.dataList" :key="dataitem.id">
|
|
|
+ <span style="display: inline-block;width: 130px;" :title="dataitem.name">{{
|
|
|
+ dataitem.name.length > 10 ?
|
|
|
+ dataitem.name.substring(0, 8) + '...' : dataitem.name }}</span>
|
|
|
+ <a :href="dataitem.url" :download="dataitem.name" v-if="!checked1" class="el_popover_a"
|
|
|
+ style="position: relative;left: 20px;top: 5px;">
|
|
|
+ <img :src="DownloadImg" alt="">
|
|
|
+ </a>
|
|
|
+ <el-checkbox v-if="checked1" v-model="dataitem.checked" label="全选" size="large" />
|
|
|
</div>
|
|
|
+ <el-button style="margin-top: 10px;" v-if="checked1"
|
|
|
+ @click="DownloadProcessing()">批量下载</el-button>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
暂无数据
|
|
|
@@ -78,6 +84,8 @@
|
|
|
<script setup>
|
|
|
import { ref, onMounted, watchEffect } from 'vue';
|
|
|
import { userCurrentRole, userInfoStore } from '../../stores/counter'
|
|
|
+import JSZip from 'jszip';
|
|
|
+import { saveAs } from 'file-saver';
|
|
|
import DownloadImg from '@/assets/img/download.png'
|
|
|
import PDFImg from '@/assets/img/PDF.png'
|
|
|
import WarningImg from '@/assets/icon/icon.png'
|
|
|
@@ -105,6 +113,7 @@ import ba1 from '@/assets/img/八下1.png'
|
|
|
import ba2 from '@/assets/img/八下2.png'
|
|
|
import ba3 from '@/assets/img/八下3.png'
|
|
|
import ba4 from '@/assets/img/八下4.png'
|
|
|
+import axios from 'axios';
|
|
|
|
|
|
const user = userInfoStore()
|
|
|
const CurrentRole = userCurrentRole()
|
|
|
@@ -151,7 +160,8 @@ const courseData = {
|
|
|
id: "8d4c47d5-ed72-11ee-b534-005056b86db5",
|
|
|
title: "初识人工智能",
|
|
|
url: san1,
|
|
|
- dataList: []
|
|
|
+ dataList: [
|
|
|
+ ]
|
|
|
}, {
|
|
|
id: "8680f2e5-ed72-11ee-b534-005056b86db5",
|
|
|
title: "机器的眼睛",
|
|
|
@@ -391,85 +401,97 @@ const updateReduction = () => {
|
|
|
|
|
|
const getDate = async (id) => {
|
|
|
// currentData
|
|
|
- let dataList = []
|
|
|
- let m = currentData.value
|
|
|
-
|
|
|
- console.log(m, '11111111111111111')
|
|
|
- await top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/selectCourseDetailSz", [id], function (res) {
|
|
|
- console.log(res)
|
|
|
- if (res.value[0].length > 0 && res.value[0][0].chapters.length > 0) {
|
|
|
- let datachapters = JSON.parse(res.value[0][0].chapters)
|
|
|
- for (let i = 0; i < datachapters.length; i++) {
|
|
|
- let data = datachapters[i]
|
|
|
- for (let j = 0; j < data.chapterInfo.length; j++) {
|
|
|
- let dataChapterInfo = data.chapterInfo[j]
|
|
|
- for (let k = 0; k < dataChapterInfo.taskJson.length; k++) {
|
|
|
- let DatahapterData = dataChapterInfo.taskJson[k]
|
|
|
- for (let l = 0; l < DatahapterData.chapterData.length; l++) {
|
|
|
- let obj = DatahapterData.chapterData[l]
|
|
|
- // let obj = chapterDatas
|
|
|
- obj.check = false
|
|
|
- dataList.push(obj)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }, [], { "type": "POST", "withCredentials": true });
|
|
|
+ // let dataList = []
|
|
|
+ // let m = currentData.value
|
|
|
+ // await top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/selectCourseDetailSz", [id], function (res) {
|
|
|
+ // console.log(res)
|
|
|
+ // if (res.value[0].length > 0 && res.value[0][0].chapters.length > 0) {
|
|
|
+ // let datachapters = JSON.parse(res.value[0][0].chapters)
|
|
|
+ // for (let i = 0; i < datachapters.length; i++) {
|
|
|
+ // let data = datachapters[i]
|
|
|
+ // for (let j = 0; j < data.chapterInfo.length; j++) {
|
|
|
+ // let dataChapterInfo = data.chapterInfo[j]
|
|
|
+ // for (let k = 0; k < dataChapterInfo.taskJson.length; k++) {
|
|
|
+ // let DatahapterData = dataChapterInfo.taskJson[k]
|
|
|
+ // for (let l = 0; l < DatahapterData.chapterData.length; l++) {
|
|
|
+ // let obj = DatahapterData.chapterData[l]
|
|
|
+ // // let obj = chapterDatas
|
|
|
+ // obj.checked = false
|
|
|
+ // dataList.push(obj)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }, [], { "type": "POST", "withCredentials": true });
|
|
|
+
|
|
|
+ // await m.xia.map(x => {
|
|
|
+ // if (x.id == id) {
|
|
|
+ // x.dataList = dataList
|
|
|
+ // }
|
|
|
+ // return x
|
|
|
+ // })
|
|
|
+ // currentData.value = m
|
|
|
+ // console.log("currentData", currentData)
|
|
|
+}
|
|
|
|
|
|
- await m.xia.map(x => {
|
|
|
+const checkedAll = (id) => {
|
|
|
+ let data = currentData.value
|
|
|
+ data.xia.map(x => {
|
|
|
if (x.id == id) {
|
|
|
- x.dataList = dataList
|
|
|
+ x.dataList.map(y => {
|
|
|
+ y.checked = !checked1.value
|
|
|
+ })
|
|
|
}
|
|
|
return x
|
|
|
})
|
|
|
- currentData.value = m
|
|
|
- console.log("currentData", currentData)
|
|
|
-}
|
|
|
-
|
|
|
-const checkedAll = (id) => {
|
|
|
console.log(id, checked1.value)
|
|
|
+ console.log(data)
|
|
|
+ currentData.value = data
|
|
|
// checked1.value = true
|
|
|
}
|
|
|
|
|
|
-const download = url => {
|
|
|
- let proArr = []
|
|
|
- if (Array.isArray(url)) {
|
|
|
- proArr = [url]
|
|
|
- } else {
|
|
|
- proArr = url
|
|
|
- }
|
|
|
- Promise.all(proArr).then((resArr) => {
|
|
|
- if (resArr?.length > 0) {
|
|
|
- resArr?.forEach((item) => {
|
|
|
- setBtnLoad(false)
|
|
|
- // 可以使用循环生成iframe方法实现批量下载
|
|
|
- const iframe = document.createElement("iframe");
|
|
|
- iframe.style.display = "none"; // 不可见
|
|
|
- iframe.style.height = "0"; // 高度为0
|
|
|
- iframe.src = item; // 下载地址
|
|
|
- document.body.appendChild(iframe); // 必须有，iframe挂在到dom树触发请求
|
|
|
-
|
|
|
- //window.open下载文件下载多个文件时，window.open会中断循环。
|
|
|
- // window.open(item?.data?.url, '_self');
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+const download = (url, fileName) => {
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.style.display = 'none';
|
|
|
+ a.href = url;
|
|
|
+ a.download = fileName;
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
}
|
|
|
|
|
|
const DownloadProcessing = async () => {
|
|
|
- let data = currentData
|
|
|
+ let data = currentData.value
|
|
|
let urls = []
|
|
|
await data.xia.map(x => {
|
|
|
- if (x.check) {
|
|
|
- urls.push(x.url)
|
|
|
- }
|
|
|
+ console.log(x)
|
|
|
+ x.dataList.length > 0 && x.dataList.map(m => {
|
|
|
+ if (m.checked) {
|
|
|
+ urls.push(m)
|
|
|
+ }
|
|
|
+ return m
|
|
|
+ })
|
|
|
return x
|
|
|
})
|
|
|
console.log("urls", urls)
|
|
|
+ for (let i = 0; i < urls.length; i++) {
|
|
|
+ fetch(urls[i].url)
|
|
|
+ .then(response => response.blob()) // 获取文件数据流
|
|
|
+ .then(blob => {
|
|
|
+ const url = window.URL.createObjectURL(blob); // 生成文件在浏览器中的链接
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.href = url;
|
|
|
+ a.download = urls[i].name; // 文件名
|
|
|
+ a.style.display = 'none';
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ window.URL.revokeObjectURL(url); // 清除文件链接
|
|
|
+ })
|
|
|
+ .catch(console.error);
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
// 获取课程下载资料
|
|
|
// top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/selectCourseDetailSz", ['课程id'], function (res) {}, [], { "type": "POST", "withCredentials": true });
|
|
|
|
|
|
@@ -573,4 +595,22 @@ watchEffect(() => {
|
|
|
color: rgba(0, 0, 0, 0.9);
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
+
|
|
|
+.div_hover {
|
|
|
+ // padding: 8px 0 10px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.div_hover:hover {
|
|
|
+ background: rgb(240, 242, 245);
|
|
|
+}
|
|
|
+
|
|
|
+.el_popover_a {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.div_hover:hover .el_popover_a {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
</style>
|
