Browse Source

管理中心-新建作品-素材选择弹窗:避免多次刷新(有两个原因分别会导致多次刷新)

任一存 2 years ago
parent
commit
818fd73548

+ 6 - 5
packages/qjkankan-editor/src/components/materialSelectorFolderMixin.js

@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     currentFolderId() {
-      return this.folderPath[this.folderPath.length - 1].id
+      return this.folderPath[this.folderPath.length - 1]?.id
     },
   },
   methods: {
@@ -44,11 +44,12 @@ export default {
     },
   },
   watch: {
-    folderPath: {
-      handler: function () {
-        this.refreshMaterialList(this.currentMaterialType)
+    currentFolderId: {
+      handler: function (v1, v2) {
+        if (v2 !== undefined) {
+          this.refreshMaterialList(this.currentMaterialType)
+        }
       },
-      deep: true,
     },
   },
   created() {

+ 22 - 9
packages/qjkankan-editor/src/components/materialSelectorForManageCenter.vue

@@ -44,23 +44,28 @@
       <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
       <i v-if="searchKey" @click="searchKey = ''" class="iconfont icontoast_red clear-icon"></i>
     </div>
+    
     <crumbs
       class="crumbs"
-      v-if="!latestUsedSearchKey"
+      v-if="!latestUsedSearchKey && currentMaterialType === 'pano'"
       :list="folderPath"
       :rootName="$i18n.t(`gather.${currentMaterialType}`)"
       @click-path="onClickPath"
     />
     <div v-if="latestUsedSearchKey" class="crumbs">{{$i18n.t(`gather.${currentMaterialType}`)}}</div>
+
     <div class="table table-pano" v-show="currentMaterialType === 'pano'">
       <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item, i) in tableHeadersForPano" :key="i">
           {{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
       </div>
-      <div v-if="panoListLocalLength !== 0 || hasMorePanoData" class="table-body"
+      <div
+        v-show="panoListLocalLength !== 0 || hasMorePanoData"
+        class="table-body"
         v-infinite-scroll="requestMorePanoData"
-        :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData">
+        :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
+      >
         <!-- vuex中的上传中数据 -->
         <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
@@ -172,7 +177,7 @@
         </div>
       </div>
       <!-- 无数据时的提示 -->
-      <div v-else class="no-data">
+      <div v-show="!(panoListLocalLength !== 0 || hasMorePanoData)" class="no-data">
         <div v-if="latestUsedSearchKey">
           <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
           <span>{{ no_serch_result }}</span>
@@ -190,13 +195,21 @@
         <span class="table-head" v-for="(item, i) in tableHeadersFor3D" :key="i">
           {{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
       </div>
-      <div v-if="scene3DList.length !== 0 || hasMore3DData" class="table-body" v-infinite-scroll="requestMore3DData"
-        :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData">
+      <div
+        v-show="scene3DList.length !== 0 || hasMore3DData"
+        class="table-body"
+        v-infinite-scroll="requestMore3DData"
+        :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData"
+      >
         <div class="table-body-row" v-for="(item, i) in scene3DList" :key="i">
           <span class="table-data">
-            <RadioOrCheckbox class="checkbox" :isLightTheme="true" :isMultiSelection="isMultiSelection"
+            <RadioOrCheckbox
+              class="checkbox"
+              :isLightTheme="true"
+              :isMultiSelection="isMultiSelection"
               :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
-              @change="v => selectItem(item, v)" />
+              @change="v => selectItem(item, v)"
+            />
           </span>
           <span class="table-data" v-for="(sub, idx) in tableHeadersFor3D" :key="idx">
             <div v-if="sub.type == 'image'" class="list-img">
@@ -209,7 +222,7 @@
         </div>
       </div>
       <!-- 无数据时的提示 -->
-      <div v-else class="no-data">
+      <div v-show="!(scene3DList.length !== 0 || hasMore3DData)" class="no-data">
         <div v-if="latestUsedSearchKey">
           <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
           <span>{{ no_serch_result }}</span>