赋予前端无尽可能，打造自由自在的SKU实现

前端

2023-09-22 04:58:45

前言

在电商系统中，SKU（Stock Keeping Unit）是用于跟踪和管理库存的重要工具。SKU通常由一组字符组成，这些字符可以唯一标识一个产品或服务。SKU对于库存管理、订单处理和财务报告等方面都至关重要。

一、效果图

效果图

二、前言

公司项目做商品模块本人实现了商品sku生成部分在sku生成后可以选择禁用其中部分sku(实际场景部分商品没有sku中的一些规格的时候需要禁用部分sku)所以在前台选择sku的时候会出

三、实现思路

在数据库中创建一个sku表，用于存储sku信息。
在前端创建一个sku生成器，用于生成sku。
在前端创建一个sku管理界面，用于管理sku。
在前端创建一个sku禁用界面，用于禁用sku。

四、实现步骤

创建sku表

CREATE TABLE sku (
  id INT NOT NULL AUTO_INCREMENT,
  product_id INT NOT NULL,
  spec_1 VARCHAR(255) NOT NULL,
  spec_2 VARCHAR(255) NOT NULL,
  spec_3 VARCHAR(255) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  stock INT NOT NULL,
  status TINYINT(1) NOT NULL DEFAULT 1,
  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id),
  UNIQUE KEY product_id_spec_1_spec_2_spec_3 (product_id, spec_1, spec_2, spec_3)
);

创建sku生成器

function generateSku(product) {
  // 获取产品的规格信息
  const specs = product.specs;

  // 将规格信息组合成一个字符串
  let sku = '';
  for (let i = 0; i < specs.length; i++) {
    sku += specs[i].value + '-';
  }

  // 去除字符串末尾的连字符
  sku = sku.substring(0, sku.length - 1);

  // 返回sku
  return sku;
}

创建sku管理界面

<div class="sku-manager">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>商品ID</th>
        <th>SKU</th>
        <th>规格1</th>
        <th>规格2</th>
        <th>规格3</th>
        <th>价格</th>
        <th>库存</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for sku in skus %}
      <tr>
        <td>{{ sku.product_id }}</td>
        <td>{{ sku.sku }}</td>
        <td>{{ sku.spec_1 }}</td>
        <td>{{ sku.spec_2 }}</td>
        <td>{{ sku.spec_3 }}</td>
        <td>{{ sku.price }}</td>
        <td>{{ sku.stock }}</td>
        <td>{{ sku.status }}</td>
        <td>
          <a href="{{ url_for('sku.edit', id=sku.id) }}">编辑</a>
          <a href="{{ url_for('sku.delete', id=sku.id) }}">删除</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <a href="{{ url_for('sku.create') }}" class="btn btn-primary">新增SKU</a>
</div>

创建sku禁用界面

<div class="sku-disabler">
  <form action="{{ url_for('sku.disable') }}" method="post">
    <select name="sku_id">
      {% for sku in skus %}
      <option value="{{ sku.id }}">{{ sku.sku }}</option>
      {% endfor %}
    </select>

    <input type="submit" value="禁用" class="btn btn-danger">
  </form>
</div>

五、示例

// 假设我们有一个产品对象
const product = {
  id: 1,
  name: 'iPhone 13',
  specs: [
    {
      name: '颜色',
      value: '黑色'
    },
    {
      name: '内存',
      value: '256GB'
    },
    {
      name: '版本',
      value: '国行'
    }
  ]
};

// 使用sku生成器生成sku
const sku = generateSku(product);

// 输出sku
console.log(sku); // 输出结果：黑色-256GB-国行