将后端返回数据转换成需要的数据

后端返回的数据：

{
    "exportName": null,
    "createBy": "产品商1",
    "createTime": "2023-05-26 15:41:25",
    "updateBy": "产品商1",
    "updateTime": "2023-05-28 17:41:41",
    "id": "1662000970753294337",
    "deptId": "1659445130175340546",
    "deptName": "产品商1",
    "packId": "1662000714183524353",
    "packName": "优享套餐",
    "name": "100G基础包",
    "packageType": "basicpackage",
    "flowCalcTimeType": "month",
    "flowCalcTimeValue": 1,
    "monthNum": 1,
    "salePrice": "19.90",
    "totalFlow": 104857600,
    "flowScale": "1.20",
    "transitionParam": null,
    "status": "enable",
    "sortNum": 1,
    "remark": "",
    "version": 0,
    "delFlag": "0"
},
...

要求展示的内容格式：

1.根据packageType 区分包类型（基础包、加油包）

2.根据月份monthNum展示对应的数据

基础包：

        半年包：salePrice+totalFlow
        月包：salePrice+totalFlow
加油包：

salePrice+totalFlow

 react代码展示：

  // 根据套餐月份返回类型名
  function getPackTypeStr(t: number) {
    if (t < 3) {
      return '月包';
    } else if (t < 6) {
      return '季包';
    } else if (t < 12) {
      return '半年包';
    } else if (t < 24) {
      return '年包';
    } else {
      return '两年包';
    }
  }

    {
      title: '套餐名称',
      dataIndex: 'packName',
      key: 'packName',
      render: (v: string, record: any) => {
        let _list: CardPackDetail[] = record.cardPackDetails ?? [];
        if (!_list?.length) {
          return '无';
        }
        let baseMap: any = {};
        let fullMap: any = [];
        _list.forEach((i) => {
          if (i.packageType === 'fuelpack') {
            fullMap.push(i.salePrice + '元/' + i.totalFlow + 'G');
          } else {
            if (!baseMap[i.monthNum!]) {
              baseMap[i.monthNum!] = [];
            }
            baseMap[i.monthNum!].push(i.salePrice + '元/' + i.totalFlow + 'G');
          }
        });
        return (
          <div>
            {v}
            <Popover
              position="bl"
              style={{ maxWidth: 700 }}
              content={
                <>
                  <div>基础包</div>
                  {Object.keys(baseMap)
                    .sort()
                    .map((k) => (
                      <div className="ml-10" key={k}>
                        {getPackTypeStr(parseInt(k))}:{baseMap[k].join(',')}
                      </div>
                    ))}
                  {fullMap.length && <div>加油包</div>}
                  {fullMap.length && <div className="ml-10">{fullMap.join(',')}</div>}
                </>
              }
            >
              <span className="ml-5 text-primary-color cursor-pointer">明细</span>
            </Popover>
          </div>
        );
      },
    },