import { Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { cacheConf } from '@conf/cache.conf'; import { SFComponent, SFNumberWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFTextareaWidgetSchema, SFUISchema } from '@delon/form'; import { SettingsService, _HttpClient } from '@delon/theme'; import { EACacheService, ShipperBaseService } from '@shared'; import format from 'date-fns/format'; import { NzModalService } from 'ng-zorro-antd/modal'; import { of } from 'rxjs'; import { map } from 'rxjs/operators'; import { AmapPoiPickerComponent, AmapService } from 'src/app/shared/components/amap'; import { SupplyManagementService } from '../../services/supply-management.service'; import { SupplyManagementVehicleAssignedCarComponent } from '../assigned-car/assigned-car.component'; import { PublishAddressListComponent } from '../onecar-publish/address-list/address-list.component'; import { PublishSuccessComponent } from '../onecar-publish/publish-success/publish-success.component'; import { TranAgreementComponent } from '../tran-agreement/tran-agreement.component'; @Component({ selector: 'app-publish-goods-onecar-publish', templateUrl: './release-publish.component.html', styleUrls: ['./release-publish.component.less'] }) export class SupplyManagementReleasePublishComponent implements OnInit { // 环境信息 appId、tenantId envInfo = this.eaCacheSrv.get(cacheConf.env); validateForm1: FormGroup; sf1data: any; // 货源单设置回显 sf3data: any; // 货源单设置回显 sf4data: any; // 货源单设置回显 sf5data: any; // 货源单设置回显 sf6data: any; // 货源单设置回显 sf7data: any; // 货源单设置回显 id = ''; type = 'add'; // // 单位 startInfo: any[] = []; endInfo: any[] = []; totalDistance = 0.0; //总里程 totalTime = 0.0; //路程总时间 currentRate = 0; //实时计算的费率 constructor( private http: _HttpClient, fb: FormBuilder, private modalService: NzModalService, private settingSrv: SettingsService, public service: SupplyManagementService, private router: Router, private route: ActivatedRoute, private eaCacheSrv: EACacheService, private amapService: AmapService, public shipperSrv: ShipperBaseService ) { this.validateForm1 = fb.group({ loadAddress0: [null, [Validators.required]], loadName0: [null, [Validators.required]], loadPhone0: [null, [Validators.required,Validators.pattern('^[0-9]*$')]], unloadAddress0: [null, [Validators.required]], unloadName0: [null, [Validators.required]], unloadPhone0: [null, [Validators.required,Validators.pattern('^[0-9]*$')]], loadingTime: [null, []], unloadingTime: [null, []] }); } @ViewChild('sf1', { static: false }) sf1!: SFComponent; schema1: SFSchema = {}; ui1!: SFUISchema; @ViewChild('sf3', { static: false }) sf3!: SFComponent; schema3: SFSchema = {}; ui3!: SFUISchema; @ViewChild('sf4', { static: false }) sf4!: SFComponent; schema4: SFSchema = {}; ui4!: SFUISchema; @ViewChild('sf5', { static: false }) sf5!: SFComponent; schema5: SFSchema = {}; ui5!: SFUISchema; @ViewChild('sf6', { static: false }) sf6!: SFComponent; schema6: SFSchema = {}; ui6!: SFUISchema; @ViewChild('sf7', { static: false }) sf7!: SFComponent; schema7: SFSchema = {}; ui7!: SFUISchema; // 页面初始化 ngOnInit(): void { this.initSF1(); this.initSF3(); this.initSF4(); this.initSF5(); this.initSF6(); this.initSF7(); this.addStartInfo(); this.addEndInfo(); } initSF1() { this.schema1 = { properties: { shipperAppUserId: { title: '货主', type: 'string', maxLength: 30, ui: { widget: 'select', serverSearch: true, searchDebounceTime: 300, searchLoadingText: '搜索中...', onSearch: (q: any) => { if (!!q) { return this.service .request(this.service.$api_enterpriceList, { enterpriseName: q }) .pipe(map(res => (res as any[]).map(i => ({ label: i.enterpriseName, value: i.id } as SFSchemaEnum)))) .toPromise(); } else { return of([]); } }, change: (q: any) => { this.getRegionCode(q); }, visibleIf: { _$expand: (value: boolean) => value } } as SFSelectWidgetSchema }, enterpriseProjectId: { type: 'string', title: '项目', ui: { widget: 'select', placeholder: '请选择', allowClear: true } as SFSelectWidgetSchema }, // enterpriseInfoName: { // type: 'string', // title: '网络货运人', // ui: { // widget: 'custom' // }, // default: '天津市怡亚通XXXX有限公司' // }, enterpriseInfoName: { type: 'string', title: '网络货运人', ui: { widget: 'select', placeholder: '请选择', visibleIf: { _$expand: (value: boolean) => value }, allowClear: true, asyncData: () => this.shipperSrv.getNetworkFreightForwarder() } }, externalResourceCode: { type: 'string', title: '外部货源号', maxLength: 30, ui: { placeholder: '请输入' } }, dispatchPhone: { type: 'string', title: '手机号', maxLength: 30, ui: { hidden: true, placeholder: '请输入' } }, dispatchName: { type: 'string', title: '名字', maxLength: 30, ui: { hidden: true, placeholder: '请输入' } }, dispatchId: { type: 'string', title: '调度员', ui: { widget: 'select', placeholder: '请选择', allowClear: true, change: (_value: any, data: any) => { if (data.label) { const dat = data.label.split('/'); this.sf1.setValue('/dispatchName', dat[0]); this.sf1.setValue('/dispatchPhone', dat[1]); } }, optionalHelp: '选择调度员,司机直接联系调度员 ; 不选择,司机直接联系您', asyncData: () => this.shipperSrv.getStaffList2() } as SFSelectWidgetSchema } }, required: ['shipperAppUserId', 'enterpriseProjectId', 'enterpriseInfoName', ] }; this.ui1 = { '*': { spanLabelFixed: 110, grid: { span: 12 } }, $enterpriseInfoName: { grid: { span: 24 } } }; } initSF3() { this.schema3 = { properties: { goodsTypeId: { type: 'string', title: '货物名称', ui: { widget: 'select', placeholder: '请选择', errors: { required: '请选择货物类型' }, asyncData: () => this.shipperSrv.loadConfigByKey('goods.name.config.type').pipe( map((data: any) => { return data[0].children?.map((m: any) => { return { label: m.name, value: m.id }; }); }) ), change: (value, data: any) => { this.changeGoodsType(value, data); this.sf3.setValue('/goodsTypeName', data.label); } } as SFSelectWidgetSchema }, goodsTypeName: { type: 'string', title: '', ui: { hidden: true } }, goodsNameId: { type: 'string', title: '', ui: { widget: 'select', placeholder: '请选择', errors: { required: '请填写货物名称' }, change: (_value: any, data: any) => { this.sf3.setValue('/goodsName', data.label); }, visibleIf: { goodsTypeName: (value: any) => value && value !== '其它' } } }, goodsName: { type: 'string', title: '', ui: { hidden: true, visibleIf: { goodsTypeName: (value: any) => value && value !== '其它' } } }, goodsName1: { type: 'string', title: '', ui: { errors: { required: '请填写货物名称' }, visibleIf: { goodsTypeName: (value: any) => value && value === '其它' } } } }, required: ['goodsTypeId', 'goodsName', 'goodsNameId'] }; this.ui3 = { '*': { spanLabelFixed: 90, grid: { span: 12 } } }; } 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: '请输入' } }, maxWeight: { type: 'string', title: '车型/车长', ui: { widget: 'dict-select', params: { dictKey: 'car:model' }, mode: 'multiple', placeholder: '请选择车型', errors: { required: '请选择车型' } } }, maxCube: { type: 'string', title: '', ui: { widget: 'dict-select', params: { dictKey: 'car:length' }, mode: 'multiple', placeholder: '请选择车长', errors: { required: '请选择车长' } } } }, required: ['weight', 'maxWeight', 'maxCube'] }; this.ui4 = { '*': { spanLabelFixed: 90, grid: { span: 24 } }, $weight: { grid: { span: 8 } }, $volume: { grid: { span: 8 } }, $number: { grid: { span: 8 } }, $maxWeight: { grid: { span: 12 } }, $maxCube: { grid: { span: 12 } } }; } initSF5() { this.schema5 = { properties: { goodsValue: { type: 'string', title: '货物价值', ui: { widget: 'custom' } }, insureInfo: { type: 'string', title: '', ui: { widget: 'custom' } } }, required: ['goodsValue'] }; this.ui5 = { '*': { spanLabelFixed: 90, grid: { span: 12 } } }; } initSF6() { this.schema6 = { properties: { stateReceipt: { type: 'string', title: '是否回单', enum: [ { label: '需要', value: true }, { label: '不需要', value: false } ], ui: { widget: 'select', errors: { required: '请选择' }, placeholder: '请选择' } }, receiptType: { type: 'string', title: '回单类型', ui: { widget: 'dict-select', params: { dictKey: 'receipt:type' }, containsAllLable: false, placeholder: '请选择', errors: { required: '请选择' }, visibleIf: { stateReceipt: value => value === true } } }, receiptAddressId: { type: 'string', title: '选择地址', ui: { widget: 'custom', placeholder: '请点击选择收回单地址', // validator: val => (this.sf6?.value?.receiptType === '2' ? [{ keyword: 'required', message: '请点击选择收回单地址' }] : []), visibleIf: { receiptType: value => value === '2' } }, default: '' }, receiptUserName: { type: 'string', title: '联系人', ui: { visibleIf: { receiptType: value => value === '2' } }, readOnly: true }, phon: { type: 'string', title: '联系电话', ui: { visibleIf: { receiptType: value => value === '2' } }, readOnly: true }, area: { type: 'string', title: '所在地区', ui: { visibleIf: { receiptType: value => value === '2' } }, readOnly: true }, address: { type: 'string', title: '详细地址', ui: { visibleIf: { receiptType: value => value === '2' } }, readOnly: true }, remarks: { type: 'string', title: '备注', maxLength: 200, ui: { widget: 'textarea', placeholder: '请输入', autosize: { minRows: 3, maxRows: 3 } } as SFTextareaWidgetSchema } }, required: ['stateReceipt', 'receiptType', 'receiptAddressId'] }; this.ui6 = { '*': { spanLabelFixed: 90, grid: { span: 24 } } }; } initSF7() { this.schema7 = { properties: { prePay: { type: 'number', title: '预付', default: 0, minimum: 0, maximum: 999999, ui: { prefix: '¥', widgetWidth: 300, change: _args => this.payChange() } as SFNumberWidgetSchema }, toPay: { type: 'number', title: '到付', minimum: 0, maximum: 999999, default: 0, ui: { prefix: '¥', widgetWidth: 300, change: _args => this.payChange() } as SFNumberWidgetSchema }, oilCardPay: { type: 'number', title: '油卡', maximum: 999999, minimum: 0, default: 0, ui: { prefix: '¥', widgetWidth: 300, change: _args => this.payChange() } as SFNumberWidgetSchema }, receiptPay: { type: 'number', title: '回单付', maximum: 999999, minimum: 0, default: 0, ui: { prefix: '¥', widgetWidth: 300, change: _args => this.payChange() } as SFNumberWidgetSchema }, subtotal: { type: 'number', title: '小计', default: 0, ui: { widget: 'custom' } as SFNumberWidgetSchema }, appendFee: { type: 'number', title: '附加费', default: 0, ui: { widget: 'custom' } as SFNumberWidgetSchema }, total: { type: 'number', title: '总费用', default: 0, ui: { widget: 'custom' } as SFNumberWidgetSchema }, paymentDays: { type: 'string', title: '到货后', ui: { widget: 'custom', placeholder: '请输入', errors: { required: '请输入付款承诺天数' } } } }, required: ['paymentDays'] }; this.ui7 = { '*': { spanLabelFixed: 90, grid: { span: 24 } } }; } // 获取城市列表 getRegionCode(regionCode: any) { console.log(regionCode); return this.service .request(this.service.$api_get_enterprise_project, { id: regionCode }) .pipe( map(res => res.map((item: any) => ({ label: item.projectName, value: item.id })) ) ) .subscribe(res => { this.sf1.getProperty('/enterpriseProjectId')!.schema.enum = res; this.sf1.getProperty('/enterpriseProjectId')!.widget.reset(res); }); } payChange() { const subtotal = this.sf7.value.prePay + this.sf7.value.toPay + this.sf7.value.oilCardPay + this.sf7.value.receiptPay || 0; const oilCardPay = this.sf7.value.oilCardPay || 0; this.service .request(this.service.$api_getCalculatedSurcharge + `?totalFreight=${subtotal}&fuelCardAmount=${oilCardPay}`) .subscribe((res: any) => { if (res) { this.sf7.setValue('/appendFee', res.surcharge); this.sf7.setValue('/subtotal', subtotal); this.sf7.setValue('/total', subtotal + res.surcharge); this.service .request(this.service.$api_getcalculatedServiceRate + `?invoiceAmount=${subtotal + res.surcharge}&totalFreight=${subtotal}`) .subscribe((res: any) => { if (res) { this.currentRate = res.rate; } }); } }); } // 添加 删除发货卸货地址 addStartInfo() { if (this.startInfo.length < 5) { const controlId = this.startInfo.length; this.startInfo.push({ detailedAddress: '', appUserName: '', contractTelephone: '', latitude: '', longitude: '', province: '', city: '', area: '', type: '1' }); 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)); } } // 添加 删除发货卸货地址 subStartInfo(_event: any, index: number) { this.startInfo.splice(index, 1); this.validateForm1.removeControl(`loadAddress${index}`); this.validateForm1.removeControl(`loadName${index}`); this.validateForm1.removeControl(`loadPhone${index}`); } // 添加 删除发货卸货地址 addEndInfo() { if (this.addEndInfo.length < 5) { const controlId = this.endInfo.length; this.endInfo.push({ detailedAddress: '', appUserName: '', contractTelephone: '', latitude: '', longitude: '', province: '', city: '', area: '', type: '2' }); 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)); } } // 添加 删除发货卸货地址 subEndInfo(_event: any, index: number) { this.endInfo.splice(index, 1); this.validateForm1.removeControl(`unloadAddress${index}`); this.validateForm1.removeControl(`unloadName${index}`); this.validateForm1.removeControl(`unloadPhone${index}`); } //指派熟车 chooseFamifiar(item: any) { console.log('999'); const modalRef = this.modalService.create({ nzTitle: '指派熟车', nzContent: SupplyManagementVehicleAssignedCarComponent, nzWidth: 1200, nzComponentParams: { status: 'new', url: this.service.$api_save_consignWholeAssign, params: item }, nzFooter: null }); modalRef.afterClose.subscribe(result => { if (result) { this.openFinishPage(result); } }); } // 提交前确认,委托运输协议弹窗 submitConfirm(submitType?: any) { Object.keys(this.validateForm1.controls).forEach(key => { this.validateForm1.controls[key].markAsDirty(); this.validateForm1.controls[key].updateValueAndValidity(); }); this.sf1.validator({ emitError: true }); this.sf3.validator({ emitError: true }); this.sf4.validator({ emitError: true }); this.sf6.validator({ emitError: true }); this.sf7.validator({ emitError: true }); if (this.validateForm1.invalid || !this.sf1.valid || !this.sf3.valid || !this.sf4.valid || !this.sf6.valid || !this.sf7.valid) { return; } const modalRef = this.modalService.create({ nzTitle: '运输协议', nzContent: TranAgreementComponent, nzWidth: 900, nzFooter: null }); modalRef.afterClose.subscribe(result => { if (result) { this.submit(submitType); } }); } // 提交 submit(submitType: string): void { //装卸货信息 const LoadingList = this.startInfo.concat(this.endInfo); // 货物信息 const goodsInfoList = [ { ...this.sf4.value, ...this.sf3.value, maxWeight: this.sf4.value.maxWeight.join(','), maxCube: this.sf4.value.maxCube.join(',') } ]; // 运费信息 const expenseList = [ { expenseCode: 'PRE', expenseName: '预付', price: this.sf7.value.prePay, id: this.sf7data?.prePayId ? this.sf7data?.prePayId : '' }, { expenseCode: 'RECE', expenseName: '到付', price: this.sf7.value.toPay, id: this.sf7data?.toPayId ? this.sf7data?.toPayId : '' }, { expenseCode: 'OIL', expenseName: '油卡', price: this.sf7.value.oilCardPay, id: this.sf7data?.oilCardPayId ? this.sf7data?.oilCardPayId : '' }, { expenseCode: 'BACK', expenseName: '回单付', price: this.sf7.value.receiptPay, id: this.sf7data?.receiptPayId ? this.sf7data?.receiptPayId : '' } ]; const params = { id: '', ...this.sf1.value, unLoadingPlaceDTOList: LoadingList, unloadingTime: format(this.validateForm1.value.unloadingTime, 'yyyy-MM-dd HH:mm:ss'), loadingTime: format(this.validateForm1.value.loadingTime, 'yyyy-MM-dd HH:mm:ss'), goodsInfoDTOList: goodsInfoList, ...this.sf5.value, ...this.sf6.value, expenseDTOList: expenseList, paymentDays: this.sf7.value.paymentDays }; let reqUrl = this.service.$api_consignWhole; if (submitType) { if (submitType == 'assign') { this.chooseFamifiar(params); return; } } this.service.request(reqUrl, params).subscribe((res: any) => { if (res) { this.openFinishPage(); } }); } // 打开地图 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; 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; break; default: break; } if (this.startInfo[0]?.area && this.endInfo[0]?.area) { this.amapService.drivingCompute([...this.startInfo], [...this.endInfo]).subscribe(res => { this.totalDistance = res.distance; this.totalTime = res.time; }); } } }); } // 选择收回单地址 backBillChange() { const modalRef = this.modalService.create({ nzTitle: '选择收回单地址', nzContent: PublishAddressListComponent, nzWidth: 900, nzComponentParams: { spuStatus: '2' }, nzOnOk: item => { const data = item.seleteData; if (JSON.stringify(data) === '{}') return; this.sf6.setValue('/receiptAddressId', data.id); this.sf6.setValue('/receiptUserName', data.contactName); this.sf6.setValue('/phon', data.contactTelephone); this.sf6.setValue('/area', `${data.province}-${data.city}-${data.area}`); this.sf6.setValue('/address', data.detailedAddress); } }); } // 选择地址 chooseAddress(index: number, type: string) { const modalRef = this.modalService.create({ nzTitle: '选择地址', nzContent: PublishAddressListComponent, nzWidth: 900, nzComponentParams: { spuStatus: '1' }, nzOnOk: item => { console.log(item); console.log(type); const data = item.seleteData; if (JSON.stringify(data) === '{}') return; switch (type) { case 'start': this.startInfo[index] = { detailedAddress: data.detailedAddress, appUserName: data.contactName, contractTelephone: data.contactTelephone, latitude: data.contactTelephone, longitude: data.latitude, province: data.province, city: data.city, area: data.area, type: '1' }; break; case 'end': this.endInfo[index] = { detailedAddress: data.detailedAddress, appUserName: data.contactName, contractTelephone: data.contactTelephone, latitude: data.contactTelephone, longitude: data.latitude, province: data.province, city: data.city, area: data.area, type: '2' }; break; default: break; } } }); } // 打开下单完成页面 openFinishPage(resourceObj: any = null) { this.modalService.create({ nzTitle: '', nzContent: PublishSuccessComponent, nzWidth: 900, nzFooter: null, nzComponentParams: { type: 'onecar', resourceObj } }); } changeGoodsType(value: string, data: any) { if (data.label === '其它') return; const params = { pageIndex: 1, pageSize: 100, configId: value }; this.service .request(this.service.$api_get_config_item_page, params) .pipe( map(data => { return data.records?.map((m: any) => { return { label: m.name, value: m.id }; }); }) ) .subscribe(res => { if (res) { this.sf3.getProperty('/goodsNameId')!.schema.enum = res; this.sf3.getProperty('/goodsNameId')!.widget.reset(res); if (this.sf3data.goodsNameId) { this.sf3.setValue('/goodsNameId', this.sf3data.goodsNameId); } } }); } // 返回上一页 goBack() { window.history.go(-1); } }