章节目录

1、操作界面

2、菜单权限配置

3、数据库表模型

4、列表展示前端代码

5、列表后端API代码

6、规格值格式转换并界面显示

例如同一款苹果12手机，他的属性还包括内存（64g，128g），颜色（红色，蓝色，白色），所以同一个商品都包含多个规格，那么我们在系统上面抽象设计成为规格，在创建商品的时候，需要设置规格。

1、操作界面

2、菜单权限配置

3、数据库表模型

CREATE TABLE `yx_store_product_rule` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`rule_name` varchar(32) NOT NULL COMMENT '规格名称',
`rule_value` json NOT NULL COMMENT '规格值',
`create_time` datetime DEFAULT NULL,
`update_time` datetime DEFAULT NULL,
`is_del` tinyint(1) DEFAULT '0',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='商品规则值(规格)表';

如上述数据库记录，规格值通过json的数据格式进行存储

[{"value": "纸张", "detail": ["A4", "A3"]}, {"value": "颜色", "detail": ["白色", "红色"]}]

其中value就是规格值，detail就是具体的规格数据

效果如下截图

4、列表展示前端代码

代码路径：

如下图是列表布局界面

const defaultCrud = CRUD({ title: 'sku规则', url: 'api/yxStoreProductRule', sort: 'id,desc', crudMethod: { ...crudYxStoreProductRule }})

如上述代码，定义了后端列表接口url: 'api/yxStoreProductRule'

5、列表后端API代码

@GetMapping
@Log("查询sku规则")
@ApiOperation("查询sku规则")
@PreAuthorize("@el.check('admin','yxStoreProductRule:list')")
public ResponseEntity<Object> getYxStoreProductRules(YxStoreProductRuleQueryCriteria criteria, Pageable pageable){
    return new ResponseEntity<>(yxStoreProductRuleService.queryAll(criteria,pageable),HttpStatus.OK);
}

业务逻辑是：读取yx_store_product_rule表的数据返回给前端。

@Override
//@Cacheable
public Map<String, Object> queryAll(YxStoreProductRuleQueryCriteria criteria, Pageable pageable) {
    getPage(pageable);
    PageInfo<YxStoreProductRule> page = new PageInfo<>(queryAll(criteria));
    Map<String, Object> map = new LinkedHashMap<>(2);
    map.put("content", page.getList());
    map.put("totalElements", page.getTotal());
    return map;
}

业务逻辑：

1、getPage函数：设置分页

2、queryAll(criteria)：调用baseMapper.selectList函数。查询数据库比并返回数据。

@Override
//@Cacheable
public List<YxStoreProductRule> queryAll(YxStoreProductRuleQueryCriteria criteria){
    return baseMapper.selectList(QueryHelpPlus.getPredicate(YxStoreProductRule.class, criteria));
}

6、规格值格式转换并界面显示

因为数据库存储规格值内容是一个json数据格式，界面需要做数据处理才能正常显示，在界面显示效果如下：

所以程序程序上需要如下处理：

<el-table-column v-if="columns.visible('ruleValue')" prop="ruleValue" label="规格值" >
  <template slot-scope="scope">
    <div v-for="(item, index) in scope.row.ruleValue">
      {{ item.value }} : {{ item.detail.join(',')}}
    </div>
  </template>
</el-table-column>

计划

1、ruoyi-flowable-plus工作流拆解

2、ruoyi-flowable-plus如何快速开发

3、电商项目源代码拆解

4、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我