上传组件

src/icons/svg/file.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747197509965"
+  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11770"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path
+    d="M694.6 234.3H329.4c-18.9 0-34.2 15.3-34.2 34.2s15.3 34.3 34.2 34.3h365.2c18.9 0 34.2-15.3 34.2-34.3 0-18.9-15.3-34.2-34.2-34.2z m0 136.9H329.4c-18.9 0-34.2 15.3-34.2 34.2s15.3 34.2 34.2 34.2h365.2c18.9 0 34.2-15.3 34.2-34.2s-15.3-34.2-34.2-34.2zM799.5 64h-575c-47.1 0-85.2 38.1-85.2 85.2v725.6c0 47 38.1 85.2 85.2 85.2h575c47 0 85.2-38.2 85.2-85.2V149.2c0-47.1-38.1-85.2-85.2-85.2z m0 768.2c0 23.5-19.1 42.5-42.6 42.5H267.1c-23.5 0-42.6-19.1-42.6-42.5V191.8c0-23.6 19.1-42.6 42.6-42.6h489.8c23.5 0 42.6 19.1 42.6 42.6v640.4z m-104.9-324H329.4c-18.9 0-34.2 15.3-34.2 34.2s15.3 34.3 34.2 34.3h365.2c18.9 0 34.2-15.3 34.2-34.3 0-18.9-15.3-34.2-34.2-34.2z"
+    fill="currentColor" p-id="11771"></path>
+</svg>

src/icons/svg/mp3.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747197205801"
+  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5201"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path
+    d="M364 433.662V810c0 82.843-67.157 150-150 150S64 892.843 64 810s67.157-150 150-150c25.282 0 49.103 6.255 70 17.3V400.677a39.861 39.861 0 0 1 0-1.446V200c0-19.455 13.998-36.089 33.168-39.412l548-95C889.626 61.348 912 80.177 912 105v199.324c0.009 0.484 0.009 0.965 0 1.446V714c0 82.843-67.157 150-150 150s-150-67.157-150-150 67.157-150 150-150c25.282 0 49.103 6.255 70 17.3V352.53l-468 81.132z m0-81.193l468-81.131V152.53l-468 81.131V352.47zM214 880c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70z m548-96c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70z"
+    fill="currentColor" p-id="5202"></path>
+</svg>

src/icons/svg/zip.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747197621724"
+  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14625"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path
+    d="M296 392h64v64h-64z m0 190v160h128V582h-64v-62h-64v62z m80 48v64h-32v-64h32z m-16-302h64v64h-64z m-64-64h64v64h-64z m64 192h64v64h-64z m0-256h64v64h-64z m494.6 88.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h64v64h64v-64h174v216c0 23.2 18.8 42 42 42h216v494z"
+    fill="currentColor" p-id="14626"></path>
+</svg>

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -27,7 +27,7 @@
       <li v-for="(file, i) in fileList" :key="i">
         <div class="file-name">
           <span>
-            <SvgIcon :icon-class="iconClass" size="12" />
+            <SvgIcon v-if="iconClass" :icon-class="iconClass" size="12" />
             <span>{{ file.file_name ?? file.name }}</span>
             <!-- <span>({{ file.size }})</span> -->
           </span>
