组织机构-VUE

最新推荐文章于 2024-10-02 10:38:28 发布
最新推荐文章于 2024-10-02 10:38:28 发布
阅读量2.7k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webmastar/article/details/80135990
版权



子组件（递归组件，无限下级）：

<template>
  <div ref="rootNode" :class="[isGeneral==0?rootClassNode:[isGeneral==1?firstClassNode:generalClassNode]]">
      <div @click.stop="toUpdateNode(treeRoot)" :class="[isGeneral==0?rootClass:[isGeneral==1?firstClass:generalClass]]" :style="{'cursor':changeFlag?'pointer':'auto'}">
        <span v-if="isGeneral<2"><img src="/static/img/test.0affb86.png" alt=""></span>
        <span >{{treeRoot.name}}</span>
        <span :class="[isGeneral<2?nomalNum:extraNum]">30人</span>
      </div>
      <div v-if="isGeneral==0" class="centerline" :style="{width:centerlineWidth+'px',marginLeft:centerlineLeft+'px'}"></div>
      <recursive-component-tree v-for="item of treeRoot.children" :key="item.id" v-if="treeRoot.children" :tree-root="item" :changeFlag="changeFlag" v-on:toChangeNode="toUpdateNode"></recursive-component-tree>
  </div>
</template>

<script>
  import $ from 'jquery'

    export default {
      name: "recursive-component-tree",
      props: {
        treeRoot:Object,
        changeFlag:Boolean
      },
      data(){
        return{
          rootClass:'rootClass',
          firstClass:'firstClass',
          generalClass:'generalClass',
          rootClassNode:'rootClassNode',
          firstClassNode:'firstClassNode',
          generalClassNode:'generalClassNode',
          nomalNum:'nomalNum',
          extraNum:'extraNum',
          centerlineWidth:0,
          centerlineLeft:0
        }
      },
      updated(){

      },
      mounted(){
        if($(this.$refs.rootNode).attr('class') == 'rootClassNode' && this.isGeneral==0){
          let firstLeft = $($(this.$refs.rootNode).children('.firstClassNode').get(0)).position().left
          let lastLeft = $(this.$refs.rootNode).children(':last-child').position().left
          this.centerlineWidth = lastLeft-firstLeft
          this.centerlineLeft = firstLeft+90
        }
      },
      computed:{
        isGeneral:function () {
          return this.treeRoot.grade;
        }
      },
      methods: {
        toUpdateNode(treeRoot) {
          if(this.changeFlag){
            this.$emit('toChangeNode', treeRoot)
          }
        }
      }
    }
</script>

<style scoped>
  img{
    width: 45px;
    height: 45px;
    border-radius: 22px;
    display: inline-block;
    vertical-align: middle;
  }
.tree{
  text-align:left;
  padding-left:20px;
}
  .rootClass{
    width:161px;
    height:72px;
    background-color:#eff8ff;
    line-height: 72px;
    border-radius: 5px;
    margin:0 auto;
    margin-bottom: 23px;
  }
  .rootClass:after{
    content: "";
    width: 1px;
    height: 23px;
    background-color: #0099ff;
    display: block;
    margin-left: 80px;
  }

  .rootClassNode{
    height: 500px;
    position:relative;
  }
  .firstClass{
    width:161px;
    height:72px;
    background-color:#eff8ff;
    line-height: 72px;
    border-radius: 5px;
    text-align: center;
  }
  .firstClassNode{
    display:inline-block;
    vertical-align:top;
    padding:0 10px;
    text-align: left;
  }
  .firstClassNode:before{
    content: "";
    width: 1px;
    height: 23px;
    background-color: #0099ff;
    display: block;
    margin-left: 80px;
  }
  .generalClass{
    font-size: 14px;
    line-height: 28px;
  }
  .generalClass:before{
    content:'\2022';
    font-size: 18px;
    color: #0099ff;
    padding: 5px;
  }
  .generalClassNode{
    padding-left: 20px;
  }
  .centerline{
    height:1px;
    background-color: #0099ff;
    margin:0 auto;
  }
  .nomalNum{
    font-size: 12px;
    color: #666666;
    display:inline-block;
  }
  .extraNum{
    padding-left:8px;
  }
  .extraNum:before{
    content:'(';
  }
  .extraNum:after{
    content:')';
  }

