22 changed files with 774 additions and 37 deletions
@ -1 +1,56 @@
|
||||
<p>details-file-category works!</p> |
||||
<div class="box" id="detailsfilecategory"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
详情 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<p>证件名称: 建设用地规划许可证</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>有效期类型: 1523天</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>是否年检: 是</p> |
||||
<div class="cutoffrule"></div> |
||||
<p>证件图片: <img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt="" |
||||
(click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p> |
||||
<div class="cutoffrule"></div> |
||||
<p class="recordP"> |
||||
<span>审核记录</span> |
||||
<span> |
||||
<span style="margin-right: 6px;"> |
||||
审核次数：6 |
||||
</span> |
||||
<span> |
||||
驳回次数：2 |
||||
</span> |
||||
</span> |
||||
</p> |
||||
<nz-timeline> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item> |
||||
<span style="margin-right: 12px;">2022.04.02</span> |
||||
<span>审核完成</span> |
||||
</nz-timeline-item> |
||||
</nz-timeline> |
||||
<ng-template #soccerTemplate> |
||||
<div class="circle"> |
||||
|
||||
</div> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
@ -0,0 +1,60 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
box-sizing: border-box; |
||||
padding: 0 15px; |
||||
max-height: 580px; |
||||
overflow-y: auto; |
||||
|
||||
.circle { |
||||
width: 8px; |
||||
height: 8px; |
||||
background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%); |
||||
opacity: 1; |
||||
} |
||||
.recordP{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 12px 0; |
||||
|
||||
img { |
||||
width: 88px; |
||||
height: 56px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
@ -1 +1,44 @@
|
||||
<p>edit-file-category works!</p> |
||||
<div class="box" id="editfilecategory"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
编辑 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
<form nz-form [formGroup]="validateForm" class="form"> |
||||
<p>证件名称: 建设用地规划许可证</p> |
||||
|
||||
<div class="cutoffrule"></div> |
||||
|
||||
<p>有效期类型<span style="color: red;">*</span></p> |
||||
|
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="type"> |
||||
<nz-option nzValue="0" nzLabel="不适用"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<p>附件上传（图片格式、pdf格式、word格式）</p> |
||||
|
||||
<div class="uploadDivbox"> |
||||
<div class="uploadDiv" style="margin-right: 12px;"> |
||||
<img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl" alt="" |
||||
(click)="viewImg(imageUrl)"> |
||||
<input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" id=""> |
||||
<button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload" |
||||
nzTheme="outline"></i>上传附件</button> |
||||
</div> |
||||
<div class="uploadDiv" *ngIf="imageUrl"> |
||||
<input (change)="filechange($event)" class="fileinput" type="file" name="" id=""> |
||||
<button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btnbox"> |
||||
<button nz-button type="submit" class="ok" (click)="ok()">确定</button> |
||||
<button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,127 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.form { |
||||
box-sizing: border-box; |
||||
padding: 0 17px; |
||||
|
||||
label { |
||||
color: #C4E2FC; |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
|
||||
|
||||
.validity { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
nz-date-picker { |
||||
flex: .5; |
||||
} |
||||
|
||||
nz-range-picker { |
||||
flex: 1; |
||||
} |
||||
|
||||
.btnbox { |
||||
width: 100%; |
||||
margin-top: 24px; |
||||
margin-bottom: 17px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
button { |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
|
||||
button:nth-child(2) { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
.ok { |
||||
background: rgba(0, 129, 255, 0.4); |
||||
} |
||||
|
||||
.cancel { |
||||
border: 1px solid #C4E2FC; |
||||
background: #0c1e38; |
||||
color: rgba(99, 102, 105, 0.6); |
||||
box-shadow: 0 0 3px 0 #fff inset; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.uploadDivbox { |
||||
width: 100%; |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
margin: 5px 0; |
||||
|
||||
.uploadDiv { |
||||
width: 120px; |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: relative; |
||||
|
||||
.fileinput { |
||||
width: 114px; |
||||
height: 32px; |
||||
position: absolute; |
||||
z-index: 100; |
||||
opacity: 0; |
||||
top: 23px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
button { |
||||
z-index: 99; |
||||
width: 114px; |
||||
height: 32px; |
||||
background: rgba(0, 129, 255, 0.3); |
||||
border: 1px solid #36A2FF; |
||||
opacity: 1; |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1 +1,39 @@
|
||||
<p>file-category works!</p> |
||||
<div class="box" id="fileLicense"> |
||||
<div class="tablebox" id="tablebox"> |
||||
<nz-table *ngIf="tableScrollHeight" [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list" |
||||
[nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed"> |
||||
<thead> |
||||
<tr> |
||||
<th [nzWidth]="'16%'"> |
||||
<span style="margin-left: 25%;">证件名称</span> |
||||
</th> |
||||
<th>有效期类型</th> |
||||
<th>图片</th> |
||||
<th>提交时间</th> |
||||
<th>审核状态</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody id="table"> |
||||
<tr *ngFor="let item of headerTable.data;let key = index"> |
||||
<td> |
||||
<span style="margin-left: 25%;">证件名称</span> |
||||
</td> |
||||
<td>有效期类型</td> |
||||
<td> |
||||
<img src="../../../../assets/images/bgImg.png" alt="" |
||||
(click)="viewImg('../../../../assets/images/bgImg.png')"> |
||||
</td> |
||||
<td>提交时间</td> |
||||
<td>审核状态</td> |
||||
<td class="operation"> |
||||
<span class="blueColor" (click)="edit(item)">编辑</span> |
||||
<span class="blueColor" (click)="details(item)">详情</span> |
||||
<span class="blueColor">提交审核</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,23 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.tablebox { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.operation { |
||||
span { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
#table { |
||||
img { |
||||
width: 30px; |
||||
height: 30px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
<div class="box"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
详情 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<iframe [src]="data.url" frameborder="0"></iframe> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,38 @@
|
||||
.box { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
box-sizing: border-box; |
||||
padding: 0 15px; |
||||
max-height: 580px; |
||||
overflow-y: auto; |
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,28 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; |
||||
import Viewer from 'viewerjs'; |
||||
@Component({ |
||||
selector: 'app-pdf-word-look', |
||||
templateUrl: './pdf-word-look.component.html', |
||||
styleUrls: ['./pdf-word-look.component.scss'] |
||||
}) |
||||
export class PdfWordLookComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
constructor(private modal: NzModalRef) { } |
||||
|
||||
|
||||
ngOnInit(): void { |
||||
console.log('文档地址',this.data.url) |
||||
} |
||||
|
||||
|
||||
destroyModal() { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in new issue