1、功能介绍

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

2、操作路径

新增

修改

3、新增前端界面

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

  
    按件数
    按重量
    按体积
  

实现效果如下截图

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

上述是实现效果图

  
    
      
        
        
          
          
        
        
          
        
        
          
          
        
        
          
        
        
          
        

      
      
        
          单独添加配送区域
        
      
    
  

如上述第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