基础文件上传核心开发

src/renderer/src/api/file/index.js

@@ -8,3 +8,9 @@ export const getSmarttalkPage = (params) => {
     params
   })
 }
+export function deleteSmarttalk(id) {
+  return request({
+    url: '/smarttalk/file/' + id,
+    method: 'delete'
+  })
+}

src/renderer/src/utils/date.js

@@ -0,0 +1,78 @@
+// 判断是不是昨天
+const isYestday = (date) => {
+  var yesterday = new Date(new Date() - 1000 * 60 * 60 * 24)
+  return (
+    yesterday.getYear() === date.getYear() &&
+    yesterday.getMonth() === date.getMonth() &&
+    yesterday.getDate() === date.getDate()
+  )
+}
+
+// 判断是不是今年
+const isYear = (date) => {
+  return date.getYear() === new Date().getYear()
+}
+
+//将时间转为 yy/mm/dd hh:mm:ss
+const formatDateTime = (date) => {
+  if (!date) {
+    return ''
+  }
+  var dateObject = new Date(date)
+  var y = dateObject.getFullYear()
+  var m = dateObject.getMonth() + 1
+  m = m < 10 ? '0' + m : m
+  var d = dateObject.getDate()
+  d = d < 10 ? '0' + d : d
+  var h = dateObject.getHours()
+  h = h < 10 ? '0' + h : h
+  var minute = dateObject.getMinutes()
+  minute = minute < 10 ? '0' + minute : minute
+  var second = dateObject.getSeconds()
+  second = second < 10 ? '0' + second : second
+  return y + '/' + m + '/' + d + ' ' + h + ':' + minute + ':' + second
+}
+
+/**
+ * 将时间戳转换为文本描述。
+ *
+ * 此函数旨在将时间戳转换为更易读的文本格式，以便用户可以更直观地理解时间信息。
+ * 通过传入的时间，函数将生成对应的时间文本，如"刚刚"、"5分钟前"、"昨天"等。
+ * 如果设置了simple参数为true，则会返回更简单的23/06/25，只显示年月日，如果是今年只返回月和日。
+ *
+ * @param {string} timeStamp - 需要转换的时间。
+ * @param {boolean} simple - 是否使用简单的格式，默认为false，如：23/06/25、06/25。
+ * @returns {string} - 转换后的时间文本。
+ */
+export const toTimeText = (timeStamp, simple) => {
+  if (!timeStamp) {
+    return ''
+  }
+  var dateTime = new Date(timeStamp)
+  var currentTime = Date.parse(new Date()) //当前时间
+  var timeDiff = currentTime - dateTime //与当前时间误差
+  var timeText = ''
+  if (timeDiff <= 60000) {
+    //一分钟内
+    timeText = '刚刚'
+  } else if (timeDiff > 60000 && timeDiff < 3600000) {
+    //1小时内
+    timeText = Math.floor(timeDiff / 60000) + '分钟前'
+  } else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) {
+    //今日
+    timeText = formatDateTime(dateTime).substr(11, 5)
+  } else if (isYestday(dateTime)) {
+    //昨天
+    timeText = '昨天' + formatDateTime(dateTime).substr(11, 5)
+  } else if (isYear(dateTime)) {
+    //今年
+    timeText = formatDateTime(dateTime).substr(5, simple ? 5 : 14)
+  } else {
+    //不属于今年
+    timeText = formatDateTime(dateTime)
+    if (simple) {
+      timeText = timeText.substr(2, 8)
+    }
+  }
+  return timeText
+}

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

@@ -8,30 +8,24 @@
           <el-popover placement="top-start" :width="250" trigger="hover">
             <template #default>
               <div>
-                <el-button type="success" size="small" :icon="Check" circle /> 2024-07-11 16:15
+                <el-button type="success" size="small" :icon="Check" circle />
+                2024-07-11 16:15
                 同步成功
               </div>
             </template>
             <template #reference>
               <el-button size="small" text
-                ><el-icon><Refresh /></el-icon>云同步</el-button
+              >
+                <el-icon>
+                  <Refresh />
+                </el-icon>
+                云同步
+              </el-button
               >
             </template>
           </el-popover>
         </div>
         <div style="display: flex">
