|
|
@@ -1,20 +1,10 @@
|
|
|
<template>
|
|
|
<div class="group" v-for="group in userGroupInfo" :key="group.userGroupId">
|
|
|
<div class="group-name">
|
|
|
- <span
|
|
|
- style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px"
|
|
|
- >
|
|
|
+ <span style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px">
|
|
|
{{ group.name }}
|
|
|
</span>
|
|
|
- <span
|
|
|
- style="
|
|
|
- margin-left: 4px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
- line-height: 17px;
|
|
|
- "
|
|
|
- >
|
|
|
+ <span style="margin-left: 4px; font-weight: 400; font-size: 12px; color: rgba(0, 0, 0, 0.88); line-height: 17px">
|
|
|
共
|
|
|
<span style="color: #1777ff">{{ group.total }}</span>
|
|
|
人
|
|
|
@@ -23,24 +13,16 @@
|
|
|
class="user-info"
|
|
|
:class="{ expanded: group.isExpand }"
|
|
|
ref="userInfoRefs"
|
|
|
- :style="
|
|
|
- !group.isExpand ? 'max-height:86px;overflow-y:hidden;' : 'max-height:100%;overflow-y:auto'
|
|
|
- "
|
|
|
+ :style="!group.isExpand ? 'max-height:86px;overflow-y:hidden;' : 'max-height:100%;overflow-y:auto'"
|
|
|
style="display: flex"
|
|
|
>
|
|
|
- <div
|
|
|
- class="left"
|
|
|
- style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; flex: 1"
|
|
|
- >
|
|
|
- <el-tag type="primary" v-for="user in group.userList" :key="user.userId">
|
|
|
- {{ user.loginName }}-{{ user.nickname }}
|
|
|
+ <div class="left" style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; flex: 1">
|
|
|
+ <el-tag type="primary" v-for="user in group.userList" :key="user.id">
|
|
|
+ {{ user.username }}-{{ user.realname }}
|
|
|
</el-tag>
|
|
|
</div>
|
|
|
<div class="right" style="width: 50px; margin-top: 20px" v-if="group.isHidden">
|
|
|
- <span
|
|
|
- @click="toggleExpand(group)"
|
|
|
- style="display: flex; cursor: pointer; align-items: center"
|
|
|
- >
|
|
|
+ <span @click="toggleExpand(group)" style="display: flex; cursor: pointer; align-items: center">
|
|
|
{{ group.isExpand ? '收起' : '展开' }}
|
|
|
<img v-if="group.isExpand" src="@/assets/icons/arrow_top.png" />
|
|
|
<img v-else src="@/assets/icons/arrow_bottom.png" />
|
|
|
@@ -52,42 +34,42 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, watch } from 'vue';
|
|
|
-import { GroupData } from '../persongroup/type';
|
|
|
-const userInfoRefs = ref({});
|
|
|
-const userGroupInfo = ref<GroupData[]>();
|
|
|
-const toggleExpand = (group) => {
|
|
|
- group.isExpand = !group.isExpand;
|
|
|
-};
|
|
|
-const props = defineProps<{
|
|
|
- userGroupInfo?: GroupData[];
|
|
|
-}>();
|
|
|
-watch(
|
|
|
- () => props.userGroupInfo,
|
|
|
- (newVal) => {
|
|
|
- userGroupInfo.value = newVal;
|
|
|
- },
|
|
|
-);
|
|
|
-watch(
|
|
|
- () => userInfoRefs.value,
|
|
|
- (newRefs) => {
|
|
|
- if (newRefs) {
|
|
|
- Object.keys(newRefs).forEach((key) => {
|
|
|
- const el = newRefs[key];
|
|
|
- if (el.offsetHeight >= 86) {
|
|
|
- userGroupInfo.value![key].isHidden = true;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-);
|
|
|
+ import { ref, watch } from 'vue';
|
|
|
+ import { GroupData } from '../persongroup/type';
|
|
|
+ const userInfoRefs = ref({});
|
|
|
+ const userGroupInfo = ref<GroupData[]>();
|
|
|
+ const toggleExpand = (group) => {
|
|
|
+ group.isExpand = !group.isExpand;
|
|
|
+ };
|
|
|
+ const props = defineProps<{
|
|
|
+ userGroupInfo?: GroupData[];
|
|
|
+ }>();
|
|
|
+ watch(
|
|
|
+ () => props.userGroupInfo,
|
|
|
+ (newVal) => {
|
|
|
+ userGroupInfo.value = newVal;
|
|
|
+ },
|
|
|
+ );
|
|
|
+ watch(
|
|
|
+ () => userInfoRefs.value,
|
|
|
+ (newRefs) => {
|
|
|
+ if (newRefs) {
|
|
|
+ Object.keys(newRefs).forEach((key) => {
|
|
|
+ const el = newRefs[key];
|
|
|
+ if (el.offsetHeight >= 86) {
|
|
|
+ userGroupInfo.value![key].isHidden = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ );
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-tag {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 12px;
|
|
|
- color: #409eff;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .el-tag {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #409eff;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+</style>
|