基础文件上传核心开发

src/main/file.js

@@ -5,13 +5,27 @@ import { dialog } from 'electron'
 const manager = new ElectronDownloadManager()
 export default async function ({ app, shell, BrowserWindow, ipcMain }) {
   const userDataPath = app.getPath('userData')
+  const appRootFilePath = userDataPath + '\\selfFile\\'
+  ipcMain.on('is-have-local-file', (e, fileNewName) => {
+    let filePath = appRootFilePath + fileNewName
+    fs.access(filePath, fs.constants.F_OK, (err) => {
+      if (err) {
+        e.reply('is-have-local-file-reply'+fileNewName, false)
+        return
+      }
+      e.reply('is-have-local-file-reply'+fileNewName, true)
+    })
+  })
   //默认浏览器打开url
   ipcMain.on('open-url-browser', (e, url) => {
     shell.openPath(url)
   })
   //使用默认应用打开本地文件
-  ipcMain.on('open-path-app', (e, path) => {
+  ipcMain.on('open-path-app', (e, destination) => {
-    shell.openExternal(path)
+    let path = appRootFilePath + destination
+    shell.openExternal(path).catch((error) => {
+      console.log(error)
+    })
   })
 
   //复制文件
@@ -21,32 +35,42 @@ export default async function ({ app, shell, BrowserWindow, ipcMain }) {
     })
   })
 
+  //获取应用文件目录
+  ipcMain.on('get-root-file-path', (e) => {
+    e.reply('get-root-file-path-reply', appRootFilePath)
+  })
+
   //下载文件
