<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>
网友评论