WonderfulDemo/entry/src/main/ets/view/processview/MaterialCollectView.ets

import CommonConstants from '../../common/constants/CommonConstants'
import MaterialInfo from '../../model/MaterialInfo'
import HashMap from '@ohos.util.HashMap'
import ProcessData from '../../model/ProcessData'

@Component
export struct MaterialCollectView {
  mainMaterial: string
  @Link process: ProcessData
  // 查询到工序需要的物料
  @State materialArray: MaterialInfo[] = CommonConstants.MATERIAL_ARRAY
  // 采集到的物料
  @State collectMaterials: MaterialInfo[] = []
  @State collectCode: string = ''
  // 方便查询已采集的物料信息
  private collectMap:HashMap<string, MaterialInfo> = new HashMap()

  scroller: Scroller = new Scroller()

  aboutToAppear() {
  //   todo 查询需要的物料信息
    //遍历已采集的物料
    for (const material of this.materialArray) {
      if (material.materialNo && material.materialNo.length > 0) {
        if (this.collectMap.hasKey(material.materialNo)) {
          this.collectMap.get(material.materialNo).collectNum++
        } else {
          material.collectNum = 0
          this.collectMap.set(material.materialNo, material)
        }
      } else if (material.batchCode && material.batchCode.length > 0) {
        if (this.collectMap.hasKey(material.batchCode)) {
          this.collectMap.get(material.batchCode).collectNum++
        } else {
          material.collectNum = 0
          this.collectMap.set(material.batchCode, material)
        }
      }
    }
  }

