芋道源码/yudao-cloud二次开发日记(商品sku数据归类为规格属性)

商品的每一条规格和属性在数据库里都是单一的一条数据,从数据库里查出来后,该怎么归类为对应的规格和属性值?如下图:

在商城模块,商品的单规格、多规格、单属性、多属性功能可以说是非常完整,如下图:

在多规格设置里,每添加一项属性,规格列表里都会增加一项,每添加一个属性值,规格列表里也会增加一条对应的项。

下图为表格里规格在数据库中的数据,直接存了字符串数据:

从数据库查出来以后得到的是多条数据,想处理为对应的规格和属性也有很多的方式和方法,可以在前端处理也可以在后端处理,本来我想在后端处理的,转换数据的方法前端一个函数是可以直接引入调用的,方法如下:

javascript 复制代码
/**
 * 获得商品的规格列表 - 商品相关的公共函数
 *
 * @param spu
 * @return PropertyAndValues 规格列表
 */
const getPropertyList = (spu: Spu): PropertyAndValues[] => {
  //  直接拿返回的 skus 属性逆向生成出 propertyList
  const properties: PropertyAndValues[] = []
  // 只有是多规格才处理
  if (spu.specType) {
    spu.skus?.forEach((sku) => {
      sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {
        // 添加属性
        if (!properties?.some((item) => item.id === propertyId)) {
          properties.push({ id: propertyId!, name: propertyName!, values: [] })
        }
        // 添加属性值
        const index = properties?.findIndex((item) => item.id === propertyId)
        if (!properties[index].values?.some((value) => value.id === valueId)) {
          properties[index].values?.push({ id: valueId!, name: valueName! })
        }
      })
    })
  }
  return properties
}

这个函数体的文件目录是在views/mall/product/spu/components/index.ts,直接在需要使用的地方引入调用即可,打印一下。

javascript 复制代码
prodDetail.value.property = getPropertyList(data)
console.log(prodDetail.value.property);

处理过后的数据是这样的。如下图:

在这里已经处理好了,ok,处理完成。
相关推荐
敲上瘾20 小时前
Docker镜像构建指南:Dockerfile语法与docker build命令全解析
linux·服务器·docker·微服务·容器
分布式存储与RustFS1 天前
告别手动配置:用 Terraform 定义你的 RustFS 存储帝国
云原生·wpf·文件系统·terraform·对象存储·minio·rustfs
文火冰糖的硅基工坊1 天前
《投资-111》价值投资者的认知升级与交易规则重构 - 价值投资的思维模式:穿越表象,回归本质
重构·架构·投资·投机
悠闲蜗牛�1 天前
人工智能时代下的全栈开发:整合AI、大数据与云原生的实践策略
大数据·人工智能·云原生
数据要素X1 天前
寻梦数据空间 | 架构篇:从概念到落地的技术实践与突破性创新
大数据·运维·数据仓库·微服务·数据治理·数据中台·可信数据空间
法欧特斯卡雷特1 天前
从 Kotlin 编译器 API 的变化开始: 2.2.2X -> 2.3.0-Beta1
后端·架构·开源
荣光波比1 天前
K8S(一)—— 云原生与Kubernetes(K8S)从入门到实践:基础概念与操作全解析
云原生·容器·kubernetes
伞啊伞1 天前
K8s概念基础(一)
云原生·容器·kubernetes
Light601 天前
领码方案|微服务与SOA的世纪对话(6):组织跃迁——智能架构下的团队与文化变革
微服务·云原生·ddd边界·组织双生体·pod协同·文化仪式·ai自演进
柳贯一(逆流河版)1 天前
Nacos 实战指南:微服务下服务注册与配置管理的完整落地
java·微服务·架构