fix: workspaceDropdownSearch
This commit is contained in:
parent
b6c7fe8b88
commit
4aef0f9d21
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="tag-group" v-if="props.tags.length">
|
<div class="tag-group" v-if="props.tags.length">
|
||||||
<el-tag :size="props.size" class="default-tag" style="max-width: 100%">
|
<el-tag :size="props.size" class="default-tag">
|
||||||
<span class="ellipsis" style="max-width: 100%">{{ props.tags[0] }}</span>
|
<span class="ellipsis">{{ props.tags[0] }}</span>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tooltip effect="light" :disabled="tooltipDisabled">
|
<el-tooltip effect="light" :disabled="tooltipDisabled">
|
||||||
<el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
|
<el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dropdown placement="bottom-start" class="workspace-dropdown">
|
<el-dropdown placement="bottom-start" class="workspace-dropdown" popper-class="workspace-dropdown-popper">
|
||||||
<el-button text style="font-size: 14px" class="workspace-dropdown__button">
|
<el-button text style="font-size: 14px" class="workspace-dropdown__button">
|
||||||
<AppIcon iconName="app-workspace" style="font-size: 18px"></AppIcon>
|
<AppIcon iconName="app-workspace" style="font-size: 18px"></AppIcon>
|
||||||
<span class="ellipsis" style="max-width: 155px">
|
<span class="ellipsis" style="max-width: 155px">
|
||||||
@ -10,22 +10,19 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
|
<div class="w-full p-8" style="box-sizing: border-box">
|
||||||
|
<el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
|
||||||
|
</div>
|
||||||
<el-dropdown-menu v-loading="loading">
|
<el-dropdown-menu v-loading="loading">
|
||||||
<el-dropdown-item
|
<el-dropdown-item v-for="item in filterData" :key="item.id"
|
||||||
v-for="item in data"
|
:class="`${item.id === currentWorkspace?.id ? 'active' : ''} flex-between`" @click="changeWorkspace(item)">
|
||||||
:key="item.id"
|
<div class="flex align-center">
|
||||||
:class="item.id === currentWorkspace?.id ? 'active' : ''"
|
|
||||||
@click="changeWorkspace(item)"
|
|
||||||
>
|
|
||||||
<AppIcon class="mr-8" iconName="app-workspace" style="font-size: 16px"></AppIcon>
|
<AppIcon class="mr-8" iconName="app-workspace" style="font-size: 16px"></AppIcon>
|
||||||
<span class="ellipsis" style="max-width: 230px">
|
<span class="ellipsis">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</span>
|
</span>
|
||||||
<el-icon
|
</div>
|
||||||
v-show="item.id === currentWorkspace?.id"
|
<el-icon v-show="item.id === currentWorkspace?.id" class="ml-8" style="font-size: 16px; margin-right: 0">
|
||||||
class="ml-8"
|
|
||||||
style="font-size: 16px; margin-right: 0"
|
|
||||||
>
|
|
||||||
<Check />
|
<Check />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
@ -35,7 +32,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { watch, ref } from 'vue'
|
||||||
import type { WorkspaceItem } from '@/api/type/workspace'
|
import type { WorkspaceItem } from '@/api/type/workspace'
|
||||||
import useStore from '@/stores'
|
import useStore from '@/stores'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -56,6 +53,18 @@ function changeWorkspace(item: WorkspaceItem) {
|
|||||||
folder.setCurrentFolder({})
|
folder.setCurrentFolder({})
|
||||||
emit('changeWorkspace', item)
|
emit('changeWorkspace', item)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterText = ref('')
|
||||||
|
const filterData = ref<any[]>([])
|
||||||
|
|
||||||
|
watch([() => props.data, () => filterText.value], () => {
|
||||||
|
if (!filterText.value.length) {
|
||||||
|
filterData.value = props.data
|
||||||
|
}
|
||||||
|
filterData.value = props.data.filter((v: any) =>
|
||||||
|
v.name.toLowerCase().includes(filterText.value.toLowerCase()),
|
||||||
|
)
|
||||||
|
}, { immediate: true })
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.workspace-dropdown {
|
.workspace-dropdown {
|
||||||
@ -66,3 +75,8 @@ function changeWorkspace(item: WorkspaceItem) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.workspace-dropdown-popper {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
@mouseenter="mouseenter" @mouseleave="mouseId = ''">
|
@mouseenter="mouseenter" @mouseleave="mouseId = ''">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<ReadWrite @change="val => updateChatName(val, row)" :data="row.abstract" trigger="manual"
|
<ReadWrite @change="(val: string) => updateChatName(val, row)" :data="row.abstract" trigger="manual"
|
||||||
:write="row.writeStatus" @close="() => (row.writeStatus = false)" :maxlength="1024" />
|
:write="row.writeStatus" @close="() => (row.writeStatus = false)" :maxlength="1024" />
|
||||||
<div @click.stop v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus" class="flex">
|
<div @click.stop v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus" class="flex">
|
||||||
<el-button style="padding: 0" link @click.stop="() => (row.writeStatus = true)">
|
<el-button style="padding: 0" link @click.stop="() => (row.writeStatus = true)">
|
||||||
|
|||||||
@ -57,9 +57,11 @@
|
|||||||
<el-table-column
|
<el-table-column
|
||||||
prop="nick_name"
|
prop="nick_name"
|
||||||
:label="$t('views.userManage.userForm.nick_name.label')"
|
:label="$t('views.userManage.userForm.nick_name.label')"
|
||||||
|
min-width="180"
|
||||||
|
show-overflow-tooltip
|
||||||
/>
|
/>
|
||||||
<el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
|
<el-table-column prop="username" min-width="180" show-overflow-tooltip :label="$t('views.login.loginForm.username.label')" />
|
||||||
<el-table-column prop="is_active" :label="$t('common.status.label')">
|
<el-table-column width="100" prop="is_active" :label="$t('common.status.label')">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div v-if="row.is_active" class="flex align-center">
|
<div v-if="row.is_active" class="flex align-center">
|
||||||
<el-icon class="color-success mr-8" style="font-size: 16px">
|
<el-icon class="color-success mr-8" style="font-size: 16px">
|
||||||
@ -82,12 +84,13 @@
|
|||||||
prop="email"
|
prop="email"
|
||||||
:label="$t('views.login.loginForm.email.label')"
|
:label="$t('views.login.loginForm.email.label')"
|
||||||
show-overflow-tooltip
|
show-overflow-tooltip
|
||||||
|
min-width="180"
|
||||||
>
|
>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ row.email || '-' }}
|
{{ row.email || '-' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="phone" :label="$t('views.userManage.userForm.phone.label')">
|
<el-table-column prop="phone" width="120" :label="$t('views.userManage.userForm.phone.label')">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ row.phone || '-' }}
|
{{ row.phone || '-' }}
|
||||||
</template>
|
</template>
|
||||||
@ -95,7 +98,7 @@
|
|||||||
<el-table-column
|
<el-table-column
|
||||||
prop="role_name"
|
prop="role_name"
|
||||||
:label="$t('views.role.member.role')"
|
:label="$t('views.role.member.role')"
|
||||||
min-width="100"
|
width="210"
|
||||||
v-if="user.isEE() || user.isPE()"
|
v-if="user.isEE() || user.isPE()"
|
||||||
>
|
>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
@ -119,7 +122,7 @@
|
|||||||
</el-popover>
|
</el-popover>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="source" :label="$t('views.userManage.source.label')">
|
<el-table-column prop="source" width="100" :label="$t('views.userManage.source.label')">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{
|
{{
|
||||||
row.source === 'LOCAL'
|
row.source === 'LOCAL'
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #default>
|
<template #default>
|
||||||
<MemberFormContent ref="memberFormContentRef" :models="formItemModel" v-model:form="list"
|
<MemberFormContent ref="memberFormContentRef" :models="formItemModel" v-model:form="list"
|
||||||
v-loading="memberFormContentLoading" />
|
v-loading="memberFormContentLoading" keepOneLine />
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div style="flex: auto">
|
<div style="flex: auto">
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
|
v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
|
||||||
<el-form label-position="top" ref="formRef" :rules="rules" :model="form" require-asterisk-position="right" @submit.prevent>
|
<el-form label-position="top" ref="formRef" :rules="rules" :model="form" require-asterisk-position="right" @submit.prevent>
|
||||||
<el-form-item :label="$t('views.workspace.name')" prop="name">
|
<el-form-item :label="$t('views.workspace.name')" prop="name">
|
||||||
<el-input v-model="form.name" maxlength="64"
|
<el-input v-model="form.name" maxlength="64" show-word-limit
|
||||||
:placeholder="`${$t('common.inputPlaceholder')}${$t('views.workspace.name')}`" />
|
:placeholder="`${$t('common.inputPlaceholder')}${$t('views.workspace.name')}`" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|||||||
@ -49,7 +49,7 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
</el-Avatar>
|
</el-Avatar>
|
||||||
</div>
|
</div>
|
||||||
<el-avatar v-else class="avatar-green" shape="square" :size="32">
|
<el-avatar v-else class="avatar-green mr-12" shape="square" :size="32">
|
||||||
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
|
<img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
|
||||||
</el-avatar>
|
</el-avatar>
|
||||||
<el-input
|
<el-input
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user