资源上传

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

@@ -212,7 +212,7 @@ export default {
         column-gap: 14px;
         align-items: center;
         justify-content: space-between;
-        max-width: 360px;
+        max-width: 500px;
         padding: 8px 12px;
         font-size: 14px;
         color: #1d2129;

src/views/personal_workbench/project/ProductionResourceManage.vue

@@ -52,10 +52,7 @@
             v-for="(item, index) in list"
             :key="index"
             class="sources-item"
-            :class="[
-              select_sources_id === item.id ? 'active' : '',
-              type_index === 5 ? 'sources-item-txt' : type_index === 3 ? 'sources-item-zip' : '',
-            ]"
+            :class="[select_sources_id === item.id ? 'active' : '', type_index === 5 ? 'sources-item-txt' : '']"
             @click="selectSourceNode(item)"
           >
             <template v-if="type_index === 0"> <el-image :src="item.file_url" fit="contain" /></template>
@@ -69,16 +66,22 @@
               />
             </template>
             <template v-else-if="type_index === 2">
-              <video controls :src="item.file_url" width="100%" height="140px"></video>
+              <video
+                controls
+                :src="item.file_url"
+                width="100%"
+                height="140px"
+                :poster="item.video_preview_image_file_url"
+              ></video>
             </template>
             <template v-else-if="type_index === 3">
-              <iframe
+              <!-- <iframe
                 class="sources-item-border"
                 :src="item.new_path"
                 width="100%"
                 height="300px"
                 frameborder="0"
-              ></iframe>
+              ></iframe> -->
             </template>
             <template v-else-if="type_index === 4"> </template>
             <template v-else-if="type_index === 5">
@@ -101,14 +104,22 @@
               </div>
               <template #reference>
                 <div class="sources-info">
-                  <p class="name">{{ item.name }}</p>
+                  <p class="name">
+                    {{ item.name }}
+                    <SvgIcon
+                      v-show="item.file_id && type_index === 3"
+                      icon-class="uploadPreview"
+                      size="16"
+                      @click="viewDialog(item)"
+                    />
+                  </p>
                   <b class="label">{{ item.label }}</b>
                 </div>
               </template>
             </el-popover>
           </div>
         </div>
-        <PaginationPage ref="pagination" :total="total" @getList="queryList" />
+        <PaginationPage ref="pagination" :pageSize="20" :total="total" @getList="queryList" />
       </div>
     </div>
     <!-- 上传 -->
@@ -122,6 +133,7 @@
       class="module-content"
     >
       <UploadFile
+        v-if="sourceAddFlag"
         key="upload_resources"
         :type="'upload_resources_manager'"
         :total-size="20000"
@@ -184,6 +196,19 @@
         >
       </el-form>
     </el-dialog>
+    <el-dialog
+      v-if="visible"
+      :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"
+    >
+      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -268,7 +293,7 @@ export default {
       total: 0,
       search_content: '', // 查询内容
       height: 0,
-      page_capacity: 10,
+      page_capacity: 20,
       cur_page: 1,
       sourceAddFlag: false, // 新增flag
       labelText: '资源',
@@ -290,6 +315,9 @@ export default {
       sourceMoveFlag: false,
       sourceMoveId: '',
       file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
+      visible: false,
+      newpath: '',
+      iframeHeight: `${window.innerHeight - 100}px`,
     };
   },
   created() {
@@ -424,6 +452,8 @@ export default {
     changeType(index) {
       this.type_index = index;
       this.select_sources_id = '';
+      this.file_list = [];
+      this.file_id_list = [];
       this.acceptFileType = this.acceptFileTypeList[index];
       this.queryList('');
     },
@@ -435,7 +465,7 @@ export default {
         this.page_capacity = data.page_capacity;
         this.cur_page = data.cur_page;
       } else {
-        this.page_capacity = 10;
+        this.page_capacity = 20;
         this.cur_page = 1;
       }
 
@@ -460,14 +490,16 @@ export default {
               item.new_path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(item.file_url)}`;
             });
             this.boxLoading = false;
-          } else if (this.type_index === 3) {
-            resource_list.forEach((item) => {
-              H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
-                item.new_path = res.file_url;
-                this.boxLoading = false;
-              });
-            });
-          } else {
+          }
+          // else if (this.type_index === 3) {
+          //   resource_list.forEach((item) => {
+          //     H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
+          //       item.new_path = res.file_url;
+          //       this.boxLoading = false;
+          //     });
+          //   });
+          // }
+          else {
             this.boxLoading = false;
           }
           this.list = resource_list;
@@ -524,6 +556,8 @@ export default {
             this.loading = false;
             this.sourceAddFlag = false;
             if (res.status === 1) {
+              this.file_list = [];
+              this.file_id_list = [];
               this.queryList('');
             }
           })
@@ -581,6 +615,14 @@ export default {
           this.loading = false;
         });
     },
+    // 预览
+    viewDialog(file) {
+      this.newpath = '';
+      H5StartupFile({ file_id: file.file_id, index_file_name: 'index.html' }).then((res) => {
+        this.newpath = res.file_url;
+        this.visible = true;
+      });
+    },
   },
 };
 </script>