HJ_openHarmony_wms/entry/src/main/ets/view/wms/OperationMaterialKitTwoStep.ets

import OperationInfo from '../../viewmodel/wms/OperationInfo'
import WorkOrderInfo from '../../viewmodel/wms/WorkOrderInfo'
import OperationItem from '../../viewmodel/wms/OperationItem'
import WmsRequest from '../../common/util/request/WmsRequest'
import RequestParamModel from '../../viewmodel/wms/RequestParamModel'
import HouseStock from '../../viewmodel/wms/MaterialBoxInfo'
import CommonConstants from '../../common/constants/CommonConstants'
import DictInfo from '../../viewmodel/DictInfo'
import HashMap from '@ohos.util.HashMap'
import VehicleInfo from '../../viewmodel/wms/VehicleInfo'
import { InBoundView } from '../../component/InBoundView'
import HouseStockMaterial from '../../viewmodel/wms/MaterialInfo'
import promptAction from '@ohos.promptAction'
import OperationMaterial from '../../viewmodel/wms/OperationMaterial'

@Component
export struct OperationMaterialKitTwoStep {

  @Link workOrder: WorkOrderInfo
  @Link selectOperations: OperationInfo[]
  @Link operationItems: OperationItem[]
  @State ScanMaterialList:WorkOrderInfo[] = []
  selectOperationIds: string[] = []
  // 每个工序需要的物料编码分组
  operationItemCodes: HashMap<string, string[]> = new HashMap<string, string[]>()
  @State operationNames: string = ''
  // 选择已有料箱，出库料箱
  @State selectVehicleCode: string = ''
  @State houseStocks: HouseStock[] = []
  @State materialNum: number = 0
  // 空箱编码
  @State vehicleCode: string = ''
  @State materialTotal: number = 0
  // 扫描或手动输入的物料编码
  @State scanCode: string = ''
  // 物料全数组（本次扫描物料弹窗中展示）
  @State materialArray: HouseStockMaterial[] = []
  // 数量合并的物料数组（在拣选工作台展示）
  @State materialMergeArray: HouseStockMaterial[] = []
  //齐套料箱扫码后如果物料存在则自动滚动所在列
  @State scanCodeIndex: number = -1
  materialScrollerController: Scroller = new Scroller()
  // 出库料箱中的库存物料信息（暂时用不上）
  outHouseStocks: HouseStock[] = []

