更新前端src/views/viewsnew/common目录文件
This commit is contained in:
parent
bcc3064e6d
commit
bc4d842a9b
@ -2,7 +2,7 @@
|
||||
<el-drawer
|
||||
:title="t('visualization.save_app')"
|
||||
v-model="state.appApplyDrawer"
|
||||
custom-class="de-app-drawer"
|
||||
modal-class="de-app-drawer"
|
||||
:show-close="false"
|
||||
size="500px"
|
||||
direction="rtl"
|
||||
@ -158,7 +158,6 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { isDesktop } from '@/utils/ModelUtil'
|
||||
import { filterFreeFolder } from '@/utils/utils'
|
||||
const desktop = isDesktop()
|
||||
|
||||
const { wsCache } = useCache('localStorage')
|
||||
const { t } = useI18n()
|
||||
@ -186,7 +185,7 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const { componentData, canvasViewInfo, curCanvasType, themes } = toRefs(props)
|
||||
const { curCanvasType } = toRefs(props)
|
||||
const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
|
||||
|
||||
const dvPreName = computed(() =>
|
||||
@ -259,7 +258,7 @@ const goBack = () => {
|
||||
}
|
||||
|
||||
const initData = () => {
|
||||
const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
|
||||
const request = { busiFlag: curCanvasType.value, resourceTable: 'core', leaf: false, weight: 7 }
|
||||
queryTreeApi(request).then(res => {
|
||||
filterFreeFolder(res, curCanvasType.value)
|
||||
const resultTree = res || []
|
||||
|
||||
@ -30,7 +30,9 @@ const { t } = useI18n()
|
||||
|
||||
const state = reactive({
|
||||
tData: [],
|
||||
nameList: []
|
||||
nameList: [],
|
||||
targetInfo: null,
|
||||
attachParams: null
|
||||
})
|
||||
|
||||
const showParentSelected = ref(false)
|
||||
@ -134,8 +136,10 @@ const getDialogTitle = exec => {
|
||||
}
|
||||
const placeholder = ref('')
|
||||
|
||||
const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
|
||||
const optInit = (type, data: BusiTreeNode, exec, parentSelect = false, attachParams?) => {
|
||||
showParentSelected.value = parentSelect
|
||||
state.targetInfo = data
|
||||
state.attachParams = attachParams
|
||||
nodeType.value = type
|
||||
const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : t('visualization.folder')
|
||||
const placeholderLabel =
|
||||
@ -148,7 +152,7 @@ const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
|
||||
filterText.value = ''
|
||||
dialogTitle.value = getDialogTitle(exec) + ('rename' === exec ? optSource : '')
|
||||
resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + t('visualization.name')
|
||||
const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
|
||||
const request = { busiFlag: curCanvasType.value, leaf: false, resourceTable: 'core', weight: 7 }
|
||||
if (['newFolder'].includes(exec)) {
|
||||
resourceForm.name = ''
|
||||
} else if ('copy' === exec) {
|
||||
@ -253,7 +257,9 @@ const saveResource = () => {
|
||||
const params: ResourceOrFolder = {
|
||||
nodeType: nodeType.value as 'folder' | 'leaf',
|
||||
name: resourceForm.name,
|
||||
type: curCanvasType.value
|
||||
type: curCanvasType.value,
|
||||
mobileLayout: state.targetInfo?.extraFlag,
|
||||
status: state.targetInfo?.extraFlag1
|
||||
}
|
||||
|
||||
switch (cmd.value) {
|
||||
@ -282,7 +288,7 @@ const saveResource = () => {
|
||||
}
|
||||
if (cmd.value === 'newLeaf') {
|
||||
resourceDialogShow.value = false
|
||||
emits('finish', { opt: 'newLeaf', ...params })
|
||||
emits('finish', { opt: 'newLeaf', ...params, ...state.attachParams })
|
||||
} else {
|
||||
loading.value = true
|
||||
const method = methodMap[cmd.value] ? methodMap[cmd.value] : updateBase
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
|
||||
import dvDashboardSpineMobileDisabled from '@/assets/svg/dv-dashboard-spine-mobile-disabled.svg'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'
|
||||
import dvDelete from '@/assets/svg/dv-delete.svg'
|
||||
import dvMove from '@/assets/svg/dv-move.svg'
|
||||
import dvCancelPublish from '@/assets/svg/icon_undo_outlined.svg'
|
||||
import { treeDraggbleChart } from '@/utils/treeDraggbleChart'
|
||||
import { debounce } from 'lodash-es'
|
||||
import dvRename from '@/assets/svg/dv-rename.svg'
|
||||
import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
|
||||
import dvDashboardSpineDisabled from '@/assets/svg/dv-dashboard-spine-disabled.svg'
|
||||
import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'
|
||||
import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
|
||||
import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
|
||||
@ -23,7 +26,8 @@ import {
|
||||
copyResource,
|
||||
deleteLogic,
|
||||
ResourceOrFolder,
|
||||
queryShareBaseApi
|
||||
queryShareBaseApi,
|
||||
updateBase
|
||||
} from '@/api/visualization/dataVisualization'
|
||||
import { ElIcon, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus-secondary'
|
||||
import { Icon } from '@/components/icon-custom'
|
||||
@ -44,7 +48,7 @@ import { useI18n } from '@/hooks/web/useI18n'
|
||||
import _ from 'lodash'
|
||||
import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { findParentIdByChildIdRecursive } from '@/utils/canvasUtils'
|
||||
import { findParentIdByChildIdRecursive, onInitReady } from '@/utils/canvasUtils'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
import treeSort, { treeParentWeight } from '@/utils/treeSortUtils'
|
||||
import router from '@/router'
|
||||
@ -67,11 +71,17 @@ const props = defineProps({
|
||||
required: false,
|
||||
type: String,
|
||||
default: 'preview'
|
||||
},
|
||||
resourceTable: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: 'core'
|
||||
}
|
||||
})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
label: 'name',
|
||||
disabled: (data: any) => data.extraFlag1 === 0
|
||||
}
|
||||
const mounted = ref(false)
|
||||
const rootManage = ref(false)
|
||||
@ -170,10 +180,16 @@ const menuListWeight = id => {
|
||||
return pWeight < 7 ? menuList : menuListWithCopy
|
||||
}
|
||||
const menuListWithCopy = [
|
||||
{
|
||||
label: t('visualization.cancel_publish'), //取消发布
|
||||
command: 'cancelPublish',
|
||||
svgName: dvCancelPublish
|
||||
},
|
||||
{
|
||||
label: t('visualization.copy'), //'复制',
|
||||
command: 'copy',
|
||||
svgName: dvCopyDark
|
||||
svgName: dvCopyDark,
|
||||
divided: true
|
||||
},
|
||||
{
|
||||
label: t('visualization.move_to'), //'移动到',
|
||||
@ -193,10 +209,16 @@ const menuListWithCopy = [
|
||||
}
|
||||
]
|
||||
const menuList = [
|
||||
{
|
||||
label: t('visualization.cancel_publish'), //取消发布
|
||||
command: 'cancelPublish',
|
||||
svgName: dvCancelPublish
|
||||
},
|
||||
{
|
||||
label: t('visualization.move_to'), //'移动到',
|
||||
command: 'move',
|
||||
svgName: dvMove
|
||||
svgName: dvMove,
|
||||
divided: true
|
||||
},
|
||||
{
|
||||
label: t('visualization.rename'), //'重命名',
|
||||
@ -232,6 +254,9 @@ const nodeCollapse = data => {
|
||||
}
|
||||
|
||||
const filterNode = (value: string, data: BusiTreeNode) => {
|
||||
if (showPosition.value === 'multiplexing' && data.id === dvInfo.value?.id) {
|
||||
return false
|
||||
}
|
||||
if (!value) return true
|
||||
return data.name?.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
}
|
||||
@ -243,18 +268,59 @@ const cancelPreRequest = () => {
|
||||
cancelRequestBatch('/linkJump/queryVisualizationJumpInfo/**')
|
||||
}
|
||||
|
||||
const nodeClick = (data: BusiTreeNode) => {
|
||||
const nodeClick = (data: BusiTreeNode, node) => {
|
||||
dvMainStore.setCurComponent({ component: null, index: null })
|
||||
if (showPosition.value !== 'multiplexing') {
|
||||
dvMainStore.setEditMode('preview')
|
||||
}
|
||||
if (node.disabled) {
|
||||
nextTick(() => {
|
||||
// 找到当前高亮的节点，移除高亮样式
|
||||
const currentNode = resourceListTree.value.$el.querySelector('.is-current')
|
||||
if (currentNode) {
|
||||
currentNode.classList.remove('is-current')
|
||||
}
|
||||
return // 阻止后续逻辑
|
||||
})
|
||||
} else {
|
||||
cancelPreRequest()
|
||||
selectedNodeKey.value = data.id
|
||||
if (data.leaf) {
|
||||
if (!embeddedStore.baseUrl) {
|
||||
let url = window.location.href
|
||||
const paramName = 'dvId'
|
||||
const paramValue = data.id
|
||||
// 检查是否已经有查询参数（在哈希部分）
|
||||
if (url.includes('?')) {
|
||||
const regex = new RegExp(`([?&])${paramName}=[^&]*`)
|
||||
if (regex.test(url)) {
|
||||
url = url.replace(regex, `$1${paramName}=${paramValue}`)
|
||||
} else {
|
||||
url += `&${paramName}=${paramValue}`
|
||||
}
|
||||
} else {
|
||||
url += `?${paramName}=${paramValue}`
|
||||
}
|
||||
window.history.replaceState(
|
||||
{
|
||||
path: url
|
||||
},
|
||||
'',
|
||||
url
|
||||
)
|
||||
}
|
||||
emit('nodeClick', data)
|
||||
} else {
|
||||
resourceListTree.value.setCurrentKey(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getTree = async () => {
|
||||
const request = { busiFlag: curCanvasType.value } as BusiTreeRequest
|
||||
const request = {
|
||||
busiFlag: curCanvasType.value,
|
||||
resourceTable: props.resourceTable
|
||||
} as BusiTreeRequest
|
||||
const isDashboard = curCanvasType.value == 'dashboard'
|
||||
await interactiveStore.setInteractive(request)
|
||||
const interactiveData = isDashboard ? interactiveStore.getPanel : interactiveStore.getScreen
|
||||
@ -305,15 +371,13 @@ const afterTreeInit = () => {
|
||||
expandedArray.value = getDefaultExpandedKeys()
|
||||
returnMounted.value = false
|
||||
}
|
||||
onInitReady({ type: curCanvasType.value }, 'resource_tree_init_ready')
|
||||
nextTick(() => {
|
||||
resourceListTree.value.setCurrentKey(selectedNodeKey.value)
|
||||
nextTick(() => {
|
||||
if (selectedNodeKey.value) {
|
||||
const nodeDom = document.querySelector('.is-current')
|
||||
nodeDom && nodeDom.click()
|
||||
}
|
||||
})
|
||||
resourceListTree.value.filter(filterText.value)
|
||||
nextTick(() => {
|
||||
document.querySelector('.is-current')?.firstChild?.click()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@ -337,6 +401,22 @@ const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
|
||||
getTree()
|
||||
})
|
||||
})
|
||||
} else if (cmd === 'cancelPublish') {
|
||||
const params = {
|
||||
id: data.id,
|
||||
nodeType: 'leaf',
|
||||
name: data.name,
|
||||
type: curCanvasType.value,
|
||||
mobileLayout: data?.extraFlag,
|
||||
status: 0
|
||||
}
|
||||
updateBase(params).then(() => {
|
||||
data['extraFlag1'] = 0
|
||||
if (dvInfo.value.id === data.id) {
|
||||
dvMainStore.updateDvInfoCall(0)
|
||||
}
|
||||
ElMessage.warning(t('visualization.cancel_publish_tips'))
|
||||
})
|
||||
} else if (cmd === 'edit') {
|
||||
resourceEdit(data.id)
|
||||
} else if (cmd === 'copy') {
|
||||
@ -703,23 +783,43 @@ defineExpose({
|
||||
draggable
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<span class="custom-tree-node" :class="{ 'node-disabled-custom': data.extraFlag1 === 0 }">
|
||||
<el-icon style="font-size: 18px" v-if="!data.leaf">
|
||||
<Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<el-icon style="font-size: 18px" v-else-if="curCanvasType === 'dashboard'">
|
||||
<Icon
|
||||
<Icon v-if="data.extraFlag1"
|
||||
><component
|
||||
:is="data.extraFlag ? dvDashboardSpineMobile : dvDashboardSpine"
|
||||
></component
|
||||
></Icon>
|
||||
<Icon v-if="!data.extraFlag1"
|
||||
><component
|
||||
:is="data.extraFlag ? dvDashboardSpineMobileDisabled : dvDashboardSpineDisabled"
|
||||
></component
|
||||
></Icon>
|
||||
</el-icon>
|
||||
<el-icon class="icon-screen-new color-dataV" style="font-size: 18px" v-else>
|
||||
<el-icon
|
||||
class="icon-screen-new color-dataV"
|
||||
:class="{ 'color-dataV': data.extraFlag1, 'color-dataV-disabled': !data.extraFlag1 }"
|
||||
style="font-size: 18px"
|
||||
v-else
|
||||
>
|
||||
<Icon name="icon_operation-analysis_outlined"
|
||||
><icon_operationAnalysis_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
<span :title="node.label" class="label-tooltip">{{ node.label }}</span>
|
||||
<span :title="node.label" class="label-tooltip">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="t('visualization.publish_tips1')"
|
||||
:disabled="data.extraFlag1"
|
||||
placement="top-start"
|
||||
>
|
||||
{{ node.label }}
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<div class="icon-more" v-if="data.weight >= 7 && showPosition === 'preview'">
|
||||
<el-icon
|
||||
v-on:click.stop
|
||||
@ -902,7 +1002,7 @@ defineExpose({
|
||||
|
||||
<style lang="less">
|
||||
.menu-outer-dv_popper {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
margin-top: -2px !important;
|
||||
|
||||
.ed-icon {
|
||||
@ -922,4 +1022,13 @@ defineExpose({
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.node-disabled-custom {
|
||||
color: rgba(187, 191, 196, 1);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.color-dataV-disabled {
|
||||
background: #bbbfc4 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,14 +5,18 @@
|
||||
v-model="dialogShow"
|
||||
trigger="click"
|
||||
:title="t('visualization.multiplexing')"
|
||||
custom-class="custom-drawer"
|
||||
modal-class="custom-drawer"
|
||||
@closed="handleClose()"
|
||||
>
|
||||
<!-- 标识当前在复用页，用于作为轮播提示前缀 -->
|
||||
<div v-if="dialogShow" id="multiplexingDrawer" />
|
||||
<dashboard-preview-show
|
||||
v-if="dialogShow && curDvType === 'dashboard'"
|
||||
ref="multiplexingPreviewShowRef"
|
||||
class="multiplexing-area"
|
||||
no-close
|
||||
show-position="multiplexing"
|
||||
resource-table="snapshot"
|
||||
></dashboard-preview-show>
|
||||
<preview-show
|
||||
v-if="dialogShow && curDvType === 'dataV'"
|
||||
@ -20,6 +24,7 @@
|
||||
class="multiplexing-area"
|
||||
no-close
|
||||
show-position="multiplexing"
|
||||
resource-table="snapshot"
|
||||
></preview-show>
|
||||
<template #footer>
|
||||
<el-row class="multiplexing-footer">
|
||||
@ -66,6 +71,7 @@ import { storeToRefs } from 'pinia'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
import PreviewShow from '@/views/data-visualization/PreviewShow.vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const dialogShow = ref(false)
|
||||
@ -82,6 +88,7 @@ const state = reactive({
|
||||
]
|
||||
})
|
||||
const dialogInit = (dvType = 'dashboard') => {
|
||||
ChartCarouselTooltip.paused()
|
||||
curDvType.value = dvType
|
||||
dialogShow.value = true
|
||||
dvMainStore.initCurMultiplexingComponents()
|
||||
@ -92,11 +99,19 @@ const saveMultiplexing = () => {
|
||||
const previewStateInfo = multiplexingPreviewShowRef.value.getPreviewStateInfo()
|
||||
const canvasViewInfoPreview = previewStateInfo.canvasViewInfoPreview
|
||||
nextTick(() => {
|
||||
copyStore.copyMultiplexingComponents(canvasViewInfoPreview)
|
||||
copyStore.copyMultiplexingComponents(
|
||||
canvasViewInfoPreview,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
previewStateInfo.canvasStylePreview.scale
|
||||
)
|
||||
snapshotStore.recordSnapshotCache('saveMultiplexing')
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
ChartCarouselTooltip.closeEnlargeDialogDestroy()
|
||||
}
|
||||
defineExpose({
|
||||
dialogInit
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user