zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tagGroup

Browse Source
This commit is contained in:
teukkk 2025-06-18 19:26:59 +08:00
parent c2081c66e9
commit a7ec04eb8b
4 changed files with 60 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/tag-group/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="tag-group" v-if="props.tags.length">
<el-tag class="default-tag" style="max-width: 100%;">
<span class="ellipsis" style="max-width: 100%;">{{ props.tags[0] }}</span>
</el-tag>
<el-tooltip effect="light">
<el-tag class="info-tag ml-4" v-if="props.tags?.length > 1">
+{{ props.tags?.length - 1 }}
</el-tag>
<template #content>
<el-tag v-for="item in props.tags.slice(1)" :key="item" class="default-tag mr-4">
{{ item }}
</el-tag>
</template>
</el-tooltip>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
tags: string[],
}>()
</script>
<style lang="scss" scoped>
.tag-group {
:deep(.el-tag__content) {
width: 100%;
}
}
</style>

60
ui/src/views/system-chat-user/group/index.vue
View File

@ -14,9 +14,8 @@
<div class="user-left border-r p-16"> <div class="user-left border-r p-16">
<div class="user-left_title flex-between"> <div class="user-left_title flex-between">
<h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4> <h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
<el-tooltip effect="dark" <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
:content="`${$t('common.create')}${$t('views.chatUser.group.title')}`" placement="top">
placement="top">
<el-button type="primary" text @click="createOrUpdate()"> <el-button type="primary" text @click="createOrUpdate()">
<AppIcon iconName="app-copy"></AppIcon> <AppIcon iconName="app-copy"></AppIcon>
</el-button> </el-button>
@ -24,19 +23,18 @@
</div> </div>
<div class="p-8"> <div class="p-8">
<el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
clearable/>
</div> </div>
<div class="list-height-left"> <div class="list-height-left">
<el-scrollbar v-loading="loading"> <el-scrollbar v-loading="loading">
<common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id"> <common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id">
<template #default="{ row }"> <template #default="{ row }">
<div class="flex-between"> <div class="flex-between">
<span>{{ row.name }}</span> <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
<el-dropdown :teleported="false"> <el-dropdown :teleported="false">
<el-button text> <el-button text>
<el-icon class="color-secondary"> <el-icon class="color-secondary">
<MoreFilled/> <MoreFilled />
</el-icon> </el-icon>
</el-button> </el-button>
<template #dropdown> <template #dropdown>
@ -70,9 +68,8 @@
<div class="user-right" v-loading="rightLoading"> <div class="user-right" v-loading="rightLoading">
<div class="flex align-center"> <div class="flex align-center">
<h4 class="medium">{{ current?.name }}</h4> <h4 class="medium">{{ current?.name }}</h4>
<el-divider direction="vertical" class="mr-8 ml-8"/> <el-divider direction="vertical" class="mr-8 ml-8" />
<AppIcon iconName="app-wordspace" style="font-size: 16px" <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
class="color-input-placeholder"></AppIcon>
<span class="color-input-placeholder ml-4"> <span class="color-input-placeholder ml-4">
{{ paginationConfig.total }} {{ paginationConfig.total }}
</span> </span>
@ -89,22 +86,18 @@
</div> </div>
<div class="flex-between complex-search"> <div class="flex-between complex-search">
<el-select class="complex-search__left" v-model="searchType" style="width: 120px"> <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
<el-option :label="$t('views.login.loginForm.username.label')" value="username"/> <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
</el-select> </el-select>
<el-input v-if="searchType === 'username'" v-model="searchForm.username" <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
@change="getList" :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
:placeholder="$t('common.searchBar.placeholder')" style="width: 220px"
clearable/>
</div> </div>
</div> </div>
<app-table :data="tableData" :pagination-config="paginationConfig" <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
@sizeChange="handleSizeChange" @changePage="getList" @selection-change="handleSelectionChange">
@changePage="getList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" />
<el-table-column type="selection" width="55"/> <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
<el-table-column prop="nick_name" <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
:label="$t('views.userManage.userForm.nick_name.label')"/>
<el-table-column prop="username" :label="$t('views.login.loginForm.username.label')"/>
<el-table-column prop="source" :label="$t('views.userManage.source.label')"> <el-table-column prop="source" :label="$t('views.userManage.source.label')">
<template #default="{ row }"> <template #default="{ row }">
{{ {{
@ -124,11 +117,10 @@
</el-table-column> </el-table-column>
<el-table-column :label="$t('common.operation')" width="100" fixed="right"> <el-table-column :label="$t('common.operation')" width="100" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
placement="top">
<el-button type="primary" text @click.stop="handleDeleteUser(row)"> <el-button type="primary" text @click.stop="handleDeleteUser(row)">
<el-icon> <el-icon>
<EditPen/> <EditPen />
</el-icon> </el-icon>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
@ -139,20 +131,20 @@
</div> </div>
</el-card> </el-card>
</ContentContainer> </ContentContainer>
<CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh"/> <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
<CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList"/> <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {onMounted, ref, watch, reactive} from 'vue' import { onMounted, ref, watch, reactive } from 'vue'
import SystemGroupApi from '@/api/system/user-group' import SystemGroupApi from '@/api/system/user-group'
import {t} from '@/locales' import { t } from '@/locales'
import type {ChatUserGroupUserItem} from '@/api/type/systemChatUser' import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'
import iconMap from '@/components/app-icon/icons/common' import iconMap from '@/components/app-icon/icons/common'
import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue' import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue' import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
import type {ListItem} from '@/api/type/common' import type { ListItem } from '@/api/type/common'
import {MsgSuccess, MsgConfirm} from '@/utils/message' import { MsgSuccess, MsgConfirm } from '@/utils/message'
const filterText = ref('') const filterText = ref('')
const loading = ref(false) const loading = ref(false)
@ -274,7 +266,7 @@ function handleSelectionChange(val: any[]) {
function handleDeleteUser(item?: ChatUserGroupUserItem) { function handleDeleteUser(item?: ChatUserGroupUserItem) {
MsgConfirm( MsgConfirm(
item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', {count: multipleSelection.value.length}), item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
'', '',
{ {
confirmButtonText: t('common.confirm'), confirmButtonText: t('common.confirm'),
@ -282,7 +274,7 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
}, },
) )
.then(() => { .then(() => {
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 () => { 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 () => {
MsgSuccess(t('common.deleteSuccess')) MsgSuccess(t('common.deleteSuccess'))
await getList() await getList()
}) })

4
ui/src/views/system-chat-user/user-manage/index.vue
View File

@ -69,10 +69,9 @@
{{ row.phone || '-' }} {{ row.phone || '-' }}
</template> </template>
</el-table-column> </el-table-column>
<!-- TODO -->
<el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')"> <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')">
<template #default="{ row }"> <template #default="{ row }">
{{ row.user_group_names || '-' }} <TagGroup :tags="row.user_group_names" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="source" :label="$t('views.userManage.source.label')"> <el-table-column prop="source" :label="$t('views.userManage.source.label')">
@ -153,6 +152,7 @@ import userManageApi from '@/api/system/chat-user'
import { datetimeFormat } from '@/utils/time' import { datetimeFormat } from '@/utils/time'
import { MsgSuccess, MsgConfirm } from '@/utils/message' import { MsgSuccess, MsgConfirm } from '@/utils/message'
import { t } from '@/locales' import { t } from '@/locales'
import TagGroup from '@/components/tag-group/index.vue'
import iconMap from '@/components/app-icon/icons/common' import iconMap from '@/components/app-icon/icons/common'
import type { ChatUserItem } from '@/api/type/systemChatUser' import type { ChatUserItem } from '@/api/type/systemChatUser'
import SystemGroupApi from '@/api/system/user-group' import SystemGroupApi from '@/api/system/user-group'

2
ui/src/views/workspace/index.vue
View File

@ -20,7 +20,7 @@
<common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id"> <common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id">
<template #default="{ row }"> <template #default="{ row }">
<div class="flex-between"> <div class="flex-between">
<span>{{ row.name }}</span> <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
<el-dropdown :teleported="false"> <el-dropdown :teleported="false">
<el-button text> <el-button text>
<el-icon class="color-secondary"> <el-icon class="color-secondary">