WonderfulDemo/entry/src/main/ets/pages/process/ProcessDrawingPage.ets

import { BottomOperateComp } from '../../common/component/BottomOperateComp'
import { ProcessTitleComp } from '../../common/component/ProcessTitleComp'
import router from '@ohos.router';
import JGRequest from '../../common/util/request/Request';

const params = router.getParams(); // 获取传递过来的参数对象
const mainMaterial = params['mainMaterial']; // 获取主料号

@Entry
@Component
struct ProcessDrawingPage {

  @State drawingArray: DrawingInfo[] = []
  mainMaterial: string = mainMaterial

  async aboutToAppear() {
    this.drawingArray = await JGRequest.post("/api/v1/base/drawing/list", {
      "materialCode": this.mainMaterial
    })
  }

  build() {
    Column() {
      // 顶部栏
      ProcessTitleComp({titleName: '图纸'})

      Scroll() {
        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceEvenly}) {
          ForEach(this.drawingArray, (item: DrawingInfo, index: number)=>{
            Column() {
              Row() {
                Image(item.drawingPath)
                  .objectFit(ImageFit.Fill)
              }
              .height('77%')
              .width('100%')

              Column() {
                Text(item.drawingTitle)
                  .fontSize($r('app.float.process_card_small_font_size'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.general_font_opacity'))
                Text(item.drawingCode)
                  .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)
              }
              .width('92%')
              .height('23%')
              .alignItems(HorizontalAlign.Start)
              .justifyContent(FlexAlign.Center)
            }
            .height('37%')
            .width('31.6%')
            .backgroundColor($r('app.color.general_font_white_color'))
            .borderRadius($r('app.float.general_border_radius'))
            .margin({ bottom: 10})
          })
        }
      }
      .width('100%')
      .padding({top: 10})
      .layoutWeight(1)

      // 底部操作组件
      BottomOperateComp()
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_general_background'))
  }
}

class DrawingInfo {
  // 主键id
  id?: number
  // 图纸编码
  drawingCode?: string
  // 图纸路径
  drawingPath?:	string
  // 图纸标题
  drawingTitle?: string
  // 图纸版本号
  drawingVersion?: number
}