src/renderer/src/components/file-image/index.vue

@@ -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]

src/renderer/src/components/upload-dialog/index.vue

@@ -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" />
+                <FileImage :fileName="item.name" size="50"/>
-                <span class="text">{{ item.name }}</span>
+                <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,34 +64,12 @@ 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']
@@ -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))) {
+  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文件!')
+    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 = () => {
+  // 修改文件名
+  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>

src/renderer/src/utils/resourceDict.js

@@ -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: '教案'
+  }
+]

src/renderer/src/utils/ruoyi.js

@@ -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(/\.[^/.]+$/, "");
+}

src/renderer/src/views/resource/container/create-resoure.vue

@@ -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>

src/renderer/src/views/resource/container/resoure-list.vue

@@ -7,13 +7,13 @@
           <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">{{ item.fileFlag }}</el-tag>
-                <el-tag type="info" class="mr-10">PPT</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="line mr-10"></span>
-                <span class="gray-text mr-10">下载3次</span>
+                <span class="gray-text mr-10">下载3次</span> -->
               </div>
             </div>
           </div>
@@ -21,12 +21,11 @@
             <el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
               :visible="item.showPopover">
               <template #reference>
-                <el-button link type="primary" > <i
+                <el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
-                    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 { ElMessage, ElMessageBox } from 'element-plus'
-import useResoureStore from '../store'
 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>

src/renderer/src/views/resource/container/resoure-search.vue

@@ -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"
+          <el-button v-for="item in sourceStore.resourceTypeList" :key="item.id"
-            :type="sourceStore.query.fileFlag == item.value ? 'primary' : ''" round @click="sourceStore.changeType(item.value)">{{
+            :type="sourceStore.query.fileFlag == item.value ? 'primary' : ''" round
-              item.text }}</el-button>
+            @click="sourceStore.changeType(item.value)">{{
+              item.label }}</el-button>
         </div>
         <div>
-
+          <slot name="add" />
-          <el-button type="primary" round size="small" @click="openDialog">
-            <i class="iconfont icon-jiahao"></i>
-            新建资源</el-button>
         </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>

src/renderer/src/views/resource/index.vue

@@ -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 />
+      <ResoureSearch #add>
+        <el-button type="primary" round @click="openDialog" class="create-btn">
+          <i class="iconfont icon-jiahao"></i>
+          新建资源</el-button>
+      </ResoureSearch>
+      <!-- 列表 -->
       <ResoureList />
-      </template>
-      <template v-else>
-        <CreateResoure/>
-      </template>
     </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>

src/renderer/src/views/resource/store.js

@@ -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: '平台资源',
+    label: '全部',
-    value: '平台'
-  },
-  {
-    text: '校本资源',
-    value: '校本'
-  }
-]
-
-const typeList = [
-  {
-    text: '全部',
     value: ''
   },
-  {
+  ...resourceType
-    text: '素材',
-    value: '素材'
-  },
-
-  {
-    text: '课件',
-    value: '课件'
-  },
-
-  {
-    text: '教案',
-    value: '教案'
-  }
 ]
-// 资源格式
+const resourceFormatList = [
-const formatList = [
   {
     label: '资源格式',
     value: ''
   },
-  {
+  ...resourceFormat
-    label: 'word',
-    value: 'word'
-  },
-  {
-    label: 'ppt',
-    value: 'ppt'
-  },
-  {
-    label: 'mp3',
-    value: 'mp3'
-  },
-  {
-    label: 'mp4',
-    value: 'mp4'
-  }
 ]
 
+
+
 const structQuery = {
   pageNum: 1,
   pageSize: 10
@@ -64,8 +27,8 @@ const structQuery = {
 export default defineStore('resource', {
   state: () => ({
     tabs,
-    typeList,
+    resourceTypeList,
-    formatList,
+    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