Browse Source

[新增]图片视频在线查看,以及按钮显隐

master
邵佳豪 5 years ago
parent
commit
6907190a8a
  1. 4
      src/app/navigation/navigation.component.html
  2. 3
      src/app/navigation/navigation.component.ts
  3. 1
      src/app/tabbar/tabbar.component.html
  4. 14
      src/app/ui/all-file/all-file.component.html
  5. 89
      src/app/ui/all-file/all-file.component.ts
  6. 6
      src/app/ui/all-file/viewdetails.html
  7. 4
      src/app/ui/ui.module.ts

4
src/app/navigation/navigation.component.html

@ -8,7 +8,7 @@
<div class="openSystem"> <div class="openSystem">
<a href="ax://startup?" style="color: white">启动培训系统</a> <a href="ax://startup?" style="color: white">启动培训系统</a>
</div> </div>
<div class="addBankBtn" (click)="addDataBank()"> <div class="addBankBtn" (click)="addDataBank()" *ngIf="islogin.isLogin">
<mat-icon>note_add</mat-icon> <span>新增资料库</span> <mat-icon>note_add</mat-icon> <span>新增资料库</span>
</div> </div>
<ul> <ul>
@ -19,7 +19,7 @@
(mouseenter)="liEnter(item)" (mouseenter)="liEnter(item)"
(mouseleave)="liLeave(item)" (mouseleave)="liLeave(item)"
>{{item.name}} >{{item.name}}
<h4 class="editli" [ngClass]="{'editlihover': item.id === hoverDataBank}"> <h4 class="editli" [ngClass]="{'editlihover': item.id === hoverDataBank}" *ngIf="islogin.isLogin">
<span><mat-icon class="editicon" (click)="editDataBankName(item)">edit</mat-icon></span> <span><mat-icon class="editicon" (click)="editDataBankName(item)">edit</mat-icon></span>
<span><mat-icon class="deleteicon" (click)="deleteDataBank(item)" style="color: #e02626;">delete</mat-icon></span> <span><mat-icon class="deleteicon" (click)="deleteDataBank(item)" style="color: #e02626;">delete</mat-icon></span>
</h4> </h4>

3
src/app/navigation/navigation.component.ts

