上一章节已经讲解列表，本章节讲解如何新增，修改，删除功能

章节目录

1、操作界面

2、数据库记录

3、前端代码拆解

4、后端代码拆解

一、操作界面

左侧菜单栏->商品规格->新增

新增页面

填写标题名称，点击添加新规格，界面新增一行输入框，规格和规格值

输入规格和规格值点击右侧的确认

上面已经显示颜色的规格，并有一个规格值是红色，如果是多个规格，假设还需要增加白色，那么在左边的空格输入白色，点击添加

除了颜色的规格之外，可能还有尺寸等规格，那么需要在下面点击添加新的规格

设置完，点击确定，返回列表，可以看到新的规格值

二、数据库记录

三、前端编辑代码

顶部新增按钮代码：

<el-button
  v-if="crud.optShow.add"
  v-permission="permission.add"
  class="filter-item"
  size="mini"
  type="primary"
  icon="el-icon-plus"
  @click="crud.toAdd"
>
  新增
</el-button>

如下是新增页面代码，代码文件名称是from.vue

四、添加规格页面实现逻辑

4.1、添加规格值按钮功能

点击上图添加规格，显示下图规格和规格值的输入框

下面是界面代码片段

 <el-col :span="24" v-if="isBtn" class="mt10">
    <el-col :span="9" class="mr15">
      <el-form-item label="规格：">
        <el-input placeholder="请输入规格" v-model="attrsName"/>
      </el-form-item>
    </el-col>
    <el-col :span="9" class="mr20">
      <el-form-item label="规格值：">
        <el-input v-model="attrsVal" placeholder="请输入规格值"/>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" @click="createAttrName">确定</el-button>
    </el-col>
    <el-col :span="2">
      <el-button @click="offAttrName">取消</el-button>
    </el-col>
  </el-col>
</el-row>
<el-button type="primary" icon="md-add" @click="addBtn" v-if="!isBtn" class="ml95 mt10">添加新规格</el-button>

点击事件@click="addBtn",执行的逻辑是this.isBtn = true;

如上述第1行代码，v-if="isBtn"，isBtn设置为true，那么显示规格和规格值的输入框

如上述第20行代码 v-if="!isBtn"，如果isBtn设置为true，那么按钮隐藏。

如上述第13行代码，用户输入规格和规格值后点击确定，该按钮绑定了@click="createAttrName"处理事件，如下是事件代码片段

// 添加规则名称
createAttrName () {
  if (this.attrsName && this.attrsVal) {
    let data = {
      value: this.attrsName,
      detail: [
        this.attrsVal
      ]
    };
    this.formData.ruleValue.push(data);
    var hash = {};
    this.formData.ruleValue = this.formData.ruleValue.reduce(function (item, next) {
      /* eslint-disable */
      hash[next.value] ? '' : hash[next.value] = true && item.push(next);
      return item
    }, [])
    this.attrsName = '';
    this.attrsVal = '';
    this.isBtn = false;
  } else {
    return this.$message.warning('请添加规格名称！');
  }
},

如上述第4行代码，初始化一个变量data，data是一个json数据格式，里面有两个值，一个是value，一个是detail，其中detail是一个数组类型。

数据封装后的效果是：[{"value": "颜色", "detail": ["红色"]}]

如上述第10行代码，将规格数据push插入this.formData.ruleValue变量。

如上述第12行代码，this.formData.ruleValue.reduce：是循环变量ruleValue，目的是将规格去重。

4.2、已经添加规格和规格值的显示代码

<el-col :span="23" class="noForm" v-for="(item, index) in formData.ruleValue" :key="index">
  <el-form-item label=" ">
    <div class="acea-row row-middle"><span class="mr5">{{item.value}}</span>
      <i class="el-icon-circle-close"  @click="handleRemove(index)"></i>
    </div>
    <div class="rulesBox">
      <el-tag   class="mb5" style="margin: 2px 4px 2px 0;" closable
      v-for="(j, indexn) in item.detail" :key="indexn"
      :name="j" @close="handleRemove2(item.detail,indexn)">{{j}}
      </el-tag>
      <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
                style="width: 170px">
        <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
      </el-input>
    </div>
  </el-form-item>
</el-col>

如上述第一行代码，循环formData.ruleValue的值进行显示已经配置的规格和规格值，该值是从3.1设置获取，实现的效果图如下：

如上述第13行代码，添加规格值

// 添加属性
createAttr (num, idx) {
  if (num) {
    this.formData.ruleValue[idx].detail.push(num);
    var hash = {};
    this.formData.ruleValue[idx].detail = this.formData.ruleValue[idx].detail.reduce(function (item, next) {
      hash[next] ? '' : hash[next] = true && item.push(next);
      return item
    }, [])
  } else {
    return this.$message.warning('请添加属性！');
  }
}

如上述第4行代码，this.formData.ruleValue[idx].detail.push(num); 先找到idx的detail对象，并将num的数据插入detail对象中

原[{"value": "颜色", "detail": ["红色"]}]插入后数据变更为[{"value": "颜色", "detail": ["红色"，"白色"]}]

如上述第6行代码，删除重复规格值。

五、后端代码

@ForbidSubmit
@PostMapping("/save/{id}")
@Log("新增/修改sku规则")
@ApiOperation("新增/修改sku规则")
@PreAuthorize("hasAnyRole('admin','yxStoreProductRule:add','yxStoreProductRule:edit')")
public ResponseEntity<Object> create(@Validated @RequestBody YxStoreProductRule resources,@PathVariable Integer id){
    if(id != null && id > 0){
        resources.setId(id);
        yxStoreProductRuleService.updateById(resources);
    }else{
        yxStoreProductRuleService.save(resources);
    }

    return new ResponseEntity<>(HttpStatus.CREATED);
}


@ForbidSubmit
@Log("删除sku规则")
@ApiOperation("删除sku规则")
@PreAuthorize("@el.check('admin','yxStoreProductRule:del')")
@DeleteMapping
public ResponseEntity<Object> deleteAll(@RequestBody Integer[] ids) {
    yxStoreProductRuleService.removeByIds(new ArrayList<>(Arrays.asList(ids)));
    return new ResponseEntity<>(HttpStatus.OK);
}

如上述代码是增加/修改/删除的接口代码。

如上述第5，21行代码，验证权限，有权限则继续执行，没有权限则拒绝

如上述第7行代码，判断前端送过来的接口数据是否有id，如果有id，则是更新数据库，如果没有id，则新增数据库。

如上述第9行代码，更新数据库

如上述第11行代码，插入数据库

如上述第14行代码，返回统一封装的数据格式

如上述第24行代码，批量删除数据库

计划

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

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

3、电商项目源代码拆解

4、JEECG低代码开发平台

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