ldap-clients/doc/ResourceTree备份.vue

<template>
  <div class='list-group system-left-tree' style="overflow-x: auto">

    <div class="chi">
      <tree :model='functions'  :is-click="isClick === false ? isClick : true"  style="display: inline-block" v-ref:resourcetree>
      <span partial>

        <span  :class="{ 'tree-img': isFolder(row), 'tree-span': !isFolder(row) }" v-if="!isClick" >
          <img v-if="isFolder(row)" :src="$parent.$parent.imgSrc" alt="">{{row.data.name}}
        </span>
        <!--节点图标-->
        <img v-if="row.data.resourcetype === 'root'" src="../../../static/ldaplefticon/root.png" style="margin-right: 5px">
        <img v-if="row.data.name === '组织机构' " src="../../../static/ldaplefticon/organization.png" style="margin-right: 5px">
        <img v-if="row.data.name === '功能模块' " src="../../../static/ldaplefticon/功能模块.png" style="margin-right: 5px">
        <img v-if="row.data.name === '功能权限' " src="../../../static/ldaplefticon/功能权限.png" style="margin-right: 5px">
        <img v-if="row.data.name === '手机服务' " src="../../../static/ldaplefticon/手机服务.png" style="margin-right: 5px">
        <img v-if="row.data.name === '超级管理员' " src="../../../static/ldaplefticon/超级管理员.png" style="margin-right: 5px">
        <img v-if="row.data.name === '客服系统' " src="../../../static/ldaplefticon/客服系统.png" style="margin-right: 5px">
        <img v-if="row.data.resourcetype === 'organization' && row.data.name !== '组织机构' " src="../../../static/ldaplefticon/gongsi.png" style="margin-right: 5px">
        <img v-if="row.data.resourcetype === 'user' && row.data.name !== '超级管理员' " src="../../../static/ldaplefticon/renyuan.png" style="margin-right: 5px">
        <img v-if="row.data.resourcetype === 'role'" src="../../../static/ldaplefticon/role.png" style="margin-right: 5px">
        <img v-if="row.data.resourcetype === 'zone'" src="../../../static/ldaplefticon/zone.png" style="margin-right: 5px">
        <img v-if="row.data.resourcetype === 'department'" src="../../../static/ldaplefticon/department.png" style="margin-right: 5px">
        <!--节点名称-->
        <span v-if="isClick">{{row.data.name}}</span>
        <!--<span v-if="row.data.haslicense && row.data.haslicense !== 'false'" >X</span>-->
        <img v-if="row.data.haslicense && row.data.haslicense !== 'false'" src="../../../static/ldaplefticon/qx.png" style="margin:0 0 0 5px; height: 1em; width: 0.8em ">
      </span>
    </tree>
    </div>
  </div>
</template>

<script>
export default {
  props: ['functions', 'userid', 'isClick'],
  title: '左侧树菜单',
  data () {
    return {
      imgSrc: './static/treeset.png'
    }
  },
  ready(){

  },
  methods: {
    open (row) {
      if (row.data.name === '资源管理') {
        this.$parent.changeMain(row.data.id)
        return
      }
      if (this.$parent.routeName === 'main') {
        if (row.data.link) {
          this.$goto(row.data.link, {data: row.data, userid: this.userid}, 'main')
        }
      }else {
        if (row.data.resourcetype) {
          //为修改用户传值
          if(row.data.hasright){
            let parent = this.functions
            delete parent.children
            //针对于资源服务的组件来处理
            if(row.data.name=='部门管理'||row.data.name=='角色管理'||row.data.name=='人员管理'||row.data.name=='资源调配'){
              this.$goto(row.data.link, {data: row.data,parent: parent,userid: this.userid,compid:row.data.id}, 'resmain')
            }else {
              this.$goto(row.data.resourcetype, {data: row.data,parent: parent,userid: this.userid,compid:row.data.id}, 'resmain')
            }
          }
        }
      }
    }
  },
  events: {
    'select-changed': function (data) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      console.log('发生变化 树。。')
      this.open(data.val)
      //console.log(JSON.stringify(data))
    },
    'toggle' () {
      console.log('接收到展开事件', this.$refs.resourcetree)
      // 将当前的下方滚动条设置为靠右
      this.$refs.resourcetree.$el.scrollLeft = this.$refs.resourcetree.$el.scrollWidth - this.$refs.resourcetree.$el.clientWidth

    }
  }
}
</script>