parent
dbd354fe31
commit
fa02e97cf7
6 changed files with 134 additions and 449 deletions
@ -1,266 +0,0 @@ |
||||
<template> |
||||
<div class="side_view"> |
||||
<p class="side_icon mab20"> |
||||
<i v-if="auth('员工管理-新增专业')" class="icon-jiahao mar20" @click="addMajor"></i> |
||||
</p> |
||||
<div class="side_tree" v-for="(item,index) in data" :key="index"> |
||||
<div class="item" @click.stop="open(item,1)"> |
||||
<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 v-if="auth('员工管理-编辑专业')" 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 v-if="auth('员工管理-新增部门')" class="el-icon-circle-plus ft fz" @click.stop="addDepartment(item)"></i> |
||||
<i v-if="auth('员工管理-删除专业')" 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 v-if="auth('员工管理-编辑部门')" 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 v-if="auth('员工管理-删除部门')" 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); |
||||
}, |
||||
delDepartment(item, index) { |
||||
this.$emit("delDepartment", item, index); |
||||
}, |
||||
// 班级 |
||||
addClass(item) { |
||||
this.$emit("addClass", item); |
||||
}, |
||||
//判断数组中是否包含某个对象 |
||||
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: 18px !important; |
||||
height: 18px !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; |
||||
} |
||||
} |
||||
|
||||
.fz { |
||||
font-size: 20px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue