qimall/backend/modules/mall/views/user/relation-tree.php

<?php
/*
 * @Description: 查询节点
 * @Author: lun
 * @Date: 2022-04-25 16:16:34
 * @Copyright: copyright (c) 2021 广东七件事集团
 */
?>
<link rel="stylesheet" href="/resources/unpkg/orgchart/jquery.orgchart.min.css">
<style>
    #jOrgChart {
        position: relative;
        height: 1000px;
        margin: 0.5rem;
        overflow: auto;
        text-align: center;
    }
</style>
<div id="app" v-cloak>
	 <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
	    <div slot="header">
	        <span >关系树状图</span>
	    </div>
		<div class="table-body">
			<div class="input-item">
                <el-select v-model="search.type" placeholder="请选择" size="small">
                    <el-option label="用户ID" :value="1">用户ID</el-option>
                    <el-option label="手机号码" :value="2">手机号码</el-option>
                </el-select>

			    <el-input  style="max-width: 200px;" size="small" placeholder="请输入用户ID/手机号码" v-model="search.keyword" clearable ></el-input>

                <el-radio-group v-model="search.tree_type" style="margin: 0 20px;">
                    <el-radio label="under">团队</el-radio>
                    <el-radio label="top">上级</el-radio>
                </el-radio-group>

				<el-button type="primary" size="small" :loading="listLoading" @click="toSearch">搜索</el-button>

			</div>
			<!-- 节点图 -->
			<div class="dataBox" id="jOrgChart"></div>
		</div>
	 </el-card>
	 <!--  -->
	 <div class="detailcontent">
		<el-popover
		      placement="top"
		      width="200"
		      trigger="manual"
		      v-model="visible">
		      <div>
				  <div >{{detailcontent.id}}</div>
				  <div >{{detailcontent.id}}--</div>
				  <div >手机号{{detailcontent.mobile}}</div>
			  </div>
		</el-popover>
	 </div>
    <!-- 这个是复制用的容器，已隐藏 -->
    <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>
</div>

<script src="/resources/unpkg/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="/resources/unpkg/orgchart/jquery.orgchart.min.js"></script>

