|
|
|
@ -8,26 +8,50 @@ |
|
|
|
default-tab-item 是 我的角色 && 当前不展示 |
|
|
|
tab-choice 不是我的 && 当前展示 |
|
|
|
--> |
|
|
|
<template v-for="(item, index) in roles"> |
|
|
|
<view |
|
|
|
:class="{ |
|
|
|
'default-tab-choice': item.mine == 1 && roleId === item.id, |
|
|
|
'default-tab-item': item.mine == 1 && roleId !== item.id, |
|
|
|
'tab-choice': item.mine == 0 && roleId === item.id, |
|
|
|
}" |
|
|
|
:key="index" |
|
|
|
@click="changeRole(item.id, index)" |
|
|
|
class="tab-item" |
|
|
|
v-if="item.id === roleId" |
|
|
|
> |
|
|
|
<view class="tab-children u-skeleton-fillet u-font-14"> |
|
|
|
{{ item.name }} |
|
|
|
<div class="flex flex-1"> |
|
|
|
<template v-for="(item, index) in roles"> |
|
|
|
<view |
|
|
|
:class="{ |
|
|
|
'default-tab-choice': item.mine == 1 && roleId === item.id, |
|
|
|
'default-tab-item': item.mine == 1 && roleId !== item.id, |
|
|
|
'tab-choice': item.mine == 0 && roleId === item.id, |
|
|
|
}" |
|
|
|
:key="index" |
|
|
|
@click="changeRole(item.id, index)" |
|
|
|
class="tab-item" |
|
|
|
> |
|
|
|
<view class="tab-children u-skeleton-fillet u-font-14"> |
|
|
|
{{ item.name }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<u-icon |
|
|
|
name="arrow-down" |
|
|
|
color="#2979ff" |
|
|
|
size="28" |
|
|
|
type="down" |
|
|
|
v-if="invisibleRoles.length" |
|
|
|
:style="{ transform: `rotate(${isActive ? 0 : 180}deg)` }" |
|
|
|
@click="isActive = !isActive" |
|
|
|
style="transition: transform 0.24s; margin-right: 0px" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
<view :style="{ height: isActive ? '100px' : 0 }" style="transition: all 0.24s" class="role-more-box"> |
|
|
|
<template v-for="(roleItem, roleIndex) in allRoles"> |
|
|
|
<u-tag |
|
|
|
:type="roleId === roleItem.id ? 'primary' : 'info'" |
|
|
|
v-if="roleItem.name !== '平车'" |
|
|
|
class="m-3" |
|
|
|
:key="roleItem.id" |
|
|
|
:text="roleItem.name" |
|
|
|
mode="light" |
|
|
|
@click="changeRole(roleItem.id, roleIndex)" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<!-- 骨架屏 --> |
|
|
|
<u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton> |
|
|
|
</view> |
|
|
|
@ -48,7 +72,9 @@ export default { |
|
|
|
{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 }, |
|
|
|
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }, |
|
|
|
], |
|
|
|
allRoles: [], |
|
|
|
roleLeft: 0, |
|
|
|
isActive: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
@ -60,10 +86,30 @@ export default { |
|
|
|
watch: { |
|
|
|
visibleRoles(val) { |
|
|
|
if (val && val.length) { |
|
|
|
this.roles = [...this.visibleRoles, ...this.invisibleRoles]; |
|
|
|
// this.roles = [...this.visibleRoles, ...this.invisibleRoles]; |
|
|
|
this.roles = [...this.visibleRoles]; |
|
|
|
this.allRoles = [...this.visibleRoles, ...this.invisibleRoles]; |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
roleId(val) { |
|
|
|
let list = [...this.allRoles]; |
|
|
|
let newRoleList = [...this.roles]; |
|
|
|
let newList = []; |
|
|
|
for (var i = 0; i < list.length; i++) { |
|
|
|
if (val === list[i].id && list[i].name !== '平车') { |
|
|
|
newList.push(list[i]); |
|
|
|
newRoleList[0] = list[i]; |
|
|
|
list.splice(i, 1); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
for (var j = 0; j < list.length; j++) { |
|
|
|
newList.push(list[j]); |
|
|
|
} |
|
|
|
this.roles = [...newRoleList]; |
|
|
|
this.allRoles = [...newList]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
@ -71,6 +117,7 @@ export default { |
|
|
|
this.loading = true; |
|
|
|
} else { |
|
|
|
this.roles = [...this.visibleRoles]; |
|
|
|
this.allRoles = [...this.visibleRoles, ...this.invisibleRoles]; |
|
|
|
} |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
@ -158,6 +205,18 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.role-more-box { |
|
|
|
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15); |
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.15); |
|
|
|
overflow: hidden; |
|
|
|
width: 100%; |
|
|
|
background: #fff; |
|
|
|
z-index: 10; |
|
|
|
left: 0; |
|
|
|
// top: 0; |
|
|
|
position: fixed; |
|
|
|
border-radius: 0 0 6px 6px; |
|
|
|
} |
|
|
|
.home-box { |
|
|
|
// 对此盒子进行 sticky 粘性定位 |
|
|
|
position: sticky; |
|
|
|
|
