85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<!-- 小组成员 -->
|
|
<template>
|
|
<a-card :title="title" :bordered="false" :body-style="{ padding: '2px 0px' }">
|
|
<template #extra>
|
|
<more-icon @remove="onRemove" @edit="onEdit" />
|
|
</template>
|
|
<div
|
|
v-for="(item, index) in userList"
|
|
:key="index"
|
|
class="ele-cell user-list-item"
|
|
>
|
|
<div style="flex-shrink: 0">
|
|
<a-avatar :size="46" :src="item.avatar" />
|
|
</div>
|
|
<div class="ele-cell-content">
|
|
<span class="ele-cell-title ele-elip">{{ item.nickname }}</span>
|
|
<div class="ele-cell-desc ele-elip">{{ item.phone }}</div>
|
|
</div>
|
|
<div style="flex-shrink: 0">
|
|
<a-tag :color="['green', 'red'][item.status]">
|
|
{{ ['在线', '离线'][item.status] }}
|
|
</a-tag>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import MoreIcon from './more-icon.vue';
|
|
import { pageUsers } from '@/api/system/user';
|
|
import type { User } from '@/api/system/user/model';
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'remove'): void;
|
|
(e: 'edit'): void;
|
|
}>();
|
|
|
|
// 小组成员数据
|
|
const userList = ref<User[]>([]);
|
|
|
|
/* 查询小组成员 */
|
|
const queryUserList = () => {
|
|
pageUsers({ parentId: 11, limit: 5 }).then((data: any) => {
|
|
userList.value = data.list;
|
|
});
|
|
};
|
|
|
|
const onRemove = () => {
|
|
emit('remove');
|
|
};
|
|
|
|
const onEdit = () => {
|
|
emit('edit');
|
|
};
|
|
|
|
queryUserList();
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.user-list-item {
|
|
padding: 12px 18px;
|
|
|
|
& + .user-list-item {
|
|
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
|
}
|
|
|
|
.ele-cell-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ele-cell-desc {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ant-tag {
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|