大家好，今天给各位分享网站源码分享编辑的一些知识，其中也会对网站源码分享编辑怎么弄进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
1、功能介绍
创建新的运费模版和修改运费模版，例如可以单独设置广东的收单运费和续费运费。可以单独设置某个省份包邮
2、操作路径
新增
修改
3、新增前端界面
如下代码片段，计费方式，使用单选框组件
<el-form-itemlabel=&34;props=&34;>\n<el-radio-groupclass=&34;v-model=&34;>\n<el-radio:label=&34;>按件数</el-radio>\n<el-radio:label=&34;>按重量</el-radio>\n<el-radio:label=&34;>按体积</el-radio>\n</el-radio-group>\n</el-form-item>
实现效果如下截图
如下是配送区域及运费代码
上述是实现效果图
<el-row:gutter=&34;type=&34;>\n<el-col:xl=&34;:lg=&34;:md=&34;:sm=&34;:xs=&34;>\n<el-form-itemclass=&34;label=&34;props=&34;>\n<el-table\nref=&34;\n:data=&34;\nempty-text=&34;\nborder\n>\n<el-table-columnprop=&34;label=&34;width=&34;/>\n<el-table-columnprop=&34;label=&34;width=&34;>\n<templateslot=&34;slot-scope=&34;>\n<spanv-if=&34;>首件</span>\n<spanv-else-if=&34;>首件重量(KG)</span>\n<spanv-else>首件体积(m3)</span>\n</template>\n<templateslot-scope=&34;>\n<span><el-inputtype=&34;v-model=&34;/></span>\n</template>\n</el-table-column>\n<el-table-columnprop=&34;label=&34;width=&34;>\n<templateslot-scope=&34;>\n<span><el-inputtype=&34;v-model=&34;/></span>\n</template>\n</el-table-column>\n<el-table-columnprop=&34;label=&34;width=&34;>\n<templateslot=&34;slot-scope=&34;>\n<spanv-if=&34;>续件</span>\n<spanv-else-if=&34;>续件重量(KG)</span>\n<spanv-else>续件体积(m3)</span>\n</template>\n<templateslot-scope=&34;>\n<span><el-inputtype=&34;v-model=&34;/></span>\n</template>\n</el-table-column>\n<el-table-columnprop=&34;label=&34;width=&34;>\n<templateslot-scope=&34;>\n<span><el-inputtype=&34;v-model=&34;/></span>\n</template>\n</el-table-column>\n<el-table-columnlabel=&34;>\n<templateslot-scope=&34;>\n<av-if=&39;默认全国&34;@click=&34;>删除</a>\n</template>\n</el-table-column>\n\n</el-table>\n<el-rowtype=&34;class=&34;>\n<el-col>\n<el-buttontype=&34;icon=&34;@click=&34;>单独添加配送区域</el-button>\n</el-col>\n</el-row>\n</el-form-item>\n</el-col>\n</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事件，点击执行的效果是：
实现代码
importcityfrom&39;;\ncomponents:{crudOperation,rrOperation,udOperation,MaterialList,city},\n//单独添加配送区域\naddCity(type){\nthis.$refs.city.addressView=true;\nthis.type=type;\nthis.$refs.city.getCityList()\n},
如上述第7行代码，打开组件city，如下是city的代码路径
//确定;\nconfirm(){\nletthat=this;\n//被选中的省市；\nletselectList=[];\nconsole.log(&34;+that.cityList[0].children)\nthat.cityList.forEach(function(item,key){\nletdata={};\nif(item.checked){\ndata={\nname:item.name,\ncity_id:item.city_id,\nchildren:[]\n};\n\n}\nconsole.log(&34;+data)\nthat.cityList[key].children.forEach(function(i,k){\nif(i.checked){\ndata.children.push({\ncity_id:i.city_id\n})\n}\n});\nif(data.city_id!==undefined){\nselectList.push(data);\n}\n});\nconsole.log(selectList);\nif(selectList.length===0){\nreturnthis.$message({\nmessage:&39;,\ntype:&39;\n});\n}else{\nthis.$emit(&39;,selectList,this.type);\nthat.addressView=false;\nthis.cityList=[]\n}\n},
如上代码是选择省份后绑定的点击事件
如上述36行代码，执行父级组件selectCity，并将选择好的省份数据（selectList）回传给父级函数。
如下是父级selectCity事件函数
selectCity:function(data,type){\nletcityName=data.map(function(item){\nreturnitem.name;\n}).join(&39;);\nswitch(type){\ncase1:\nthis.templateList.push({\nregion:data,\nregionName:cityName,\nfirst:1,\nprice:0,\n_continue:1,\ncontinue_price:0\n});\nbreak;\ncase2:\nthis.appointList.push({\nplace:data,\nplaceName:cityName,\na_num:0,\na_price:0\n});\nbreak;\n}\n},
如上述第7行代码，表格的data增加一个行数据，那么对应运费表格就添加一行
效果如下：
填写完上面的信息，点击提交，提交代码如下：
letdata={\nappoint_info:that.appointList,\nregion_info:that.templateList,\nsort:that.formData.sort,\ntype:that.formData.type,\nname:that.formData.name,\nappoint:that.formData.appoint_check\n};\ncrudYxShippingTemplates.add(data,that.id).then(()=>{\nif(that.id){\nthis.crud.status.edit=CRUD.STATUS.NORMAL\nthis.crud.editSuccessNotify()\n}else{\nthis.crud.status.add=CRUD.STATUS.NORMAL\nthis.crud.addSuccessNotify()\n}\n\nthis.crud.resetForm()\nthis.crud.toQuery()\n\nthis.formData={\ntype:1,\nsort:0,\nname:&39;,\nappoint_check:0\n};\nthis.appointList=[];\nthis.addressView=false;\nthis.templateList=[\n{\nregion:[\n{\nname:&39;,\ncity_id:0\n}\n],\nregionName:&39;,\nfirst:1,\nprice:0,\ncontinue:1,\ncontinue_price:0\n}\n];\n});
如上述第一行代码，设置请求后台的数据，数据格式是json
如上述第9行代码，crudYxShippingTemplates.add调用后台javaapi接口，添加运费模板
4、API接口代码
@ForbidSubmit\n@PostMapping(&34;)\n@Log(&34;)\n@ApiOperation(&34;)\n@PreAuthorize(&39;admin&39;yxShippingTemplates:add&39;yxShippingTemplates:edit&34;)\npublicResponseEntity<Object>create(@PathVariableIntegerid,\n@Validated@RequestBodyShippingTemplatesDtoshippingTemplatesDto){\nyxShippingTemplatesService.addAndUpdate(id,shippingTemplatesDto);\nreturnnewResponseEntity<>(HttpStatus.CREATED);\n}
如上述第1行代码。@ForbidSubmit。注解，防止重复提交
如上述第2行代码，对外提供post的请求方式，请求的url地址是&34;请指定包邮地区”);\n}\nYxShippingTemplatesshippingTemplates=newYxShippingTemplates();\nBeanUtil.copyProperties(shippingTemplatesDto,shippingTemplates);\nshippingTemplates.setRegionInfo(JSON.toJSONString(shippingTemplatesDto.getRegionInfo()));\nshippingTemplates.setAppointInfo(JSON.toJSONString(shippingTemplatesDto.getAppointInfo()));\nif(id!=null&&id>0){\nshippingTemplates.setId(id);\nthis.updateById(shippingTemplates);\n}else{\nthis.save(shippingTemplates);\n}\n\nthis.saveRegion(shippingTemplatesDto,shippingTemplates.getId());\nthis.saveFreeReigion(shippingTemplatesDto,shippingTemplates.getId());\n}
如上述是根据id来判断是更新是新增。
计划
1、ruoyi-flowable-plus工作流拆解
2、ruoyi-flowable-plus如何快速开发
3、电商项目源代码拆解
4、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我
关于本次网站源码分享编辑和网站源码分享编辑怎么弄的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。