From 3ecf5973dcf237919a9d7df6953c05a47b682867 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 27 Apr 2022 17:28:01 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E5=AE=8C=E6=88=90=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E7=B1=BB=E8=AF=81=E4=BB=B6=E7=9A=84=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=A1=86=E5=92=8C=E8=AF=A6=E6=83=85=E5=BC=B9?= =?UTF-8?q?=E5=87=BA=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../details-update-category.component.html | 53 +++++++- .../details-update-category.component.scss | 54 ++++++++ .../details-update-category.component.ts | 34 ++++- .../edit-update-category.component.html | 69 +++++++++- .../edit-update-category.component.scss | 127 ++++++++++++++++++ .../edit-update-category.component.ts | 107 ++++++++++++++- .../update-category.component.ts | 76 ++++++++++- src/app/pages/pages.module.ts | 6 +- src/styles.scss | 2 +- src/theme.less | 53 +++++++- 10 files changed, 566 insertions(+), 15 deletions(-) diff --git a/src/app/pages/license/update-category/details-update-category/details-update-category.component.html b/src/app/pages/license/update-category/details-update-category/details-update-category.component.html index 6c69572..3904c3f 100644 --- a/src/app/pages/license/update-category/details-update-category/details-update-category.component.html +++ b/src/app/pages/license/update-category/details-update-category/details-update-category.component.html @@ -1 +1,52 @@ -

details-update-category works!

+
+
+
+ 编辑 +
+ +
+ +
+

证件名称: 营业执照

+
+

证件编号: Z201800041501

+
+

证件有效期: 2018.12.02—2025.01.12

+
+

办理类型: 年度公示

+
+

有效期类型: 1523天

+
+

是否年检: 是

+
+

证件图片:

+
+

审核记录

