上传支持修改名称和序号

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

@@ -29,13 +29,28 @@
         <div class="file-name">
           <span>
             <SvgIcon v-if="iconClass" :icon-class="iconClass" size="12" />
-            <span>{{ file.file_name ?? file.name }}</span>
+            <!-- 编辑序号和名称 -->
+            <template v-if="content.file_info[file.file_id] && content.file_info[file.file_id].isEdit">
+              <el-input
+                v-model="content.file_info[file.file_id].xuhao"
+                placeholder="序号"
+                style="width: 80px"
+              ></el-input>
+              <el-input v-model="content.file_info[file.file_id].file_name" placeholder="名称"></el-input>
+            </template>
+            <!-- 可以编辑序号名称状态下显示序号 -->
+            <span v-else>{{
+              canEditName && file.file_id
+                ? content.file_info[file.file_id].xuhao + content.file_info[file.file_id].file_name
+                : file.file_name ?? file.name
+            }}</span>
+            <!-- <span>({{ file.size }})</span> -->
           </span>
           <el-progress
             v-if="file.progress > 0 && file.progress < 100"
             type="circle"
             :percentage="file.progress"
-            :width="20"
+            width="20"
             color="#2A5AF6"
             stroke-linecap="butt"
             :show-text="false"
@@ -49,6 +64,16 @@
           size="12"
           @click="viewDialog(file.file_id)"
         />
+        <!-- 编辑名称和序号 -->
+        <template v-if="canEditName && file.file_id">
+          <SvgIcon
+            v-if="content.file_info[file.file_id].isEdit"
+            icon-class="icon-save"
+            size="12"
+            @click="changeIsEdit(content.file_info[file.file_id])"
+          />
+          <SvgIcon v-else icon-class="icon-edit" size="12" @click="changeIsEdit(content.file_info[file.file_id])" />
+        </template>
       </li>
     </ul>
 
@@ -137,6 +162,14 @@ export default {
       type: Number,
       default: null,
     },
+    canEditName: {
+      type: Boolean,
+      default: false,
+    },
+    fileInfo: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -147,6 +180,7 @@ export default {
         file_list: this.fileList,
         file_id_list: this.fileIdList,
         file_info_list: this.fileInfoList,
+        file_info: this.fileInfo,
       },
       visibleResource: false,
     };
@@ -182,6 +216,7 @@ export default {
             file_list: this.fileList,
             file_id_list: this.fileIdList,
             file_info_list: this.fileInfoList,
+            file_info: this.fileInfo,
           };
         }
       },
@@ -336,8 +371,17 @@ export default {
                 file_name: file_info_list[0].file_name,
                 file_url: file_info_list[0].file_url,
               };
+              if (this.canEditName) {
+                let obj = {
+                  xuhao: '',
+                  isEdit: false,
+                  file_name: file_info_list[0].file_name,
+                };
+                this.$set(this.content.file_info, file_info_list[0].file_id, obj);
+              }
               this.content.file_id_list.push(file_info_list[0].file_id);
               this.$refs.upload.uploadFiles = [];
+              console.log(this.content.file_info);
               this.$forceUpdate();
             }
           });
@@ -367,6 +411,10 @@ export default {
       this.content.file_info_list.push({ file_id, file_name, title: '', intro });
       this.visibleResource = false;
     },
+    // 编辑文件名及序号
+    changeIsEdit(file) {
+      file.isEdit = !file.isEdit;
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/base/h5_games/H5Games.vue

@@ -14,6 +14,8 @@
         :icon-class="iconClass"
         :limit="1"
         :single-size="200"
+        :can-edit-name="true"
+        :file-info="data.file_info"
         @updateFileList="updateFileList"
       />
     </template>
@@ -41,9 +43,10 @@ export default {
     'data.file_list': 'handleMindMap',
   },
   methods: {
-    updateFileList({ file_list, file_id_list }) {
+    updateFileList({ file_list, file_id_list, file_info }) {
       this.data.file_list = file_list;
       this.data.file_id_list = file_id_list;
+      this.data.file_info = file_info;
     },
     handleMindMap() {
       // 思维导图数据

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

@@ -46,10 +46,11 @@ export default {
     'data.file_list': 'handleMindMap',
   },
   methods: {
-    updateFileList({ file_list, file_id_list, file_info_list }) {
+    updateFileList({ file_list, file_id_list, file_info_list, file_info }) {
       this.data.file_list = file_list;
       this.data.file_id_list = file_id_list;
       this.data.file_info_list = file_info_list;
+      this.data.file_info = file_info;
       this.handleMindMap();
     },
     handleMindMap() {

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

@@ -23,6 +23,7 @@ export function getH5GamesData() {
     property: getH5GamesProperty(),
     file_list: [],
     file_id_list: [],
+    file_info: {}, // 存放文件序号
     mind_map: {
       node_list: [
         { name: 'H5游戏' }

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

@@ -27,7 +27,7 @@ export function getUploadPreviewData() {
     property: getUploadPreviewProperty(),
     file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
-    file_info:{}, // 存放文件序号
+    file_info: {}, // 存放文件序号
     file_list: [],// 内容中包含的文件列表,
     mind_map: {
       node_list: [

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

@@ -33,7 +33,7 @@
             <div class="file-name">
               <span>
                 <SvgIcon :icon-class="icon_list[active_index]" size="16" />
-                <span>{{ file.file_name ?? file.name }}</span>
+                <span>{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }}</span>
               </span>
               <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
               <img