模式ID拖拽弹窗

flossom-ui/package.json

@@ -60,7 +60,7 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vue-video-player": "^4.0.6",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.6.0"
   },
   "devDependencies": {

flossom-ui/src/views/system/instrument/index.vue

@@ -469,7 +469,16 @@
           </el-select>
         </el-form-item>
         <el-form-item label="模式ID" prop="sceneIds">
-          <el-input v-model="form.sceneIds" placeholder="请输入模式ID"/>
+          <!-- <el-input v-model="form.sceneIds" placeholder="请输入模式ID"/> -->
+          <el-select v-model="sceneIdsValue" multiple placeholder="请选择模式ID">
+            <el-option
+              v-for="item in sceneIdsOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <span v-if="sceneIdsValue.length > 1" style="cursor: pointer;color:#1890ff;margin-left:10px" @click="openSceneDialog()">排序</span>
         </el-form-item>
         <el-form-item label="模式名称" prop="sceneNames">
           <el-input v-model="form.sceneNames" placeholder="请输入模式名称"/>
@@ -864,6 +873,25 @@
         </el-table-column>
       </el-table>
     </el-dialog>
+
+    <el-dialog
+      title="排序"
+      :visible.sync="isSceneIdsVisible"
+      width="50%"
+      :close-on-click-modal="false"
+      :before-close="handleCloseScene">
+      <div>
+        <draggable v-model="sceneIdsValue" draggable=".itemTag">
+          <template v-for="element in sceneIdsValue">
+            <el-tag  :key="element" class="itemTag"> {{element}}</el-tag>
+          </template>
+        </draggable>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isSceneIdsVisible = false">取 消</el-button>
+        <el-button type="primary" @click="isSceneIdsVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -891,9 +919,11 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 import {upload} from "@/api/upload";
 
+import draggable from 'vuedraggable'
+
 export default {
   name: 'Instrument',
-  components: {Treeselect},
+  components: {Treeselect,draggable},
   data() {
     return {
       // 遮罩层
@@ -1097,6 +1127,23 @@ export default {
         }
         ]
       },
+
+
+      isSceneIdsVisible: false,
+      sceneIdsValue: [], // value
+      sceneIdsValueTemp: [],
+      sceneIdsOptions: [
+        {
+          value: '黄金糕',
+          label: '黄金糕'
+        }, {
+          value: '双皮奶',
+          label: '双皮奶'
+        }, {
+          value: '蚵仔煎',
+          label: '蚵仔煎'
+        }
+      ]
     }
   },
   created() {
@@ -1790,6 +1837,18 @@ export default {
     viewInstrumentInstruction(item) {
       window.open(item.link, '_blank');
     },
+
+    openSceneDialog() {
+      this.sceneIdsValueTemp = JSON.parse(JSON.stringify(this.sceneIdsValue))
+      this.isSceneIdsVisible = true;
+    },
+    handleCloseScene() {
+      this.isSceneIdsVisible = false;
+    },
+    handleSaveScene() {
+      this.sceneIdsValue = JSON.parse(JSON.stringify(this.sceneIdsValueTemp))
+      this.handleCloseScene()
+    },
   },
 }
 </script>
@@ -1810,4 +1869,10 @@ export default {
 video {
   object-fit: fill;
 }
+
+.itemTag {
+  margin-top: 20px;
+  margin-right: 10px;
+  cursor: pointer;
+}
 </style>