/*  .firstClass:after{
  display:block;clear:both;content:"";visibility:hidden;height:0
 }*/
</style>


父组件：

<template>
   <div class="all">
     <vDialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></vDialog>
     <headTop :isActive_2="isActive_2">
   </headTop>
        <div class="organization-main">
          <div class="menuLeft">
           <menuLeft :isActive_9="isActive_9"></menuLeft>
          </div>
             <div class='organization-index'>
                <div class='organization-index-top'>
                  <div class='main-top-title'>
                      <img class='main-top-title-img' src='../../assets/roundedRectangle.png'/>
                      <div class='main-top-title-text'>组织结构</div>
                  </div>
                  <div class='main-top-change' @click="toEditStructure()">
                      <img src='../../assets/informationEdit.png'/>
                      <div class='main-top-change-text' >{{changeOrSave}}</div>
                  </div>
                </div>
               <div style="overflow: scroll;white-space:nowrap">
                 <RecursiveComponentTree :tree-root="organizationTree" v-if="updateRoot" :changeFlag="childrenFlag" v-on:toChangeNode="handleChangeNode"></RecursiveComponentTree>

                 <div class='modal-total' v-if="showModal" v-on:click="hideModal()"></div>
                 <!--修改模态框-->
                 <div class="modal" v-if="showModal">
                   <div class='modal-top'>
                     <div class="modal-top-button" v-on:click="hideModal()"></div>
                     <div class='modal-top-right'>
                       <div class='modal-top-right-wrong'></div>
                     </div>
                   </div>
                   <div class="modal-buttons">
                     <div class="modal-updateNode"><span class="modal-NodeName">修改部门名：</span><input type="text" v-model="changeName" /></div>
                     <div class='modal-add-button' @click="showNewNode()" >添加子部门</div>
                     <div class='modal-sub-button' @click="subSelfNode()">删除当前部门</div>
                   </div>
                   <div class='modal-four'>
                     <div class='modal-four-button' @click="submitChange()">确定</div>
                     <div class='modal-four-button' @click="hideModal()">取消</div>
                   </div>
                 </div>
                 <div class="modal-newNode" v-if="showNodeModal">
                   <div class="modal-newNode-top">
                   <div style="display: inline-block;"><span class="modal-newNode-name">新建部门名：</span></div>
                   <div style="display: inline-block;"><input class="modal-newNode-input" type="text" v-model="newNodeName"></div>
                   </div>
                   <div class="modal-newNode-buttons"><button class="modal-newNode-button" @click="addChildNode()">确定</button></div>
                   <div class="modal-newNode-buttons"><button class="modal-newNode-button" @click="hideNodeModal()">取消</button></div>
                 </div>
               </div>
              </div>
        </div>

       <footBottom>
   </footBottom>
   </div>
</template>

