Merge pull request #8465 from dataease/pr@dev-v2@refactor_outerparams
refactor(仪表板): 外部参数设置逻辑优化
This commit is contained in:
王嘉豪
GitHub
commit
793ea2ef49
@ -0,0 +1,88 @@
|
|||||||
|
package io.dataease.visualization.server;
|
||||||
|
|
||||||
|
import io.dataease.api.visualization.VisualizationOuterParamsApi;
|
||||||
|
import io.dataease.api.visualization.dto.VisualizationOuterParamsDTO;
|
||||||
|
import io.dataease.api.visualization.dto.VisualizationOuterParamsInfoDTO;
|
||||||
|
import io.dataease.api.visualization.response.VisualizationOuterParamsBaseResponse;
|
||||||
|
import io.dataease.utils.BeanUtils;
|
||||||
|
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParams;
|
||||||
|
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsInfo;
|
||||||
|
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsTargetViewInfo;
|
||||||
|
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsInfoMapper;
|
||||||
|
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsMapper;
|
||||||
|
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsTargetViewInfoMapper;
|
||||||
|
import io.dataease.visualization.dao.ext.mapper.ExtVisualizationOuterParamsMapper;
|
||||||
|
import jakarta.annotation.Resource;
|
||||||
|
import org.springframework.util.Assert;
|
||||||
|
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.stream.Collectors;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @author : WangJiaHao
|
||||||
|
* @date : 2024/3/11 09:44
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("outerParams")
|
||||||
|
public class VisualizationOuterParamsService implements VisualizationOuterParamsApi {
|
||||||
|
|
||||||
|
@Resource
|
||||||
|
private ExtVisualizationOuterParamsMapper extOuterParamsMapper;
|
||||||
|
@Resource
|
||||||
|
private VisualizationOuterParamsMapper outerParamsMapper;
|
||||||
|
@Resource
|
||||||
|
private VisualizationOuterParamsInfoMapper outerParamsInfoMapper;
|
||||||
|
|
||||||
|
@Resource
|
||||||
|
private VisualizationOuterParamsTargetViewInfoMapper outerParamsTargetViewInfoMapper;
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public VisualizationOuterParamsDTO queryWithVisualizationId(String visualizationId) {
|
||||||
|
VisualizationOuterParamsDTO visualizationOuterParamsDTO = extOuterParamsMapper.queryWithVisualizationId(visualizationId);
|
||||||
|
return visualizationOuterParamsDTO;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void updateOuterParamsSet(VisualizationOuterParamsDTO outerParamsDTO) {
|
||||||
|
String visualizationId = outerParamsDTO.getVisualizationId();
|
||||||
|
Assert.notNull(visualizationId, "visualizationId cannot be null");
|
||||||
|
//清理原有数据
|
||||||
|
extOuterParamsMapper.deleteOuterParamsTargetWithVisualizationId(visualizationId);
|
||||||
|
extOuterParamsMapper.deleteOuterParamsInfoWithVisualizationId(visualizationId);
|
||||||
|
extOuterParamsMapper.deleteOuterParamsWithVisualizationId(visualizationId);
|
||||||
|
// 插入新的数据
|
||||||
|
String paramsId = UUID.randomUUID().toString();
|
||||||
|
outerParamsDTO.setParamsId(paramsId);
|
||||||
|
VisualizationOuterParams newOuterParams = new VisualizationOuterParams();
|
||||||
|
BeanUtils.copyBean(newOuterParams,outerParamsDTO);
|
||||||
|
outerParamsMapper.insert(newOuterParams);
|
||||||
|
Optional.ofNullable(outerParamsDTO.getOuterParamsInfoArray()).orElse(new ArrayList<>()).forEach(outerParamsInfo -> {
|
||||||
|
String paramsInfoId = UUID.randomUUID().toString();
|
||||||
|
outerParamsInfo.setParamsInfoId(paramsInfoId);
|
||||||
|
outerParamsInfo.setParamsId(paramsId);
|
||||||
|
VisualizationOuterParamsInfo newOuterParamsInfo = new VisualizationOuterParamsInfo();
|
||||||
|
BeanUtils.copyBean(newOuterParamsInfo,outerParamsInfo);
|
||||||
|
outerParamsInfoMapper.insert(newOuterParamsInfo);
|
||||||
|
Optional.ofNullable(outerParamsInfo.getTargetViewInfoList()).orElse(new ArrayList<>()).forEach(targetViewInfo -> {
|
||||||
|
String targetViewInfoId = UUID.randomUUID().toString();
|
||||||
|
targetViewInfo.setTargetId(targetViewInfoId);
|
||||||
|
targetViewInfo.setParamsInfoId(paramsInfoId);
|
||||||
|
VisualizationOuterParamsTargetViewInfo newOuterParamsTargetViewInfo = new VisualizationOuterParamsTargetViewInfo();
|
||||||
|
BeanUtils.copyBean(newOuterParamsTargetViewInfo,targetViewInfo);
|
||||||
|
outerParamsTargetViewInfoMapper.insert(newOuterParamsTargetViewInfo);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public VisualizationOuterParamsBaseResponse getOuterParamsInfo(String visualizationId) {
|
||||||
|
List<VisualizationOuterParamsInfoDTO> result = extOuterParamsMapper.getVisualizationOuterParamsInfo(visualizationId);
|
||||||
|
return new VisualizationOuterParamsBaseResponse(Optional.ofNullable(result).orElse(new ArrayList<>()).stream().collect(Collectors.toMap(VisualizationOuterParamsInfoDTO::getSourceInfo, VisualizationOuterParamsInfoDTO::getTargetInfoList)));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params`;
|
||||||
|
CREATE TABLE `visualization_outer_params` (
|
||||||
|
`params_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`visualization_id` varchar(50) DEFAULT NULL COMMENT '可视化资源ID',
|
||||||
|
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用外部参数标识（1-是，0-否）',
|
||||||
|
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
|
||||||
|
`copy_from` varchar(50) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`params_id`) USING BTREE
|
||||||
|
) COMMENT='外部参数关联关系表';
|
||||||
|
|
||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params_info`;
|
||||||
|
CREATE TABLE `visualization_outer_params_info` (
|
||||||
|
`params_info_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`params_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params 表的 ID',
|
||||||
|
`param_name` varchar(255) DEFAULT NULL COMMENT '参数名',
|
||||||
|
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用',
|
||||||
|
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`params_info_id`) USING BTREE
|
||||||
|
) COMMENT='外部参数配置表';
|
||||||
|
|
||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params_target_view_info`;
|
||||||
|
CREATE TABLE `visualization_outer_params_target_view_info` (
|
||||||
|
`target_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`params_info_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params_info 表的 ID',
|
||||||
|
`target_view_id` varchar(50) DEFAULT NULL COMMENT '联动视图ID',
|
||||||
|
`target_field_id` varchar(50) DEFAULT NULL COMMENT '联动字段ID',
|
||||||
|
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`target_id`)
|
||||||
|
) COMMENT='外部参数联动视图字段信息表';
|
||||||
|
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params`;
|
||||||
|
CREATE TABLE `visualization_outer_params` (
|
||||||
|
`params_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`visualization_id` varchar(50) DEFAULT NULL COMMENT '可视化资源ID',
|
||||||
|
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用外部参数标识（1-是，0-否）',
|
||||||
|
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
|
||||||
|
`copy_from` varchar(50) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`params_id`) USING BTREE
|
||||||
|
) COMMENT='外部参数关联关系表';
|
||||||
|
|
||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params_info`;
|
||||||
|
CREATE TABLE `visualization_outer_params_info` (
|
||||||
|
`params_info_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`params_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params 表的 ID',
|
||||||
|
`param_name` varchar(255) DEFAULT NULL COMMENT '参数名',
|
||||||
|
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用',
|
||||||
|
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`params_info_id`) USING BTREE
|
||||||
|
) COMMENT='外部参数配置表';
|
||||||
|
|
||||||
|
|
||||||
|
DROP TABLE IF EXISTS `visualization_outer_params_target_view_info`;
|
||||||
|
CREATE TABLE `visualization_outer_params_target_view_info` (
|
||||||
|
`target_id` varchar(50) NOT NULL COMMENT '主键',
|
||||||
|
`params_info_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params_info 表的 ID',
|
||||||
|
`target_view_id` varchar(50) DEFAULT NULL COMMENT '联动视图ID',
|
||||||
|
`target_field_id` varchar(50) DEFAULT NULL COMMENT '联动字段ID',
|
||||||
|
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
|
||||||
|
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
|
||||||
|
PRIMARY KEY (`target_id`)
|
||||||
|
) COMMENT='外部参数联动视图字段信息表';
|
||||||
|
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710226920526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M384 576a128 128 0 0 1 123.968 96H896v64l-388.032 0.064a128 128 0 0 1-247.936 0L128 736v-64h132.032A128 128 0 0 1 384 576z m0 73.152a54.848 54.848 0 1 0 0 109.696 54.848 54.848 0 0 0 0-109.696zM640 192a128 128 0 0 1 123.968 96H896v64l-132.032 0.064a128 128 0 0 1-247.936 0L128 352v-64h388.032A128 128 0 0 1 640 192z m0 73.152a54.848 54.848 0 1 0 0 109.696 54.848 54.848 0 0 0 0-109.696z" p-id="8696"></path></svg>
|
||||||
|
After Width: | Height: | Size: 747 B |
@ -24,6 +24,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
|
|||||||
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
||||||
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
|
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
|
||||||
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
||||||
|
import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
@ -50,6 +51,7 @@ const state = reactive({
|
|||||||
preBatchCanvasViewInfo: {}
|
preBatchCanvasViewInfo: {}
|
||||||
})
|
})
|
||||||
const resourceGroupOpt = ref(null)
|
const resourceGroupOpt = ref(null)
|
||||||
|
const outerParamsSetRef = ref(null)
|
||||||
|
|
||||||
const editCanvasName = () => {
|
const editCanvasName = () => {
|
||||||
nameEdit.value = true
|
nameEdit.value = true
|
||||||
@ -256,6 +258,10 @@ const batchOptStatusChange = value => {
|
|||||||
dvMainStore.setBatchOptStatus(value)
|
dvMainStore.setBatchOptStatus(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const openOuterParamsSet = () => {
|
||||||
|
outerParamsSetRef.value.optInit()
|
||||||
|
}
|
||||||
|
|
||||||
const saveBatchChange = () => {
|
const saveBatchChange = () => {
|
||||||
batchOptStatusChange(false)
|
batchOptStatusChange(false)
|
||||||
}
|
}
|
||||||
@ -555,6 +561,7 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
|
|||||||
cur-canvas-type="dashboard"
|
cur-canvas-type="dashboard"
|
||||||
ref="resourceGroupOpt"
|
ref="resourceGroupOpt"
|
||||||
/>
|
/>
|
||||||
|
<outer-params-set ref="outerParamsSetRef"> </outer-params-set>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,596 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="params-class"
|
||||||
|
width="900px"
|
||||||
|
title="外部参数设置"
|
||||||
|
v-model="state.outerParamsSetVisible"
|
||||||
|
@submit.prevent
|
||||||
|
>
|
||||||
|
<el-row style="height: 430px">
|
||||||
|
<el-row>
|
||||||
|
<span style="margin-right: 20px; font-weight: 600">{{
|
||||||
|
t('visualization.outer_param_set')
|
||||||
|
}}</span>
|
||||||
|
<el-checkbox v-model="state.outerParams.checked">{{
|
||||||
|
t('visualization.enable_outer_param_set')
|
||||||
|
}}</el-checkbox>
|
||||||
|
</el-row>
|
||||||
|
<el-row v-loading="state.loading">
|
||||||
|
<el-row class="preview">
|
||||||
|
<el-col :span="8" style="height: 100%; overflow-y: hidden">
|
||||||
|
<el-row class="tree-head">
|
||||||
|
<span style="float: left; margin-left: 30px">{{
|
||||||
|
t('visualization.param_name')
|
||||||
|
}}</span>
|
||||||
|
<span style="float: right; margin-right: 10px">{{
|
||||||
|
t('visualization.enable_param')
|
||||||
|
}}</span>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="tree-content">
|
||||||
|
<el-tree
|
||||||
|
ref="outerParamsInfoTree"
|
||||||
|
:data="state.outerParamsInfoArray"
|
||||||
|
node-key="id"
|
||||||
|
highlight-current
|
||||||
|
:props="state.treeProp"
|
||||||
|
@node-click="nodeClick"
|
||||||
|
>
|
||||||
|
<template v-slot="{ node, data }">
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<span>
|
||||||
|
<span style="margin-left: 6px"
|
||||||
|
><el-input
|
||||||
|
v-model="data.paramName"
|
||||||
|
size="mini"
|
||||||
|
:placeholder="t('visualization.input_param_name')"
|
||||||
|
/></span>
|
||||||
|
</span>
|
||||||
|
<span @click.stop>
|
||||||
|
<div>
|
||||||
|
<span class="auth-span">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="data.checked"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
@change="sourceFieldCheckedChange(data)"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="removeOuterParamsInfo(node, data)"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="tree-bottom">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
round
|
||||||
|
@click="addOuterParamsInfo"
|
||||||
|
>{{ t('visualization.add_param') }}
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16" class="preview-show">
|
||||||
|
<el-row v-if="state.outerParamsInfo">
|
||||||
|
<el-row class="top_border">
|
||||||
|
<el-row style="margin-top: 10px">
|
||||||
|
<el-col :span="11">
|
||||||
|
<div class="ellip">{{ t('visualization.link_component') }}</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="11">
|
||||||
|
<div class="ellip">{{ t('visualization.link_component_field') }}</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="height: 266px; overflow-y: auto">
|
||||||
|
<el-row
|
||||||
|
v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<el-col :span="11">
|
||||||
|
<div class="select-filed">
|
||||||
|
<el-select
|
||||||
|
v-model="targetViewInfo.targetViewId"
|
||||||
|
filterable
|
||||||
|
style="width: 100%"
|
||||||
|
size="mini"
|
||||||
|
:placeholder="t('fu.search_bar.please_select')"
|
||||||
|
@change="viewInfoOnChange(targetViewInfo)"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in state.currentLinkPanelViewArray.filter(
|
||||||
|
curItem =>
|
||||||
|
!viewSelectedField.includes(curItem.id) ||
|
||||||
|
curItem.id === targetViewInfo.targetViewId
|
||||||
|
)"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
<span style="float: left; font-size: 12px"> {{ item.name }}</span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="11">
|
||||||
|
<div class="select-filed">
|
||||||
|
<el-select
|
||||||
|
v-model="targetViewInfo.targetFieldId"
|
||||||
|
filterable
|
||||||
|
:disabled="fieldIdDisabledCheck(targetViewInfo)"
|
||||||
|
style="width: 100%"
|
||||||
|
size="mini"
|
||||||
|
:placeholder="t('fu.search_bar.please_select')"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="viewField in getFieldArray(targetViewInfo.targetViewId)"
|
||||||
|
:key="viewField.id"
|
||||||
|
:label="viewField.name"
|
||||||
|
:value="viewField.id"
|
||||||
|
>
|
||||||
|
<span style="float: left">
|
||||||
|
<svg-icon
|
||||||
|
v-if="viewField.deType === 0"
|
||||||
|
icon-class="field_text"
|
||||||
|
class="field-icon-text"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
v-if="viewField.deType === 1"
|
||||||
|
icon-class="field_time"
|
||||||
|
class="field-icon-time"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
v-if="viewField.deType === 2 || viewField.deType === 3"
|
||||||
|
icon-class="field_value"
|
||||||
|
class="field-icon-value"
|
||||||
|
/>
|
||||||
|
<svg-icon
|
||||||
|
v-if="viewField.deType === 5"
|
||||||
|
icon-class="field_location"
|
||||||
|
class="field-icon-location"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span style="float: left; font-size: 12px">{{ viewField.name }}</span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
style="float: left"
|
||||||
|
@click="deleteOuterParamsField(index)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row class="bottom">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
round
|
||||||
|
@click="addOuterParamsField"
|
||||||
|
>{{ t('visualization.add_param_link_field') }}
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
<el-row v-if="state.outerParamsInfo.linkType === 'outer'" style="height: 300px">
|
||||||
|
<el-input
|
||||||
|
v-model="state.outerParamsInfo.content"
|
||||||
|
:autosize="{ minRows: 14 }"
|
||||||
|
type="textarea"
|
||||||
|
:placeholder="t('visualization.input_jump_link')"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
<el-row v-else style="height: 100%" class="custom-position">
|
||||||
|
{{ t('visualization.select_param') }}
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="root-class">
|
||||||
|
<el-button size="mini" @click="cancel()">{{ t('commons.cancel') }} </el-button>
|
||||||
|
<el-button type="primary" size="mini" @click="save()"
|
||||||
|
>{{ t('commons.confirm') }}
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, computed, nextTick } from 'vue'
|
||||||
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { ElMessage } from 'element-plus-secondary'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { deepCopy } from '@/utils/utils'
|
||||||
|
import generateID from '@/utils/generateID'
|
||||||
|
import { queryWithDvId, updateOuterParamsSet } from '@/api/visualization/outerParams'
|
||||||
|
import { detailList } from '@/api/visualization/dataVisualization'
|
||||||
|
import checkArrayRepeat from '@/utils/check'
|
||||||
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
|
const { dvInfo, componentData, canvasStyleData } = storeToRefs(dvMainStore)
|
||||||
|
const outerParamsInfoTree = ref(null)
|
||||||
|
const emits = defineEmits(['outerParamsSetVisibleChange'])
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
outerParamsSetVisible: false,
|
||||||
|
treeProp: {
|
||||||
|
id: 'paramsInfoId',
|
||||||
|
label: 'paramName',
|
||||||
|
children: 'children'
|
||||||
|
},
|
||||||
|
outerParams: {
|
||||||
|
checked: false,
|
||||||
|
outerParamsInfoArray: []
|
||||||
|
},
|
||||||
|
outerParamsInfoArray: null,
|
||||||
|
mapOuterParamsInfoArray: {},
|
||||||
|
panelList: [],
|
||||||
|
outerParamsInfo: {
|
||||||
|
content: '',
|
||||||
|
linkType: '',
|
||||||
|
targetViewInfoList: [],
|
||||||
|
paramsInfoId: null
|
||||||
|
},
|
||||||
|
currentFiledTreeNode: null,
|
||||||
|
defaultOuterParamsInfo: {
|
||||||
|
paramName: '',
|
||||||
|
checked: true,
|
||||||
|
targetViewInfoList: []
|
||||||
|
},
|
||||||
|
defaultTargetViewInfo: {
|
||||||
|
targetViewId: null,
|
||||||
|
targetFieldId: null
|
||||||
|
},
|
||||||
|
currentLinkPanelViewArray: [],
|
||||||
|
viewIdFieldArrayMap: {},
|
||||||
|
widgetSubjectsTrans: {
|
||||||
|
timeYearWidget: '年份过滤组件',
|
||||||
|
timeMonthWidget: '年月过滤组件',
|
||||||
|
timeDateWidget: '日期过滤组件',
|
||||||
|
timeDateRangeWidget: '日期范围过滤组件',
|
||||||
|
textSelectWidget: '文本下拉过滤组件',
|
||||||
|
textSelectGridWidget: '文本列表过滤组件',
|
||||||
|
textInputWidget: '文本搜索过滤组件',
|
||||||
|
textSelectTreeWidget: '下拉树过滤组件',
|
||||||
|
numberSelectWidget: '数字下拉过滤组件',
|
||||||
|
numberSelectGridWidget: '数字列表过滤组件',
|
||||||
|
numberRangeWidget: '数值区间过滤组件'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const viewSelectedField = computed(() =>
|
||||||
|
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
|
||||||
|
)
|
||||||
|
|
||||||
|
const fieldIdDisabledCheck = targetViewInfo => {
|
||||||
|
return (
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFieldArray = id => {
|
||||||
|
return state.viewIdFieldArrayMap[id]
|
||||||
|
}
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
// 获取当前仪表板外部跳转蚕食信息
|
||||||
|
queryWithDvId(dvInfo['id']).then(rsp => {
|
||||||
|
state.outerParams = rsp.data
|
||||||
|
state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
|
||||||
|
if (state.outerParamsInfoArray.length > 0) {
|
||||||
|
state.outerParamsInfoArray.forEach(outerParamsInfo => {
|
||||||
|
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
|
||||||
|
})
|
||||||
|
const firstNode = state.outerParamsInfoArray[0]
|
||||||
|
nextTick(() => {
|
||||||
|
outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
|
||||||
|
nodeClick(firstNode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
getPanelViewList(dvInfo['id'])
|
||||||
|
}
|
||||||
|
|
||||||
|
const cancel = () => {
|
||||||
|
emits('outerParamsSetVisibleChange', false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
|
||||||
|
ElMessage.warning({
|
||||||
|
message: t('visualization.repeat_params'),
|
||||||
|
showClose: true
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
updateOuterParamsSet(state.outerParams).then(rsp => {
|
||||||
|
ElMessage({
|
||||||
|
message: t('commons.save_success'),
|
||||||
|
type: 'success',
|
||||||
|
showClose: true
|
||||||
|
})
|
||||||
|
cancel()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeClick = data => {
|
||||||
|
state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前视图字段 关联仪表板的视图信息列表
|
||||||
|
const getPanelViewList = dvId => {
|
||||||
|
detailList(dvId).then(rsp => {
|
||||||
|
state.viewIdFieldArrayMap = {}
|
||||||
|
state.currentLinkPanelViewArray = rsp.data
|
||||||
|
if (state.currentLinkPanelViewArray) {
|
||||||
|
state.currentLinkPanelViewArray.forEach(view => {
|
||||||
|
state.viewIdFieldArrayMap[view.id] = view.tableFields
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 增加过滤组件匹配
|
||||||
|
componentData.value.forEach(componentItem => {
|
||||||
|
if (componentItem.type === 'custom') {
|
||||||
|
state.currentLinkPanelViewArray.push({
|
||||||
|
id: componentItem.id,
|
||||||
|
type: 'filter',
|
||||||
|
name: componentItem.options.attrs.title
|
||||||
|
? componentItem.options.attrs.title
|
||||||
|
: state.widgetSubjectsTrans[componentItem.serviceName]
|
||||||
|
})
|
||||||
|
state.viewIdFieldArrayMap[componentItem.id] = [
|
||||||
|
{ id: 'empty', name: t('visualization.filter_no_select') }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const panelNodeClick = (data, node) => {
|
||||||
|
state.outerParamsInfo.targetViewInfoList = []
|
||||||
|
getPanelViewList(data.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputVal = value => {
|
||||||
|
if (!value) {
|
||||||
|
state.outerParamsInfo.targetViewInfoList = []
|
||||||
|
state.viewIdFieldArrayMap = {}
|
||||||
|
state.currentLinkPanelViewArray = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const addOuterParamsField = () => {
|
||||||
|
state.outerParamsInfo.targetViewInfoList.push({
|
||||||
|
targetViewId: '',
|
||||||
|
targetFieldId: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const deleteOuterParamsField = index => {
|
||||||
|
state.outerParamsInfo.targetViewInfoList.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizer = node => {
|
||||||
|
// 去掉children=null的属性
|
||||||
|
if (node.children === null || node.children === 'null') {
|
||||||
|
delete node.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewInfoOnChange = targetViewInfo => {
|
||||||
|
if (
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
||||||
|
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
||||||
|
) {
|
||||||
|
targetViewInfo.targetFieldId = 'empty'
|
||||||
|
} else {
|
||||||
|
targetViewInfo.targetFieldId = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const sourceFieldCheckedChange = data => {
|
||||||
|
if (data.checked) {
|
||||||
|
state.outerParams.checked = true
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
|
||||||
|
nodeClick(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOuterParamsInfo = () => {
|
||||||
|
outerParamsInfoTree.value.checked = true
|
||||||
|
const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
|
||||||
|
outerParamsInfo['paramsInfoId'] = generateID()
|
||||||
|
state.outerParamsInfoArray.push(outerParamsInfo)
|
||||||
|
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeOuterParamsInfo = (node, data) => {
|
||||||
|
const parent = node.parent
|
||||||
|
const children = parent.data.children || parent.data
|
||||||
|
const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
|
||||||
|
children.splice(index, 1)
|
||||||
|
if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
|
||||||
|
delete state.mapOuterParamsInfoArray[data.paramsInfoId]
|
||||||
|
state.outerParamsInfo = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const optInit = () => {
|
||||||
|
state.outerParamsSetVisible = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
optInit
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.root-class {
|
||||||
|
margin: 15px 0px 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
margin-top: 5px;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
height: 350px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-show {
|
||||||
|
border-left: 1px solid #e6e6e6;
|
||||||
|
height: 350px;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-class {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellip {
|
||||||
|
/*width: 100%;*/
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
overflow: hidden; /*超出部分隐藏*/
|
||||||
|
white-space: nowrap; /*不换行*/
|
||||||
|
text-overflow: ellipsis; /*超出部分文字以...显示*/
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
color: #3d4d66;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-filed {
|
||||||
|
/*width: 100%;*/
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
overflow: hidden; /*超出部分隐藏*/
|
||||||
|
white-space: nowrap; /*不换行*/
|
||||||
|
text-overflow: ellipsis; /*超出部分文字以...显示*/
|
||||||
|
color: #3d4d66;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
v-deep(.ed-popover) {
|
||||||
|
height: 200px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-position {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
color: #9ea6b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-style {
|
||||||
|
padding: 10px 15px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
v-deep(.vue-treeselect__control) {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
v-deep(.vue-treeselect__single-value) {
|
||||||
|
color: #606266;
|
||||||
|
line-height: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-node {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-span {
|
||||||
|
float: right;
|
||||||
|
width: 40px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-head {
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
|
||||||
|
background-color: var(--SiderBG, #f7f8fa);
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--TableColor, #3d4d66);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-content {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-bottom {
|
||||||
|
margin-top: 7px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
v-deep(.vue-treeselect__placeholder) {
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
v-deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content) {
|
||||||
|
background-color: #8dbbef !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-content ::v-deep(.ed-input__inner) {
|
||||||
|
background: transparent;
|
||||||
|
border: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-class ::v-deep(.ed-dialog__title) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-class ::v-deep(.ed-dialog__headerbtn) {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-class ::v-deep(.ed-dialog__header) {
|
||||||
|
padding: 20px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-class ::v-deep(.ed-dialog__body) {
|
||||||
|
padding: 10px 20px 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,567 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-row style="height: 430px">
|
|
||||||
<el-row>
|
|
||||||
<span style="font-weight: 600; margin-right: 20px">{{
|
|
||||||
t('visualization.outer_param_set')
|
|
||||||
}}</span>
|
|
||||||
<el-checkbox v-model="state.outerParams?.checked">{{
|
|
||||||
t('visualization.enable_outer_param_set')
|
|
||||||
}}</el-checkbox>
|
|
||||||
</el-row>
|
|
||||||
<el-row v-loading="state.loading">
|
|
||||||
<el-row class="preview">
|
|
||||||
<el-col :span="8" style="height: 100%; overflow-y: hidden">
|
|
||||||
<el-row class="tree-head">
|
|
||||||
<span style="float: left; margin-left: 30px">{{ t('visualization.param_name') }}</span>
|
|
||||||
<span style="float: right; margin-right: 10px">{{
|
|
||||||
t('visualization.enable_param')
|
|
||||||
}}</span>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="tree-content">
|
|
||||||
<el-tree
|
|
||||||
ref="outerParamsInfoTree"
|
|
||||||
:data="state.outerParamsInfoArray"
|
|
||||||
node-key="id"
|
|
||||||
highlight-current
|
|
||||||
:props="state.treeProp"
|
|
||||||
@node-click="nodeClick"
|
|
||||||
>
|
|
||||||
<template v-slot="{ node, data }">
|
|
||||||
<span class="custom-tree-node">
|
|
||||||
<span>
|
|
||||||
<span style="margin-left: 6px"
|
|
||||||
><el-input
|
|
||||||
v-model="data.paramName"
|
|
||||||
size="mini"
|
|
||||||
:placeholder="t('visualization.input_param_name')"
|
|
||||||
/></span>
|
|
||||||
</span>
|
|
||||||
<span @click.stop>
|
|
||||||
<div>
|
|
||||||
<span class="auth-span">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="data.checked"
|
|
||||||
style="margin-right: 10px"
|
|
||||||
@change="sourceFieldCheckedChange(data)"
|
|
||||||
/>
|
|
||||||
<el-button
|
|
||||||
icon="el-icon-delete"
|
|
||||||
type="text"
|
|
||||||
size="small"
|
|
||||||
@click="removeOuterParamsInfo(node, data)"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="tree-bottom">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="success"
|
|
||||||
icon="el-icon-plus"
|
|
||||||
round
|
|
||||||
@click="addOuterParamsInfo"
|
|
||||||
>{{ t('visualization.add_param') }}
|
|
||||||
</el-button>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16" class="preview-show">
|
|
||||||
<el-row v-if="state.outerParamsInfo">
|
|
||||||
<el-row class="top_border">
|
|
||||||
<el-row style="margin-top: 10px">
|
|
||||||
<el-col :span="11">
|
|
||||||
<div class="ellip">{{ t('visualization.link_component') }}</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="11">
|
|
||||||
<div class="ellip">{{ t('visualization.link_component_field') }}</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row style="height: 266px; overflow-y: auto">
|
|
||||||
<el-row
|
|
||||||
v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<el-col :span="11">
|
|
||||||
<div class="select-filed">
|
|
||||||
<el-select
|
|
||||||
v-model="targetViewInfo.targetViewId"
|
|
||||||
filterable
|
|
||||||
style="width: 100%"
|
|
||||||
size="mini"
|
|
||||||
:placeholder="t('fu.search_bar.please_select')"
|
|
||||||
@change="viewInfoOnChange(targetViewInfo)"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in state.currentLinkPanelViewArray.filter(
|
|
||||||
curItem =>
|
|
||||||
!viewSelectedField.includes(curItem.id) ||
|
|
||||||
curItem.id === targetViewInfo.targetViewId
|
|
||||||
)"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
>
|
|
||||||
<span v-if="item.isPlugin" style="float: left">
|
|
||||||
<svg-icon
|
|
||||||
:icon-class="
|
|
||||||
item.type !== 'buddle-map'
|
|
||||||
? '/api/pluginCommon/staticInfo/' + item.type + '/svg'
|
|
||||||
: item.type
|
|
||||||
"
|
|
||||||
style="width: 14px; height: 14px"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span v-else style="float: left">
|
|
||||||
<svg-icon :icon-class="item.type" style="width: 14px; height: 14px" />
|
|
||||||
</span>
|
|
||||||
<span style="float: left; font-size: 12px"> {{ item.name }}</span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="11">
|
|
||||||
<div class="select-filed">
|
|
||||||
<el-select
|
|
||||||
v-model="targetViewInfo.targetFieldId"
|
|
||||||
filterable
|
|
||||||
:disabled="
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
|
||||||
"
|
|
||||||
style="width: 100%"
|
|
||||||
size="mini"
|
|
||||||
:placeholder="t('fu.search_bar.please_select')"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="viewField in state.viewIdFieldArrayMap[
|
|
||||||
targetViewInfo.targetViewId
|
|
||||||
]"
|
|
||||||
:key="viewField.id"
|
|
||||||
:label="viewField.name"
|
|
||||||
:value="viewField.id"
|
|
||||||
>
|
|
||||||
<span style="float: left">
|
|
||||||
<svg-icon
|
|
||||||
v-if="viewField.deType === 0"
|
|
||||||
icon-class="field_text"
|
|
||||||
class="field-icon-text"
|
|
||||||
/>
|
|
||||||
<svg-icon
|
|
||||||
v-if="viewField.deType === 1"
|
|
||||||
icon-class="field_time"
|
|
||||||
class="field-icon-time"
|
|
||||||
/>
|
|
||||||
<svg-icon
|
|
||||||
v-if="viewField.deType === 2 || viewField.deType === 3"
|
|
||||||
icon-class="field_value"
|
|
||||||
class="field-icon-value"
|
|
||||||
/>
|
|
||||||
<svg-icon
|
|
||||||
v-if="viewField.deType === 5"
|
|
||||||
icon-class="field_location"
|
|
||||||
class="field-icon-location"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span style="float: left; font-size: 12px">{{ viewField.name }}</span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2">
|
|
||||||
<div>
|
|
||||||
<el-button
|
|
||||||
icon="el-icon-delete"
|
|
||||||
type="text"
|
|
||||||
size="small"
|
|
||||||
style="float: left"
|
|
||||||
@click="deleteOuterParamsField(index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row class="bottom">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="success"
|
|
||||||
icon="el-icon-plus"
|
|
||||||
round
|
|
||||||
@click="addOuterParamsField"
|
|
||||||
>{{ t('visualization.add_param_link_field') }}
|
|
||||||
</el-button>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- <el-button slot="reference">T</el-button>-->
|
|
||||||
<template v-slot:reference>
|
|
||||||
<i class="icon iconfont icon-edit slot-class" />
|
|
||||||
</template>
|
|
||||||
</el-row>
|
|
||||||
<el-row v-if="state.outerParamsInfo.linkType === 'outer'" style="height: 300px">
|
|
||||||
<el-input
|
|
||||||
v-model="state.outerParamsInfo.content"
|
|
||||||
:autosize="{ minRows: 14 }"
|
|
||||||
type="textarea"
|
|
||||||
:placeholder="t('visualization.input_jump_link')"
|
|
||||||
/>
|
|
||||||
</el-row>
|
|
||||||
</el-row>
|
|
||||||
<el-row
|
|
||||||
v-else
|
|
||||||
style="height: 100%; background-color: var(--MainContentBG)"
|
|
||||||
class="custom-position"
|
|
||||||
>
|
|
||||||
{{ t('visualization.select_param') }}
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="root-class">
|
|
||||||
<el-button size="mini" @click="cancel()">{{ t('commons.cancel') }} </el-button>
|
|
||||||
<el-button type="primary" size="mini" @click="save()">{{ t('commons.confirm') }} </el-button>
|
|
||||||
</el-row>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, computed, nextTick } from 'vue'
|
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { ElMessage } from 'element-plus-secondary'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import { deepCopy } from '@/utils/utils'
|
|
||||||
import generateID from '@/utils/generateID'
|
|
||||||
import { queryWithDvId, updateOuterParamsSet } from '@/api/visualization/outerParams'
|
|
||||||
import { detailList } from '@/api/visualization/dataVisualization'
|
|
||||||
import checkArrayRepeat from '@/utils/check'
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const { dvInfo, componentData, canvasStyleData } = storeToRefs(dvMainStore)
|
|
||||||
const outerParamsInfoTree = ref(null)
|
|
||||||
const emits = defineEmits(['outerParamsSetVisibleChange'])
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
loading: false,
|
|
||||||
treeProp: {
|
|
||||||
id: 'paramsInfoId',
|
|
||||||
label: 'paramName',
|
|
||||||
children: 'children'
|
|
||||||
},
|
|
||||||
outerParams: {},
|
|
||||||
outerParamsInfoArray: null,
|
|
||||||
mapOuterParamsInfoArray: {},
|
|
||||||
panelList: [],
|
|
||||||
outerParamsInfo: null,
|
|
||||||
currentFiledTreeNode: null,
|
|
||||||
defaultOuterParamsInfo: {
|
|
||||||
paramName: '',
|
|
||||||
checked: true,
|
|
||||||
targetViewInfoList: []
|
|
||||||
},
|
|
||||||
defaultTargetViewInfo: {
|
|
||||||
targetViewId: null,
|
|
||||||
targetFieldId: null
|
|
||||||
},
|
|
||||||
currentLinkPanelViewArray: [],
|
|
||||||
viewIdFieldArrayMap: {},
|
|
||||||
widgetSubjectsTrans: {
|
|
||||||
timeYearWidget: '年份过滤组件',
|
|
||||||
timeMonthWidget: '年月过滤组件',
|
|
||||||
timeDateWidget: '日期过滤组件',
|
|
||||||
timeDateRangeWidget: '日期范围过滤组件',
|
|
||||||
textSelectWidget: '文本下拉过滤组件',
|
|
||||||
textSelectGridWidget: '文本列表过滤组件',
|
|
||||||
textInputWidget: '文本搜索过滤组件',
|
|
||||||
textSelectTreeWidget: '下拉树过滤组件',
|
|
||||||
numberSelectWidget: '数字下拉过滤组件',
|
|
||||||
numberSelectGridWidget: '数字列表过滤组件',
|
|
||||||
numberRangeWidget: '数值区间过滤组件'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const viewSelectedField = computed(() =>
|
|
||||||
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
|
|
||||||
)
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
// 获取当前仪表板外部跳转蚕食信息
|
|
||||||
queryWithDvId(dvInfo.id).then(rsp => {
|
|
||||||
state.outerParams = rsp.data
|
|
||||||
state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
|
|
||||||
if (state.outerParamsInfoArray.length > 0) {
|
|
||||||
state.outerParamsInfoArray.forEach(outerParamsInfo => {
|
|
||||||
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
|
|
||||||
})
|
|
||||||
const firstNode = state.outerParamsInfoArray[0]
|
|
||||||
nextTick(() => {
|
|
||||||
outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
|
|
||||||
nodeClick(firstNode)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
getPanelViewList(dvInfo.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
const cancel = () => {
|
|
||||||
emits('outerParamsSetVisibleChange', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
|
|
||||||
ElMessage.warning({
|
|
||||||
message: t('visualization.repeat_params'),
|
|
||||||
showClose: true
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
updateOuterParamsSet(state.outerParams).then(rsp => {
|
|
||||||
ElMessage({
|
|
||||||
message: t('commons.save_success'),
|
|
||||||
type: 'success',
|
|
||||||
showClose: true
|
|
||||||
})
|
|
||||||
cancel()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const nodeClick = data => {
|
|
||||||
state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前视图字段 关联仪表板的视图信息列表
|
|
||||||
const getPanelViewList = dvId => {
|
|
||||||
detailList(dvId).then(rsp => {
|
|
||||||
state.viewIdFieldArrayMap = {}
|
|
||||||
state.currentLinkPanelViewArray = rsp.data
|
|
||||||
if (state.currentLinkPanelViewArray) {
|
|
||||||
state.currentLinkPanelViewArray.forEach(view => {
|
|
||||||
state.viewIdFieldArrayMap[view.id] = view.tableFields
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 增加过滤组件匹配
|
|
||||||
componentData.value.forEach(componentItem => {
|
|
||||||
if (componentItem.type === 'custom') {
|
|
||||||
state.currentLinkPanelViewArray.push({
|
|
||||||
id: componentItem.id,
|
|
||||||
type: 'filter',
|
|
||||||
name: componentItem.options.attrs.title
|
|
||||||
? componentItem.options.attrs.title
|
|
||||||
: state.widgetSubjectsTrans[componentItem.serviceName]
|
|
||||||
})
|
|
||||||
state.viewIdFieldArrayMap[componentItem.id] = [
|
|
||||||
{ id: 'empty', name: t('visualization.filter_no_select') }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const panelNodeClick = (data, node) => {
|
|
||||||
state.outerParamsInfo.targetViewInfoList = []
|
|
||||||
getPanelViewList(data.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputVal = value => {
|
|
||||||
if (!value) {
|
|
||||||
state.outerParamsInfo.targetViewInfoList = []
|
|
||||||
state.viewIdFieldArrayMap = {}
|
|
||||||
state.currentLinkPanelViewArray = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const addOuterParamsField = () => {
|
|
||||||
state.outerParamsInfo.targetViewInfoList.push({
|
|
||||||
targetViewId: '',
|
|
||||||
targetFieldId: ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const deleteOuterParamsField = index => {
|
|
||||||
state.outerParamsInfo.targetViewInfoList.splice(index, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizer = node => {
|
|
||||||
// 去掉children=null的属性
|
|
||||||
if (node.children === null || node.children === 'null') {
|
|
||||||
delete node.children
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const viewInfoOnChange = targetViewInfo => {
|
|
||||||
if (
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
|
|
||||||
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
|
|
||||||
) {
|
|
||||||
targetViewInfo.targetFieldId = 'empty'
|
|
||||||
} else {
|
|
||||||
targetViewInfo.targetFieldId = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const sourceFieldCheckedChange = data => {
|
|
||||||
if (data.checked) {
|
|
||||||
state.outerParams?.checked = true
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
|
|
||||||
nodeClick(data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const addOuterParamsInfo = () => {
|
|
||||||
outerParamsInfoTree.value.checked = true
|
|
||||||
const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
|
|
||||||
outerParamsInfo['paramsInfoId'] = generateID()
|
|
||||||
state.outerParamsInfoArray.push(outerParamsInfo)
|
|
||||||
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeOuterParamsInfo = (node, data) => {
|
|
||||||
const parent = node.parent
|
|
||||||
const children = parent.data.children || parent.data
|
|
||||||
const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
|
|
||||||
children.splice(index, 1)
|
|
||||||
if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
|
|
||||||
delete state.mapOuterParamsInfoArray[data.paramsInfoId]
|
|
||||||
state.outerParamsInfo = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.root-class {
|
|
||||||
margin: 15px 0px 5px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
height: 350px !important;
|
|
||||||
overflow: hidden;
|
|
||||||
background-size: 100% 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-show {
|
|
||||||
border-left: 1px solid #e6e6e6;
|
|
||||||
height: 350px;
|
|
||||||
background-size: 100% 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slot-class {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
margin-top: 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ellip {
|
|
||||||
/*width: 100%;*/
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
overflow: hidden; /*超出部分隐藏*/
|
|
||||||
white-space: nowrap; /*不换行*/
|
|
||||||
text-overflow: ellipsis; /*超出部分文字以...显示*/
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f7f8fa;
|
|
||||||
color: #3d4d66;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-filed {
|
|
||||||
/*width: 100%;*/
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
overflow: hidden; /*超出部分隐藏*/
|
|
||||||
white-space: nowrap; /*不换行*/
|
|
||||||
text-overflow: ellipsis; /*超出部分文字以...显示*/
|
|
||||||
color: #3d4d66;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 35px;
|
|
||||||
height: 35px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
v-deep(.el-popover) {
|
|
||||||
height: 200px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-position {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 14px;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
color: #9ea6b2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-style {
|
|
||||||
padding: 10px 15px;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
v-deep(.vue-treeselect__control) {
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
v-deep(.vue-treeselect__single-value) {
|
|
||||||
color: #606266;
|
|
||||||
line-height: 28px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tree-node {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-span {
|
|
||||||
float: right;
|
|
||||||
width: 40px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-head {
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
|
|
||||||
background-color: var(--SiderBG, #f7f8fa);
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--TableColor, #3d4d66);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-content {
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-bottom {
|
|
||||||
margin-top: 7px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
v-deep(.vue-treeselect__placeholder {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
v-deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
|
||||||
background-color: #8dbbef !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-content v-deep(.el-input__inner) {
|
|
||||||
background: transparent;
|
|
||||||
border: 0px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -4,8 +4,6 @@ import io.dataease.api.visualization.dto.VisualizationOuterParamsDTO;
|
|||||||
import io.dataease.api.visualization.response.VisualizationOuterParamsBaseResponse;
|
import io.dataease.api.visualization.response.VisualizationOuterParamsBaseResponse;
|
||||||
import org.springframework.web.bind.annotation.*;
|
import org.springframework.web.bind.annotation.*;
|
||||||
|
|
||||||
@RestController
|
|
||||||
@RequestMapping("outerParams")
|
|
||||||
public interface VisualizationOuterParamsApi {
|
public interface VisualizationOuterParamsApi {
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,21 @@
|
|||||||
package io.dataease.api.visualization.dto;
|
package io.dataease.api.visualization.dto;
|
||||||
|
|
||||||
import io.dataease.api.visualization.vo.VisualizationOuterParamsVO;
|
import io.dataease.api.visualization.vo.VisualizationOuterParamsVO;
|
||||||
|
import lombok.Data;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
|
||||||
|
|
||||||
|
@Data
|
||||||
public class VisualizationOuterParamsDTO extends VisualizationOuterParamsVO {
|
public class VisualizationOuterParamsDTO extends VisualizationOuterParamsVO {
|
||||||
|
|
||||||
|
private List<String> targetInfoList;
|
||||||
|
|
||||||
|
private List<VisualizationOuterParamsInfoDTO> outerParamsInfoArray = new ArrayList<>();
|
||||||
|
|
||||||
|
private Map<String,VisualizationOuterParamsInfoDTO> mapOuterParamsInfoArray = new HashMap<>();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,23 @@
|
|||||||
package io.dataease.api.visualization.dto;
|
package io.dataease.api.visualization.dto;
|
||||||
|
|
||||||
import io.dataease.api.visualization.vo.VisualizationOuterParamsInfoVO;
|
import io.dataease.api.visualization.vo.VisualizationOuterParamsInfoVO;
|
||||||
|
import io.dataease.api.visualization.vo.VisualizationOuterParamsTargetViewInfoVO;
|
||||||
|
import lombok.Data;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
|
||||||
|
@Data
|
||||||
public class VisualizationOuterParamsInfoDTO extends VisualizationOuterParamsInfoVO {
|
public class VisualizationOuterParamsInfoDTO extends VisualizationOuterParamsInfoVO {
|
||||||
|
private String dvId;
|
||||||
|
|
||||||
|
private List<VisualizationOuterParamsTargetViewInfoVO> targetViewInfoList=new ArrayList<>();
|
||||||
|
|
||||||
|
//仪表板外部参数信息 dvId#paramName
|
||||||
|
private String sourceInfo;
|
||||||
|
|
||||||
|
//目标联动参数 targetViewId#targetFieldId
|
||||||
|
private List<String> targetInfoList;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user