/* * @Description : * @Version : 1.0 * @Author : Shiming * @Date : 2021-12-24 16:58:02 * @LastEditors : Shiming * @LastEditTime : 2022-01-18 17:18:37 * @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\bulk-detail-change\\bulk-detail-change.component.ts * Copyright (C) 2022 huzhenhong. All rights reserved. */ import { ViewChild } from '@angular/core'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFComponent, SFNumberWidgetSchema, SFSchema, SFSelectWidgetSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form'; import { _HttpClient } from '@delon/theme'; import { AmapPoiPickerComponent, AmapService, EAEnvironmentService, ShipperBaseService } from '@shared'; import { NzMessageService } from 'ng-zorro-antd/message'; import { NzModalService } from 'ng-zorro-antd/modal'; import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload'; import { Observable, Observer } from 'rxjs'; import { apiConf } from '@conf/api.conf'; import { OrderManagementService } from '../../services/order-management.service'; import { NzCardComponent } from 'ng-zorro-antd/card'; function getBase64(file: File): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } @Component({ selector: 'app-supply-management-bulk-detail-change', templateUrl: './bulk-detail-change.component.html', styleUrls: ['./bulk-detail-change.component.less'] }) export class OrderManagementBulkDetailChangeComponent implements OnInit { validateForm1: FormGroup; id = this.route.snapshot.params.id; @ViewChild('distannce3', { static: false }) i: any= {unLoadingPlaceList:[]}; logColumns: STColumn[] =[] totalDistance = 0.0; //总里程 totalTime = 0.0; //路程总时间 startInfo: any = []; // 装货信息 endInfo: any = []; // 卸货信息 unloadTime: any; // 货源单设置回显 loadTime: any; // 货源单设置回显 sf3data: any; // 货源单设置回显 sf4data: any; // 货源单设置回显 dirverPhone: any; // 货源单设置回显 dirverBankCard: any; // 货源单设置回显 listImagUrls: any[] = []; // 货源单设置回显 dirvingMessage = []; imges: any; previewImage1 = ''; previewVisible1 = false; @ViewChild('sf3', { static: false }) sf3!: SFComponent; schema3: SFSchema = {}; ui3!: SFUISchema; @ViewChild('st') st!: STComponent; @ViewChild('sf4', { static: false }) sf4!: SFComponent; schema4: SFSchema = {}; isVisible = false; ui4!: SFUISchema; formData: any; @ViewChild('sf', { static: false }) sf!: SFComponent; schema: SFSchema = {}; ui: SFUISchema = {}; constructor( private route: ActivatedRoute, private router: Router, private msgSrv: NzMessageService, public service: OrderManagementService, private modalService: NzModalService, private amapService: AmapService, public shipperservice: ShipperBaseService, fb: FormBuilder, private envSrv: EAEnvironmentService, ) { this.validateForm1 = fb.group({ loadTime: [null, []], unloadTime: [null, []], }); } ngOnInit(): void { this.initST(); this.initSF(); this.initSF3(); this.initSF4(); this.initData() } initSF() { this.schema = { properties: { loadingLadingBillFilePath: { type: 'string', title: '装货凭证', ui: { widget: 'upload', action: apiConf.fileUpload, fileType: 'image/png,image/jpeg,image/jpg,image/gif', limit: 1, limitFileCount: 1, resReName: 'data.fullFileWatermarkPath', urlReName: 'data.fullFileWatermarkPath', descriptionI18n: '提货单', data: { appId: this.envSrv.env.appId, }, name: 'multipartFile', beforeUpload: (file: any, fileList: any) => { return new Observable((observer: Observer) => { const isLt1M = file.size / 1024 / 1024 < 5; const fileType = 'image/png,image/jpeg'; if (fileType.indexOf(file.type) === -1) { this.service.msgSrv.warning('图片格式不正确!'); observer.complete(); return; } if (!isLt1M) { this.service.msgSrv.warning('图片大小超过5M!'); observer.complete(); return; } observer.next(isLt1M); observer.complete(); }); }, multiple: false, listType: 'picture-card', } as SFUploadWidgetSchema, }, loadingPeopleVehiclesGoodsFilePath: { type: 'string', title: '', ui: { widget: 'upload', action: apiConf.fileUpload, fileType: 'image/png,image/jpeg,image/jpg,image/gif', limit: 1, limitFileCount: 1, resReName: 'data.fullFileWatermarkPath', urlReName: 'data.fullFileWatermarkPath', descriptionI18n: '人车货照片', data: { appId: this.envSrv.env.appId, }, name: 'multipartFile', beforeUpload: (file: any, fileList: any) => { return new Observable((observer: Observer) => { const isLt1M = file.size / 1024 / 1024 < 5; const fileType = 'image/png,image/jpeg'; if (fileType.indexOf(file.type) === -1) { this.service.msgSrv.warning('图片格式不正确!'); observer.complete(); return; } if (!isLt1M) { this.service.msgSrv.warning('图片大小超过5M!'); observer.complete(); return; } observer.next(isLt1M); observer.complete(); }); }, multiple: false, listType: 'picture-card', } as SFUploadWidgetSchema, }, no4: { type: 'string', title: '', ui: { widget: 'text', }, default: '', }, unloadingLadingBillFilePath: { type: 'string', title: '卸货凭证', ui: { widget: 'upload', action: apiConf.fileUpload, fileType: 'image/png,image/jpeg,image/jpg,image/gif', limit: 1, limitFileCount: 1, resReName: 'data.fullFileWatermarkPath', urlReName: 'data.fullFileWatermarkPath', descriptionI18n: '提货单', data: { appId: this.envSrv.env.appId, }, name: 'multipartFile', beforeUpload: (file: any, fileList: any) => { return new Observable((observer: Observer) => { const isLt1M = file.size / 1024 / 1024 < 5; const fileType = 'image/png,image/jpeg'; if (fileType.indexOf(file.type) === -1) { this.service.msgSrv.warning('图片格式不正确!'); observer.complete(); return; } if (!isLt1M) { this.service.msgSrv.warning('图片大小超过5M!'); observer.complete(); return; } observer.next(isLt1M); observer.complete(); }); }, multiple: false, listType: 'picture-card', } as SFUploadWidgetSchema, }, unloadingPeopleVehiclesGoodsFilePath: { type: 'string', title: '', ui: { widget: 'upload', action: apiConf.fileUpload, fileType: 'image/png,image/jpeg,image/jpg,image/gif', limit: 1, limitFileCount: 1, resReName: 'data.fullFileWatermarkPath', urlReName: 'data.fullFileWatermarkPath', descriptionI18n: '人车货照片', data: { appId: this.envSrv.env.appId, }, name: 'multipartFile', beforeUpload: (file: any, fileList: any) => { return new Observable((observer: Observer) => { const isLt1M = file.size / 1024 / 1024 < 5; const fileType = 'image/png,image/jpeg'; if (fileType.indexOf(file.type) === -1) { this.service.msgSrv.warning('图片格式不正确!'); observer.complete(); return; } if (!isLt1M) { this.service.msgSrv.warning('图片大小超过5M!'); observer.complete(); return; } observer.next(isLt1M); observer.complete(); }); }, multiple: false, listType: 'picture-card', } as SFUploadWidgetSchema, }, no5: { type: 'string', title: '', ui: { widget: 'text', }, default: '', }, no6: { type: 'string', title: '', ui: { widget: 'text', }, default: '', }, }, required: ['loadingLadingBillFilePath','unloadingLadingBillFilePath'] }; this.ui = { '*': { spanLabelFixed: 100, grid: { span: 20 } }, $unloadingLadingBillFilePath: { grid: { span: 12} }, $unloadingPeopleVehiclesGoodsFilePath: { grid: { span: 12} }, $loadingLadingBillFilePath: { grid: { span: 12} }, $loadingPeopleVehiclesGoodsFilePath: { grid: { span: 12} }, $no5: { grid: { span: 24} }, }; } initData() { this.service.request(this.service.$api_set_getBulkOrderDetail, {id: this.id}).subscribe(res => { if (res) { this.i = res; // 对装货凭证进行初始化 let arr : any= [] res?.receiptFilePath.forEach((element: any, index: any) => { arr.push( { url: element, status: 'done', uid: index }) }); this.sf4data this.listImagUrls = arr; // this.sf4data = res?.goodsInfoList?.[0] this.sf4data = { ...res, ...res?.goodsInfoList?.[0] } // 对装卸货信息进行初始化 res?.unLoadingPlaceList.forEach((element: any) => { if(element.type === 1 || element.type === '1') { const controlId = this.startInfo.length; this.startInfo.push({ detailedAddress: element.detailedAddress, appUserName: element.appUserName, contractTelephone: element.contractTelephone, latitude: element.latitude, longitude: element.longitude, province: element.province, city: element.city, area: element.area, type: element.type, id: element.id }) this.validateForm1.addControl(`loadAddress${controlId}`, new FormControl(null, Validators.required)); this.validateForm1.addControl(`loadName${controlId}`, new FormControl(null, Validators.required)); this.validateForm1.addControl(`loadPhone${controlId}`, new FormControl(null, Validators.required)); } else if(element.type === 2 || element.type === '2') { const controlId = this.endInfo.length; this.endInfo.push({ detailedAddress: element?.detailedAddress, appUserName: element?.appUserName, contractTelephone: element?.contractTelephone, latitude: element.latitude, longitude: element.longitude, province: element.province, city: element.city, area: element.area, type: element.type, id: element.id }) this.validateForm1.addControl(`unloadAddress${controlId}`, new FormControl(null, Validators.required)); this.validateForm1.addControl(`unloadName${controlId}`, new FormControl(null, Validators.required)); this.validateForm1.addControl(`unloadPhone${controlId}`, new FormControl(null, Validators.required)); } }); // 对装货凭证进行初始化 if (res.loadingLadingBillFilePath) { this.formData = { loadingLadingBillFilePath: [ { uid: 'logo', name: 'LOGO', status: 'done', url: res.loadingLadingBillFilePath, response: { url: res.loadingLadingBillFilePath, }, }, ], loadingPeopleVehiclesGoodsFilePath: [ { uid: 'logo', name: 'LOGO', status: 'done', url: res.loadingPeopleVehiclesGoodsFilePath, response: { url: res.loadingPeopleVehiclesGoodsFilePath, }, }, ], unloadingLadingBillFilePath: [ { uid: 'logo', name: 'LOGO', status: 'done', url: res.unloadingLadingBillFilePath, response: { url: res.unloadingLadingBillFilePath, }, }, ], unloadingPeopleVehiclesGoodsFilePath: [ { uid: 'logo', name: 'LOGO', status: 'done', url: res.unloadingPeopleVehiclesGoodsFilePath, response: { url: res.unloadingPeopleVehiclesGoodsFilePath, }, }, ], }; } // 发车时间到车时间初始化 this.loadTime = res.loadTime this.unloadTime = res.unloadTime this.dirvingMessage = res.billExpenseDetails; } }) } goBack() { window.history.go(-1); } // 取消修改 cancelChange() { window.history.go(-1); } // 保存修改 save() { let imgList : any= []; if(this.listImagUrls.length > 0) { this.listImagUrls?.forEach((res :any) => { if(res.url) { imgList.push(res.url) } }) } if(typeof(this.unloadTime) !== 'string' ){ var c = new Date(this.unloadTime); this.unloadTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds()) } if(typeof(this.loadTime) !== 'string' ) { var c = new Date(this.loadTime); this.loadTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds()) } const params = { id: this.id, unLoadingPlaceDTOList: [...this.startInfo, ...this.endInfo,], receiptFilePath: imgList, goodsInfoDTOList: [{ id: this.i?.goodsInfoList?.[0].id, goodsName: this.sf3.value?.goodsName, ...this.sf4.value }], // 运费信息 // 收款人 payeeId: this.dirverPhone, dirverBankCard: this.dirverBankCard, // 银行卡 // 发车时间 loadTime: this.loadTime, // 到车时间 unloadTime: this.unloadTime, acceptWeight: this.sf4.value?.acceptWeight, acceptVolume: this.sf4.value?.acceptVolume, settlementWeight: this.sf4.value?.settlementWeight, settlementVolume: this.sf4.value?.settlementVolume, loadingLadingBillFilePath: this.sf.value?.loadingLadingBillFilePath?.data ? this.sf.value?.loadingLadingBillFilePath.data.fullFilePath : this.sf.value?.loadingLadingBillFilePath?.url, loadingPeopleVehiclesGoodsFilePath: this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.data ? this.sf.value?.loadingPeopleVehiclesGoodsFilePath.data.fullFilePath : this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.url, unloadingLadingBillFilePath: this.sf.value?.unloadingLadingBillFilePath?.data ? this.sf.value?.unloadingLadingBillFilePath.data.fullFilePath : this.sf.value?.unloadingLadingBillFilePath?.url, unloadingPeopleVehiclesGoodsFilePath: this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.data ? this.sf.value?.unloadingPeopleVehiclesGoodsFilePath.data.fullFilePath : this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.url, } this.service.request(this.service.$api_set_modifyBulkOrder, params).subscribe((res: any) => { if(res) { this.service.msgSrv.success('修改成功!'); this.router.navigate(['/order-management/bulk']); } else { this.service.msgSrv.error(res?.msg); } }) } addPreZero(num: any){ if(num<10){ return '0'+num; } else { return num; } } // -------------------装卸货信息处理 // 打开地图 openMap(type: string, index: number) { const modalRef = this.modalService.create({ nzTitle: '', nzContent: AmapPoiPickerComponent, nzWidth: 900, nzOnOk: item => { const poi = item.poi; const locList = poi.pois; switch (type) { case 'start': this.startInfo[index].detailedAddress = poi.formattedAddress; this.startInfo[index].longitude = locList[0]; this.startInfo[index].latitude = locList[1]; this.startInfo[index].province = poi.addressComponent.province; this.startInfo[index].city = poi.addressComponent.city; this.startInfo[index].area = poi.addressComponent.district; this.startInfo[index].address = poi.formattedAddress; break; case 'end': this.endInfo[index].detailedAddress = poi.formattedAddress; this.endInfo[index].longitude = locList[0]; this.endInfo[index].latitude = locList[1]; this.endInfo[index].province = poi.addressComponent.province; this.endInfo[index].city = poi.addressComponent.city; this.endInfo[index].area = poi.addressComponent.district; this.endInfo[index].address = poi.formattedAddress; break; default: break; } if (this.startInfo[0]?.area && this.endInfo[0]?.area) { this.amapService.drivingCompute([...this.startInfo], [...this.endInfo]).subscribe((res: any) => { this.totalDistance = res.distance; this.totalTime = res.time; }); } } }); } initSF3() { this.schema3 = { properties: { // enterpriseInfoId: { // title: '网络货运人', // type: 'string', // ui: { // placeholder: '请选择', // widget: 'select', // asyncData: () => this.shipperservice.getNetworkFreightForwarder(), // visibleIf: { // _$expand: (value: boolean) => value, // }, // } // }, goodsName: { type: 'string', title: '货物名称', ui: { widget: 'dict-select', params: { dictKey: 'GoodsName' }, placeholder: '请选择' } }, qita: { type: 'string', title: '', ui: { visibleIf: { goodsName: value => value === '3' } } } }, required: ['goodsName',] }; this.ui3 = { '*': { spanLabelFixed: 110, grid: { span: 12 } }, $goodsName: { grid: { span: 12 } }, $qita: { grid: { span: 12 } } }; } initST() { this.logColumns = [ { title: '款项', index: 'costName' }, { title: '总费用(元)', index: 'price' }, { title: '协议金额(元)', render: 'price' }, { title: '附加费(元)', index: 'surcharge' }, { title: '附加费率(%)', render: 'paymentMethodRate' }, { title: '支付时间', index: ' paymentTime' }, { title: '支付状态', className: 'text-center', index: 'paymentStatus', type: 'badge', width: '120px', badge: { '1': { text: '待申请', color: 'warning' }, '2': { text: '已支付', color: 'success' }, '3': { text: '已拒绝', color: 'warning' }, '4': { text: '申请中', color: 'warning' }, }, }, ]; } initSF4() { this.schema4 = { properties: { weight: { type: 'string', title: '货物数量', ui: { widget: 'custom', placeholder: '请输入', errors: { required: '必填项' } } }, volume: { type: 'string', title: '', ui: { widget: 'custom', placeholder: '请输入' } }, number: { type: 'string', title: '', ui: { widget: 'custom', placeholder: '请输入' } }, carmand: { type: 'string', title: '用车需求', ui: { widget: 'custom', placeholder: '请输入' } }, drivers: { type: 'string', title: '承运司机', ui: { widget: 'custom', placeholder: '请输入' } }, weightModel: { type: 'string', title: '车型车长承重', ui: { widget: 'custom', placeholder: '请输入' } }, loadTime: { type: 'string', title: '发车时间', ui: { widget: 'custom', placeholder: '请输入' } }, unloadTime: { type: 'string', title: '到车时间', ui: { widget: 'custom', placeholder: '请输入' } }, acceptWeight: { type: 'number', title: '装货重量', minimum:0, maximum:99999, ui: { unit: '吨', placeholder: '请输入', grid: { span: 12 }, hideStep: true, } as SFNumberWidgetSchema }, acceptVolume: { type: 'number', title: '装货体积', minimum:0, maximum:99999, ui: { unit: '吨', placeholder: '请输入', grid: { span: 12 }, hideStep: true, } as SFNumberWidgetSchema }, settlementWeight: { type: 'number', title: '卸货重量', minimum:0, maximum:99999, ui: { unit: '吨', placeholder: '请输入', grid: { span: 12 }, hideStep: true, } as SFNumberWidgetSchema }, settlementVolume: { type: 'number', title: '卸货体积', minimum:0, maximum:99999, ui: { unit: '吨', placeholder: '请输入', grid: { span: 12 }, hideStep: true, } as SFNumberWidgetSchema } }, required: ['weight','loadTime','unloadTime'] }; this.ui4 = { '*': { spanLabelFixed: 90, grid: { span: 24 } }, $weight: { grid: { span: 8 } }, $volume: { grid: { span: 8 } }, $number: { grid: { span: 8 } }, $carmand: { grid: { span: 24 } }, $weightModel: { grid: { span: 12 } }, $drivers: { grid: { span: 12 } }, $loadTime: { grid: { span: 12 } }, $unloadTime: { grid: { span: 12 } }, }; } // 处理上传图片 handlePreview1 = async (file: NzUploadFile) => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj!); } this.previewImage1 = file.url || file.preview; this.previewVisible1 = true; }; handleChange1(info: NzUploadChangeParam): void { switch (info.file.status) { case 'uploading': break; case 'done': let fileList = [...info.fileList]; // 2. Read from response and show file link fileList = fileList.map((file: any) => { if (file.response) { file.url = file.response.data.fullFilePath; } return file; }); break; case 'error': this.service.msgSrv.error('网络错误'); break; } } beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => { return new Observable((observer: Observer) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp'; if (!isJpgOrPng) { this.service.msgSrv.warning('只能上传图片!'); observer.complete(); return; } // tslint:disable-next-line: no-non-null-assertion const isLt2M = file.size! / 1024 / 1024 < 3; if (!isLt2M) { this.service.msgSrv.warning('图片大小超过3兆!'); observer.complete(); return; } observer.next(isJpgOrPng && isLt2M); observer.complete(); }); }; agreement(value: any) { if(value === '1') { this.imges = this.i?.supplementAgreement } else if (value === '2') { this.imges = this.i?.supplementAgreement } this.isVisible = true; } handleCancel() { this.isVisible = false } handleOK() { this.isVisible = false } goDistance(elf: NzCardComponent) { if (elf) { elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' }); } } }