<script>
  import headTop from '../../components/header/header.vue'
  import menuLeft from '../../components/enterpriseSetting/enterpriseSetting'
  import footBottom from '../../components/footer/footer.vue'
  import RecursiveComponentTree from '../../components/utils/RecursiveComponentTree'
  import vDialog from '../../components/utils/commonModalTen.vue'
  import $ from 'jquery'

  export default{
    data(){
      return{
        departLength:0,
        fullWidth:0,
        leftWidth:0,
        botWidth:0,
        isActive_9:true,
        isActive_2:true,
        childrenFlag:false,
        changeOrSave:'编辑',
        showModal:false,
        showNodeModal:false,
        showDialog:false,
        master:0,
        dialogOption:[
          {
            title:'',
            text:'',
            happiness:'',
            sad:'',
            department:null
          }
        ],
        newNodeName:'',
        changeName:'',
        treeNode:Object,
        updateRoot:true,
        toList:Object,
        organizationTree:{}
/*        organizationTree:{
          id:1,
          name:'CEO',
          super_id:0,
          grade:'0',
          children:[
            {
              id:11,
              name:'部门1',
              super_id:1,
              grade:'1',
              children:[
                {
                  id:111,
                  name:'部门1-1',
                  grade:'2',
                  super_id:11,
                  children:[
                    {
                      id:1111,
                      name:'部门1-1-1',
                      grade:'3',
                      super_id:111,
                      children:[]
                    }
                  ]
                }
              ]
            },
            {
              id:12,
              name:'部门2',
              grade:'1',
              super_id:1,
              children:[
                {
                  id:121,
                  name:'部门2-1',
                  super_id:12,
                  grade:'2',
                  children:[
                    {
                      id:1211,
                      name:'部门2-1-1',
                      super_id:121,
                      grade:'3',
                      children:[
                        {
                          id:12111,
                          name:'部门2-1-1-1',
                          super_id:1211,
                          grade:'4',
                          children:[]
                        }
                      ]
                    },
                    {
                      id:1212,
                      name:'部门2-1-2',
                      super_id:121,
                      grade:'3',
                      children:[]
                    }
                  ]
                },
                {
                  id:122,
                  name:'部门2-2',
                  super_id:12,
                  grade:'2',
                  children:[]
                }
              ]
            },
            {
              id:13,
              name:'部门3',
              super_id:1,
              grade:'1',
              children:[
                {
                  id:131,
                  name:'部门3-1',
                  super_id:13,
                  grade:'2',
                  children:[]
                }
              ]
            }
          ]
        }*/

      }

    },
    mounted(){
      this.initDate()
/*      window.onbeforeunload = function(event) {
        return "确定退出吗";
      }*/
    },
    created(){

    },

    components: {
      headTop,
      menuLeft,
      footBottom,
      vDialog,
      RecursiveComponentTree
    },
    computed: {

      TreetoList(){
        let listData = [];
        transferTreeData(JSON.parse(JSON.stringify([this.organizationTree])))
        function transferTreeData (sourceData) {
          sourceData.forEach( function(node, nodeIndex) {
            if(node.children.length > 0)
              transferTreeData(node.children)
            listData.push(node)
          })
        }
        return listData;
      },
      ListtoTree() {
        let list = JSON.parse(JSON.stringify(this.toList))
        //let list = this.toList
        let myId = 'id'
        let pId = 'super_id'


        function exists(list, parentId) {  //判断是否有父亲
          for (var i = 0; i < list.length; i++) {
            if (list[i][myId] == parentId) return true
          }
          return false
        }

        var nodes = [];
        for (var i = 0; i < list.length; i++) {
          var row = list[i]
          if (!exists(list, row[pId])) {
            nodes.push(row)
          }
        }

        var toDo = [];
        for (var i = 0; i < nodes.length; i++) {
          toDo.push(nodes[i]);
        }
        while (toDo.length) {
          var node = toDo.shift()
          for (var i = 0; i < list.length; i++) {
            var row = list[i]
            if (row[pId] == node[myId]) {
              if (node.children) {
                node.children.push(row)
              } else {
                node.children = [row]
              }
              row.children = []
              toDo.push(row);
            }
          }
        }

          if(!('children' in nodes[0])){
              nodes[0].children = []
          }
        return nodes;
      }
    },
    methods: {
      initDate(){
        let that = this
        $.ajax({
          type:'POST',
          url:global.urlPath+'getAllDepartments',
          data:{
            enterpriseId:sessionStorage.getItem("enterpriseId")
          },
          success:function(data){
            let result=$.parseJSON(data)
            that.organizationTree = result.departments[0]
          },
          error:function(e){
          }
        })

        $.ajax({
          type:'POST',
          url:global.urlPath+'getDepartmentMaster',
          data:{
            enterpriseId:sessionStorage.getItem("enterpriseId")
          },
          success:function(data){
            let result=$.parseJSON(data)
            that.master = result.master
          }
        })
      },
      toEditStructure(){
        this.childrenFlag = !this.childrenFlag
        this.childrenFlag?this.changeOrSave = '退出编辑':this.changeOrSave = '编辑'
      },
      handleChangeNode(Nodedata){
        //console.log(Nodedata)
        this.showModal = true
        this.toList = JSON.parse(JSON.stringify(this.TreetoList))
        this.toList.forEach(function(Listnode){
          delete Listnode.children
        })
        this.treeNode = this.toList.find((e)=>e.id === Nodedata.id)
        this.changeName = this.treeNode.name
      },
      hideModal(){
        this.showModal=false
      },
      hideNodeModal(){
        this.showNodeModal=false
      },
      submitChange(){
        for(let i=0;i<this.toList.length;i++){
          if(this.toList[i] === this.treeNode){
            this.$set(this.toList[i], 'name', this.changeName)
            let that = this
            $.ajax({
              type:'POST',
              url:global.urlPath+'updateDepartmentName',
              data:{
                id:that.toList[i].id,
                name:this.changeName
              },
              success:function(data){
                let result=$.parseJSON(data)
                console.log(result)
              },
              error:function(e){
              }
            })
          }
        }
        //TODO 修改名称
        this.organizationTree = JSON.parse(JSON.stringify(this.ListtoTree[0]))
        this.hideModal()
      },
      showNewNode(){
        this.showNodeModal=true
        this.showModal=false
      },
      addChildNode(){
        if(this.master == 0){
            this.dialogOption[0].text = '请为当前部门添加职位'
            this.dialogOption[0].happiness = false
            this.dialogOption[0].sad = false
            this.dialogOption[0].departmentId = this.treeNode.id
            this.showDialog = true
        }else {
          for (let i = 0; i < this.toList.length; i++) {
            if (this.toList[i] === this.treeNode) {
              let newNode = {
                id: null,
                name: this.newNodeName,
                grade: this.treeNode.grade + 1,
                enterprise_id: sessionStorage.getItem("enterpriseId"),
                super_id: this.treeNode.id
              }
              let that = this
              /*            $.ajax({
              type:'POST',
              url:global.urlPath+'insertDepartment',
              async: false,
              data:newNode,
              success:function(data){
                let result=$.parseJSON(data)
                newNode.id = result.departmentId
                delete newNode.enterprise_id
              },
              error:function(e){
              }
            })*/
              that.toList.push(newNode)
              //this.$router.push('/addNewOffer')
              this.hideNodeModal()
              //TODO 添加孩子节点
              that.dialogOption[0].text = '请为新部门添加职位'
              that.dialogOption[0].happiness = false
              that.dialogOption[0].sad = false
              that.dialogOption[0].department = newNode
              that.showDialog = true
            }
          }
          this.organizationTree = JSON.parse(JSON.stringify(this.ListtoTree[0]))
          this.hideModal()
        }
      },
      subSelfNode(){
        let subList = [];
        if(this.treeNode.id != 1){
          subList.push(this.treeNode.id)
        }else{
          this.dialogOption[0].text = '根节点不可以删除'
          this.dialogOption[0].happiness = false
          this.dialogOption[0].sad = true
          this.dialogOption[0].department = null
          this.showDialog = true
          return false
        }
        subNode(this.toList,this.treeNode.id)
        function subNode(Node,id){
          for(let i=0;i<Node.length;i++){
            if(Node[i].super_id == id){
              let superId = Node[i].id
              subNode(Node,superId)
              //Node.splice(i,1)
              subList.push(Node[i].id)
            }
          }
        }

        for(let i=0;i<subList.length;i++){
          for(let j=0;j<this.toList.length;j++){
            if(this.toList[j].id === subList[i]){
              this.toList.splice(j,1)
            }
          }
        }
        //TODO 删除
        let ids="";
        for(let i=0;i<subList.length;i++){
          if(i==0){
            ids=subList[i];
          }else{
            ids += ','+subList[i];
          }
        }

        let that = this
        $.ajax({
          type:'POST',
          url:global.urlPath+'deleteDepartment',
          data:{
            ids:ids
          },
          success:function(data){
            let result=$.parseJSON(data)

          },
          error:function(e){
          }
        })

        this.organizationTree = JSON.parse(JSON.stringify(this.ListtoTree[0]))
        this.hideModal()
      }
    },
    watch:{
      organizationTree:{
        handler: function(curVal,oldVal) {
          this.updateRoot = false
          let _this = this
          setTimeout(function (){
            _this.updateRoot = true
          }, 10)
        },
        deep:true  //深度watch
      }
    }
  }
