素材管理列表和素材选择列表里完善搜索功能

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

@@ -7,13 +7,13 @@
   >
     <crumbs
       class="crumbs"
-      v-if="!latestUsedSearchKey"
+      v-if="!searchKey"
       :isDarkTheme="isDarkTheme"
       :list="folderPath"
       :rootName="$i18n.t(`gather.${materialTypeAlias}`)"
       @click-path="onClickPath"
     />
-    <div v-if="latestUsedSearchKey" class="crumbs">{{$i18n.t(`gather.${materialTypeAlias}`)}}</div>
+    <div v-if="searchKey" class="crumbs">{{$i18n.t(`gather.${materialTypeAlias}`)}}</div>
 
     <div class="table">
       <!-- <div class="table-head-row">
@@ -46,7 +46,7 @@
         <div v-for="(item, i) in uploadStatusList" :key="item.uid">
           <div
             class="table-body-row"
-            v-if="item.parentFolderId === currentFolderId"
+            v-if="item.parentFolderId === currentFolderId && !searchKey"
             @click="onClickRow"
           >
             <!-- 如果已经上传成功 -->
@@ -230,6 +230,9 @@
             <span
               v-else-if="tableItemStructure.key === 'name'"
               class="name"
+              :class="{
+                searchRes: latestUsedSearchKey,
+              }"
             >
               <div
                 class="name-inner ellipsis"
@@ -237,6 +240,12 @@
               >
                 {{ item[tableItemStructure.key] }}
               </div>
+              <div
+                v-if="latestUsedSearchKey"
+                class="parent-info"
+              >
+                {{$i18n.t('gather.dir')}} <span class="parent-name" @click.stop="onClickParentFolder(item)">{{item.dirId === 1 ? $i18n.t('gather.root_dir') : item.dirName}}</span>
+              </div>
             </span>
             <span
               v-else
@@ -271,7 +280,7 @@
     </div>
 
     <div class="btns">
-      <button v-if="canUpload" class="ui-button upload-btn" @click="onClickUpload">
+      <button v-if="canUpload && !searchKey" class="ui-button upload-btn" @click="onClickUpload">
         <span>{{ $i18n.t("gather.upload_material") }}</span>
         <i
           class="iconfont icon-material_prompt tool-tip-for-editor"
@@ -820,7 +829,7 @@ export default {
               }
             }
           }
