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

import CommonConstants from '../../common/constants/CommonConstants'
import WmsRequest from '../../common/util/request/WmsRequest'
import StationOperationInfo from '../../viewmodel/wms/StationOperationInfo'
import OperationInfo from '../../viewmodel/wms/OperationInfo'
import RequestParamModel from '../../viewmodel/wms/RequestParamModel'
import WorkOrderInfo from '../../viewmodel/wms/WorkOrderInfo'
import OperationMaterial from '../../viewmodel/wms/OperationMaterial'
import OperationItem from '../../viewmodel/wms/OperationItem'
import HashMap from '@ohos.util.HashMap'
import DictInfo from '../../viewmodel/DictInfo'

@Component
export struct OperationMaterialKitOneStep {

  @Link workOrder: WorkOrderInfo
  @Link selectOperations: OperationInfo[]
  @Link operationItems: OperationItem[]
  
  @State workOrderArray: WorkOrderInfo[] = []
  @State operationArray: StationOperationInfo[] = []
  @State operationMaterialArray: OperationMaterial[] = []

  @State selectWorkOrder: number = 0
  @State selectOperationIds: string[] = []

  fixed38px: number = 22.8
  fixed52px: number = 31.2
  fixed100px: number = 60

  stationTypeDictType: string = 'station_type'
  stationTypeDictMap: HashMap<string, string> = new HashMap<string, string>()

