js处理数组对象中，先根据某个字段组成，新数组再根据某个字段组数据

// 后台返回的数据类似这样的
const beforeData = [
            {
                productName: "摘要年份酒12年(白金)",
                orderNo: 'Z2306011yZm',
                qrcode: "CJVtcCHaltwczHrs"
            },
            {
                productName: "摘要年份酒12年(白金)",
                orderNo: 'Z2306011yZm',
                qrcode: "CJVtcCHaltwczHrs"
            },
            {
                productName: "摘要年份酒12年(白金)",
                orderNo: 'Z2306011yZm111',
                qrcode: "CJVtcCHaltwczHrs"
            },
            {
                productName: "摘要年份酒12年(白金)111",
                orderNo: 'Z2306011yZm111',
                qrcode: "CJVtcCHaltwczHrs"
            }
]

  // 数据处理
  function processingData(beforeData) {
		let tempArr = [];
		let afterData = []; //新数组
		for (let i = 0; i < beforeData.length; i++) {
			   if (tempArr.indexOf(beforeData[i].productName) === -1) {
					afterData.push({
							productName: beforeData[i].productName,
							origin: [{
								orderNo: beforeData[i].orderNo
							}],
							qrcodeArr: [beforeData[i].qrcode]
						});
						tempArr.push(beforeData[i].productName);
					} else {
						for (let j = 0; j < afterData.length; j++) {
							if (afterData[j].productName == beforeData[i].productName) {
								afterData[j].origin.push({
									orderNo: beforeData[i].orderNo
								});
								afterData[j].qrcodeArr.push(beforeData[i].qrcode)
								break;
							}
						}
					}
				}
				afterData.forEach(item => {
                    // 这个是获取相同的orderNo的出现几次
					const result = item.origin.reduce(
						(acc, o) => ((acc[o.orderNo] = (acc[o.orderNo] || 0) + 1), acc), {}
					);
					item.origin.forEach(it => {
						this.$set(it, 'num', result[it.orderNo])
					});
                    // 这里是去重orderNo相同的，因为我只需要相同的展示一个，然后相同的有多少个数量
					let obj = {};
					let peon = item.origin.reduce((cur, next) => {
						obj[next.orderNo] ? "" : obj[next.orderNo] = true && cur.push(next);
						return cur;
					}, [])
					item.origin = peon
				});
				return afterData
			},
 console.log(processingData(beforeData))

 我的需求是：先根据产品名称去筛选出来一样的，再根据出库单号去筛选

然后实际的页面效果图是：