  build() {
    Column() {
      // 扫描物料栏
      Row() {
        Row() {
          Row() {
            Image($r('app.media.qr_code'))
              .height('31%')
          }
          .width('8%')
          .justifyContent(FlexAlign.End)

          TextInput({ placeholder: '请扫描物料编码', text: this.collectCode })
            .placeholderColor($r('app.color.text_input_placeholder_font_color'))
            .placeholderFont({ size: $r('app.float.robot_set_font_size'), weight: FontWeight.Medium })
            .fontSize($r('app.float.robot_set_font_size'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.general_font_color'))
            .textAlign(TextAlign.Start)
            .height('100%')
            .layoutWeight(1)
            .maxLength(100)
            .borderRadius($r('app.float.robot_set_radius'))
            .backgroundColor($r('app.color.general_font_white_color'))
            .onChange((value: string) => {
              this.collectCode = value
            })
            .onSubmit(() => {
              // 遍历需要的物料
              for (const needMaterial of this.materialArray) {
                if (needMaterial.materialNo && needMaterial.materialNo.length > 0 && this.collectCode === needMaterial.materialNo) {
                  if (this.collectMap.hasKey(needMaterial.materialNo)) {
                    this.collectMap.get(needMaterial.materialNo).collectNum++
                  } else {
                    needMaterial.collectNum = 1
                    let collect: MaterialInfo = new MaterialInfo()
                    Object.assign(collect, needMaterial)
                    this.collectMap.set(needMaterial.materialNo, collect)
                    this.collectMaterials.push(collect)
                    console.log('testTag', '---collect-------' +JSON.stringify(collect))
                  }
                  break
                } else if (needMaterial.batchCode && needMaterial.batchCode.length > 0 && this.collectCode === needMaterial.batchCode) {
                  if (this.collectMap.hasKey(needMaterial.batchCode)) {
                    this.collectMap.get(needMaterial.batchCode).collectNum++
                  } else {
                    needMaterial.collectNum = 1
                    let collect: MaterialInfo = new MaterialInfo()
                    Object.assign(collect, needMaterial)
                    this.collectMap.set(needMaterial.batchCode, collect)
                    this.collectMaterials.push(collect)
                  }
                  break
                }
              }
              this.collectCode = ''
            })
        }
        .borderRadius($r('app.float.robot_set_radius'))
        .backgroundColor($r('app.color.general_font_white_color'))
        .width('39%')
        .height('76%')
      }
      .width('100%')
      .height('13%')
      .justifyContent(FlexAlign.Start)

      if (this.collectMaterials && this.collectMaterials.length > 0) {
        Grid() {
          ForEach(this.collectMaterials, (material: MaterialInfo) => {
            GridItem() {
              Row() {
                Column() {
                  Text(material.materialName)
                    .fontSize($r('app.float.process_card_middle_font_size'))
                    .fontColor($r('app.color.general_font_color'))
                    .opacity($r('app.float.general_font_opacity'))
                    .fontWeight(FontWeight.Medium)

                  //   todo 不知道是啥
                  Text('100*200')
                    .fontSize($r('app.float.process_card_small_font_size'))
                    .fontColor($r('app.color.general_font_color'))
                    .opacity($r('app.float.process_step_font_opacity'))
                    .fontWeight(FontWeight.Regular)
                  Text('需求：' + material.needNum)
                    .fontSize($r('app.float.process_card_small_font_size'))
                    .fontColor($r('app.color.general_font_color'))
                    .opacity($r('app.float.process_step_font_opacity'))
                    .fontWeight(FontWeight.Regular)
                }
                .justifyContent(FlexAlign.Center)
                .alignItems(HorizontalAlign.Start)
                .width('70%')
                .height('100%')
                .padding({left: '4%'})
                Column() {
                  if (material.needNum - material.collectNum > 0) {
                    Column() {
                      Text((material.needNum - material.collectNum).toString())
                        .fontSize($r('app.float.process_card_large_font_size'))
                        .fontColor($r('app.color.general_font_color'))
                        .opacity($r('app.float.general_font_opacity'))
                        .fontWeight(FontWeight.Bold)
                      Text('还需采集')
                        .fontSize($r('app.float.process_card_small_font_size'))
                        .fontColor($r('app.color.general_font_color'))
                        .opacity($r('app.float.process_step_font_opacity'))
                        .fontWeight(FontWeight.Regular)
                      Row(){}
                      .height('5%')
                    }
                    .justifyContent(FlexAlign.End)
                    .alignItems(HorizontalAlign.End)
                    .width('100%')
                    .height('71%')
                    .padding({right: '12%'})
                  }  else {
                    Column() {
                      Image($r('app.media.collect_completed'))
                        .width('182px')
                        .height('182px')
                    }
                    .alignItems(HorizontalAlign.End)
                    .justifyContent(FlexAlign.Start)
                    .width('100%')
                    .height('71%')
                  }
                  Row() {
                    Image($r('app.media.subscript'))
                      .height($r('app.float.card_subscript_size'))
                      .width($r('app.float.card_subscript_size'))
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.End)
                  .alignItems(VerticalAlign.Center)
                  .layoutWeight(1)
                  .padding({right: '12%'})
                }
                .layoutWeight(1)
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .alignItems(HorizontalAlign.Center)
              }
              .width('97%')
              .height('26%')
              .backgroundColor($r('app.color.general_font_white_color'))
              .borderRadius($r('app.float.general_border_radius'))
              .justifyContent(FlexAlign.Center)
            }
          })
        }
        .columnsTemplate('1fr 1fr')
        .rowsGap(10)
        .width('100%')
        .layoutWeight(1)
      } else {
        Column() {
          Image($r('app.media.scan_qr'))
            .width($r('app.float.material_collect_image_size'))
            .height($r('app.float.material_collect_image_size'))
          Text('扫描物料编码添加物料')
            .fontSize($r('app.float.card_info_font_size'))
            .fontColor($r('app.color.general_font_color'))
            .fontWeight(FontWeight.Medium)
            .opacity($r('app.float.material_collect_font_opacity'))
        }
        .width('80%')
        .height('60%')
        .justifyContent(FlexAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
    .margin({left: '2%'})
  }
}