70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<template>
|
|
<li class="menu-item">
|
|
<span class="font-bold" v-if="item.nick_name" :title="item.nick_name">{{ item.nick_name }} </span>
|
|
<span :title="item.itemText">{{ item.itemText }}</span>
|
|
<span class="g-member-items-item-tags shrink-0 ml-2">
|
|
<slot name="tags" :data="item" :index="index">
|
|
<custom-tag v-if="isProjectMember" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
|
|
项目成员
|
|
</custom-tag>
|
|
<!-- <custom-tag v-if="isManager" class="g-member-items-item-tag" color="#2865E0" border-color="#E4E9F0">
|
|
管理者
|
|
</custom-tag>
|
|
<custom-tag
|
|
v-if="isVisitor && (item.join_way === 'inherit' || !isManager)"
|
|
class="g-member-items-item-tag"
|
|
color="#0EB07B"
|
|
border-color="#E4E9F0"
|
|
>
|
|
浏览者
|
|
</custom-tag>
|
|
<custom-tag
|
|
v-if="isDeveloper && (item.join_way === 'inherit' || !isManager)"
|
|
class="g-member-items-item-tag"
|
|
color="#707A87"
|
|
border-color="#E4E9F0"
|
|
>
|
|
开发者
|
|
</custom-tag> -->
|
|
</slot>
|
|
</span>
|
|
</li>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({ name: 'MemberItemMini' });
|
|
import CustomTag from '@/components/CustomTag/index.vue';
|
|
import setting from '@/setting';
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
item: any;
|
|
}>(),
|
|
{
|
|
item: {}
|
|
}
|
|
);
|
|
const userRole = setting.role;
|
|
|
|
const { visitor, developer, admin } = setting.role;
|
|
const isDeveloper = computed(() => props.item.access_level >= developer && props.item.access_level < admin);
|
|
const isManager = computed(() => props.item.access_level >= admin);
|
|
const isVisitor = computed(() => props.item.access_level >= visitor && props.item.access_level < developer);
|
|
const isProjectMember = computed(() => {
|
|
return (
|
|
isManager.value
|
|
|| (isDeveloper.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
|
|
|| (isVisitor.value && (props.item.value?.join_way === 'inherit' || !isManager.value))
|
|
);
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.menu-item {
|
|
@apply cursor-pointer whitespace-nowrap overflow-hidden overflow-x-auto text-ellipsis flex items-center;
|
|
padding: 8px;
|
|
max-width: 500px;
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
}
|
|
</style>
|