如何将列跨度信息添加到Javascript组算法

Question

我正在构建一个HTML网格，该网格可以由多个字段组成。

我的原始数据：

let stock = [
    { order: "200", type: "production", qty: 200, item: "IT282" },
    { order: "200", type: "production", qty: 90, item: "IT283" },
    { order: "200", type: "customer", qty: 80, item: "IT102" },
    { order: "200", type: "production", qty: 110, item: "IT283" },
    { order: "200", type: "customer", qty: 130, item: "IT102" },
    { order: "200", type: "production", qty: 45, item: "IT233" },
    { order: "200", type: "stock", qty: 30, item: "IT282" }
];

我正在寻找的结果

let result = groupBy(stock, ["order", "item"]);

[
    {
        field: "order",
        value: "200",
        rows: [
            {
                field: "item",
                value: "IT282",
                rows: [
                    { order: "200", type: "production", qty: 200, item: "IT282", spans: [{ field: "order", rows: 6 }, { field: "item", rows: 2 }] },
                    { order: "200", type: "stock", qty: 30, item: "IT282", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0}] },
                ]
            },
            {
                field: "item",
                value: "IT283",
                rows: [
                    { order: "200", type: "production", qty: 90, item: "IT283", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 2 }] },
                    { order: "200", type: "production", qty: 110, item: "IT283", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0 }] },
                ]
            },
            {
                field: "item",
                value: "IT102",
                rows: [
                    { order: "200", type: "customer", qty: 80, item: "IT102", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 2 }] }, },
                    { order: "200", type: "customer", qty: 130, item: "IT102", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0 }] }, }
                ]
            },
            {
                field: "item",
                value: "IT233",
                rows: [
                    { order: "200", type: "production", qty: 45, item: "IT233", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 1 }] }, }
                ]
            }
        ]
    }
];

这是我用来对列进行分组的代码（感谢the following post）：

let stock = [{ order: "200", type: "production", qty: 200, item: "IT282" },{ order: "200", type: "production", qty: 90, item: "IT283" },{ order: "200", type: "customer", qty: 80, item: "IT102" },{ order: "200", type: "production", qty: 110, item: "IT283" },{ order: "200", type: "customer", qty: 130, item: "IT102" },{ order: "200", type: "production", qty: 45, item: "IT233" },{ order: "200", type: "stock", qty: 30, item: "IT282" }];

    groupBy = (arr, fields, parent) => {
        let field = fields[0]; // one field at a time

        if (!field) {
          let rows = [];

          let spans = [];
          let up = parent;

          while (up) {
            spans.push(up.group.span);
            up = up.group.parent;
          }

          arr.map(obj => {
            rows.push({
              ...obj,
              spans: spans
            });
          });

          return rows;
        }

        if (!parent) parent = null;

        let retArr = Object.values(
          arr.reduce((obj, current) => {
            let val = current.data[field];
            if (!obj[val])
              obj[val] = {
                group: {
                  field: field,
                  value: val,
                  span: null,
                  rows: [],
                  parent: parent
                }
              };

            obj[val].group.rows.push(current);
            return obj;
          }, {})
        );

        // recurse for each child's rows; if there are remaining fields
        if (fields.length) {
          retArr.forEach((obj, index) => {

            let rows = 0;
            if (!obj.group.parent) rows = obj.group.rows.length;
            else rows = index === 0 ? obj.group.rows.length : 0;


            obj.group.span = {
              field: obj.group.field,
              index: index, 
              count: obj.group.rows.length,
              rows: rows
            };
            obj.group.rows = this.groupBy(obj.group.rows, fields.slice(1), obj);
          });
        }

        return retArr;
      };

  let result = groupBy(stock, ["order", "item"]);
  console.log(result)

在使用html呈现表时，spans字段用于在我的表列中进行rowSpan。如何将spans字段正确添加到上述算法中？