投稿

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

Vedu • • 程序开发 • 阅读 264

1、功能介绍

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

2、操作路径

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

新增

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

修改

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

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>

实现效果如下截图

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

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

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

上述是实现效果图

<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>首件体积(m³)</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>续件体积(m³)</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事件，点击执行的效果是：

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

实现代码

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的代码路径

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

// 确定;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增加一个行数据，那么对应运费表格就添加一行

效果如下：

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

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

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接口代码

Ruoyi-Vue商城：运费模版编辑修改源代码拆解

@ForbidSubmit@PostMapping("/save/{id}")@Log("新增/保存运费模板")@ApiOperation("新增/保存运费模板")@PreAuthorize("hasAnyRole(\'admin\',\'yxShippingTemplates:add\',\'yxShippingTemplates:edit\')")public ResponseEntity 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 */@Overridepublic 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来判断是更新是新增。

                                                        
内容出处：，


声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/30678.html
赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2023-07-11 06:59
下一篇 2023-07-12 07:15

相关推荐

发表评论

登录后才能评论