-          > .name {
+          > .name:not(.searchRes) {
             display: inline-block;
             height: 100%;
             width: 100%;
@@ -839,6 +848,25 @@ export default {
               margin-left: 20px;
             }
           }
+          > .name.searchRes {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            line-height: initial;
+            > .name-inner {
+              flex: 0 0 auto;
+              display: inline-block;
+              width: 100%;
+            }
+            > .parent-info {
+              > .parent-name {
+                color: @color;
+              }
+            }
+          }
           > .name:not(.upload-status-wrap):hover {
             > .name-inner {
               width: 100%;

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

@@ -100,6 +100,8 @@
       :fileInputAcceptType="'image/jpeg'"
       :fileInputMediaType="'image'"
       :fileInputLimit="120"
+
+      @need-clear-filter="() => {searchKey = ''}"
     >
       <template
         v-slot:materialUploadSuccessIcon="slotProps"
@@ -160,6 +162,8 @@
       :fileInputAcceptType="'image/png,image/jpeg'"
       :fileInputMediaType="'image'"
       :fileInputLimit="10"
+
+      @need-clear-filter="() => {searchKey = ''}"
     >
       <template
         v-slot:materialUploadSuccessIcon="slotProps"
@@ -220,6 +224,8 @@
       :fileInputAcceptType="'audio/mp3'"
       :fileInputMediaType="'audio'"
       :fileInputLimit="20"
+
+      @need-clear-filter="() => {searchKey = ''}"
     >
       <template
         v-slot:materialUploadSuccessIcon="slotProps"
@@ -287,6 +293,8 @@
       :fileInputAcceptType="'video/mp4'"
       :fileInputMediaType="'video'"
       :fileInputLimit="200"
+
+      @need-clear-filter="() => {searchKey = ''}"
     >
       <template
         v-slot:materialUploadSuccessIcon="slotProps"
@@ -340,6 +348,8 @@
       :select="select"
 
       :searchKey="searchKey"
+
+      @need-clear-filter="() => {searchKey = ''}"
     >
       <template
         v-slot:materialIcon="slotProps"
@@ -430,7 +440,6 @@ export default {
       'clearUploadStatusLists',
     ]),
     async checkPanoFileInput(eachFile, i) {
-      debugger
       let WHRate = null
       try {
         const { width, height } = await getImgWH(eachFile)

packages/qjkankan-editor/src/components/materialSelectorFolderMixin.js

@@ -1,6 +1,6 @@
 import crumbs from "@/components/crumbs";
 
-import { nodeIdList2nodeInfoListByNodeTree } from "@/utils/other.js";
+import { nodeIdList2nodeInfoListByNodeTree, preOrderTraversalSearch } from "@/utils/other.js";
 import {
   getFolderTree,
 } from "@/api";
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     onClickPath(idx) {
-      this.searchKey = ''
+      this.$emit('need-clear-filter')
       this.folderPath = this.folderPath.slice(0, idx + 1)
     },
     onClickFolder(folder) {
@@ -37,9 +37,36 @@ export default {
         })
         targetPathIdList.push(folder.id)
         this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
-        this.searchKey = ''
+        this.$emit('need-clear-filter')
       })
     },
+    onClickParentFolder(clickedItem) {
+      getFolderTree({
+        type: this.currentMaterialType,
+      }).then((res) => {
+        this.folderTree = res.data
+        if (clickedItem.type === 'dir') {
+          const targetPathIdList = clickedItem.ancestors.split(',').map((item) => {
+            return Number(item)
+          })
+          this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
+        } else {
+          // 在folderTree里找到id等于clickedItem.dirId的那个文件夹，从而确定folderPath
+          let targetNodePath = []
+          preOrderTraversalSearch(this.folderTree, (node) => {
+            if (node.id === clickedItem.dirId) {
+              return true
+            } else {
+              return false
+            }
+          }, targetNodePath)
+          this.folderPath = targetNodePath.map((item) => {
+            return item.id
+          })
+        }
+        this.$emit('need-clear-filter')
+      })
+    }
   },
   watch: {
     currentFolderId: {

packages/qjkankan-editor/src/lang/_en.json

@@ -646,7 +646,10 @@
     "at_least_one_scene": "At least one scene can be previewed. Please go to \"Scene Navigation\" to add",
     "exitVr": "Exit VR",
 
-    "root_dir": "根目录"
+    "dir": "目录",
+    "root_dir": "根目录",
+
+    "no_more_data": "没有更多数据了"
   },
   "personal_center": {
     "personal_center": "Personal Center",

packages/qjkankan-editor/src/lang/_zh.json

@@ -650,6 +650,7 @@
     "at_least_one_scene": "至少添加一个场景才可预览，请前往“场景导航”添加",
     "exitVr": "退出VR模式",
 
+    "dir": "目录",
     "root_dir": "根目录",
 
     "no_more_data": "没有更多数据了"

packages/qjkankan-editor/src/utils/other.js

@@ -211,12 +211,31 @@ export function postOrderTraversal(root, routine) {
   routine(root)
 }
 
+export function preOrderTraversalSearch(root, checkNode, targetNodePath) {
+  console.assert(root && checkNode && targetNodePath, `param invalid: ${root} ${checkNode} ${targetNodePath}`)
+  targetNodePath.push(root)
+  let rootCheckRes = checkNode(root)
+  if (rootCheckRes) {
+    return true
+  }
+  if (root.children && Array.isArray(root.children)) {
+    for (const child of root.children) {
+      let childCheckRes = preOrderTraversalSearch(child, checkNode, targetNodePath)
+      if (childCheckRes) {
+        return true
+      }
+    }
+  }
+  targetNodePath.pop()
+  return false
+}
+
 export function nodeIdList2nodeInfoListByNodeTree(nodeIdList, nodeTree) {
   console.assert(nodeIdList && nodeTree && nodeTree.id && nodeTree.name, 'nodeIdList2nodeInfoListByNodeTree: invalid param!')
   if (nodeIdList.length === 0) {
     return null
   }
-  console.assert(nodeTree.id === nodeIdList[0], 'nodeIdList2nodeInfoListByNodeTree: 不可能的任务！')
+  console.assert(nodeTree.id === nodeIdList[0], 'nodeIdList2nodeInfoListByNodeTree: 不可能的任务！', nodeTree, nodeIdList)
   let ret = [
     {
       id: nodeTree.id,

packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -10,7 +10,7 @@
       <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.audio")}}</div>
     </div>
     <div class="second-line">
-      <template v-if="!lastestUsedSearchKey">
+      <template v-if="!searchKey">
         <div class="btn">
           <button
             @mouseover.stop="showList = true"

packages/qjkankan-editor/src/views/material/folderMixinFactory.js

@@ -1,7 +1,7 @@
 import CreateFolder from "./popup/CreateFolder";
 import RenameFolder from "./popup/RenameFolder";
 import MoveFolder from "./popup/MoveFolder";
-import { nodeIdList2nodeInfoListByNodeTree } from "@/utils/other.js";
+import { nodeIdList2nodeInfoListByNodeTree, preOrderTraversalSearch } from "@/utils/other.js";
 import {
   getFolderTree,
   createFolder as createFolderApi,
@@ -210,15 +210,30 @@ export default function(materialType) {
           this.selectedList = []
         })
       },
-      onClickParentFolder(folder) {
+      onClickParentFolder(clickedItem) {
         getFolderTree({
           type: materialType,
         }).then((res) => {
           this.folderTree = res.data
-          const targetPathIdList = folder.ancestors.split(',').map((item) => {
-            return Number(item)
-          })
-          this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
+          if (clickedItem.type === 'dir') {
+            const targetPathIdList = clickedItem.ancestors.split(',').map((item) => {
+              return Number(item)
+            })
+            this.folderPath = nodeIdList2nodeInfoListByNodeTree(targetPathIdList, this.folderTree)
+          } else {
+            // 在folderTree里找到id等于clickedItem.dirId的那个文件夹，从而确定folderPath
+            let targetNodePath = []
+            preOrderTraversalSearch(this.folderTree, (node) => {
+              if (node.id === clickedItem.dirId) {
+                return true
+              } else {
+                return false
+              }
+            }, targetNodePath)
+            this.folderPath = targetNodePath.map((item) => {
+              return item.id
+            })
+          }
           this.searchKey = ''
           this.selectedList = []
         })

packages/qjkankan-editor/src/views/material/image/index.vue

@@ -10,7 +10,7 @@
       <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.image")}}</div>
     </div>
     <div class="second-line">
-      <template v-if="!lastestUsedSearchKey">
+      <template v-if="!searchKey">
         <div class="btn">
           <button
             @mouseover.stop="showList = true"

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -10,7 +10,7 @@
       <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.pano")}}</div>
     </div>
     <div class="second-line">
-      <template v-if="!lastestUsedSearchKey">
+      <template v-if="!searchKey">
         <div class="btn">
           <button @mouseover.stop="showList = true" @click="onUploadFile" class="ui-button submit">
             <span>{{ upload_material }}</span>
@@ -159,7 +159,7 @@
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    {{$i18n.t('gather.dir')}} <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
                   </div>
                 </div>
                 <!-- 素材名称 -->
@@ -168,7 +168,7 @@
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    {{$i18n.t('gather.dir')}} <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
                   </div>
                 </div>
               </div>

packages/qjkankan-editor/src/views/material/video/index.vue

@@ -10,7 +10,7 @@
       <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.video")}}</div>
     </div>
     <div class="second-line">
-      <template v-if="!lastestUsedSearchKey">
+      <template v-if="!searchKey">
         <div class="btn">
           <button
             @mouseover.stop="showList = true"