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

proxy.config.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://121.37.20.190:8008/",
+      "target": "http://39.106.78.171:8008/",
       "secure": false,
       "changeOrigin": true
     }

src/app/pages/register/register.component.html

@@ -25,7 +25,7 @@
           </div>
           <div *ngIf="usci.invalid && (usci.dirty || usci.touched)" class="alert-danger">
             <div *ngIf="usci.errors.pattern">
-              统一社会信用代码格式不正确
+              统一社会信用代码格式为18位字母/数字
             </div>
           </div>
 
@@ -39,7 +39,7 @@
           </div>
           <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert-danger">
             <div *ngIf="tel.errors.pattern">
-              电话号码格式不正确
+              电话号码格式为11位数字
             </div>
           </div>
 

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

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

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

@@ -1738,6 +1738,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 () {

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

@@ -155,6 +155,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;