商品每日库存

运行效果

商品每日库存页面分为左右两部分，左边是商品现有库存列表，右边是某个商品某个规格或全部规格的每日库存。界面如下图所示

案例需求

• 库存列表
  • 商品按每种规格显示库存，商品小计汇总全部规格的库存
• 每日库存
  • 点击商品某个规格的库存量，右侧显示该商品规格的每日库存
  • 点击商品小计的库存量，右侧显示该商品全部规格的每日库存

知识点

1. 使用 SQL 数据集统计商品全部规格的库存量
2. 使用分割面板将页面分为左右两部分
3. 使用表格、按钮等组件实现左侧库存列表
4. 使用列表、图表、卡片等组件实现右侧每日库存

开发过程

数据开发

商品库存

添加动态数据集，包括主键、商品、规格、库存量和日期等列，如下图所示

商品库存统计

添加 SQL 数据集，必须设置主键列，如下图所示，本例设置商品和规格均为主键

通过 SQL 计算出每种商品小计和合计

形成这样的数据

页面开发

添加页面

添加空白页面，在页面中添加分割面板组件，实现左右两个区域

库存列表

用表格组件展示商品库存情况

添加数据组件

在页面上添加“商品库存统计”数据组件，用于查询商品库存、商品小计库存、合计库存

添加展现组件

在分割面板左侧区域中添加“表格”组件

• 绑定“商品库存统计”数据组件
• 添加“商品、规格、库存量”三列

在库存量列中添加“按钮”组件

• id 设置为 showChartBtn
• 文本属性设置为“表格当前行.库存量”
• 类型属性设置为“链接按钮”

每日库存

这里可能展示一个图表，或多个图表，因此使用列表组件，在列表组件中嵌套图表组件

列表组件的数据使用自定义数据，在点击库存量时生成数据

• 点击商品规格库存量，则生成一条数据
• 点击商品小计库存量，则商品的每种规格都生成一条数据

图表组件使用“商品库存”数据组件，在点击库存量时查询数据

• 点击商品规格库存量，则查询该商品规格的库存
• 点击商品小计库存量，则查询该商品的全部规格的库存

添加数据组件

在页面上添加“自定义数据”数据组件，临时存储商品及规格，用于列表显示

• id 设置为 modelData
• 显示名称设置为商品规格数据
• 在编辑列中添加三列
  • id：ID 列
  • name：存储商品名称
  • model：存储商品规格

在页面上添加“商品库存”数据组件

• id 设置为 storeData
• 不需要自动加载数据，清空自动模式
• 分页数据大小设置为-1，默认是20，必须修改为-1

添加展现组件

• 在分割面板右侧区域中添加“列表”组件
  • 绑定“商品规格数据”数据组件
• 在列表组件的列表模板中添加卡片组件
  • 标题设置为“列表当前行.商品名称+列表当前行.规格”
• 在卡片组件中添加图表组件
  • 数据属性选择“商品库存”数据组件
  • 过滤条件设置为“过滤条件.行记录.商品=列表当前行.商品名称”并且“过滤条件.行记录.规格=列表当前行.规格”，如下图所示
  • 设置style为：height: 300px; width: 100%;

注意选择“过滤条件中的行记录”中的列，如下图所示

实现业务逻辑

点击商品规格的库存量

• 将当前商品和规格写入“商品规则数据”
• 查询当前商品和规格的“商品库存”

点击商品小计的库存量

• 将当前商品的全部规格写入“商品规则数据”
• 查询当前商品全部规格的“商品库存”

给表格库存量列中的按钮，添加点击事件，开启扩展参数，添加一个参数，参数名称输入 row

参数值选择 table0当前行

点击“跳转”在 js 文件中生成 js 方法，在 w 文件中生成引用，在 js 方法中添加如下代码

react 代码

    onShowChartBtnClick = ({row}) => async (event) => {
        let data = [];
        if(row.recType == "rec"){
            data.push({
                id: wx.UUID.createUUID(),
                name: row.name,
                model: row.model
            })
            this.comp("storeData").setFilter("filter1",[{"name":"name",value:row.name,op:"eq"},{"name":"model",value:row.model,op:"eq"}]);
        }else if(row.recType == "subtotal"){
            let name = row.name.split("-小计")[0];
            let rows = this.comp("statisticsData").find(["name"],[name]);
            for(let rec of rows){
                data.push({
                    id: wx.UUID.createUUID(),
                    name: rec.name,
                    model: rec.model
                })        
            }
            this.comp("storeData").setFilter("filter1",[{"name":"name",value:name,op:"eq"}]);
        }
        await this.comp("storeData").refreshData();
        this.comp("modelData").loadData(data);
    }

vue 代码

let statisticsData = useData("statisticsData");
let modelData = useData("modelData");
let storeData = useData("storeData");

let onShowChartBtnClick = ({row}) => async (event) => {
    let data = [];
    if(row.recType == "rec"){
        data.push({
            id: wx.UUID.createUUID(),
            name: row.name,
            model: row.model
        })
        storeData.setFilter("filter1",[{"name":"name",value:row.name,op:"eq"},{"name":"model",value:row.model,op:"eq"}]);
    }else if(row.recType == "subtotal"){
        let name = row.name.split("-小计")[0];
        let rows = statisticsData.find(["name"],[name]);
        for(let rec of rows){
            data.push({
                id: wx.UUID.createUUID(),
                name: rec.name,
                model: rec.model
            })              
        }
        storeData.setFilter("filter1",[{"name":"name",value:name,op:"eq"}]);
    }
    await storeData.refreshData();
    modelData.loadData(data);
}