@@ -227,8 +227,23 @@ export default {
         fileType = ['mp4'];
         typeTip = '视频文件只能是 mp4 格式!';
       } else if (this.type === 'upload_preview') {
-        fileType = ['png', 'jpg', 'pdf'];
-        typeTip = '文件只能是图片或者pdf';
+        fileType = [
+          'txt',
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'ppt',
+          'pptx',
+          'mp3',
+          'wma',
+          'mp4',
+          'mov',
+          'zip',
+          'rar',
+        ];
+        typeTip = '文件不支持';
       }
       const isNeedType = fileType.includes(suffix);
       if (!isNeedType) {

src/views/book/courseware/create/components/base/upload_preview/UploadPreview.vue

@@ -14,7 +14,8 @@
         :accept-file-type="acceptFileType"
         :upload-tip="uploadTip"
         :icon-class="iconClass"
-        :limit="1"
+        :limit="100"
+        :singleSize="500"
         @updateFileList="updateFileList"
       />
       <el-form :model="data" label-width="72px" label-position="left">
@@ -44,10 +45,9 @@ export default {
       data: getUploadPreviewData(),
       switchOption,
       labelText: '文件',
-      acceptFileType: '.png,.jpg,.pdf',
-      uploadTip:
-        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
-      iconClass: 'picture',
+      acceptFileType: '.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.mp3,.wma,.mp4,.mov,.zip,.rar',
+      uploadTip: '支持上传txt，pdf，doc，excel，ppt，mp3，wma，mp4，mov，zip，rar等格式文件，单个文件最大500MB',
+      iconClass: '',
     };
   },
   methods: {

src/views/book/courseware/data/bookType.js

@@ -135,17 +135,17 @@ export const bookTypeOption = [
         set: PictureSetting,
         preview: PicturePreview,
       },
-      {
-        value: 'upload_control',
-        label: '上传',
-        icon: 'uploadControl',
-        component: UploadControl,
-        set: UploadControlSetting,
-        preview: UploadControlPreview,
-      },
+      // {
+      //   value: 'upload_control',
+      //   label: '上传',
+      //   icon: 'uploadControl',
+      //   component: UploadControl,
+      //   set: UploadControlSetting,
+      //   preview: UploadControlPreview,
+      // },
       {
         value: 'upload_preview',
-        label: '上传预览',
+        label: '上传',
         icon: 'uploadPreview',
         component: UploadPreview,
         set: UploadRreviewSetting,

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -4,7 +4,7 @@
 
     <div class="main">
       <template v-if="data.file_list.length > 0">
-        <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
+        <!-- <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
           <el-image
             style="width: 100%; height: 260px"
             :src="data.file_list[0].file_url"
@@ -18,9 +18,50 @@
         <div v-if="isEnable(data.is_enable_download)" class="uploadBtn" @click="downLoad">
           <img style="width: 24px; height: 24px" src="@/assets/download.png" alt="download" />
           下载
+        </div> -->
+        <div class="label-box">
+          <span
+            :class="[index === active_index ? 'active' : '']"
+            v-for="(label, index) in label_list"
+            :key="index"
+            @click="active_index = index"
+            >{{ label }}</span
+          >
         </div>
+        <ul class="file-list" v-if="source_list[active_index].length > 0">
+          <li v-for="(file, i) in source_list[active_index]" :key="i">
+            <div class="file-name">
+              <span>
+                <SvgIcon :icon-class="icon_list[active_index]" size="16" />
+                <span>{{ file.file_name ?? file.name }}</span>
+              </span>
+              <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
+              <img
+                v-if="isEnable(data.is_enable_download)"
+                @click="downLoad(file)"
+                style="width: 16px; height: 16px"
+                src="@/assets/download.png"
+                alt="download"
+              />
+            </div>
+          </li>
+        </ul>
+        <p class="label-tips" v-else>暂无本类型文件，看看其他类型吧</p>
       </template>
     </div>
+    <el-dialog
+      :visible.sync="visible"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :lock-scroll="true"
+      width="80%"
+      top="0"
+      v-if="visible"
+    >
+      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -39,6 +80,13 @@ export default {
     return {
       data: getUploadPreviewData(),
       file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
+      source_list: [[], [], [], []],
+      label_list: ['音频', '视频', '文档', '压缩包'],
+      icon_list: ['mp3', 'video', 'file', 'zip'],
+      active_index: 0,
+      visible: false,
+      newpath: '',
+      iframeHeight: window.innerHeight - 100 + 'px',
     };
   },
   watch: {
@@ -54,7 +102,18 @@ export default {
   methods: {
     // 处理数据
     handleData() {
+      this.source_list = [[], [], [], []];
       this.data.file_list.forEach((item) => {
+        const suffix = item.file_name.slice(item.file_name.lastIndexOf('.') + 1, item.file_name.length).toLowerCase();
+        if (suffix === 'mp3' || suffix === 'wma') {
+          this.source_list[0].push(item);
+        } else if (suffix === 'mp4' || suffix === 'mov') {
+          this.source_list[1].push(item);
+        } else if (suffix === 'zip' || suffix === 'rar') {
+          this.source_list[3].push(item);
+        } else {
+          this.source_list[2].push(item);
+        }
         GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
           this.$set(
             item,
@@ -65,7 +124,7 @@ export default {
       });
     },
     //   下载表格
-    downLoad() {
+    downLoad(file) {
       let userInfor = getToken();
       let SessionID = '';
       let UserCode = '';
@@ -75,7 +134,7 @@ export default {
         UserType = userInfor.user_type;
         SessionID = userInfor.session_id;
       }
-      let FileID = this.data.file_list[0].file_id;
+      let FileID = file.file_id;
       let data = {
         SessionID,
         UserCode,
@@ -86,6 +145,11 @@ export default {
         process.env.VUE_APP_BASE_API
       }/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
     },
+    // 预览
+    viewDialog(file) {
+      this.visible = true;
+      this.newpath = file.newpath;
+    },
   },
 };
 </script>
@@ -117,5 +181,68 @@ export default {
       margin-right: 13px;
     }
   }
+
+  .label-box {
+    display: flex;
+    gap: 10px;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
+
+    span {
+      padding: 5px 15px;
+      cursor: pointer;
+      border-radius: 20px;
+
+      &.active {
+        font-weight: bold;
+        color: #165dff;
+        background: #f2f3f5;
+      }
+    }
+  }
+
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    padding: 15px 0;
+
+    li {
+      display: flex;
+      column-gap: 12px;
+      align-items: center;
+
+      .file-name {
+        display: flex;
+        column-gap: 14px;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 360px;
+        padding: 8px 12px;
+        font-size: 14px;
+        color: #1d2129;
+        background-color: #f7f8fa;
+
+        span {
+          display: flex;
+          column-gap: 14px;
+          align-items: center;
+        }
+      }
+
+      .svg-icon {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .label-tips {
+    font-size: 14px;
+    color: #333;
+  }
+
+  :deep .el-dialog {
+    margin: 0 auto;
+  }
 }
 </style>