[完善] 新增素材库模糊搜索功能

src/app/ui/collection-tools-building/collection-tools.component.html

@@ -61,7 +61,7 @@
 
   <!--功能区 -->
   <div class="functionalDomain">
-    <div class='functionalDomainContent' id="functionalDomainContent">
+    <div class='functionalDomainContent' id="functionalDomainContentTwo">
 
       <!-- H5Canvas -->
       <app-working-area #canvas [init]='this'></app-working-area>
@@ -125,6 +125,17 @@
             <label class="overflowText" style="font-weight: 550;">素材库</label>
           </div>
           <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
+            <div>
+              <input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
+              <div class="panelLibraryFlex" *ngIf="searchLibrary.length">
+                <div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name" 
+                [ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'>
+                  <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                  <p class="overflowText">{{items.name}}</p>
+                </div>
+              </div>
+            </div>
+            <ng-container *ngIf="!searchLibrary.length">
               <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
                 <mat-expansion-panel (opened)='opened(item)'>
                   <mat-expansion-panel-header>
@@ -142,6 +153,7 @@
   
                 </mat-expansion-panel>
               </mat-accordion>
+            </ng-container>
           </div>
         </div>
         <!-- 素材库 -->

src/app/ui/collection-tools-building/collection-tools.component.ts

@@ -692,7 +692,7 @@ export class CollectionToolsBuildingComponent implements OnInit {
 
     let that = this
     window.setTimeout(()=>{
-      document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
+      document.getElementById("functionalDomainContentTwo").oncontextmenu = function (event) {
         // that.canvas.cancelPaint()
         that.selectImageIndex = -1
         event.preventDefault();
@@ -2039,6 +2039,23 @@ export class CollectionToolsBuildingComponent implements OnInit {
   selectLibrary:any; //选中的素材库
   selectImage:any; //选中的素材库图片
   selectImageIndex:number; //选中的素材库图片index
+  searchSettimeout:any; //延时器
+  searchInput:string = null; //模糊搜索 input
+  searchLibrary:any = []; //模糊搜索 素材
+
+  //输入框 输入事件
+  libraryChange () {
+    window.clearTimeout(this.searchSettimeout)
+    this.searchSettimeout = window.setTimeout(()=>{
+      if (this.searchInput === "") {
+        this.searchLibrary = []
+      } else {
+        this.http.get(`/api/Assets?assetName=${this.searchInput}`).subscribe((data:any)=>{
+          this.searchLibrary = data
+        })
+      }
+    },500)
+  }
 
   //获取素材库
   getAllLibrary (type:string='input') {

src/app/ui/collection-tools-building/panel.scss

@@ -212,6 +212,18 @@
   box-sizing: border-box;
   margin-left: 10px;
 }
+//模糊搜索 input
+.searchLibrary {
+  display: block;
+  border: 1px solid rgb(219, 212, 212);
+  border-radius: 5px;
+  outline: none;
+  box-sizing: border-box;
+  margin: 5px auto;
+  padding-left: 5px;
+  width: 95%;
+  height: 30px;
+}
 .panelLibraryFlex {
   display: flex;
   flex-direction: row;

src/app/ui/collection-tools-plan/collection-tools.component.html

@@ -103,6 +103,17 @@
             <label class="overflowText" style="font-weight: 550;">素材库</label>
           </div>
           <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
+            <div>
+              <input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
+              <div class="panelLibraryFlex" *ngIf="searchLibrary.length">
+                <div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name" 
+                [ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'>
+                  <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                  <p class="overflowText">{{items.name}}</p>
+                </div>
+              </div>
+            </div>
+            <ng-container *ngIf="!searchLibrary.length">
               <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
                 <mat-expansion-panel (opened)='opened(item)'>
                   <mat-expansion-panel-header>
@@ -111,8 +122,7 @@
   
                   <div class="panelLibraryFlex">
                     <div class="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
-                    (click)='selectImg(item,items,key)'
+                      [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}" (click)='selectImg(item,items,key)'>
-                    [ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}">
                       <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
                       <p class="overflowText">{{items.name}}</p>
                     </div>
@@ -120,6 +130,7 @@
   
                 </mat-expansion-panel>
               </mat-accordion>
+            </ng-container>
           </div>
         </div>
         <!-- 素材库 -->

src/app/ui/collection-tools-plan/collection-tools.component.ts

@@ -2043,6 +2043,23 @@ export class CollectionToolsPlanComponent implements OnInit {
   selectLibrary:any; //选中的素材库
   selectImage:any; //选中的素材库图片
   selectImageIndex:number; //选中的素材库图片index
+  searchSettimeout:any; //延时器
+  searchInput:string = null; //模糊搜索 input
+  searchLibrary:any = []; //模糊搜索 素材
+
+  //输入框 输入事件
+  libraryChange () {
+    window.clearTimeout(this.searchSettimeout)
+    this.searchSettimeout = window.setTimeout(()=>{
+      if (this.searchInput === "") {
+        this.searchLibrary = []
+      } else {
+        this.http.get(`/api/Assets?assetName=${this.searchInput}`).subscribe((data:any)=>{
+          this.searchLibrary = data
+        })
+      }
+    },500)
+  }
 
   //获取素材库
   getAllLibrary (type:string='input') {

src/app/ui/collection-tools-plan/panel.scss

@@ -212,6 +212,18 @@
   box-sizing: border-box;
   margin-left: 10px;
 }
+//模糊搜索 input
+.searchLibrary {
+  display: block;
+  border: 1px solid rgb(219, 212, 212);
+  border-radius: 5px;
+  outline: none;
+  box-sizing: border-box;
+  margin: 5px auto;
+  padding-left: 5px;
+  width: 95%;
+  height: 30px;
+}
 .panelLibraryFlex {
   display: flex;
   flex-direction: row;

src/app/ui/collection-tools/collection-tools.component.html

@@ -202,6 +202,17 @@
             <label class="overflowText" style="font-weight: 550;">素材库</label>
           </div>
           <div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
+            <div>
+              <input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
+              <div class="panelLibraryFlex" *ngIf="searchLibrary.length">
+                <div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name" 
+                [ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'>
+                  <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
+                  <p class="overflowText">{{items.name}}</p>
+                </div>
+              </div>
+            </div>
+            <ng-container *ngIf="!searchLibrary.length">
               <mat-accordion *ngFor="let item of allLibrary" id="panelLibrary">
                 <mat-expansion-panel (opened)='opened(item)'>
                   <mat-expansion-panel-header>
@@ -219,6 +230,7 @@
   
                 </mat-expansion-panel>
               </mat-accordion>
+            </ng-container>
           </div>
         </div>
         <!-- 素材库 -->

src/app/ui/collection-tools/collection-tools.component.ts

@@ -2092,6 +2092,23 @@ export class CollectionToolsComponent implements OnInit {
   selectLibrary:any; //选中的素材库
   selectImage:any; //选中的素材库图片
   selectImageIndex:number; //选中的素材库图片index
+  searchSettimeout:any; //延时器
+  searchInput:string = null; //模糊搜索 input
+  searchLibrary:any = []; //模糊搜索 素材
+
+  //输入框 输入事件
+  libraryChange () {
+    window.clearTimeout(this.searchSettimeout)
+    this.searchSettimeout = window.setTimeout(()=>{
+      if (this.searchInput === "") {
+        this.searchLibrary = []
+      } else {
+        this.http.get(`/api/Assets?assetName=${this.searchInput}`).subscribe((data:any)=>{
+          this.searchLibrary = data
+        })
+      }
+    },500)
+  }
 
   //获取素材库
   getAllLibrary (type:string='input') {

src/app/ui/collection-tools/panel.scss

@@ -209,6 +209,18 @@
   box-sizing: border-box;
   margin-left: 10px;
 }
+//模糊搜索 input
+.searchLibrary {
+  display: block;
+  border: 1px solid rgb(219, 212, 212);
+  border-radius: 5px;
+  outline: none;
+  box-sizing: border-box;
+  margin: 5px auto;
+  padding-left: 5px;
+  width: 95%;
+  height: 30px;
+}
 .panelLibraryFlex {
   display: flex;
   flex-direction: row;