舞台编辑修复-下拉框实时更新信息

acs/qd/src/views/system/logicflow/editor/components/Diagram.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="diagram">
     <diagram-toolbar
+      style="z-index: 1"
       v-if="lf"
       class="diagram-toolbar"
       :lf="lf"
@@ -37,6 +38,7 @@
       :only-edge="activeNodes.length === 0"
       :elements-style="properties"
       :show-choice="showChoice"
+      :node="nodeObj"
       @setStyle="$_setStyle"
       @setZIndex="$_setZIndex"
     />
@@ -92,7 +94,8 @@ export default {
       nodeSize: {
         width: '',
         heigh: ''
-      }
+      },
+      nodeObj: {} // 给子组件传递信息
     }
   },
   mounted() {
@@ -182,11 +185,13 @@ export default {
     },
     // 获取可以进行设置的属性
     $_getProperty() {
-      // console.log('选中')
+      console.log('选中')
       let properties = {}
       const { nodes, edges } = this.lf.getSelectElements()
       // const graphModel = this.lf.graphModel
-      // console.log(graphModel)
+      console.log(nodes)
+      // 只传第一个,以第一个为显示是否绑定设备等信息，其余显示正常不用处理
+      this.nodeObj = nodes[0]
       nodes.forEach(node => {
         if (node.type === 'html-node') {
           this.showChoice = true

acs/qd/src/views/system/logicflow/editor/components/PropertyPanel.vue

@@ -160,6 +160,7 @@
           size="mini"
           :min="0"
           :max="360"
+          :step="90"
           @change="$_changeTransform"
         />
         <span>度</span>
@@ -197,7 +198,8 @@ export default {
   props: {
     elementsStyle: Object,
     onlyEdge: Boolean, // 是否是只设置边的属性，当只设置边的属性时，隐藏快捷样式和背景色设置
-    showChoice: Boolean
+    showChoice: Boolean,
+    node: Object // 父组件传来的对象
   },
   data() {
     return {
@@ -236,6 +238,11 @@ export default {
         this.style = { ...this.style, ...val }
       },
       immediate: true
+    },
+    node(newVal, oldVal) {
+      // newVal是新值，oldVal是旧值
+      this.node = newVal
+      this.cleanParam()
     }
   },
   created() {
@@ -344,6 +351,17 @@ export default {
       this.$emit('setStyle', {
         device: val
       })
+    },
+    cleanParam() { // 判断来清空下拉框
+      if (this.node.properties.device === undefined) {
+        this.style.device = ''
+      }
+      if (this.node.properties.imageUrl === undefined) {
+        this.style.imageUrl = ''
+      }
+      if (this.node.properties.transform === undefined) {
+        this.style.transform = 0
+      }
     }
   }
 }