[新增]新增更新类证照管理页面

src/app/system-management/file-of-license/file-of-license.component.html

@@ -9,7 +9,7 @@
         </div>
     </div>
     <div class="tablebox">
-        <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999'>
+        <nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='999' [nzLoading]="isLoading">
             <thead>
                 <tr>
                     <th style="padding-left: 40px;">档案类证件</th>

src/app/system-management/file-of-license/file-of-license.component.ts

@@ -22,8 +22,9 @@ export class FileOfLicenseComponent implements OnInit {
   listOfData: any[] = [];
 
   //获取证照列表
-
+  isLoading = false
   getLicense() {
+    this.isLoading = true
     let params = {
       SkipCount: '0',
       MaxResultCount: '999'
@@ -32,6 +33,7 @@ export class FileOfLicenseComponent implements OnInit {
       params: params
     }).subscribe((data: any) => {
       console.log('证照列表', data.result.items)
+      this.isLoading = false
       this.listOfData = data.result.items
     })
   }

src/app/system-management/update-of-license/add-update-of-license/add-update-of-license.component.html

@@ -1 +1,28 @@
-<p>add-update-of-license works!</p>
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="证照名称">证照名称</nz-form-label>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="办理提醒时间">办理提醒时间</nz-form-label>
+            <nz-form-control nzErrorTip="请输入办理提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="handleRemindDays" placeholder="请输入办理提醒时间" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="临期提醒时间">临期提醒时间</nz-form-label>
+            <nz-form-control nzErrorTip="请输入临期提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="closingRemindDays" placeholder="请输入临期提醒时间" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

src/app/system-management/update-of-license/add-update-of-license/add-update-of-license.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+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-update-of-license',
@@ -7,9 +11,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AddUpdateOfLicenseComponent implements OnInit {
 
-  constructor() { }
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      handleRemindDays: [90, [Validators.required]],
+      closingRemindDays: [30, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
   }
-
 }

src/app/system-management/update-of-license/edit-update-of-license/edit-update-of-license.component.html

@@ -1 +1,28 @@
-<p>edit-update-of-license works!</p>
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="证照名称">证照名称</nz-form-label>
+            <nz-form-control nzErrorTip="请输入证照名称">
+                <nz-input-group>
+                    <input nz-input type="text" formControlName="name" placeholder="请输入证照名称" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="办理提醒时间">办理提醒时间</nz-form-label>
+            <nz-form-control nzErrorTip="请输入办理提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="handleRemindDays" placeholder="请输入办理提醒时间" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="临期提醒时间">临期提醒时间</nz-form-label>
+            <nz-form-control nzErrorTip="请输入临期提醒时间">
+                <nz-input-group nzAddOnAfter="天">
+                    <input nz-input type="number" formControlName="closingRemindDays" placeholder="请输入临期提醒时间" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

src/app/system-management/update-of-license/edit-update-of-license/edit-update-of-license.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+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-update-of-license',
@@ -7,9 +10,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditUpdateOfLicenseComponent implements OnInit {
 
-  constructor() { }
+  @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]],
+      handleRemindDays: [this.data.handleRemindDays, [Validators.required]],
+      closingRemindDays: [this.data.closingRemindDays, [Validators.required]]
+    });
+  }
+  destroyModal(): void {
+    this.modal.destroy({ data: 'this the result data' });
   }
 
 }

src/app/system-management/update-of-license/update-of-license.component.html

@@ -1 +1,34 @@
-<p>update-of-license works!</p>
+<div class="licenseBox" id="licenseBox2">
+    <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' [nzLoading]="isLoading">
+            <thead>
+                <tr>
+                    <th style="padding-left: 40px;">更新类证件</th>
+                    <th>办理提醒时间</th>
+                    <th>临期提醒时间</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of basicTable.data">
+                    <td>{{data.licenseName}}</td>
+                    <td>{{data.handleRemindDays}}天</td>
+                    <td>{{data.closingRemindDays}}天</td>
+                    <td class="operation">
+                        <a (click)="edit(data)">编辑</a>
+                        <a (click)="delete(data)">删除</a>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>

src/app/system-management/update-of-license/update-of-license.component.scss

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

src/app/system-management/update-of-license/update-of-license.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+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 { AddUpdateOfLicenseComponent } from './add-update-of-license/add-update-of-license.component';
+import { EditUpdateOfLicenseComponent } from './edit-update-of-license/edit-update-of-license.component';
 
 @Component({
   selector: 'app-update-of-license',
@@ -7,9 +13,127 @@ import { Component, OnInit } from '@angular/core';
 })
 export class UpdateOfLicenseComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.getLicense()
   }
 
+  listOfData: any[] = [];
+
+  //获取证照列表
+  isLoading = false
+  getLicense() {
+    this.isLoading = true
+    let params = {
+      SkipCount: '0',
+      MaxResultCount: '999'
+    }
+    this.http.get('/api/services/app/ValidityLicenseType/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      console.log('证照列表', data.result.items)
+      this.isLoading = false
+      this.listOfData = data.result.items
+    })
+  }
+
+  addRole(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增证照',
+      nzContent: AddUpdateOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 588,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let body = {
+              licenseName: instance.validateForm.value.name,
+              handleRemindDays: instance.validateForm.value.handleRemindDays,
+              closingRemindDays: instance.validateForm.value.closingRemindDays
+            }
+            this.http.post('/api/services/app/ValidityLicenseType/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: EditUpdateOfLicenseComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 588,
+      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,
+              handleRemindDays: instance.validateForm.value.handleRemindDays,
+              closingRemindDays: instance.validateForm.value.closingRemindDays
+            }
+            this.http.put('/api/services/app/ValidityLicenseType/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/ValidityLicenseType/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getLicense()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
+
+
 }

src/theme.less

@@ -505,7 +505,8 @@
 #userBox,
 #roleBox,
 #hostbox,
-#licenseBox {
+#licenseBox,
+#licenseBox2 {
   .ant-table-thead>tr>th {
     background: rgba(145, 204, 255, 0.15);
   }