Merge pull request #527 from dataease/pr@dev@refactor_panel-likage-show

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml

@@ -4,6 +4,7 @@
 
   <resultMap id="LinkageGatherMap" type="io.dataease.dto.PanelViewLinkageDTO">
     <result column="target_view_id" jdbcType="VARCHAR" property="targetViewId" />
+    <result column="targetViewName" jdbcType="VARCHAR" property="targetViewName" />
     <collection property="linkageFields">
       <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled"  />
       <result column="target_filed" jdbcType="VARCHAR" property="targetFiled"  />
@@ -11,13 +12,22 @@
   </resultMap>
 
   <select id ="getViewLinkageGather" resultMap="LinkageGatherMap">
-    SELECT
-        panel_view_linkage.target_view_id,
-         panel_view_linkage_field.source_filed,
-         panel_view_linkage_field.target_filed
-    FROM
-        panel_view_linkage
+
+SELECT
+	chart_view.`name` as 'targetViewName',
+	panel_view_linkage.target_view_id,
+	panel_view_linkage_field.source_filed,
+	panel_view_linkage_field.target_filed
+FROM
+	chart_view
+	LEFT JOIN panel_view_linkage ON chart_view.id = panel_view_linkage.target_view_id
 	LEFT JOIN panel_view_linkage_field ON panel_view_linkage.id = panel_view_linkage_field.linkage_id
-	where panel_view_linkage.panel_id = #{panelId} and panel_view_linkage.source_view_id =#{sourceViewId}
+	AND panel_view_linkage.panel_id = #{panelId}
+	AND panel_view_linkage.source_view_id = #{sourceViewId}
+
+	where chart_view.id in
+      <foreach collection="targetViewIds" item="targetViewId" index="index" open="(" close=")" separator=",">
+          #{targetViewId}
+      </foreach>
   </select>
 </mapper>

backend/src/main/java/io/dataease/dto/PanelViewLinkageDTO.java

@@ -12,6 +12,9 @@ import java.util.List;
  */
 public class PanelViewLinkageDTO extends PanelViewLinkage {
 
+    //目标视图名称
+    private String targetViewName;
+
     //关联状态
     private boolean linkageActive = true;
 
@@ -21,6 +24,14 @@ public class PanelViewLinkageDTO extends PanelViewLinkage {
 
     }
 
+    public String getTargetViewName() {
+        return targetViewName;
+    }
+
+    public void setTargetViewName(String targetViewName) {
+        this.targetViewName = targetViewName;
+    }
+
     public PanelViewLinkageDTO(boolean linkageActive) {
         this.linkageActive = linkageActive;
     }

backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java

@@ -31,14 +31,14 @@ public class PanelViewLinkageService {
             Map<String, PanelViewLinkageDTO> result = Optional.ofNullable(extPanelViewLinkageMapper.getViewLinkageGather(request.getPanelId(),request.getSourceViewId()))
                     .orElse(new ArrayList<>()).stream()
                     .collect(Collectors.toMap(PanelViewLinkageDTO::getTargetViewId,PanelViewLinkageDTO->PanelViewLinkageDTO));
-            Set<String> innerTargetIds = result.keySet();
-
-            // 将对应没有建立关联关系的targetId 也补充进去
-            request.getTargetViewIds().stream().forEach(targetId->{
-                if(!innerTargetIds.contains(targetId)){
-                    result.put(targetId,new PanelViewLinkageDTO(false));
-                }
-            });
+//            Set<String> innerTargetIds = result.keySet();
+//
+//            // 将对应没有建立关联关系的targetId 也补充进去
+//            request.getTargetViewIds().stream().forEach(targetId->{
+//                if(!innerTargetIds.contains(targetId)){
+//                    result.put(targetId,new PanelViewLinkageDTO(false));
+//                }
+//            });
             return result;
         }
         return new HashMap<>();

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -2,7 +2,8 @@
   <div class="bar-main">
     <div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
       <el-checkbox v-model="linkageInfo.linkageActive" />
-      <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />
+      <linkage-field v-if="linkageInfo.linkageActive" />
+      <!--      <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
     </div>
     <div v-else-if="!linkageSettingStatus">
       <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
@@ -19,9 +20,10 @@
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
+import LinkageField from '@/components/canvas/components/Editor/LinkageField'
 
 export default {
-  components: { SettingMenu },
+  components: { SettingMenu, LinkageField },
 
   props: {
     element: {

frontend/src/components/canvas/components/Editor/LinkageField.vue

+<template>
+
+  <el-popover
+    v-model="isSetting"
+    width="300"
+    trigger="click"
+  >
+    <el-row>
+      <el-col :span="10" />
+      <el-col :span="10" />
+    </el-row>
+
+    this is test
+
+    <el-row class="bottom">
+      <el-button size="mini" type="success" icon="el-icon-plus" round>追加联动依赖字段</el-button>
+    </el-row>
+
+    <!--    <el-button slot="reference">T</el-button>-->
+    <i slot="reference" class="icon iconfont icon-edit slot-class" />
+
+  </el-popover>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  props: {
+    element: {
+      type: Object,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 当前模式 preview 预览 edit 编辑，
+    activeModel: {
+      type: String,
+      required: false,
+      default: 'preview'
+    }
+  },
+  data() {
+    return {
+      componentType: null,
+      linkageActiveStatus: false,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  computed: {
+    linkageInfo() {
+      return this.targetLinkageInfo[this.element.propValue.viewId]
+    },
+    ...mapState([
+      'menuTop',
+      'menuLeft',
+      'menuShow',
+      'curComponent',
+      'componentData',
+      'canvasStyleData',
+      'linkageSettingStatus',
+      'targetLinkageInfo',
+      'curLinkageView'
+    ])
+  },
+  methods: {
+    showViewDetails() {
+      this.$emit('showViewDetails')
+    },
+    edit() {
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
+      if (this.curComponent.type === 'custom') {
+        bus.$emit('component-dialog-edit')
+      }
+
+      // 编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
+    },
+    linkageEdit() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    text-align: center;
+
+  }
+
+</style>