右击自定义菜单,tree选中数据返显

<template>
  <div class="organ">
    <div class="organ_left" :style="widthChange">
      <div v-for="(items,indexs) in dataArray" :key="indexs" class="organ_center">
        <!-- {{ items.length!==0 }} -->
        <div v-if="items.length!=0" class="organ_list">
          <p class="title">{{ indexs==0?'公司':'分部' }}</p>
          <ul class="MenuUl" @contextmenu="showMenu(indexs)">

            <li
              v-for="(item,index) in items"
              :key="item.value"
              :class="indexArray[indexs]==index?'active':''"
              @click="liClick(item,indexs,index)"
            >
              <i class="icon_plus el-icon-plus" />
              <span class="border_span" />
              {{ item.label }}
              <vue-context-menu
                :context-menu-data="contextMenuData"
                @savedata="savedata"
                @newbranchA="newbranchA"
                @newbranchB="newbranchB"
                @newcompany="newcompany"
                @Evenddata="Evenddata"
              />
              <i class="icon_New el-icon-more" @click="changsNew" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="organ_right">
      <span @click="changsUlFun">+</span>
    </div>
    <!-- 弹出框 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      size="560px"
      custom-class="demo-drawer"
      :before-close="handleClose"
    >
      <div class="demo-drawer__content">
        <el-form ref="mechanism" :rules="rules" class="mechanism" :model="mechanism" label-width="80px">
          <el-form-item label="机构名称">
            <el-input v-model="mechanism.name" />
          </el-form-item>
          <el-form-item label="机构类型">
            <el-input v-model="mechanism.type" />
          </el-form-item>
          <el-form-item label="上级机构">
            <el-input v-model="mechanism.superior" @focus="dialogShow" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button v-if="mechanism.dele==1" class="Dele" @click="handleClose">删除机构</el-button>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </div>
      <!-- <div class="footer">
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div> -->
    </el-drawer>

    <el-dialog
      title="选择上级机构"
      :visible.sync="dialogVisible"
      width="888px"
      class="mechanismdialog"
      :before-close="dialogClose"
    >
      <p class="title ">已选机构</p>
      <div class="center">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item
            v-for="(item,index) in breadcrumb"
            :key="index"
          >{{ item.value.label }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- <el-cascader
          v-model="breadcrumb"
          :options="organ"
        /> -->
      </div>
      <p class="title title1">选择</p>
      <div class="center">
        <whyTree
          ref="whyTree"
          :data="organ"
          show-line
          @select="SelectTree"
        />

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import whyTree from '@/components/tree/index'

export default {
  components: {
    whyTree
  },
  data() {
    return {
      organ: [{
        value: 'zhinan',
        label: '指南',
        level: 1,
        id: 1,
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          level: 2,
          id: 4,
          children: [{
            value: 'yizhi',
            label: '一致',
            id: 15,
            level: 3
          }, {
            value: 'fankui',
            label: '反馈',
            id: 16,
            level: 3
          }, {
            value: 'xiaolv',
            label: '效率',
            id: 17,
            level: 3
          }, {
            value: 'kekong',
            label: '可控',
            id: 18,
            level: 3
          }]
        }, {
          value: 'daohang',
          label: '导航',
          level: 2,
          id: 5,
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航',
            id: 19,
            level: 3
          }, {
            value: 'dingbudaohang',
            label: '顶部导航',
            id: 20,
            level: 3
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        level: 1,
        id: 2,
        children: [{
          value: 'basic',
          label: 'Basic',
          level: 2,
          id: 6,
          children: [{
            value: 'layout',
            id: 21,
            label: 'Layout 布局'
          }, {
            value: 'color',
            id: 22,
            label: 'Color 色彩'
          }, {
            value: 'typography',
            id: 23,
            label: 'Typography 字体'
          }, {
            value: 'icon',
            id: 24,
            label: 'Icon 图标'
          }, {
            value: 'button',
            id: 25,
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          level: 2,
          id: 7,
          children: [{
            value: 'radio',
            label: 'Radio 单选框',
            id: 26,
            level: 3
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框',
            id: 27,
            level: 3
          }, {
            value: 'input',
            label: 'Input 输入框',
            id: 28,
            level: 3
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器',
            id: 29,
            level: 3
          }, {
            value: 'select',
            label: 'Select 选择器',
            id: 30,
            level: 3
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器',
            id: 31,
            level: 3
          }, {
            value: 'switch',
            label: 'Switch 开关',
            id: 32,
            level: 3
          }, {
            value: 'slider',
            label: 'Slider 滑块',
            id: 33,
            level: 3
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器',
            id: 34,
            level: 3
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器',
            id: 35,
            level: 3
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器',
            level: 3
          }, {
            value: 'upload',
            label: 'Upload 上传',
            id: 36,
            level: 3
          }, {
            value: 'rate',
            label: 'Rate 评分',
            id: 37,
            level: 3
          }, {
            value: 'form',
            label: 'Form 表单',
            id: 38,
            level: 3
          }]
        }, {
          value: 'data',
          label: 'Data',
          level: 2,
          id: 8,
          children: [{
            value: 'table',
            label: 'Table 表格',
            id: 39,
            level: 3
          }, {
            value: 'tag',
            label: 'Tag 标签',
            id: 40,
            level: 3
          }, {
            value: 'progress',
            label: 'Progress 进度条',
            id: 41,
            level: 3
          }, {
            value: 'tree',
            label: 'Tree 树形控件',
            id: 42,
            level: 3
          }, {
            value: 'pagination',
            label: 'Pagination 分页',
            id: 43,
            level: 3
          }, {
            value: 'badge',
            label: 'Badge 标记',
            id: 44,
            level: 3
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          level: 2,
          id: 9,
          children: [{
            value: 'alert',
            label: 'Alert 警告',
            id: 45,
            level: 3
          }, {
            value: 'loading',
            label: 'Loading 加载',
            id: 46,
            level: 3
          }, {
            value: 'message',
            label: 'Message 消息提示',
            id: 47,
            level: 3
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框',
            id: 48,
            level: 3
          }, {
            value: 'notification',
            label: 'Notification 通知',
            id: 49,
            level: 3
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          level: 2,
          id: 10,
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单',
            id: 50,
            level: 3
          }, {
            value: 'tabs',
            label: 'Tabs 标签页',
            id: 51,
            level: 3
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑',
            id: 52,
            level: 3
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单',
            id: 53,
            level: 3
          }, {
            value: 'steps',
            label: 'Steps 步骤条',
            id: 54,
            level: 3
          }]
        }, {
          value: 'others',
          label: 'Others',
          level: 2,
          id: 11,
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框',
            id: 55,
            level: 3
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示',
            id: 56,
            level: 3
          }, {
            value: 'popover',
            label: 'Popover 弹出框',
            id: 57,
            level: 3
          }, {
            value: 'card',
            label: 'Card 卡片',
            id: 58,
            level: 3
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯',
            id: 59,
            level: 3
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板',
            id: 60,
            level: 3
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        id: 3,
        level: 1,
        children: [{
          value: 'axure',
          label: 'Axure Components',
          id: 12,
          level: 2

        }, {
          value: 'sketch',
          label: 'Sketch Templates',
          id: 13,
          level: 2
        }, {
          value: 'jiaohu',
          label: '组件交互文档',
          id: 14,
          level: 2
        }]
      }],
      widthChange: 'width:300px',
      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: 'demo',
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: []
      },
      menulistsOne: [
        {
          fnHandler: 'savedata', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '查看' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'Evenddata', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '编辑' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'newcompany', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '新建子公司' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'newbranchB',
          icoName: 'fa fa-home fa-fw',
          btnName: '新建下级分部'
        }
      ],
      menulistsTwo: [
        {
          fnHandler: 'savedata', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '查看' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'Evenddata', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '编辑' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'newbranchA', // Binding events(绑定事件)
          icoName: 'fa fa-home fa-fw', // icon (icon图标 )
          btnName: '新建同级分部' // The name of the menu option (菜单名称)
        },
        {
          fnHandler: 'newbranchB',
          icoName: 'fa fa-home fa-fw',
          btnName: '新建下级分部'
        }
      ],
      drawerTitle: '新建机构',
      drawerType: 1,
      drawer: false,
      dialogVisible: false,
      direction: 'rtl',
      indexArray: {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0
      },
      dataArray: {
        0: [],
        1: [],
        2: [],
        3: [],
        4: [],
        5: [],
        6: [],
        7: []
      },
      breadcrumb: [],
      mechanism: {
        name: '',
        type: '',
        superior: '',
        dele: 0

      },
      rules: {
        name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到8 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入机构类型', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到8 个字符', trigger: 'blur' }
        ],
        superior: [
          { required: true, message: '请选择上级机构', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  mounted() {
    this.dataArray[0] = this.organ
    this.showMenu(0)
  },
  methods: {

    SelectTree(childrenArray) {
      const datas = this.$refs.whyTree.getSelectedNodes()
      const dataArray = datas[0].clue.split('-')
      const dataSplice = dataArray.splice(1, dataArray.length)
      this.breadcrumb = []
      this.breadcrumb = this.getValue(dataSplice, this.organ)
    },
    getValue(indexList, rowdata) {
      // 存储value的list
      const valueList = []
      // 如果 indexlist没值 直接返回
      if (indexList.length <= 0) return
      // 遍历这个indexList
      let value
      indexList.forEach((item) => {
        if (valueList.length) {
          if (valueList.length < indexList.length) {
            const newIndex = indexList[valueList.length]
            value = value.children[newIndex]
            valueList.push({ index: newIndex, value: value })
          }
          // 第一次没有值
        } else {
          value = rowdata[item]
          valueList.push({ index: indexList[item], value: rowdata[item] })
        }
        console.log(valueList)
      })
      return valueList
    },
    dialogSubmit() {
      this.dialogVisible = false
    },
    dialogClose(done) {
      this.$confirm('确认关闭?')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    dialogShow() {
      this.dialogVisible = true
    },
    liClick(data, indexs, index) {
      this.listchangs(data, index)
      if (data.children) {
        this.dataArray[data.level] = [...data.children]
        this.widthChange = 'width:' + (parseInt(data.level) + 1) * 290 + 'px'
      }
    },
    showMenu(index) {
      console.log(index, event)
      if (index === 0) {
        this.contextMenuData.menulists = [...this.menulistsOne]
      } else {
        this.contextMenuData.menulists = [...this.menulistsTwo]
      }
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
    savedata() {
      alert('点击查看事件')
      this.mechanism.dele = 1
      this.drawer = true
    },
    Evenddata() {
      alert('点击编辑事件')
    },
    newbranchB() {
      alert('点击创建下级分部!')
    },
    newbranchA() {
      alert('点击创建同级分部!')
    },
    changsNew() {
      alert('---------查看详情')
    },
    newcompany() {
      alert('点击创建子公司')
    },
    changsUlFun() {
      this.drawer = true
    },
    handleClose() {
      this.drawer = false
    },
    onSubmit() {
      this.$refs.mechanism.validate((valid) => {
        if (valid) {
          alert('submit!')
          this.drawer = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.mechanism.resetFields()
    },
    listchangs(data, index) {
      this.indexArray[data.level - 1] = index
      Object.keys(this.dataArray).map(item => {
        // 清空当前选择之后的数据清空
        if (parseInt(item) > data.level) {
          this.dataArray[item] = []
        }
        if (parseInt(item) > data.level - 1) {
          this.indexArray[item] = 0
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.organ{
     height:calc( 100vh - 120px )
}
.organ_left,.organ_right{
    float:left;
    height:100%
}
.organ_right{
    margin-left:10px;
    span{
        display: inline-block;
        width:40px;
        height:40px;
        line-height:34px;
        text-align: center;
        background: #F67F5A;
        color:#fff;
        font-size:32px;
        border-radius: 4px;
        font-weight:700;
        cursor:pointer;
    }
}
.organ_center{
   height:100%;
   float:left;
}
.organ_list{
    width:288px;

    height:100%;
    .title{
        height:30px;
        line-height: 30px;
        font-size:14px;
        text-align: center;
        background: #F6F8FC;
    }
     /deep/ .MenuUl{
        border-right:1px solid #e3e3e3;
        height:100%;
        background: #ffffff;
        padding:10px 6px 10px 14px;
        > li{
            cursor:pointer;
            height:38px;
            line-height: 38px;
            position: relative;
            color:#323232;
            font-size:16px;

            .border_span{
                width:2px;
                height:100%;
                display: inline-block;
                border-right:1px dashed  #e3e3e3;
                position: absolute;
                left:6px;
                top:0px;

            }
            .icon_plus{
                font-size:12px;
                background: #fff;
                position: relative;
                z-index:2;
                border:1px solid #e3e3e3;
                top: -2px;
            }
            .icon_New{
                position: absolute;
                z-index: 3;
                right:8px;
                top:12px;
            }
        }
        li:last-of-type{
            .border_span{
                top:0px;
                height:30%;
            }
        }
         li:first-of-type{
            .border_span{
                top:28px;
                height:30%;
            }
         }
         .active{
            color:#5A8AFE;
         }

    }
}
 /deep/ .vue-contextmenu-listWrapper .context-menu-list{
    height:24px;
    line-height:24px;
}
/deep/ .vue-contextmenu-listWrapper .context-menu-list:hover{
    color:#fff;
}
/deep/ .el-drawer__header{
    margin-bottom: 0;
    padding:0;
    padding-left: 20px;
    height: 54px;
    line-height:54px;
    background: #F6F8FC;
    span{
        border:0;
        outline: none;
    }
    .el-drawer__close-btn{
        outline: none;
    }
}
.mechanism{
    width:80%;
    margin:40px auto;

}
.drawer{
    position: relative;

}
.mechanismdialog{
    .title{
       line-height:50px;
        height:50px;
    }
    .title1{
        line-height:50px;
        height:50px;
    }
    .center{
        border:1px solid #D9D9D9;
        border-radius: 4px;
        padding:10px;
    }
}
.demo-drawer__content{
    height:100%;
    position: relative;
    .demo-drawer__footer{
        position:absolute;
        bottom:130px;
        padding-left:80px;
        button{
            width:80px;
        }
        .Dele{
            border-color:#e6a23c;
            color:#e6a23c;
        }
    }
}
</style>

推荐阅读更多精彩内容