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">
<a href="ax://startup?" style="color: white">启动培训系统</a>
</div>
<div class="addBankBtn" (click)="addDataBank()">
<div class="addBankBtn" (click)="addDataBank()" *ngIf="islogin.isLogin">
<mat-icon>note_add</mat-icon> <span>新增资料库</span>
</div>
<ul>
@ -19,7 +19,7 @@
(mouseenter)="liEnter(item)"
(mouseleave)="liLeave(item)"
>{{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="deleteicon" (click)="deleteDataBank(item)" style="color: #e02626;">delete</mat-icon></span>
</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 {
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; //父组件中获得子组件的引用
allDataBank:any //所有的资料库
selectedDataBank:any //当前选中的资料库
hoverDataBank:any //当前鼠标移入的资料库
isOneClick:boolean //是否第一次进入网页
ngOnInit() {
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>
</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">
<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="leftbox">
<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>
<input type="file" (change)='selectFile($event)'>
</div>
@ -17,13 +17,13 @@
</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>
</div>
<div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)='downLoadFile()'>
<mat-icon>save_alt</mat-icon> <span>下载</span>
</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>
</div>
@ -44,7 +44,7 @@
<div class="inputbox">
<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="search"><mat-icon>search</mat-icon></span>
<span class="search" (click)="search()"><mat-icon>search</mat-icon></span>
</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 == 'xlsx'" src="../../../assets/images/excel.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 == 'txt'" src="../../../assets/images/txt.png" alt="">
<img *ngIf="element.type == 'pptx'" src="../../../assets/images/ppt.png" alt="">
<i class="iconfont icon-mp"></i>
<span class="filename" (click)="clickName($event)">
<span class="filename" (click)="clickName($event,element)">
{{element.key | name}}
</span>
@ -119,7 +119,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
(click)="clickCheckBoxLi($event,row)">
</tr>
</table>
<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 {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { IsLoginService } from '../../is-login.service'
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-all-file',
templateUrl: './all-file.component.html',
@ -14,7 +15,7 @@ export class AllFileComponent implements OnInit {
displayedColumns: string[] = ['select', 'name', 'weight', 'time'];
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是否显示
searchData:any = "搜索您的文件" //搜索框内容
isClickFile:boolean = false //是否点击过文件
@ -57,7 +58,6 @@ export class AllFileComponent implements OnInit {
ngOnInit(): void {
this.dataSource.sort = this.sort;
this.getAllDataBank()
}
//获得所有资料库,默认显示第一个资料库的文件
@ -125,13 +125,55 @@ export class AllFileComponent implements OnInit {
}
//搜索框点击X事件
cancelbtn(){
this.getALLFileList(this.selectedDataBank)
this.searchData = "搜索您的文件"
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()
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);
}
//点击每条的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 //需要上传的文件
//input file 选择文件
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 {ConfirmpswDirective} from './changepassword/equal-validator.directive';
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 { LoginComponent } from './login/login.component';
@NgModule({
declarations: [PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
declarations: [ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
imports: [
CommonModule,

Loading…
Cancel
Save