动态增减表单项(vue+element)

阅读量：7016 次

发布时间：2019-06-28

本文共 6782 字，大约阅读时间需要 22 分钟。

最近遇到一个需求，要求给设备组下的所有商品设置商品会员价格，其流程为：选择会员等级和设备组获取未给此设备组设定该会员价格的商品，页面自动生成商品价格表单，进行设定商品会员价格。实现的代码如下：

一、前端：

1.HTML

2.JS

selectLevelOption(levelId){//选择会员等级时触发        let dgId = this.form.dgId;        if (dgId !=null && dgId != "" && dgId != undefined){          //先将domains数组清空          this.domains = [];         /* let formData = new FormData();          formData.append("groupId",dgId);          formData.append("levelId",levelId);*/          let query = {            groupId:dgId,            levelId:levelId          };          selectGoodsByDgIdLevelId(query)              .then(response => {                if (response.length == 0){                  this.$message({                    showClose:true,                    message:'目前没有商品可设置会员价格！',                    type:'warning'                  })                } else {                for (let i = 0; i < response.length; i++) {                  this.domains.push({                    goodsName:response[i].goodsName,                    goodsId:response[i].id,                    goodsPrice:'',                  });                 }                }              })        }      },      selectGoodsByGroupIdAdd(val){//根据设备组id获取相应的商品(添加使用)        let levelId = this.form.levelId;        if(levelId ==null || levelId == "" || levelId == undefined){          this.$message({            showClose:true,            message:'请选择会员等级',            type:"warning"          })        }else {        //先将domains数组清空        this.domains = [];        //console.log(val);        if(val != null && val != '' && val != undefined){          /*let formData = new FormData();          formData.append("groupId",val);          formData.append("levelId",levelId);*/          let query = {            groupId:val,            levelId:levelId          };          selectGoodsByDgIdLevelId(query)            .then(response => {              if (response.length == 0){                this.$message({                  showClose:true,                  message:'目前没有商品可设置会员价格！',                  type:'warning'                })              } else {                for (let i = 0; i < response.length; i++) {                  this.domains.push({                    goodsName:response[i].goodsName,                    goodsId:response[i].id,                    goodsPrice:'',                  });                }              }            })          }        }      },     create(formName) {        const set = this.$refs;        set[formName].validate(valid => {          if (valid) {            //console.log(JSON.stringify(this.domains));            let formData = new FormData();            formData.append("domains",JSON.stringify(this.domains));            formData.append("dgId",this.form.dgId);            formData.append("levelId",this.form.levelId);            //formData.append("isDelete","0");            addObj(formData)              .then(response => {                if (response.status == 500) {                  this.dialogFormVisible = false;                  this.$message({                    showClose:true,                    message:'添加失败，请检查商品是否已经设置过会员价格！',                    type:'error'                  })                }else {                  this.dialogFormVisible = false;                  this.getList();                  this.$notify({                    title: '成功',                    message: '创建成功',                    type: 'success',                    duration: 2000                  });                }              })          } else {            return false;          }        });      },

//跨域的路径export function selectGoodsByDgIdLevelId(query) {  return fetch({    url:'/api/goods/goods/selectGoodsByDgIdLevelId',    method:'get',    params: query  })}export function selectGoodsByDgIdLevelId(query) {  return fetch({    url:'/api/goods/goods/selectGoodsByDgIdLevelId',    method:'get',    params: query  })}

二、后端：

１.controller层

@RequestMapping(value = "/save", method = RequestMethod.POST)    @ResponseBody    public ObjectRestResponse
    
      save(@RequestParam("domains") String domains,LevelDevicePrice levelDevicePrice){        ObjectRestResponse
     
       objectRestResponse = new ObjectRestResponse<>();        List
      
        levelDevicePrices = null;        Map
       
         params = new HashMap<>();        params.put("dg_id",levelDevicePrice.getDgId());        params.put("level_id",levelDevicePrice.getLevelId());        List
        
          list = JSON.parseArray(domains,LevelDevicePrice.class);        if(list.size()>0){            for (int i = 0; i < list.size(); i++) {                params.put("goods_id",list.get(i).getGoodsId());                levelDevicePrices = baseBiz.selectByProperty(params);                if(levelDevicePrices.size()>0){                    break;                }            }            if (levelDevicePrices.size()>0){                objectRestResponse.setStatus(500);                objectRestResponse.setMessage("添加失败！");            }else {                for (int i = 0; i < list.size(); i++) {                    if (list.get(i).getGoodsPrice() != null){                        list.get(i).setDgId(levelDevicePrice.getDgId());                        list.get(i).setLevelId(levelDevicePrice.getLevelId());                        list.get(i).setIsDelete("0");                        baseBiz.insertSelective(list.get(i));                    }                }            }        }        return objectRestResponse;    }

2.biz层

/**     * 根据property动态的条件获取数据     * @param params     * @return     */    public List
    
      selectByProperty(Map
     
       params) {        return mapper.selectByProperty(params);    }

3.mapper层

/**     * 根据property动态的条件获取数据     * @param params    */    List
    
      selectByProperty(@Param("params") Map
     
       params);

4.mybatis.xml

转载于:https://my.oschina.net/u/3734228/blog/3042163

你可能感兴趣的文章