+ + + 2022.04.02 + 审核完成 + + + 2022.04.02 + 审核完成 + + + 2022.04.02 + 审核完成 + + + 2022.04.02 + 审核完成 + + + +
+ +
+ +
+ + +
\ No newline at end of file diff --git a/src/app/pages/license/update-category/details-update-category/details-update-category.component.scss b/src/app/pages/license/update-category/details-update-category/details-update-category.component.scss index e69de29..010499b 100644 --- a/src/app/pages/license/update-category/details-update-category/details-update-category.component.scss +++ b/src/app/pages/license/update-category/details-update-category/details-update-category.component.scss @@ -0,0 +1,54 @@ +.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; + } + } + + p { + margin-bottom: 0; + color: #C4E2FC; + margin: 12px 0; + + img { + width: 88px; + height: 56px; + cursor: pointer; + } + } +} diff --git a/src/app/pages/license/update-category/details-update-category/details-update-category.component.ts b/src/app/pages/license/update-category/details-update-category/details-update-category.component.ts index 381198b..7bbcf2b 100644 --- a/src/app/pages/license/update-category/details-update-category/details-update-category.component.ts +++ b/src/app/pages/license/update-category/details-update-category/details-update-category.component.ts @@ -1,4 +1,9 @@ -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'; +import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; +import Viewer from 'viewerjs'; @Component({ selector: 'app-details-update-category', @@ -6,10 +11,35 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./details-update-category.component.scss'] }) export class DetailsUpdateCategoryComponent implements OnInit { + @Input() data?: any; + constructor(private modal: NzModalRef) { } - constructor() { } ngOnInit(): void { } + + destroyModal() { + this.modal.destroy({ data: 'this the result data' }); + } + //查看图片 + viewImg(url) { + // url.split('?')[0] + let dom = document.getElementById(`viewerjs`) + let pObjs = dom.childNodes; + let node = document.createElement("img") + node.style.display = "none"; + node.src = url; + node.id = 'img' + dom.appendChild(node) + setTimeout(() => { + let viewer = new Viewer(document.getElementById(`viewerjs`), { + hidden: () => { + dom.removeChild(pObjs[0]); + viewer.destroy(); + } + }); + node.click(); + }, 0); + } } diff --git a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html index 2bc99c3..2628d7b 100644 --- a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html +++ b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html @@ -1 +1,68 @@ -

edit-update-category works!

+
+
+
+ 编辑 +
+ +
+
+

证件名称: 营业执照

+ +
+ +

证件编号*

+ + + + + + + + +

证件有效期*

+ +
+ + + +
+ +

+ 有效期类型: 1456天 + 是否年检: 是 +

+ +

办理类型

+ + + + + + + + + +

证件图片

+ +
+
+ + + +
+
+ + +
+
+ +
+ + +
+
+
\ No newline at end of file diff --git a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.scss b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.scss index e69de29..75ccce6 100644 --- a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.scss +++ b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.scss @@ -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; + } + } + } +} diff --git a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts index 02463ab..fab92ef 100644 --- a/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts +++ b/src/app/pages/license/update-category/edit-update-category/edit-update-category.component.ts @@ -1,5 +1,9 @@ -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'; +import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; +import Viewer from 'viewerjs'; @Component({ selector: 'app-edit-update-category', templateUrl: './edit-update-category.component.html', @@ -7,9 +11,106 @@ import { Component, OnInit } from '@angular/core'; }) export class EditUpdateCategoryComponent implements OnInit { - constructor() { } + @Input() data?: any; + + validateForm!: FormGroup; + constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { } + + data2 ngOnInit(): void { + this.validateForm = this.fb.group({ + number: [null, [Validators.required]], + isLongTerm: [null, [Validators.required]], + type: [null, [Validators.required]] + }); + this.data2 = JSON.parse(JSON.stringify(this.data)) + } + + isLongTerm = false + imageUrl = '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg' + validityChange($event) { + console.log($event) + this.isLongTerm = $event + } + + destroyModal() { + this.modal.destroy({ data: 'this the result data' }); + } + ok() { + this.modal.triggerOk() + } + + + + isLoadingSave: boolean = false + uploadIndex: string + filechange(e) { + let oilStationId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id + let file = e.target.files[0] || null //获取上传的文件 + this.openFileSelect(file, `stationPhotos/${oilStationId}/`) + } + //设置文件路径并上传 + postFilePath + async openFileSelect(file: File, extensionPath: string) { + this.postFilePath = extensionPath; + let fileSize = file.size || null //上传文件的总大小 + let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传 + if (fileSize >= shardSize) // 超过5MB要分块上传 + { + await this.postFileByMul(file); + } + else //普通上传 + { + await this.postFile(file); + } + } + //上传文件 + async postFile(file: File) { + await new Promise((resolve, reject) => { + this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => { + let dataObj = data as any; + let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName; + this.imageUrl = filePath + console.log('上传成功', filePath) + resolve('success') + }); + }) + } + + /** + * 分块上传 + * @param file + */ + postFileByMul(file: File) { + this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => { + let dataObj = value as any; + let filePath = dataObj.filePath + this.imageUrl = filePath + console.log('上传成功', filePath) + }); + + } + + //查看图片 + viewImg(url) { + // url.split('?')[0] + let dom = document.getElementById(`viewerjs`) + let pObjs = dom.childNodes; + let node = document.createElement("img") + node.style.display = "none"; + node.src = url; + node.id = 'img' + dom.appendChild(node) + setTimeout(() => { + let viewer = new Viewer(document.getElementById(`viewerjs`), { + hidden: () => { + dom.removeChild(pObjs[0]); + viewer.destroy(); + } + }); + node.click(); + }, 0); } } diff --git a/src/app/pages/license/update-category/update-category.component.ts b/src/app/pages/license/update-category/update-category.component.ts index e5550d6..d11dcc9 100644 --- a/src/app/pages/license/update-category/update-category.component.ts +++ b/src/app/pages/license/update-category/update-category.component.ts @@ -1,7 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewContainerRef } from '@angular/core'; +import { NzModalService } from 'ng-zorro-antd/modal'; import { Observable, fromEvent } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import Viewer from 'viewerjs'; +import { EditUpdateCategoryComponent } from './edit-update-category/edit-update-category.component'; +import * as moment from 'moment'; +import { NzMessageService } from 'ng-zorro-antd/message'; +import { HttpClient } from '@angular/common/http'; +import { DetailsUpdateCategoryComponent } from './details-update-category/details-update-category.component'; @Component({ selector: 'app-update-category', templateUrl: './update-category.component.html', @@ -9,7 +15,7 @@ import Viewer from 'viewerjs'; }) export class UpdateCategoryComponent implements OnInit { - constructor() { } + constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { } tableSpin = false list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] @@ -47,9 +53,73 @@ export class UpdateCategoryComponent implements OnInit { } edit(item) { - + console.log('item', item) + const modal = this.modal.create({ + nzContent: EditUpdateCategoryComponent, + nzViewContainerRef: this.viewContainerRef, + nzWidth: 750, + nzBodyStyle: { + 'border': '1px solid #91CCFF', + 'border-radius': '0px', + 'padding': '7px', + 'box-shadow': '0 0 8px 0 #fff', + 'background-image': 'linear-gradient(#003665, #000f25)' + }, + nzComponentParams: { + data: item + }, + nzFooter: null, + nzClosable: false, + nzOnOk: async () => { + if (instance.validateForm.valid) { + await new Promise(resolve => { + let body = { + id: item.id, + name: instance.validateForm.value.name, + storageLocation: instance.validateForm.value.storageLocation, + productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'), + maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'), + validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'), + organizationUnitId: item.organizationUnitId + } + // this.http.put('/api/services/app/FireEquipment/Update', body).subscribe(data => { + // resolve(data) + // this.message.create('success', '修改成功！'); + // return true + // }) + }) + } else { + this.message.create('warning', '请填写完整！'); + return false + } + } + }); + const instance = modal.getContentComponent(); + modal.afterClose.subscribe(result => { }); } details(item) { + console.log('item', item) + const modal = this.modal.create({ + nzContent: DetailsUpdateCategoryComponent, + nzViewContainerRef: this.viewContainerRef, + nzWidth: 450, + nzBodyStyle: { + 'border': '1px solid #91CCFF', + 'border-radius': '0px', + 'padding': '7px', + 'box-shadow': '0 0 8px 0 #fff', + 'background-image': 'linear-gradient(#003665, #000f25)' + }, + nzComponentParams: { + data: item + }, + nzFooter: null, + nzClosable: false, + nzOnOk: async () => { + } + }); + const instance = modal.getContentComponent(); + modal.afterClose.subscribe(result => { }); } } diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 1b700d5..f0c6be5 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -68,6 +68,7 @@ import { EditUpdateCategoryComponent } from './license/update-category/edit-upda import { DetailsUpdateCategoryComponent } from './license/update-category/details-update-category/details-update-category.component'; import { EditFileCategoryComponent } from './license/file-category/edit-file-category/edit-file-category.component'; import { DetailsFileCategoryComponent } from './license/file-category/details-file-category/details-file-category.component'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, @@ -112,9 +113,10 @@ import { DetailsFileCategoryComponent } from './license/file-category/details-fi NzPopconfirmModule, NzBadgeModule, NzRadioModule, - NzToolTipModule + NzToolTipModule, + NzTimelineModule ], - entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent], + entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/src/styles.scss b/src/styles.scss index 9d3f266..11ae818 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -81,7 +81,7 @@ ul, ol, li { list-style: none; - overflow-x: hidden; + // overflow-x: hidden; } .clearfn:after { diff --git a/src/theme.less b/src/theme.less index 58d86f8..42a2414 100644 --- a/src/theme.less +++ b/src/theme.less @@ -169,7 +169,9 @@ #login, #equipmentInfo, #addequipment, -#disposeequipment { +#disposeequipment, +#editupdatecategory, +#detailsupdatecategory { nz-input-group, input { @@ -197,7 +199,9 @@ #warningboxadmin, #addequipment, #stationPlanBox, -#disposeequipment { +#disposeequipment, +#editupdatecategory, +#detailsupdatecategory { ::-webkit-input-placeholder { /* WebKit browsers */ color: #345d85; @@ -238,6 +242,51 @@ } +//证件弹出框 +#editupdatecategory, +#detailsupdatecategory { + nz-form-item { + margin-bottom: 0; + + input, + select { + color: rgba(145, 204, 255, 0.95) !important; + } + } + + nz-date-picker, + nz-range-picker, + nz-select { + background-color: #143c61; + } + + nz-select { + color: rgba(145, 204, 255, 0.95) !important; + } + + .ant-timeline-item-content { + color: rgba(145, 204, 255, 0.95); + } + + .ant-timeline-item-tail { + border-left: 2px solid rgba(196, 226, 252, 0.4); + } + + .ant-timeline-item-head { + border: 0; + background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%); + } +} + +.cutoffrule { + width: 100%; + height: 1px; + background-color: rgba(196, 226, 252, 0.24); + border: 0; +} + + + #orbox { nz-tree {