-  ipcMain.on('download-file-default', (e, url) => {
+  ipcMain.on('download-file-default', (e, { url, fileName }) => {
     createFolder('selfFile').then(async () => {
       const browserWindow = BrowserWindow.fromId(e.sender.id)
       const id = await manager.download({
         window: browserWindow,
         url: url,
-        directory: userDataPath + '/selfFile/',
+        saveAsFilename: fileName,
+        directory: appRootFilePath,
         callbacks: {
           onDownloadStarted: async ({ id, item, webContents }) => {
             // Do something with the download id
           },
           onDownloadProgress: async ({ id, item, percentCompleted }) => {
-            browserWindow.webContents.invoke('download-progress', {
-              id,
-              percentCompleted,
-              // Get the number of bytes received so far
-              bytesReceived: item.getReceivedBytes()
-            })
           },
           onDownloadCompleted: async ({ id, item }) => {
-            console.log(item)
+            console.log('完成')
+            e.reply('download-file-default'+fileName,true)
           },
-          onDownloadCancelled: async () => {},
+          onDownloadCancelled: async () => {
-          onDownloadInterrupted: async () => {},
+            console.log('取消')
-          onError: (err, data) => {}
+            e.reply('download-file-default'+fileName,false)
+          },
+          onDownloadInterrupted: async () => {
+            console.log('中断')
+            e.reply('download-file-default'+fileName,false)
+          },
+          onError: (err, data) => {
+            console.log(err.toString())
+            e.reply('download-file-default'+fileName,false)
+          }
         }
       })
     })
@@ -59,7 +83,7 @@ export default async function ({ app, shell, BrowserWindow, ipcMain }) {
    * @param {String} fileName 文件名称包括后缀名，例如图1.png
    */
   ipcMain.on('save-as', function (event, url, fileName) {
-    let win = BrowserWindow.getFocusedWindow();
+    let win = BrowserWindow.getFocusedWindow()
     //通过扩展名识别文件类型
     let filters = [{ name: '全部文件', extensions: ['*'] }]
     let ext = path.extname(fileName) //获取扩展名
@@ -101,7 +125,7 @@ export default async function ({ app, shell, BrowserWindow, ipcMain }) {
   })
 
   function copyFile(source, destination, callback) {
-    let path = userDataPath + '\\selfFile\\' + destination
+    let path = appRootFilePath + destination
     createFolder('selfFile').then(() => {
       const readStream = fs.createReadStream(source)
       const writeStream = fs.createWriteStream(path)

src/renderer/src/layout/components/Uploader.vue

@@ -63,6 +63,7 @@ import uploaderState from '@/store/modules/uploader'
 import { getToken } from '@/utils/auth'
 import CryptoJS from 'crypto-js'
 import { DeleteFilled } from '@element-plus/icons-vue'
+const { ipcRenderer } = window.electron || {}
 export default {
   name: 'Uploader',
   components: { DeleteFilled },
@@ -70,11 +71,6 @@ export default {
     return {
       timer: null,
       uploadDatas: {
-        textbookId: '123',
-        levelFirstId: '123',
-        levelSecondId: '123',
-        fileSource: '平台',
-        fileFlag: '课件'
       },
       uploadUrl: import.meta.env.VITE_APP_BASE_API + '/smarttalk/file/upload',
       headers: {
@@ -98,6 +94,12 @@ export default {
       this.runNowJob()
     }, 1000)
   },
+  mounted() {
+    ipcRenderer.send('get-root-file-path');
+    ipcRenderer.once('get-root-file-path-reply',(e, path)=>{
+      window.rootTalkFilePath = path;
+    })
+  },
   methods: {
     formatFileSize(fileSize) {
       if (fileSize < 1024) {
@@ -118,6 +120,7 @@ export default {
     },
     onSuccess(res, file, files) {
       this.removeUploadFile(file.uid)
+      ipcRenderer.send('copy-file-default',{ source:file.raw.path, destination:res.resData.fileNewName})
       file.callback(res)
     },
     beforeUpload(file) {

src/renderer/src/utils/talkFile/index.js

@@ -0,0 +1,10 @@
+const { ipcRenderer } = window.electron || {}
+
+export const isHaveLocalFile = async (fileNewName)=>{
+  return new Promise((resolve, reject)=>{
+    ipcRenderer.send('is-have-local-file', fileNewName);
+    ipcRenderer.once('is-have-local-file-reply'+fileNewName,(e, isHave)=>{
+      resolve(isHave);
+    })
+  })
+}

src/renderer/src/views/prepare/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="page-resource flex" v-loading="isLoading">
+  <div v-loading="isLoading" class="page-resource flex">
-    <ChooseTextbook @changeBook="changeBook" @node-click="nodeClick" />
+    <ChooseTextbook @change-book="changeBook" @node-click="nodeClick" />
     <div class="page-right">
       <div class="prepare-body-header">
         <div>
@@ -8,72 +8,91 @@
           <el-popover placement="top-start" :width="250" trigger="hover">
             <template #default>
               <div>
-                <el-button type="success" size="small" :icon="Check" circle />
+                <el-button type="success" v-if="lastAsyncAllTime" size="small" :icon="Check" circle />
-                2024-07-11 16:15
+                {{lastAsyncAllTime?(toTimeText(lastAsyncAllTime) + '同步成功'):''}}
-                同步成功
               </div>
             </template>
             <template #reference>
-              <el-button size="small" text
+              <el-button size="small" @click="asyncAllFile" text>
-              >
+                <el-icon v-loading="asyncAllFileVisiable">
-                <el-icon>
                   <Refresh />
                 </el-icon>
-                云同步
+                {{asyncAllFileVisiable?'同步中':'云同步'}}
-              </el-button
+              </el-button>
-              >
             </template>
           </el-popover>
         </div>
         <div style="display: flex">
-          <el-button @click="isDialogOpen=true">上传资料</el-button>
+          <el-button @click="isDialogOpen = true">上传资料</el-button>
           <el-button type="primary" style="margin-left: 10px">新建课件</el-button>
         </div>
       </div>
       <div class="prepare-body-main">
-        <div v-for="(item,index) in currentFileList" :key="index" class="prepare-body-main-item">
+        <div
-          <div class="prepare-body-main-item-icon">
+          v-for="(item, index) in currentFileList"
-            <svg class="icon" aria-hidden="true" font-size="50px" color="red" style="margin: auto">
+          :key="index"
-              <use xlink:href="#icon-ppt"></use>
+          class="prepare-body-main-item"
-            </svg>
+        >
+          <div class="prepare-body-main-item-icon" @click="openFileWin(item)">
+            <FileImage :size="50" :file-name="item.fileShowName" />
+          </div>
+          <div class="prepare-body-main-item-info" @click="openFileWin(item)">
+            <div class="prepare-item-info-title" :title="item.fileShowName">
+              {{ item.fileShowName }}
             </div>
-          <div class="prepare-body-main-item-info">
-            <div class="prepare-item-info-title">{{ item.fileShowName }}</div>
             <div class="prepare-item-info-message">
               <div style="width: 80px">
                 <el-icon
+                  v-loading="item.async === 'on'"
                   style="background-color: green; border-radius: 20px; color: white; top: 2px"
                 >
-                  <Check />
+                  <Check v-if="item.async === true" />
-                </el-icon
+                  <UploadFilled v-if="!item.async" />
-                >
+                </el-icon>
-                已同步
+                {{ item.async === true ? '已同步' : '' }}
+                {{ !item.async ? '待同步' : '' }}
+                {{ item.async === 'on' ? '同步中' : '' }}
               </div>
               |
               <div style="width: 80px">{{ formatFileSize(item.fileSize) }}</div>
               |
               <div style="width: 100px">{{ toTimeText(item.uploadTime, true) }}</div>
               |
-              <div style="white-space: nowrap;
+              <div
-            overflow: hidden;
+                style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-            text-overflow: ellipsis;" :title="item.levelFirstName + (item.levelSecondName ? ' > ' + item.levelSecondName : '') + (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '')">
+                :title="
-                {{ item.levelFirstName + (item.levelSecondName ? ' > ' + item.levelSecondName : '') + (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '') }}
+                  item.levelFirstName +
+                  (item.levelSecondName ? ' > ' + item.levelSecondName : '') +
+                  (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '')
+                "
+              >
+                {{
+                  item.levelFirstName +
+                  (item.levelSecondName ? ' > ' + item.levelSecondName : '') +
+                  (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '')
+                }}
               </div>
             </div>
           </div>
           <div class="prepare-body-main-item-tool">
-            <el-popover placement="left-start" :hide-after="100" :ref="'popover_'+index" popper-class="prepare-popper" trigger="click">
+            <el-popover
+              :ref="'popover_' + index"
+              placement="left-start"
+              :hide-after="100"
+              popper-class="prepare-popper"
+              trigger="click"
+            >
               <template #default>
-                <div style="width: 100%;">
+                <div style="width: 100%">
-                  <div class="item-popover">
+                  <div class="item-popover" @click="closePopver(index)">
                     <div class="item-popover-item">
-                      <el-button text @click="editTalk(item,index)">
+                      <el-button text @click="editTalk(item, index)">
                         <i class="iconfont icon-bianji"></i>
                         <span>重命名</span>
                       </el-button>
                     </div>
                     <div class="item-popover-item">
-                      <el-button text @click="deleteTalk(item);closePopver(index)">
+                      <el-button text @click="deleteTalk(item)">
                         <i class="iconfont icon-shanchu"></i>
                         <span>删除</span>
                       </el-button>
@@ -84,52 +103,53 @@
                         <span>下载</span>
                       </el-button>
                     </div>
+                    <div class="item-popover-item">
+                      <el-button text>
+                        <el-icon><Switch /></el-icon>
+                        <span>移动</span>
+                      </el-button>
+                    </div>
                   </div>
                 </div>
               </template>
               <template #reference>
-                <span class="iconfont icon-shenglvehao" style="cursor: pointer"></span>
+                <span class="iconfont icon-shenglvehao" style="cursor: pointer" @click.stop></span>
               </template>
             </el-popover>
           </div>
         </div>
       </div>
     </div>
-    <uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
+    <uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
   </div>
 </template>
 <script setup>
-import { Check } from '@element-plus/icons-vue'
+import { Check, UploadFilled, Switch } from '@element-plus/icons-vue'
-import ChooseTextbook from '@/components/choose-textbook/index.vue'
-import { deleteSmarttalk } from '@/api/file'
 </script>
 <script>
-import FileUpload from '@/components/file-upload/index.vue'
 import ChooseTextbook from '@/components/choose-textbook/index.vue'
-import ResoureList from '@/views/resource/container/resoure-list.vue'
-import ResoureSearch from '@/views/resource/container/resoure-search.vue'
 import uploadDialog from '@/components/upload-dialog/index.vue'
 import { Refresh } from '@element-plus/icons-vue'
 import uploaderState from '@/store/modules/uploader'
+import FileImage from '@/components/file-image/index.vue'
 import { deleteSmarttalk, getSmarttalkPage, updateSmarttalk } from '@/api/file'
 import { toTimeText } from '@/utils/date'
 import { ElMessage, ElMessageBox } from 'element-plus'
-// import { getSmarttalkPage } from '@/api/file'
+import { isHaveLocalFile } from '@/utils/talkFile'
 const { ipcRenderer } = window.electron || {}
 export default {
   name: 'Prepare',
-  components: { ResoureSearch, ResoureList, ChooseTextbook, FileUpload, Refresh, uploadDialog },
+  components: { ChooseTextbook, Refresh, uploadDialog, FileImage },
   data() {
     return {
+      asyncAllFileVisiable: false,
       isLoading: false,
       isDialogOpen: false,
       showToolVisible: false,
       fileList: [],
       currentNode: {},
       currentFileList: [],
-      // fileUrl:
+      lastAsyncAllTime: '',
-      //   'https://wzyzoss.eos-chongqing-3.cmecloud.cn/2024/7/10/117cdf208c6b4e58bf2b73369eaf3cb5.pptx',
-      // filePath: 'C:/Users/zhuhao/Desktop/工作文档/0901高一【数学(人教A版)】集合的概念-PPT课件.pptx',
       uploadData: {
         textbookId: null,
         levelFirstId: 39103,
@@ -144,10 +164,9 @@ export default {
     ipcRenderer.on('copy-file-default-reply', (e, param) => {
       this.callback(param)
     })
+    this.lastAsyncAllTime = localStorage.getItem('lastAsyncAllTime')
   },
   mounted() {
-    //查询所有选中目录下的所有文件
-
     // const destination = '0901高一【数学(人教A版)】集合的概念-PPT课件.pptx'
     // ipcRenderer.send('open-path-app',this.filePath)
     // const source = 'D:\\edufile\\0901高一【数学(人教A版)】集合的概念-PPT课件.pptx'
@@ -156,21 +175,68 @@ export default {
     // getSmarttalkPage({nowPage:1,pageSize:2}).then(res=>{
     //   console.log(res)
     // })
+    // let filePath = window.rootTalkFilePath + item.fileNewName
   },
   methods: {
+    async asyncAllFile() {
+      this.lastAsyncAllTime = new Date()
+      localStorage.setItem('lastAsyncAllTime',this.lastAsyncAllTime)
+      let arr = [];
+      this.asyncAllFileVisiable = true;
+      const test = (item) => {
+        return new Promise((resolve, reject)=>{
+          isHaveLocalFile(item.fileNewName).then((res) => {
+            item.async = res
+            if (res===false) {
+              ipcRenderer.send('download-file-default', {
+                url: item.fileFullPath,
+                fileName: item.fileNewName
+              })
+              item.async = 'on'
+              ipcRenderer.once('download-file-default' + item.fileNewName, (e, isSuccess) => {
+                item.async = isSuccess
+                resolve()
+              })
+            }else {
+              resolve()
+            }
+          })
+        })
+      }
+      for (let i = 0; i < this.currentFileList.length; i++) {
+        await test(this.currentFileList[i])
+      }
+      this.asyncAllFileVisiable = false;
+    },
+    openFileWin(item) {
+      isHaveLocalFile(item.fileNewName).then((res) => {
+        if (res === true) {
+          ipcRenderer.send('open-path-app', item.fileNewName)
+        } else {
+          item.async = 'on'
+          ipcRenderer.once('download-file-default' + item.fileNewName, (e, isSuccess) => {
+            item.async = isSuccess
+          })
+          ipcRenderer.send('download-file-default', {
+            url: item.fileFullPath,
+            fileName: item.fileNewName
+          })
+        }
+      })
+    },
     formatFileSize(fileSize) {
       if (fileSize < 1024) {
         return fileSize + 'B'
-      } else if (fileSize < (1024 * 1024)) {
+      } else if (fileSize < 1024 * 1024) {
-        var temp = fileSize / 1024
+        let temp = fileSize / 1024
         temp = temp.toFixed(2)
         return temp + 'KB'
-      } else if (fileSize < (1024 * 1024 * 1024)) {
+      } else if (fileSize < 1024 * 1024 * 1024) {
-        var temp = fileSize / (1024 * 1024)
+        let temp = fileSize / (1024 * 1024)
         temp = temp.toFixed(2)
         return temp + 'MB'
       } else {
-        var temp = fileSize / (1024 * 1024 * 1024)
+        let temp = fileSize / (1024 * 1024 * 1024)
         temp = temp.toFixed(2)
         return temp + 'GB'
       }
@@ -179,43 +245,53 @@ export default {
       ElMessageBox.prompt('请输入新的名称', '重命名', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
-        inputValue: item.fileShowName.substring(0,item.fileShowName.lastIndexOf('.')),
+        inputValue: item.fileShowName.substring(0, item.fileShowName.lastIndexOf('.'))
       })
         .then(({ value }) => {
-          item.fileShowName = value;
+          item.fileShowName = value + '.' + item.fileSuffix
-          updateSmarttalk({id:item.id,fileShowName:item.fileShowName}).then(res=>{
+          updateSmarttalk({ id: item.id, fileShowName: item.fileShowName }).then((res) => {
-            if (res.data===true) {
+            if (res.data === true) {
               ElMessage({
                 type: 'success',
-                message: `修改成功！`,
+                message: `修改成功！`
               })
             }
           })
         })
-        .catch(() => {
+        .catch(() => {})
-        })
     },
     downloadFile(item) {
-      ipcRenderer.send('save-as',item.fileFullPath,item.fileShowName)
+      ipcRenderer.send('save-as', item.fileFullPath, item.fileShowName)
     },
     deleteTalk(item) {
-      deleteSmarttalk(item.id).then(res=>{
+      deleteSmarttalk(item.id).then((res) => {
-        let index = this.currentFileList.indexOf(item);
+        if (res.data === true) {
-        this.currentFileList.splice(index,1)
+          let index = this.currentFileList.indexOf(item)
-      })
+          this.currentFileList.splice(index, 1)
-    },
+        }
-    closePopver(index){
+      })
-      this.$refs['popover_'+index][0].hide();
+    },
-    },
+    closePopver(index) {
-    submitFile(files) {
+      this.$refs['popover_' + index][0].hide()
-      let _this = this;
+    },
-      files.filter(file => {
+    submitFile(files) {
-        file.fileData = Object.assign(this.uploadData, file.fileData)
+      let _this = this
-        file.callback = function(res) {
+      files.filter((file) => {
-          _this.currentFileList.unshift(res.resData);
+        file.fileData = Object.assign(JSON.parse(JSON.stringify(this.uploadData)), file.fileData)
+        file.callback = function (res) {
+          if (
+            res.resData.levelFirstId == _this.uploadData.levelFirstId &&
+            res.resData.levelSecondId == _this.uploadData.levelSecondId &&
+            res.resData.levelThirdId == _this.uploadData.levelThirdId
+          ) {
+            _this.currentFileList.unshift(res.resData)
+            ElMessage({
+              type: 'success',
+              message: `${res.resData.fileShowName}上传成功！`
+            })
+          }
         }
       })
-      console.log(files)
       uploaderState().pushFile(files)
       this.fileList = []
     },
@@ -230,21 +306,31 @@ export default {
       this.nodeClick(data)
     },
     nodeClick(data) {
+      if (this.currentNode.id === data.node.id) return
       let cata = this.parseCataByNode(data.node)
       this.currentNode = data.node
-      this.uploadData.levelFirstId = cata.length > 0 ? cata[0] : null
+      this.uploadData.levelFirstId = cata.length > 0 ? cata[0] : ''
-      this.uploadData.levelSecondId = cata.length > 1 ? cata[1] : null
+      this.uploadData.levelSecondId = cata.length > 1 ? cata[1] : ''
-      this.uploadData.levelThirdId = cata.length > 2 ? cata[2] : null
+      this.uploadData.levelThirdId = cata.length > 2 ? cata[2] : ''
       this.uploadData.textbookId = data.textBook.curBookId
       this.isLoading = true
       getSmarttalkPage({
         ...this.uploadData,
         orderByColumn: 'uploadTime',
-        isAsc: 'desc'
+        isAsc: 'desc',
-      }).then(res => {
+        pageSize: 500
+      })
+        .then((res) => {
           this.currentFileList = [...res.rows]
           this.isLoading = false
-      }).catch(res => {
+          this.currentFileList.filter((item) => {
+            isHaveLocalFile(item.fileNewName).then((res) => {
+              item.async = res
+            })
+          })
+        })
+        .catch((res) => {
+          console.log(res)
           this.isLoading = false
         })
     },
@@ -280,9 +366,20 @@ export default {
     color: #a2a2a2;
   }
 }
+.prepare-item-info-message {
+  .circular {
+    width: 100% !important;
+  }
+}
+.prepare-body-header{
+  .circular {
+    width: 100% !important;
+  }
+}
 </style>
 <style scoped lang="scss">
 .page-resource {
+  user-select: none;
   padding-top: 20px;
   height: 100%;
 
@@ -326,13 +423,15 @@ export default {
 
         .prepare-body-main-item-icon {
           width: 80px;
+          display: flex;
+          justify-content: center;
         }
 
         .prepare-body-main-item-tool {
           font-size: 18px !important;
           font-weight: bold;
-          text-align: right;
+          width: 40px;
-          padding-right: 30px;
+          text-align: center;
         }
 
         .prepare-body-main-item-info {
@@ -354,6 +453,9 @@ export default {
             line-height: 23px;
             color: #909399;
             display: flex;
+            .circular {
+              width: 100% !important;
+            }
           }
         }
       }