拖拽排序功能

实现方法：

• 使用jquery的Sortable功能可以实现拖拽功能

   // 监控steelyardSetting.isEnable，添加jquery sortable 排序       --- added by hexon
      // steelyardSetting.isEnable(val) {
      //   let _this = this;  
      //   $('.page-setting .page-setting-body .steelyardSortable').sortable({
      //     // --- 参数 ---
      //     axis: 'x',                      // 只能在x方向上排序
      //     containment: 'parent',          // 元素的移动范围在父元素下
      //     scroll: true,·
      //     //--- 事件 ---
      //     stop: function(event, ui) {     // 拖拽结束事件
      //       // 获取重新排序后的元素id数组
      //       var attr = $('.page-setting .page-setting-body .steelyardSortable').sortable('toArray');
      //       // 将排列后的条码顺序传出
      //       _this.steelyardItemSort.sort = attr;
      //     }
      //   });
      // }


     // --- 对电子秤中的条目进行排序 ---         --- added by hexon
      // if (this.steelyardSetting.isEnable && 
      //     this.steelyardItemSort !== undefined && this.steelyardItemSort !== null && this.steelyardItemSort !== ''
      //   ) {
      //     this.steelyardSort();
      //   }

              // 识别码在条码中的信息
              // this.barCodeRule.idCode.pos = 0;    // 识别码位置
              // this.barCodeRule.idCode.length = this.steelyardSetting.para.idCode.length;  // 识别码长度
              // this.barCodeRule.idCode.value = this.steelyardSetting.para.idCode;          // 识别码值

index页面

//        if (this.steelyard !== null
//          && keyword.length === this.steelyard.a1.length + parseInt(this.steelyard.a2) + parseInt(this.steelyard.a3) + (parseInt(this.steelyard.a4)) + parseInt(this.steelyard.a5)
//          && keyword.substr(this.steelyardItemSort.pos.a1, this.steelyard.a1.length) == this.steelyard.a1) {
//
//          this.steelyardGoods.pluCode = keyword.substr(this.steelyardItemSort.pos.a2, parseInt(this.steelyard.a2));
//          this.steelyardGoods.price = parseFloat(keyword.substr(this.steelyardItemSort.pos.a3, parseInt(this.steelyard.a3)) * 0.01);
//          this.steelyardGoods.weight = parseFloat(keyword.substr(this.steelyardItemSort.pos.a4, parseInt(this.steelyard.a4)) * 0.01);
//          keyword = this.steelyardGoods.pluCode;
//
//        } else {
//          this.steelyardGoods.pluCode = null;
//          this.steelyardGoods.price = 0;
//          this.steelyardGoods.weight = 0;
//        }

html部分

<!-- <div class="row steelyardSortable" >

                    <div id = "a1" class="col-xs-1-5 sort-item "  @dragstart="ondragstart" @dragend="ondragend" title="按住鼠标左键拖动排序">
                      <p class="sort-item-name">识别码<span class="text-danger">*</span></p>
                      <input class="form-control" v-model="steelyard.a1" placeholder="请输入识别码">
                    </div>

                    <div id = "a2" class="col-xs-1-5 sort-item "  @dragstart="ondragstart" @dragend="ondragend" title="按住鼠标左键拖动排序">
                      <p class="sort-item-name">条码<span class="text-danger">*</span></p>
                      <select v-model="steelyard.a2" class="form-control">
                        <option>请选择位数</option>
                        <option :value="i + 4" v-for="i in 6" v-text="i+4+'位'"></option>
                      </select>
                    </div>

                    <div id = "a3" class="col-xs-1-5 sort-item "   @dragstart="ondragstart" @dragend="ondragend" title="按住鼠标左键拖动排序">
                      <p class="sort-item-name">售价</p>
                      <select v-model="steelyard.a3" class="form-control">
                        <option value='0'>无</option>
                        <option :value="i" v-for="i in 10" v-text="i+'位'"></option>
                      </select>
                    </div>

                    <div id = "a4" class="col-xs-1-5 sort-item "  @dragstart="ondragstart" @dragend="ondragend" title="按住鼠标左键拖动排序">
                      <p class="sort-item-name">重量</p>
                      <select v-model="steelyard.a4" class="form-control">
                        <option value='0'>无</option>
                        <option :value="i" v-for="i in 10" v-text="i+'位'"></option>
                      </select>
                    </div>

                    <div id = "a5" class="col-xs-1-5 sort-item"  @dragstart="ondragstart" @dragend="ondragend" title="按住鼠标左键拖动排序">
                      <p class="sort-item-name">校验码<span class="text-danger">*</span></p>
                      <select v-model="steelyard.a5" class="form-control">
                        <option>请选择位数</option>
                        <option :value="i" v-for="i in 10" v-text="i+'位'"></option>
                      </select>
                    </div>
                  </div>  -->
                  <!-- <div class="row">
                    <div class="col-3">
                      <router-link to="exportGoods">
                        <button type="button" class="btn btn-primary" >导出商品</button>
                      </router-link>
                    </div>
                  </div> -->

商品导出功能

• 从服务器拿到电子秤商品列表后，在商品列表中添加一个选择状态字段，将该字段使用双向绑定，将商品列表传到商品列表组件中渲染