管理中心-创建作品：素材选择弹窗代码重构

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -4,12 +4,12 @@
       class="crumbs"
       v-if="!latestUsedSearchKey"
       :list="folderPath"
-      :rootName="$i18n.t(`gather.${materialType}`)"
+      :rootName="$i18n.t(`gather.${materialTypeAlias}`)"
       @click-path="onClickPath"
     />
-    <div v-if="latestUsedSearchKey" class="crumbs">{{$i18n.t(`gather.${materialType}`)}}</div>
+    <div v-if="latestUsedSearchKey" class="crumbs">{{$i18n.t(`gather.${materialTypeAlias}`)}}</div>
 
-    <div class="table table-pano">
+    <div class="table">
       <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item, i) in tableHeaders" :key="i">
@@ -165,6 +165,9 @@
         <div v-if="!latestUsedSearchKey">
           <img :src="require('@/assets/images/default/empty_04.png')" alt="">
           <span>{{ $i18n.t("gather.no_material_result") }}</span>
+          <a v-if="materialType === '3D'" href="/#/">
+            <button class="ui-button">{{ $i18n.t("gather.how_to_shoot") }}</button>
+          </a>
         </div>
       </div>
     </div>
@@ -193,6 +196,7 @@
 <script>
 import {
   getMaterialList,
+  getSceneList,
   uploadMaterial,
   checkMStatus,
   checkUserSize,
@@ -207,6 +211,7 @@ import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
 import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 import folderMixin from "./materialSelectorFolderMixin.js";
+import { mapState } from 'vuex';
 
 export default {
   components: {
@@ -225,7 +230,11 @@ export default {
       type: String,
       required: true,
     },
-    
+    workId: {
+      type: String,
+      default: '',
+    },
+
     tableHeaderKeyList: {
       type: Array,
       default: () => {
@@ -247,39 +256,23 @@ export default {
       default: '',
     },
 
-    canUpload: {
-      type: Boolean,
-      default: true,
-    },
-    uploadStatusList: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
     fileInputBtnTip: {
       type: String,
-      required: true,
     },
     fileInputFailString: {
       type: String,
-      required: true,
     },
     fileInputLimitFailStr: {
       type: String,
-      required: true,
     },
     fileInputAcceptType: {
       type: String,
-      required: true,
     },
     fileInputMediaType: {
       type: String,
-      required: true,
     },
     fileInputLimit: {
       type: Number,
-      required: true,
     },
   },
   data() {
@@ -295,6 +288,13 @@ export default {
     }
   },
   computed: {
+    materialTypeAlias() {
+      if (this.materialType === '3D') {
+        return 'scene'
+      } else {
+        return this.materialType
+      }
+    },
     tableHeaders() {
       /*
       [
@@ -319,10 +319,20 @@ export default {
         }
       ]
        */
-      return this.$MAPTABLEHEADER[this.materialType].filter(item => {
+      return this.$MAPTABLEHEADER[this.materialTypeAlias].filter(item => {
         return this.tableHeaderKeyList.includes(item.key)
       })
     },
+    canUpload() {
+      return this.materialType !== '3D'
+    },
+    uploadStatusList() {
+      if (this.canUpload) {
+        return this.$store.state[`uploadStatusList${capitalize(this.materialType)}`]
+      } else {
+        return []
+      }
+    },
     listRealLength() {
       return this.list.length + this.uploadStatusList.filter((item) => {
         return item.status === 'SUCCESS'
@@ -394,47 +404,75 @@ export default {
     requestMoreData() {
       this.isRequestingMoreData = true
       const latestUsedSearchKey = this.searchKey
-      getMaterialList(
-        {
-          dirId: this.currentFolderId,
-          pageNum: Math.floor(this.listRealLength / config.PAGE_SIZE) + 1,
-          pageSize: config.PAGE_SIZE,
-          searchKey: this.searchKey,
-          type: this.materialType,
-        },
-        (data) => {
-          const newData = data.data.list.map((i) => {
-            if (i.fileSize) {
-              i.fileSize = changeByteUnit(Number(i.fileSize));
-            } else {
-              i.fileSize = ''
+      if (this.materialType === '3D') {
+        getSceneList(
+          {
+            pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+            pageSize: config.PAGE_SIZE,
+            searchKey: this.searchKey,
+            workId: this.workId,
+          },
+          (data) => {
+            const newData = data.data.data.list.map((i) => {
+              return i;
+            });
+            this.list = this.list.concat(newData)
+            if (this.list.length === data.data.data.total) {
+              this.hasMoreData = false
             }
-            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
-            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
-            return i;
-          });
-          this.list = this.list.concat(newData)
-          if (this.listRealLength === data.data.total) {
-            this.hasMoreData = false
+            this.isRequestingMoreData = false
+            this.latestUsedSearchKey = latestUsedSearchKey
+          },
+          () => {
+            this.isRequestingMoreData = false
+            this.latestUsedSearchKey = latestUsedSearchKey
           }
-          this.isRequestingMoreData = false
-          this.latestUsedSearchKey = latestUsedSearchKey
-        },
-        () => {
-          this.isRequestingMoreData = false
-          this.latestUsedSearchKey = latestUsedSearchKey
-        }
-      );
+        )
+      } else {
+        getMaterialList(
+          {
+            dirId: this.currentFolderId,
+            pageNum: Math.floor(this.listRealLength / config.PAGE_SIZE) + 1,
+            pageSize: config.PAGE_SIZE,
+            searchKey: this.searchKey,
+            type: this.materialType,
+          },
+          (data) => {
+            const newData = data.data.list.map((i) => {
+              if (i.fileSize) {
+                i.fileSize = changeByteUnit(Number(i.fileSize));
+              } else {
+                i.fileSize = ''
+              }
+              i.createTime = i.createTime.substring(0, i.createTime.length - 3)
+              i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
+              return i;
+            });
+            this.list = this.list.concat(newData)
+            if (this.listRealLength === data.data.total) {
+              this.hasMoreData = false
+            }
+            this.isRequestingMoreData = false
+            this.latestUsedSearchKey = latestUsedSearchKey
+          },
+          () => {
+            this.isRequestingMoreData = false
+            this.latestUsedSearchKey = latestUsedSearchKey
+          }
+        );
+      }
     },
     refreshMaterialList: debounce(function (type) {
       this.isRequestingMoreData = false
       this.hasMoreData = true
       this.list = []
-      let filterResult = this.uploadStatusList.filter((item) => {
-        return item.status === 'LOADING'
-      })
-      const capitalizedMaterialType = capitalize(this.materialType)
-      this.$store.commit(`setUploadStatusList${capitalizedMaterialType}`, filterResult)
+      if (this.canUpload) {
+        let filterResult = this.uploadStatusList.filter((item) => {
+          return item.status === 'LOADING'
+        })
+        const capitalizedMaterialType = capitalize(this.materialType)
+        this.$store.commit(`setUploadStatusList${capitalizedMaterialType}`, filterResult)
+      }
       this.requestMoreData()
     }, 500, false),
     onFileInputChange(e) {
@@ -594,16 +632,19 @@ export default {
   mounted() {
   },
   beforeDestroy() {
-    const capitalizedMaterialType = capitalize(this.materialType)
-    this.$store.commit(`setUploadStatusList${capitalizedMaterialType}`, this.uploadStatusList.filter((item) => {
-      return item.status === 'LOADING'
-    }))
+    if (this.canUpload) {
+      const capitalizedMaterialType = capitalize(this.materialType)
+      this.$store.commit(`setUploadStatusList${capitalizedMaterialType}`, this.uploadStatusList.filter((item) => {
+        return item.status === 'LOADING'
+      }))
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .material-list {
+  position: relative;
   .ellipsis {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -729,8 +770,8 @@ export default {
     }
   }
 
-  .table-pano .table-head,
-  .table-pano .table-data {
+  .table .table-head,
+  .table .table-data {
     &:nth-of-type(1) {
       width: 50px;
       color: transparent;
@@ -756,10 +797,8 @@ export default {
   }
 
   .btns {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 32px;
-
+    left: 0;
+    margin-top: 29px;
     .upload-btn {
       display: flex;
       align-items: center;