</script>

<style scoped>
.all{
	 position: relative;
      min-height:100%;
      padding-bottom: 200px;
}
.organization-main:after,.organization-index-top:after{
  display:block;clear:both;content:"";visibility:hidden;height:0
}
.organization-main{
	 width:1200px;
    margin:130px auto 70px;
    font-size:14px;
    /*display:flex;*/
    /*flex-direction:row;*/
    font-size:14px;
    text-align:center;
}
.menuLeft{
  float:left;
}
.organization-index{
	background-color:#ffffff;
	width:969px;
  height:650px;
	border-radius:5px;
  padding-bottom:20px;
  margin-left:20px;
  float:right;
}
.organization-index-top{
  /*display:flex;*/
  /*flex-direction:row;*/
}
.main-top-title{
  padding-left:20px;
  padding-top:20px;
  /*width:1050px;*/
  height:100px;
  text-align: left;
  float:left;
  /*display:flex;*/
  /*flex-direction:row;*/
}
.main-top-title-img{
  width:17px;
  height:22px;
  display:inline-block;
  vertical-align: middle;
}
.main-top-title-text{
  padding-left:5px;
  font-weight:600;
  font-size:16px;
  color:#333333;
  vertical-align: middle;
  display:inline-block;
}
.main-top-change{
 padding-top:20px;
  width:150px;
  float:right;
  /*display:flex;*/
  /*flex-direction:row;*/
  font-size:14px;
  color:#0099ff;
  cursor: pointer;
}
.main-top-change img{
  width:20px;
  height:20px;
  display:inline-block;
  vertical-align: middle;
}
.main-top-change-text{
  padding-left:10px;
  display:inline-block;
  vertical-align: middle;
}
.organization-area{
  /*width:969px;*/
  padding-left:40px;
  padding-top:20px;
  padding-right:20px;
  /*overflow-x: scroll;*/
  /*overflow-y:hidden;*/
  white-space: nowrap;
  height:480px;
  scrollbar-face-color: #20a774;
  scrollbar-shadow-color: #20a774;
  scrollbar-track-color: #ccc;
  scrollbar-arrow-color: #ddd;
}
::-webkit-scrollbar-thumb{
   background-color:#018EE8;
   height:50px;
   outline-offset:-2px;
   outline:8px solid #fff;
   -webkit-border-radius:4px;

}
::-webkit-scrollbar-track-piece{
  background-color:#fff;
  -webkit-border-radius:0;
  }
