You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
250 lines
8.2 KiB
250 lines
8.2 KiB
4 years ago
|
<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" v-for="(item,index) in data" :key="index">
|
||
|
|
<div class="item" @click.stop="open(item,1)">
|
||
|
|
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> -->
|
||
|
|
<img
|
||
|
|
v-if="item.children&&item.children.length!=0"
|
||
|
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}"
|
||
|
|
src="../../assets/img/icon-xiangyou.png"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
<i v-else class="empty"></i>
|
||
|
|
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i>
|
||
|
|
<span>{{item.label}}</span>
|
||
|
|
<svg t="1604370117041" class="icon edit ft" @click.stop="editMajor(item)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg>
|
||
|
|
<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,2)">
|
||
|
|
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i>
|
||
|
|
<span>{{item1.label}}</span>
|
||
|
|
<svg t="1604370117041" class="icon edit ft" @click.stop="editDepartment(item1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg>
|
||
|
|
<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,type) {
|
||
|
|
item.ifVisible = !item.ifVisible;
|
||
|
|
type == 1 ? this.$emit('fircheckitem',item) : this.$emit('twocheckitem',item)
|
||
|
|
},
|
||
|
|
|
||
|
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，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){
|
||
|
|
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: 18px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.item .empty{
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
.edit{
|
||
|
|
width: 16px !important;
|
||
|
|
height: 16px !important;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.item2 {
|
||
|
|
@include public;
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-left:60px
|
||
|
|
}
|
||
|
|
.item2:hover{
|
||
|
|
color: #9278FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
//清除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: #9278FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.side_icon{
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.side_icon i{
|
||
|
|
cursor:pointer;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.side_tree{
|
||
|
|
width: 100%;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
i{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
span{
|
||
|
|
margin-left: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|