  houseStockDialogController: CustomDialogController = new CustomDialogController({
    builder: houseStockDialog({
      houseStocks: this.houseStocks,
      selectVehicleCode: this.selectVehicleCode,
      confirm: async () => {
        if (!this.selectVehicleCode || !this.houseStocks || this.houseStocks.length <= 0) {
          return
        }
        let houseNo = ''
        for (const element of this.houseStocks) {
          if (this.selectVehicleCode === element.vehicleCode) {
            houseNo = element.houseNo!
          }
        }
        let res: VehicleInfo = await WmsRequest.post("/api/v1/wmsOrder/outBox", {
          houseNo: houseNo,
          vehicleNo:this.selectVehicleCode,
        } as RequestParamModel)
        if (res && res.list) {
          this.outHouseStocks = res.list
        }
      }

    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
  })

  thisScanDialogController: CustomDialogController = new CustomDialogController({
    builder: thisScanDialog({
      materialMergeArray: this.materialMergeArray,
      materialArray: this.materialArray,
      confirm: async () => {}
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
  })

  // 齐套操作-扫描物料
  scanMaterialCode = async (itemCode: string) => {
    this.scanCode = ""
    let res: HouseStockMaterial = await WmsRequest.post("/api/v1/process/circulation/material", {
      label: itemCode //"#gys022#sc022#100#20220929#31"
    } as RequestParamModel)
    // 判断扫描完成后返回的物料码是否是当前需要齐套的物料
    let hasFlag: boolean = false
    for (const item of this.operationItems) {
      if (res.materialCode === item.itemCode) {
        hasFlag = true
        break
      }
    }
    if (!hasFlag) {
      promptAction.showToast({
        message: "不是当前工序中的物料",
        bottom: "50%",
        duration: 2000
      })
      return
    }
    // 判断数量合并的物料数组是否有，有则合并数量并滚动到当前位置，没有则数组头部新增
    hasFlag = false
    for (let i = 0; i < this.materialMergeArray.length; i++) {
      if (res.materialCode === this.materialMergeArray[i].materialCode) {
        hasFlag = true
        this.scanCodeIndex = i
        this.materialMergeArray[i].num = this.materialMergeArray[i].num! + res.num!
        this.materialMergeArray[i] = JSON.parse(JSON.stringify(this.materialMergeArray[i]))
        break;
      }
    }
    if (!hasFlag) {
      this.materialMergeArray.unshift(res)
      this.scanCodeIndex = 0
    }
    // 物料全数组默认都新增在数组头部
    this.materialArray.unshift(res)
    this.materialScrollerController.scrollToIndex(this.scanCodeIndex)
  }

  // 齐套绑定
  toCompleteKitting = async () => {
    // 接口只支持根据工序去绑定，需要先遍历
    let paramArray: RequestParamModel[] = []
    this.operationItemCodes.forEach((value: string[], key: string) => {
      let itemArray: HouseStockMaterial[] = []
      for (const material of this.materialMergeArray) {
        if (value.includes(material.materialCode)) {
          itemArray.push(material)
        }
      }
      // 当前工序有齐套物料绑定
      if (itemArray.length > 0) {
        let param: RequestParamModel = {
          operationId: key,
          workOrderCode: this.workOrder.workOrderCode!,
          vehicleCode: this.vehicleCode,
          processVehicleMaterialList: itemArray
        }
        paramArray.push(param)
      }
    })
    if (paramArray.length <= 0) {
      return
    }
    for (const param of paramArray) {
      await WmsRequest.post("api/v1/process/vehicleOperation/add", param)
    }
    // 重新刷新调取料箱下方物料已齐套数量
    let result: OperationMaterial[] = await WmsRequest.post('/api/v1/wms/operationMaterial/list', {
      //查询工序需求的物料
      operationIds: this.selectOperationIds,
    } as RequestParamModel) as OperationMaterial[]
    this.operationItems = []
    if (result && result.length > 0) {
      for (const element of result) {
        this.operationItems = this.operationItems.concat(element.itemList!);
      }
    }
  }

  async aboutToAppear() {
    if (this.selectOperations) {
      this.selectOperations.sort((a: OperationInfo, b: OperationInfo) => {
        if (a.operationSort === null) return 1;
        if (b.operationSort === null) return -1;
        return a.operationSort! - b.operationSort!;
      })
      for (let i = 0; i < this.selectOperations.length; i++) {
        this.operationNames += this.selectOperations[i].operationName
        if (i < this.selectOperations.length - 1) {
          this.operationNames += '、'
        }
      }
    }
    for (const operation of this.selectOperations) {
      this.selectOperationIds.push(operation.id!)
      for (const item of this.operationItems) {
        if (operation.id != item.operationId) {
          continue
        }
        let itemCodes: string[] = []
        if (this.operationItemCodes.hasKey(operation.id)) {
          itemCodes = this.operationItemCodes.get(operation.id)
        }
        itemCodes.push(item.itemCode!)
        this.operationItemCodes.set(operation.id, itemCodes)
      }
    }
  }

  build() {
    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)
        // 订单名称和选择的工序名称
        Column() {
          Text(this.workOrder?.orderName!)
            .fontSize($r('app.float.fontSize_12'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Lighter)
          Text(this.operationNames)
            .fontSize($r('app.float.fontSize_12'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Lighter)
        }
        .height('6.5%')
        // 工序需要采集的物料列表
        List({space: 5}) {
          ForEach(this.operationItems, (item: OperationItem, index: number) => {
            ListItem() {
              Column() {
                Row() {
                  Text(item.itemName! + '-' + item.itemCode)
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('38%')
                .width('91%')
                .alignItems(VerticalAlign.Bottom)

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

                  Text('已齐套/需求：' + item.kitNum! + '/' + item.num!)
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('48.3%')
                .width('91%')
                .justifyContent(FlexAlign.Center)
                .alignItems(HorizontalAlign.Start)
              }
              .height('15.4%')
              .width('92.6%')
              .borderRadius($r('app.float.virtualSize_16'))
              .justifyContent(FlexAlign.Start)
              .backgroundColor($r('app.color.20FFFFFF'))
              .opacity(item.storageNum! > 0 ? 1 : 0.3)
              .onClick(async ()=>{
                if (!item.storageNum || item.storageNum! <= 0) {
                  return
                }
                this.houseStocks = await WmsRequest.post('/api/v1/process/vehicleOperation/processVehicle', {
                  label: item.itemCode
                } as RequestParamModel) as HouseStock[]
                if (this.houseStocks) {
                  for (const element of this.houseStocks) {
                    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])
                    }
                  }
                }
                this.houseStockDialogController.open()
              })
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .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() {
        InBoundView({
          materialNum:this.materialNum,
          boxMaterials:this.ScanMaterialList
        })
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .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)

        Stack() {
            Image(this.vehicleCode && this.vehicleCode.length > 0 ? $r("app.media.wms_read_vehicle") : $r("app.media.wms_not_read_vehicle"))
              .width('100%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_16'))
              .objectFit(ImageFit.Fill)
            Column() {
              Row() {
                Text('物料：' + this.materialTotal)
                  .fontSize($r('app.float.fontSize_24'))
                  .fontColor($r('app.color.0A84FF'))
                  .fontWeight(FontWeight.Medium)
              }
              .width('29.2%')
              .height('30.8%')
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Center)
              .borderRadius($r('app.float.virtualSize_16'))
              .backgroundColor($r('app.color.60000000'))
              .margin({top: $r('app.float.virtualSize_12'), right: $r('app.float.virtualSize_12')})
              Blank()
              Row({space: 3}) {
                Image($r("app.media.wms_card_reader"))
                  .height($r('app.float.virtualSize_24'))
                  .width($r('app.float.virtualSize_24'))
                  .fillColor(this.vehicleCode && this.vehicleCode.length > 0 ? $r('app.color.30D158') : $r('app.color.FF453A'))
                Text(this.vehicleCode)
                  .fontSize($r('app.float.fontSize_30'))
                  .fontColor($r('app.color.30D158'))
                  .fontWeight(FontWeight.Medium)
              }
              .height('24%')
              .width('96.8%')
              .justifyContent(FlexAlign.Start)
              .padding({bottom: 3})
            }
            .width('100%')
            .height('100%')
            .alignItems(HorizontalAlign.End)
          }
        .height('23.8%')
        .width('92.6%')
        // 扫码框
        Row() {
          Row() {
            Row().width('3.4%')
            // 左侧二维码图标
            Image($r('app.media.material_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.scanMaterialCode(this.scanCode)
              })
          }
          .width('82%')
          .height('100%')
          .borderRadius($r('app.float.virtualSize_16'))
          .backgroundColor($r('app.color.000000'))
          .justifyContent(FlexAlign.Start)
        }
        .height('7.3%')
        .width('92.6%')
        .margin({top: $r('app.float.virtualSize_20'), bottom: $r('app.float.fontSize_12')})
        // 扫码得到的物料列表
        List({ scroller: this.materialScrollerController }) {
          ForEach(this.materialMergeArray, (item: HouseStockMaterial)=>{
            ListItem() {
              Column() {
                Row() {
                  Text(item.materialName! + '-' + item.materialCode!)
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Bold)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)

                  Text(item.num ? item.num.toString() : '0')
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Bold)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                Row() {
                  Text('型号：' + (item.spec ? item.spec : ''))
                    .fontSize($r('app.float.fontSize_12'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                  Text('本次添加')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.60FFFFFF'))
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)

                Divider().vertical(false)
                  .color($r('app.color.15FFFFFF'))
                  .width('100%')
              }
              .height('25%')
              .width('92.6%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
          })
        }
        .height('21.9%')
        .width('92.6%')
        .alignListItem(ListItemAlign.Center)

        Row() {
          Text('本次扫描物料')
            .fontSize($r('app.float.fontSize_24'))
            .fontColor($r('app.color.0A84FF'))
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
            .width('100%')
            .height('37.3%')
            .borderRadius($r('app.float.virtualSize_16'))
            .backgroundColor($r('app.color.20FFFFFF'))
        }
        .height('19.6%')
        .width('44.4%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.thisScanDialogController.open()
        })

        Text('齐套绑定')
          .fontSize($r('app.float.fontSize_24'))
          .fontColor($r('app.color.0A84FF'))
          .fontWeight(FontWeight.Medium)
          .textAlign(TextAlign.Center)
          .width('92.6%')
          .height('7.3%')
          .borderRadius($r('app.float.virtualSize_16'))
          .backgroundColor($r('app.color.20FFFFFF'))
          .onClick(async ()=>{
            this.toCompleteKitting()
          })
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

// 库存信息弹窗（选择料箱）
@CustomDialog
struct houseStockDialog {

  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
  controller?: CustomDialogController
  cancel?: () => void = () => {
  }
  confirm: () => void = () => {
  }
  vehicleTypeDictType: string = 'vehicle_type'
  vehicleTypeDictMap: HashMap<string, string> = new HashMap<string, string>()
  houseStocks: HouseStock[] = []
  scroller: Scroller = new Scroller()
  @Link selectVehicleCode: string

  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() {
    Column() {
      Row() {
        Text('选择料箱')
          .fontWeight(FontWeight.Medium)
          .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, justifyContent: FlexAlign.Start }) {
          ForEach(this.houseStocks, (item: HouseStock, 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!)
                  .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('25%')
            .borderRadius($r('app.float.virtualSize_16'))
            .backgroundColor(this.selectVehicleCode === item.vehicleCode ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
            .borderWidth(1)
            .borderColor(this.selectVehicleCode === item.vehicleCode ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
            .margin({ top: index > 2 ? '1%' : '0%', left: (index % 3) === 0 ? '0%' : '0.8%' })
            .onClick(()=>{
              this.selectVehicleCode = item.vehicleCode!
            })
          })
        }
      }
      .scrollable(ScrollDirection.Vertical) // 垂直滚动
      .scrollBar(BarState.Auto)
      .width('96.6%')
      .height('82.7%')

      Divider().vertical(false).color($r('app.color.15FFFFFF'))
        .width('100%')

      Row() {
        Row() {
          Text('关闭')
            .fontColor($r('app.color.60FFFFFF'))
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Medium)
        }
        .width('50%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          if (this.controller != undefined) {
            this.controller.close()
          }
        })
        Divider().vertical(true).color($r('app.color.15FFFFFF'))
          .height('100%')
        Row() {
          Text('料箱出库')
            .fontColor($r('app.color.007AFF'))
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Medium)
        }
        .width('50%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.confirm()
          if (this.controller != undefined) {
            this.controller.close()
          }
        })
      }
      .width('100%')
      .height('7.3%')
      .justifyContent(FlexAlign.Center)
    }
    .width('61.5%')
    .height('71%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor($r('app.color.2A2A2A'))
    .borderRadius($r('app.float.virtualSize_16'))
  }
}

// 本次扫描物料弹窗
@CustomDialog
struct thisScanDialog {

  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
  controller?: CustomDialogController
  cancel?: () => void = () => {
  }
  confirm: () => void = () => {
  }
  houseStocks: HouseStock[] = []
  scroller: Scroller = new Scroller()
  @Link materialArray: HouseStockMaterial[]
  @Link materialMergeArray: HouseStockMaterial[]
  @State tempArray: HouseStockMaterial[] = []
  tempMergeArray: HouseStockMaterial[] = []

  aboutToAppear(): void {
    if (this.materialArray && this.materialArray.length > 0) {
      this.tempArray = JSON.parse(JSON.stringify(this.materialArray));
    }
    if (this.materialMergeArray && this.materialMergeArray.length > 0) {
      this.tempMergeArray = JSON.parse(JSON.stringify(this.materialMergeArray));
    }
  }

  build() {
    Column() {
      Row() {
        Text('本次扫描物料')
          .fontWeight(FontWeight.Medium)
          .fontSize($r('app.float.fontSize_30'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Medium)
      }
      .height('10%')
      .width('100%')
      .justifyContent(FlexAlign.Center)

      List({space: 4, scroller: this.scroller}) {
        ForEach(this.tempArray, (item: HouseStockMaterial, 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!)
                    .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(()=>{
                    for (let i = 0; i < this.tempMergeArray.length; i++) {
                      if (this.tempMergeArray[i].materialCode! === this.tempArray[index].materialCode!) {
                        if (this.tempMergeArray[i].num! === this.tempArray[index].num!) {
                          this.tempMergeArray.splice(i, 1)
                          break;
                        } else {
                          this.tempMergeArray[i].num = this.tempMergeArray[i].num! - this.tempArray[index].num!;
                          break;
                        }
                      }
                    }
                    this.tempArray.splice(index, 1)
                  })
                Row().width('2%')
              }
              .height('100%')
              .width('50%')
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.End)
            }
            .height('22.7%')
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .borderRadius($r('app.float.virtualSize_16'))
            .backgroundColor($r('app.color.10FFFFFF'))
          }
        })
      }
      .alignListItem(ListItemAlign.Center)
      .width('96.6%')
      .height('82.7%')

      Divider().vertical(false).color($r('app.color.15FFFFFF'))
        .width('100%')

      Row() {
        Row() {
          Text('关闭')
            .fontColor($r('app.color.60FFFFFF'))
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Medium)
        }
        .width('50%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          if (this.controller != undefined) {
            this.controller.close()
          }
        })
        Divider().vertical(true).color($r('app.color.15FFFFFF'))
          .height('100%')
        Row() {
          Text('确认')
            .fontColor($r('app.color.007AFF'))
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Medium)
        }
        .width('50%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.materialArray = []
          this.materialMergeArray = []
          this.materialArray = this.tempArray
          this.materialMergeArray = this.tempMergeArray
          if (this.controller != undefined) {
            this.controller.close()
          }
        })
      }
      .width('100%')
      .height('7.3%')
      .justifyContent(FlexAlign.Center)
    }
    .width('61.5%')
    .height('71%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor($r('app.color.2A2A2A'))
    .borderRadius($r('app.float.virtualSize_16'))
  }
}