::-webkit-scrollbar{
  width:8px;
  height:8px;
  }
::-webkit-scrollbar-thumb:hover{
  background-color:#FB4446;
  height:50px;
  -webkit-border-radius:4px;
  }
.organization-area-top-out{
 color:#ffffff;
 /*displaY:flex;*/
 /*flex-direction:row;*/
}
.organization-area-top-left{
  color:#ffffff;
  display:inline-block;
}
.organization-area-top{
  /*dispaly:flex;*/
  /*flex-direction:column;*/
  margin: 0 auto;
  display:block;
  width:161px;
}
.organization-area-top-leader{
  width:161px;
  height:72px;
  background-color:#eff8ff;
  color:#333333;
  /*display:flex;*/
  /*flex-direction:row;*/
  line-height:72px;
  border-radius:5px;
}
.organization-area-top-leader img{
  width:45px;
  height:45px;
  margin-top:15px;
  margin-left:10px;
  border-radius:22px;
  display: inline-block;
}
.organization-area-top-leader-name{
  font-size:16px;
  margin-left:10px;
  display: inline-block;
  vertical-align: top;
}
.organization-area-top-leader-count{
  font-size:12px;
  color:#666666;
  margin-left:10px;
  display: inline-block;
  vertical-align: top;
}
.organization-area-top-leader-line{
  width:1px;
  height:23px;
  background-color:#0099ff;
  margin-left:80px;
}
.organization-area-middle{
  min-width:1px;
  height:1px;
  background-color:#0099ff;
  margin: 0 auto;
}
.organization-area-bot{
 white-space:nowrap;

}
.organization-area-bot-index{
  /*width:161px;*/
  vertical-align: top;
  margin-right:20px;
  display:inline-block;
}
.organization-area-bot-line{
  width:1px;
  height:29px;
  margin-left:80px;
  background-color:#0099ff;
}
.organization-area-bot-depart{
  /*width:161px;*/
  height:72px;
  line-height:72px;
  color:#333333;
  background-color:#eff8ff;
  /*display:flex;*/
  /*flex-direction:row;*/
  margin-right:20px;
  border-radius:5px;
}
.organization-area-bot-depart img{
    width:45px;
  height:45px;
  border-radius:22px;
  margin-top:15px;
  margin-left:10px;
  display: inline-block;
}
.organization-area-bot-depart-name{
  font-size:16px;
  margin-left:10px;
  display: inline-block;
  vertical-align:top;
}
.organization-area-bot-depart-count{
  font-size:12px;
  color:#666666;
  margin-right:10px;
  display: inline-block;
  vertical-align:top;
}
.organization-area-bot-depart-position{
  /*width:161px;*/
  /*display:flex;*/
  /*flex-direction:row;*/
  color:#333333;
  font-size:14px;
  white-space:nowrap;
  margin-top:5px;
  margin-bottom:5px;
}
.organization-area-bot-depart-position-little{
  width:5px;
  height:5px;
  border-radius:2.5px;
  background-color:#0099ff;
  margin-top:10px;
  margin-left:5px;
  display:inline-block;
}
.organization-area-bot-depart-position-name{
  margin-left:5px;
  display:inline-block;
}
.organization-area-bot-depart-position-count{
  margin-left:5px;
  display:inline-block;
}
.modal-newNode{
  width:300px;
  height:150px;
  position:absolute;
  left:45%;
  top:20%;
  background-color:#ffffff;
  text-align: center;
  z-index:1000;
}
.modal-newNode-top{
  margin-top:30px;
}
.modal-newNode-name{
  width: 60px;
  height: 36px;
  line-height: 36px;
}
.modal-newNode-input{
  background-color: #edf6fc;
  border-radius: 18px;
  width: 160px;
  height: 32px;
  padding: 0px 10px;
  line-height: 36px;
  border: 1px solid #a4dbff;
  outline: 0 none !important;
}
.modal-newNode-buttons{
  display:inline-block;
}
.modal-newNode-button{
  width: 60px;
  height: 32px;
  display: inline-block;
  font-size: 14px;
  color: #0099ff;
  border: 1px solid #0099ff;
  border-radius: 16px;
  background-color: #fff;
  text-align: center;
  margin: 0px 20px;
  margin-top: 30px;
  cursor: pointer;
}
.modal-total{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 90;
  opacity: 0.2;
}
.modal{
  width:400px;
  height:300px;
  background-color:#ffffff;
  z-index:999;
  position:absolute;
  left:45%;
  top:20%;
  text-align: center;
}
.modal-top {
  width: 10px;
  height: 10px;
  margin-top: 18px;
  margin-left: 365px;
}
.modal-top-button{
  width: 22px;
  height: 22px;
  position: absolute;
  top: 8px;
  right: 9px;
  cursor: pointer;
  z-index: 1;
}
.modal-four{
  margin-top:50px;
}
.modal-add-button{
  width:160px;
  height:32px;
  margin: 0 auto;
  margin-top: 30px;
  font-size:14px;
  color:#0099ff;
  border:1px solid #0099ff;
  border-radius:16px;
  text-align:center;
  padding-top:5px;
  cursor: pointer;
}
.modal-sub-button{
  width:160px;
  height:32px;
  margin: 0 auto;
  margin-top: 30px;
  font-size:14px;
  color:#0099ff;
  border:1px solid #0099ff;
  border-radius:16px;
  text-align:center;
  padding-top:5px;
  cursor: pointer;
}
.modal-four-button{
  width:60px;
  height:32px;
  display:inline-block;
  font-size:14px;
  color:#0099ff;
  border:1px solid #0099ff;
  border-radius:16px;
  text-align:center;
  padding-top:5px;
  margin:0px 20px;
  cursor: pointer;
}
.modal-updateNode{
  text-align: left;
  padding-left: 37px;
  margin-top: 10px;
}
.modal-updateNode input{
  background-color:#edf6fc;
  border-radius:18px;
  width:160px;
  height:32px;
  padding:0px 10px;
  line-height:36px;
  border:1px solid #a4dbff;
  outline: 0 none !important;
}
.modal-NodeName{
  width:60px;
  height:36px;
  line-height:36px;
}
.modal-top-right-wrong{
  width: 30px;
  height:2px;
  background: #868686;
  transform: rotate(45deg);
}
.modal-top-right-wrong:after{
  content:'';
  display:block;
  width: 30px;
  height:2px;
  background: #868686;
  transform: rotate(-90deg);
}
</style>

