模型树

src/designer/viewWidgets/modeltree/ModeltreeView.vue

@@ -1,80 +1,28 @@
 <template>
   <div class="title">
-    <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable />
-    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+    <el-input v-model="searchKeyword" size="small" style="flex-grow: 1; margin: 0 5px 0 0;" placeholder="Search">
       <template #prefix>
         <component :is="renderIcon('element Search')"></component>
       </template>
     </el-input>
-    <span class="close" @click="closeMe('hideLeft')">
-      <component :is="renderIcon('element Close')" />
-    </span>
+    <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable
+                 style="margin-right: 5px; width: 150px;" />
   </div>
   <div class="calc-left-panel">
-    ModeltreeView1<br />
-    ModeltreeView2<br />
-    ModeltreeView3<br />
-    ModeltreeView4<br />
-    ModeltreeView5<br />
-    ModeltreeView6<br />
-    ModeltreeView7<br />
-    ModeltreeView8<br />
-    ModeltreeView9<br />
-    ModeltreeView10<br />
-    ModeltreeView11<br />
-    ModeltreeView12<br />
-    ModeltreeView13<br />
-    ModeltreeView14<br />
-    ModeltreeView15<br />
-    ModeltreeView16<br />
-    ModeltreeView17<br />
-    ModeltreeView18<br />
-    ModeltreeView19<br />
-    ModeltreeView20<br />
-    ModeltreeView21<br />
-    ModeltreeView22<br />
-    ModeltreeView23<br />
-    ModeltreeView24<br />
-    ModeltreeView25<br />
-    ModeltreeView26<br />
-    ModeltreeView27<br />
-    ModeltreeView28<br />
-    ModeltreeView29<br />
-    ModeltreeView30<br />
-    ModeltreeView31<br />
-    ModeltreeView32<br />
-    ModeltreeView33<br />
-    ModeltreeView34<br />
-    ModeltreeView35<br />
-    ModeltreeView36<br />
-    ModeltreeView37<br />
-    ModeltreeView38<br />
-    ModeltreeView39<br />
-    ModeltreeView40<br />
+    <el-tree draggable node-key="id" :highlight-current="true"
+             :data="treedata" :expand-on-click-node="false" :auto-expand-parent="true"
+             :allow-drop="allowDrop" :allow-drag="allowDrag"
+             @node-drag-start="handleDragStart"
+             @node-drag-enter="handleDragEnter"
+             @node-drag-leave="handleDragLeave"
+             @node-drag-over="handleDragOver"
+             @node-drag-end="handleDragEnd"
+             @node-drop="handleDrop"
+    />
   </div>
 </template>
 <script>
-import { renderIcon } from '@/utils/webutils.js'
+import ModeltreeViewJs from './ModeltreeViewJs.js'
 
-export default {
-  name: 'ModeltreeView',
-  emits: ['close'],
-  data() {
-    return {
-      currentLevel: '',
-      searchKeyword: ''
-    }
-  },
-  methods: {
-    renderIcon,
-    closeMe(name) {
-      this.$emit('close', name)
-    }
-  },
-  computed: {
-    allLevels() {
-      return designer.allLevels
-    }
-  }
-}
+export default ModeltreeViewJs
 </script>

src/designer/viewWidgets/modeltree/ModeltreeViewJs.js

@@ -0,0 +1,97 @@
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'ModeltreeView',
+  emits: ['close'],
+  data() {
+    return {
+      currentLevel: '',
+      searchKeyword: '',
+      treedata: data
+    }
+  },
+  methods: {
+    renderIcon,
+    allowDrop(event) {
+      return true
+    },
+    allowDrag(event) {
+      return true
+    },
+    handleDragStart() {
+    },
+    handleDragEnter() {
+    },
+    handleDragLeave() {
+    },
+    handleDragOver() {
+    },
+    handleDragEnd() {
+    },
+    handleDrop() {
+    }
+  },
+  computed: {
+    allLevels() {
+      return designer.allLevels
+    }
+  }
+}
+
+const data = [
+  {
+    label: 'Level one 1',
+    children: [
+      {
+        label: 'Level two 1-1',
+        children: [
+          {
+            label: 'Level three 1-1-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'Level one 2',
+    children: [
+      {
+        label: 'Level two 2-1',
+        children: [
+          {
+            label: 'Level three 2-1-1'
+          }
+        ]
+      },
+      {
+        label: 'Level two 2-2',
+        children: [
+          {
+            label: 'Level three 2-2-1'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'Level one 3',
+    children: [
+      {
+        label: 'Level two 3-1',
+        children: [
+          {
+            label: 'Level three 3-1-1'
+          }
+        ]
+      },
+      {
+        label: 'Level two 3-2',
+        children: [
+          {
+            label: 'Level three 3-2-1'
+          }
+        ]
+      }
+    ]
+  }
+]