From ee888edfe7ccc6230bee09250f27b04d88201540 Mon Sep 17 00:00:00 2001
From: blak-kong <546598185@qq.com>
Date: Wed, 17 Jan 2024 16:39:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=BC=8FID=E6=8B=96=E6=8B=BD=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flossom-ui/package.json                       |  2 +-
 .../src/views/system/instrument/index.vue     | 69 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/flossom-ui/package.json b/flossom-ui/package.json
index 40416b8..361cb23 100644
--- a/flossom-ui/package.json
+++ b/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": {
diff --git a/flossom-ui/src/views/system/instrument/index.vue b/flossom-ui/src/views/system/instrument/index.vue
index 2648180..0566b72 100644
--- a/flossom-ui/src/views/system/instrument/index.vue
+++ b/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>