webmastar
关注
基于Vue的组织架构 组件 组织机构树,可自定义样式
06-05
VUE展示组织架构的树组件,兼容IOS9，老版本浏览器也可以正常显示，效果可以自己调整
vue——实现组织架构图(vue-org-tree)——技能提升
热门推荐
yehaocheng520的博客
08-13 3万+
关于组织架构图，效果图如下： 之前我是用jq写过一个组织架构图，文章链接如下：当时是用的jOrgChart jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.13010
基于RBAC的通用权限管理系统的详细分析与实现（理念篇——权限对象、权限项、功能权限、数据权限、权限组、权限设计）
最新发布
晓风残月淡的博客
10-02 1463
在与人沟通的过程中，我们很多次提到了权限，但是权限具体的含义每个人理解的含义都不明确，这样很容易造成双方信息不对称，有的人就只是把权限理解成某个页面的是否可访问，但是有的人却理解成其他的东西。 所以我们要彻底的定义一下权限是什么？ “权限”这个词语，我们谈论时到底是名词属性还是动词属性？这对于权限的含义很重要。 如果是名词属性的话，那么它应该是有具体的指代物；如果是动词，则应该具有行为表示。 - 权限的名词属性：api接口、页面、业务功能等。 - 权限的动词属性：可访问、新增、编辑、可操作、不可操作等
vue实现组织机构树
06-14
VUE展示组织架构的树组件,兼容IOS9，老版本浏览器也可以正常显示，效果可以自己调整
基于Vue制作组织架构树组件
08-28
最近公司在做一个基于vue开发的项目，项目需要开发一个展示组织架构的树组件，在网上搜了半天，没有找到合适的，下面小编给大家分享一个基于Vue制作组织架构树组件，需要的朋友参考下吧
VueOrgChart一个对树形组织图OrgChartjs封装并修改的Vue2x组件
08-08
Vue-OrgChart: 一个对树形组织图OrgChart.js封装并修改的Vue2.x组件
RuoYi-Vue-Oracle（RuoYi）：基于SpringBoot的官方仓库，Spring Security，JWT，Vue＆Element的前替代分离权限管理系统
02-21
部门管理：配置系统组织机构（公司，部门，小组），树结构展现支持数据权限。 职位管理：配置系统用户所属职位。 菜单管理：配置系统菜单，操作权限，按钮权限标识等。 角色管理：角色菜单权限分配，设置角色按机构...
基于Django-Vue-Admin毕业设计-企业级后端管理系统
11-07
部门管理：配置系统组织机构（公司、部门、角色）。 角色管理：角色菜单权限分配、数据权限分配、设置角色按部门进行数据范围权限划分。 权限权限：授权角色的权限范围。 用户管理：用户是系统操作者，该功能主要...
基于 Vue3、Vite、Ant-Design-Vue大数据开发案例
04-11
包括模块如：组织机构、角色用户、菜单授权、数据权限、系统参数等。强大的组件封装，数据驱动视图。为微小中大型项目的开发，提供现成的开箱解决方案及丰富的示例。 在 Vben Admin 基础上做的改进： 更精致的界面...
基于RuoYi-VUE版本开发的OA协同办公系统源码 集成Flowable流程引擎
08-12
2.部门管理：配置系统组织机构，树结构展现支持数据权限。 3.岗位管理：配置系统用户所属担任职务。 4.菜单管理：配置系统菜单，操作权限，按钮权限标识等。 5.角色管理：角色菜单权限分配、设置角色按机构进行数据...
java版oa源码下载-RuoYi-Vue:RuoYi-Vue基于SpringBoot+Vue的前后端分离权限管理系统
06-04
部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。 岗位管理：配置系统用户所属担任职务。 菜单管理：配置系统菜单，操作权限，按钮权限标识等。 角色管理：角色菜单权限分配、设置角色按...
组织结构图控件
04-18
NULL 博文链接：https://fly-sky.iteye.com/blog/1846750
组织结构插件
11-26
插件描述：一款jquery+css实现的组结构展示图. 参考示例：http://www.jq22.com/jquery-info4494
Vue.js递归组件实现组织架构树和选人功能
10-16
主要介绍了Vue.js递归组件实现组织架构树和选人功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue树状结构图（组织架构）
PEACEMINUSON的博客
01-03 2179
【代码】vue树状结构图（组织架构）
人力资源管理后台 === 组织架构
每天都要努力学习哦~~
11-26 434
通过在el-tree中传入插槽内容，就可以渲染数据自定义树形结构-代码位置(-- 节点结构 -->-- v-slot="{ node, data }" 只能作用在template -->-- $event 实参 表示类型 -->-- 显示区域内容 -->操作-- 下拉菜单选项 -->
基于Vue实现动态组织结构图
li420520的博客
10-20 1万+
最近一个项目里有个前端绘制家谱图的需求，大概是下面这个样子： 基于Vue实现动态组织结构图 点击节点会弹出操作菜单，实现增删改查等操作，查阅网上资料发现，现有案例基本都是基于orgchart这个jQuery插件实现的，我们的项目是基于Vue的，不希望因为这个功能引入jQuery，所以就基于Vue实现了一个简易版的树形图/组织结构图组件：Vue-Tree-Chart。 Vue-Tree-Chart实...
vue部门结构图_Vue组织架构图组件
weixin_39901077的博客
12-21 4093
vue-tree-chart:deciduous_tree: Vue2树形图组件安装npm i vue-tree-chart --save使用in template:in script:import TreeChart from "vue-tree-chart";export default {components: {TreeChart},data() {return {treeData: {...
vue中树状组织架构插件
weixin_47941995的博客
08-31 4301
vue树状组织架构插件
Vue3全栈开发框架 jeesite-vue-master.zip
8. **系统权限管理**：包括组织机构、角色用户、菜单授权、数据权限和系统参数等，这些是后台管理系统中常见的功能模块，用于管理不同用户对系统的访问权限，保证系统的安全性和灵活性。 9. **开箱解决方案及丰富的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值