使用avalon实现SKU组合查询功能

SKU(stock keeping unit库存量单位)组合查询是网上商场一个非常常用的功能。具体来说,一件商品会有许多型号,许多颜色,许多产地,许多码寸,而满足用户选中的这些条件的具体商品可能有库存,也可能没有。我们把型号,颜色,产地,码寸什么的都分成一栏,每一栏的选项都有三种形态,可选,不可选,已选中。选中某一栏的一个选项的话,会影响到另外一些栏的项目的选中状态。如下图:

o_sku.jpg

网上也有文章介绍它们的实现,涉及大量复杂的算法,HTML都是用JS动态生成的,非常不直观。并且那个东西这么简单,还要用那么复杂的算法啊,脑子被狗吃了。

在avalon中,由于VM对象是一个状态机,对这种联动功能有着天然的优势。我们只要把数据列出来,剩下的事就交给avalon好了。

下面是模板,它是由GITHUB的一个例子改过来的。一共五栏,换言之,VM有五个数组。然后里面每顶通过ms-class处理它们的状态。选择是通过点击事件实现,因此有ms-click。每个项目是否选中,通过涨是否等于某一个值判定,因此我搞了versionsChecked,colorsChecked,comboChecked等变量。


 <div ms-controller="sku" id="sku">
            <div>
                版本:
                <span ms-each-el="versions">
                    <span class="cell" ms-click="select(el, 'versions')"  ms-class-disabled='el.disabled' ms-class-checked='versionsChecked == el.value'>{{el.text}}</span>
                </span>
            </div>
            <div>
                机身颜色:
                <span ms-each-el="colors">
                    <span class="cell" ms-click="select(el, 'colors')" ms-class-disabled='el.disabled' ms-class-checked='colorsChecked == el.value'>{{el.text}}</span>
                </span>
            </div>
            <div>
                手机套餐:
                <span ms-each-el="combo">
                    <span class="cell"  ms-click="select(el, 'combo')" ms-class-disabled='el.disabled'  ms-class-checked='comboChecked == el.value'>{{el.text}}</span>
                </span>
            </div>
            <div>
                机身内存:
                <span ms-each-el="memory">
                    <span class="cell" ms-click="select(el, 'memory')" ms-class-disabled='el.disabled' ms-class-checked='memoryChecked == el.value'>{{el.text}}</span>
                </span>
            </div>
        </div>
sku最麻烦之处在于,点击了某一栏的项目会影响到其他栏的项目,这种逻辑我抽象成一个command命令,以columnName:item1,item2...;columnName2:item3,item4...;保存。

具体如下:


            var model = avalon.define("sku", function(vm) {
            vm.select = function(el, name) {
                    if (el.disabled)
                        return
                    var command = el.command
                    model[name + "Checked"] = el.value
                    command.split(";").forEach(function(str) {
                        var arr = str.split(":")
                        var check = arr[1]
                        var array = model[arr[0]] || []
                        array.forEach(function(elem) {
                            elem.disabled = !!(check && check.indexOf(elem.value) !== -1)
                        })
                    })
                }
                vm.versions = [
                    {value: 'cn', "text": "中国大陆", disabled: false,  command: "colors:lightgreen;"},
                    {value: "hk", text: "港澳台", checked: false,  command: "colors:lightyellow,black,blue,gray,yellow,white"},
                    {value: "eu", text: "欧洲", checked: false,  command: "colors:lightyellow,blue,gray,yellow,red,lightgreen"}
                ]
                vm.versionsChecked = ""
               
              
                vm.colors = [
                    {value: 'lightyellow', "text": "浅黄色", disabled: false, command: "versions:hk,eu"},
                    {value: "black", text: "黑色", disabled: false, command: "versions:hk"},
                    {value: "blue", text: "蓝色", disabled: false, command: "versions:hk,eu"},
                    {value: "gray", text: "浅灰色", disabled: false, command: "versions:hk,eu"},
                    {value: "yellow", text: "黄色", disabled: false, command: "versions:hk,eu"},
                    {value: "white", text: "白色", disabled: false, command: "versions:hk"},
                    {value: "lightgreen", text: "浅绿色", disabled: false, command: "versions:cn,eu;combo:set2,set3"},
                    {value: "red", text: "红色", disabled: false, command: "versions:eu"}

                ]
                vm.colorsChecked = ""
               
                vm.combo = [
                    {value: 'standard', "text": "官方标配", disabled: false,command: ""},
                    {value: "set2", text: "套餐二", disabled: false,command: "colors:lightgreen"},
                    {value: "set3", text: "套餐三", disabled: false,command: ""}
                ]
                vm.comboChecked = ""
               
                vm.memory = [{value: "32g", text: "32G", disabled: false,command: ""}]
                vm.memoryChecked = "32g"
            })

再加一点CSS装饰一下就搞定。


            #sku .cell{
                display:inline-block;
                padding:2px 5px;
                border:2px solid #ccc;
                color:#000;
                cursor:pointer;
                height: 18px;
                line-height: 18px;
            }
            #sku .cell.checked{
                border-color:red!important;
                color:red!important;
            }
            #sku .cell.disabled{
                border:2px dashed #d6d6d6;
                color:#cdcdcd;
                cursor:not-allowed;
            }
            #sku div{
                margin-top:10px;
            }
o_sku.gif

大家可以到我的GITHUB,下载回来运行

数据治理是确保数据准确性、可靠性、安全性、可用性和完整性的体系和框架。它定义了组织内部如何使用、存储、保护和共享数据的规则和流程。数据治理的重要性随着数字化转型的加速而日益凸显,它能够提高决策效率、增强业务竞争力、降低风险,并促进业务创新。有效的数据治理体系可以确保数据在采集、存储、处理、共享和保护等环节的合规性和有效性。 数据质量管理是数据治理中的关键环节,它涉及数据质量评估、数据清洗、标准化和监控。高质量的数据能够提升业务决策的准确性,优化业务流程,并挖掘潜在的商业价值。随着大数据和人工智能技术的发展,数据质量管理在确保数据准确性和可靠性方面的作用愈发重要。企业需要建立完善的数据质量管理和校验机制,并通过数据清洗和标准化提高数据质量。 数据安全与隐私保护是数据治理中的另一个重要领域。随着数据量的快速增长和互联网技术的迅速发展,数据安全与隐私保护面临前所未有的挑战。企业需要加强数据安全与隐私保护的法律法规和技术手段,采用数据加密、脱敏和备份恢复等技术手段,以及加强培训和教育,提高安全意识和技能水平。 数据流程管理与监控是确保数据质量、提高数据利用率、保护数据安全的重要环节。有效的数据流程管理可以确保数据流程的合规性和高效性,而实时监控则有助于及时发现并解决潜在问题。企业需要设计合理的数据流程架构,制定详细的数据管理流程规范,并运用数据审计和可视化技术手段进行监控。 数据资产管理是将数据视为组织的重要资产,通过有效的管理和利用,为组织带来经济价值。数据资产管理涵盖数据的整个生命周期,包括数据的创建、存储、处理、共享、使用和保护。它面临的挑战包括数据量的快速增长、数据类型的多样化和数据更新的迅速性。组织需要建立完善的数据管理体系,提高数据处理和分析能力,以应对这些挑战。同时,数据资产的分类与评估、共享与使用规范也是数据资产管理的重要组成部分,需要制定合理的标准和规范,确保数据共享的安全性和隐私保护,以及建立合理的利益分配和权益保障机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值