動態增減表單項(vue+element)

最近遇到一個需求，要求給設備組下的全部商品設置商品會員價格，其流程爲：選擇會員等級和設備組獲取未給此設備組設定該會員價格的商品，頁面自動生成商品價格表單，進行設定商品會員價格。實現的代碼以下：

   1、前端：

         1.HTML

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="會員等級" prop="levelId">
          <el-select v-model="form.levelId" @change="selectLevelOption($event)" filterable placeholder="請選擇會員">
            <el-option v-for="item in levels" :key="item.id" :label="item.levelName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="設備組" prop="dgId">
          <el-select v-model="form.dgId" @change="selectGoodsByGroupIdAdd($event)" filterable placeholder="請選擇設備組">
            <el-option v-for="item in deviceGroups" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-arrow-right"></i>設置商品會員價格</span>
        <el-form-item
          v-for="item in domains"
          :label="item.goodsName"
          :key="item.goodsId">
          <el-input v-model.number="item.goodsPrice" min="0" step="0.5" style="width:220px" type="number" placeholder="請輸入會員價格"></el-input>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel('form')">取 消</el-button>
    <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">確 定</el-button>
  </div>
</el-dialog>

         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
  })
}

   

2、後端：

１.controller層

@RequestMapping(value = "/save", method = RequestMethod.POST)
    @ResponseBody
    public ObjectRestResponse<LevelDevicePrice> save(@RequestParam("domains") String domains,LevelDevicePrice levelDevicePrice){

        ObjectRestResponse<LevelDevicePrice> objectRestResponse = new ObjectRestResponse<>();
        List<LevelDevicePrice> levelDevicePrices = null;
        Map<String, Object> params = new HashMap<>();
        params.put("dg_id",levelDevicePrice.getDgId());
        params.put("level_id",levelDevicePrice.getLevelId());
        List<LevelDevicePrice> 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<LevelDevicePrice> selectByProperty(Map<String, Object> params) {
        return mapper.selectByProperty(params);
    }

3.mapper層

/**
     * 根據property動態的條件獲取數據
     * @param params
    */
    List<LevelDevicePrice> selectByProperty(@Param("params") Map<String, Object> params);

4.mybatis.xml

<resultMap id="BaseResultMap" type="com.jmk.frame.goods.common.entity.LevelDevicePrice">
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="com_id" jdbcType="INTEGER" property="companyId"/>
        <result column="level_id" jdbcType="INTEGER" property="levelId"/>
        <result column="dg_id" jdbcType="INTEGER" property="dgId"/>
        <result column="goods_id" jdbcType="INTEGER" property="goodsId"/>
        <result column="goods_price" jdbcType="DECIMAL" property="goodsPrice"/>
        <result column="create_time" jdbcType="DATE" property="createTime"/>
        <result column="update_time" jdbcType="DATE" property="updateTime"/>
        <result column="is_delete" jdbcType="VARCHAR" property="isDelete"/>
        <result column="create_person" jdbcType="INTEGER" property="createPerson"/>
        <result column="update_person" jdbcType="INTEGER" property="updatePerson"/>
        <result column="user_host" jdbcType="VARCHAR" property="userHost"/>
        <result column="upd_host" jdbcType="VARCHAR" property="updHost"/>
    </resultMap>

<!-- selectByProperty方法 -->
    <select id="selectByProperty" parameterType="java.util.Map" resultMap="BaseResultMap">
        select * from ue_tb_level_device_price
        <where>
            <foreach collection="params" item="item" index="key">
                <if test="key == 'dg_id'">
                    and ${key} = #{item}
                </if>
                <if test="key == 'level_id'">
                    and ${key} = #{item}
                </if>
                <if test="key == 'goods_id'">
                    and ${key} = #{item}
                </if>
            </foreach>
        </where>
    </select>