Skip to content

Commit a7ec04e

Browse files
1myuan1myuan
committed
feat: tagGroup
1 parent c2081c6 commit a7ec04e

File tree

4 files changed

+60
-37
lines changed

4 files changed

+60
-37
lines changed

‎ui/src/components/tag-group/index.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="tag-group" v-if="props.tags.length">
3+
<el-tag class="default-tag" style="max-width: 100%;">
4+
<span class="ellipsis" style="max-width: 100%;">{{ props.tags[0] }}</span>
5+
</el-tag>
6+
<el-tooltip effect="light">
7+
<el-tag class="info-tag ml-4" v-if="props.tags?.length > 1">
8+
+{{ props.tags?.length - 1 }}
9+
</el-tag>
10+
<template #content>
11+
<el-tag v-for="item in props.tags.slice(1)" :key="item" class="default-tag mr-4">
12+
{{ item }}
13+
</el-tag>
14+
</template>
15+
</el-tooltip>
16+
</div>
17+
</template>
18+
<script setup lang="ts">
19+
const props = defineProps<{
20+
tags: string[],
21+
}>()
22+
23+
</script>
24+
25+
<style lang="scss" scoped>
26+
.tag-group {
27+
:deep(.el-tag__content) {
28+
width: 100%;
29+
}
30+
}
31+
</style>

‎ui/src/views/system-chat-user/group/index.vue‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,27 @@
1414
<div class="user-left border-r p-16">
1515
<div class="user-left_title flex-between">
1616
<h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
17-
<el-tooltip effect="dark"
18-
:content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
19-
placement="top">
17+
<el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
18+
placement="top">
2019
<el-button type="primary" text @click="createOrUpdate()">
2120
<AppIcon iconName="app-copy"></AppIcon>
2221
</el-button>
2322
</el-tooltip>
2423
</div>
2524

2625
<div class="p-8">
27-
<el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
28-
clearable/>
26+
<el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
2927
</div>
3028
<div class="list-height-left">
3129
<el-scrollbar v-loading="loading">
3230
<common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id">
3331
<template #default="{ row }">
3432
<div class="flex-between">
35-
<span>{{ row.name }}</span>
33+
<span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
3634
<el-dropdown :teleported="false">
3735
<el-button text>
3836
<el-icon class="color-secondary">
39-
<MoreFilled/>
37+
<MoreFilled />
4038
</el-icon>
4139
</el-button>
4240
<template #dropdown>
@@ -70,9 +68,8 @@
7068
<div class="user-right" v-loading="rightLoading">
7169
<div class="flex align-center">
7270
<h4 class="medium">{{ current?.name }}</h4>
73-
<el-divider direction="vertical" class="mr-8 ml-8"/>
74-
<AppIcon iconName="app-wordspace" style="font-size: 16px"
75-
class="color-input-placeholder"></AppIcon>
71+
<el-divider direction="vertical" class="mr-8 ml-8" />
72+
<AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
7673
<span class="color-input-placeholder ml-4">
7774
{{ paginationConfig.total }}
7875
</span>
@@ -89,22 +86,18 @@
8986
</div>
9087
<div class="flex-between complex-search">
9188
<el-select class="complex-search__left" v-model="searchType" style="width: 120px">
92-
<el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
89+
<el-option :label="$t('views.login.loginForm.username.label')" value="username" />
9390
</el-select>
94-
<el-input v-if="searchType === 'username'" v-model="searchForm.username"
95-
@change="getList"
96-
:placeholder="$t('common.searchBar.placeholder')" style="width: 220px"
97-
clearable/>
91+
<el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
92+
:placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
9893
</div>
9994
</div>
10095

