feat: 更新团队管理

This commit is contained in:
wangdan-fit2cloud 2023-12-04 11:18:12 +08:00
parent d877ab05c9
commit 5fdf926324
14 changed files with 224 additions and 121 deletions

View File

@ -44,7 +44,7 @@ function clickHandle(row: any, index: number) {
/* 通用 ui li样式 */
.common-list {
li {
padding: 11px 16px;
padding: 10px 16px;
&.active {
background: var(--el-color-primary-light-9);
border-radius: 4px;

View File

@ -34,31 +34,6 @@ export const iconMap: any = {
}
},
'app-user': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 24 24',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M14 12.3333H10C8.15905 12.3333 6 13.621 6 15.9333V17.7333C6 18.0647 6.29848 18.3333 6.66667 18.3333H17.3333C17.7015 18.3333 18 18.0647 18 17.7333V15.9333C18 13.619 15.841 12.3333 14 12.3333Z',
fill: 'currentColor'
}),
h('path', {
d: 'M8.66667 8.33333C8.66667 10.1743 10.1591 11.6667 12 11.6667C13.8409 11.6667 15.3333 10.1743 15.3333 8.33333C15.3333 6.49238 13.8409 5 12 5C10.1591 5 8.66667 6.49238 8.66667 8.33333Z',
fill: 'currentColor'
})
]
)
])
}
},
'app-add-users': {
iconReader: () => {
return h('i', [
@ -80,47 +55,6 @@ export const iconMap: any = {
}
},
'app-dataset': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 1024 1024',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M859.5 193H446.939c-1.851-53.25-45.747-96-99.439-96h-183C109.635 97 65 141.635 65 196.5v632c0 54.864 44.635 99.5 99.5 99.5h695c54.864 0 99.5-44.636 99.5-99.5v-536c0-54.865-44.636-99.5-99.5-99.5z m-695-33h183c20.126 0 36.5 16.374 36.5 36.5v28c0 17.397 14.103 31.5 31.5 31.5h444c20.126 0 36.5 16.374 36.5 36.5V321H128V196.5c0-20.126 16.374-36.5 36.5-36.5z m695 705h-695c-20.126 0-36.5-16.374-36.5-36.5V384h768v444.5c0 20.126-16.374 36.5-36.5 36.5z',
fill: 'currentColor'
})
]
)
])
}
},
'app-applicaiton': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 1024 1024',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M951.901 244.015l-413.3-238.57a33.606 33.606 0 0 0-33.909 0L91.3 244.016c-10.426 6.12-16.99 17.221-16.99 29.346v477.184c0 12.149 6.447 23.343 16.99 29.37l413.3 238.662c5.213 2.933 11.101 4.515 16.99 4.515 5.794 0 11.775-1.582 16.988-4.515l413.3-238.661c10.427-6.121 16.99-17.222 16.99-29.37V273.36a33.908 33.908 0 0 0-16.966-29.346zM892.23 726.016l-370.618 213.97-370.642-213.97v-427.87L521.588 84.178l370.642 213.97v427.869z m8.797 5.073M285.207 348.393a34.095 34.095 0 0 0-46.336 12.567 33.908 33.908 0 0 0 12.474 46.36l235.94 136.215v269.498a33.745 33.745 0 0 0 33.884 33.885 33.745 33.745 0 0 0 33.886-33.885V543.977L791.9 407.227a34.025 34.025 0 0 0 12.451-46.36 34.025 34.025 0 0 0-46.336-12.474l-236.404 136.54-236.405-136.54z m0 0',
fill: 'currentColor'
})
]
)
])
}
},
'app-exit': {
iconReader: () => {
return h('i', [
@ -143,6 +77,26 @@ export const iconMap: any = {
},
'app-team': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 20 20',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M7.08317 4.16667C5.93317 4.16667 4.99984 5.09958 4.99984 6.25C4.99984 7.40042 5.93317 8.33333 7.08317 8.33333C8.23317 8.33333 9.1665 7.40042 9.1665 6.25C9.1665 5.09958 8.23317 4.16667 7.08317 4.16667ZM3.33317 6.25C3.33317 4.17875 5.01234 2.5 7.08317 2.5C9.154 2.5 10.8332 4.17875 10.8332 6.25C10.8332 8.32125 9.154 10 7.08317 10C5.01234 10 3.33317 8.32125 3.33317 6.25ZM4.86234 12.5C3.34567 12.5 2.08317 13.7488 2.08317 15.3333V16.6667H12.0832V15.3333C12.0832 13.7488 10.8207 12.5 9.304 12.5H4.86234ZM0.416504 15.3333C0.416504 12.8479 2.40817 10.8333 4.86234 10.8333H9.304C11.7582 10.8333 13.7498 12.8479 13.7498 15.3333V17.5833C13.7498 17.9975 13.4165 18.3333 13.0082 18.3333H1.15817C0.749837 18.3333 0.416504 17.9975 0.416504 17.5833V15.3333ZM19.029 17.5H15.304V17.1592V15.8333H17.9165V15.3333C17.9165 14.4983 17.2123 13.75 16.2498 13.75H15.1582C14.9998 13.1342 14.7165 12.5692 14.3373 12.0833H16.2498C18.0915 12.0833 19.5832 13.5383 19.5832 15.3333V16.9583C19.5832 17.2575 19.3332 17.5 19.029 17.5ZM13.7498 8.33333C13.7498 7.87292 14.1248 7.5 14.5832 7.5C15.0415 7.5 15.4165 7.87292 15.4165 8.33333C15.4165 8.79375 15.0415 9.16667 14.5832 9.16667C14.1248 9.16667 13.7498 8.79375 13.7498 8.33333ZM14.5832 5.83333C13.204 5.83333 12.0832 6.9525 12.0832 8.33333C12.0832 9.71417 13.204 10.8333 14.5832 10.8333C15.9623 10.8333 17.0832 9.71417 17.0832 8.33333C17.0832 6.9525 15.9623 5.83333 14.5832 5.83333Z',
fill: 'currentColor'
})
]
)
])
}
},
'app-team-active': {
iconReader: () => {
return h('i', [
h(
@ -174,31 +128,47 @@ export const iconMap: any = {
])
}
},
// 'app-send': {
// iconReader: () => {
// return h('i', [
// h(
// 'svg',
// {
// viewBox: '0 0 24 24',
// version: '1.1',
// xmlns: 'http://www.w3.org/2000/svg'
// },
// [
// h('path', {
// d: 'M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z',
// fill: 'currentColor'
// }),
// h('path', {
// d: 'M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z',
// fill: 'currentColor'
// })
// ]
// )
// ])
// }
// },
'app-template': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 20 20',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M0.833496 6.36987C0.833496 6.04308 1.0245 5.74646 1.32199 5.61123L9.65533 1.82335C9.87443 1.72376 10.1259 1.72376 10.345 1.82335L18.6783 5.61123C18.9758 5.74646 19.1668 6.04308 19.1668 6.36987V14.4849C19.1668 14.8006 18.9885 15.0891 18.7062 15.2303L10.3728 19.3969C10.1382 19.5142 9.86209 19.5142 9.62748 19.3969L1.29415 15.2303C1.01183 15.0891 0.833496 14.8006 0.833496 14.4849V6.36987ZM16.015 6.2314L10.0002 3.49737L3.95283 6.24616L9.9668 8.83681L16.015 6.2314ZM10.8335 10.2782V17.3032L17.5002 13.9699V7.40638L10.8335 10.2782ZM2.50016 7.43512V13.9699L9.16683 17.3032V10.3069L2.50016 7.43512Z',
fill: 'currentColor'
})
]
)
])
}
},
'app-template-active': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 20 20',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M0.833496 7.40037C0.833496 7.04018 1.20284 6.79815 1.53309 6.94194L8.77383 10.0945C8.95625 10.1739 9.07423 10.3539 9.07423 10.5529V18.339C9.07423 18.7151 8.67454 18.9566 8.34159 18.7816L1.1439 14.9982C1.05114 14.9474 0.973682 14.8737 0.919239 14.7847C0.864795 14.6956 0.835262 14.5943 0.833578 14.4907L0.833496 14.4814V7.40037ZM18.4646 6.9322C18.7952 6.78604 19.1668 7.02807 19.1668 7.38949V14.4814C19.1668 14.5866 19.1381 14.6899 19.0835 14.7807C19.029 14.8715 18.9506 14.9466 18.8564 14.9982L11.6587 18.7816C11.3258 18.9566 10.9261 18.7151 10.9261 18.339L10.9261 10.5912C10.9261 10.3932 11.0429 10.2139 11.2239 10.1339L18.4646 6.9322ZM9.70006 1.74337C9.79165 1.69312 9.89502 1.66672 10.0002 1.66672C10.1053 1.66672 10.2087 1.69312 10.3003 1.74337L17.1982 4.80724C17.5964 4.9841 17.5936 5.55021 17.1937 5.72313L10.1986 8.74754C10.072 8.80229 9.92836 8.80229 9.80173 8.74754L2.80663 5.72313C2.4067 5.55021 2.40389 4.9841 2.80209 4.80724L9.70006 1.74337Z',
fill: 'currentColor'
})
]
)
])
}
},
'app-view': {
iconReader: () => {
return h('i', [
@ -412,7 +382,7 @@ export const iconMap: any = {
h('path', {
d: 'M2.00518 1.28008H0.666616C0.666616 1.33341 0.666504 10.6667 0.666616 10.65H2.00518C1.99984 10.6667 1.99984 1.33341 2.00518 1.28008ZM9.70097 10.6511H12.5717C14.5687 10.6511 15.0274 8.88828 14.5687 7.56739L12.5717 2.3101C12.4029 1.69862 11.8409 1.27441 11.1996 1.27441H3.33883C3.15401 1.27441 3.00418 1.42424 3.00418 1.60906V10.3164C3.00418 10.5013 3.15401 10.6511 3.33883 10.6511H4.02656C4.24449 10.6511 4.44877 10.7572 4.5741 10.9355L7.35254 14.888C7.5406 15.1872 8.04825 15.4165 8.58931 15.1701C9.40089 14.8005 10.3724 13.9937 10.3724 12.657C10.3724 12.1528 10.1486 11.4842 9.70097 10.6511ZM12.5717 9.31251H7.46216L8.52184 11.2847C8.87422 11.9405 9.03388 12.4174 9.03388 12.657C9.03388 13.0454 8.95241 13.4846 8.25545 13.8448L5.26935 9.5969C5.14402 9.41861 4.93974 9.31251 4.72181 9.31251H4.34275V2.61298H11.1996C11.2411 2.61298 11.2734 2.63737 11.2813 2.6662L11.298 2.72673L13.3098 8.02277C13.5743 8.8019 13.3105 9.31251 12.5717 9.31251Z',
fill: 'currentColor'
}),
})
]
)
])
@ -442,5 +412,5 @@ export const iconMap: any = {
)
])
}
},
}
}

