撒料计划添加了前端拖动

src/views/formulationPlan/materialIssuancePlan/index.vue

@@ -267,62 +267,77 @@
           <div class="spreadingMaterial">
             <div>撒料:</div>
             <div class="spreadingMaterialList">
-              <div v-for="element in create.list2" :key="element.name" class="list-group-item2 item">
-                <div class="arr-l" :style="{'background':element.tbackground}">
-                  <div class="arr-l-t">
-                    <div class="arr-l-t-t" />
-                    <el-select
-                      v-model="element.tmrid"
-                      placeholder="撒料设备"
-                      class="arr-l-t-b el-icon-arrow-down"
-                      @change="(value)=> {changeEquipment(value, element.fttype,element.id)}"
-                    >
-                      <el-option
-                        v-for="item in equipmentList"
-                        :key="item.id"
-                        :label="item.tname"
-                        :value="item.id"
-                      />
-                    </el-select>
-                  </div>
-                  <div class="arr-l-b">
-                    <el-tooltip placement="top" class="list-group-item1 item" style="height: 18px;line-height: 18px;">
-                      <div slot="content">{{ element.tmrname }}</div>
-                      <div class="tmrname">{{ element.tmrname }}</div>
-                    </el-tooltip>
+              <draggable
+                id="1"
+                data-source="juju"
+                :list="create.list2"
+                class="list-group1"
+                draggable=".item"
+                group="a"
+                animation="500"
+                force-fallback="true"
+                :move="move1"
+                @change="changeLog1(create.temp)"
+                @start="start1"
+                @end="end1(create.temp)"
+              >
+                <div v-for="element in create.list2" :key="element.name" class="list-group-item2 item">
+                  <div class="arr-l" :style="{'background':element.tbackground}">
+                    <div class="arr-l-t">
+                      <div class="arr-l-t-t" />
+                      <el-select
+                        v-model="element.tmrid"
+                        placeholder="撒料设备"
+                        class="arr-l-t-b el-icon-arrow-down"
+                        @change="(value)=> {changeEquipment(value, element.fttype,element.id)}"
+                      >
+                        <el-option
+                          v-for="item in equipmentList"
+                          :key="item.id"
+                          :label="item.tname"
+                          :value="item.id"
+                        />
+                      </el-select>
+                    </div>
+                    <div class="arr-l-b">
+                      <el-tooltip placement="top" class="list-group-item1 item" style="height: 18px;line-height: 18px;">
+                        <div slot="content">{{ element.tmrname }}</div>
+                        <div class="tmrname">{{ element.tmrname }}</div>
+                      </el-tooltip>
+                    </div>
+                    <div v-if="element.fttype==0" style="background: #009C69;position:absolute;bottom: 0;left: 0;">补</div>
                   </div>
-                  <div v-if="element.fttype==0" style="background: #009C69;position:absolute;bottom: 0;left: 0;">补</div>
-                </div>
-                <div class="arr-r">
-                  <div class="arr-r-l">
-                    <el-tooltip placement="top">
-                      <div slot="content">{{ element.barname }}</div>
-                      <div class="barname">{{ element.barname }}</div>
-                    </el-tooltip>
+                  <div class="arr-r">
+                    <div class="arr-r-l">
+                      <el-tooltip placement="top">
+                        <div slot="content">{{ element.barname }}</div>
+                        <div class="barname">{{ element.barname }}</div>
+                      </el-tooltip>
+                    </div>
+                    <div class="arr-r-c">-</div>
+                    <div class="arr-r-r">
+                      <el-tooltip placement="top">
+                        <div slot="content">{{ element.weight }}</div>
+                        <input
+                          ref="weight"
+                          v-model="element.weight"
+                          :autofocus="element.focusState"
+                          type="number"
+                          placeholder="重量"
+                          step="0.01"
+                          class="filter-item2"
+                          style="display: inline-block;height:25px;padding:4px 4px 4px 0;text-align:right;font-size:12px;width: 95%;border: 1px solid #e6e6e6;"
+                          @keyup.enter="$event.target.blur"
+                          @blur="blurWeight(element)"
+                        >
+                      </el-tooltip>
+                    </div>
                   </div>
-                  <div class="arr-r-c">-</div>
-                  <div class="arr-r-r">
-                    <el-tooltip placement="top">
-                      <div slot="content">{{ element.weight }}</div>
-                      <input
-                        ref="weight"
-                        v-model="element.weight"
-                        :autofocus="element.focusState"
-                        type="number"
-                        placeholder="重量"
-                        step="0.01"
-                        class="filter-item2"
-                        style="display: inline-block;height:25px;padding:4px 4px 4px 0;text-align:right;font-size:12px;width: 95%;border: 1px solid #e6e6e6;"
-                        @keyup.enter="$event.target.blur"
-                        @blur="blurWeight(element)"
-                      >
-                    </el-tooltip>
+                  <div class="arr-t" :style="{'background':element.background}">
+                    <i class="el-icon-close" style="position: absolute;right: 0;" @click="handleFLDelete(element)" />
                   </div>
                 </div>
-                <div class="arr-t" :style="{'background':element.background}">
-                  <i class="el-icon-close" style="position: absolute;right: 0;" @click="handleFLDelete(element)" />
-                </div>
-              </div>
+              </draggable>
             </div>
           </div>
           <div slot="footer" class="dialog-footer">
@@ -337,10 +352,14 @@
 
 <script>
 import Cookies from 'js-cookie'
+import draggable from 'vuedraggable'
 import Sortable from 'sortablejs'
 import { checkButtons, ExecDataByConfig, postJson } from '@/api/common'
 import { MessageBox } from 'element-ui'
-export default {
+export default {
+  components: {
+    draggable
+  },
   data() {
     return {
       isRoleEdit: [],
@@ -1063,6 +1082,18 @@ export default {
         }
       })
     },
+    move1(evt, originalEvent){
+      console.log('move1===>', evt, originalEvent)
+    },
+    changeLog1(){},
+    start1(evt){
+      console.log('start1===>', evt)
+      // this.$set(this.table.startObj, 'from', evt.from.className)
+      // this.$set(this.table.startObj, 'to', evt.from.className)
+    },
+    end1(evt){
+      console.log('end1===>', evt)
+    },
     // 减少车次
     handleReduceTrains() {
       if (this.selectList.length == 0) {