Add File
This commit is contained in:
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="centerDialogVisible"
|
||||||
|
:title="$t('workspace.add_member')"
|
||||||
|
modal-class="authorized-workspace"
|
||||||
|
width="840"
|
||||||
|
>
|
||||||
|
<p class="mb-8 lighter">{{ $t('workspace.member_type') }}</p>
|
||||||
|
<el-radio-group v-model="listType">
|
||||||
|
<el-radio :value="0">{{ $t('workspace.ordinary_member') }}</el-radio>
|
||||||
|
<el-radio :value="1">{{ $t('workspace.administrator') }}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<p class="mb-8 lighter mt-16">{{ $t('workspace.select_member') }}</p>
|
||||||
|
<div v-loading="loading" class="flex border" style="height: 428px; border-radius: 6px">
|
||||||
|
<div class="p-16 border-r">
|
||||||
|
<el-input
|
||||||
|
v-model="search"
|
||||||
|
:validate-event="false"
|
||||||
|
:placeholder="$t('datasource.search')"
|
||||||
|
style="width: 364px; margin-left: 16px"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<el-icon>
|
||||||
|
<Search></Search>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<div class="mt-8 max-height_workspace">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="checkAll"
|
||||||
|
class="mb-8"
|
||||||
|
style="margin-left: 16px"
|
||||||
|
:indeterminate="isIndeterminate"
|
||||||
|
@change="handleCheckAllChange"
|
||||||
|
>
|
||||||
|
{{ $t('datasource.select_all') }}
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox-group
|
||||||
|
v-model="checkedWorkspace"
|
||||||
|
class="checkbox-group-block"
|
||||||
|
@change="handleCheckedWorkspaceChange"
|
||||||
|
>
|
||||||
|
<el-checkbox
|
||||||
|
v-for="space in workspaceWithKeywords"
|
||||||
|
:key="space.id"
|
||||||
|
:label="space.name"
|
||||||
|
:value="space"
|
||||||
|
class="hover-bg"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<el-icon size="28">
|
||||||
|
<avatar_personal></avatar_personal>
|
||||||
|
</el-icon>
|
||||||
|
<span class="ml-4 ellipsis" style="max-width: 40%" :title="space.name">
|
||||||
|
{{ space.name }}</span
|
||||||
|
>
|
||||||
|
<span class="account ellipsis" style="max-width: 40%" :title="space.account"
|
||||||
|
>({{ space.account }})</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-16 w-full">
|
||||||
|
<div class="flex-between mb-16" style="margin: 0 16px">
|
||||||
|
<span class="lighter">
|
||||||
|
{{ $t('workspace.selected_2_people', { msg: checkTableList.length }) }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<el-button text @click="clearWorkspaceAll">
|
||||||
|
{{ $t('workspace.clear') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="ele in checkTableList"
|
||||||
|
:key="ele.name"
|
||||||
|
style="margin: 0 16px; position: relative"
|
||||||
|
class="flex-between align-center hover-bg_select"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:title="`${ele.name}(${ele.account})`"
|
||||||
|
class="flex align-center ellipsis"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-icon size="28">
|
||||||
|
<avatar_personal></avatar_personal>
|
||||||
|
</el-icon>
|
||||||
|
<span class="ml-4 lighter ellipsis" style="max-width: 40%" :title="ele.name">{{
|
||||||
|
ele.name
|
||||||
|
}}</span>
|
||||||
|
<span class="account ellipsis" style="max-width: 40%" :title="ele.account"
|
||||||
|
>({{ ele.account }})</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<el-button class="close-btn" text>
|
||||||
|
<el-icon size="16" @click="clearWorkspace(ele)"><Close /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button secondary @click="centerDialogVisible = false">
|
||||||
|
{{ $t('common.cancel') }}</el-button
|
||||||
|
>
|
||||||
|
<el-button v-if="!checkedWorkspace.length" disabled type="info">{{
|
||||||
|
$t('model.add')
|
||||||
|
}}</el-button>
|
||||||
|
<el-button v-else type="primary" @click="handleConfirm"> {{ $t('model.add') }} </el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, watch } from 'vue'
|
||||||
|
import { workspaceOptionUserList, workspaceUwsCreate } from '@/api/workspace'
|
||||||
|
import avatar_personal from '@/assets/svg/avatar_personal.svg'
|
||||||
|
import Close from '@/assets/svg/icon_close_outlined_w.svg'
|
||||||
|
import Search from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||||
|
import type { CheckboxValueType } from 'element-plus-secondary'
|
||||||
|
const checkAll = ref(false)
|
||||||
|
const isIndeterminate = ref(false)
|
||||||
|
const checkedWorkspace = ref<any[]>([])
|
||||||
|
const workspace = ref<any[]>([])
|
||||||
|
const listType = ref(0)
|
||||||
|
const search = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
const centerDialogVisible = ref(false)
|
||||||
|
const checkTableList = ref([] as any[])
|
||||||
|
|
||||||
|
const workspaceWithKeywords = computed(() => {
|
||||||
|
return workspace.value.filter((ele: any) =>
|
||||||
|
(ele.name.toLowerCase() as string).includes(search.value.toLowerCase())
|
||||||
|
)
|
||||||
|
})
|
||||||
|
watch(search, () => {
|
||||||
|
const tableNameArr = workspaceWithKeywords.value.map((ele: any) => ele.name)
|
||||||
|
checkedWorkspace.value = checkTableList.value.filter((ele: any) =>
|
||||||
|
tableNameArr.includes(ele.name)
|
||||||
|
)
|
||||||
|
const checkedCount = checkedWorkspace.value.length
|
||||||
|
checkAll.value = checkedCount === workspaceWithKeywords.value.length
|
||||||
|
isIndeterminate.value = checkedCount > 0 && checkedCount < workspaceWithKeywords.value.length
|
||||||
|
})
|
||||||
|
const handleCheckAllChange = (val: CheckboxValueType) => {
|
||||||
|
const tableNameArr = workspaceWithKeywords.value.map((ele: any) => ele.name)
|
||||||
|
checkedWorkspace.value = val
|
||||||
|
? [
|
||||||
|
...new Set([
|
||||||
|
...workspaceWithKeywords.value,
|
||||||
|
...checkedWorkspace.value.filter((ele: any) => !tableNameArr.includes(ele.name)),
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
isIndeterminate.value = false
|
||||||
|
checkTableList.value = val
|
||||||
|
? [
|
||||||
|
...new Set([
|
||||||
|
...workspaceWithKeywords.value,
|
||||||
|
...checkTableList.value.filter((ele: any) => !tableNameArr.includes(ele.name)),
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
: checkTableList.value.filter((ele: any) => !tableNameArr.includes(ele.name))
|
||||||
|
}
|
||||||
|
const handleCheckedWorkspaceChange = (value: CheckboxValueType[]) => {
|
||||||
|
const checkedCount = value.length
|
||||||
|
checkAll.value = checkedCount === workspaceWithKeywords.value.length
|
||||||
|
isIndeterminate.value = checkedCount > 0 && checkedCount < workspaceWithKeywords.value.length
|
||||||
|
const tableNameArr = workspaceWithKeywords.value.map((ele: any) => ele.name)
|
||||||
|
checkTableList.value = [
|
||||||
|
...new Set([
|
||||||
|
...checkTableList.value.filter((ele: any) => !tableNameArr.includes(ele.name)),
|
||||||
|
...value,
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let oid: any = null
|
||||||
|
|
||||||
|
const open = async (id: any) => {
|
||||||
|
loading.value = true
|
||||||
|
search.value = ''
|
||||||
|
oid = id
|
||||||
|
checkedWorkspace.value = []
|
||||||
|
checkTableList.value = []
|
||||||
|
checkAll.value = false
|
||||||
|
isIndeterminate.value = false
|
||||||
|
const systemWorkspaceList = await workspaceOptionUserList({ oid }, 1, 1000)
|
||||||
|
workspace.value = systemWorkspaceList.items.filter((ele: any) => +ele.id !== 1) as any
|
||||||
|
loading.value = false
|
||||||
|
centerDialogVisible.value = true
|
||||||
|
}
|
||||||
|
const emits = defineEmits(['refresh'])
|
||||||
|
const handleConfirm = () => {
|
||||||
|
workspaceUwsCreate({
|
||||||
|
uid_list: checkTableList.value.map((ele: any) => ele.id),
|
||||||
|
oid,
|
||||||
|
weight: listType.value,
|
||||||
|
}).then(() => {
|
||||||
|
centerDialogVisible.value = false
|
||||||
|
emits('refresh')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearWorkspace = (val: any) => {
|
||||||
|
checkedWorkspace.value = checkedWorkspace.value.filter((ele: any) => ele.id !== val.id)
|
||||||
|
checkTableList.value = checkTableList.value.filter((ele: any) => ele.id !== val.id)
|
||||||
|
handleCheckedWorkspaceChange(checkedWorkspace.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearWorkspaceAll = () => {
|
||||||
|
checkedWorkspace.value = []
|
||||||
|
handleCheckedWorkspaceChange([])
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.authorized-workspace {
|
||||||
|
.mb-8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ed-checkbox {
|
||||||
|
margin-right: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-bg,
|
||||||
|
.hover-bg_select {
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
height: 44px;
|
||||||
|
width: calc(100% + 34px);
|
||||||
|
background: #1f23291a;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 6px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
left: -8px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-bg_select {
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
width: calc(100% + 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-16 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-16 {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lighter {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group-block {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group-block {
|
||||||
|
.ed-checkbox,
|
||||||
|
.ed-checkbox__label,
|
||||||
|
.flex {
|
||||||
|
width: 96%;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
align-items: center;
|
||||||
|
.account {
|
||||||
|
color: #8f959e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: #1f23291a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 1px solid #dee0e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-full {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.flex-between {
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-8 {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-height_workspace {
|
||||||
|
max-height: calc(100% - 24px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-between {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-4 {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-r {
|
||||||
|
border-right: 1px solid #dee0e3;
|
||||||
|
width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user