Add File
This commit is contained in:
970
frontend/src/views/system/workspace/index.vue
Normal file
970
frontend/src/views/system/workspace/index.vue
Normal file
@@ -0,0 +1,970 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import {
|
||||
workspaceList,
|
||||
workspaceUserList,
|
||||
workspaceDelete,
|
||||
workspaceUwsDelete,
|
||||
workspaceCreate,
|
||||
workspaceUpdate,
|
||||
workspaceUwsUpdate,
|
||||
} from '@/api/workspace'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
import arrow_down from '@/assets/svg/arrow-down.svg'
|
||||
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||
import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
|
||||
import icon_form_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
|
||||
import assigned from '@/assets/svg/icon_assigned_outlined.svg'
|
||||
import AuthorizedWorkspaceDialog from './AuthorizedWorkspaceDialog.vue'
|
||||
import rename from '@/assets/svg/icon_rename_outlined.svg'
|
||||
import icon_member from '@/assets/svg/icon_member.svg'
|
||||
import SuccessFilled from '@/assets/svg/gou_icon.svg'
|
||||
import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import delIcon from '@/assets/svg/icon_delete.svg'
|
||||
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
|
||||
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
|
||||
|
||||
const { t } = useI18n()
|
||||
const multipleSelectionAll = ref<any[]>([])
|
||||
const tableList = ref([] as any[])
|
||||
const keyword = ref('')
|
||||
const keywordsMember = ref('')
|
||||
const oldKeywordsMember = ref('')
|
||||
const workspaceFormRef = ref()
|
||||
const authorizedWorkspaceDialog = ref()
|
||||
const tableListWithSearch = computed(() => {
|
||||
if (!keyword.value) return tableList.value
|
||||
return tableList.value.filter((ele) =>
|
||||
ele.name.toLowerCase().includes(keyword.value.toLowerCase())
|
||||
)
|
||||
})
|
||||
const workspaceForm = reactive({
|
||||
name: '',
|
||||
id: '',
|
||||
})
|
||||
|
||||
const userTypeList = [
|
||||
{
|
||||
name: t('workspace.administrator'),
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: t('workspace.ordinary_member'),
|
||||
value: 0,
|
||||
},
|
||||
]
|
||||
|
||||
const handleUserTypeChange = (val: any, row: any) => {
|
||||
workspaceUwsUpdate({
|
||||
uid: row.id,
|
||||
oid: currentTable.value.id,
|
||||
weight: val,
|
||||
}).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: t('common.save_success'),
|
||||
})
|
||||
search()
|
||||
})
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('datasource.please_enter') + t('common.empty') + t('workspace.workspace_name'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
}
|
||||
const fieldListWithSearch = computed(() => {
|
||||
if (!keyword.value) return fieldList.value
|
||||
return fieldList.value.filter((ele: any) =>
|
||||
ele.name.toLowerCase().includes(keywordsMember.value.toLowerCase())
|
||||
)
|
||||
})
|
||||
const currentTable = ref<any>({ id: 1, name: '' })
|
||||
const init = () => {
|
||||
workspaceList().then((res) => {
|
||||
tableList.value = res
|
||||
if (currentTable.value.id) {
|
||||
tableList.value.forEach((ele: any) => {
|
||||
if (ele.id === currentTable.value.id) {
|
||||
currentTable.value.name = ele.name
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const duplicateName = async () => {
|
||||
const res = await workspaceList()
|
||||
const names = res.filter((ele: any) => ele.id !== workspaceForm.id).map((ele: any) => ele.name)
|
||||
if (names.includes(workspaceForm.name)) {
|
||||
ElMessage.error(t('embedded.duplicate_name'))
|
||||
return
|
||||
}
|
||||
|
||||
const req = workspaceForm.id ? workspaceUpdate : workspaceCreate
|
||||
req(workspaceForm).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: t('common.save_success'),
|
||||
})
|
||||
init()
|
||||
fieldDialog.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const fieldDialog = ref<boolean>(false)
|
||||
const multipleTableRef = ref()
|
||||
const isIndeterminate = ref(true)
|
||||
const checkAll = ref(false)
|
||||
const fieldList = ref<any>([])
|
||||
const pageInfo = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const clickTable = (table: any) => {
|
||||
currentTable.value = table
|
||||
pageInfo.currentPage = 1
|
||||
search()
|
||||
}
|
||||
const cancelDelete = () => {
|
||||
handleToggleRowSelection(false)
|
||||
multipleSelectionAll.value = []
|
||||
checkAll.value = false
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const deleteBatchUser = () => {
|
||||
ElMessageBox.confirm(
|
||||
t('workspace.selected_2_members', { msg: multipleSelectionAll.value.length }),
|
||||
{
|
||||
confirmButtonType: 'danger',
|
||||
confirmButtonText: t('workspace.remove'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
customClass: 'confirm-no_icon',
|
||||
autofocus: false,
|
||||
}
|
||||
).then(() => {
|
||||
workspaceUwsDelete({
|
||||
uid_list: multipleSelectionAll.value.map((ele) => ele.id),
|
||||
oid: currentTable.value.id,
|
||||
}).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: t('dashboard.delete_success'),
|
||||
})
|
||||
multipleSelectionAll.value = []
|
||||
search()
|
||||
})
|
||||
})
|
||||
}
|
||||
const deleteHandler = (row: any) => {
|
||||
ElMessageBox.confirm(t('workspace.member_feng_yibudao', { msg: row.name }), {
|
||||
confirmButtonType: 'danger',
|
||||
confirmButtonText: t('workspace.remove'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
customClass: 'confirm-no_icon',
|
||||
autofocus: false,
|
||||
}).then(() => {
|
||||
workspaceUwsDelete({
|
||||
uid_list: [row.id],
|
||||
oid: currentTable.value.id,
|
||||
}).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: t('dashboard.delete_success'),
|
||||
})
|
||||
search()
|
||||
})
|
||||
})
|
||||
}
|
||||
const handleSelectionChange = (val: any[]) => {
|
||||
const ids = fieldList.value.map((ele: any) => ele.id)
|
||||
multipleSelectionAll.value = [
|
||||
...multipleSelectionAll.value.filter((ele) => !ids.includes(ele.id)),
|
||||
...val,
|
||||
]
|
||||
isIndeterminate.value = !(val.length === 0 || val.length === fieldList.value.length)
|
||||
checkAll.value = val.length === fieldList.value.length
|
||||
}
|
||||
const handleCheckAllChange = (val: any) => {
|
||||
isIndeterminate.value = false
|
||||
handleSelectionChange(val ? fieldList.value : [])
|
||||
if (val) {
|
||||
handleToggleRowSelection()
|
||||
} else {
|
||||
multipleTableRef.value.clearSelection()
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleRowSelection = (check: boolean = true) => {
|
||||
let i = 0
|
||||
const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
|
||||
for (const key in fieldList.value) {
|
||||
if (ids.includes((fieldList.value[key] as any).id)) {
|
||||
i += 1
|
||||
multipleTableRef.value.toggleRowSelection(fieldList.value[key], check)
|
||||
}
|
||||
}
|
||||
checkAll.value = i === fieldList.value.length
|
||||
isIndeterminate.value = !(i === 0 || i === fieldList.value.length)
|
||||
}
|
||||
|
||||
const handleAddMember = () => {
|
||||
authorizedWorkspaceDialog.value.open(currentTable.value.id)
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
search()
|
||||
}
|
||||
const search = () => {
|
||||
workspaceUserList(
|
||||
{ oid: currentTable.value.id, keyword: keywordsMember.value },
|
||||
pageInfo.currentPage,
|
||||
pageInfo.pageSize
|
||||
).then((res) => {
|
||||
fieldList.value = res.items.sort((a: any, b: any) => b.weight - a.weight)
|
||||
pageInfo.total = res.total
|
||||
oldKeywordsMember.value = keywordsMember.value
|
||||
})
|
||||
}
|
||||
|
||||
const closeField = () => {
|
||||
fieldDialog.value = false
|
||||
}
|
||||
|
||||
const saveField = () => {
|
||||
workspaceFormRef.value.validate((res: any) => {
|
||||
if (res) {
|
||||
duplicateName()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const delWorkspace = (row: any) => {
|
||||
ElMessageBox.confirm(t('workspace.workspace_de_workspace', { msg: row.name }), {
|
||||
confirmButtonType: 'danger',
|
||||
tip: t('workspace.operate_with_caution'),
|
||||
confirmButtonText: t('dashboard.delete'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
customClass: 'confirm-no_icon',
|
||||
autofocus: false,
|
||||
}).then(() => {
|
||||
workspaceDelete(row.id).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: t('dashboard.delete_success'),
|
||||
})
|
||||
init()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const addWorkspace = (row: any) => {
|
||||
if (row) {
|
||||
workspaceForm.name = row.name
|
||||
workspaceForm.id = row.id
|
||||
} else {
|
||||
workspaceForm.name = ''
|
||||
workspaceForm.id = ''
|
||||
}
|
||||
fieldDialog.value = true
|
||||
}
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageInfo.pageSize = val
|
||||
pageInfo.currentPage = 1
|
||||
search()
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
pageInfo.currentPage = val
|
||||
search()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="workspace no-padding">
|
||||
<div class="side-list">
|
||||
<div class="select-table_top">
|
||||
{{ $t('user.workspace') }}
|
||||
|
||||
<el-tooltip
|
||||
:offset="12"
|
||||
effect="dark"
|
||||
:content="$t('workspace.add_workspace')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon size="18" @click="addWorkspace">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
clearable
|
||||
style="width: 232px"
|
||||
:placeholder="$t('datasource.search')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<icon_searchOutline_outlined class="svg-icon" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<div class="list-content">
|
||||
<el-scrollbar>
|
||||
<div
|
||||
v-for="ele in tableListWithSearch"
|
||||
:key="ele.name"
|
||||
class="model"
|
||||
:class="currentTable.name === ele.name && 'isActive'"
|
||||
:title="ele.name"
|
||||
@click="clickTable(ele)"
|
||||
>
|
||||
<el-icon size="16">
|
||||
<icon_form_outlined></icon_form_outlined>
|
||||
</el-icon>
|
||||
<span class="name">{{ ele.name }}</span>
|
||||
|
||||
<el-popover
|
||||
trigger="click"
|
||||
:teleported="false"
|
||||
popper-class="popover-card"
|
||||
placement="bottom"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon
|
||||
class="more"
|
||||
size="16"
|
||||
style="margin-left: auto; color: #646a73"
|
||||
@click.stop
|
||||
>
|
||||
<icon_more_outlined></icon_more_outlined>
|
||||
</el-icon>
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="item" @click.stop="addWorkspace(ele)">
|
||||
<el-icon size="16">
|
||||
<rename></rename>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.rename') }}
|
||||
</div>
|
||||
<div v-if="ele.id !== 1" class="item" @click.stop="delWorkspace(ele)">
|
||||
<el-icon size="16">
|
||||
<delIcon></delIcon>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
<div v-if="!!keyword && !tableListWithSearch.length" class="no-result">
|
||||
{{ $t('workspace.relevant_content_found') }}
|
||||
</div>
|
||||
</div>
|
||||
<EmptyBackground
|
||||
v-if="!!keyword && !tableListWithSearch.length"
|
||||
:description="$t('datasource.relevant_content_found')"
|
||||
img-type="tree"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="currentTable.name" class="info-table">
|
||||
<div class="table-name">
|
||||
<div class="name">
|
||||
{{ currentTable.name }}
|
||||
<span class="line"></span>
|
||||
<el-icon style="margin: 0 4px 0 8px" size="16">
|
||||
<icon_member></icon_member>
|
||||
</el-icon>
|
||||
{{ pageInfo.total }}
|
||||
</div>
|
||||
<div class="notes">
|
||||
<el-button type="primary" @click="handleAddMember">
|
||||
<template #icon>
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</template>
|
||||
{{ $t('workspace.add_member') }}
|
||||
</el-button>
|
||||
<el-input
|
||||
v-model="keywordsMember"
|
||||
clearable
|
||||
style="width: 232px"
|
||||
:placeholder="$t('workspace.name_username_email')"
|
||||
@blur="search"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<icon_searchOutline_outlined class="svg-icon" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content" :class="multipleSelectionAll.length && 'show-pagination_height'">
|
||||
<div class="preview-or-schema">
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="fieldListWithSearch"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" :label="$t('user.name')" width="160" />
|
||||
<el-table-column prop="account" :label="$t('user.account')" width="160" />
|
||||
<el-table-column prop="status" :label="$t('user.user_status')">
|
||||
<template #default="scope">
|
||||
<div
|
||||
class="user-status-container"
|
||||
:class="[scope.row.status ? 'active' : 'disabled']"
|
||||
>
|
||||
<el-icon size="16">
|
||||
<SuccessFilled v-if="scope.row.status" />
|
||||
<CircleCloseFilled v-else />
|
||||
</el-icon>
|
||||
<span>{{ $t(`user.${scope.row.status ? 'enabled' : 'disabled'}`) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" :label="$t('user.email')" width="204" />
|
||||
<el-table-column
|
||||
class-name="user-source"
|
||||
prop="weight"
|
||||
:label="$t('workspace.member_type')"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-popover popper-class="system-workspace_user" placement="bottom">
|
||||
<template #reference>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<span>{{
|
||||
scope.row.weight === 1
|
||||
? t('workspace.administrator')
|
||||
: t('workspace.ordinary_member')
|
||||
}}</span>
|
||||
<el-icon style="display: none" size="16">
|
||||
<arrow_down></arrow_down>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="popover">
|
||||
<div class="popover-content">
|
||||
<div
|
||||
v-for="ele in userTypeList"
|
||||
:key="ele.name"
|
||||
class="popover-item"
|
||||
:class="ele.name === scope.row.user_source && 'isActive'"
|
||||
@click="handleUserTypeChange(ele.value, scope.row)"
|
||||
>
|
||||
<div class="model-name">{{ ele.name }}</div>
|
||||
<el-icon size="16" class="done">
|
||||
<icon_done_outlined></icon_done_outlined>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" width="80" :label="t('ds.actions')">
|
||||
<template #default="scope">
|
||||
<div class="field-comment">
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('workspace.remove')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
|
||||
<assigned></assigned>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<EmptyBackground
|
||||
v-if="!oldKeywordsMember && !fieldListWithSearch.length"
|
||||
:description="$t('workspace.no_user')"
|
||||
img-type="noneWhite"
|
||||
/>
|
||||
|
||||
<EmptyBackground
|
||||
v-if="!!oldKeywordsMember && !fieldListWithSearch.length"
|
||||
:description="$t('datasource.relevant_content_found')"
|
||||
img-type="tree"
|
||||
/>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="fieldListWithSearch.length" class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="pageInfo.currentPage"
|
||||
v-model:page-size="pageInfo.pageSize"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageInfo.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="multipleSelectionAll.length" class="bottom-select">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
{{ $t('datasource.select_all') }}
|
||||
</el-checkbox>
|
||||
|
||||
<button class="danger-button" @click="deleteBatchUser">{{ $t('workspace.remove') }}</button>
|
||||
|
||||
<span class="selected">{{
|
||||
$t('user.selected_2_items', { msg: multipleSelectionAll.length })
|
||||
}}</span>
|
||||
|
||||
<el-button text @click="cancelDelete">
|
||||
{{ $t('common.cancel') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AuthorizedWorkspaceDialog
|
||||
ref="authorizedWorkspaceDialog"
|
||||
@refresh="refresh"
|
||||
></AuthorizedWorkspaceDialog>
|
||||
<el-dialog
|
||||
v-model="fieldDialog"
|
||||
:title="$t(workspaceForm.id ? 'workspace.rename_a_workspace' : 'workspace.add_workspace')"
|
||||
width="420"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
@before-closed="closeField"
|
||||
>
|
||||
<el-form
|
||||
ref="workspaceFormRef"
|
||||
:model="workspaceForm"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="name" :label="t('workspace.workspace_name')">
|
||||
<el-input
|
||||
v-model="workspaceForm.name"
|
||||
clearable
|
||||
maxlength="50"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('workspace.workspace_name')
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 20px">
|
||||
<el-button secondary @click="closeField">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveField">{{
|
||||
t(workspaceForm.id ? 'common.save' : 'model.add')
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workspace {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.side-list {
|
||||
width: 280px;
|
||||
padding: 8px 16px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #1f232926;
|
||||
position: relative;
|
||||
.select-table_top {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
.ed-icon {
|
||||
cursor: pointer;
|
||||
color: var(--ed-color-primary);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: var(--ed-color-primary-1a, #1cba901a);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ed-input {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
height: calc(100% - 100px);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-left: 16px;
|
||||
|
||||
.more {
|
||||
display: none;
|
||||
&.ed-icon {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #1f23291a;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
margin-top: 72px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #646a73;
|
||||
}
|
||||
.model {
|
||||
width: calc(100% - 16px);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding-right: 8px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.name {
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:hover {
|
||||
background: #1f23291a;
|
||||
.more {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.isActive {
|
||||
background: var(--ed-color-primary-1a, #1cba901a);
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-table {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 280px);
|
||||
height: 100%;
|
||||
.table-name {
|
||||
padding: 16px 24px 0 24px;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background: #bbbfc4;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
padding: 0 24px 16px 24px;
|
||||
height: calc(100% - 168px);
|
||||
overflow-y: auto;
|
||||
|
||||
&.show-pagination_height {
|
||||
height: calc(100% - 220px);
|
||||
}
|
||||
|
||||
.preview-or-schema {
|
||||
:deep(.user-source) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
display: block !important;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-status-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.field-comment {
|
||||
height: 24px;
|
||||
.ed-icon {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #1f23291a;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-num {
|
||||
margin: 12px 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-select {
|
||||
position: absolute;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #1f232926;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding-left: 24px;
|
||||
z-index: 10;
|
||||
|
||||
.danger-button {
|
||||
border: 1px solid var(--ed-color-danger);
|
||||
color: var(--ed-color-danger);
|
||||
border-radius: var(--ed-border-radius-base);
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 0 16px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #646a73;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.popover-card.popover-card.popover-card {
|
||||
box-shadow: 0px 4px 8px 0px #1f23291a;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee0e3;
|
||||
width: 120px !important;
|
||||
min-width: 120px !important;
|
||||
padding: 0;
|
||||
.content {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dee0e3;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
color: #646a73;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #1f23291a;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system-workspace_user.system-workspace_user {
|
||||
padding: 0;
|
||||
width: 120px !important;
|
||||
min-width: 120px !important;
|
||||
box-shadow: 0px 4px 8px 0px #1f23291a;
|
||||
border: 1px solid #dee0e3;
|
||||
|
||||
.popover {
|
||||
.popover-content {
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #1f232926;
|
||||
}
|
||||
}
|
||||
.popover-item {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
padding-right: 8px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #1f23291a;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 9px 0 0 0;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
margin-left: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.done {
|
||||
margin-left: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.isActive {
|
||||
color: var(--ed-color-primary);
|
||||
|
||||
.done {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user