【react+AntDesign】树形结构回显置灰

先看效果图：

1.编辑页面已经选了的：

2.新增页面根据已经选的置灰：

说明：

数据都是之前存好的，主要看判断逻辑

传进来的 ids是已经选中的数据，FromJS是公司封装的方法，类似于json.stringfy()和json.parse()。

实际就是操纵数组方法，省市区三个大数组都是存在缓存中使用的时候把被选的数组传进来进行逐层比较然后返回一个tree结构给antD的组件用。

代码：

// 三级结构
export function findProvinceCitySale(ids) {
  const t_provinces = localStorage.getItem(cache.AREA_PROV);
  const t_citys = localStorage.getItem(cache.AREA_CITY);
  const t_areas = localStorage.getItem(cache.AREA_AREA);
  if (t_provinces == null || t_citys == null || t_areas == null) {
    return;
  }
  const provinces = JSON.parse(t_provinces);
  const cities = JSON.parse(t_citys);
  const areas = JSON.parse(t_areas);

  return fromJS(provinces || [])
    .map((p) => {
      let pChx = false,
        cChx = false,
        pChx2 = false;
      if (fromJS(ids).find((id) => id == p.get('code'))) {
        pChx = true;
      }
      // 给省添加儿子
      let children = cities
        .filter((v) => v.parent_code == p.get('code'))
        .map((c) => {
          cChx = pChx;
          if (!cChx && fromJS(ids).find((id) => id == c.code)) {
            cChx = true;
            pChx2 = true;
          }
          // 给城市添加儿子
          let childrenSon = areas
            .filter((e) => e.parent_code == c.code)
            .map((f) => {
              cChx = pChx2;
              if (!cChx && fromJS(ids).find((id) => id == f.code)) {
                cChx = true;
              }
              return fromJS({
                label: f.name,
                value: f.code,
                key: f.code,
                disabled: cChx,
              });
            })
          return fromJS({
            label: c.name,
            value: c.code,
            key: c.code,
            children: childrenSon,
            disabled: pChx || pChx2,
          });
        });
      return fromJS({
        label: p.get('name'),
        value: p.get('code'),
        key: p.get('code'),
        children: children,
        disabled: pChx || pChx2,
      });
    })
    .toJS();

}