组织架构管理

package.json

@@ -22,7 +22,8 @@
         "pinia": "^2.0.36",
         "remixicon": "^3.1.1",
         "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vue3-tree-org": "^4.2.2"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.1",

src/main.js

@@ -3,6 +3,9 @@ import "./styles/app/tailwind.scss"
 import {createApp} from 'vue'
 import setupPinia from "./store/init"
 import router, {setupRouter} from './router'
+import vue3TreeOrg from 'vue3-tree-org'
+import 'vue3-tree-org/lib/vue3-tree-org.css'
+
 import App from './App.vue'
 
 //饿了么UI
@@ -43,7 +46,8 @@ async function bootstrap() {
 
     // hc-vue3-ui
     app.use(HcVue3UI)
-
+    //树形结构图
+    app.use(vue3TreeOrg)
     // 组件注册全局
     setupComponents(app);
 

src/router/menus.js

@@ -68,6 +68,7 @@ export default [
                 name: '组织架构管理',
                 code: 'system-organization',
             },
+            
         ]
     },
 ]

src/router/modules/base.js

@@ -109,6 +109,7 @@ export default [
                 meta: {title: '组织架构管理'},
                 component: () => import('~src/views/system/organization.vue')
             },
+        
         ],
     },
     {

src/router/modules/token.js

@@ -13,4 +13,5 @@ export default [
     'system-menu',
     'system-parameter',
     'system-organization',
+  
 ]

src/views/system/organization.vue

@@ -13,8 +13,34 @@
             <div class="content-box" v-if="isShowIcon">
                 <HcIcon name="add-box" class="add_icon" @click="addClick"/>
             </div>
-            <div class="content-box" v-if="!isShowIcon&&!isedit">
-             组织架构显示信息
+            <div class="content-box1" v-if="!isShowIcon&&!isedit">
+              <div style="height: 400px;text-align: center;">
+                <vue3-tree-org
+                    :data="testdata"
+                    :horizontal="horizontal"
+                    :collapsable="collapsable"
+                    :label-style="style"
+                    :node-draggable="true"
+                    :scalable="false"
+                    :only-one-node="onlyOneNode"
+                    :default-expand-level="4"
+                    :clone-node-drag="cloneNodeDrag"
+                    @on-contextmenu="onMenus"
+                    @on-node-click="onNodeClick"
+                >
+                    <!-- 自定义节点内容 -->
+                    <template v-slot="{node}">
+                        <div class="tree-org-node__text node-label">
+                            <!-- <div class="custom-content">自定义内容</div> -->
+                            <div>{{node.label}}</div>
+                        </div>
+                    </template>
+                    <!-- 自定义展开按钮 -->
+                    <template v-slot:expand="{node}">
+                        <div>{{node.children.length}}</div>
+                    </template>
+                </vue3-tree-org>
+            </div>
             </div>
             <div  v-if="!isShowIcon&&isedit">
             <div class="tree-box blue">
@@ -28,10 +54,7 @@
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
                             <!-- <span>{{ node.label }}</span> -->
-                            
                                 <span  :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
-                          
-                        
                             <span>
                                 <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"/>
                                 <HcIcon name="edit" @click="addClick" style="margin-left: 8px;color: rgb(84, 188, 189);" />
@@ -99,6 +122,7 @@
 <script setup>
 import {ref, watch} from "vue";
 import {useAppStore} from "~src/store";
+
 const isShowIcon=ref(false)
 const isedit=ref(false)
 const editClick=()=>{
@@ -225,6 +249,45 @@ const loadNode = (node, resolve) => {
     resolve(data)
   }, 500)
 }
+//组织架构显示信息
+
+  const testdata=ref({
+                "id":1,"label":"xxx科技有限公司",
+                "children":[
+                    {
+                        "id":2,"pid":1,"label":"产品研发部",
+                        "style":{"color":"#fff","background":"#108ffe"},
+                        "children":[
+                            {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
+                            {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
+                            {"id":10,"pid":2,"label":"测试"}
+                        ]
+                    },
+                    {
+                        "id":3,"pid":1,"label":"客服部",
+                        "children":[
+                            {"id":11,"pid":3,"label":"客服一部"},
+                            {"id":12,"pid":3,"label":"客服二部"}
+                        ]
+                    },
+                    {"id":4,"pid":1,"label":"业务部"}
+                ]
+            })
+  const horizontal=ref(false)
+  const collapsable=ref(true)
+  const onlyOneNode=ref(true)
+  const cloneNodeDrag=ref(true)
+  const expandAll=ref(true)
+  const style=ref({background: "#fff",color: "#5e6d82",})
+  const onMenus=({ node, command })=>{
+    console.log(node, command);
+  }
+  const onNodeClick=(e, data)=>{
+   
+  }
+  const expandChange=()=>{
+    
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -241,7 +304,9 @@ const loadNode = (node, resolve) => {
     width: 100%;
     color: rgb(84, 188, 189);
 }
-
+.content-box1{
+  text-align: center;
+}
 .add_icon{
     font-size: 8rem;
     cursor: pointer;