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

import CommonConstants from '../../common/constants/CommonConstants'
import JGRequest from '../../common/util/request/Request'
import PageModel from '../../viewmodel/PageModel'
import StartWorkInfo from '../../viewmodel/StartWorkInfo'

@Component
export struct MultimediaCollectView {

  @State collectImages: CollectData[] = []
  // 照片选中状态，1:选中 2:未选中
  @State selectStates: number[] = []
  // 是否可选，默认不能选择，也不会出现删除的选项；长按某一张图片后才能选择
  @State canSelect: boolean = false

  // 生产过程id（开工信息id）
  processId: number
  // 工序id
  operationId: number

  pageNo: number = 1
  pageSize: number = 10
  totalPages: number = 1

  scroller: Scroller = new Scroller()

  async aboutToAppear() {
    let res: PageModel<CollectData> = await JGRequest.post('/api/v1/process/media/page', {
      "pageNo": this.pageNo,
      "pageSize": this.pageSize,
      "processId": this.processId,
      "operationId": this.operationId,
    })
    if (res && res.records && res.records.length > 0) {
      this.collectImages = res.records
      this.totalPages = res.totalPages
      this.pageNo++
      // 多次查询直到，查出所有的数据
      while (this.pageNo <= this.totalPages) {
        res = await JGRequest.post('/api/v1/process/media/page', {
          "pageNo": this.pageNo,
          "pageSize": this.pageSize,
          "processId": this.processId,
          "operationId": this.operationId,
        })
        this.totalPages = res.totalPages
        this.pageNo++
        this.collectImages = this.collectImages.concat(res.records)
      }
    }
    // 往数组头部插入数据 占位(包含拍照、上传按钮)
    this.collectImages.unshift({id: '0'})
    for (let index = 0; index < this.collectImages.length; index++) {
      this.selectStates.push(2)
    }
  }

  build() {
    Scroll(this.scroller) {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.collectImages, (item: CollectData, index: number) => {
            Column() {
              if (index === 0) {
                Row() {
                  Row() {
                    Image($r('app.media.process_camera'))
                      .width('60%')
                  }
                  .width('50%')
                  .height('80%')
                  .justifyContent(FlexAlign.Center)
                  Row() {
                    Image($r('app.media.local_upload'))
                      .width('60%')
                  }
                  .width('50%')
                  .height('80%')
                  .justifyContent(FlexAlign.Center)
                }
                .width('100%')
                .layoutWeight(1)
                .borderRadius($r('app.float.general_border_radius'))
                .borderStyle(BorderStyle.Dashed)
                .borderColor($r('app.color.material_collect_border_color'))
                .borderWidth(1)
                Row() {}
                .height('8%')
              } else {
                Column() {
                  Stack() {
                    Image(CommonConstants.FILE_URL_PREFIX + item.filePath)
                      .objectFit(ImageFit.Fill)
                      .borderRadius($r('app.float.general_border_radius'))
                    if (this.canSelect) {
                      Row() {
                        Checkbox()
                          .select(this.selectStates[index] === 1 ? true : false)
                      }
                      .width('90%')
                      .height('90%')
                      .justifyContent(FlexAlign.End)
                      .alignItems(VerticalAlign.Top)
                    }
                  }
                }
                .layoutWeight(1)
                .onClick(()=> {
                  if (this.selectStates[index] === 1) {
                    this.selectStates[index] = 2
                  } else {
                    this.selectStates[index] = 1
                  }
                })
                .gesture(
                  LongPressGesture()
                    .onAction(()=>{
                      this.canSelect = true
                    })
                )

                Row() {
                  Text(item.created)
                    .fontSize($r('app.float.process_card_small_font_size'))
                    .fontColor($r('app.color.general_font_color'))
                    .opacity($r('app.float.material_collect_font_opacity'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('8%')
              }
            }
            .width('17.6%')
            .height('39%')
            .justifyContent(FlexAlign.SpaceAround)
          Row().width('2%').height('39%')
        })

        if (this.canSelect) {
          Row() {
            Row() {
              Row() {
                Text('取消')
                  .fontSize($r('app.float.set_card_font_size'))
                  .fontColor($r('app.color.general_font_white_color'))
              }
              .width('50%')
              .height('100%')
              .justifyContent(FlexAlign.Center)
              .onClick(() => {
                for (let index = 0; index < this.collectImages.length; index++) {
                  this.selectStates[index] = 2
                }
                this.canSelect = false
              })
              Divider()
                .height('60%')
                .borderWidth(1)
                .vertical(true)
                .borderColor($r('app.color.process_divider_white_color'))
              Row() {
                Text('删除')
                  .fontSize($r('app.float.set_card_font_size'))
                  .fontColor($r('app.color.general_font_white_color'))
              }
              .width('50%')
              .height('100%')
              .justifyContent(FlexAlign.Center)
              .onClick(async () => {
                let deleteIds: number[] = []
                for (let index = this.selectStates.length - 1; index >= 0; index--) {
                  if (this.selectStates[index] === 1) {
                    deleteIds.push(Number.parseFloat(this.collectImages[index].id))
                    this.collectImages.splice(index, 1);
                  }
                }
                if (deleteIds.length > 0) {
                  await JGRequest.post('/api/v1/process/media/batch-del', {
                    'ids': deleteIds
                  })
                }
                this.selectStates = []
                for (let index = 0; index < this.collectImages.length; index++) {
                  this.selectStates.push(2)
                }
                this.canSelect = false
              })
            }
            .width('100%')
            .height('27.6%')
            .borderRadius($r('app.float.general_border_radius'))
            .backgroundColor($r('app.color.process_card_black_color'))
          }
          .width('37.2%')
          .height('39%')
          .alignItems(VerticalAlign.Top)
        }
      }
      .width('100%')
      .margin({top: 11, left: '2%'})
    }
    .width('100%')
    .scrollBar(BarState.Off)  // 滚动条常驻显示
    .edgeEffect(EdgeEffect.None)
  }
}

class CollectData {
  // 创建时间
  created?:	string
  // 创建人
  creator?:	string
  // 删除标识
  deleted?: number
  // 部门ID
  deptId?: string
  // 修改时间
  updated?:	string
  // 上次修改人
  updator?:	string
  // 文件名称
  fileName?: string
  // 文件路径
  filePath?: string
  // 文件大小
  fileSize?: string
  // 文件类型
  fileType?: string
  // 主键
  id?: string
  // 预留类型字段
  mediaType?: number
  // 组织ID
  orgId?:	string
  // 生产过程id
  processId?: string
  // 排序号
  sortNum?: number
  // 步骤id
  stepInstanceId?: string
}