-<!--          <el-upload
-            ref="choosefile"
-            v-model:file-list="fileList"
-            name="file"
-            :show-file-list="false"
-            :auto-upload="false"
-            :multiple="true"
-            :on-change="chooseFile"
-            class="editor-img-uploader"
-          >
-            <el-button @click="isDialogOpen=true">上传资料</el-button>
-          </el-upload>-->
           <el-button @click="isDialogOpen=true">上传资料</el-button>
           <el-button type="primary" style="margin-left: 10px">新建课件</el-button>
         </div>
@@ -44,38 +38,51 @@
             </svg>
           </div>
           <div class="prepare-body-main-item-info">
-            <div class="prepare-item-info-title">{{item.fileShowName}}</div>
+            <div class="prepare-item-info-title">{{ item.fileShowName }}</div>
             <div class="prepare-item-info-message">
-              <div>
+              <div style="width: 80px">
                 <el-icon
                   style="background-color: green; border-radius: 20px; color: white; top: 2px"
-                  ><Check /></el-icon
-                >已同步
+                >
+                  <Check />
+                </el-icon
+                >
+                已同步
+              </div>
+              |
+              <div style="width: 80px">{{ formatFileSize(item.fileSize) }}</div>
+              |
+              <div style="width: 100px">{{ toTimeText(item.uploadTime, true) }}</div>
+              |
+              <div style="white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;" :title="item.levelFirstName + (item.levelSecondName ? ' > ' + item.levelSecondName : '') + (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '')">
+                {{ item.levelFirstName + (item.levelSecondName ? ' > ' + item.levelSecondName : '') + (item.levelThirdNmae ? ' > ' + item.levelThirdNmae : '') }}
               </div>
-              &nbsp;&nbsp;|&nbsp;&nbsp;
-              <div>{{item.fileSize}}</div>
-              &nbsp;&nbsp;|&nbsp;&nbsp;
-              <div>{{item.uploadTime}}</div>
-              &nbsp;&nbsp;|&nbsp;&nbsp;
-              <div>古诗词诵读 > 静女</div>
             </div>
           </div>
           <div class="prepare-body-main-item-tool">
             <el-popover placement="left-start" popper-class="prepare-popper" trigger="click">
               <template #default>
-                <div style="width: 100%; height: 100px;">
+                <div style="width: 100%;">
                   <div class="item-popover">
                     <div class="item-popover-item">
-                      <i class="iconfont icon-bianji"></i>
-                      <span>编辑</span>
+                      <el-button text>
+                        <i class="iconfont icon-bianji"></i>
+                        <span>编辑</span>
+                      </el-button>
                     </div>
                     <div class="item-popover-item">
-                      <i class="iconfont icon-shanchu"></i>
-                      <span>删除</span>
+                      <el-button text @click="deleteSmarttalk(item.id)">
+                        <i class="iconfont icon-shanchu"></i>
+                        <span>删除</span>
+                      </el-button>
                     </div>
                     <div class="item-popover-item">
-                      <i class="iconfont icon-xiazai"></i>
-                      <span>下载</span>
+                      <el-button text>
+                        <i class="iconfont icon-xiazai"></i>
+                        <span>下载</span>
+                      </el-button>
                     </div>
                   </div>
                 </div>
@@ -88,12 +95,13 @@
         </div>
       </div>
     </div>
-    <uploadDialog v-model="isDialogOpen" @submitFile="submitFile"/>
+    <uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
   </div>
 </template>
 <script setup>
 import { Check } 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'
@@ -104,6 +112,7 @@ import uploadDialog from '@/components/upload-dialog/index.vue'
 import { Refresh } from '@element-plus/icons-vue'
 import uploaderState from '@/store/modules/uploader'
 import { getSmarttalkPage } from '@/api/file'
