master
parent
f66c1d00a0
commit
7581d38bd1
14 changed files with 119 additions and 613 deletions
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 829 B |
|
Before Width: | Height: | Size: 683 B |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
@ -1,256 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="side_view"> |
|
||||||
<p class="side_icon mab20"> |
|
||||||
<i class="icon-jiahao mar20" @click="addMajor"></i> |
|
||||||
<!-- <i class="icon-delete"></i> --> |
|
||||||
</p> |
|
||||||
<div class="side_tree" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
|
||||||
<div class="item" @click.stop="open(item)"> |
|
||||||
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> --> |
|
||||||
<img |
|
||||||
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
|
||||||
src="../../../assets/img/icon-xiangyou.png" |
|
||||||
alt |
|
||||||
/> |
|
||||||
{{item.ischeck}} |
|
||||||
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
|
||||||
<span>{{item.staffProfessionalArchitectureName}}</span> |
|
||||||
<i class="el-icon-info ft" @click.stop="editMajor(item)"></i> |
|
||||||
<i class="el-icon-circle-plus ft" @click.stop="addDepartment(item)"></i> |
|
||||||
<i class="icon-delete ft" @click.stop="delMajor(item,index)"></i> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div v-show="item.ifVisible" v-if="item.children&&item.children.length!=0"> |
|
||||||
<div v-for="(item1,index1) in item.children" :key="index1"> |
|
||||||
<div class="item2" @click.stop="open(item1)"> |
|
||||||
{{item1.ischeck}} |
|
||||||
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
|
||||||
<span>{{item1.label}}</span> |
|
||||||
<i class="el-icon-info ft" @click.stop="editDepartment(item1)"></i> |
|
||||||
<i class="icon-delete ft" @click.stop="delDepartment(item1,index1)"></i> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
Array.prototype.removeByValue = function (val) { |
|
||||||
for (var i = 0; i < this.length; i++) { |
|
||||||
if (JSON.stringify(this[i]).indexOf(JSON.stringify(val)) != -1) { |
|
||||||
this.splice(i, 1); |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
chooseList: [] |
|
||||||
}; |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
chooseList(n, o) { |
|
||||||
this.$emit('chooseNode', n); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
props: { |
|
||||||
data: { |
|
||||||
type: Array |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
//点击节点时伸展或收缩列表 |
|
||||||
open(item) { |
|
||||||
item.ifVisible = !item.ifVisible; |
|
||||||
}, |
|
||||||
|
|
||||||
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
|
||||||
choose(item) { |
|
||||||
item.ifVisible = !item.ifVisible; |
|
||||||
if (item.ifVisible) { |
|
||||||
this.chooseList.push(item); |
|
||||||
} else { |
|
||||||
this.chooseList.removeByValue(item); |
|
||||||
} |
|
||||||
}, |
|
||||||
fircheckitem(item){ |
|
||||||
this.$emit('fircheckitem',item); |
|
||||||
}, |
|
||||||
twocheckitem(item){ |
|
||||||
console.log(11,item) |
|
||||||
item.ischeck = !item.ischeck |
|
||||||
console.log(22,item) |
|
||||||
|
|
||||||
this.data.map( e => { |
|
||||||
e.children.map( r => { |
|
||||||
if(r.staffGradeId == item.staffGradeId){ |
|
||||||
if(r.ischeck){ |
|
||||||
e.ischeck = true |
|
||||||
} else { |
|
||||||
e.ischeck = false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
// this.$emit('twocheckitem',item); |
|
||||||
}, |
|
||||||
// 专业 |
|
||||||
addMajor(){ |
|
||||||
this.$emit('addMajor'); |
|
||||||
}, |
|
||||||
editMajor(item){ |
|
||||||
this.$emit('editMajor',item); |
|
||||||
}, |
|
||||||
delMajor(item,index){ |
|
||||||
this.$emit('delMajor',item,index); |
|
||||||
}, |
|
||||||
// 年级 |
|
||||||
addDepartment(item){ |
|
||||||
this.$emit('addDepartment',item); |
|
||||||
}, |
|
||||||
editDepartment(item){ |
|
||||||
this.$emit('editDepartment',item); |
|
||||||
}, |
|
||||||
delDepart(item,index){ |
|
||||||
this.$emit('delDepart',item,index); |
|
||||||
}, |
|
||||||
// 班级 |
|
||||||
addClass(item){ |
|
||||||
this.$emit('addClass',item); |
|
||||||
}, |
|
||||||
editDepartment(item){ |
|
||||||
this.$emit('editDepartment',item); |
|
||||||
}, |
|
||||||
delDepartment(item,index){ |
|
||||||
this.$emit('delDepartment',item,index); |
|
||||||
}, |
|
||||||
//判断数组中是否包含某个对象 |
|
||||||
isHasObj(arr, val) { |
|
||||||
var flag = 0; //1为有 0为没有 |
|
||||||
for (var i = 0; i < arr.length; i++) { |
|
||||||
if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) { |
|
||||||
flag = 1; |
|
||||||
} |
|
||||||
} |
|
||||||
if (flag == 1) { |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
return false; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
|
||||||
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
|
||||||
|
|
||||||
//混合代码,提取item共同样式 |
|
||||||
@mixin public { |
|
||||||
cursor: pointer; |
|
||||||
font-size: 16px; |
|
||||||
color: #333333; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
img { |
|
||||||
height: 20px; |
|
||||||
width: 20px; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
@include public; |
|
||||||
width: 100%; |
|
||||||
padding: 15px 0; |
|
||||||
background:rgba(255,255,255,1); |
|
||||||
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
|
||||||
border-radius:10px; |
|
||||||
text-align: left; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.item:first{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.item2 { |
|
||||||
@include public; |
|
||||||
margin-top: 20px; |
|
||||||
margin-left:60px |
|
||||||
} |
|
||||||
.item2:hover{ |
|
||||||
color: #cb221c; |
|
||||||
} |
|
||||||
|
|
||||||
//清除ul,li的默认样式 |
|
||||||
ul, |
|
||||||
li { |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
// 使三角形旋转动画 |
|
||||||
.arrowTransform { |
|
||||||
transition: 0.4s; |
|
||||||
transform-origin: center; |
|
||||||
transform: rotateZ(0deg); |
|
||||||
} |
|
||||||
.arrowTransformReturn { |
|
||||||
transition: 0.4s; |
|
||||||
transform-origin: center; |
|
||||||
transform: rotateZ(90deg); |
|
||||||
} |
|
||||||
|
|
||||||
//复选框样式 |
|
||||||
.checkBox { |
|
||||||
width: 14px; |
|
||||||
height: 14px; |
|
||||||
border-radius: 7px; |
|
||||||
margin-left: 10px; |
|
||||||
margin-right: 10px; |
|
||||||
border: 2px solid rgba(146, 120, 255, 1); |
|
||||||
} |
|
||||||
|
|
||||||
//当点击复选框时候切换背景图片 |
|
||||||
.isActive { |
|
||||||
background: url('../../../assets/img/icon-yigouxuan.png'); |
|
||||||
background-size: 14px 14px; /*按比例缩放*/ |
|
||||||
} |
|
||||||
|
|
||||||
.side_view{ |
|
||||||
// height: 800px; |
|
||||||
padding: 40px 20px; |
|
||||||
background-color: #fff; |
|
||||||
box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39); |
|
||||||
i { |
|
||||||
color: #cb221c; |
|
||||||
} |
|
||||||
} |
|
||||||
.side_icon{ |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
.side_icon i{ |
|
||||||
cursor:pointer; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.side_tree{ |
|
||||||
width: 100%; |
|
||||||
font-size: 16px; |
|
||||||
color: #333; |
|
||||||
i{ |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
margin-left: 5px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue