1、功能介绍

创建新的运费模版和修改运费模版，例如可以单独设置广东的收单运费和续费运费。可以单独设置某个省份包邮

2、操作路径

新增

修改

3、新增前端界面

如下代码片段，计费方式，使用单选框组件

<el-form-item label="计费方式：" props="state" >
  <el-radio-group class="radio" v-model="formData.type" >
    <el-radio :label="1">按件数</el-radio>
    <el-radio :label="2">按重量</el-radio>
    <el-radio :label="3">按体积</el-radio>
  </el-radio-group>
</el-form-item>

实现效果如下截图

如下是配送区域及运费代码

上述是实现效果图

<el-row :gutter="24" type="flex">
  <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
    <el-form-item class="label" label="配送区域及运费：" props="state">
      <el-table
        ref="table"
        :data="templateList"
        empty-text="暂无数据"
        border
      >
        <el-table-column prop="regionName" label="可配送区域" width="130" />
        <el-table-column prop="first" label="首件" width="120">
          <template slot="header" slot-scope="scope">
            <span v-if="formData.type == 1">首件</span>
            <span v-else-if="formData.type == 2">首件重量(KG)</span>
            <span v-else>首件体积(m3)</span>
          </template>
          <template slot-scope="scope">
            <span><el-input type="text" v-model="scope.row.first" /></span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="运费（元）" width="110">
          <template slot-scope="scope">
            <span><el-input type="text" v-model="scope.row.price"/></span>
          </template>
        </el-table-column>
        <el-table-column prop="_continue" label="续件" width="120">
          <template slot="header" slot-scope="scope">
            <span v-if="formData.type == 1">续件</span>
            <span v-else-if="formData.type == 2">续件重量(KG)</span>
            <span v-else>续件体积(m3)</span>
          </template>
          <template slot-scope="scope">
            <span><el-input type="text" v-model="scope.row._continue"/></span>
          </template>
        </el-table-column>
        <el-table-column prop="continue_price" label="续费（元）" width="110">
          <template slot-scope="scope">
            <span><el-input type="text" v-model="scope.row.continue_price"/></span>
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <a v-if="scope.row.regionName!=='默认全国'" @click="delCity(index,1)">删除</a>
          </template>
        </el-table-column>

      </el-table>
      <el-row type="flex" class="addTop">
        <el-col>
          <el-button type="primary" icon="md-add" @click="addCity(1)">单独添加配送区域</el-button>
        </el-col>
      </el-row>
    </el-form-item>
  </el-col>
</el-row>

如上述第1行代码，使用el-row进行页面布局

如上述第2行代码，使用el-col ，占一列

如上述第3行代码，使用el-form表单标签，下面对内容都是表单反问

如上述第4行代码，使用table表格。

如上述第18，23，33，38行代码，在el-table-column里面使用输入框，对应表示设置值，首件，运费（元），续件，续费（元），使用意思是满足购买多少件的运费，第二次续多少件，续费是多少。

分别对应的变量是scope.row.first，scope.row.price，scope.row._continue，scope.row.continue_price。row是一个数组。可以听看见多行

如上述第50行代码，绑定addCity事件，点击执行的效果是：

实现代码

import city from './city';
components: {crudOperation, rrOperation, udOperation, MaterialList, city},
// 单独添加配送区域
addCity (type) {
  this.$refs.city.addressView = true;
  this.type = type;
  this.$refs.city.getCityList()
},

如上述第7行代码，打开组件city，如下是city的代码路径

// 确定;
confirm () {
  let that = this;
  // 被选中的省市；
  let selectList = [];
  console.log("city:"+that.cityList[0].children)
  that.cityList.forEach(function (item, key) {
    let data = {};
    if (item.checked) {
      data = {
        name: item.name,
        city_id: item.city_id,
        children: []
      };

    }
    console.log("data:"+data)
    that.cityList[key].children.forEach(function (i, k) {
      if (i.checked) {
        data.children.push({
          city_id: i.city_id
        })
      }
    });
    if (data.city_id !== undefined) {
      selectList.push(data);
    }
  });
  console.log(selectList);
  if (selectList.length === 0) {
    return this.$message({
      message:'至少选择一个省份或者城市',
      type: 'error'
    });
  } else {
    this.$emit('selectCity', selectList, this.type);
    that.addressView = false;
    this.cityList = []
  }
},

如上代码是选择省份后绑定的点击事件

如上述36行代码，执行父级组件selectCity，并将选择好的省份数据（selectList）回传给父级函数。

如下是父级selectCity事件函数

selectCity: function (data, type) {
  let cityName = data.map(function (item) {
    return item.name;
  }).join(';');
  switch (type) {
    case 1:
      this.templateList.push({
        region: data,
        regionName: cityName,
        first: 1,
        price: 0,
        _continue: 1,
        continue_price: 0
      });
      break;
    case 2:
      this.appointList.push({
        place: data,
        placeName: cityName,
        a_num: 0,
        a_price: 0
      });
      break;
  }
},

如上述第7行代码，表格的data增加一个行数据，那么对应运费表格就添加一行

效果如下：

填写完上面的信息，点击提交，提交代码如下：

let data = {
  appoint_info: that.appointList,
  region_info: that.templateList,
  sort: that.formData.sort,
  type: that.formData.type,
  name: that.formData.name,
  appoint: that.formData.appoint_check
};
crudYxShippingTemplates.add(data,that.id).then(() => {
  if(that.id){
    this.crud.status.edit = CRUD.STATUS.NORMAL
    this.crud.editSuccessNotify()
  }else{
    this.crud.status.add = CRUD.STATUS.NORMAL
    this.crud.addSuccessNotify()
  }

  this.crud.resetForm()
  this.crud.toQuery()

  this.formData = {
    type: 1,
    sort: 0,
    name: '',
    appoint_check: 0
  };
  this.appointList = [];
  this.addressView = false;
  this.templateList = [
    {
      region: [
        {
          name: '默认全国',
          city_id: 0
        }
      ],
      regionName: '默认全国',
      first: 1,
      price: 0,
      continue: 1,
      continue_price: 0
    }
  ];
});

如上述第一行代码，设置请求后台的数据，数据格式是json

如上述第9行代码，crudYxShippingTemplates.add 调用后台javaapi接口，添加运费模板

4、API接口代码

@ForbidSubmit
@PostMapping("/save/{id}")
@Log("新增/保存运费模板")
@ApiOperation("新增/保存运费模板")
@PreAuthorize("hasAnyRole('admin','yxShippingTemplates:add','yxShippingTemplates:edit')")
public ResponseEntity<Object> create(@PathVariable Integer id,
                                     @Validated @RequestBody ShippingTemplatesDto shippingTemplatesDto){
    yxShippingTemplatesService.addAndUpdate(id,shippingTemplatesDto);
    return new ResponseEntity<>(HttpStatus.CREATED);
}

如上述第1行代码。@ForbidSubmit。注解，防止重复提交

如上述第2行代码，对外提供post的请求方式，请求的url地址是"/save/{id}，其中id作为路径参数。

如上述第6行代码，@PathVariable Integer id 从路径总获取id内容值。

如上述第7行代码，@Validated @RequestBody ShippingTemplatesDto shippingTemplatesDto 通过请求的body，获取json数据格式，并通过json转换成为shippingTemplatesDto对象，

如上述第8行代码，新增或者更新运费模版

如上述第9行代码，返回统一数据格式给前端。

/**
 * 新增与更新模板
 * @param id 模板id
 * @param shippingTemplatesDto ShippingTemplatesDto
 */
@Override
public void addAndUpdate(Integer id,ShippingTemplatesDto shippingTemplatesDto) {
    if(ShopCommonEnum.ENABLE_1.getValue().equals(shippingTemplatesDto.getAppoint())
            && shippingTemplatesDto.getAppointInfo().isEmpty()){
        throw new YshopException("请指定包邮地区");
    }
    YxShippingTemplates shippingTemplates = new YxShippingTemplates();
    BeanUtil.copyProperties(shippingTemplatesDto,shippingTemplates);
    shippingTemplates.setRegionInfo(JSON.toJSONString(shippingTemplatesDto.getRegionInfo()));
    shippingTemplates.setAppointInfo(JSON.toJSONString(shippingTemplatesDto.getAppointInfo()));
    if(id != null && id > 0){
        shippingTemplates.setId(id);
        this.updateById(shippingTemplates);
    }else{
        this.save(shippingTemplates);
    }

    this.saveRegion(shippingTemplatesDto,shippingTemplates.getId());
    this.saveFreeReigion(shippingTemplatesDto,shippingTemplates.getId());
}

如上述是根据id来判断是更新是新增。

计划

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

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

3、电商项目源代码拆解

4、JEECG低代码开发平台

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