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