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

/*
 * 零星物料出库
 * */
import {
  ProcessFlow,
  CommonConfirmDialog,
  RemindDialog
} from '../component/OrderMaterialsStorageView'
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 MaterialBoxInfo from '../viewmodel/wms/MaterialBoxInfo';
import HashMap from '@ohos.util.HashMap';
import CommonConstants from '../common/constants/CommonConstants';
import DictInfo from '../viewmodel/DictInfo';
import RobotErrorHandleRequest from '../common/util/request/RobotErrorHandleRequest';
import { ConfirmDialogParams, RgvInfo }  from '../viewmodel/wms/rgv/RobotsParam'
import promptAction from '@ohos.promptAction';
import VehicleInfo from '../viewmodel/wms/VehicleInfo';
import MaterialInfo from '../viewmodel/wms/MaterialInfo';

@Entry
@Component
struct LittleMaterialsOutBound {
  // 输入的物料名称
  @State inputValue: string = ''
  // 查询到的物料库存列表
  @State materialArray: MaterialBoxInfo[] = []
  // 选中的库存的物料编码
  @State selectMaterialCode: string = ''
  // 物料关联的库存（料箱）信息——选择料箱使用
  @State materialBoxInfos: MaterialBoxInfo[] = []
  // 选中的料箱
  @State selectVehicleIndex: number = -1
  // 料箱类型数据字典
  vehicleTypeDictType: string = 'vehicle_type'
  vehicleTypeDictMap: HashMap<string, string> = new HashMap<string, string>()

  // 扫描或手动输入的物料编码
  @State scanCode: string = ''
  // 出入口料口中的物料信息
  @State materialNum: number = 0
  // 出库料箱中的库存物料信息
  outMaterialBoxInfos: MaterialInfo[] = []
  // 扫码待出库的物料
  @State scanMaterialList: MaterialInfo[] = []
  //扫码后自动滚动第一行
  @State scanCodeIndex: number = -1
  materialScrollerController: Scroller = new Scroller()

  @State currentStep: number = 1;
  @State nextStepButtonClick: number = 1
  @State preStepButtonClick: number = 1
  @State outBoundButtonClick :number = 1
  @State confirmOutboundButtonClick :number = 1

  // 根据物料编码【模糊】查询库存
  getStoreListFunc = async () => {
    let res: MaterialBoxInfo[] = await WmsRequest.post('/api/v1/stock/mergeList', {
      houseType: '1',
      materialNo: this.inputValue
    } as RequestParamModel)
    this.inputValue = ''
    if (res && res.length > 0) {
      this.materialArray = res
    }
  }
  //请求物料位置
  queryMaterialPositionFunc = async () => {
    this.materialBoxInfos = await WmsRequest.post('/api/v1/stock/groupList', {
      materialNo: this.selectMaterialCode
    } as RequestParamModel)
    if (this.materialBoxInfos) {
      for (const element of this.materialBoxInfos) {
        if (element.coordinate && element.coordinate.length > 0 && element.coordinate.indexOf('-') > 0) {
          let coors = element.coordinate.split('-');
          element.x = parseInt(coors[0])
          element.y = parseInt(coors[1])
        }
      }
    }
  }
  // 扫码物料编码方法
  scanMaterialCodeFunc = async (itemCode: string) => {
    this.scanCode = ''
    let res: MaterialInfo = await WmsRequest.post('/api/v1/process/circulation/material', {
      label: itemCode //'#gys022#sc022#100#20220929#31'
    } as RequestParamModel)

    // 物料默认都新增在数组头部
    this.scanMaterialList.unshift(res)
    this.scanCodeIndex = 0
    this.materialScrollerController.scrollToIndex(this.scanCodeIndex)
    // 出库料箱中的库存物料 需要做出库操作
    let toChangeArray: MaterialInfo[] = [...this.outMaterialBoxInfos]
    for (let i = 0; i < toChangeArray.length; i++) {
      let box = toChangeArray[i]
      if (res.materialCode == box.materialCode) {
        let value = box.num! - res.num!
        box.num = value >= 0 ? value : 0
        continue
      }
    }
    this.outMaterialBoxInfos = toChangeArray.filter((m) => {
      return m.num! > 0
    })
    // for (let i = this.outMaterialBoxInfos.length - 1; i >= 0; i--) {
    //   if (this.outMaterialBoxInfos[i].materialCode! === res.materialCode!) {
    //     if (this.outMaterialBoxInfos[i].num! > res.num!) {
    //       this.outMaterialBoxInfos[i].num = this.outMaterialBoxInfos[i].num! - res.num!
    //       break
    //     } else if (this.outMaterialBoxInfos[i].num! === res.num!) {
    //       this.outMaterialBoxInfos.splice(i, 1)
    //       break
    //     } else {
    //       res.num = res.num! - this.outMaterialBoxInfos[i].num!
    //       this.outMaterialBoxInfos.splice(i, 1);
    //     }
    //   }
    // }
    this.materialNum = this.outMaterialBoxInfos.length
  }
  // 抽屉称重（根据重量判断抽屉是否有料箱）
  @StorageLink('materialBoxWeight') materialBoxWeight: number = 0
  // 抽屉状态
  @StorageLink('drawerPositionStatus') drawerPositionStatus: number = 1
  @State reminds: string = '1'
  commonDialogController: CustomDialogController | null = null;