101-
<app-table :data="tableData" :pagination-config="paginationConfig"
102-
@sizeChange="handleSizeChange"
103-
@changePage="getList" @selection-change="handleSelectionChange">
104-
<el-table-column type="selection" width="55"/>
105-
<el-table-column prop="nick_name"
106-
:label="$t('views.userManage.userForm.nick_name.label')"/>
107-
<el-table-column prop="username" :label="$t('views.login.loginForm.username.label')"/>
96+
<app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
97+
@changePage="getList" @selection-change="handleSelectionChange">
98+
<el-table-column type="selection" width="55" />
99+
<el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
100+
<el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
108101
<el-table-column prop="source" :label="$t('views.userManage.source.label')">
109102
<template #default="{ row }">
110103
{{
@@ -124,11 +117,10 @@
124117
</el-table-column>
125118
<el-table-column :label="$t('common.operation')" width="100" fixed="right">
126119
<template #default="{ row }">
127-
<el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`"
128-
placement="top">
120+
<el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
129121
<el-button type="primary" text @click.stop="handleDeleteUser(row)">
130122
<el-icon>
131-
<EditPen/>
123+
<EditPen />
132124
</el-icon>
133125
</el-button>
134126
</el-tooltip>
@@ -139,20 +131,20 @@
139131
</div>
140132
</el-card>
141133
</ContentContainer>
142-
<CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh"/>
143-
<CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList"/>
134+
<CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
135+
<CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
144136
</template>
145137

146138
<script lang="ts" setup>
147-
import {onMounted, ref, watch, reactive} from 'vue'
139+
import { onMounted, ref, watch, reactive } from 'vue'
148140
import SystemGroupApi from '@/api/system/user-group'
149-
import {t} from '@/locales'
150-
import type {ChatUserGroupUserItem} from '@/api/type/systemChatUser'
141+
import { t } from '@/locales'
142+
import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'
151143
import iconMap from '@/components/app-icon/icons/common'
152144
import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
153145
import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
154-
import type {ListItem} from '@/api/type/common'
155-
import {MsgSuccess, MsgConfirm} from '@/utils/message'
146+
import type { ListItem } from '@/api/type/common'
147+
import { MsgSuccess, MsgConfirm } from '@/utils/message'
156148
157149
const filterText = ref('')
158150
const loading = ref(false)
@@ -274,15 +266,15 @@ function handleSelectionChange(val: any[]) {
274266
275267
function handleDeleteUser(item?: ChatUserGroupUserItem) {
276268
MsgConfirm(
277-
item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', {count: multipleSelection.value.length}),
269+
item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
278270
'',
279271
{
280272
confirmButtonText: t('common.confirm'),
281273
confirmButtonClass: 'danger',
282274
},
283275
)
284276
.then(() => {
285-
SystemGroupApi.postRemoveMember(current.value?.id as string, {group_relation_ids: item ? [item.user_group_relation_id] : multipleSelection.value.map(item => (item.user_group_relation_id))}, loading).then(async () => {
277+
SystemGroupApi.postRemoveMember(current.value?.id as string, { group_relation_ids: item ? [item.user_group_relation_id] : multipleSelection.value.map(item => (item.user_group_relation_id)) }, loading).then(async () => {
286278
MsgSuccess(t('common.deleteSuccess'))
287279
await getList()
288280
})

‎ui/src/views/system-chat-user/user-manage/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,9 @@
6969
{{ row.phone || '-' }}
7070
</template>
7171
</el-table-column>
72-
<!-- TODO -->
7372
<el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')">
7473
<template #default="{ row }">
75-
{{ row.user_group_names || '-' }}
74+
<TagGroup :tags="row.user_group_names" />
7675
</template>
7776
</el-table-column>
7877
<el-table-column prop="source" :label="$t('views.userManage.source.label')">
@@ -153,6 +152,7 @@ import userManageApi from '@/api/system/chat-user'
153152
import { datetimeFormat } from '@/utils/time'
154153
import { MsgSuccess, MsgConfirm } from '@/utils/message'
155154
import { t } from '@/locales'
155+
import TagGroup from '@/components/tag-group/index.vue'
156156
import iconMap from '@/components/app-icon/icons/common'
157157
import type { ChatUserItem } from '@/api/type/systemChatUser'
158158
import SystemGroupApi from '@/api/system/user-group'

‎ui/src/views/workspace/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id">
2121
<template #default="{ row }">
2222
<div class="flex-between">
23-
<span>{{ row.name }}</span>
23+
<span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
2424
<el-dropdown :teleported="false">
2525
<el-button text>
2626
<el-icon class="color-secondary">

0 commit comments

Comments
 (0)