25 changed files with 358 additions and 8 deletions
@ -0,0 +1,11 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入证照名称"> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入证照名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -0,0 +1,24 @@
|
||||
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'; |
||||
|
||||
@Component({ |
||||
selector: 'app-add-file-of-license', |
||||
templateUrl: './add-file-of-license.component.html', |
||||
styleUrls: ['./add-file-of-license.component.scss'] |
||||
}) |
||||
export class AddFileOfLicenseComponent implements OnInit { |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
} |
@ -0,0 +1,11 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入证照名称"> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入证照名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
@ -0,0 +1,24 @@
|
||||
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'; |
||||
|
||||
@Component({ |
||||
selector: 'app-edit-file-of-license', |
||||
templateUrl: './edit-file-of-license.component.html', |
||||
styleUrls: ['./edit-file-of-license.component.scss'] |
||||
}) |
||||
export class EditFileOfLicenseComponent implements OnInit { |
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [this.data.licenseName, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
} |
@ -0,0 +1,30 @@
|
||||
<div class="licenseBox" id="licenseBox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>档案类证件列表</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'> |
||||
<thead> |
||||
<tr> |
||||
<th style="padding-left: 40px;">档案类证件</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td>{{data.licenseName}}</td> |
||||
<td class="operation"> |
||||
<a (click)="edit(data)">编辑</a> |
||||
<a (click)="delete(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</div> |
@ -0,0 +1,57 @@
|
||||
.licenseBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #FFFFFF; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
tbody { |
||||
tr { |
||||
td { |
||||
span { |
||||
margin-right: 18px; |
||||
} |
||||
} |
||||
|
||||
td:nth-child(1) { |
||||
padding-left: 40px; |
||||
} |
||||
} |
||||
|
||||
.operation { |
||||
a { |
||||
color: #2399FF; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
a:last-child { |
||||
color: rgba(0, 13, 33, 0.48); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
.lefttop { |
||||
span { |
||||
color: #000D21; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
|
||||
} |
@ -0,0 +1,132 @@
|
||||
import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { AddFileOfLicenseComponent } from './add-file-of-license/add-file-of-license.component'; |
||||
import { EditFileOfLicenseComponent } from './edit-file-of-license/edit-file-of-license.component'; |
||||
|
||||
@Component({ |
||||
selector: 'app-file-of-license', |
||||
templateUrl: './file-of-license.component.html', |
||||
styleUrls: ['./file-of-license.component.scss'] |
||||
}) |
||||
export class FileOfLicenseComponent implements OnInit { |
||||
|
||||
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getLicense() |
||||
} |
||||
|
||||
listOfData: any[] = []; |
||||
|
||||
//获取证照列表
|
||||
|
||||
getLicense() { |
||||
let params = { |
||||
SkipCount: '0', |
||||
MaxResultCount: '999' |
||||
} |
||||
this.http.get('/api/services/app/FileLicenseType/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
console.log('证照列表', data.result.items) |
||||
this.listOfData = data.result.items |
||||
}) |
||||
} |
||||
|
||||
addRole(): void { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增证照', |
||||
nzContent: AddFileOfLicenseComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
licenseName: instance.validateForm.value.name, |
||||
} |
||||
this.http.post('/api/services/app/FileLicenseType/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功!'); |
||||
this.getLicense() |
||||
return true |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!')); |
||||
// Return a result when closed
|
||||
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result)); |
||||
} |
||||
|
||||
|
||||
edit(item) { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑证照', |
||||
nzContent: EditFileOfLicenseComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 325, |
||||
nzComponentParams: { |
||||
data: item |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
let body = { |
||||
id: item.id, |
||||
licenseName: instance.validateForm.value.name |
||||
} |
||||
this.http.put('/api/services/app/FileLicenseType/Update', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '修改成功!'); |
||||
this.getLicense() |
||||
return true |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!')); |
||||
// Return a result when closed
|
||||
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result)); |
||||
} |
||||
|
||||
delete(item) { |
||||
console.log(item) |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.licenseName}这个证照吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'danger', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/FileLicenseType/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功!'); |
||||
this.getLicense() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消', |
||||
nzOnCancel: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
} |
@ -0,0 +1 @@
|
||||
<p>add-update-of-license works!</p> |
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-add-update-of-license', |
||||
templateUrl: './add-update-of-license.component.html', |
||||
styleUrls: ['./add-update-of-license.component.scss'] |
||||
}) |
||||
export class AddUpdateOfLicenseComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
@ -0,0 +1 @@
|
||||
<p>edit-update-of-license works!</p> |
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-edit-update-of-license', |
||||
templateUrl: './edit-update-of-license.component.html', |
||||
styleUrls: ['./edit-update-of-license.component.scss'] |
||||
}) |
||||
export class EditUpdateOfLicenseComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
@ -0,0 +1 @@
|
||||
<p>update-of-license works!</p> |
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-update-of-license', |
||||
templateUrl: './update-of-license.component.html', |
||||
styleUrls: ['./update-of-license.component.scss'] |
||||
}) |
||||
export class UpdateOfLicenseComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
After Width: | Height: | Size: 252 B |
Loading…
Reference in new issue