@ -13,14 +13,13 @@ import { AllFileComponent } from '../ui/all-file/all-file.component';
}) })
export class NavigationComponent implements OnInit { export class NavigationComponent implements OnInit {
constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public sss:IsLoginService) { } constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public islogin:IsLoginService) { }
@ViewChild('child') child:AllFileComponent; //父组件中获得子组件的引用 @ViewChild('child') child:AllFileComponent; //父组件中获得子组件的引用
allDataBank:any //所有的资料库 allDataBank:any //所有的资料库
selectedDataBank:any //当前选中的资料库 selectedDataBank:any //当前选中的资料库
hoverDataBank:any //当前鼠标移入的资料库 hoverDataBank:any //当前鼠标移入的资料库
isOneClick:boolean //是否第一次进入网页 isOneClick:boolean //是否第一次进入网页
ngOnInit() { ngOnInit() {
this.http.get('/api/DataBanks').subscribe((data:any) => { this.http.get('/api/DataBanks').subscribe((data:any) => {

1
src/app/tabbar/tabbar.component.html

@ -8,6 +8,7 @@
<mat-icon>account_circle</mat-icon> <mat-icon>account_circle</mat-icon>
</button> </button>
<span style="position: absolute;right:100px;color: white;font-size: 16px;" *ngIf="isLogin.isLogin">已登录</span>
<!-- 已登录状态 --> <!-- 已登录状态 -->
<button mat-icon-button [matMenuTriggerFor]="appMenu" class="login" *ngIf="isLogin.isLogin"> <button mat-icon-button [matMenuTriggerFor]="appMenu" class="login" *ngIf="isLogin.isLogin">
<mat-icon>account_circle</mat-icon> <mat-icon>account_circle</mat-icon>

14
src/app/ui/all-file/all-file.component.html

@ -2,7 +2,7 @@
<div class="topbox"> <div class="topbox">
<div class="leftbox"> <div class="leftbox">
<div class="upload" (mouseenter)="uploadBtnEnter()" (mouseleave)="uploadBtnLeave()"> <div class="upload" (mouseenter)="uploadBtnEnter()" (mouseleave)="uploadBtnLeave()">
<div class="btn" style="width: 88px;height: 33px;"> <div class="btn" style="width: 88px;height: 33px;" *ngIf="downloadFile.isLogin">
<mat-icon>backup</mat-icon><span> 上传</span> <mat-icon>backup</mat-icon><span> 上传</span>
<input type="file" (change)='selectFile($event)'> <input type="file" (change)='selectFile($event)'>
</div> </div>
@ -17,13 +17,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="newFile" (click)="yyy()"> <div class="newFile" (click)="yyy()" *ngIf="downloadFile.isLogin">
<mat-icon>create_new_folder</mat-icon> <span>新建文件夹</span> <mat-icon>create_new_folder</mat-icon> <span>新建文件夹</span>
</div> </div>
<div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)='downLoadFile()'> <div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)='downLoadFile()'>
<mat-icon>save_alt</mat-icon> <span>下载</span> <mat-icon>save_alt</mat-icon> <span>下载</span>
</div> </div>
<div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)="deleteFiles()"> <div class="newFile" style="width: 88px;" *ngIf="isDelete && downloadFile.isLogin" (click)="deleteFiles()">
<mat-icon>delete</mat-icon> <span>删除</span> <mat-icon>delete</mat-icon> <span>删除</span>
</div> </div>
@ -44,7 +44,7 @@
<div class="inputbox"> <div class="inputbox">
<input type="text" [(ngModel)]="searchData" (focus)="searchfocus($event)" (blur)="searchblur($event)"> <input type="text" [(ngModel)]="searchData" (focus)="searchfocus($event)" (blur)="searchblur($event)">
<span class="cancel" *ngIf="isCancel" (click)="cancelbtn()"><mat-icon style="font-size: 16px;">cancel</mat-icon></span> <span class="cancel" *ngIf="isCancel" (click)="cancelbtn()"><mat-icon style="font-size: 16px;">cancel</mat-icon></span>
<span class="search"><mat-icon>search</mat-icon></span> <span class="search" (click)="search()"><mat-icon>search</mat-icon></span>
</div> </div>
</div> </div>
</div> </div>
@ -95,12 +95,12 @@
<img *ngIf="element.type == 'doc' || element.type == 'docx'" src="../../../assets/images/word.png" alt=""> <img *ngIf="element.type == 'doc' || element.type == 'docx'" src="../../../assets/images/word.png" alt="">
<img *ngIf="element.type == 'xlsx'" src="../../../assets/images/excel.png" alt=""> <img *ngIf="element.type == 'xlsx'" src="../../../assets/images/excel.png" alt="">
<img *ngIf="element.type == 'zip'" src="../../../assets/images/zip.png" alt=""> <img *ngIf="element.type == 'zip'" src="../../../assets/images/zip.png" alt="">
<img *ngIf="element.type == 'MP4'" src="../../../assets/images/MP4.png" alt=""> <img *ngIf="element.type == 'MP4' || element.type == 'mp4'" src="../../../assets/images/MP4.png" alt="">
<img *ngIf="element.type == 'bmp'" src="../../../assets/images/bmp.png" alt=""> <img *ngIf="element.type == 'bmp'" src="../../../assets/images/bmp.png" alt="">
<img *ngIf="element.type == 'txt'" src="../../../assets/images/txt.png" alt=""> <img *ngIf="element.type == 'txt'" src="../../../assets/images/txt.png" alt="">
<img *ngIf="element.type == 'pptx'" src="../../../assets/images/ppt.png" alt=""> <img *ngIf="element.type == 'pptx'" src="../../../assets/images/ppt.png" alt="">
<i class="iconfont icon-mp"></i> <i class="iconfont icon-mp"></i>
<span class="filename" (click)="clickName($event)"> <span class="filename" (click)="clickName($event,element)">
{{element.key | name}} {{element.key | name}}
</span> </span>
@ -119,7 +119,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" <tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)"> (click)="clickCheckBoxLi($event,row)">
</tr> </tr>
</table> </table>
<div *ngIf="isNoFileTitle" style="width: 100%;text-align: center;margin-top: 10px;"> <div *ngIf="isNoFileTitle" style="width: 100%;text-align: center;margin-top: 10px;">

89
src/app/ui/all-file/all-file.component.ts

@ -1,10 +1,11 @@
import { Component, OnInit,ViewChild } from '@angular/core'; import { Component, OnInit,ViewChild ,Inject} from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections'; import { SelectionModel } from '@angular/cdk/collections';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import { HttpClient,HttpHeaders } from '@angular/common/http'; import { HttpClient,HttpHeaders } from '@angular/common/http';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { IsLoginService } from '../../is-login.service' import { IsLoginService } from '../../is-login.service'
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({ @Component({
selector: 'app-all-file', selector: 'app-all-file',
templateUrl: './all-file.component.html', templateUrl: './all-file.component.html',
@ -14,7 +15,7 @@ export class AllFileComponent implements OnInit {
displayedColumns: string[] = ['select', 'name', 'weight', 'time']; displayedColumns: string[] = ['select', 'name', 'weight', 'time'];
dataSource:any = new MatTableDataSource; dataSource:any = new MatTableDataSource;
constructor(private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService) { } constructor(private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService,public dialog: MatDialog) { }
isCancel:boolean = false //搜索框的X是否显示 isCancel:boolean = false //搜索框的X是否显示
searchData:any = "搜索您的文件" //搜索框内容 searchData:any = "搜索您的文件" //搜索框内容
isClickFile:boolean = false //是否点击过文件 isClickFile:boolean = false //是否点击过文件
@ -57,7 +58,6 @@ export class AllFileComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
this.getAllDataBank() this.getAllDataBank()
} }
//获得所有资料库,默认显示第一个资料库的文件 //获得所有资料库,默认显示第一个资料库的文件
@ -125,13 +125,55 @@ export class AllFileComponent implements OnInit {
} }
//搜索框点击X事件 //搜索框点击X事件
cancelbtn(){ cancelbtn(){
this.getALLFileList(this.selectedDataBank)
this.searchData = "搜索您的文件" this.searchData = "搜索您的文件"
this.isCancel = false this.isCancel = false
} }
//点击名字 //点击搜索
clickName(e){ search(){
if(this.searchData != "搜索您的文件"){
this.http.get("/api/Objects/drives",{
params:{
prefix : this.searchData
}
}).subscribe(data=>{
console.log(data)
},
err=>{
})
}
}
//点击列表每一条的名字
clickName(e,item){
e.stopPropagation() e.stopPropagation()
console.log(123) console.log(item)
if(item.type == "jpg" || item.type == "png"){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
width: '1600px',
height:'900px',
data: {url:item.key,type:"img"}
});
dialogRef.afterClosed().subscribe(
);
}else if(item.type == "mp4" || item.type == "MP4"){
const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
width: '1600px',
height:'900px',
data: {url:item.key,type:"video"}
});
dialogRef.afterClosed().subscribe(
);
}else{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('该文件类型暂不支持在线查看,请下载查看','确定',config)
}
} }
//面包屑点击全部文件 //面包屑点击全部文件
@ -160,7 +202,17 @@ export class AllFileComponent implements OnInit {
} }
}, 0); }, 0);
} }
//点击每条的li
clickCheckBoxLi(e,row){
this.selection.toggle(row)
setTimeout(() => {
if(this.selection.selected.length != 0){
this.isDelete = true
} else{
this.isDelete = false
}
}, 0);
}
file:any //需要上传的文件 file:any //需要上传的文件
//input file 选择文件 //input file 选择文件
selectFile (e) { selectFile (e) {
@ -325,3 +377,26 @@ export class AllFileComponent implements OnInit {
} }
} }
@Component({
selector: 'viewdetails',
templateUrl: './viewdetails.html',
styleUrls: ['./all-file.component.scss']
})
export class ViewDetails {
// myControl = new FormControl();
//注入MatDialogRef,可以用来关闭对话框
//要访问对话框组件中的数据,必须使用MAT_DIALOG_DATA注入令牌
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails>,@Inject(MAT_DIALOG_DATA) public data) {}
Url:string
onNoClick(): void {
this.dialogRef.close();
}
ngOnInit(): void {
this.Url = "/api/Objects/drives/" + this.data.url
}
}

