import {DemandMaterial,OrderParams,MaterialItem,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams" import { ON } from '@ohos.UiTest' @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: '绑定入库', 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.20FFFFFF')) .margin({ left: '-3%', right: '-3%',// 向左延伸至圆心 // }) .width('30%') // 自适 } } } } @Component export struct OrderListComponent { private scrollerForList: Scroller = new Scroller() @Prop orders: OrderParams[] = [] @State selectedIndex: number = -1 // 添加选中索引状态 @Link selectedOrderNo: string @Link selectedOrderDate: string @Link selectedOrderName: string @Link selectedOrderInRatio:string // 选中回调函数 private onSelect(index: number): void { this.selectedIndex = index this.selectedOrderNo = this.orders[index].orderNo this.selectedOrderDate = this.orders[index].date this.selectedOrderName = this.orders[index].orderName this.selectedOrderInRatio = this.orders[index].progress } build() { Column() { // 订单列表 List({ space: 8,scroller:this.scrollerForList }) { ForEach(this.orders, (item: OrderParams, index) => { ListItem() { Column() { // 订单标题(带订单号) Text(`${item.orderName}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`工单编号: ${item.orderNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Text(`下发时间: ${item.date}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Row() { Text('入库比例:') .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Text(item.progress) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .margin({ left: 4 }) } .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) }) } }) } .width('100%') .flexGrow(1) } .width('100%') .height('100%') } } @Component export struct MaterialGrid { @Prop materials: MaterialItem[] = []; build() { Grid() { ForEach(this.materials, (item:MaterialItem) => { GridItem() { Column() { // 物料名称 Text(item.name) .fontSize(16) .fontWeight(FontWeight.Bold) .margin({ bottom: 8 }) .width('100%') .textAlign(TextAlign.Start) // 产品型号 Text(item.model) .fontSize(14) .fontColor('#666666') .margin({ bottom: 12 }) .width('100%') .textAlign(TextAlign.Start) // 数量进度 Row() { Text(`已入库: ${item.completed}`) .fontSize(14) Text('/') .margin({ left: 4, right: 4 }) Text(`计划: ${item.planned}`) .fontSize(14) .fontColor('#1890FF') } .width('100%') .justifyContent(FlexAlign.SpaceBetween) } .padding(12) .backgroundColor('#FFFFFF') .borderRadius(4) .border({ width: 1, color: '#F0F0F0' }) } }) } .columnsTemplate('1fr 1fr 1fr') .columnsGap(10) // 移除网格内部列间距 .rowsGap(0) // 移除网格内部行间距 .width('100%') // 确保填满父容器 .height('100%') .padding(10) .backgroundColor('#F5F5F5') // 背景色与图片一致 } } @Component export struct SingleOrder { @Prop selectedOrderNo: string @Prop selectedOrderDate: string @Prop selectedOrderName: string @Prop selectedOrderInRatio: string build() { Column() { // 订单标题(带订单号) Text(this.selectedOrderName) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`工单编号: ${this.selectedOrderNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Text(`下发时间: ${this.selectedOrderDate}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Row() { Text('入库比例:') .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) Text(this.selectedOrderInRatio) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .margin({ left: 4 }) } .width('100%') .justifyContent(FlexAlign.Start) } .margin({ top: 6 }) .alignItems(HorizontalAlign.Start) Divider() .strokeWidth(1) .color($r('app.color.20FFFFFF')) .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 // 空箱选中索引 // 独立的选择回调 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 } @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')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`料箱类型: ${box.boxType}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`所属订单: ${box.order}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`数量: ${box.boxNumber}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) Text(`位置: ${box.position}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) } .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('48%') .padding(10) Divider() .strokeWidth(1) .color($r('app.color.20FFFFFF')) .margin({top:'1%'}) //.margin({top:'2%'}) Grid(this.scrollerEmpty) { ForEach(this.emptyBoxes, (box: EmptyBox, 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.position}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .textAlign(TextAlign.Start) .margin({ top: '60%',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('50%') .border({ width: 2, color: index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF') }) .onClick(() => { this.onSelectEmpty(index) }) }) } .columnsTemplate('1fr 1fr 1fr') .columnsGap(10) // 移除网格内部列间距 .rowsGap(10) // 移除网格内部行间距 .width('100%') // 确保填满父容器 .height('48%') .padding(10) .margin({top:'1%'}) } // 背景色与图片一致 } } // 辅助组件:料箱信息行 @Component struct BoxInfoRow { @Prop label: string = '' @Prop value: string = '' build() { Row() { Text(`${this.label}:`) .fontSize(14) .fontColor('#666666') Text(this.value) .fontSize(14) .fontColor('#000000') } .width('100%') .margin({ bottom: 6 }) .justifyContent(FlexAlign.Start) } } @Component export struct MaterialList { private scrollerForList: Scroller = new Scroller() @Prop MaterialData: DemandMaterial[] = [] build() { Column() { List({scroller:this.scrollerForList}) { ForEach(this.MaterialData, (item:DemandMaterial) => { ListItem() { Column() { Row(){ Text(item.materialName) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('90%') .textAlign(TextAlign.Start) Text(`${item.inBoundNum}/${item.planNum}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('10%') .textAlign(TextAlign.End) }.margin({top:'1%'}) Row(){ Text(`型号: ${item.materialType}`) .fontSize($r('app.float.fontSize_8')) .fontColor($r('app.color.FFFFFF')) .width('90%') .textAlign(TextAlign.Start) Text('入库/计划数量') .fontSize($r('app.float.fontSize_7')) .fontColor($r('app.color.60FFFFFF')) .width('10%') .textAlign(TextAlign.End) }.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 orders: OrderParams[] @State selectedIndex: number = -1 // 添加选中索引状 // 选中回调函数 private onSelect(index: number): void { this.selectedIndex = index } build() { Column() { // 订单列表 List({ space: 8,scroller:this.scrollerForList }) { ForEach(this.orders, (item: OrderParams, index) => { ListItem() { Row() { Column(){ // 订单标题(带订单号) Text(`${item.orderName}`) .fontSize($r('app.float.fontSize_12')) .fontColor($r('app.color.FFFFFF')) .width('100%') .textAlign(TextAlign.Start) // 订单详情 Column({ space: 3 }) { Text(`型号: ${item.orderNo}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .textAlign(TextAlign.Start) Text(`序列号: ${item.date}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .textAlign(TextAlign.Start) Text(`所属订单: ${item.date}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .textAlign(TextAlign.Start) Text(`数量: ${item.date}`) .fontColor($r('app.color.FFFFFF')) .fontSize($r('app.float.fontSize_8')) .width('100%') .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.orders.splice(index, 1); }) }.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%') } }