zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 18 Wiki Activity

Merge pull request '资源修改' (#26) from lyc-dev into main

This commit is contained in:
lyc 2024-07-16 16:26:18 +08:00
parent b77d64639b 42f3689066
commit 6e0eafb958
9 changed files with 251 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/src/components/file-image/index.vue
View File

@ -29,6 +29,13 @@ const getFileTypeIcon = () => {
docx: 'icon-word',
mp4: 'icon-video',
mov: 'icon-mov',
avi: 'icon-avi',
jpeg: 'icon-jpeg',
jpg: 'icon-jpg',
png: 'icon-png',
gif: 'icon-gif',
txt: 'icon-txt',
rar: 'icon-rar',
}
return '#' + iconObj[name]

95
src/renderer/src/components/upload-dialog/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog v-model="dialogValue" width="630" :before-close="beforeClose">
<el-dialog v-model="dialogValue" width="630" :before-close="beforeClose" style="border-radius: 5px;">
<div class="file-dialog">
<el-form>
<el-form-item label="文件">
@ -16,8 +16,9 @@
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
<div class="file-name">
<span class="name">标题：</span>
<FileImage :fileName="item.name" />
<span class="text">{{ item.name }}</span>
<FileImage :fileName="item.name" size="50"/>
<el-input class="file-input" v-model="item.fileData.name" placeholder="请输入文件名" />
<span>.{{ getFileSuffix(item.name) }}</span>
</div>
<div class="flex-type flex">
<span class="name">类别：</span>
@ -47,6 +48,9 @@
import { ref, defineProps, defineEmits, watch } from 'vue'
import FileImage from '@/components/file-image/index.vue'
import { ElMessage } from 'element-plus'
import { resourceType } from '@/utils/resourceDict'
import { getFileSuffix, getFileName } from '@/utils/ruoyi'
const props = defineProps({
modelValue: {
@ -60,36 +64,14 @@ const emit = defineEmits(['update:modelValue', 'submitFile'])
// 文件列表
const fileList = ref([])
const fileType = ref(1)
// 资源类型
const resourceType = ref([
{
text: '素材',
value: '素材'
},
{
text: '课件',
value: '课件'
},
{
text: '教案',
value: '教案'
}
])
watch(() => props.modelValue, (newVal) => {
dialogValue.value = newVal
})
const hanleFileChange = (file) => {
console.log(file)
// 音频 类型
//音频 类型
const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
// 视频 类型
const videoTypes = ['video/mp4', 'video/webm', 'video/ogg']
@ -99,10 +81,16 @@ const hanleFileChange = (file) => {
const pptTypes = ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
// pdf 类型
const pdfTypes = ['application/pdf']
// zip 类型
const zipTypes = ['application/x-zip-compressed','application/x-compressed']
// 图片 类型
const imgTypes = ['image/jpeg','image/gif', 'image/png']
// text 类型
const textTypes = ['text/plain']
const fileType = file.raw.type
if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType))) {
ElMessage.error('文件格式错误! 请上传音频、视频、word、ppt、pdf文件!')
if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType) || zipTypes.includes(fileType) || imgTypes.includes(fileType) || textTypes.includes(fileType))) {
ElMessage.error('文件格式错误! 请上传图片、音频、视频、word、ppt、pdf、text、zip文件!')
return false
}
// 验证文件大小
@ -112,28 +100,17 @@ const hanleFileChange = (file) => {
return false
}
if (file.status === 'ready') {
// 给一个默认的fileData
file.fileData = {
fileFlag: '课件'
fileFlag: '课件',
name: getFileName(file.name),
}
fileList.value.push(file)
}
}
const getFileTypeIcon = (fileName) => {
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
const iconObj = {
pdf: 'icon-pdf',
ppt: 'icon-ppt',
doc: 'icon-word',
docx: 'icon-word',
mp4: 'icon-video'
}
return '#' + iconObj[name]
}
// 删除
const delFile = (index) => {
fileList.value.splice(index, 1)
@ -152,12 +129,16 @@ const closeDialog = () => {
}
// 确定
const submitFile = () => {
emit('submitFile', fileList.value)
// 修改文件名
fileList.value.forEach((item) => {
let suffix = getFileSuffix(item.name)
item.fileData.fileShowName = item.fileData.name + '.' + suffix
delete item.fileData.name
})
emit('submitFile',fileList.value)
closeDialog()
}
</script>
<style lang="scss" scoped>
@ -184,7 +165,7 @@ const submitFile = () => {
margin-bottom: 15px;
.file-name {
width: 50%;
width: 55%;
margin-right: 20px;
display: flex;
align-items: center
@ -224,4 +205,24 @@ const submitFile = () => {
}
}
}
.file-input {
border-bottom: solid #dfdfdf 1px;
&:hover {
border-color: #409EFF;
}
&:focus{
border-color: #409EFF;
}
}
:deep(.el-input__wrapper){
box-shadow: none
}
:deep(.el-input__wrapper.is-focus){
box-shadow: none
}
:deep(.el-input__wrapper:hover){
box-shadow: none
}
</style>

65
src/renderer/src/utils/resourceDict.js Normal file
View File

@ -0,0 +1,65 @@
export const tabs = [
{
label: '平台资源',
value: '平台'
},
{
label: '校本资源',
value: '校本'
}
]
// 资源格式
export const resourceFormat = [
{
label: 'word',
value: 'word'
},
{
label: 'ppt',
value: 'ppt'
},
{
label: 'mp3',
value: 'mp3'
},
{
label: 'mp4',
value: 'mp4'
},
{
label: 'JPG',
value: 'jpg'
},
{
label: 'PNG',
value: 'png'
},
{
label: 'RAR',
value: 'rar'
},
{
label: 'TXT',
value: 'txt'
}
]
// 资源类型
export const resourceType = [
{
label: '素材',
value: '素材'
},
{
label: '课件',
value: '课件'
},
{
label: '教案',
value: '教案'
}
]

12
src/renderer/src/utils/ruoyi.js
View File

@ -245,3 +245,15 @@ export function getNormalPath(p) {
export function blobValidate(data) {
return data.type !== 'application/json'
}
// 获取文件后缀
export const getFileSuffix = (filename) => {
return filename.substring(filename.lastIndexOf('.') + 1);
}
// 获取文件名（不带后缀）
export const getFileName = (filename) => {
// 使用正则表达式匹配文件名部分（不包括后缀）
if(!filename) return
return filename.replace(/\.[^/.]+$/, "");
}

80
src/renderer/src/views/resource/container/create-resoure.vue
View File

@ -1,80 +0,0 @@
<template>
<div class="create-resoure">
<el-page-header @back="goBack">
<template #content>
<span class="font-600 mr-3 header-name"> 上传备课资源 </span>
</template>
</el-page-header>
<div class="create-main">
<el-form>
<el-form-item label="目录">
<div class="create-item">第二章 地球上的大气 / 大气的组成和垂直分层</div>
</el-form-item>
<el-form-item label="文件">
<div class="create-item file-item flex">
<FileUpload/>
<!-- <el-button round size="small" color="#eeeeee" class="add-btn">
<i class="iconfont icon-jiahao"></i>
添加文件
</el-button> -->
<span class="upload-desc">说明：一次最多上传5个文件，单个文件大小不能大于100M</span>
</div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import useResoureStore from '../store'
import FileUpload from '@/components/file-upload/index.vue'
const sourceStore = useResoureStore()
const goBack = () => {
sourceStore.isCreate = false
}
</script>
<style lang="scss" scoped>
.create-resoure {
.el-page-header {
padding: 10px 15px;
border-bottom: solid #ececec 1px;
.header-name {
font-size: 16px;
}
}
.create-main{
font-size: 12px;
padding: 40px;
.el-form-item{
margin-bottom: 30px;
}
.create-item{
font-size: 13px;
width: 100%;
text-align: left;
border-bottom: solid #e0e0e0 1px;
.add-btn{
padding: 13px 11px;
}
.icon-jiahao{
font-size: 14px;
margin-right: 5px;
}
.upload-desc{
margin-left: 10px;
font-size: 12px;
color: #b7b7b7;
}
}
.file-item{
padding-bottom: 15px;
}
}
}
</style>

55
src/renderer/src/views/resource/container/resoure-list.vue
View File

@ -7,26 +7,25 @@
<div class="item-left flex">
<FileImage :fileName="item.fileName" :size="50" />
<div class="flex item-left-content">
<div class="name flex">{{ item.fileName }}</div>
<div class="name flex">{{ item.fileShowName }}</div>
<div class="item-tags flex">
<el-tag type="info" class="mr-10">教案</el-tag>
<el-tag type="info" class="mr-10">PPT</el-tag>
<el-tag type="info" class="mr-10">{{ item.fileFlag }}</el-tag>
<el-tag type="info" class="mr-10">{{ getFileSuffix(item.fileName) }}</el-tag>
<span class="gray-text mr-10">{{ item.uploadTime }}上传</span>
<span class="line mr-10"></span>
<span class="gray-text mr-10">下载3次</span>
<!-- <span class="line mr-10"></span>
<span class="gray-text mr-10">下载3次</span> -->
</div>
</div>
</div>
<div class="item-btns" @click.stop>
<el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
<el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
:visible="item.showPopover">
<template #reference>
<el-button link type="primary" > <i
class="iconfont icon-shenglvehao"></i></el-button>
<el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
</template>
<template #default>
<div class="item-popover">
<div class="item-popover-item">
<div class="item-popover-item" @click="editRow(item)">
<i class="iconfont icon-bianji"></i>
<span>编辑</span>
</div>
@ -34,7 +33,7 @@
<i class="iconfont icon-shanchu"></i>
<span>删除</span>
</div>
<div class="item-popover-item">
<div class="item-popover-item" @click="downloadFile(item)">
<i class="iconfont icon-xiazai"></i>
<span>下载</span>
</div>
@ -59,15 +58,44 @@
</template>
<script setup>
import { deleteSmarttalk } from '@/api/file'
import useResoureStore from '../store'
import { ElMessage, ElMessageBox } from 'element-plus'
import FileImage from '@/components/file-image/index.vue'
import { ElMessage } from 'element-plus'
import { deleteSmarttalk, updateSmarttalk } from '@/api/file'
import { getFileSuffix } from '@/utils/ruoyi'
import useResoureStore from '../store'
const { ipcRenderer } = window.electron || {}
const sourceStore = useResoureStore()
const handleSizeChange = () => { }
const handleCurrentChange = () => { }
// 下载文件
const downloadFile = (item) => {
ipcRenderer.send('save-as', item.fileFullPath, item.fileShowName)
}
const editRow = (item) => {
console.log(item.fileShowName.substring(0, item.fileShowName.lastIndexOf('.')))
ElMessageBox.prompt('请输入新的名称', '重命名', {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputValue: item.fileShowName.substring(0, item.fileShowName.lastIndexOf('.'))
})
.then(({ value }) => {
item.fileShowName = value + '.' + item.fileSuffix
updateSmarttalk({ id: item.id, fileShowName: item.fileShowName }).then((res) => {
if (res.data === true) {
ElMessage({
type: 'success',
message: `修改成功！`
})
sourceStore.handleQuery()
}
})
})
.catch(() => { })
}
// 删除
const delRow = (item) => {
sourceStore.loading = true
@ -79,7 +107,6 @@ const delRow = (item) => {
} finally {
sourceStore.loading = false
}
}
</script>

63
src/renderer/src/views/resource/container/resoure-search.vue
View File

@ -3,7 +3,8 @@
<el-row justify="space-between">
<el-col :span="12" class="tab-btns flex">
<el-button text v-for="item in sourceStore.tabs" :key="item.id"
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''" @click="sourceStore.changeTab(item.value)">{{ item.text
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''"
@click="sourceStore.changeTab(item.value)">{{ item.label
}}</el-button>
</el-col>
<el-col :span="12" class="search-box flex">
@ -12,63 +13,30 @@
</el-row>
<el-row class="resoure-btns">
<el-col :span="24" class="query-row flex">
<div class="flex"> <el-select v-model="sourceStore.query.fileSuffix" placeholder="Select" size="small"
<div class="flex row-left"> <el-select v-model="sourceStore.query.fileSuffix"
style="width: 100px">
<el-option v-for="item in sourceStore.formatList" :key="item.value" :label="item.label"
<el-option v-for="item in sourceStore.resourceFormatList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<div class="line"></div>
<el-button size="small" v-for="item in sourceStore.typeList" :key="item.id"
:type="sourceStore.query.fileFlag == item.value ? 'primary' : ''" round @click="sourceStore.changeType(item.value)">{{
item.text }}</el-button>
<el-button v-for="item in sourceStore.resourceTypeList" :key="item.id"
:type="sourceStore.query.fileFlag == item.value ? 'primary' : ''" round
@click="sourceStore.changeType(item.value)">{{
item.label }}</el-button>
</div>
<div>
<el-button type="primary" round size="small" @click="openDialog">
<i class="iconfont icon-jiahao"></i>
新建资源</el-button>
<slot name="add" />
</div>
</el-col>
</el-row>
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile"/>
</div>
</template>
<script setup>
import { ref, toRaw } from 'vue'
import useResoureStore from '../store'
import uploadDialog from '@/components/upload-dialog/index.vue'
import uploaderState from '@/store/modules/uploader'
const sourceStore = useResoureStore()
const isDialogOpen = ref(false)
const openDialog = ()=>{
isDialogOpen.value = true
}
const submitFile = (data)=>{
let fileList = toRaw(data)
const { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot} = sourceStore.query
console.log(textBookId)
let fileData = { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot }
fileList.forEach(item => {
fileData.fileFlag = item.fileData.fileFlag
item.fileData = fileData
item.callback = fileCallBack
})
console.log(fileList)
uploaderState().pushFile(fileList)
}
const fileCallBack = (res)=>{
console.log(res)
if(res.code == 200){
sourceStore.handleQuery()
}
}
</script>
<style lang="scss" scoped>
.resoure-search {
@ -91,6 +59,9 @@ const fileCallBack = (res)=>{
.query-row {
justify-content: space-between;
.row-left{
align-items: center;
}
}
.line {
@ -100,12 +71,12 @@ const fileCallBack = (res)=>{
margin: 0 10px;
}
.icon-jiahao {
font-size: 12px;
margin-right: 3px;
font-weight: bold;
}
}
}
.el-button.is-round{
padding: 3px 15px;
font-size: 13px;
}
</style>

60
src/renderer/src/views/resource/index.vue
View File

@ -1,31 +1,42 @@
<template>
<div class="page-resource flex">
<!--左侧 教材 目录-->
<ChooseTextbook @changeBook="changeBook" @nodeClick="nodeClick" />
<div class="page-right">
<template v-if="!sourceStore.isCreate">
<ResoureSearch />
<ResoureList />
</template>
<template v-else>
<CreateResoure/>
</template>
<!-- 搜索 -->
<ResoureSearch #add>
<el-button type="primary" round @click="openDialog" class="create-btn">
<i class="iconfont icon-jiahao"></i>
新建资源</el-button>
</ResoureSearch>
<!-- 列表 -->
<ResoureList />
</div>
</div>
<!-- 上传弹窗 -->
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
</template>
<script setup>
import { onMounted } from 'vue'
import { ref, toRaw } from 'vue'
import useResoureStore from './store'
import ChooseTextbook from '@/components/choose-textbook/index.vue'
import ResoureSearch from './container/resoure-search.vue'
import ResoureList from './container/resoure-list.vue'
import CreateResoure from './container/create-resoure.vue'
import uploadDialog from '@/components/upload-dialog/index.vue'
import uploaderState from '@/store/modules/uploader'
const sourceStore = useResoureStore()
const isDialogOpen = ref(false)
const { ipcRenderer } = window.electron || {}
// ipcRenderer.send('set-winsize',{x:1100,y: 700})
const openDialog = () => {
isDialogOpen.value = true
}
// 切换教材
const changeBook = (data) => {
getData(data)
@ -50,8 +61,30 @@ const getData = (data) => {
sourceStore.handleQuery()
}
// 提交文件
const submitFile = (data) => {
let fileList = toRaw(data)
const { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot } = sourceStore.query
// 给每个文件添加属性
let fileData = { textBookId, levelFirstId, levelSecondId, fileSource, fileRoot }
fileList.forEach(item => {
fileData.fileShowName = item.fileData.fileShowName
fileData.fileFlag = item.fileData.fileFlag
item.fileData = fileData
item.callback = fileCallBack
})
// console.log(fileList)
uploaderState().pushFile(fileList)
}
const fileCallBack = (res) => {
console.log(res)
if (res.code == 200) {
sourceStore.handleQuery()
}
}
</script>
<style lang="scss" scoped>
@ -68,5 +101,14 @@ const getData = (data) => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
}
.icon-jiahao {
font-size: 12px;
margin-right: 3px;
font-weight: bold;
}
}
.create-btn{
font-size: 13px;
padding: 5px 13px;
}
</style>

58
src/renderer/src/views/resource/store.js
View File

@ -1,61 +1,24 @@
import { defineStore } from 'pinia'
import { getSmarttalkPage } from '@/api/file/index'
import { tabs, resourceType, resourceFormat } from '@/utils/resourceDict'
const tabs = [
const resourceTypeList = [
{
text: '平台资源',
value: '平台'
},
{
text: '校本资源',
value: '校本'
}
]
const typeList = [
{
text: '全部',
label: '全部',
value: ''
},
{
text: '素材',
value: '素材'
},
{
text: '课件',
value: '课件'
},
{
text: '教案',
value: '教案'
}
...resourceType
]
// 资源格式
const formatList = [
const resourceFormatList = [
{
label: '资源格式',
value: ''
},
{
label: 'word',
value: 'word'
},
{
label: 'ppt',
value: 'ppt'
},
{
label: 'mp3',
value: 'mp3'
},
{
label: 'mp4',
value: 'mp4'
}
...resourceFormat
]
const structQuery = {
pageNum: 1,
pageSize: 10
@ -64,8 +27,8 @@ const structQuery = {
export default defineStore('resource', {
state: () => ({
tabs,
typeList,
formatList,
resourceTypeList,
resourceFormatList,
curFormat: -1,
searchKey: '',
@ -94,7 +57,6 @@ export default defineStore('resource', {
getSmarttalkPage(this.query).then((res) => {
this.result.total = res.total
this.result.list = res.rows
})
} finally {
this.loading = false