View File

@ -13,12 +13,12 @@
</el-tag>
</div>
<!-- 输入框 -->
<el-input
<!-- <el-input
:validate-event="false"
v-model="currentval"
:placeholder="tagsList.length == 0 ? placeholder : ''"
@keydown.enter="addTags"
/>
/> -->
</div>
</template>
<script setup lang="ts">

View File

@ -23,7 +23,7 @@ import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { getChildRouteListByPathAndName } from '@/router/index'
import SidebarItem from './SidebarItem.vue'
import AppBreadcrumb from './AppBreadcrumb.vue'
import AppBreadcrumb from './../breadcrumb/index.vue'
const route = useRoute()

View File

@ -2,7 +2,7 @@ import Layout from '@/layout/main-layout/index.vue'
const applicationRouter = {
path: '/application',
name: 'application',
meta: { icon: 'app-applicaiton', title: '应用', permission: 'APPLICATION:READ' },
meta: { title: '应用', permission: 'APPLICATION:READ' },
redirect: '/application',
children: [
{

View File

@ -2,7 +2,7 @@ import Layout from '@/layout/main-layout/index.vue'
const datasetRouter = {
path: '/dataset',
name: 'dataset',
meta: { icon: 'app-dataset', title: '数据集', permission: 'DATASET:READ' },
meta: { title: '数据集', permission: 'DATASET:READ' },
redirect: '/dataset',
children: [
{

View File

@ -11,6 +11,7 @@ const settingRouter = {
name: 'setting',
meta: {
icon: 'app-team',
iconActive: 'app-team-active',
title: '团队管理',
parentPath: '/setting',
parentName: 'setting'
@ -21,7 +22,8 @@ const settingRouter = {
path: '/template',
name: 'template',
meta: {
icon: 'app-team',
icon: 'app-template',
iconActive: 'app-template-active',
title: '模版管理',
activeMenu: '/setting',
parentPath: '/setting',

View File

@ -1,6 +1,4 @@
import { defineStore } from 'pinia'
import type { User } from '@/api/type/user'
import UserApi from '@/api/user'
const useCommonStore = defineStore({
id: 'common',
@ -8,7 +6,7 @@ const useCommonStore = defineStore({
breadcrumb: null
}),
actions: {
saveBreadcrumb(data) {
saveBreadcrumb(data: any) {
this.breadcrumb = data
}
}

View File

@ -20,7 +20,7 @@
.el-avatar {
--el-avatar-bg-color: var(--el-color-primary);
--el-avatar-size-small: 33px;
--el-avatar-border-radius: 8px;
--el-avatar-border-radius: 6px;
cursor: pointer;
}
@ -110,6 +110,8 @@
.el-tag {
--el-tag-border-radius: 2px;
height: 22px;
padding: 0 6px;
}
.el-table {
--el-table-header-bg-color: var(--app-layout-bg-color);

View File

@ -20,11 +20,24 @@
@submit.prevent
>
<el-form-item label="用户名/邮箱" prop="users">
<tags-input
v-model:tags="memberForm.users"
v-model:tag="memberForm.user"
placeholder="请输入成员的用户名或邮箱,若需添加多个成员请使用回车分割。"
/>
<el-select
class="custom-select-multiple"
v-model="memberForm.users"
multiple
filterable
remote
reserve-keyword
placeholder="请输入成员的用户名或邮箱"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
@ -36,11 +49,69 @@
</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ref, watch, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { MsgSuccess } from '@/utils/message'
import TeamApi from '@/api/team'
interface ListItem {
value: string
label: string
}
const states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Carolina',
'North Dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
]
const emit = defineEmits(['refresh'])
const dialogVisible = ref<boolean>(false)
@ -50,6 +121,9 @@ const memberForm = ref({
user: ''
})
const options = ref<ListItem[]>([])
const list = ref<ListItem[]>([])
const addMemberFormRef = ref<FormInstance>()
const loading = ref<boolean>(false)
@ -74,6 +148,20 @@ watch(dialogVisible, (bool) => {
}
})
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
options.value = list.value.filter((item) => {
return item.label.toLowerCase().includes(query.toLowerCase())
})
}, 200)
} else {
options.value = []
}
}
const open = () => {
dialogVisible.value = true
}
@ -96,6 +184,27 @@ const submitMember = async (formEl: FormInstance | undefined) => {
})
}
onMounted(() => {
list.value = states.map((item) => {
return { value: `value:${item}`, label: `label:${item}` }
})
})
defineExpose({ open, close })
</script>
<style lang="scss" scope></style>
<style lang="scss" scope>
.custom-select-multiple {
width: 200%;
.el-input {
min-height: 100px;
}
.el-select__tags {
top: 0;
transform: none;
padding-top: 8px;
}
.el-input__wrapper {
align-items: start;
}
}
</style>

View File

@ -2,7 +2,24 @@
<el-input v-model="filterText" placeholder="搜索" prefix-icon="Search" class="mb-16" />
<el-table :data="data" :max-height="tableHeight">
<el-table-column prop="name" label="数据集名称" />
<el-table-column prop="name" :label="isApplication ? '应用名称' : '数据集名称'">
<template #default="{ row }">
<div class="flex align-center">
<AppAvatar
v-if="isApplication"
:name="row.name"
pinyinColor
class="mr-12"
shape="square"
:size="24"
/>
<AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
<img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
</AppAvatar>
<span class="ellipsis-1"> {{ row?.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="管理" align="center">
<!-- <template #header>
<el-checkbox
@ -30,19 +47,21 @@
</el-table>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
const MANAGE = 'MANAGE'
const USE = 'USE'
import { ref, onMounted, watch, computed } from 'vue'
import { MANAGE, USE, DATASET, APPLICATION } from './../utils'
const props = defineProps({
data: {
type: Array,
default: () => []
},
id: String
id: String,
type: String
})
const isDataset = computed(() => props.type === DATASET)
const isApplication = computed(() => props.type === APPLICATION)
const emit = defineEmits(['update:data'])
const allChecked: any = ref({
[MANAGE]: false,

View File

@ -50,7 +50,7 @@
:label="item.label"
:name="item.value"
>
<PermissionSetting :data="item.data"></PermissionSetting>
<PermissionSetting :data="item.data" :type="item.value"></PermissionSetting>
</el-tab-pane>
</el-tabs>
</div>
@ -71,8 +71,7 @@ import type { TeamMember } from '@/api/type/team'
import CreateMemberDialog from './component/CreateMemberDialog.vue'
import PermissionSetting from './component/PermissionSetting.vue'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
const DATASET = 'DATASET'
import { DATASET, APPLICATION} from './utils'
const CreateMemberRef = ref<InstanceType<typeof CreateMemberDialog>>()
const loading = ref(false)
@ -92,7 +91,7 @@ const settingTags = reactive([
},
{
label: '应用',
value: 'application',
value: APPLICATION,
data: [] as any
}
])

View File

@ -0,0 +1,4 @@
export const MANAGE = 'MANAGE'
export const USE = 'USE'
export const DATASET = 'DATASET'
export const APPLICATION = 'APPLICATION'