import {DemandMaterial,OrderParams,MaterialItem,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams" import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo' import WorkOrderMaterialInfo from "../viewmodel/wms/WorkOrderMaterialInfo" import {MaterialBoxInfo} from '../params/MaterialInformationParam' import WmsRequest from '../common/util/request/WmsRequest' import RequestParamModel from '../viewmodel/wms/RequestParamModel' @Component export struct ProcessFlow { @Prop currentStep:number =0 @Prop firstStepTitle:string = '' @Prop secondStepTitle:string = '' @Prop thirdStepTitle:string = '' build() { Row() { // 步骤1 FlowStep({ stepNumber: 1, title: this.firstStepTitle, showConnector: true, isChoose:this.currentStep === 1 }) // 步骤2 FlowStep({ stepNumber: 2, title: this.secondStepTitle, showConnector: this.thirdStepTitle!='', isChoose:this.currentStep === 2 }) // 步骤3 if(this.thirdStepTitle!='') { FlowStep({ stepNumber: 3, title: this.thirdStepTitle, showConnector: false, isChoose:this.currentStep === 3 }) } } .justifyContent(FlexAlign.Center) .width('100%') } } @Component struct FlowStep { @Prop stepNumber: number @Prop title: string @Prop showConnector: boolean @Prop isChoose : boolean build() { Row() { Column() { // 步骤圆圈 Column() { Text(this.stepNumber.toString()) .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF')) .fontSize($r('app.float.fontSize_15_2')) } .width($r('app.float.virtualSize_23')) .height($r('app.float.virtualSize_23')) .borderRadius(20) // 圆形 .backgroundColor(this.isChoose? $r('app.color.0A84FF'):$r('app.color.20FFFFFF')) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) // 步骤文字 Text(this.title) .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF')) .fontSize($r('app.float.fontSize_9_6')) .margin({ top: 8 }) } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) if (this.showConnector) { Divider() .vertical(false) .strokeWidth(1) .color($r('app.color.15FFFFFF')) .margin({ left: '-3%', right: '-3%',// 向左延伸至圆心 // }) .width('30%') // 自适 } } } } @Component export struct OrderListComponent { private scrollerForList: Scroller = new Scroller() @Prop workOrders: WorkOrderInfo[] = [] @Link selectWorkOrder: WorkOrderInfo @Link materialData:WorkOrderMaterialInfo[] @State selectedIndex: number = -1 // 添加选中索引状态 queryDemandMaterial=async(workOrderCode:string)=>{ this.materialData = await WmsRequest.post('/api/v1/wms/workOrderMaterial/list', { workOrderCode: workOrderCode, } as RequestParamModel) as WorkOrderMaterialInfo[] } // 选中回调函数 private onSelect(index: number): void { this.selectedIndex = index this.selectWorkOrder = this.workOrders[index] } build() { Column() { // 订单列表 List({ space: 8,scroller:this.scrollerForList }) { ForEach(this.workOrders, (item: WorkOrderInfo, index) => { ListItem() { Column() { // 订单标题(带订单号) Text(`${item.orderName}${item.orderCode}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`工单编号: ${item.workOrderCode}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Text(`下发时间: ${item.planStartWhen}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Row() { Text('入库比例:') .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Text(`${(Number(item.inventoryNum) / Number(item.planNum) * 100).toFixed(0)}%`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .margin({ left: 4 }) .fontWeight(FontWeight.Lighter) } .width('100%') .justifyContent(FlexAlign.Start) } .margin({ top: 6 }) .alignItems(HorizontalAlign.Start) }.backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(13) .border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')}) .onClick(() => { this.onSelect(index) this.queryDemandMaterial(this.selectWorkOrder.workOrderCode) }) } }) } .width('100%') .flexGrow(1) } .width('100%') .height('100%') } } @Component export struct SingleOrder { @Prop selectWorkOrder: WorkOrderInfo = {} build() { Column() { // 订单标题(带订单号) Text(`${this.selectWorkOrder.orderName}${this.selectWorkOrder.orderCode}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`工单编号: ${this.selectWorkOrder.workOrderCode}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Text(`下发时间: ${this.selectWorkOrder.planStartWhen}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Row() { Text('入库比例:') .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) Text(`${(Number(this.selectWorkOrder.inventoryNum) / Number(this.selectWorkOrder.planNum) * 100).toFixed(0)}%`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .margin({ left: 4 }) .fontWeight(FontWeight.Lighter) } .width('100%') .justifyContent(FlexAlign.Start) } .margin({ top: 6 }) .alignItems(HorizontalAlign.Start) Divider() .strokeWidth(1) .color($r('app.color.15FFFFFF')) .margin({top:'2%'}) }//.backgroundColor(index === this.selectedIndex ? $r('app.color.30D158') : $r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(13) } } @Component export struct BoxGrid { private scrollerMaterial: Scroller = new Scroller() private scrollerEmpty: Scroller = new Scroller() // 拆分两个独立的状态变量 @State selectedMaterialIndex: number = -1 // 物料箱选中索引 @State selectedEmptyIndex: number = -1 // 空箱选中索引 @Link isQueryMaterial : boolean @Link selectedMaterialBox : MaterialBoxInfo // 独立的选择回调 private onSelectMaterial(index: number) { this.selectedMaterialIndex = (this.selectedMaterialIndex === index) ? -1 : index this.selectedEmptyIndex = -1 } private onSelectEmpty(index: number) { this.selectedEmptyIndex = (this.selectedEmptyIndex === index) ? -1 : index this.selectedMaterialIndex = -1 } @Link materialBoxes: MaterialBoxInfo[] ; @Link emptyBoxes: MaterialBoxInfo[] build() { Column() { if(this.isQueryMaterial){ Grid(this.scrollerMaterial) { ForEach(this.materialBoxes, (box: MaterialBoxInfo, index) => { GridItem() { Column() { // 订单标题(带订单号) Text(`${box.materials?box.materials[0].materialName:''}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) .margin({ bottom: '2%',left:'2%' }) // 订单详情 Column({ space: 3 }) { Text(`料箱编号: ${box.vehicleCode}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) // Text(`料箱类型: ${box.materials?box.materials[0].materialNo:''}`) // .fontColor($r('app.color.FFFFFF')) // .fontSize($r('app.float.fontSize_8')) // .fontWeight(FontWeight.Lighter) // .textAlign(TextAlign.Start) Text(`所属订单: ${box.taskNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`数量: ${box.materials?box.materials[0].num:''}${box.materials?box.materials[0].unit:''}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`层数: ${box.position}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`坐标: ${box.locationNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) .fontWeight(FontWeight.Lighter) } .width('100%') .margin({left:'2%'}) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Start) } //.margin({ top: 6 }) .alignItems(HorizontalAlign.Start) } .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(8) .border({ width: 2, color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF') }) .onClick(() => { this.onSelectMaterial(index) this.selectedMaterialBox = box //this.selectedMaterialBox = box.id }) }) } .columnsTemplate('1fr 1fr 1fr') // .rowsTemplate('1fr 1fr') .columnsGap(10) // 移除网格内部列间距 .rowsGap(10) // 移除网格内部行间距 .width('100%') // 确保填满父容器 .height('48%') .padding(10) Divider() .strokeWidth(1) .color($r('app.color.15FFFFFF')) .margin({top:'1%'}) //.margin({top:'2%'}) } Grid(this.scrollerEmpty) { ForEach(this.emptyBoxes, (box: MaterialBoxInfo, index) => { GridItem() { Row() { Column(){ // 订单标题(带订单号) Text(`空箱`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) .margin({ top: '2%',left:'2%' }) Text(`料箱编号: ${box.vehicleCode}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) .margin({ top: '40%',left:'2%' }) Text(`层数: ${box.position}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) .margin({ left:'2%' }) Text(`坐标: ${box.coordinate}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) .fontWeight(FontWeight.Lighter) .margin({ left:'2%' }) }.width('40%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start) Row(){ Image($r('app.media.empty_box')) .width('100%') .height('100%') .objectFit(ImageFit.Contain) }.width('60%') } //.margin({ top: 6 }) } .backgroundColor(index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(8) .height(this.isQueryMaterial?'50%':'25%') .border({ width: 2, color: index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF') }) .onClick(() => { this.onSelectEmpty(index) this.selectedMaterialBox = box }) }) } .columnsTemplate('1fr 1fr 1fr') .columnsGap(10) // 移除网格内部列间距 .rowsGap(10) // 移除网格内部行间距 .width('100%') // 确保填满父容器 .height(this.isQueryMaterial?'48%':'96%') .padding(10) .margin({top:'1%'}) } } } @Component export struct MaterialBoxGrid { private scrollerMaterial: Scroller = new Scroller() @State selectedMaterialIndex: number = -1 // 物料箱选中索引 private onSelectMaterial(index: number) { this.selectedMaterialIndex = index } @Prop materialBoxes: MaterialBox[] = []; @Prop emptyBoxes: EmptyBox[] = []; build() { Column() { Grid(this.scrollerMaterial) { ForEach(this.materialBoxes, (box: MaterialBox, index) => { GridItem() { Column() { // 订单标题(带订单号) Text(`${box.name}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) .margin({ bottom: '2%',left:'2%' }) // 订单详情 Column({ space: 3 }) { Text(`料箱编号: ${box.id}`) .fontColor($r('app.color.FFFFFF')) .fontWeight(FontWeight.Lighter) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`料箱类型: ${box.boxType}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`所属订单: ${box.order}`) .fontColor($r('app.color.FFFFFF')) .fontWeight(FontWeight.Lighter) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`数量: ${box.boxNumber}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`位置: ${box.position}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) .fontWeight(FontWeight.Lighter) } .width('100%') .margin({left:'2%'}) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Start) } //.margin({ top: 6 }) .alignItems(HorizontalAlign.Start) } .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(8) .border({ width: 2, color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF') }) .onClick(() => { this.onSelectMaterial(index) }) }) } .columnsTemplate('1fr 1fr 1fr') // .rowsTemplate('1fr 1fr') .columnsGap(10) // 移除网格内部列间距 .rowsGap(10) // 移除网格内部行间距 .width('100%') // 确保填满父容器 .height('97%') .padding(10) } } } @Component export struct MaterialList { private scrollerForList: Scroller = new Scroller() @Prop MaterialData: WorkOrderMaterialInfo[] = [] build() { Column() { List({scroller:this.scrollerForList}) { ForEach(this.MaterialData, (item:WorkOrderMaterialInfo) => { ListItem() { Column() { Row(){ Text(item.itemName) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('90%') .textAlign(TextAlign.Start) Text(`${item.storageNum}/${item.num}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('10%') .textAlign(TextAlign.End) }.margin({top:'1%'}) Row(){ Text(`型号: ${item.itemCode}`) .fontSize($r('app.float.fontSize_8')) .fontColor($r('app.color.FFFFFF')) .width('90%') .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text('入库/计划数量') .fontSize($r('app.float.fontSize_7')) .fontColor($r('app.color.60FFFFFF')) .width('10%') .textAlign(TextAlign.End) .fontWeight(FontWeight.Lighter) }.margin({bottom:'1%'}) }.width('100%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly).height('12%') } }) } .width('100%') .height('100%') .divider({ strokeWidth: 1, color: $r('app.color.20FFFFFF') }) } .height('100%') .justifyContent(FlexAlign.Start) } } @Component export struct MaterialListComponent { private scrollerForList: Scroller = new Scroller() @Link ScanMaterialList: WorkOrderInfo[] @Link materialNum :number // 选中回调函数 build() { Column() { // 订单列表 List({ space: 8,scroller:this.scrollerForList }) { ForEach(this.ScanMaterialList, (item: WorkOrderInfo, index) => { ListItem() { Row() { Column(){ // 订单标题(带订单号) Text(`${item.materialName}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`型号: ${item.materialCode}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) Text(`序列号: ${item.batchNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) // Text(`所属订单: ${item.date}`) // .fontColor($r('app.color.FFFFFF')) // .fontSize($r('app.float.fontSize_8')) // .width('100%') // .fontWeight(FontWeight.Lighter) // .textAlign(TextAlign.Start) Text(`数量: ${item.num}${item.unitDictLabel}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .fontWeight(FontWeight.Lighter) .textAlign(TextAlign.Start) } .margin({ top: 4 }) .alignItems(HorizontalAlign.Start) }.width('90%') Row(){ Image($r('app.media.material_delete')) .width($r('app.float.virtualSize_23')) .height($r('app.float.virtualSize_23')) .fillColor($r('app.color.FF453A')) .onClick(()=>{ this.ScanMaterialList.splice(index, 1); this.materialNum-- }) }.width('10%') } .backgroundColor($r('app.color.20FFFFFF')) // 选中状态加深 .borderRadius($r('app.float.virtualSize_9_6')) .padding(13) //.border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')}) } }) } .width('100%') .flexGrow(1) } .width('100%') .height('100%') } } @Component export struct MaterialButton { @State scaleValue : number = 1 @Prop icon: Resource = $r('app.media.rgv_turn_off') onButtonClick: () => void = () => {} build() { Row() { Button({ type: ButtonType.Normal }) { Image(this.icon) .width('50%') .height('50%') .objectFit(ImageFit.Contain) .fillColor($r('app.color.FFFFFF')) } .width('100%') .height('100%') .backgroundColor($r('app.color.20FFFFFF')) .borderRadius($r('app.float.virtualSize_6_4')) .scale({ x: this.scaleValue, y: this.scaleValue }) .animation({ duration: 200, curve: Curve.Linear // 弹性曲线更生动 }) .onClick(() => { this.scaleValue = 0.9; // 点击时缩小 setTimeout(() => { this.scaleValue = 1; // 0.2秒后恢复 }, 200); if (this.onButtonClick) { this.onButtonClick() } }) } } } @CustomDialog export struct RemindDialog { controller: CustomDialogController @Link remind: string build() { Column() { Text(this.remind) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_12')) } .backgroundColor($r('app.color.2A2A2A')) .borderRadius($r('app.float.virtualSize_11_6')) .justifyContent(FlexAlign.Center) .width(300) .height(50) } } @CustomDialog export struct CommonConfirmDialog { @State title: string = '提示' @State message: string = '确定要执行此操作吗?' @State confirmText: string = '确定' @State cancelText: string = '取消' controller: CustomDialogController onConfirm: () => void = () => {} build() { Column() { // 标题 Column(){ Text(this.title) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_15_2')) }.height('30%') .justifyContent(FlexAlign.Center) Column(){ Text(this.message) .fontColor($r('app.color.30FFFFFF')) .fontSize($r('app.float.fontSize_12')) }.height('30%') .justifyContent(FlexAlign.Center) Column(){ Divider() .vertical(false) .strokeWidth(1) .color($r('app.color.15FFFFFF')) Row(){ Row(){ Text('取消') .fontColor($r('app.color.60FFFFFF')) .fontSize($r('app.float.fontSize_12')) } .justifyContent(FlexAlign.Center) .width('50%') .onClick(() => this.controller.close()) Divider() .vertical(true) .strokeWidth(1) .color($r('app.color.15FFFFFF')) Row(){ Text('确认') .fontColor($r('app.color.007AFF')) .fontSize($r('app.float.fontSize_12')) } .justifyContent(FlexAlign.Center) .width('50%') .onClick(() => { this.onConfirm(); this.controller.close(); }) } } .width('100%') .height('30%') } .height(200) .width(400) .backgroundColor($r('app.color.2A2A2A')) .justifyContent(FlexAlign.End) .borderRadius(16) } }