业务需求

在订单中有一个字段为生产状态（之后简称为状态），代表目前产品的流程进行到了哪一步，例如最开始的状态默认为待采购，产品希望待采购的订单只能选择“已采购”或“包工包料”保存，已采购的订单只能选择“材料到齐”保存，以此类推。且生产状态的流程是非线性的（否则用fliter或ngIf就很好解决）和一对多的

思路设计

首先需要确认如何让状态之间产生联系，之前的状态下拉框所用数组只有value(值)和type(名称)，由于并非线性流程，无法使用一个数字排序的字段达成，并且一对多，这时候我选择在每个状态下新增一个数组key：

// 生产状态
export const ProductionState = [
  {
    value: '0',
    type: '待采购',
    key: ['0', '100', '7']
  },
  {
    value: '100',
    type: '已采购',
    key: ['100', '9']
  },
  ……
]

其中key数组中的值，分别对应下一步状态的value。例如待采购下一步为已采购或包工包料，这两个状态的值分别为100和7，再加上自身本身的值，即为key数组
2. 其次我打算用另一个数组，用于下拉框展示，这个数组中的元素包含订单的当前状态+下一步状态
3. 那么基础思路就确定了：添加key数组=>获取当前订单的key=>根据key生成对应的新数组=>将新数组用于下拉框

代码实现

processStatusList = [];

// 获取实际显示的生产状态下拉框
  getProcessList(): void {
    let keyArray = [];
    // 格式化数组
    this.processStatusList = [];
    // 获取key数组
    this.productionState.some(index => {
      if (this.orderData['process_status'] === index['value']) {
        keyArray = index['key'];
        return true;
      }
    });

    // 再次以生产状态列表下拉框循环，必须是forEach
    this.productionState.forEach(index => {
      // 嵌套一个key数组的some循环
      keyArray.some(element => {
        // 若该value值与key值中的数据相等，代表需要显示，则往空数组processStatusList中push该value所在的数据
        if (index['value'] === element) {
          this.processStatusList.push(index);
          return true;
        }
      });
    });
  }

其中processStatusList为下拉框所用的数组该函数调用的生命周期为每当该订单的信息加载的时候，就会重新构建一次新数组

Angular基于非线性流程防止越级保存实现的下拉框筛选

业务需求

思路设计

代码实现