优化组织机构管理页面

src/main.js

@@ -3,9 +3,6 @@ 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
@@ -15,6 +12,10 @@ import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'dayjs/locale/zh-cn'
 
+//简易版组织架构图
+import vue3TreeOrg from 'vue3-tree-org'
+import 'vue3-tree-org/lib/vue3-tree-org.css'
+
 //hc-vue3-ui
 import HcVue3UI from 'hc-vue3-ui'
 import 'hc-vue3-ui/dist/index.css'
@@ -44,10 +45,12 @@ async function bootstrap() {
         locale: zhCn,
     })
 
-    // hc-vue3-ui
-    app.use(HcVue3UI)
     //树形结构图
     app.use(vue3TreeOrg)
+
+    // hc-vue3-ui
+    app.use(HcVue3UI)
+
     // 组件注册全局
     setupComponents(app);
 

src/styles/app/tree.scss

@@ -0,0 +1,189 @@
+// 树的线样式
+.tree-line {
+    :deep(.el-tree-node) {
+        position: relative;
+        padding-left: 12px; // 缩进量
+    }
+    :deep(.el-tree-node__children) {
+        padding-left: 12px; // 缩进量
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        content:"";
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        left: 1px;
+        top: 0;
+        border-width: 1px;
+        border-left: 2px dashed var(--el-color-primary);
+    }
+    // 当前层最后⼀个节点的竖线⾼度固定
+    :deep(.el-tree-node:last-child::before) {
+        height: 15px; // 可以⾃⼰调节到合适数值
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        content:"";
+        width: 16px;
+        height: 20px;
+        position: absolute;
+        left: 2px;
+        top: 12px;
+        border-width: 1px;
+        border-top: 2px dashed var(--el-color-primary);
+    }
+    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
+    & > :deep(.el-tree-node::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    & > :deep(.el-tree-node::before) {
+        border-left: none;
+    }
+    // 展开关闭的icon
+    :deep(.el-tree-node__expand-icon) {
+        font-size: 16px;
+        &.is-leaf {
+            color: transparent;
+            font-size: 0px;
+        }
+    }
+    :deep(.el-tree__empty-block) {
+      min-width: 300px;
+
+    }
+}
+
+.tree-line1 {
+    :deep(.el-tree-node) {
+        position: relative;
+        padding-left: 12px; // 缩进量
+        width: 100%;
+    }
+    :deep(.el-tree-node__children) {
+        padding-left: 12px; // 缩进量
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        content:"";
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        left: 1px;
+        top: 0px;
+        border-width: 1px;
+        border-left: 2px dashed var(--el-color-primary);
+    }
+    // 当前层最后⼀个节点的竖线⾼度固定
+    :deep(.el-tree-node:last-child::before){
+        height: 15px; // 可以⾃⼰调节到合适数值
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        content:"";
+        width: 16px;
+        height: 20px;
+        position: absolute;
+        left: 2px;
+        top: 12px;
+        border-width: 1px;
+        border-top: 2px dashed var(--el-color-primary);
+    }
+    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
+    & > :deep(.el-tree-node::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    & > :deep(.el-tree-node::before) {
+        border-left: none;
+    }
+    // 展开关闭的icon
+    :deep(.el-tree-node__expand-icon) {
+        font-size: 16px;
+        &.is-leaf {
+            color: transparent;
+            font-size: 0;
+        }
+    }
+    :deep(.el-tree__empty-block) {
+      min-width: 300px;
+    }
+}
+
+//虚拟树
+.hc-tree-node-v2.tree-line1 {
+    :deep(.el-virtual-scrollbar) {
+        right: -12px !important;
+    }
+    :deep(.el-tree-node) {
+        padding-left: 0;
+    }
+    :deep(.el-tree-node:first-child::before) {
+        border-left: none;
+    }
+    :deep(.el-tree-node:first-child::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        left: 12px;
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        left: 14px;
+    }
+    :deep([class*='line-i-']) {
+        position: relative;
+        //竖线
+        &::before {
+            content:"";
+            height: 26px;
+            width: 1px;
+            position: absolute;
+            left: 12px;
+            top: 0;
+            border-width: 1px;
+            border-left: 2px dashed var(--el-color-primary);
+        }
+        //横线
+        &::after {
+            content:"";
+            width: 16px;
+            height: 20px;
+            position: absolute;
+            left: 14px;
+            top: 12px;
+            border-width: 1px;
+            border-top: 2px dashed var(--el-color-primary);
+        }
+    }
+    //自动生成子级线条
+    @for $i from 1 through 20 {
+        //竖线
+        :deep(.line-i-#{$i}::before) {
+            left: #{(($i + 1) * 24) - 11}px;
+        }
+        //横线
+        :deep(.line-i-#{$i}::after) {
+            left: #{(($i + 1) * 24) - 9}px;
+        }
+
+        //消除非主要线条
+        @if $i >= 3 {
+            :deep(.el-tree-node[level="#{$i}"]) {
+                &::after {
+                    display: none;
+                }
+                @if $i >= 4 {
+                    @for $x from 1 through ($i - 3) {
+                        .line-i-#{$x}::after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/styles/index.scss

@@ -187,3 +187,20 @@ html, body, #app {
         font-weight: initial;
     }
 }
+
+.el-tree.hc-tree-node .el-tree-node {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .el-tree-node_content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.tree-org-node__content .tree-org-node__inner {
+    border: 1px solid #d0d0d0;
+    border-radius: 5px;
+    color: #232323;
+}

src/styles/system/organization.scss

@@ -0,0 +1,3 @@
+.hac-node-vue3-tree-org-label {
+
+}

src/views/system/components/HcTreeData.vue

@@ -0,0 +1,96 @@
+<template>
+    <ElTree ref="ElTreeRef"
+        :class="ui"
+        :data="treeDatas"
+        default-expand-all
+        :indent="0"
+        :props="ElTreeProps"
+        class="hc-tree-node tree-line"
+        highlight-current
+        node-key="id"
+        @node-click="ElTreeClick"
+    >
+        <template #default="{ node, data }">
+            <div class="data-custom-tree-node">
+                <div :class="node.level === 1?'level-name':''" class="label">
+                    <span class="mr-5">{{ node.label }}</span>
+                    <HcIcon name="add-box" @click.stop="addClick(node, data)" style=" color: rgb(84, 188, 189);" v-if="data.children"/>
+                    <HcIcon name="edit" @click.stop="editClick(node, data)" style="margin-left: 8px;color: rgb(84, 188, 189);" />
+                    <HcIcon name="delete-bin" @click.stop="delClick(node, data)" style="margin-left: 8px;color: orange;" />
+                    <HcIcon name="vip-crown-2" @click.stop="authorityClick(node, data)" style="margin-left: 8px;color: purple;"/>
+                </div>
+            </div>
+        </template>
+    </ElTree>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: ''
+    },
+    datas: {
+        type: Object,
+        default: () => ({})
+    },
+})
+
+//变量
+const ElTreeRef = ref(null)
+const treeDatas = ref([props.datas])
+const ElTreeProps = ref({
+    label: 'label',
+    children: 'children',
+    isLeaf: 'isLeaf'
+})
+
+//监听
+watch(() => [
+    props.datas,
+], ([data]) => {
+    treeDatas.value = [data]
+}, {deep: true})
+
+//事件
+const emit = defineEmits(['menuTap', 'nodeTap'])
+
+//节点被点击
+const ElTreeClick = async (data, node) => {
+    emit('nodeTap', {node, data})
+}
+
+//添加
+const addClick = (node, data)=>{
+    emit('menuTap', {
+        key: 'add', node, data
+    })
+}
+
+//编辑
+const editClick = (node, data) => {
+    emit('menuTap', {
+        key: 'edit', node, data
+    })
+}
+
+//删除
+const delClick = (node, data) => {
+    emit('menuTap', {
+        key: 'del', node, data
+    })
+}
+
+//权限
+const authorityClick = (node, data) => {
+    emit('menuTap', {
+        key: 'auth', node, data
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~src/styles/app/tree.scss";
+</style>

src/views/system/organization.vue

@@ -1,133 +1,133 @@
 <template>
-        <HcCard actionSize="lg" scrollbar>
-            <template #extra>
-                <el-button type="primary" @click="editClick"  size="large" v-if="!isShowIcon&&!isedit">
-                            <span>编辑组织机构</span>
-                 </el-button>
+    <HcCard actionSize="lg" scrollbar>
+        <template #extra>
+            <el-button type="primary" @click="editClick" size="large" v-if="!isShowIcon&&!isedit">
+                <span>编辑组织机构</span>
+            </el-button>
 
-                 <el-button type="primary" @click="goback"  size="large" v-if="!isShowIcon&&isedit">
-                            <span>返回上一级</span>
-                 </el-button>
-            </template>
+            <el-button type="primary" @click="goback" size="large" v-if="!isShowIcon&&isedit">
+                <span>返回上一级</span>
+            </el-button>
+        </template>
 
-            <div class="content-box" v-if="isShowIcon">
-                <HcIcon name="add-box" class="add_icon" @click="addClick"/>
-            </div>
-            <div class="content-box1" v-if="!isShowIcon&&!isedit">
-              <div style="height: 400px;text-align: center;">
+        <div class="content-box" v-if="isShowIcon">
+            <HcIcon name="add-box" class="add_icon" @click="addClick"/>
+        </div>
+        <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"
+                    :horizontal="false"
+                    :collapsable="false"
+                    :node-draggable="false"
+                    draggable
+                    center
                     :scalable="false"
-                    :only-one-node="onlyOneNode"
-                    :default-expand-level="4"
-                    :clone-node-drag="cloneNodeDrag"
-                    @on-contextmenu="onMenus"
+                    :default-expand-level="5"
+                    :define-menus="[]"
+                    disabled
                     @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>
+                        <div class="hac-node-vue3-tree-org-label">{{ node.label }}</div>
                     </template>
                 </vue3-tree-org>
             </div>
-            </div>
-            <div  v-if="!isShowIcon&&isedit">
+        </div>
+        <div v-if="!isShowIcon&&isedit">
             <div class="tree-box blue">
                 <el-scrollbar class="h-100p">
+                    <HcTreeData :datas="testdata" @menuTap="treeMenuTap"/>
+
                     <el-tree
-                    class="tree-line1"
-                    :data="dataSource"
-                    node-key="id"
-                    default-expand-all
-                    :expand-on-click-node="false"
+                        class="tree-line1"
+                        :data="dataSource"
+                        node-key="id"
+                        default-expand-all
+                        :expand-on-click-node="false"
+                        v-if="false"
                     >
-                    <template #default="{ node, data }">
+                        <template #default="{ node, data }">
                         <span class="custom-tree-node">
-                                <span  :class="node.level === 1?'level-name':''" class="label">{{ 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);" v-if="data.children"/>
-                                <HcIcon name="edit" @click="addClick" style="margin-left: 8px;color: rgb(84, 188, 189);" />
-                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;" />
-                                <HcIcon name="vip-crown-2" @click="authorityClick" style="margin-left: 8px;color: purple;"/>
+                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"
+                                        v-if="data.children"/>
+                                <HcIcon name="edit" @click="addClick"
+                                        style="margin-left: 8px;color: rgb(84, 188, 189);"/>
+                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;"/>
+                                <HcIcon name="vip-crown-2" @click="authorityClick"
+                                        style="margin-left: 8px;color: purple;"/>
                             </span>
                         </span>
 
-                    </template>
+                        </template>
                     </el-tree>
                 </el-scrollbar>
-        </div>
             </div>
+        </div>
+
+        <HcDialog bgColor="#ffffff" isToBody :show="testModal" title="新增机构信息" @close="testModalClose"
+                  widths="70rem">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto"
+                     size="large">
+
+                <el-form-item label="上级组织节点名称:" prop="topname">
+                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
+                        <el-option
+                            v-for="item in topMenuoptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+
+
+                <el-form-item label="组织节点类别:" prop="type">
+                    <el-select v-model="formModel.top" placeholder="请选择" size="large" style="width:100%">
+                        <el-option
+                            v-for="item in topMenuoptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
 
-            <HcDialog bgColor="#ffffff" isToBody :show="testModal" title="新增机构信息" @close="testModalClose" widths="70rem">
-                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left"  label-width="auto"
-                             size="large">
-                      
-                                <el-form-item label="上级组织节点名称:" prop="topname">
-                                        <el-select v-model="formModel.top"  placeholder="请选择" size="large" style="width:100%">
-                                            <el-option
-                                            v-for="item in topMenuoptions"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
-                                            />
-                                        </el-select>
-                                </el-form-item>
-                           
-                           
-                                <el-form-item label="组织节点类别:" prop="type">
-                                        <el-select v-model="formModel.top"  placeholder="请选择" size="large" style="width:100%">
-                                            <el-option
-                                            v-for="item in topMenuoptions"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
-                                            />
-                                        </el-select>
-                                </el-form-item>
-                        
-                          
-                                <el-form-item label="组织节点名称:" prop="name">
-                                    <el-input v-model="formModel.deptId"  placeholder=""/>
-                                </el-form-item>
-                           
 
-                      
-                 </el-form>
-            </HcDialog>
-            <HcDialog bgColor="#ffffff" isToBody isTable :show="authorityModal" title="权限配置" @close="authorityModalClose" widths="60rem">
-                <el-tree
+                <el-form-item label="组织节点名称:" prop="name">
+                    <el-input v-model="formModel.deptId" placeholder=""/>
+                </el-form-item>
+
+
+            </el-form>
+        </HcDialog>
+        <HcDialog bgColor="#ffffff" isToBody isTable :show="authorityModal" title="权限配置"
+                  @close="authorityModalClose" widths="60rem">
+            <el-tree
                 :props="props"
                 :load="loadNode"
                 lazy
                 show-checkbox
                 @check-change="handleCheckChange"
             />
-            </HcDialog>
-        </HcCard>
+        </HcDialog>
+    </HcCard>
 
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
 import {useAppStore} from "~src/store";
+import HcTreeData from "./components/HcTreeData.vue";
 
-const isShowIcon=ref(false)
-const isedit=ref(false)
-const editClick=()=>{
-    isedit.value=true
+const isShowIcon = ref(false)
+const isedit = ref(false)
+const editClick = () => {
+    isedit.value = true
 }
-const addClick=()=>{
+const addClick = () => {
     testModal.value = true
 }
 const testModal = ref(false)
@@ -137,7 +137,7 @@ const testModalClose = () => {
     console.log('弹窗关闭')
     testModal.value = false
 }
-const formModel=ref({})
+const formModel = ref({})
 const formRules = {
     topname: {
         required: true,
@@ -155,60 +155,10 @@ const formRules = {
         message: "请选择类型"
     }
 }
-const topMenuoptions=ref([])
-const dataSource = ref([
-  {
-    id: 1,
-    label: '技术部',
-    children: [
-      {
-        id: 4,
-        label: '研发经理',
-        children: [
-          {
-            id: 9,
-            label: '产品经理',
-          },
-          {
-            id: 10,
-            label: 'java技术',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: '人事部',
-    children: [
-      {
-        id: 5,
-        label: '人事管理',
-      },
-      {
-        id: 6,
-        label: 'Level two 2-2',
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: 'Level one 3',
-    children: [
-      {
-        id: 7,
-        label: 'Level two 3-1',
-      },
-      {
-        id: 8,
-        label: 'Level two 3-2',
-      },
-    ],
-  },
-])
+const topMenuoptions = ref([])
 
 const delClick = (node, data) => {
-    console.log(node,'node');
+    console.log(node, 'node');
     window?.$messageBox?.alert('您确定要注销[xxx] 的机构信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
         showCancelButton: true,
         confirmButtonText: '确认注销',
@@ -221,156 +171,243 @@ const delClick = (node, data) => {
         }
     })
 }
-const authorityModal=ref(false)
-const authorityClick=()=>{
-    authorityModal.value=true
+const authorityModal = ref(false)
+const authorityClick = () => {
+    authorityModal.value = true
 }
 const authorityModalClose = () => {
     console.log('弹窗关闭')
     authorityModal.value = false
 }
 const props = {
-  label: 'name',
-  children: 'zones',
+    label: 'name',
+    children: 'zones',
 }
-const goback=()=>{
-    isedit.value=false
+const goback = () => {
+    isedit.value = false
 }
 const handleCheckChange = (
-  data,
-  checked,
-  indeterminate
+    data,
+    checked,
+    indeterminate
 ) => {
-  console.log(data, checked, indeterminate)
+    console.log(data, checked, indeterminate)
 }
 
 const loadNode = (node, resolve) => {
-  if (node.level === 0) {
-    return resolve([{ name: 'region' }])
-  }
-  if (node.level > 1) return resolve([])
-
-  setTimeout(() => {
-    const data = [
-      {
-        name: 'leaf',
-        leaf: true,
-      },
-      {
-        name: 'zone',
-      },
-    ]
+    if (node.level === 0) {
+        return resolve([{name: 'region'}])
+    }
+    if (node.level > 1) return resolve([])
+    setTimeout(() => {
+        const data = [
+            {
+                name: 'leaf',
+                leaf: true,
+            },
+            {
+                name: 'zone',
+            },
+        ]
 
-    resolve(data)
-  }, 500)
+        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>
-// 树的线样式
-.tree-line1 {
-    :deep(.el-tree-node) {
-        position: relative;
-        padding-left: 12px; // 缩进量
-        width: 100%;
-    }
-    :deep(.el-tree-node__children) {
-        padding-left: 12px; // 缩进量
-    }
-    // 竖线
-    :deep(.el-tree-node::before) {
-        content:"";
-        height: 100%;
-        width: 1px;
-        position: absolute;
-        left: 1px;
-        top: 0px;
-        border-width: 1px;
-        border-left: 2px dashed var(--el-color-primary);
-    }
-    // 当前层最后⼀个节点的竖线⾼度固定
-    :deep(.el-tree-node:last-child::before){
-        height: 15px; // 可以⾃⼰调节到合适数值
-    }
-    // 横线
-    :deep(.el-tree-node::after) {
-        content:"";
-        width: 25px;
-        height: 20px;
-        position: absolute;
-        left: 2px;
-        top: 12px;
-        border-width: 1px;
-        border-top: 2px dashed var(--el-color-primary);
-    }
-    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
-    & > :deep(.el-tree-node::after) {
-        border-top: none !important;
-        border-top: 0 !important;
-    }
-    & > :deep(.el-tree-node::before) {
-        border-left: none;
-    }
-    // 展开关闭的icon
-    :deep(.el-tree-node__expand-icon) {
-        font-size: 16px;
-        &.is-leaf {
-            color: transparent;
-            font-size: 0;
 
+//组织架构显示信息
+const lavel1_style = {color: "#fff", background: "#108ffe", borderColor: "#108ffe", padding: '10px 15px'}
+const lavel2_style = {background: "#E8E8E8", padding: '10px 15px'}
+const lavel3_style = {
+    background: "none",
+    border: 'none',
+    borderBottom: '1px solid #c8c8c8',
+    borderRadius: '0',
+    boxShadow: 'none',
+    fontSize: '14px',
+    padding: '6px 2px'
+}
 
+const testdata = ref({
+    id: 1,
+    label: "总监办(常洪)",
+    style: lavel1_style,
+    children: [
+        {
+            id: 2,
+            label: '技术部(祝炜)',
+            style: lavel2_style,
+            children: [
+                {
+                    id: 6,
+                    label: '研发经理',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 14,
+                            label: '祝炜',
+                            style: lavel3_style,
+                        }
+                    ],
+                },
+                {
+                    id: 7,
+                    label: '产品经理',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 15,
+                            label: '豆海涛',
+                            style: lavel3_style,
+                        }
+                    ],
+                },
+                {
+                    id: 8,
+                    label: 'JAVA技术',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 16,
+                            label: '王文龙',
+                            style: lavel3_style,
+                        },
+                        {
+                            id: 17,
+                            label: '刘依程',
+                            style: lavel3_style,
+                        }
+                    ],
+                },
+                {
+                    id: 9,
+                    label: '前端技术',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 18,
+                            label: '杜英',
+                            style: lavel3_style,
+                        },
+                        {
+                            id: 19,
+                            label: '黄飞鸿',
+                            style: lavel3_style,
+                        }
+                    ],
+                },
+                {
+                    id: 10,
+                    label: '测试',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 18,
+                            label: '彭成田',
+                            style: lavel3_style,
+                        }
+                    ],
+                },
+            ],
+        },
+        {
+            id: 3,
+            label: '人事部(屈发青)',
+            style: lavel2_style,
+            children: [
+                {
+                    id: 11,
+                    label: '人事管理',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 19,
+                            label: '屈发青',
+                            style: lavel3_style,
+                        }
+                    ],
+                }
+            ],
+        },
+        {
+            id: 4,
+            label: '维护部(覃焕)',
+            style: lavel2_style,
+            children: [
+                {
+                    id: 12,
+                    label: '客服维护',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 20,
+                            label: '代潘',
+                            style: lavel3_style,
+                        },
+                        {
+                            id: 21,
+                            label: '陈佳',
+                            style: lavel3_style,
+                        },
+                        {
+                            id: 22,
+                            label: '张东珍',
+                            style: lavel3_style,
+                        }
+                    ],
+                }
+            ],
+        },
+        {
+            id: 5,
+            label: '业务部(覃焕)',
+            style: lavel2_style,
+            children: [
+                {
+                    id: 13,
+                    label: '业务实施',
+                    style: lavel3_style,
+                    children: [
+                        {
+                            id: 23,
+                            label: '覃焕',
+                            style: lavel3_style,
+                        },
+                        {
+                            id: 24,
+                            label: '黄飞洋',
+                            style: lavel3_style,
+                        },
+                    ],
+                }
+            ],
+        },
+    ]
+})
 
+const onNodeClick = (e, data) => {
+    console.log(e, data)
+}
 
-        }
-    }
-    :deep(.el-tree__empty-block) {
-      min-width: 300px;
+//树节点的菜单点击事件
+const treeMenuTap = ({key, node, data}) => {
+    if (key === 'add') {
+        addClick(data)
+    } else if (key === 'edit') {
+        editClick(data)
+    } else if (key === 'del') {
+        delClick(data)
+    } else if (key === 'auth') {
+        authorityClick(data)
     }
 }
+</script>
 
+<style lang="scss" scoped>
+@import "~src/styles/system/organization.scss";
 </style>
 
 <style lang="scss">
-.content-box{
+.content-box {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -379,22 +416,19 @@ const loadNode = (node, resolve) => {
     width: 100%;
     color: rgb(84, 188, 189);
 }
-.content-box1{
-  text-align: center;
+.content-box1 {
+    text-align: center;
 }
-.add_icon{
+.add_icon {
     font-size: 8rem;
     cursor: pointer;
 
 }
-.h-100p{height: 100%;}
-// 树样式
-.tree-box .el-tree-node{
-    font-size: 18px;
+.h-100p {
+    height: 100%;
 }
-.tree-box .el-tree-node .data-custom-tree-node .level-name{
-    font-size: 24px;
-}
-
 
+.tree-org-node__content .tree-org-node__inner {
+    margin: 0 2px;
+}
 </style>