订单物料入库3

entry/oh-package-lock.json5

@@ -3,7 +3,8 @@
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "specifiers": {
     "@ohos/axios@2.2.1-rc.0": "@ohos/axios@2.2.1-rc.0",
-    "@mcui/mccharts@^1.0.2": "@mcui/mccharts@1.0.2"
+    "@mcui/mccharts@^1.0.2": "@mcui/mccharts@1.0.2",
+    "@ohos/mqtt@^2.0.6": "@ohos/mqtt@2.0.21"
   },
   "packages": {
     "@ohos/axios@2.2.1-rc.0": {
@@ -15,6 +16,14 @@
       "resolved": "https://ohpm.openharmony.cn/ohpm/@mcui/mccharts/-/mccharts-1.0.2.har",
       "integrity": "sha512-44hGTwZcsfFnny7nT/zMpWKFqXbaVmdlDbyeJIOlJwbglS/S3ypqhBdzbpj3aJrcMSd5FLFO0FrZGntph9HSIw==",
       "registryType": "ohpm"
+    },
+    "@ohos/mqtt@2.0.21": {
+      "resolved": "https://ohpm.openharmony.cn/ohpm/@ohos/mqtt/-/mqtt-2.0.21.har",
+      "integrity": "sha512-Z04WQ+Z5OTL4jnDFWFwBUNgjvU42+g+z3kmiuq3/D9feMsQt0FMxaCwzyo/dl2TaDixbJ8eBh5aQTgmt+1pztw==",
+      "dependencies": {
+        "libmqttasync.so": "file:./src/main/cpp/types/libmqttasync"
+      },
+      "registryType": "ohpm"
     }
   }
 }

entry/src/main/ets/component/InBoundView.ets

@@ -3,7 +3,7 @@ export struct InBoundView {
   @Prop messages: string[] = []
   build() {
     Column() {
-      Text("空箱入库")
+      Text('出入库料口操作')
         .fontColor($r('app.color.FFFFFF'))
         .fontSize($r('app.float.fontSize_15_2'))
         .margin({ top: '3%' })

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

@@ -4,29 +4,35 @@ 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: '选择工单',
+        title: this.firstStepTitle,
         showConnector: true,
         isChoose:this.currentStep === 1
       })
       // 步骤2
       FlowStep({
         stepNumber: 2,
-        title: '调取料箱',
-        showConnector: true,
+        title: this.secondStepTitle,
+        showConnector: this.thirdStepTitle!='',
         isChoose:this.currentStep === 2
       })
       // 步骤3
-      FlowStep({
-        stepNumber: 3,
-        title: '绑定入库',
-        showConnector: false,
-        isChoose:this.currentStep === 3
-      })
+      if(this.thirdStepTitle!='')
+      {
+        FlowStep({
+          stepNumber: 3,
+          title: '绑定入库',
+          showConnector: false,
+          isChoose:this.currentStep === 3
+        })
+      }
     }
     .justifyContent(FlexAlign.Center)
     .width('100%')

entry/src/main/ets/pages/EmptyBoxStorage.ets

@@ -25,19 +25,24 @@ struct emptyBoxStorage {
         .alignItems(VerticalAlign.Bottom)
         .justifyContent(FlexAlign.End)
         Row(){
-          Text('< 空箱入库')
+          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'))
-            .onClick(()=>{
-              router.back({
-                url :"pages/Menu"
-              })
-            })
         }
         .height('4%')
         .width('100%')
         .justifyContent(FlexAlign.Start)
         .margin({left:'5%'})
+        .onClick(()=> {
+          router.back()
+        })
         Row(){
           NavigationBar().width('20%')
         }

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

@@ -0,0 +1,458 @@
+import {ProcessFlow,MaterialList,SingleOrder,BoxGrid,
+  OrderListComponent,MaterialListComponent} from "../component/OrderMaterialsStorageView"
+import {OrderParams,DemandMaterial,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%')
+  }
+}

entry/src/main/ets/pages/Menu.ets