6
src/app/ui/all-file/viewdetails.html

@ -0,0 +1,6 @@
<div>
<div class="imgbox" style="text-align: center;">
<img *ngIf="data.type == 'img'" style="max-width: 100%;max-height: 100%;" class="imgitemdefault" [src]="Url">
<video style="margin-top: 70px;" autoplay controls *ngIf="data.type == 'video'" [src]="Url"></video>
</div>
</div>

4
src/app/ui/ui.module.ts

@ -50,12 +50,12 @@ import { ChangepasswordComponent } from './changepassword/changepassword.compone
import { SizePipe , NamePipe} from '../pipes/size.pipe'; import { SizePipe , NamePipe} from '../pipes/size.pipe';
import {ConfirmpswDirective} from './changepassword/equal-validator.directive'; import {ConfirmpswDirective} from './changepassword/equal-validator.directive';
import { FileUploadModule } from 'ng2-file-upload' import { FileUploadModule } from 'ng2-file-upload'
import { AllFileComponent } from './all-file/all-file.component'; import { AllFileComponent, ViewDetails } from './all-file/all-file.component';
import { ChangeuserdataComponent } from './changeuserdata/changeuserdata.component'; import { ChangeuserdataComponent } from './changeuserdata/changeuserdata.component';
import { LoginComponent } from './login/login.component'; import { LoginComponent } from './login/login.component';
@NgModule({ @NgModule({
declarations: [PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent], declarations: [ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
imports: [ imports: [
CommonModule, CommonModule,

Loading…
Cancel
Save