shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

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

zhuzhou
陈鹏飞 4 years ago
parent
a8798658ec
commit
2c1aeee4df
9 changed files with 172 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      src/app/ui/collection-tools-building/collection-tools.component.html
  2. 19
      src/app/ui/collection-tools-building/collection-tools.component.ts
  3. 12
      src/app/ui/collection-tools-building/panel.scss
  4. 43
      src/app/ui/collection-tools-plan/collection-tools.component.html
  5. 17
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  6. 12
      src/app/ui/collection-tools-plan/panel.scss
  7. 44
      src/app/ui/collection-tools/collection-tools.component.html
  8. 17
      src/app/ui/collection-tools/collection-tools.component.ts
  9. 12
      src/app/ui/collection-tools/panel.scss

46
src/app/ui/collection-tools-building/collection-tools.component.html
Unescape View File

@ -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,23 +125,35 @@
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
<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="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}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
<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>
</mat-expansion-panel>
</mat-accordion>
</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="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}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
<!-- 素材库 -->

19
src/app/ui/collection-tools-building/collection-tools.component.ts
Unescape View File

@ -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') {

12
src/app/ui/collection-tools-building/panel.scss
Unescape View File

@ -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;

43
src/app/ui/collection-tools-plan/collection-tools.component.html
Unescape View File

@ -103,23 +103,34 @@
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
<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="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}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
<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>
</mat-expansion-panel>
</mat-accordion>
</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="imgBox" *ngFor="let items of item.images;let key = index" [title]="items.name"
[ngClass]="{'selectImg': selectLibrary==item.name && selectImageIndex==key}" (click)='selectImg(item,items,key)'>
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
<!-- 素材库 -->

17
src/app/ui/collection-tools-plan/collection-tools.component.ts
Unescape View File

@ -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') {

12
src/app/ui/collection-tools-plan/panel.scss
Unescape View File

@ -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;

44
src/app/ui/collection-tools/collection-tools.component.html
Unescape View File

@ -202,23 +202,35 @@
<label class="overflowText" style="font-weight: 550;">素材库</label>
</div>
<div [hidden]="!toggleMaterialBank" [ngClass]="{'materialBankDIV': pattern}">
<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="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}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
<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>
</mat-expansion-panel>
</mat-accordion>
</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="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}">
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
<!-- 素材库 -->

17
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -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') {

12
src/app/ui/collection-tools/panel.scss
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save