HJ_openHarmony_wms/entry/src/main/ets/component/OrderMaterialsStorageView.ets

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%')
  }
}