Merge pull request #13443 from dataease/pr@dev-v2@refactor_jump
refactor(仪表板、数据大屏): 跳转样式调整
This commit is contained in:
王嘉豪
GitHub
commit
1396a64f6a
@ -4,6 +4,7 @@ package io.dataease.visualization.dao.ext.mapper;
|
||||
import io.dataease.api.dataset.vo.CoreDatasetGroupVO;
|
||||
import io.dataease.api.visualization.dto.VisualizationOuterParamsDTO;
|
||||
import io.dataease.api.visualization.dto.VisualizationOuterParamsInfoDTO;
|
||||
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsInfo;
|
||||
import org.apache.ibatis.annotations.Mapper;
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
|
||||
@ -22,5 +23,7 @@ public interface ExtVisualizationOuterParamsMapper {
|
||||
|
||||
List<VisualizationOuterParamsInfoDTO> getVisualizationOuterParamsInfo(@Param("visualizationId") String visualizationId);
|
||||
|
||||
List<VisualizationOuterParamsInfo> getVisualizationOuterParamsInfoBase(@Param("visualizationId") String visualizationId);
|
||||
|
||||
List<CoreDatasetGroupVO> queryDsWithVisualizationId(@Param("visualizationId") String visualizationId);
|
||||
}
|
||||
|
||||
@ -29,10 +29,7 @@ import org.springframework.util.CollectionUtils;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import java.util.Optional;
|
||||
import java.util.UUID;
|
||||
import java.util.*;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
@ -72,6 +69,12 @@ public class VisualizationOuterParamsService implements VisualizationOuterParams
|
||||
public void updateOuterParamsSet(VisualizationOuterParamsDTO outerParamsDTO) {
|
||||
String visualizationId = outerParamsDTO.getVisualizationId();
|
||||
Assert.notNull(visualizationId, "visualizationId cannot be null");
|
||||
Map<String,String> paramsInfoNameIdMap = new HashMap<>();
|
||||
List<VisualizationOuterParamsInfo> paramsInfoNameIdList = extOuterParamsMapper.getVisualizationOuterParamsInfoBase(visualizationId);
|
||||
if(!CollectionUtils.isEmpty(paramsInfoNameIdList)){
|
||||
paramsInfoNameIdMap = paramsInfoNameIdList.stream()
|
||||
.collect(Collectors.toMap(VisualizationOuterParamsInfo::getParamName, VisualizationOuterParamsInfo::getParamsId));
|
||||
}
|
||||
//清理原有数据
|
||||
extOuterParamsMapper.deleteOuterParamsTargetWithVisualizationId(visualizationId);
|
||||
extOuterParamsMapper.deleteOuterParamsInfoWithVisualizationId(visualizationId);
|
||||
@ -82,17 +85,22 @@ public class VisualizationOuterParamsService implements VisualizationOuterParams
|
||||
VisualizationOuterParams newOuterParams = new VisualizationOuterParams();
|
||||
BeanUtils.copyBean(newOuterParams, outerParamsDTO);
|
||||
outerParamsMapper.insert(newOuterParams);
|
||||
Map<String, String> finalParamsInfoNameIdMap = paramsInfoNameIdMap;
|
||||
Optional.ofNullable(outerParamsDTO.getOuterParamsInfoArray()).orElse(new ArrayList<>()).forEach(outerParamsInfo -> {
|
||||
String paramsInfoId = UUID.randomUUID().toString();
|
||||
String paramsInfoId = finalParamsInfoNameIdMap.get(outerParamsInfo.getParamName());
|
||||
if(StringUtils.isEmpty(paramsInfoId)){
|
||||
paramsInfoId = UUID.randomUUID().toString();
|
||||
}
|
||||
outerParamsInfo.setParamsInfoId(paramsInfoId);
|
||||
outerParamsInfo.setParamsId(paramsId);
|
||||
VisualizationOuterParamsInfo newOuterParamsInfo = new VisualizationOuterParamsInfo();
|
||||
BeanUtils.copyBean(newOuterParamsInfo, outerParamsInfo);
|
||||
outerParamsInfoMapper.insert(newOuterParamsInfo);
|
||||
String finalParamsInfoId = paramsInfoId;
|
||||
Optional.ofNullable(outerParamsInfo.getTargetViewInfoList()).orElse(new ArrayList<>()).forEach(targetViewInfo -> {
|
||||
String targetViewInfoId = UUID.randomUUID().toString();
|
||||
targetViewInfo.setTargetId(targetViewInfoId);
|
||||
targetViewInfo.setParamsInfoId(paramsInfoId);
|
||||
targetViewInfo.setParamsInfoId(finalParamsInfoId);
|
||||
VisualizationOuterParamsTargetViewInfo newOuterParamsTargetViewInfo = new VisualizationOuterParamsTargetViewInfo();
|
||||
BeanUtils.copyBean(newOuterParamsTargetViewInfo, targetViewInfo);
|
||||
outerParamsTargetViewInfoMapper.insert(newOuterParamsTargetViewInfo);
|
||||
|
||||
@ -139,6 +139,17 @@
|
||||
and popi.checked=1
|
||||
</select>
|
||||
|
||||
<select id="getVisualizationOuterParamsInfoBase" resultType="io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsInfo">
|
||||
SELECT
|
||||
vopi.param_name,
|
||||
vopi.params_id
|
||||
FROM
|
||||
visualization_outer_params_info vopi
|
||||
INNER JOIN visualization_outer_params vop ON vop.params_id = vopi.params_id
|
||||
WHERE
|
||||
vop.visualization_id = #{visualizationId}
|
||||
</select>
|
||||
|
||||
<select id="queryDsWithVisualizationId" resultMap="BaseDsResultMapDTO">
|
||||
SELECT DISTINCT
|
||||
cdg.*,#{visualizationId} as visualizationId
|
||||
|
||||
@ -347,110 +347,123 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="state.activeCollapse === 'filter'">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="12"> 源条件 </el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="10" style="margin-left: -2.9%"> 联动外部参数 </el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'outerParams'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="'请选择字段'"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curFilterField in state.linkJumpCurFilterFieldArray"
|
||||
:key="curFilterField.id"
|
||||
:label="curFilterField.name"
|
||||
:value="curFilterField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap['filter']"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curFilterField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="icon-center">
|
||||
<Icon name="dv-link-target"
|
||||
><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
|
||||
/></Icon>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetViewId"
|
||||
:disabled="!targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="'请选择参数'"
|
||||
style="width: 100%"
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentOutParams"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon view-type-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap[item.type]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="m-del-icon-btn"
|
||||
text
|
||||
@click="deleteLinkJumpField(index)"
|
||||
>
|
||||
<el-icon size="20px">
|
||||
<Icon name="icon_delete-trash_outlined"
|
||||
><icon_deleteTrash_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button
|
||||
style="margin-top: 8px"
|
||||
:disabled="!state.linkJumpInfo.targetDvId"
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField('outerParams')"
|
||||
<template v-if="state.currentOutParams.length === 0">
|
||||
<span
|
||||
>目标仪表板无外部参数，因此无法携带条件查询，如有需要，<a
|
||||
class="target_jump"
|
||||
@click="resourceEdit(state.linkJumpInfo.targetDvId)"
|
||||
>请前往设置外部参数</a
|
||||
></span
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="state.currentOutParams.length > 0">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="12"> 源条件 </el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="10" style="margin-left: -2.9%"> 联动外部参数 </el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'outerParams'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="'请选择字段'"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curFilterField in state.linkJumpCurFilterFieldArray"
|
||||
:key="curFilterField.id"
|
||||
:label="curFilterField.name"
|
||||
:value="curFilterField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap['filter']"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curFilterField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="icon-center">
|
||||
<Icon name="dv-link-target"
|
||||
><dvLinkTarget
|
||||
style="width: 20px; height: 20px"
|
||||
class="svg-icon"
|
||||
/></Icon>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<el-select
|
||||
v-model="targetViewInfo.targetViewId"
|
||||
:disabled="!targetViewInfo.sourceFieldActiveId"
|
||||
:placeholder="'请选择参数'"
|
||||
style="width: 100%"
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentOutParams"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon view-type-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:is="iconChartMap[item.type]"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
class="m-del-icon-btn"
|
||||
text
|
||||
@click="deleteLinkJumpField(index)"
|
||||
>
|
||||
<el-icon size="20px">
|
||||
<Icon name="icon_delete-trash_outlined"
|
||||
><icon_deleteTrash_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button
|
||||
style="margin-top: 8px"
|
||||
:disabled="!state.linkJumpInfo.targetDvId"
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField('outerParams')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -547,6 +560,10 @@
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<XpackComponent
|
||||
ref="openHandler"
|
||||
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI="
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@ -579,12 +596,20 @@ import { Search } from '@element-plus/icons-vue'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
|
||||
import { filterEmptyFolderTree } from '@/utils/canvasUtils'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import { useAppStoreWithOut } from '@/store/modules/app'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { useEmbedded } from '@/store/modules/embedded'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { dvInfo, canvasViewInfo, componentData } = storeToRefs(dvMainStore)
|
||||
const linkJumpInfoTree = ref(null)
|
||||
const { t } = useI18n()
|
||||
const dialogShow = ref(false)
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const appStore = useAppStoreWithOut()
|
||||
const { wsCache } = useCache()
|
||||
const embeddedStore = useEmbedded()
|
||||
|
||||
const resourceType = computed(() =>
|
||||
dvInfo.value.type === 'dashboard' ? t('work_branch.dashboard') : t('work_branch.big_data_screen')
|
||||
@ -941,6 +966,39 @@ const filterNodeMethod = (value, data) => {
|
||||
return !value || data.checked
|
||||
}
|
||||
|
||||
const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
|
||||
const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
|
||||
|
||||
const resourceEdit = resourceId => {
|
||||
const baseUrl = dvInfo.value.type === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
|
||||
if (isEmbedded.value) {
|
||||
embeddedStore.clearState()
|
||||
if (dvInfo.value.type === 'dataV') {
|
||||
embeddedStore.setDvId(resourceId)
|
||||
} else {
|
||||
embeddedStore.setResourceId(resourceId)
|
||||
}
|
||||
useEmitt().emitter.emit(
|
||||
'changeCurrentComponent',
|
||||
dvInfo.value.type === 'dataV' ? 'VisualizationEditor' : 'DashboardEditor'
|
||||
)
|
||||
return
|
||||
}
|
||||
const newWindow = window.open(baseUrl + resourceId, openType)
|
||||
initOpenHandler(newWindow)
|
||||
}
|
||||
|
||||
const openHandler = ref(null)
|
||||
const initOpenHandler = newWindow => {
|
||||
if (openHandler?.value) {
|
||||
const pm = {
|
||||
methodName: 'initOpenHandler',
|
||||
args: newWindow
|
||||
}
|
||||
openHandler.value.invokeMethod(pm)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => state.showSelected,
|
||||
newValue => {
|
||||
@ -1440,4 +1498,9 @@ span {
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
|
||||
.target_jump {
|
||||
color: var(--ed-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,6 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
|
||||
import { useShareStoreWithOut } from '@/store/modules/share'
|
||||
const shareStore = useShareStoreWithOut()
|
||||
const interactiveStore = interactiveStoreWithOut()
|
||||
import router from '@/router'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import _ from 'lodash'
|
||||
import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user