Giter Club home page Giter Club logo

vue-sku's Introduction

vue-sku

  • 用 element-ui 实现了 zent 的 SKU 规格选择器组件
  • 后台编辑 SKU
  • 为每一种 SKU 设置额外的属性,如价格、库存等
  • 前端展示并选择 SKU

2019-11-03 更新内容

  • async 分支,实现了从模拟请求后端 mock 数据,到获取当前的 sku 参数传递给后端的完整 demo
  • 删除了合并单元格功能

在线 DEMO(master 分支)

注意:本项目只提供 DEMO 提供参考,并未打包成 npm package DEMO

参考实现

文档

Flatten、isSame 直接引用了 zent sku 官方文档

Flatten

SKU.flatten(sku, items, options) 通过计算笛卡尔积,将树形的 value 变成扁平的数组

参数 说明 类型 默认值 备选值
sku 当前选中规格的 value array []
items 当前已存在的数据 array []
options 可配置参数 object {} optionValue: 'id', optionText: 'value'
import { flatten } from "src/utils/sku";

let skus = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

console.log(flatten(skus));
/**
 * output:
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */

// 为某个 SKU 添加额外字段,例如标价、成本、工厂指导价等
let items = [
  {
    price: "10.00",
    code: "AE86",
    skus: [
      { k_id: 1, k: "颜色", v_id: 11, v: "红色" },
      { k_id: 2, k: "尺寸", v_id: 22, v: "小" }
    ]
  }
];
console.log(flatten(skus, items));

/**
 * output:
 * [
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]},
 *   {
 *    "price":"10.00",
 *    "code":"AE86",
 *    "skus":[{"k_id":1,"k":"颜色","v_id":11,"v":"红色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]
 *   },
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":21,"v":"大"}]}
 *   {"skus":[{"k_id":1,"k":"颜色","v_id":12,"v":"蓝色"},{"k_id":2,"k":"尺寸","v_id":22,"v":"小"}]}
 * ]
 */

isSame

import { isSame } from "src/utils/sku";

let skuA = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

let skuB = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

let skuC = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 2,
    value: "尺寸",
    leaf: [{ id: 22, value: "小" }, { id: 21, value: "大" }]
  }
];

let skuD = [
  {
    id: 1,
    value: "颜色",
    leaf: [{ id: 11, value: "红色" }, { id: 12, value: "蓝色" }]
  },
  {
    id: 3,
    value: "尺寸",
    leaf: [{ id: 21, value: "大" }, { id: 22, value: "小" }]
  }
];

console.log(isSame(skuA, skuB));
console.log(isSame(skuA, skuC));
console.log(isSame(skuA, skuD));

/**
 * output:
 *
 * true
 * false
 * false
 */

Flatten、isSame 函数如何在 Python 里使用

  1. 打开源代码
  2. 源代码有三个函数 getLevels flatten isEqual,依次复制三个函数到 ES6 转 ES5 网站(相当于 python3 转 python2)
  3. 注意,每个函数前的 export 语句要删除。即 export function => function
  4. 使用 Jiphy 把生成的 ES5 JS 代码转为 python

感谢第三方库

本地预览项目

git clone https://github.com/zaxlct/vue-sku
npm install
npm run serve

TODO

  • 库存为零时,选择 sku 的按钮 disabled

提问

  • 有问题可发起 issues,或加 QQ 群: 163801325
  • 有想法亦可发起 PR

vue-sku's People

Contributors

dependabot[bot] avatar zaxlct avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue-sku's Issues

使用elinput 文本域有时候无法输入的问题

不知道作者有没有发现在规格那一栏的文本域输入框无法输入,只有视图更新一遍才能输入?
解决方案:
<ElInput size="medium" placeholder="请输入价格" value={this.row.specsPrice} oninput={(e) => { this.row.specsPrice = e this.$forceUpdate() }} ></ElInput>

希望大佬改造一下sku vue

看了 大佬的vue-sku很符合我的需求
想使用,结果大佬用的是Egrid基于 Element-UI Table 组件封装的高阶表格组件😢
看的我一脸懵比
我一个后端的使用 Element-UI 很吃力了,希望大佬能改造一个版本使用原生的 Element-UI Table
感激不尽!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.