基础文件上传核心开发

2024-07-15 15:25:15 +08:00 · 2024-07-15 15:25:15 +08:00 · bf4b9f97a3
parent 389b6c6b80
commit bf4b9f97a3
7 changed files with 122 additions and 56 deletions
--- a/src/main/index.js
+++ b/src/main/index.js
@ -8,8 +8,8 @@ File({ app, shell, BrowserWindow, ipcMain })
 function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
-    width: 888,
-    height: 520,
+    width: 1050,
+    height: 650,
    show: false,
    frame: false,
    autoHideMenuBar: true,
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@ -32,3 +32,27 @@ html,body{
  fill: currentColor;
  overflow: hidden;
 }
+::-webkit-scrollbar {
+  width:5px;
+  height:5px;
+  background-color:#F5F5F5;
+}
+/* 滚动条上的滚动滑块. */
+::-webkit-scrollbar-thumb {
+  background-color: #a3b7cb;
+  border-radius: 50px;
+}
+/*  滚动条轨道. */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow:inset 0 0 6px rgba(0, 142, 255, 1);
+  box-shadow:inset 0 0 6px rgba(0, 142, 255, 1);
+  background-color:#E7E3DF;
+}
+/* 滚动条没有滑块的轨道部分 */
+::-webkit-scrollbar-track-piece {
+  background-color: #E7E3DF;
+}
+/* 当同时有垂直滚动条和水平滚动条时交汇的部分. */
+::-webkit-scrollbar-corner {
+  background:transparent;
+}
--- a/src/renderer/src/components/choose-textbook/index.vue
+++ b/src/renderer/src/components/choose-textbook/index.vue
@ -113,7 +113,7 @@ const getTreeData = () => {
  nextTick(() => {
    currentNode.value = getLastLevelData(treeData.value)[0].id
  })
- 
+
 }

 const getLastLevelData = (tree) => {
@ -183,7 +183,7 @@ const isHaveUnit = (id) => {


 const handleNodeClick = (data) => {
-  emit('nodeClick', data)
+  emit('nodeClick', data,curBookId)
 }

 onMounted(() => {
@ -291,4 +291,4 @@ onMounted(() => {
  color: #409EFF
 }

-</style>
+</style>
--- a/src/renderer/src/components/upload-dialog/index.vue
+++ b/src/renderer/src/components/upload-dialog/index.vue
@ -112,12 +112,7 @@ const hanleFileChange = (file) => {
  }
  if (file.status === 'ready') {
    file.fileData = {
-      textbookId: '123',
-      levelFirstId: '123',
-      levelSecondId: '123',
-      fileSource: '平台',
-      fileFlag: 1,
-      fileRoot: '资源'
+      fileFlag: 1
    }
    file.callback = successFile
    fileList.value.push(file)
@ -242,4 +237,4 @@ const submitFile = () => {
    }
  }
 }
-</style>
+</style>
--- a/src/renderer/src/layout/components/Uploader.vue
+++ b/src/renderer/src/layout/components/Uploader.vue
@ -119,7 +119,7 @@ export default {
          this.uploadDatas = this.uploadNow.fileData
          this.getFileMD5(this.uploadNow.raw).then((md5) => {
            this.uploadDatas.md5 = md5
-            this.$refs.talk_uploader_core.handleStart(this.uploadNow.raw)
+            // this.$refs.talk_uploader_core.handleStart(this.uploadNow.raw)
            this.$refs.talk_uploader_core.submit()
          })
        }
--- a/src/renderer/src/views/prepare/index.vue
+++ b/src/renderer/src/views/prepare/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="page-resource flex">
+  <div class="page-resource flex" v-loading="isLoading">
    <ChooseTextbook @node-click="nodeClick" />
    <div class="page-right">
      <div class="prepare-body-header">
@ -20,7 +20,7 @@
          </el-popover>
        </div>
        <div style="display: flex">
-          <el-upload
+<!--          <el-upload
            ref="choosefile"
            v-model:file-list="fileList"
            name="file"
@ -30,21 +30,21 @@
            :on-change="chooseFile"
            class="editor-img-uploader"
          >
-            <el-button>上传资料</el-button>
-          </el-upload>
-          <el-button type="primary" @click="changeFile">新建课件</el-button>
-          <el-button type="primary" @click="clearFile">crear</el-button>
+            <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>
      </div>
      <div class="prepare-body-main">
-        <div v-for="index in 10" :key="index" class="prepare-body-main-item">
+        <div v-for="(item,index) in currentFileList" :key="index" class="prepare-body-main-item">
          <div class="prepare-body-main-item-icon">
            <svg class="icon" aria-hidden="true" font-size="50px" color="red" style="margin: auto">
              <use xlink:href="#icon-ppt"></use>
            </svg>
          </div>
          <div class="prepare-body-main-item-info">
-            <div class="prepare-item-info-title">平面向量基本定理及坐标表示</div>
+            <div class="prepare-item-info-title">{{item.fileShowName}}</div>
            <div class="prepare-item-info-message">
              <div>
                <el-icon
@ -53,9 +53,9 @@
                >已同步
              </div>
              &nbsp;&nbsp;|&nbsp;&nbsp;
-              <div>1.6MB</div>
+              <div>{{item.fileSize}}</div>
              &nbsp;&nbsp;|&nbsp;&nbsp;
-              <div>2024-07-10</div>
+              <div>{{item.uploadTime}}</div>
              &nbsp;&nbsp;|&nbsp;&nbsp;
              <div>古诗词诵读 > 静女</div>
            </div>
@ -63,7 +63,22 @@
          <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; background-color: #003b94"></div>
+                <div style="width: 100%; height: 100px;">
+                  <div class="item-popover">
+                    <div class="item-popover-item">
+                      <i class="iconfont icon-bianji"></i>
+                      <span>编辑</span>
+                    </div>
+                    <div class="item-popover-item">
+                      <i class="iconfont icon-shanchu"></i>
+                      <span>删除</span>
+                    </div>
+                    <div class="item-popover-item">
+                      <i class="iconfont icon-xiazai"></i>
+                      <span>下载</span>
+                    </div>
+                  </div>
+                </div>
              </template>
              <template #reference>
                <span class="iconfont icon-shenglvehao" style="cursor: pointer"></span>
@ -73,6 +88,7 @@
        </div>
      </div>
    </div>
+    <uploadDialog v-model="isDialogOpen" @submitFile="submitFile"/>
  </div>
 </template>
 <script setup>
@ -83,25 +99,31 @@ 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 { getSmarttalkPage } from '@/api/file'
 // import { getSmarttalkPage } from '@/api/file'
 const { ipcRenderer } = window.electron || {}
 export default {
  name: 'Prepare',
-  components: { ResoureSearch, ResoureList, ChooseTextbook, FileUpload, Refresh },
+  components: { ResoureSearch, ResoureList, ChooseTextbook, FileUpload, Refresh, uploadDialog },
  data() {
    return {
+      isLoading: false,
+      isDialogOpen: false,
      fileList:[],
-      fileUrl:
-        'https://wzyzoss.eos-chongqing-3.cmecloud.cn/2024/7/10/117cdf208c6b4e58bf2b73369eaf3cb5.pptx',
-      filePath: 'C:/Users/zhuhao/Desktop/工作文档/0901高一【数学(人教A版)】集合的概念-PPT课件.pptx',
+      currentNode: {},
+      currentFileList: [],
+      // fileUrl:
+      //   'https://wzyzoss.eos-chongqing-3.cmecloud.cn/2024/7/10/117cdf208c6b4e58bf2b73369eaf3cb5.pptx',
+      // filePath: 'C:/Users/zhuhao/Desktop/工作文档/0901高一【数学(人教A版)】集合的概念-PPT课件.pptx',
      uploadData: {
-        textbookId: '123',
-        levelFirstId: '123',
-        levelSecondId: '123',
-        fileSource: '平台',
-        fileFlag: '课件'
+        textbookId: null,
+        levelFirstId: 39103,
+        levelSecondId: null,
+        fileSource: '个人',
+        fileRoot: "备课"
      }
    }
  },
@ -112,6 +134,8 @@ export default {
    })
  },
  mounted() {
+    //查询所有选中目录下的所有文件
+
    // const destination = '0901高一【数学(人教A版)】集合的概念-PPT课件.pptx'
    // ipcRenderer.send('open-path-app',this.filePath)
    // const source = 'D:\\edufile\\0901高一【数学(人教A版)】集合的概念-PPT课件.pptx'
@ -122,6 +146,22 @@ export default {
    // })
  },
  methods: {
+    getFileByCata() {
+      getSmarttalkPage({}).then(res=>{
+
+      })
+    },
+    submitFile(files) {
+      files.filter(file=>{
+        file.fileData = Object.assign(this.uploadData,file.fileData)
+        file.callback = function(res){
+          console.log(res)
+        }
+      })
+      console.log(files)
+      uploaderState().pushFile(files)
+      this.fileList = [];
+    },
    callback({ error, filePath }) {
      if (error) {
        console.error('An error occurred:', error)
@ -129,27 +169,18 @@ export default {
      }
      console.log('File copied to:', filePath)
    },
-    nodeClick(data) {
-      console.log(data)
-    },
-    chooseFile(file) {
-      file.fileData = {
-        textbookId: '123',
-        levelFirstId: '123',
-        levelSecondId: '123',
-        fileSource: '平台',
-        fileFlag: '课件'
-      }
-      file.callback = function(res){
+    nodeClick(data,bookId) {
+      this.currentNode = data;
+      this.uploadData.levelFirstId = data.id;
+      this.uploadData.textbookId = bookId.value
+      this.isLoading = true;
+      getSmarttalkPage({...this.uploadData,orderByColumn:'uploadTime',isAsc:'desc'}).then(res=>{
+        this.currentFileList = [...res.rows]
+        this.isLoading = false;
        console.log(res)
-      }
-    },
-    changeFile() {
-      uploaderState().pushFile(this.fileList)
-      this.fileList = [];
-    },
-    clearFile() {
-      this.fileList = [];
+      }).catch(res=>{
+        this.isLoading = false;
+      })
    }
  }
 }
@ -160,6 +191,18 @@ export default {
  min-width: 80px !important;
  padding: 5px !important;
 }
+.item-popover-item {
+  padding: 5px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  cursor: pointer;
+  .iconfont {
+    margin-right: 5px;
+    color: #a2a2a2;
+  }
+}
 </style>
 <style scoped lang="scss">
 .page-resource {
@ -167,6 +210,7 @@ export default {
  height: 100%;

  .page-right {
+    min-width: 0;
    flex: 1;
    margin-left: 20px;
    height: 100%;
@ -204,24 +248,26 @@ export default {
        .prepare-body-main-item-tool {
          font-size: 18px !important;
          font-weight: bold;
-          flex: 1;
          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;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
          }
          .prepare-item-info-message {
            font-size: 12px;
            line-height: 23px;
            color: #909399;
            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
          }
        }
      }
--- a/src/renderer/src/views/resource/index.vue
+++ b/src/renderer/src/views/resource/index.vue
@ -38,6 +38,7 @@ const nodeClick = (data) => {
  height: 100%;

  .page-right {
+    min-width: 0;
    flex: 1;
    margin-left: 20px;
    height: 100%;