+import { toTimeText } from '@/utils/date'
 // import { getSmarttalkPage } from '@/api/file'
 const { ipcRenderer } = window.electron || {}
 export default {
@@ -113,7 +122,7 @@ export default {
     return {
       isLoading: false,
       isDialogOpen: false,
-      fileList:[],
+      fileList: [],
       currentNode: {},
       currentFileList: [],
       // fileUrl:
@@ -124,7 +133,7 @@ export default {
         levelFirstId: 39103,
         levelSecondId: null,
         fileSource: '个人',
-        fileRoot: "备课"
+        fileRoot: '备课'
       }
     }
   },
@@ -147,21 +156,34 @@ export default {
     // })
   },
   methods: {
-    getFileByCata() {
-      getSmarttalkPage({}).then(res=>{
-
-      })
+    formatFileSize(fileSize) {
+      if (fileSize < 1024) {
+        return fileSize + 'B'
+      } else if (fileSize < (1024 * 1024)) {
+        var temp = fileSize / 1024
+        temp = temp.toFixed(2)
+        return temp + 'KB'
+      } else if (fileSize < (1024 * 1024 * 1024)) {
+        var temp = fileSize / (1024 * 1024)
+        temp = temp.toFixed(2)
+        return temp + 'MB'
+      } else {
+        var temp = fileSize / (1024 * 1024 * 1024)
+        temp = temp.toFixed(2)
+        return temp + 'GB'
+      }
     },
     submitFile(files) {
-      files.filter(file=>{
-        file.fileData = Object.assign(this.uploadData,file.fileData)
-        file.callback = function(res){
-          console.log(res)
+      let _this = this;
+      files.filter(file => {
+        file.fileData = Object.assign(this.uploadData, file.fileData)
+        file.callback = function(res) {
+          _this.currentFileList.unshift(res.resData);
         }
       })
       console.log(files)
       uploaderState().pushFile(files)
-      this.fileList = [];
+      this.fileList = []
     },
     callback({ error, filePath }) {
       if (error) {
@@ -171,20 +193,35 @@ export default {
       console.log('File copied to:', filePath)
     },
     changeBook(data) {
-      console.log(data)
+      this.nodeClick(data)
     },
     nodeClick(data) {
-      console.log(data)
-      this.currentNode = data.node;
-      this.uploadData.levelFirstId = data.node.id;
+      let cata = this.parseCataByNode(data.node)
+      this.currentNode = data.node
+      this.uploadData.levelFirstId = cata.length > 0 ? cata[0] : null
+      this.uploadData.levelSecondId = cata.length > 1 ? cata[1] : null
+      this.uploadData.levelThirdId = cata.length > 2 ? cata[2] : null
       this.uploadData.textbookId = data.textBook.curBookId
-      this.isLoading = true;
-      getSmarttalkPage({...this.uploadData,orderByColumn:'uploadTime',isAsc:'desc',fileSuffix:'mp4'}).then(res=>{
+      this.isLoading = true
+      getSmarttalkPage({
+        ...this.uploadData,
+        orderByColumn: 'uploadTime',
+        isAsc: 'desc'
+      }).then(res => {
         this.currentFileList = [...res.rows]
-        this.isLoading = false;
-      }).catch(res=>{
-        this.isLoading = false;
+        this.isLoading = false
+      }).catch(res => {
+        this.isLoading = false
       })
+    },
+    parseCataByNode(node) {
+      if (node.parentNode) {
+        let arr = this.parseCataByNode(node.parentNode)
+        arr.push(node.id)
+        return arr
+      } else {
+        return [node.id]
+      }
     }
   }
 }
@@ -195,6 +232,7 @@ export default {
   min-width: 80px !important;
   padding: 5px !important;
 }
+
 .item-popover-item {
   padding: 5px 0;
   display: flex;
@@ -202,6 +240,7 @@ export default {
   justify-content: center;
   font-size: 12px;
   cursor: pointer;
+
   .iconfont {
     margin-right: 5px;
     color: #a2a2a2;
@@ -223,6 +262,7 @@ export default {
     box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
     display: flex;
     flex-direction: column;
+
     .prepare-body-header {
       height: 60px;
       width: 100%;
@@ -232,34 +272,41 @@ export default {
       justify-content: space-between;
       padding: 0 20px;
     }
+
     .prepare-body-main {
       flex: 1;
       width: 100%;
       overflow: auto;
       padding: 0 30px;
+
       .prepare-body-main-item {
-        &:hover{
+        &:hover {
           background-color: rgba(144, 147, 153, 0.2);
           cursor: pointer;
         }
+
         display: flex;
         align-items: center;
         border-bottom: 1px solid rgba(131, 131, 127, 0.17);
         padding: 10px 0;
+
         .prepare-body-main-item-icon {
           width: 80px;
         }
+
         .prepare-body-main-item-tool {
           font-size: 18px !important;
           font-weight: bold;
           text-align: right;
           padding-right: 30px;
         }
+
         .prepare-body-main-item-info {
           display: flex;
           flex-direction: column;
           min-width: 0;
           flex: 1;
+
           .prepare-item-info-title {
             text-align: left;
             font-size: 16px;
@@ -267,6 +314,7 @@ export default {
             overflow: hidden;
             text-overflow: ellipsis;
           }
+
           .prepare-item-info-message {
             font-size: 12px;
             line-height: 23px;