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

/*
 * 零星物料出库
 * */
import {
  ProcessFlow,
  BoxGrid,
  MaterialListComponent,
  OrderListComponent,
  MaterialBoxGrid
} 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'
import WmsRequest from '../common/util/request/WmsRequest'
import RequestParamModel from '../viewmodel/wms/RequestParamModel'
import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo'
import WorkOrderMaterialInfo from "../viewmodel/wms/WorkOrderMaterialInfo"

@Entry
@Component
struct LittleMaterialsOutBound {
  @State materialNum: number=0
  @State currentStep: number = 1;
  @State nextStepButtonClick :number = 1
  @State preStepButtonClick :number = 1
  @State outBoundButtonClick :number = 1
  @State materialData: WorkOrderMaterialInfo[] = [];
  @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%' }
  ]
  @State selectWorkOrder: WorkOrderInfo = {}
  @State workOrderArray: WorkOrderInfo[] = []
  loadWorkOrders = async () => {
    this.workOrderArray = await WmsRequest.post('/api/v1/plan/workOrder/list', {
      queryComplete: 0,
    } as RequestParamModel) as WorkOrderInfo[]
  }

  aboutToAppear(): void {
    this.loadWorkOrders();
  }

  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() {
                    OrderListComponent({
                      workOrders: this.workOrderArray,
                      selectWorkOrder: this.selectWorkOrder,
                      materialData:this.materialData}).height('100%')
                  }.margin({ top: '4%' }).height('70%')
                }.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() {
                  MaterialBoxGrid({ materialBoxes: this.materialBoxes })
                    .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'))
              .scale({ x: this.outBoundButtonClick, y: this.outBoundButtonClick })
              .animation({
                duration: 200,
                curve: Curve.Linear  // 弹性曲线更生动
              })
              //.enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.outBoundButtonClick = 0.9; // 点击时缩小
                setTimeout(() => {
                  this.outBoundButtonClick = 1; // 0.2秒后恢复
                }, 200);
                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'))
              .scale({ x: this.nextStepButtonClick, y: this.nextStepButtonClick })
              .animation({
                duration: 200,
                curve: Curve.Linear  // 弹性曲线更生动
              })
              //.enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.nextStepButtonClick = 0.9; // 点击时缩小
                setTimeout(() => {
                  this.nextStepButtonClick = 1; // 0.2秒后恢复
                }, 200);
                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%')
        }
        else if (this.currentStep === 2) {
          Column() {
            Row() {
              Column() {
                InBoundView({ materialNum: this.materialNum })
              }.width('29%').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() {
                  Column() {
                    Text("扫码出库")
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_15_2'))
                  }.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({
                    ScanMaterialList:this.orders,
                    materialNum:this.materialNum
                  }).width('95%')
                }.width('100%').height('78%').justifyContent(FlexAlign.Center)
                //Column(){
                  Button({type:ButtonType.Normal}) {
                    Text("确认出库")
                      .fontSize($r('app.float.fontSize_12'))
                      .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                  }
                  .width('35%')
                  .height('7%')
                  .backgroundColor($r('app.color.20FFFFFF'))
                  .borderRadius($r('app.float.virtualSize_6_4'))
                  .margin({top:'2%',bottom:'1%'})
                  .scale({ x: this.outBoundButtonClick, y: this.outBoundButtonClick })
                  .animation({
                    duration: 200,
                    curve: Curve.Linear  // 弹性曲线更生动
                  })
                  // .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
                  .onClick(() => {
                    this.outBoundButtonClick = 0.9; // 点击时缩小
                    setTimeout(() => {
                      this.outBoundButtonClick = 1; // 0.2秒后恢复
                    }, 200);
                    this.currentStep = 1;
                  })
                //}.height('10%').justifyContent(FlexAlign.Center)
              }.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'))
              .margin({left:'22%'})
              .borderRadius($r('app.float.virtualSize_6_4'))
              .scale({ x: this.preStepButtonClick, y: this.preStepButtonClick })
              .animation({
                duration: 200,
                curve: Curve.Linear  // 弹性曲线更生动
              })
              // .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
              .onClick(() => {
                this.preStepButtonClick = 0.9; // 点击时缩小
                setTimeout(() => {
                  this.preStepButtonClick = 1; // 0.2秒后恢复
                }, 200);
                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%')
  }
}