@@ -57,14 +57,21 @@ struct menu {
         .alignItems(VerticalAlign.Bottom)
         .justifyContent(FlexAlign.End)
         Row(){
-          Text('< 智能仓储')
+          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'))
+          Text('智能仓储')
             .fontColor($r('app.color.FFFFFF'))
             .fontSize($r('app.float.fontSize_15_2'))
         }
         .height('4%')
         .width('100%')
         .justifyContent(FlexAlign.Start)
-        .margin({left:'5%'})
+        .margin({left:'2%'})
+        .onClick(()=> {
+          router.back()
+        })
         Row(){
           NavigationBar().width('20%')
         }
@@ -91,7 +98,7 @@ struct menu {
             .width('100%')
             .height('23%')
             .borderRadius($r('app.float.virtualSize_6_4'))
-            .backgroundImage($r("app.media.home_bg_process_management"))
+            .backgroundImage($r("app.media.empty_material_inbound"))
             .backgroundImageSize(ImageSize.Cover)
             .onClick(()=>{
               router.pushUrl({
@@ -112,7 +119,7 @@ struct menu {
             .width('100%')
             .height('46%')
             .borderRadius($r('app.float.virtualSize_6_4'))
-            .backgroundImage($r("app.media.home_bg_process_management"))
+            .backgroundImage($r("app.media.order_material_inbound"))
             .backgroundImageSize(ImageSize.Cover)
             .onClick(()=>{
               router.pushUrl({
@@ -133,8 +140,13 @@ struct menu {
             .width('100%')
             .height('23%')
             .borderRadius($r('app.float.virtualSize_6_4'))
-            .backgroundImage($r("app.media.home_bg_process_management"))
+            .backgroundImage($r("app.media.little_material_inbound"))
             .backgroundImageSize(ImageSize.Cover)
+            .onClick(()=>{
+              router.pushUrl({
+                url: 'pages/LittleMaterialsStorage'
+              })
+            })
           }.justifyContent(FlexAlign.SpaceAround)
           .height('95%')
           .width('30%')
@@ -162,7 +174,7 @@ struct menu {
             .width('100%')
             .height('70%')
             .borderRadius($r('app.float.virtualSize_6_4'))
-            .backgroundImage($r("app.media.home_bg_process_management"))
+            .backgroundImage($r("app.media.process_material_kits"))
             .backgroundImageSize(ImageSize.Cover)
             .onClick(()=>{
               router.pushUrl({
@@ -183,7 +195,7 @@ struct menu {
             .width('100%')
             .height('23%')
             .borderRadius($r('app.float.virtualSize_6_4'))
-            .backgroundImage($r("app.media.home_bg_process_management"))
+            .backgroundImage($r("app.media.little_material_outbound"))
             .backgroundImageSize(ImageSize.Cover)
           } .alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceAround).height('95%').width('30%')
           Divider()

entry/src/main/ets/pages/OrderMaterialsStorage.ets

@@ -1,9 +1,11 @@
-import {ProcessFlow,MaterialList,SingleOrder,BoxGrid,
-  OrderListComponent,MaterialListComponent} from "../component/OrderMaterialsStorageView"
+import {ProcessFlow} from "../component/OrderMaterialsStorageView"
 import {OrderParams,DemandMaterial,MaterialBox, EmptyBox} from "../params/OrderMaterialsStorageParams"
 import router from '@ohos.router';
 import {NavigationBar} from '../component/NavigationBar'
 import {TimeAndTitle} from "../component/TimeAndTitle"
+import {OrderMaterialStorageFirstStep} from '../view/wms/OrderMaterialStorageFirstStep'
+import {OrderMaterialStorageSecondStep} from '../view/wms/OrderMaterialStorageSecondStep'
+import {OrderMaterialStorageThirdStep} from '../view/wms/OrderMaterialStorageThirdStep'
 @Entry
 @Component
 struct orderMaterialsStorage {
@@ -12,6 +14,7 @@ struct orderMaterialsStorage {
   @State selectedOrderDate: string = ''
   @State selectedOrderName: string = ''
   @State selectedOrderInRatio:string = ''
+  @State messages:string[] = []
   @State currentStep: number = 1;
   @State emptyBoxes: EmptyBox[] = [
     { position: 'X-1Y-2' },
@@ -201,10 +204,6 @@ struct orderMaterialsStorage {
     {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
     {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
   ];
-  deleteOrder(index: number) {
-    // 从数组中删除指定项
-    this.orders.splice(index, 1)
-  }
 
   build() {
     Row() {
@@ -217,24 +216,32 @@ struct orderMaterialsStorage {
         .justifyContent(FlexAlign.End)
 
         Row(){
-          Text('< 订单物料入库')
+          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'))
-            .onClick(()=>{
-              router.back({
-                url :"pages/Menu"
-              })
-            })
         }
         .height('4%')
         .width('100%')
         .justifyContent(FlexAlign.Start)
         .margin({left:'5%'})
+        .onClick(()=> {
+          router.back()
+        })
 
         Row(){
           Row(){
             ProcessFlow({
-              currentStep:this.currentStep
+              currentStep:this.currentStep,
+              firstStepTitle: "选择工单",
+              secondStepTitle:"调取料箱",
+              thirdStepTitle:"绑定入库",
             })
           }.width('20%')
           .margin({right:'20%'})
@@ -249,402 +256,26 @@ struct orderMaterialsStorage {
 
        if(this.currentStep === 1)
        {
-         Column(){
-           Row(){
-             Column(){
-               Row(){
-                 Text("选择工单")
-                   .fontColor($r('app.color.FFFFFF'))
-                   .fontSize($r('app.float.fontSize_15_2'))
-               }.height('10%')
-               Row(){
-                 OrderListComponent({
-                   orders:this.orders,
-                   selectedOrderNo: this.selectedOrderNo,
-                   selectedOrderDate:this.selectedOrderDate,
-                   selectedOrderName:this.selectedOrderName,
-                   selectedOrderInRatio:this.selectedOrderInRatio
-                 }).width('95%').height('90%')
-               }
-             }.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() {
-                 MaterialList({ MaterialData: this.materialData })
-                   .width('100%')
-                   .height('100%')
-               }.width('95%').height('90%')
-             }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
-           }
-           .height('85%')
-           .justifyContent(FlexAlign.SpaceEvenly)
-           .width('100%')
-
-           Button({type:ButtonType.Normal}) {
-                Text("下一步")
-                  .fontSize($r('app.float.fontSize_12'))
-                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-              }
-              .width('22%')
-              .height('6%')
-              .margin({bottom:'3%',left:'73%'})
-              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-              .onClick(() => {
-                this.currentStep = 2;
-              })
-         }.height('83.6%').margin({top:'3%'}).width('100%')
-         .justifyContent(FlexAlign.SpaceAround)
-         .width('100%')
+         OrderMaterialStorageFirstStep({
+           currentStep:this.currentStep,
+           selectedOrderNo:this.selectedOrderNo,
+           selectedOrderName:this.selectedOrderName,
+           selectedOrderDate:this.selectedOrderDate,
+           selectedOrderInRatio:this.selectedOrderInRatio
+         })
        }
-        else if(this.currentStep === 2)
-        {
-          Column(){
-            Row(){
-              Column(){
-                SingleOrder({
-                  selectedOrderNo:this.selectedOrderNo,
-                  selectedOrderDate:this.selectedOrderDate,
-                  selectedOrderName:this.selectedOrderName,
-                  selectedOrderInRatio:this.selectedOrderInRatio
-                }).height('18%').width('95%')
-                Column(){
-                    Text('查询物料')
-                      .fontColor($r('app.color.FFFFFF'))
-                      .fontSize($r('app.float.fontSize_15_2'))
-                      .margin({top:'4%'})
-                    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('82%').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(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .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(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-              .onClick(() => {
-                this.currentStep = 2;
-              })
-              Button({type:ButtonType.Normal}) {
-                Text("下一步")
-                  .fontSize($r('app.float.fontSize_12'))
-                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-              }
-              .width('22%')
-              .height('100%')
-              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-              .onClick(() => {
-                this.currentStep = 3;
-              })
-
-            }.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%')
+       else if(this.currentStep === 2)
+       {
+         OrderMaterialStorageSecondStep({
+           currentStep:this.currentStep,
+           selectedOrderNo:this.selectedOrderNo,
+           selectedOrderName:this.selectedOrderName,
+           selectedOrderDate:this.selectedOrderDate,
+           selectedOrderInRatio:this.selectedOrderInRatio
+         })
         }
         if(this.currentStep === 3){
-          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(){
-                SingleOrder({
-                  selectedOrderNo:this.selectedOrderNo,
-                  selectedOrderDate:this.selectedOrderDate,
-                  selectedOrderName:this.selectedOrderName,
-                  selectedOrderInRatio:this.selectedOrderInRatio
-                }).height('18%').width('95%')
-                Column(){
-                  Text('查询物料')
-                    .fontColor($r('app.color.FFFFFF'))
-                    .fontSize($r('app.float.fontSize_15_2'))
-                    .margin({top:'4%'})
-                  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('82%').width('95%').justifyContent(FlexAlign.Start)
-              }.width('30%').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(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .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(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-              .onClick(() => {
-                this.currentStep = 2;
-              })
-              Button({type:ButtonType.Normal}) {
-                Text("下一步")
-                  .fontSize($r('app.float.fontSize_12'))
-                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-              }
-              .width('22%')
-              .height('100%')
-              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-              .onClick(() => {
-                this.currentStep = 3;
-              })
-
-            }.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%')
+          OrderMaterialStorageThirdStep({currentStep:this.currentStep})
         }
       }
       .width('100%')

entry/src/main/ets/view/wms/OrderMaterialStorageFirstStep.ets

@@ -0,0 +1,92 @@
+import {MaterialList,OrderListComponent} from "../../component/OrderMaterialsStorageView"
+import {OrderParams,DemandMaterial} from "../../params/OrderMaterialsStorageParams"
+
+
+@Component
+export struct OrderMaterialStorageFirstStep {
+  @Link selectedOrderNo: string
+  @Link selectedOrderDate: string
+  @Link selectedOrderName: string
+  @Link selectedOrderInRatio:string
+  @Link currentStep: number
+  @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%' }
+  ]
+  @State materialData: DemandMaterial[] = [
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+  ];
+  build() {
+    Column(){
+      Row(){
+        Column(){
+          Row(){
+            Text("选择工单")
+              .fontColor($r('app.color.FFFFFF'))
+              .fontSize($r('app.float.fontSize_15_2'))
+          }.height('10%')
+          Row(){
+            OrderListComponent({
+              orders:this.orders,
+              selectedOrderNo: this.selectedOrderNo,
+              selectedOrderDate:this.selectedOrderDate,
+              selectedOrderName:this.selectedOrderName,
+              selectedOrderInRatio:this.selectedOrderInRatio
+            }).width('95%').height('90%')
+          }
+        }.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() {
+            MaterialList({ MaterialData: this.materialData })
+              .width('100%')
+              .height('100%')
+          }.width('95%').height('90%')
+        }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
+      }
+      .height('85%')
+      .justifyContent(FlexAlign.SpaceEvenly)
+      .width('100%')
+
+      Button({type:ButtonType.Normal}) {
+        Text("下一步")
+          .fontSize($r('app.float.fontSize_12'))
+          .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+      }
+      .width('22%')
+      .height('6%')
+      .margin({bottom:'3%',left:'73%'})
+      .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+      .borderRadius($r('app.float.virtualSize_6_4'))
+      .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+      .onClick(() => {
+        this.currentStep = 2;
+      })
+    }.height('83.6%').margin({top:'3%'}).width('100%')
+    .justifyContent(FlexAlign.SpaceAround)
+    .width('100%')
+  }
+}

entry/src/main/ets/view/wms/OrderMaterialStorageSecondStep.ets

@@ -0,0 +1,335 @@
+import {SingleOrder,BoxGrid} from "../../component/OrderMaterialsStorageView"
+import {OrderParams,DemandMaterial,MaterialBox, EmptyBox} from "../../params/OrderMaterialsStorageParams"
+
+@Component
+export struct OrderMaterialStorageSecondStep {
+  @Prop selectedOrderNo: string = '';
+  @Prop selectedOrderDate: string = ''
+  @Prop selectedOrderName: string = ''
+  @Prop selectedOrderInRatio:string = ''
+  @Link currentStep: number
+  @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个空箱...
+  ];
+  build() {
+    Column(){
+      Row(){
+        Column(){
+          SingleOrder({
+            selectedOrderNo:this.selectedOrderNo,
+            selectedOrderDate:this.selectedOrderDate,
+            selectedOrderName:this.selectedOrderName,
+            selectedOrderInRatio:this.selectedOrderInRatio
+          }).height('18%').width('95%')
+          Column(){
+            Text('查询物料')
+              .fontColor($r('app.color.FFFFFF'))
+              .fontSize($r('app.float.fontSize_15_2'))
+              .margin({top:'4%'})
+            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('82%').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;
+        })
+        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 = 3;
+        })
+
+      }.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%')
+  }
+}

entry/src/main/ets/view/wms/OrderMaterialStorageThirdStep.ets

@@ -0,0 +1,101 @@
+import {MaterialListComponent} from "../../component/OrderMaterialsStorageView"
+import {OrderParams,DemandMaterial,MaterialBox, EmptyBox} from "../../params/OrderMaterialsStorageParams"
+import {InBoundView} from '../../component/InBoundView'
+
+@Component
+export struct OrderMaterialStorageThirdStep {
+  @State messages:string[] = []
+  @Link currentStep: number
+  @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() {
+    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;
+        })
+        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.Start).margin({bottom:'3%',left:'5%'})
+    }.height('83.6%').margin({top:'3%'}).width('100%')
+    .justifyContent(FlexAlign.SpaceAround)
+    .width('100%')
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -4,6 +4,7 @@
     "pages/EmptyBoxStorage",
     "pages/OrderMaterialsStorage",
     "pages/ProcessMaterialKit",
-    "pages/Menu"
+    "pages/Menu",
+    "pages/LittleMaterialsStorage"
   ]
 }