2024-07-16 16:26:20 +08:00
9 changed files with 251 additions and 244 deletions
--- a/src/renderer/src/components/file-image/index.vue
+++ b/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]
--- a/src/renderer/src/components/upload-dialog/index.vue
+++ b/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" />
-                <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>
--- a/src/renderer/src/utils/resourceDict.js
+++ b/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: '教案'
+  }
+]
--- a/src/renderer/src/utils/ruoyi.js
+++ b/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(/\.[^/.]+$/, "");
+}
--- a/src/renderer/src/views/resource/container/create-resoure.vue
+++ b/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>
--- a/src/renderer/src/views/resource/container/resoure-list.vue
+++ b/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">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>
@ -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
-                    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>
--- a/src/renderer/src/views/resource/container/resoure-search.vue
+++ b/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"
-            :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>
--- a/src/renderer/src/views/resource/index.vue
+++ b/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>
--- a/src/renderer/src/views/resource/store.js
+++ b/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: '平台资源',
-    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