  async aboutToAppear() {
    this.workOrderArray = await WmsRequest.post('/api/v1/wms/workOrder/list', {
      //查询未完成的工单
      queryComplete: 0,
    } as RequestParamModel) as WorkOrderInfo[]
    if (this.workOrderArray && this.workOrderArray.length > 0) {
      this.workOrder = this.workOrderArray[0]
      this.selectWorkOrder = 0
      this.operationArray = await WmsRequest.post('/api/v1/wms/operation/list', {
        //查询未完成的工单
        processRouteId: this.workOrderArray[0]?.processRouteId,
      } as RequestParamModel) as StationOperationInfo[]
    }
    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.stationTypeDictType === dict.dictCode) {
            for (const element of dict?.list!) {
              this.stationTypeDictMap.set(element.dictValue, element.dictLabel);
            }
          }
        }
      }
    } else {
      let dictList = CommonConstants.DICT_DATA.get(this.stationTypeDictType);
      for (const element of dictList) {
        this.stationTypeDictMap.set(element.dictValue, element.dictLabel);
      }
    }
  }

  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)

        List({space: 5}) {
          ForEach(this.workOrderArray, (item: WorkOrderInfo, index: number) => {
            ListItem() {
              Column() {
                Row() {
                  Text((item.orderName ? item.orderName : '') + (item.orderCode ? item.orderCode : ''))
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('38%')
                .width('91%')
                .alignItems(VerticalAlign.Bottom)

                Column() {
                  Text('工单编号：' + (item.workOrderCode ? item.workOrderCode : ''))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)

                  Text('下发时间：' + item.updated)
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)

                  Text('齐套进度：' + (item.kitCompleteProgress ? item.kitCompleteProgress : 0) + '%')
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('48.3%')
                .width('91%')
                .alignItems(HorizontalAlign.Start)
                .justifyContent(FlexAlign.SpaceAround)
              }
              .height('15.4%')
              .width('92.6%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .justifyContent(FlexAlign.Start)
              .backgroundColor(this.selectWorkOrder === index ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
              .borderWidth(1)
              .borderColor(this.selectWorkOrder === index ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
              .onClick(async ()=>{
                if (this.selectWorkOrder === index) {
                  return
                }
                this.operationArray = await WmsRequest.post('/api/v1/wms/operation/list', {
                  //查询未完成的工单
                  processRouteId: this.workOrderArray[index]?.processRouteId,
                } as RequestParamModel) as StationOperationInfo[]
                this.selectWorkOrder = index
                this.workOrder = this.workOrderArray[this.selectWorkOrder]
              })
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_6_4'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
      Image($r("app.media.wms_arrow_right"))
        .height($r('app.float.virtualSize_38'))
        .width($r('app.float.virtualSize_38'))
      // 选择工序
      Column() {
        Row() {
          Text('选择工序')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .height('10%')
        .width('100%')
        .justifyContent(FlexAlign.Center)

        List() {
          ForEach(this.operationArray, (item: StationOperationInfo, index: number) => {
            ListItem() {
              Column() {
                Row() {
                  Row() {
                    Text(this.stationTypeDictMap.get(item.stanType!) ? this.stationTypeDictMap.get(item.stanType!) : item.stanType!)
                      .fontSize($r('app.float.fontSize_16'))
                      .fontWeight(FontWeight.Lighter)
                      .fontColor($r('app.color.FFFFFF'))
                  }
                  .height('100%')
                  .width('40%')
                  .alignItems(VerticalAlign.Center)
                  .justifyContent(FlexAlign.Start)

                  Column() {
                    ForEach(item.operationVO, (operation: OperationInfo, index: number) => {
                      Column() {
                        Row().height(6)
                        Row({space: 5}) {
                          Checkbox()
                            .select(this.selectOperationIds.indexOf(operation.id) > -1 ? true : false)
                            .selectedColor($r('app.color.30D158'))
                            .width($r('app.float.virtualSize_8'))
                            .height($r('app.float.virtualSize_8'))
                            .onChange(async (value: boolean) => {
                              if (value) {
                                if (!this.selectOperationIds.includes(operation.id)) {
                                  this.selectOperationIds.push(operation.id)
                                  this.selectOperations.push(operation)
                                }
                              } else {
                                if (this.selectOperationIds.includes(operation.id)) {
                                  this.selectOperationIds.splice(this.selectOperationIds.indexOf(operation.id), 1)
                                  this.selectOperations.splice(this.selectOperations.indexOf(operation), 1)
                                }
                              }
                              this.operationMaterialArray = await WmsRequest.post('/api/v1/wms/operationMaterial/list', {
                                //查询工序需求的物料
                                operationIds: this.selectOperationIds,
                              } as RequestParamModel) as OperationMaterial[]
                              this.operationItems = []
                              if (this.operationMaterialArray) {
                                for (const element of this.operationMaterialArray) {
                                  this.operationItems = this.operationItems.concat(element.itemList);
                                }
                              }
                            })
                          Text(operation.operationName ? operation.operationName : '')
                            .fontSize($r('app.float.fontSize_24'))
                            .fontWeight(FontWeight.Medium)
                            .fontColor($r('app.color.FFFFFF'))
                        }
                        .width('100%')
                        .height(48)
                        .padding({left: '6%'})
                        .backgroundColor(this.selectOperationIds.indexOf(operation.id) > -1 ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
                        .borderWidth(1)
                        .borderColor(this.selectOperationIds.indexOf(operation.id) > -1 ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
                        .borderRadius($r('app.float.virtualSize_6_4'))
                        .onClick(async ()=>{
                          if (this.selectOperationIds.includes(operation.id)) {
                            this.selectOperationIds.splice(this.selectOperationIds.indexOf(operation.id), 1)
                            this.selectOperations.splice(this.selectOperations.indexOf(operation), 1)
                          } else {
                            this.selectOperationIds.push(operation.id)
                            this.selectOperations.push(operation)
                          }
                          this.operationMaterialArray = await WmsRequest.post('/api/v1/wms/operationMaterial/list', {
                            //查询工序需求的物料
                            operationIds: this.selectOperationIds,
                          } as RequestParamModel) as OperationMaterial[]
                          this.operationItems = []
                          if (this.operationMaterialArray) {
                            for (const element of this.operationMaterialArray) {
                              this.operationItems = this.operationItems.concat(element.itemList);
                            }
                          }
                        })
                        Row().height(6)
                      }
                      .justifyContent(FlexAlign.Center)
                    })
                  }
                  .width('60%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                }
                Divider().vertical(false)
                  .color($r('app.color.15FFFFFF'))
                  .width('100%')
              }
              .width('92.6%')
              .height(item.operationVO?.length! * this.fixed100px)
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_6_4'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
      Image($r("app.media.wms_arrow_right"))
        .height($r('app.float.virtualSize_38'))
        .width($r('app.float.virtualSize_38'))
      // 工序所需物料
      Column() {
        Row() {
          Text('需求物料')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .height('10%')
        .width('100%')
        .justifyContent(FlexAlign.Center)

        List() {
          ForEach(this.operationMaterialArray, (item: OperationMaterial, index: number) => {
            ListItem() {
              Column() {
                Row({space: 5}) {
                  Circle()
                    .width($r('app.float.virtualSize_2'))  // 设置圆点直径
                    .height($r('app.float.virtualSize_2'))
                    .fill($r('app.color.FFFFFF'))
                  Text(item.operationName ? item.operationName : '')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height(this.fixed52px)
                .width('100%')
                .alignItems(VerticalAlign.Center)
                ForEach(item.itemList, (material: OperationItem)=>{
                  Column({space: 5}) {
                    Row() {
                      Text(material.itemName! + '-' + material.itemCode!)
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                        .fontColor($r('app.color.FFFFFF'))
                        .maxLines(1)

                      Text((material.kitNum? material.kitNum : 0) + '/' + (material.storageNum? material.storageNum : 0))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                        .fontColor($r('app.color.FFFFFF'))
                        .maxLines(1)
                    }
                    .width('100%')
                    .justifyContent(FlexAlign.SpaceBetween)
                    Row() {
                      Text('型号：' + (material.itemModel ? material.itemModel : ''))
                        .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%')
                  }
                  .width('100%')
                  .height(this.fixed52px)
                  .justifyContent(FlexAlign.End)
                })
                Row().height(this.fixed38px)
              }
              .height((item.itemList?.length! + 1) * this.fixed52px + this.fixed38px)
              .width('92.6%')
              .justifyContent(FlexAlign.Start)
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_6_4'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}