refactor:设置弹出框优化

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

@@ -2,38 +2,61 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper">
 
-  <resultMap id="LinkageGatherMap" type="io.dataease.dto.PanelViewLinkageDTO">
-    <result column="target_view_id" jdbcType="VARCHAR" property="targetViewId" />
-    <result column="targetViewName" jdbcType="VARCHAR" property="targetViewName" />
-    <result column="linkageActive"  property="linkageActive" />
-    <collection property="linkageFields" ofType="io.dataease.dto.PanelViewLinkageFieldDTO">
-      <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled"  />
-      <result column="target_filed" jdbcType="VARCHAR" property="targetFiled"  />
-    </collection>
+    <resultMap id="TableFieldMap" type="io.dataease.base.domain.DatasetTableField">
+        <id column="id" jdbcType="VARCHAR" property="id"/>
+        <result column="table_id" jdbcType="VARCHAR" property="tableId"/>
+        <result column="origin_name" jdbcType="VARCHAR" property="originName"/>
+        <result column="name" jdbcType="VARCHAR" property="name"/>
+        <result column="de_type" jdbcType="INTEGER" property="deType"/>
+    </resultMap>
 
-<!--      <collection property="linkageFields" ofType="io.dataease.dto.PanelViewLinkageFieldDTO">-->
-<!--          <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled"  />-->
-<!--          <result column="target_filed" jdbcType="VARCHAR" property="targetFiled"  />-->
-<!--      </collection>-->
-  </resultMap>
+    <resultMap id="LinkageGatherMap" type="io.dataease.dto.PanelViewLinkageDTO">
+        <result column="target_view_id" jdbcType="VARCHAR" property="targetViewId"/>
+        <result column="table_id" jdbcType="VARCHAR" property="tableId"/>
+        <result column="targetViewName" jdbcType="VARCHAR" property="targetViewName"/>
+        <result column="linkageActive" property="linkageActive"/>
+        <collection property="linkageFields" ofType="io.dataease.dto.PanelViewLinkageFieldDTO">
+            <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled"/>
+            <result column="target_filed" jdbcType="VARCHAR" property="targetFiled"/>
+        </collection>
+        <collection property="targetViewFields" ofType="io.dataease.base.domain.DatasetTableField" column="table_id"
+                    select="queryTableField">
+        </collection>
+    </resultMap>
 
-  <select id ="getViewLinkageGather" resultMap="LinkageGatherMap">
-
-    SELECT
+    <select id="getViewLinkageGather" resultMap="LinkageGatherMap">
+        SELECT
         chart_view.`name` as 'targetViewName',
         chart_view.id as 'target_view_id',
-        (case  when panel_view_linkage.target_view_id is null then 0 else 1 end) as 'linkageActive',
+        (case when panel_view_linkage.target_view_id is null then 0 else 1 end) as 'linkageActive',
         panel_view_linkage_field.source_filed,
-        panel_view_linkage_field.target_filed
-    FROM
+        panel_view_linkage_field.target_filed,
+        dataset_table_field.id as 'field_id',
+        dataset_table_field.origin_name,
+        dataset_table_field.`name` as 'field_name',
+        dataset_table_field.`type`,
+        dataset_table_field.de_type,
+        dataset_table_field.de_extract_type
+        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
         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>
+        LEFT JOIN dataset_table_field on chart_view.table_id = dataset_table_field.table_id
+        where chart_view.id in
+        <foreach collection="targetViewIds" item="targetViewId" index="index" open="(" close=")" separator=",">
+            #{targetViewId}
+        </foreach>
+    </select>
+
+    <select id="queryTableField" resultMap="TableFieldMap">
+       select
+       dataset_table_field.id,
+       dataset_table_field.table_id,
+       dataset_table_field.origin_name,
+       dataset_table_field.name,
+       dataset_table_field.de_type
+        from dataset_table_field where table_id =#{table_id}
+    </select>
 </mapper>

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

@@ -22,7 +22,9 @@ public class PanelViewLinkageDTO extends PanelViewLinkage {
     private List<PanelViewLinkageFieldDTO> linkageFields = new ArrayList<>();
 
 
-    private List<DatasetTableField> targetViewField = new ArrayList<>();
+    private List<DatasetTableField> targetViewFields = new ArrayList<>();
+
+    private String tableId;
 
 
 
@@ -30,12 +32,20 @@ public class PanelViewLinkageDTO extends PanelViewLinkage {
 
     }
 
-    public List<DatasetTableField> getTargetViewField() {
-        return targetViewField;
+    public String getTableId() {
+        return tableId;
+    }
+
+    public void setTableId(String tableId) {
+        this.tableId = tableId;
+    }
+
+    public List<DatasetTableField> getTargetViewFields() {
+        return targetViewFields;
     }
 
-    public void setTargetViewField(List<DatasetTableField> targetViewField) {
-        this.targetViewField = targetViewField;
+    public void setTargetViewFields(List<DatasetTableField> targetViewFields) {
+        this.targetViewFields = targetViewFields;
     }
 
     public String getTargetViewName() {

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

@@ -2,7 +2,7 @@
   <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" />
-      <linkage-field v-if="linkageInfo.linkageActive" />
+      <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
       <!--      <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
     </div>
     <div v-else-if="!linkageSettingStatus">

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-col :span="10">
+        <div class="ellip">联动视图</div>
+      </el-col>
+      <el-col :span="10" class="ellip">
+        <div class="ellip">{{ linkageInfo.targetViewName }}</div>
+      </el-col>
     </el-row>
 
-    this is test
-
     <el-row class="bottom">
       <el-button size="mini" type="success" icon="el-icon-plus" round>追加联动依赖字段</el-button>
     </el-row>
@@ -74,23 +75,7 @@ export default {
       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() {
 
@@ -108,5 +93,17 @@ export default {
     text-align: center;
 
   }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+  }
 
 </style>

frontend/src/views/panel/list/PanelList.vue

@@ -463,6 +463,7 @@ export default {
             message: this.$t('panel.delete_success'),
             showClose: true
           })
+          this.clearCanvas()
           this.tree(this.groupForm)
           this.defaultTree()
         })
@@ -470,6 +471,17 @@ export default {
       })
     },
 
+    clearCanvas() {
+      // 清空当前缓存,快照
+      this.$store.commit('setComponentData', [])
+      this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
+      this.$store.dispatch('panel/setPanelInfo', {
+        id: null,
+        name: '',
+        preStyle: null
+      })
+    },
+
     close() {
       this.editGroup = false
       this.groupForm = {