拖拽排序功能

實現(xiàn)方法：

• 使用jquery的Sortable功能可以實現(xiàn)拖拽功能

   // 監(jiān)控steelyardSetting.isEnable，添加jquery sortable 排序       --- added by hexon
      // steelyardSetting.isEnable(val) {
      //   let _this = this;  
      //   $('.page-setting .page-setting-body .steelyardSortable').sortable({
      //     // --- 參數(shù) ---
      //     axis: 'x',                      // 只能在x方向上排序
      //     containment: 'parent',          // 元素的移動范圍在父元素下
      //     scroll: true,·
      //     //--- 事件 ---
      //     stop: function(event, ui) {     // 拖拽結(jié)束事件
      //       // 獲取重新排序后的元素id數(shù)組
      //       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="按住鼠標(biāo)左鍵拖動排序">
                      <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="按住鼠標(biāo)左鍵拖動排序">
                      <p class="sort-item-name">條碼<span class="text-danger">*</span></p>
                      <select v-model="steelyard.a2" class="form-control">
                        <option>請選擇位數(shù)</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="按住鼠標(biāo)左鍵拖動排序">
                      <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="按住鼠標(biāo)左鍵拖動排序">
                      <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="按住鼠標(biāo)左鍵拖動排序">
                      <p class="sort-item-name">校驗碼<span class="text-danger">*</span></p>
                      <select v-model="steelyard.a5" class="form-control">
                        <option>請選擇位數(shù)</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" >導(dǎo)出商品</button>
                      </router-link>
                    </div>
                  </div> -->

商品導(dǎo)出功能

• 從服務(wù)器拿到電子秤商品列表后，在商品列表中添加一個選擇狀態(tài)字段，將該字段使用雙向綁定，將商品列表傳到商品列表組件中渲染