HJ_Process_Guidance/entry/src/main/ets/view/ProductionProcessesView.ets

import WorkOrderInfo from '../viewmodel/WorkOrderInfo';
import OperationInfo from '../viewmodel/process/OperationInfo';
import promptAction from '@ohos.promptAction';
import { ProcessStatus } from '../viewmodel/process/EnumerationType';

interface  Tmp {
  index: number;
  item: OperationInfo
}

@Component
export struct OperationList {
  // 必需属性
  @Link @Watch('onWorkOrderChange') selectWorkOder: WorkOrderInfo;
  @Link selectOperationId: string  ;
  @Link stationId: string;
  @Link isStationProcess:boolean;
  @Link currentProcessStatus: ProcessStatus

  // 新增：监听selectWorkOder变化的回调
  onWorkOrderChange() {
    this.findAndSelectMatchingOperation();
  }

  findAndSelectMatchingOperation(): void {
    // 如果已经有选中的工序，且该工序匹配当前工位，则保持选中
    if (this.selectOperationId) {
      const currentSelected = this.selectWorkOder.ops?.find(op => op.operationId === this.selectOperationId);
      if (currentSelected && currentSelected.stationId === this.stationId) {
        return; // 当前选中的工序仍然匹配，不需要更改
      }
    }
    // 查找第一个匹配当前工位且未完成的工序
    const matchingOperation = this.selectWorkOder.ops?.find(op =>
    op.stationId === this.stationId && !op.isEnd
    );

    if (matchingOperation) {
      this.selectOperationId = matchingOperation.operationId!;
      this.isStationProcess = true;
    } else {
        promptAction.showToast({
          message: `当前没有该工位未完成工序`,
          duration: 1500,
        });
        this.isStationProcess = false;

      }
    }


  build() {
    List() {
      ForEach(this.selectWorkOder.ops!, (item: OperationInfo, index: number) => {
        ListItem() {
          this.OperationListItem({ item: item, index: index })
        }
      })
    }
    .width('83.4%')
    .height('88.6%')
    .alignListItem(ListItemAlign.Center)
  }

  @Builder
  OperationListItem(params: Tmp) {
    Column() {
      // 工序项
      Row() {
        // 序号
        Row() {
          Text((params.index + 1).toString())
            .fontSize($r('app.float.fontSize_16'))
            .fontColor(this.selectOperationId === params.item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Bold)
        }
        .width('14.6%')
        .height('80%')
        .justifyContent(FlexAlign.Center)

        // 工序名称
        Row() {
          Text(params.item.operationName)
            .fontSize($r('app.float.fontSize_16'))
            .fontColor(this.selectOperationId === params.item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Regular)
            .padding({ left: 5 })
        }
        .width('70.8%')
        .height('100%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Start)

        // 状态图标
        Row() {
          Image(this.selectOperationId === params.item.operationId ?
          $r('app.media.process_current_operation') :
            (params.item.isEnd! ? $r('app.media.process_complete') : ''))
            .width($r('app.float.virtualSize_24'))
            .height($r('app.float.virtualSize_24'))
            .fillColor(this.selectOperationId === params.item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
            .opacity(!(this.selectOperationId === params.item.operationId) && !params.item.isEnd! ? 0 : 1)
        }
        .width('14.6%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('70%')
      .borderRadius($r('app.float.virtualSize_40'))
      .backgroundImage(this.selectOperationId === params.item.operationId ?
      $r('app.media.process_select_operation') :
      $r('app.media.process_no_select_operation'))
      .backgroundImageSize(ImageSize.Cover)
      .onClick(async () => {
        if(this.selectOperationId == params.item.operationId!) return
        this.isStationProcess = false;
        this.currentProcessStatus = ProcessStatus.INITIAL
        this.selectOperationId = params.item.operationId!;
        if (this.stationId != params.item.stationId!) {
          promptAction.showToast({
            message: `${params.item.operationName}需要在${params.item.stationId}工位上生产`,
            duration: 1500,
          });
          return;
        }
        if (params.item.isEnd!) {
          promptAction.showToast({
            message: `${params.item.operationName}已经完成`,
            duration: 1500,
          });
          return;
        }
        this.isStationProcess = true;
      })

      // 分隔线（非最后一项显示）
      if (params.index < (this.selectWorkOder?.ops?.length ? this.selectWorkOder.ops!.length - 1 : 0)) {
        Row() {
          Divider()
            .vertical(true)
            .color($r('app.color.60FFFFFF'))
            .padding({ right: '15%' })
        }
        .justifyContent(FlexAlign.Center)
        .width('20%')
        .layoutWeight(1)
      }
    }
    .width('100%')
    .height('10.6%')
    .alignItems(HorizontalAlign.Start)
  }
}