HJ_openHarmony_wms/entry/src/main/ets/pages/LittleMaterialsStorage.ets

/*
 * 零星物料入库
 * */
import {ProcessFlow,BoxGrid,MaterialListComponent} from "../component/OrderMaterialsStorageView"
import {OrderParams,MaterialBox, EmptyBox} from "../params/OrderMaterialsStorageParams"
import router from '@ohos.router';
import {NavigationBar} from '../component/NavigationBar'
import {TimeAndTitle} from "../component/TimeAndTitle"
import {InBoundView} from '../component/InBoundView'
@Entry
@Component
struct LittleMaterialsStorage{
  @State messages:string[] = []
  @State currentStep: number = 1;
  @State emptyBoxes: EmptyBox[] = [
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' },
    { position: 'X-1Y-2' } // 图片显示6个空箱位置
  ]
  @State materialBoxes: MaterialBox[] = [
  // 第一行物料箱
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    }, {
    id: '1', type: 'material',
    name: '物料名称XXXXX',
    boxNumber: 'LX-12345',
    boxType: '通用类型',
    order: 'XXXXX订单',
    quantity: 10,
    position: 'X-1 Y-2'
  },

    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
  // 其他2个空箱...
  ];
  @State orders:OrderParams[]= [
    { orderName: '订单名称XXXXX', orderNo: '123123213', date: '2025/11/11', progress: '50%' },
    { orderName: '订单名称XXXX', orderNo: '123123213', date: '2025/11/11', progress: '75%' },
    { orderName: '特殊订单', orderNo: 'SH2024001', date: '2024/03/01', progress: '100%' },
    { orderName: '订单名称XXXXX', orderNo: '123123213', date: '2025/11/11', progress: '50%' },
    { orderName: '订单名称XXXX', orderNo: '123123213', date: '2025/11/11', progress: '75%' },
    { orderName: '特殊订单', orderNo: 'SH2024001', date: '2024/03/01', progress: '100%' }
  ]
  build() {
    Row() {
      Column() {
        Row(){
          TimeAndTitle()
        }.width('100%')
        .height('3.4%')
        .alignItems(VerticalAlign.Bottom)
        .justifyContent(FlexAlign.End)

        Row(){
          Image($r('app.media.general_return'))
            .height($r('app.float.virtualSize_22_4'))
            .width($r('app.float.virtualSize_22_4'))
            .fillColor($r('app.color.FFFFFF'))
            // .onClick(()=> {
            //   router.back()
            // })
          Text('零星物料入库')
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_15_2'))
        }
        .height('4%')
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .margin({left:'5%'})
        .onClick(()=> {
          router.back()
        })

        Row(){
          Row(){
            ProcessFlow({
              currentStep:this.currentStep,
              firstStepTitle: "调取料箱",
              secondStepTitle:"绑定入库",
              thirdStepTitle:"",
            })
          }.width('20%')
          .margin({right:'20%'})
          NavigationBar().width('20%')
        }
        .width('100%')
        .height('4%')
        .margin({top:'1%'})
        .justifyContent(FlexAlign.End)
        .alignItems(VerticalAlign.Bottom)



        if(this.currentStep === 1)
        {
          Column(){
            Row(){
              Column(){
                Column(){
                  Row(){
                    Text('查询物料')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_15_2'))
                      .margin({top:'4%'})
                  }.height('10%')
                  Row() {
                    // 左侧二维码图标
                    Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
                      .width($r('app.float.virtualSize_16_8'))
                      .height($r('app.float.virtualSize_16_8'))
                      .fillColor($r('app.color.FFFFFF'))
                      .margin({left:'2%'})
                    // 扫码输入框
                    TextInput({ placeholder: '请扫描物料编码' })
                      .type(InputType.Normal)
                      .placeholderFont({ size: $r('app.float.fontSize_12')})
                      .placeholderColor($r('app.color.30FFFFFF'))
                      .fontSize($r('app.float.fontSize_12'))
                      .fontColor($r('app.color.FFFFFF'))
                  }
                  .margin({top:'3%'})
                  .height('8%')
                  .width('80%')
                  .borderRadius($r('app.float.virtualSize_7_2'))
                  .backgroundColor($r('app.color.000000'))
                  // 操作说明
                  Text('通过物料扫码查询当前库存是否有同型号物')
                    .fontSize($r('app.float.fontSize_8'))
                    .fontColor($r('app.color.60FFFFFF'))
                    .width('100%')
                    .textAlign(TextAlign.Center)
                    .margin({top:'2%'})

                  Column() {
                    Image($r('app.media.arrow_down'))
                      .width($r('app.float.virtualSize_23'))
                      .height($r('app.float.virtualSize_23'))
                      .fillColor($r('app.color.FFFFFF'))
                    Column({space:5}){
                      Text('DIANLUBANPCBAADD123124114232423ASD')
                        .fontSize($r('app.float.fontSize_12'))
                        .fontColor($r('app.color.0A84FF'))
                        .textAlign(TextAlign.Start)
                        .width('100%')
                      Text('产品型号:12322221232321222332211233')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.0A84FF'))
                        .textAlign(TextAlign.Start)
                        .width('100%')
                      Text('序列号：123254213452465346346456')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.0A84FF'))
                        .textAlign(TextAlign.Start)
                        .width('100%')
                      Text('数量：10个')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.0A84FF'))
                        .textAlign(TextAlign.Start)
                        .width('100%')
                    }.backgroundColor($r('app.color.000000'))
                    .borderRadius($r('app.float.virtualSize_7_2'))
                    .padding(16)
                    .margin({top:'4%'})
                    .height('40%')
                    .width('80%')
                    Row(){
                      Text('当前有 ')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.60FFFFFF'))
                      Text('6')
                        .fontSize($r('app.float.fontSize_12'))
                        .fontColor($r('app.color.0A84FF'))
                      Text(' 个料箱装有同型号物料')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.60FFFFFF'))
                    }.justifyContent(FlexAlign.Center)
                    .margin({top:'5%'})
                  }.margin({top:'4%'})
                }.height('100%').width('95%').justifyContent(FlexAlign.Start)
              }.width('30%').backgroundColor($r('app.color.10FFFFFF'))
              Image($r('app.media.arrow_right'))
                .width($r('app.float.virtualSize_23'))
                .height($r('app.float.virtualSize_23'))
                .fillColor($r('app.color.FFFFFF'))
                .margin({left:'-2%',right:'-2%'})
              Column(){
                Row(){
                  Text("选择料箱")
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_15_2'))
                }.height('10%')
                Row() {
                  BoxGrid({ materialBoxes:this.materialBoxes,emptyBoxes:this.emptyBoxes })
                    .width('100%')
                    .height('100%')
                }.width('100%').height('90%')
              }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
            }
            .height('85%')
            .justifyContent(FlexAlign.SpaceEvenly)
            .width('100%')
            Row({space:15}){
              Button({type:ButtonType.Normal}) {
                Text("料箱出库")
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
              }
              .width('22%')
              .height('100%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              //.enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.currentStep = 1;
              })
              Button({type:ButtonType.Normal}) {
                Text("下一步")
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
              }
              .width('22%')
              .height('100%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              //.enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.currentStep = 2
              })

            }.width('100%').height('6%').justifyContent(FlexAlign.End).margin({bottom:'3%',right:'5%'})
          }.height('83.6%').margin({top:'3%'}).width('100%')
          .justifyContent(FlexAlign.SpaceAround)
          .width('100%')
        }
        if(this.currentStep === 2){
          Column(){
            Row(){
              Column(){
                Row(){
                  Column(){
                    Text("扫码录入")
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_15_2'))
                    Text('电机生产订单DWS123331223332（电路板-SDASDASFSADASD）')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_8'))
                  }.height('100%').width('65%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center)
                  Row() {
                    // 左侧二维码图标
                    Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
                      .width($r('app.float.virtualSize_16_8'))
                      .height($r('app.float.virtualSize_16_8'))
                      .fillColor($r('app.color.FFFFFF'))
                      .margin({left:'2%'})
                    // 扫码输入框
                    TextInput({ placeholder: '请扫描物料编码' })
                      .type(InputType.Normal)
                      .placeholderFont({ size: $r('app.float.fontSize_12')})
                      .placeholderColor($r('app.color.30FFFFFF'))
                      .fontSize($r('app.float.fontSize_12'))
                      .fontColor($r('app.color.FFFFFF'))
                  }.width('35%')
                  .borderRadius($r('app.float.virtualSize_7_2'))
                  .backgroundColor($r('app.color.000000'))
                }.justifyContent(FlexAlign.Start)
                .height('10%')
                .width('95%')
                .justifyContent(FlexAlign.Center)

                Row() {
                  MaterialListComponent({orders:this.orders}).width('95%')
                }.width('100%').height('90%').justifyContent(FlexAlign.Center)
              }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
              Image($r('app.media.arrow_right'))
                .width($r('app.float.virtualSize_23'))
                .height($r('app.float.virtualSize_23'))
                .fillColor($r('app.color.FFFFFF'))
                .margin({left:'-2%',right:'-2%'})

              Column(){
                InBoundView({messages:this.messages})
              }.width('29%').backgroundColor($r('app.color.10FFFFFF'))
            }
            .height('85%')
            .justifyContent(FlexAlign.SpaceEvenly)
            .width('100%')
            Row({space:15}){

              Button({type:ButtonType.Normal}) {
                Text("上一步")
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
              }
              .width('22%')
              .height('100%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              //.enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.currentStep = 1;
              })
            }.width('100%').height('6%').justifyContent(FlexAlign.Start).margin({bottom:'3%',left:'5%'})
          }.height('83.6%').margin({top:'3%'}).width('100%')
          .justifyContent(FlexAlign.SpaceAround)
          .width('100%')
        }
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.000000'))
    }
    .height('100%')
  }
}