  remindController: CustomDialogController = new CustomDialogController({
    builder: RemindDialog({
      remind: this.reminds,}
    ),
    customStyle: true,
    maskColor: 'rgba(0,0,0,0.6)',
    //autoCancel:false
  })

  private showConfirmDialog(params: ConfirmDialogParams) {
    if (this.commonDialogController) {
      this.commonDialogController.close()
    }
    this.commonDialogController = new CustomDialogController({
      builder: CommonConfirmDialog({
        title: params.title || '提示',
        message: params.message,
        confirmText: params.confirmText || '确定',
        cancelText: params.cancelText || '取消',
        onConfirm: params.onConfirm
      }),
      cancel: () => console.log('用户取消操作'),
      customStyle: true,
      autoCancel: false,
      maskColor: 'rgba(0,0,0,0.6)'
    });
    this.commonDialogController.open();
  }

  // 判断小车状态
  async queryRgvInfo(): Promise<boolean> {
    let res: RgvInfo = await RobotErrorHandleRequest.get('/api/v1/wcs/rgv/rgv1', {}) as RgvInfo;
    if (res) {
      if (res.status != '0' || res.x != res.rx || res.y != res.ry) {
        return false;
      }
      return true; // 如果条件不满足，返回 true
    }
    return false; // 如果 res 为 null 或 undefined，返回 false
  }

  // 料箱出库的方法
  callBoxOutboundFunc = async () => {
    if (this.selectVehicleIndex < 0) {
      this.reminds = '请先选择料箱'
      this.remindController.open()
      setTimeout(() => {
        this.remindController.close()
      }, 2000);
      return
    }
    //查询小车的状态
    const rgvStatusNormal = await this.queryRgvInfo()
    if(!rgvStatusNormal) {
      this.reminds = '小车状态异常或位置错误，请检查后重试'
      this.remindController.open()
      setTimeout(() => {
        this.remindController.close()
      }, 2000);
      return
    }
    console.info('hhtest', this.drawerPositionStatus+'as')
    if(this.drawerPositionStatus == 0) {
      this.reminds = '抽屉未缩回，请检查后重试'
      this.remindController.open()
      setTimeout(() => {
        this.remindController.close()
      }, 2000);
      return
    }

    if(this.materialBoxWeight > 0) {
      this.reminds = '抽屉已有料箱，请检查后重试'
      this.remindController.open()
      setTimeout(() => {
        this.remindController.close()
      }, 2000);
      return
    }
    // 弹窗确认出库
    // this.showConfirmDialog({
    //   title: '料箱出库',
    //   message: `确定要空箱出库吗？`,
    //   onConfirm: ()=> {
    //
    //   }
    // });
    let res: VehicleInfo = await WmsRequest.post('/api/v1/wmsOrder/outBox', {
      stanCode: CommonConstants.STATION_CODE,
      vehicleNo: this.materialBoxInfos[this.selectVehicleIndex].vehicleCode!,
      houseNo: this.materialBoxInfos[this.selectVehicleIndex].houseNo!
    } as RequestParamModel)

    if (res && res.list) {
      this.outMaterialBoxInfos = res.list
      this.materialNum = res.list.length
    }

    promptAction.showToast({
      message: '箱子正在运行中....',
      duration: 1800,
      bottom: '50%'
    })
  }

  async aboutToAppear() {
    if (!CommonConstants.DICT_DATA || CommonConstants.DICT_DATA.length <= 0) {
      let res: DictInfo[] = await WmsRequest.post('/api/v1/sys/dictData/all',)
      if (res && res.length > 0) {
        for (const dict of res) {
          CommonConstants.DICT_DATA.set(dict.dictCode, dict.list)
          if (this.vehicleTypeDictType === dict.dictCode) {
            for (const element of dict?.list!) {
              this.vehicleTypeDictMap.set(element.dictValue, element.dictLabel);
            }
          }
        }
      }
    } else {
      let dictList = CommonConstants.DICT_DATA.get(this.vehicleTypeDictType);
      for (const element of dictList) {
        this.vehicleTypeDictMap.set(element.dictValue, element.dictLabel);
      }
    }
  }

  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_56'))
            .width($r('app.float.virtualSize_56'))
            .fillColor($r('app.color.FFFFFF'))
          Text('零星物料出库')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .width('94.8%')
        .height('5.2%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Start)
        .onClick(()=> {
          router.back()
        })
        // 当前零星物料出库的步骤和操作栏
        Row() {
          Row() {
            ProcessFlow({
              currentStep: this.currentStep,
              firstStepTitle: '选择物料',
              secondStepTitle: '零星出库',
              thirdStepTitle: '',
            })
          }
          .height('80%')
          .width('11%')
          Row().width('21.5%')
          NavigationBar()
            .height('80%')
            .width('23%')
        }
        .width('100%')
        .height('13%')
        .justifyContent(FlexAlign.End)
        .alignItems(VerticalAlign.Bottom)
        if (this.currentStep === 1) {
          Row() {
            // 查询物料
            Column() {
              Row() {
                Text('查询物料')
                  .fontSize($r('app.float.fontSize_30'))
                  .fontColor($r('app.color.FFFFFF'))
                  .fontWeight(FontWeight.Medium)
              }
              .height('10%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              .onClick(()=>{
                this.getStoreListFunc()
              })
              Row() {
                TextInput({ text: this.inputValue, placeholder: '录入物料名称' })
                  .type(InputType.Normal)
                  .width('84%')
                  .placeholderFont({ size: $r('app.float.fontSize_16') })
                  .placeholderColor($r('app.color.30FFFFFF'))
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor($r('app.color.FFFFFF'))
                  .onSubmit(() => {
                    this.getStoreListFunc()
                  })
                  .onChange((value: string) => {
                    this.inputValue = value
                  })
                Row() {
                  Image($r('app.media.wms_search'))
                    .width($r('app.float.virtualSize_24'))
                    .height($r('app.float.virtualSize_24'))
                    .fillColor($r('app.color.0A84FF'))
                }
                .width('16%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .borderRadius($r('app.float.virtualSize_16'))
                .backgroundColor($r('app.color.20FFFFFF'))
                .onClick(()=>{
                  this.getStoreListFunc()
                })
              }
              .height('7.3%')
              .width('70.4%')
              .borderRadius($r('app.float.virtualSize_16'))
              .backgroundColor($r('app.color.000000'))
              Row().height('2.6%')
              List({space: 8}) {
                ForEach(this.materialArray, (item: MaterialBoxInfo)=>{
                  ListItem() {
                    Column({space: 1}) {
                      Row() {
                        Text(item.materialName! + '-' + item.materialNo)
                          .fontSize($r('app.float.fontSize_24'))
                          .fontWeight(FontWeight.Medium)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                      }
                      .height('45%')
                      .width('91%')
                      .alignItems(VerticalAlign.Bottom)

                      Column() {
                        Text('型号：' + item.spec!)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)

                        Text('库存数量：' + item.num! + item.unit!)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                      }
                      .height('38%')
                      .width('91%')
                      .justifyContent(FlexAlign.Center)
                      .alignItems(HorizontalAlign.Start)
                    }
                    .height('13%')
                    .width('100%')
                    .borderRadius($r('app.float.virtualSize_16'))
                    .backgroundColor(this.selectMaterialCode === item.materialNo! ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
                    .borderWidth(1)
                    .borderColor(this.selectMaterialCode === item.materialNo! ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
                    .onClick(()=>{
                      this.selectMaterialCode = item.materialNo!
                      if (this.selectMaterialCode && this.selectMaterialCode.length > 0) {
                        this.queryMaterialPositionFunc()
                      }
                    })
                  }
                })
              }
              .width('92.6%')
              .height('77.5%')
              .alignListItem(ListItemAlign.Center)
            }
            .height('100%')
            .width('29.6%')
            .borderRadius($r('app.float.virtualSize_16'))
            .justifyContent(FlexAlign.Start)
            .backgroundColor($r('app.color.10FFFFFF'))
            Image($r('app.media.wms_arrow_right'))
              .height($r('app.float.virtualSize_48'))
              .width($r('app.float.virtualSize_48'))
            // 选择料箱
            Column() {
              Row() {
                Text('选择料箱')
                  .fontSize($r('app.float.fontSize_30'))
                  .fontColor($r('app.color.FFFFFF'))
                  .fontWeight(FontWeight.Medium)
              }
              .height('10%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              // 动态排列容器
              Scroll() {
                Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
                  ForEach(this.materialBoxInfos, (item: MaterialBoxInfo, index: number) => {
                    Column({ space: 5 }) {
                      Row() {
                        Text(item.materials?.[0]?.materialName! + '-' + item.materials?.[0]?.materialNo!)
                          .fontSize($r('app.float.fontSize_24'))
                          .fontWeight(FontWeight.Medium)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                      }
                      .height('28.5%')
                      .width('87.4%')
                      .alignItems(VerticalAlign.Bottom)

                      Column() {
                        Text('料箱编号：' + item.vehicleCode!)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                        Text('料箱类型：' + (this.vehicleTypeDictMap.get(item.vehicleCategory!) ? this.vehicleTypeDictMap.get(item.vehicleCategory!) : item.vehicleCategory!))
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                        Text('所属订单：')
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                        Text('数量：' + item.materials?.[0]?.num! + item.materials?.[0].unit!)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                        Text('位置：X-' + item.x! + ' Y-' + item.y!)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontWeight(FontWeight.Lighter)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                      }
                      .height('48.3%')
                      .width('87.4%')
                      .justifyContent(FlexAlign.Center)
                      .alignItems(HorizontalAlign.Start)
                    }
                    .width('32.8%')
                    .height('23%')
                    .borderRadius($r('app.float.virtualSize_16'))
                    .backgroundColor(this.selectVehicleIndex === index ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
                    .borderWidth(1)
                    .borderColor(this.selectVehicleIndex === index ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
                    .margin({ top: index > 2 ? '1%' : '0%', left: (index % 3) === 0 ? '0%' : '0.8%' })
                    .onClick(()=>{
                      this.selectVehicleIndex = index
                    })
                  })
                }
                .width('100%')
              }
              .scrollable(ScrollDirection.Vertical) // 垂直滚动
              .scrollBar(BarState.Auto)
              .width('96.6%')
              .height('87.4%')
              .align(Alignment.Top)
            }
            .height('100%')
            .width('64.8%')
            .borderRadius($r('app.float.virtualSize_16'))
            .justifyContent(FlexAlign.Center)
            .backgroundColor($r('app.color.10FFFFFF'))
          }
          .height('71%')
          .width('94.8%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        else if (this.currentStep === 2) {
          Row() {
            Column() {
              InBoundView({
                materialNum: this.materialNum,
                boxMaterials:this.scanMaterialList
              });
            }
            .height('100%')
            .width('29.6%')
            .borderRadius($r('app.float.virtualSize_16'))
            .justifyContent(FlexAlign.Start)
            .backgroundColor($r('app.color.10FFFFFF'))
            Image($r('app.media.wms_arrow_right'))
              .height($r('app.float.virtualSize_48'))
              .width($r('app.float.virtualSize_48'))
            Column() {
              // 扫码区
              Row() {
                Row() {
                  Text('扫码出库')
                    .fontSize($r('app.float.fontSize_30'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                  .width('48.3%')
                  .height('66%')
                Row() {
                  Row().width('33.3%')
                  Row() {
                    Row().width('3.4%')
                    // 左侧二维码图标
                    Image($r('app.media.general_qr_code'))
                      .width($r('app.float.virtualSize_24'))
                      .height($r('app.float.virtualSize_24'))
                      .fillColor($r('app.color.FFFFFF'))
                    // 扫码输入框
                    TextInput({ placeholder: '请扫描物料编码', text: this.scanCode })
                      .type(InputType.Normal)
                      .placeholderFont({ size: $r('app.float.fontSize_16')})
                      .placeholderColor($r('app.color.30FFFFFF'))
                      .fontSize($r('app.float.fontSize_16'))
                      .fontColor($r('app.color.FFFFFF'))
                      .enableKeyboardOnFocus(false)
                      .onChange((value: string) => {
                        this.scanCode = value
                      })
                      .onSubmit(async () => {
                        this.scanMaterialCodeFunc(this.scanCode)
                      })
                  }
                  .height('48.7%')
                  .layoutWeight(1)
                  .borderRadius($r('app.float.virtualSize_16'))
                  .backgroundColor($r('app.color.000000'))
                }
                  .width('48.3%')
                  .height('100%')
                  .alignItems(VerticalAlign.Center)
                  .justifyContent(FlexAlign.End)
              }
              .height('15%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              .alignItems(VerticalAlign.Top)
              // 扫码物料列表
              List({ scroller: this.materialScrollerController }) {
                ForEach(this.scanMaterialList, (item: MaterialInfo, index: number) => {
                  ListItem() {
                    Row() {
                      Column({space: 1}) {
                        Text(item.materialName! + '-' + item.materialCode!)
                          .fontSize($r('app.float.fontSize_24'))
                          .fontWeight(FontWeight.Medium)
                          .fontColor($r('app.color.FFFFFF'))
                          .maxLines(1)
                        Column() {
                          Text('型号：' + item.spec!)
                            .fontSize($r('app.float.fontSize_16'))
                            .fontWeight(FontWeight.Lighter)
                            .fontColor($r('app.color.FFFFFF'))
                            .maxLines(1)
                          Text('序列号：' + item.batchCode!)
                            .fontSize($r('app.float.fontSize_16'))
                            .fontWeight(FontWeight.Lighter)
                            .fontColor($r('app.color.FFFFFF'))
                            .maxLines(1)
                          Text('所属订单：-')
                            .fontSize($r('app.float.fontSize_16'))
                            .fontWeight(FontWeight.Lighter)
                            .fontColor($r('app.color.FFFFFF'))
                            .maxLines(1)
                          Text('数量：' + item.num! + item.unit!)
                            .fontSize($r('app.float.fontSize_16'))
                            .fontWeight(FontWeight.Lighter)
                            .fontColor($r('app.color.FFFFFF'))
                            .maxLines(1)
                        }
                        .height('52.8%')
                        .width('100%')
                        .justifyContent(FlexAlign.SpaceBetween)
                        .alignItems(HorizontalAlign.Start)
                      }
                      .height('100%')
                      .width('48%')
                      .alignItems(HorizontalAlign.Start)
                      .justifyContent(FlexAlign.Center)

                      Row() {
                        Image($r('app.media.material_delete'))
                          .height($r('app.float.virtualSize_48'))
                          .width($r('app.float.virtualSize_48'))
                          .fillColor($r('app.color.FF453A'))
                          .onClick(()=>{
                            // 出库料箱中的物料需要加回去
                            let toChangeArray: MaterialInfo[] = [...this.outMaterialBoxInfos]
                            let hasFlag: boolean = false
                            // 出库料箱中还有，则把数量加回去
                            for (let i = 0; i < toChangeArray.length; i++) {
                              let box = toChangeArray[i]
                              if (item.materialCode == box.materialCode) {
                                let value = box.num! + item.num!
                                box.num = value >= 0 ? value : 0
                                hasFlag = true
                                continue
                              }
                            }
                            // 出库料箱中没有，则把这一项加进去
                            if (!hasFlag) {
                              this.outMaterialBoxInfos.push(item)
                            }
                            // 扫码待出库的物料删除这一项
                            this.scanMaterialList.splice(index, 1)
                          })
                        Row().width('2%')
                      }
                      .height('100%')
                      .width('50%')
                      .alignItems(VerticalAlign.Center)
                      .justifyContent(FlexAlign.End)
                    }
                    .height('26%')
                    .width('100%')
                    .justifyContent(FlexAlign.Center)
                    .borderRadius($r('app.float.virtualSize_16'))
                    .backgroundColor($r('app.color.10FFFFFF'))
                  }
                })
              }
              .width('96.6%')
              .height('72.5%')
              .alignListItem(ListItemAlign.Center)
              // 确认出库按钮
              Row() {
                Button('确认出库')
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor($r('app.color.0A84FF'))
                  .width('42.4%')
                  .height('56.3%')
                  .backgroundColor($r('app.color.20FFFFFF'))
                  .opacity(this.scanMaterialList.length > 0 ? 1 : 0.3)
                  .scale({ x: this.confirmOutboundButtonClick, y: this.confirmOutboundButtonClick })
                  .animation({
                    duration: 200,
                    curve: Curve.Linear  // 弹性曲线更生动
                  })
                  .onClick(() => {
                    if (this.scanMaterialList.length <= 0) {
                      return
                    }
                    this.confirmOutboundButtonClick = 0.9; // 点击时缩小
                    setTimeout(() => {
                      this.confirmOutboundButtonClick = 1; // 0.2秒后恢复
                    }, 200);
                    this.scanMaterialList = []
                  })
              }
              .width('100%')
              .height('12.5%')
              .justifyContent(FlexAlign.Center)
            }
            .height('100%')
            .width('64.8%')
            .borderRadius($r('app.float.virtualSize_16'))
            .justifyContent(FlexAlign.Start)
            .backgroundColor($r('app.color.10FFFFFF'))
          }
          .height('71%')
          .width('94.8%')
          .justifyContent(FlexAlign.SpaceBetween)
        }

        // 步骤切换按钮
        Row() {
          Row () {
            Text('第一步')
              .fontSize($r('app.float.fontSize_24'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('67%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .opacity(this.currentStep > 2 ? 1 : 0.3)
          .onClick(()=>{
            this.currentStep = 1
          })

          Row().width('1.2%')
          Row () {
            Text('上一步')
              .fontSize($r('app.float.fontSize_24'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('67%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .opacity(this.currentStep > 1 ? 1 : 0.3)
          .scale({ x: this.preStepButtonClick, y: this.preStepButtonClick })
          .animation({
            duration: 200,
            curve: Curve.Linear  // 弹性曲线更生动
          })
          .onClick(() => {
            this.preStepButtonClick = 0.9; // 点击时缩小
            setTimeout(() => {
              this.preStepButtonClick = 1; // 0.2秒后恢复
            }, 200);
            if (this.currentStep > 1) {
              this.currentStep -= 1
            }
          })

          Row().width('1.2%')
          Row () {
            Text('料箱出库')
              .fontSize($r('app.float.fontSize_24'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('67%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .opacity(this.currentStep === 1 ? 1 : 0.3)
          .scale({ x: this.outBoundButtonClick, y: this.outBoundButtonClick })
          .animation({
            duration: 200,
            curve: Curve.Linear  // 弹性曲线更生动
          })
          .onClick(() => {
            this.outBoundButtonClick = 0.9; // 点击时缩小
            setTimeout(() => {
              this.outBoundButtonClick = 1; // 0.2秒后恢复
            }, 200);
            this.callBoxOutboundFunc()
          })

          Row().width('1.2%')
          Row () {
            Text('下一步')
              .fontSize($r('app.float.fontSize_24'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('67%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .opacity(this.currentStep < 2 ? 1 : 0.3)
          .scale({ x: this.nextStepButtonClick, y: this.nextStepButtonClick })
          .animation({
            duration: 200,
            curve: Curve.Linear  // 弹性曲线更生动
          })
          .onClick(() => {
            this.nextStepButtonClick = 0.9; // 点击时缩小
            setTimeout(() => {
              this.nextStepButtonClick = 1; // 0.2秒后恢复
            }, 200);
            if (this.currentStep < 2) {
              this.currentStep += 1
            }
          })
        }
        .width('94.8%')
        .height('7.4%')
        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.000000'))
    }
    .height('100%')
  }
}