<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data() {
            return {
			detailcontent:{},
			listLoading:false,
			zoomnum:2,
			search: {
			    type: 1,
			    keyword: null,
                tree_type: 'under',
			},
			datascource:{},
			visible:false,
			ischildren:false,
			elementchart:'', //要渲染的idming
        }
		},
        computed: {

        },
		created() {

		},
		mounted () {
			vueObj = this
			$('#jOrgChart').delegate('.node_list', 'mouseover', function() {
				 $(this).find(".detailcontent").addClass('detailcontent1')
			})
			$('#jOrgChart').delegate('.node_list', 'mouseout', function() {
				$(this).find(".detailcontent").removeClass('detailcontent1')
			})
			$('#jOrgChart').delegate('.copy', 'click', function() {
				console.log($(this))
				let id = $(this)[0].id
				let idnum = id.substr(5,id.length)
				var url = $('#'+idnum).find('.title').html();
				url = url.replace('<i class="oci oci-leader symbol"></i>', '');// 替换掉
				// createElement() 方法通过指定名称创建一个元素
				var copyInput = document.createElement('input')
				copyInput.setAttribute('value', url)
				document.body.appendChild(copyInput)
				copyInput.select()

				try {
				    var copyed = document.execCommand('copy')
				    if (copyed) {
				        document.body.removeChild(copyInput)
				        vueObj.$message.success('复制成功')
				    }
				} catch {
				    vueObj.$message.success('复制失败，请检查浏览器兼容')
				}
			});
		},
        methods: {
			toSearch() {
				if(this.search.keyword !== '') {
					this.getquerynodeList();
				}
			},
			getquerynodeList(startTime = null, endTime = null) {
				let self = this;
				 // self.listLoading = true;
				$('#jOrgChart').remove
				$("#jOrgChart").empty()
				this.datascource = {}

			    request({
			        params: {
			            r: 'mall/user/relation-tree',
			        },
			        data:{type: this.search.type, keyword: this.search.keyword, tree_type: this.search.tree_type},
			        method: 'post',
			    }).then(e => {
			        self.listLoading = false;
			        if (e.data.code === 0) {
			           self.datascource = e.data.data[0]
					   self.chartFun(self.datascource)
			        } else {
			            self.$message.error(e.data.msg);
			        }
			    }).catch(e => {
			        console.log(e);
			    });
			},
            chartFun(datascource){
                vueObject = this
                let OrgChart = ''
                if(this.ischildren == true){
                    // let elementchart = this.elementchart
                    // $('.node_'+OrgChart).append("<ul class='nodes'  id='OrgChart-"+elementchart+"'></ul>")
                    OrgChart = 'OrgChart-'+this.elementchart
                }else{
                    OrgChart =  'jOrgChart'
                }

                var oc = $('#'+OrgChart).orgchart({
                    'data': datascource,
                    'depth': 20,
                    'nodeContent': 'nickname',
                    'nodeID': 'id',
                    'pan':true,
                    'zoom':true,
                    'direction': 't2b',
                    'createNode': function($node, data) {
                        $node.addClass('node_'+data.id);
                        $node.appendTo("#node_"+data.id);
                        $node.addClass('node_list');
                        let secondMenuIcon = $("<i class='copy el-icon-document-copy' id='copy-"+data.id+"'></i>", {
                            'class': 'el-icon-info',
                            onClick: function() {
                                console.log(55555)
                                console.log(22,$(this))
                            }
                        });

                        let secondMenu = "<div class='second-menu' >"+data.mobile+"</div>";

                        let thridMenu = "<div class='detailcontent'>"+
                                    "	  <div > 会员ID："+data.name+"</div> "+
                                    "	  <div > 会员昵称："+data.nickname+"</div> "+
                                    "	  <div > 手机号码："+data.mobile+"</div> "+
                                    "	  <div > 会员等级："+data.level_name+"</div> "+
                                    "	  <div > 注册时间："+data.created_at+"</div> "+
                                " </div>" ;

                        $node.append(secondMenuIcon).append(secondMenu).append(thridMenu)
                    }
                });
            },
        }
    });
</script>
<style>
	#app{

	}
	.table-body{
		height: auto;
	}
	.copy{
    position: absolute;
    bottom: 106px;
    left: 155px;
    color: #fff;
    width: 43px;
    font-weight: 700;
    font-size: 14px;
	transform: rotate(-90deg) translate(-45px,-45px) rotateY(180deg);
	transform-origin: bottom center;
	cursor: pointer;
		}
	.orgchart .hierarchy::before{
		    border-top: 2px solid #409EFF;
	}
    .orgchart>ul>li>ul li>.node::before{
        background-color:#409EFF;
    }
    .orgchart .node:not(:only-child)::after{
        background-color:#409EFF;
    }
    .orgchart .node .content{
        border:1px solid #409EFF ;
    }
    .orgchart .node .title{
        background-color:#409EFF;
    }
    .detailcontent1{
        display: block !important;
    }
     page{
         background: #fff;
     }
     .node_list{
        position: relative;
     }
     .detailcontent{
        position: absolute;
        top: -40px;
        left: -235px;
        width: 231px;
        background: #fff;
        color: #000;
        padding: 10px;
        border-radius: 5px;
        display: none;
        box-shadow: -1px 6px 10px grey;
        z-index: 99;
        text-align: left;
     }
     .detailcontent div{
         line-height: 22px;
     }
     .orgchart .node .content{
         border-radius: 0;
     }
     .orgchart.l2r .node, .orgchart.r2l .node{
         width: 70px;
     }
     .second-menu{
         transform-origin: top center;
         width: 130px;
         height: 26px;
        border:1px solid #409EFF ;
         border-top: 0;
     }
     .orgchart .node{
         padding: 6px;
     }
</style>