7 changed files with 17 additions and 141 deletions
@ -1,109 +0,0 @@ |
|||||
<!-- |
|
||||
@ 作者: 秦东 |
|
||||
@ 时间: 2023-10-13 08:48:13 |
|
||||
@ 备注: 选在人员或角色通用模块 |
|
||||
--> |
|
||||
<script lang='ts' setup> |
|
||||
defineProps({ |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
<template> |
|
||||
<ul class="select-box"> |
|
||||
<template v-for="(elem, i) in list" :key="i"> |
|
||||
<template v-if="elem.type === 'role'"> |
|
||||
<li v-for="item in elem.data" :key="item.roleId" |
|
||||
class="check_box" |
|
||||
:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|
||||
@click="elem.change(item)"> |
|
||||
<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|
||||
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
|
||||
</a> |
|
||||
</li> |
|
||||
</template> |
|
||||
<template v-if="elem.type === 'department'"> |
|
||||
<li v-for="item in elem.data" :key="item.id" class="check_box not" :class="{not: !elem.isDepartment}"> |
|
||||
<a v-if="elem.isDepartment" :class="elem.isActive(item) && 'active'" @click="elem.change(item)"> |
|
||||
<img src="@/assets/images/icon_file.png">{{item.departmentName}} |
|
||||
</a> |
|
||||
<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|
||||
<i @click="elem.next(item)">下级</i> |
|
||||
</li> |
|
||||
</template> |
|
||||
<template v-if="elem.type === 'employee'"> |
|
||||
<li v-for="item in elem.data" :key="item.id" class="check_box"> |
|
||||
<a :class="elem.isActive(item) && 'active'" :title="item.departmentNames" @click="elem.change(item)" > |
|
||||
<img v-if="item.icon != ''" :src="item.icon"> |
|
||||
<img v-if="item.icon == '' && item.iconToBase64 != ''" :src="item.iconToBase64"> |
|
||||
<img v-if="item.icon == '' && item.iconToBase64 == ''" src="@/assets/images/icon_people.png">{{item.employeeName}} |
|
||||
</a> |
|
||||
|
|
||||
</li> |
|
||||
</template> |
|
||||
</template> |
|
||||
</ul> |
|
||||
</template> |
|
||||
<style lang="less"> |
|
||||
|
|
||||
|
|
||||
.select-box { |
|
||||
height: 420px; |
|
||||
overflow-y: auto; |
|
||||
|
|
||||
li { |
|
||||
padding: 5px 0; |
|
||||
|
|
||||
i { |
|
||||
float: right; |
|
||||
padding-left: 24px; |
|
||||
padding-right: 10px; |
|
||||
color: #3195f8; |
|
||||
font-size: 12px; |
|
||||
cursor: pointer; |
|
||||
background: url('../../assets/images/next_level_active.png') no-repeat 10px center; |
|
||||
border-left: 1px solid rgb(238, 238, 238); |
|
||||
} |
|
||||
|
|
||||
a.active+i { |
|
||||
color: rgb(197, 197, 197); |
|
||||
background-image: url('../../assets/images/next_level.png'); |
|
||||
pointer-events: none; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 14px; |
|
||||
vertical-align: middle; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.not{ |
|
||||
a{ |
|
||||
padding-left:20px |
|
||||
} |
|
||||
} |
|
||||
.not a::before { |
|
||||
position: absolute; |
|
||||
width: 14px; |
|
||||
height: 14px; |
|
||||
border: 1px solid #dcdfe6; |
|
||||
border-radius: 2px; |
|
||||
left: 0; |
|
||||
top: 1px; |
|
||||
content: ""; |
|
||||
} |
|
||||
.not a.active { |
|
||||
position: absolute; |
|
||||
width: 10px; |
|
||||
height: 10px; |
|
||||
border-radius: 50%; |
|
||||
top: 3px; |
|
||||
left: 3px; |
|
||||
content: ""; |
|
||||
background: url("../../assets/images/check_box.png") no-repeat center; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue