mozhe
/
school_file_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

This commit is contained in:
jiangzhe 2024-07-02 09:32:17 +08:00
parent 6d44803d0a
commit 218538eb21
13 changed files with 144 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env.development
View File

@ -15,7 +15,10 @@ VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
# SnailJob 控制台地址
VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
VITE_APP_PORT = 80
# 文件预览地址
VITE_APP_PREVIEW = 'http://101.37.69.204:8012/onlinePreview'
VITE_APP_PORT = 81
# 接口加密功能开关(如需关闭 后端也必须对应关闭)
VITE_APP_ENCRYPT = true

5
.env.production
View File

@ -12,13 +12,16 @@ VITE_APP_MONITRO_ADMIN = '/admin/applications'
# SnailJob 控制台地址
VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
# 文件预览地址
VITE_APP_PREVIEW = 'http://101.37.69.204:8012/onlinePreview'
# 生产环境
VITE_APP_BASE_API = '/api-school'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
VITE_APP_PORT = 80
VITE_APP_PORT = 81
# 接口加密功能开关(如需关闭 后端也必须对应关闭)
VITE_APP_ENCRYPT = true

3
package.json
View File

@ -1,7 +1,7 @@
{
"name": "school-file-web",
"version": "1.0.0",
"description": "邗实校本资源本",
"description": "校本资源库",
"author": "mozhe",
"license": "MIT",
"type": "module",
@ -37,6 +37,7 @@
"fuse.js": "7.0.0",
"highlight.js": "11.9.0",
"image-conversion": "^2.1.1",
"js-base64": "^3.7.7",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"moddle": "6.2.3",

13
src/api/system/oss/index.ts
View File

@ -36,7 +36,7 @@ export function previewPerson(ossId: string | number): any {
return request({
url: '/oss/person/preview/' + ossId,
method: 'post',
responseType: 'blob'
// responseType: 'blob'
});
}
@ -57,7 +57,7 @@ export function previewTextbook(ossId: string | number): any {
return request({
url: '/file/textbook/preview/' + ossId,
method: 'post',
responseType: 'blob'
// responseType: 'blob'
});
}
@ -78,7 +78,7 @@ export function previewResource(ossId: string | number): any {
return request({
url: '/file/resource/preview/' + ossId,
method: 'post',
responseType: 'blob'
// responseType: 'blob'
});
}
@ -284,4 +284,11 @@ export const getVolume = (query?: any): AxiosPromise<any[]> => {
method: 'get',
params: query
});
};
export const getCatalogPersonDownload = (id: any): AxiosPromise<any> => {
return request({
url: `/oss/person/download/${id}`,
method: 'post'
});
};

2
src/components/FileMd5Upload/index.vue
View File

@ -48,7 +48,7 @@ const props = defineProps({
// 大小限制(MB)
fileSize: propTypes.number.def(1024),
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt']),
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt', 'jpg', 'png', 'jpeg', 'gif', 'bmp', 'mp4', 'mov', 'wmv', 'flv', 'avi', 'mkv', 'mp3', 'wma']),
// 是否显示提示
isShowTip: propTypes.bool.def(true)
});

2
src/components/iFrame/index.vue
View File

@ -16,7 +16,7 @@ const loading = ref(true);
const url = computed(() => props.src);
onMounted(() => {
setTimeout(() => {
setTimeout(() => {system:oss:upload
loading.value = false;
}, 300);
window.onresize = function temp() {

10
src/views/index.vue
View File

@ -105,31 +105,31 @@
</template>
<div class="quick-action">
<el-card @click="gotoTeacher">
<el-card v-hasPermi="['school:teacher:pageList']" @click="gotoTeacher">
<div class="item">
<img src="@/assets/icons/student.png" alt="">
<p>添加老师</p>
</div>
</el-card>
<el-card @click="gotoDept">
<el-card v-hasPermi="['system:dept:list']" @click="gotoDept">
<div class="item">
<img src="@/assets/icons/course.png" alt="">
<p>部门管理</p>
</div>
</el-card>
<el-card @click="gotoMy">
<el-card v-hasPermi="['catalog:person:list']" @click="gotoMy">
<div class="item">
<img src="@/assets/icons/resource.png" alt="">
<p>我的空间</p>
</div>
</el-card>
<el-card @click="gotoCatalog">
<el-card v-hasPermi="['file:textbook:pageList']" @click="gotoCatalog">
<div class="item">
<img src="@/assets/icons/video.png" alt="">
<p>同步教材</p>
</div>
</el-card>
<el-card @click="gotoSubject">
<el-card v-hasPermi="['file:resource:pageList']" @click="gotoSubject">
<div class="item">
<img src="@/assets/icons/image.png" alt="">
<p>专题资源</p>

98
src/views/resource/catalogPerson/components/FileList.vue
View File

@ -27,12 +27,10 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col v-if="isUpload" :span="1.5">
<el-button type="primary" plain icon="Upload"
@click="handleFile">上传文件</el-button>
<el-button type="primary" plain icon="Upload" @click="handleFile">上传文件</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple"
@click="handleDelete()">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
删除
</el-button>
</el-col>
@ -68,8 +66,7 @@
<el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row)">复制</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete"
@click="handleDelete(scope.row)">删除</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</el-tooltip>
</template>
</el-table-column>
@ -95,27 +92,7 @@
</template>
</el-dialog>
<el-dialog v-model="previewDialog.visible" :title="previewDialog.title" width="900px" append-to-body>
<vue-office-docx v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.doc' || currentFile.fileSuffix == '.docx'" :src="file" />
<vue-office-excel v-loading="fileLoading" element-loading-text="加载中..." :options="options"
style="height: 100vh;width: 100vh;" v-if="currentFile.fileSuffix == '.xls' || currentFile.fileSuffix == '.xlsx'"
:src="file" />
<vue-office-pdf style="height: 100vh" v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.pdf' || currentFile.fileSuffix == '.ppt' || currentFile.fileSuffix == '.pptx'"
:src="file" />
<div v-loading="fileLoading" element-loading-text="加载中..." v-if="currentFile.fileSuffix == '.txt'"
style="white-space: pre-wrap;">{{ txt }}
</div>
<ImagePreview v-loading="fileLoading" element-loading-text="加载中..." style="width: 100%; text-align: center;"
v-if="imgSuffix.includes(currentFile.fileSuffix)" :src="imgUrl" />
</el-dialog>
<el-dialog v-model="treeMoveDialog.visible" :title="treeMoveDialog.title" width="500px" append-to-body @closed="handlePreviewClose">
<el-dialog v-model="treeMoveDialog.visible" :title="treeMoveDialog.title" width="500px" append-to-body>
<el-form ref="treeMoveFormRef" :model="treeMoveForm" :rules="treeMoveRules">
<el-form-item label="移动至" prop="catalogId">
<el-tree-select v-model="treeMoveForm.catalogId" :data="treeData"
@ -150,29 +127,16 @@
</template>
<script setup name="Oss" lang="ts">
import { pagePerson, previewPerson, previewPersonTxt, delPerson, addPerson, copyPerson, movePerson } from '@/api/system/oss';
import { pagePerson, previewPerson, delPerson, addPerson, copyPerson, movePerson } from '@/api/system/oss';
import { listCatalogPerson } from "@/api/resource/catalogPerson";
import { CatalogPersonVO } from '@/api/resource/catalogPerson/types';
import ImagePreview from '@/components/ImagePreview/index.vue';
import FileMd5Upload from '@/components/FileMd5Upload/index.vue';
import { OssVO } from '@/api/system/oss/types';
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import { Base64 } from 'js-base64'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const fileSuffix = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf']
const imgSuffix = ['.jpg', '.png', '.jpeg', '.gif', '.bmp']
const formatOptions = [
{
value: '.doc',
@ -341,7 +305,10 @@ const handleFileName = (val) => {
const submitForm = async () => {
const ossId = form.value.file
const catalogId = currentNode.value.catalogId
await addPerson({ ossId, catalogId, fileName: fileName.value })
const type = queryParams.value.type
console.log('submitForm', type);
await addPerson({ ossId, catalogId, fileName: fileName.value, type })
dialog.visible = false;
getList();
};
@ -407,49 +374,11 @@ const handleDelete = async (row?: any) => {
proxy?.$modal.msgSuccess('删除成功');
}
const options = ref({
xls: false, //预览xlsx文件设为false；预览xls文件设为true
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
})
const fileLoading = ref(false)
const currentFile = ref()
const file = ref('')
const txt = ref('')
const imgUrl = ref('')
const preViewUrl = import.meta.env.VITE_APP_PREVIEW
const handlePreview = async (row: any) => {
file.value = ''
txt.value = ''
imgUrl.value = ''
fileLoading.value = true
previewDialog.visible = true
currentFile.value = row
const fileRes = await previewPerson(row.id)
window.open(`${preViewUrl}?url=${encodeURIComponent(Base64.encode(fileRes.data))}`, '__blank')
if (row.fileSuffix == '.txt') {
const fileRes = await previewPersonTxt(row.id)
console.log(fileRes)
txt.value = fileRes
} else if (imgSuffix.includes(row.fileSuffix)) {
const fileRes = await previewPerson(row.id)
let blob = new Blob([fileRes], { type: `image/${row.fileSuffix.substring(1)}` })
imgUrl.value = URL.createObjectURL(blob)
} else if (fileSuffix.includes(row.fileSuffix)) {
const fileRes = await previewPerson(row.id)
fileRes.arrayBuffer().then(res => file.value = res)
}
fileLoading.value = false
}
const handlePreviewClose = () => {
file.value = ''
txt.value = ''
imgUrl.value = ''
}
const getlistCatalogPerson = async () => {
@ -476,7 +405,6 @@ const handleNode = (node: any) => {
const handleTypeChange = (type: any) => {
queryParams.value.type = type
getList()
}

71
src/views/resource/catalogPerson/index.vue
View File

@ -23,38 +23,42 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table ref="catalogPersonTableRef" @row-click="handleRowClick" v-loading="loading"
:data="catalogPersonList" row-key="catalogId" :default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column label="分类名称" align="left" prop="catalogName">
<template #default="scope">
<el-popover placement="top-start" title="分类名称" :width="200" trigger="hover"
:content="scope.row.catalogName">
<template #reference>
<span class="text-ellipsis">{{ scope.row.catalogName }}</span>
<div class="tree-container-scroll">
<el-scrollbar>
<el-table ref="catalogPersonTableRef" @row-click="handleRowClick" v-loading="loading"
:data="catalogPersonList" row-key="catalogId" :default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column label="分类名称" align="left" prop="catalogName">
<template #default="scope">
<el-popover placement="top-start" title="分类名称" :width="200" trigger="hover"
:content="scope.row.catalogName">
<template #reference>
<span class="text-ellipsis">{{ scope.row.catalogName }}</span>
</template>
</el-popover>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</el-card>
</div>
<div class="bottom" v-if="volume">
<span>资源空间:{{ volume.useVolume }}MB / {{ volume.totalVolume }}TB</span>
<el-progress :percentage="55" />
<span>资源空间:{{ volume.useVolumename }} / {{ volume.totalVolumeName }}</span>
<el-progress :percentage="volume.volumePercent" />
</div>
</div>
@ -253,6 +257,11 @@ const submitForm = () => {
catalogPersonFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.parentId == 0) {
proxy?.$modal.msgError("不能添加顶级节点");
buttonLoading.value = false
return
}
if (form.value.catalogId) {
await updateCatalogPerson(form.value).finally(() => buttonLoading.value = false);
} else {
@ -303,13 +312,17 @@ const handleChange = () => {
.top {
margin: 0 20px;
.tree-container-scroll {
height: calc(100vh - 350px);
}
}
.bottom {
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-bottom: 10px;
font-size: 18px;
}

5
src/views/resource/catalogResource/index.vue
View File

@ -269,6 +269,11 @@ const submitForm = () => {
catalogResourceFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.parentId == 0) {
proxy?.$modal.msgError("不能添加顶级节点");
buttonLoading.value = false
return
}
if (form.value.catalogId) {
await updateCatalogResource(form.value).finally(() => buttonLoading.value = false);
} else {

5
src/views/resource/catalogTextbook/index.vue
View File

@ -322,6 +322,11 @@ const submitForm = () => {
catalogTextbookFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.parentId == 0) {
proxy?.$modal.msgError("不能添加顶级节点");
buttonLoading.value = false
return
}
if (form.value.catalogId) {
await updateCatalogTextbook(form.value).finally(() => buttonLoading.value = false);
} else {

113
src/views/resourceMgt/catalogResourceMgt/index.vue
View File

@ -7,12 +7,16 @@
<br>
<el-button v-hasPermi="['file:textbook:awaitList']" :class="['btn-audit', isAudit && 'active']" type=""
text="plain" @click="handleAudit">待审核</el-button>
<el-tree ref="treeRef" v-loading="treeLoading" :data="treeData" :props="defaultProps" default-expand-all
@node-click="handleNode" />
<div class="tree-container-scroll">
<el-scrollbar>
<el-tree ref="treeRef" v-loading="treeLoading" :data="treeData" :props="defaultProps" default-expand-all
@node-click="handleNode" />
</el-scrollbar>
</div>
</div>
<div class="bottom" v-if="volume">
<span>资源空间:{{ volume.useVolume }}MB / {{ volume.totalVolume }}TB</span>
<el-progress :percentage="55" />
<span>资源空间:{{ volume.useVolumename }} / {{ volume.totalVolumeName }}</span>
<el-progress :percentage="volume.volumePercent" />
</div>
</div>
</el-col>
@ -67,12 +71,19 @@
<el-table-column label="课件格式" align="center" prop="fileSuffix" />
<el-table-column label="课件大小" align="center" prop="volume" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="审核状态" align="center" prop="status">
<template #default="scope">
<el-tag v-if="scope.row.status == -1" type="warning">待审核</el-tag>
<el-tag v-if="scope.row.status == 0" type="success">审核不通过</el-tag>
<el-tag v-if="scope.row.status == 1" type="danger">审核通过</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400">
<template #default="scope">
<span v-hasPermi="['file:resource:review']">
@ -99,7 +110,7 @@
<el-tooltip v-hasPermi="['file:resource:copy']" v-if="isTree" content="复制" placement="top">
<el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row)">复制</el-button>
</el-tooltip>
<el-tooltip v-if="isTree" content="删除" placement="top">
<el-tooltip content="删除" placement="top">
<el-button v-hasPermi="['file:resource:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)">删除</el-button>
</el-tooltip>
@ -127,27 +138,6 @@
</template>
</el-dialog>
<el-dialog v-model="previewDialog.visible" :title="previewDialog.title" width="900px" append-to-body
@closed="handlePreviewClose">
<vue-office-docx v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.doc' || currentFile.fileSuffix == '.docx'" :src="file" />
<vue-office-excel v-loading="fileLoading" element-loading-text="加载中..." :options="options"
style="height: 100vh;width: 100vh;"
v-if="currentFile.fileSuffix == '.xls' || currentFile.fileSuffix == '.xlsx'" :src="file" />
<vue-office-pdf style="height: 100vh" v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.pdf' || currentFile.fileSuffix == '.ppt' || currentFile.fileSuffix == '.pptx'"
:src="file" />
<div v-loading="fileLoading" element-loading-text="加载中..." v-if="currentFile.fileSuffix == '.txt'"
style="white-space: pre-wrap;">{{ txt }}
</div>
<ImagePreview v-loading="fileLoading" element-loading-text="加载中..." style="width: 100%; text-align: center;"
v-if="imgSuffix.includes(currentFile.fileSuffix)" :src="imgUrl" />
</el-dialog>
<el-dialog v-model="treeMoveDialog.visible" :title="treeMoveDialog.title" width="500px" append-to-body>
<el-form ref="treeMoveFormRef" :model="treeMoveForm" :rules="treeMoveRules">
<el-form-item label="移动至" prop="catalogId">
@ -186,32 +176,16 @@
<script setup name="Oss" lang="ts">
import { pageResource, awaitResourceList, previewResource, previewResourceTxt, delResource, addResource, reviewResource, copyResource, moveResource } from '@/api/system/oss';
import ImagePreview from '@/components/ImagePreview/index.vue';
import FileMd5Upload from '@/components/FileMd5Upload/index.vue';
import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
import { listCatalogResource } from "@/api/resource/catalogResource";
import { CatalogTextbookVO } from '@/api/resource/catalogTextbook/types';
import { Base64 } from 'js-base64'
import { useVolume } from "@/composables/useVolume";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { volume } = useVolume(1);
const fileSuffix = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf']
const imgSuffix = ['.jpg', '.png', '.jpeg', '.gif', '.bmp']
const formatOptions = [
{
value: '.doc',
@ -526,49 +500,10 @@ const handleNode = (node: any) => {
getList()
}
const options = ref({
xls: false, //预览xlsx文件设为false；预览xls文件设为true
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
})
const fileLoading = ref(false)
const currentFile = ref()
const file = ref('')
const txt = ref('')
const imgUrl = ref('')
const preViewUrl = import.meta.env.VITE_APP_PREVIEW
const handlePreview = async (row: any) => {
file.value = ''
txt.value = ''
imgUrl.value = ''
fileLoading.value = true
previewDialog.visible = true
currentFile.value = row
if (row.fileSuffix == '.txt') {
const fileRes = await previewResourceTxt(row.id)
console.log(fileRes)
txt.value = fileRes
} else if (imgSuffix.includes(row.fileSuffix)) {
const fileRes = await previewResource(row.id)
let blob = new Blob([fileRes], { type: `image/${row.fileSuffix.substring(1)}` })
imgUrl.value = URL.createObjectURL(blob)
} else if (fileSuffix.includes(row.fileSuffix)) {
const fileRes = await previewResource(row.id)
fileRes.arrayBuffer().then(res => file.value = res)
}
fileLoading.value = false
}
const handlePreviewClose = () => {
file.value = ''
txt.value = ''
imgUrl.value = ''
const fileRes = await previewResource(row.id)
window.open(`${preViewUrl}?url=${encodeURIComponent(Base64.encode(fileRes.data))}`, '__blank')
}
const treeLoading = ref(false)
@ -601,13 +536,17 @@ onMounted(() => {
.top {
margin: 0 20px;
.tree-container-scroll {
height: calc(100vh - 300px);
}
}
.bottom {
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-bottom: 10px;
font-size: 18px;
}

112
src/views/resourceMgt/catalogTextbookMgt/index.vue
View File

@ -14,12 +14,16 @@
<br>
<el-button v-hasPermi="['file:textbook:awaitList']" :class="['btn-audit', isAudit && 'active']" type=""
text="plain" @click="handleAudit">待审核</el-button>
<el-tree ref="treeRef" v-loading="treeLoading" :data="treeData" :props="defaultProps" default-expand-all
@node-click="handleNode" />
<div class="tree-container-scroll">
<el-scrollbar>
<el-tree ref="treeRef" v-loading="treeLoading" :data="treeData" :props="defaultProps" default-expand-all
@node-click="handleNode" />
</el-scrollbar>
</div>
</div>
<div class="bottom" v-if="volume">
<span>资源空间:{{ volume.useVolume }}MB / {{ volume.totalVolume }}TB</span>
<el-progress :percentage="55" />
<span>资源空间:{{ volume.useVolumename }} / {{ volume.totalVolumeName }}</span>
<el-progress :percentage="volume.volumePercent" />
</div>
</div>
</el-col>
@ -74,12 +78,19 @@
<el-table-column label="课件格式" align="center" prop="fileSuffix" />
<el-table-column label="课件大小" align="center" prop="volume" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="审核状态" align="center" prop="status">
<template #default="scope">
<el-tag v-if="scope.row.status == -1" type="warning">待审核</el-tag>
<el-tag v-if="scope.row.status == 0" type="success">审核不通过</el-tag>
<el-tag v-if="scope.row.status == 1" type="danger">审核通过</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400">
<template #default="scope">
<span v-hasPermi="['file:textbook:review']">
@ -106,7 +117,7 @@
<el-tooltip v-hasPermi="['file:textbook:copy']" v-if="isTree" content="复制" placement="top">
<el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row)">复制</el-button>
</el-tooltip>
<el-tooltip v-if="isTree" content="删除" placement="top">
<el-tooltip content="删除" placement="top">
<el-button v-hasPermi="['file:textbook:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)">删除</el-button>
</el-tooltip>
@ -134,27 +145,6 @@
</template>
</el-dialog>
<el-dialog v-model="previewDialog.visible" :title="previewDialog.title" width="900px" append-to-body
@closed="handlePreviewClose">
<vue-office-docx v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.doc' || currentFile.fileSuffix == '.docx'" :src="file" />
<vue-office-excel v-loading="fileLoading" element-loading-text="加载中..." :options="options"
style="height: 100vh;width: 100vh;"
v-if="currentFile.fileSuffix == '.xls' || currentFile.fileSuffix == '.xlsx'" :src="file" />
<vue-office-pdf style="height: 100vh" v-loading="fileLoading" element-loading-text="加载中..."
v-if="currentFile.fileSuffix == '.pdf' || currentFile.fileSuffix == '.ppt' || currentFile.fileSuffix == '.pptx'"
:src="file" />
<div v-loading="fileLoading" element-loading-text="加载中..." v-if="currentFile.fileSuffix == '.txt'"
style="white-space: pre-wrap;">{{ txt }}
</div>
<ImagePreview v-loading="fileLoading" element-loading-text="加载中..." style="width: 100%; text-align: center;"
v-if="imgSuffix.includes(currentFile.fileSuffix)" :src="imgUrl" />
</el-dialog>
<el-dialog v-model="treeMoveDialog.visible" :title="treeMoveDialog.title" width="500px" append-to-body>
<el-form ref="treeMoveFormRef" :model="treeMoveForm" :rules="treeMoveRules">
<el-form-item label="移动至" prop="catalogId">
@ -193,31 +183,16 @@
<script setup name="Oss" lang="ts">
import { pageTextbook, awaitTexbookList, previewTextbook, previewTextbookTxt, delTextbook, addTextbook, reviewTextbook, copyTextbook, moveTextbook } from '@/api/system/oss';
import ImagePreview from '@/components/ImagePreview/index.vue';
import FileMd5Upload from '@/components/FileMd5Upload/index.vue';
import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
import { listCatalogTextbook } from "@/api/resource/catalogTextbook";
import { CatalogTextbookVO } from '@/api/resource/catalogTextbook/types';
import { Base64 } from 'js-base64'
import { useVolume } from "@/composables/useVolume";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { volume } = useVolume(1);
const fileSuffix = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf']
const imgSuffix = ['.jpg', '.png', '.jpeg', '.gif', '.bmp']
const formatOptions = [
{
value: '.doc',
@ -503,49 +478,10 @@ const handleNode = (node: any) => {
getList()
}
const options = ref({
xls: false, //预览xlsx文件设为false；预览xls文件设为true
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
})
const fileLoading = ref(false)
const currentFile = ref()
const file = ref('')
const txt = ref('')
const imgUrl = ref('')
const preViewUrl = import.meta.env.VITE_APP_PREVIEW
const handlePreview = async (row: any) => {
file.value = ''
txt.value = ''
imgUrl.value = ''
fileLoading.value = true
previewDialog.visible = true
currentFile.value = row
if (row.fileSuffix == '.txt') {
const fileRes = await previewTextbookTxt(row.id)
console.log(fileRes)
txt.value = fileRes
} else if (imgSuffix.includes(row.fileSuffix)) {
const fileRes = await previewTextbook(row.id)
let blob = new Blob([fileRes], { type: `image/${row.fileSuffix.substring(1)}` })
imgUrl.value = URL.createObjectURL(blob)
} else if (fileSuffix.includes(row.fileSuffix)) {
const fileRes = await previewTextbook(row.id)
fileRes.arrayBuffer().then(res => file.value = res)
}
fileLoading.value = false
}
const handlePreviewClose = () => {
file.value = ''
txt.value = ''
imgUrl.value = ''
const fileRes = await previewTextbook(row.id)
window.open(`${preViewUrl}?url=${encodeURIComponent(Base64.encode(fileRes.data))}`, '__blank')
}
const treeLoading = ref(false)
@ -578,13 +514,17 @@ onMounted(() => {
.top {
margin: 0 20px;
.tree-container-scroll {
height: calc(100vh - 300px);
}
}
.bottom {
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-bottom: 10px;
font-size: 18px;
}