• 工厂仓拣货信息：Factory Picking Info (FPI)
• 工厂仓调度信息：Factory Scheduling Info (FSI)
• DC 收货信息：DC Receiving Info (DCRI)
• 上架信息：Shelving Info (SI)
• 盘点信息：Inventory Count Info (ICI)
• 移位信息：Shifting Info (SHI)
• 订单信息：Order Info (OI)
• 拣货信息：Picking Info (PI)
• 调度单信息：Dispatch Order Info (DOI)

  <template>
    <div>
      <el-card>
        <div v-if="stageAbbreviation === 'FPI'">工厂仓拣货信息内容</div>
        <div v-else-if="stageAbbreviation === 'FSI'">工厂仓调度信息内容</div>
        <div v-else-if="stageAbbreviation === 'DCRI'">DC 收货信息内容</div>
        <div v-else-if="stageAbbreviation === 'SI'">上架信息内容</div>
        <div v-else-if="stageAbbreviation === 'ICI'">盘点信息内容</div>
        <div v-else-if="stageAbbreviation === 'SHI'">移位信息内容</div>
        <div v-else-if="stageAbbreviation === 'OI'">订单信息内容</div>
        <div v-else-if="stageAbbreviation === 'PI'">拣货信息内容</div>
        <div v-else-if="stageAbbreviation === 'DOI'">调度单信息内容</div>
        <div v-else>未知阶段信息</div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      stageAbbreviation: {
        type: String,
        required: true
      }
    }
  };
  </script>
  

  <template>
    <div>
      <StageInfoDisplay stageAbbreviation="FPI" />
      <StageInfoDisplay stageAbbreviation="DCRI" />
      <StageInfoDisplay stageAbbreviation="OI" />
    </div>
  </template>
  
  <script>
  import StageInfoDisplay from './StageInfoDisplay.vue';
  
  export default {
    components: {
      StageInfoDisplay
    }
  };
  </script>
  

  <template>
    <div>
      <el-card>
        <div v-if="stageInfo">{{ stageInfo }}</div>
        <div v-else>加载中...</div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        stageInfo: null
      };
    },
    props: {
      stageAbbreviation: {
        type: String,
        required: true
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        // 模拟异步加载数据，实际情况下可以使用异步请求获取数据
        setTimeout(() => {
          // 根据 stageAbbreviation 加载相应的数据
          switch (this.stageAbbreviation) {
            case 'FPI':
              this.stageInfo = "工厂仓拣货信息内容";
              break;
            case 'DCRI':
              this.stageInfo = "DC 收货信息内容";
              break;
            case 'OI':
              this.stageInfo = "订单信息内容";
              break;
            default:
              this.stageInfo = "未知阶段信息";
          }
        }, 1000); // 模拟1秒后加载完成
      }
    }
  };
  </script>
  

<template>
  <div>
    <StageInfoDisplay :stageAbbreviations="['FPI', 'DCRI', 'OI']" :snData="SNdata" />
  </div>
</template>

<script>
import StageInfoDisplay from './StageInfoDisplay.vue';

export default {
  components: {
    StageInfoDisplay
  },
  data() {
    return {
      SNdata: {
        // SNdata 数据
      }
    };
  }
};
</script>

<template>
  <div>
    <template v-for="abbreviation in stageAbbreviations">
      <el-card v-if="shouldDisplay(abbreviation)" :key="abbreviation">
        <h2>{{ abbreviation }}</h2>
        <p>{{ getStageInfo(abbreviation) }}</p>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    stageAbbreviations: {
      type: Array,
      required: true
    },
    snData: {
      type: Object,
      required: true
    }
  },
  methods: {
    shouldDisplay(abbreviation) {
      // 根据传入的阶段缩写数组判断是否应该展示该阶段信息
      return this.stageAbbreviations.includes(abbreviation);
    },
    getStageInfo(abbreviation) {
      // 根据缩写获取对应的阶段信息
      switch (abbreviation) {
        case 'FPI':
          return 'First Production Inspection';
        case 'DCRI':
          return 'Delivery Confirmation and Receipt Inspection';
        case 'OI':
          return 'Outbound Inspection';
        default:
          return 'Unknown Stage';
      }
    }
  }
};
</script>