Merge pull request #1936 from dataease/pr@dev@refactor_outer-params

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelOuterParamsMapper.java

@@ -8,6 +8,10 @@ public interface ExtPanelOuterParamsMapper {
 
     PanelOuterParamsDTO queryWithPanelId(@Param("panelId") String panelId);
 
+    void deleteOuterParamsTargetWithPanelId(@Param("panelId") String panelId);
+
+    void deleteOuterParamsInfoWithPanelId(@Param("panelId") String panelId);
+
     void deleteOuterParamsWithPanelId(@Param("panelId") String panelId);
 
 }

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

@@ -46,8 +46,8 @@
         panel_group.id = #{panelId}
   </select>
 
-    <delete id="deleteOuterParamsWithPanelId" >
-        DELETE poptvi,popi,pop
+    <delete id="deleteOuterParamsTargetWithPanelId" >
+        DELETE poptvi
         FROM
             panel_outer_params_target_view_info poptvi,
             panel_outer_params_info popi,
@@ -58,4 +58,24 @@
             AND pop.panel_id = #{panelId}
 	</delete>
 
+    <delete id="deleteOuterParamsInfoWithPanelId" >
+        DELETE popi
+        FROM
+            panel_outer_params_info popi,
+            panel_outer_params pop
+        WHERE
+             popi.params_id = pop.params_id
+            AND pop.panel_id = #{panelId}
+	</delete>
+
+    <delete id="deleteOuterParamsWithPanelId" >
+        DELETE pop
+        FROM
+            panel_outer_params pop
+        WHERE
+            pop.panel_id = #{panelId}
+	</delete>
+
+
+
 </mapper>

backend/src/main/java/io/dataease/controller/panel/PanelOuterParamsController.java

 package io.dataease.controller.panel;
 
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
-import io.dataease.base.domain.PanelOuterParams;
-import io.dataease.dto.panel.linkJump.PanelLinkJumpDTO;
 import io.dataease.dto.panel.outerParams.PanelOuterParamsDTO;
 import io.dataease.service.panel.PanelOuterParamsService;
 import io.swagger.annotations.Api;

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

@@ -46,6 +46,8 @@ public class PanelOuterParamsService {
         String panelId = outerParamsDTO.getPanelId();
         Assert.notNull(panelId, "panelId cannot be null");
         //清理原有数据
+        extPanelOuterParamsMapper.deleteOuterParamsTargetWithPanelId(panelId);
+        extPanelOuterParamsMapper.deleteOuterParamsInfoWithPanelId(panelId);
         extPanelOuterParamsMapper.deleteOuterParamsWithPanelId(panelId);
         // 插入新的数据
         String paramsId = UUID.randomUUID().toString();

frontend/src/components/canvas/components/Toolbar.vue

@@ -38,9 +38,9 @@
       <el-tooltip :content="$t('panel.fullscreen_preview')">
         <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
       </el-tooltip>
-<!--      <el-tooltip :content="$t('panel.params_setting')">-->
-<!--        <el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />-->
-<!--      </el-tooltip>-->
+      <el-tooltip :content="$t('panel.params_setting')">
+        <el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />
+      </el-tooltip>
       <span style="float: right;margin-left: 10px">
         <el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
           {{ $t('commons.save') }}

frontend/src/lang/en.js

@@ -1381,6 +1381,14 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    enable_outer_param_set: 'Enable Outer Param Set',
+    select_param: 'Please Select Param...',
+    add_param_link_field: "Add Params' Linked Field",
+    add_param: 'Add Param',
+    enable_param: 'Enable Param',
+    param_name: 'Param Name',
+    outer_param_set: 'Outer Param Set',
+    input_param_name: "Please Input Param's Name",
     params_setting: 'Outer Params Setting',
     template_view_tips: "Template's Views. Please Change",
     no_auth_role: 'Unshared roles',

frontend/src/lang/tw.js

@@ -1382,6 +1382,14 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    enable_outer_param_set: '启用外部参数设置',
+    select_param: '请选择参数...',
+    add_param_link_field: '添加参数联动字段',
+    add_param: '添加参数',
+    enable_param: '启用参数',
+    param_name: '参数名称',
+    outer_param_set: '外部参数设置',
+    input_param_name: '请输入参数名称',
     params_setting: '外部参数设置',
     template_view_tips: '当前是模板视图,请点击更换数据集',
     no_auth_role: '未分享角色',

frontend/src/lang/zh.js

@@ -1390,6 +1390,14 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    enable_outer_param_set: '启用外部参数设置',
+    select_param: '请选择参数...',
+    add_param_link_field: '添加参数联动字段',
+    add_param: '添加参数',
+    enable_param: '启用参数',
+    param_name: '参数名称',
+    outer_param_set: '外部参数设置',
+    input_param_name: '请输入参数名称',
     params_setting: '外部参数设置',
     template_view_tips: '当前是模板视图,请点击更换数据集',
     no_auth_role: '未分享角色',

frontend/src/views/panel/OuterParamsSet/index.vue

 <template>
   <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: 430px">
     <el-row>
-      <span style="font-weight:600;margin-right: 20px">{{ $t('panel.jump_set') }}</span>
-      <el-checkbox v-model="outerParams.checked">{{ $t('panel.enable_jump') }}</el-checkbox>
+      <span style="font-weight:600;margin-right: 20px">{{ $t('panel.outer_param_set') }}</span>
+      <el-checkbox v-model="outerParams.checked">{{ $t('panel.enable_outer_param_set') }}</el-checkbox>
     </el-row>
     <el-row v-loading="loading">
       <el-row class="preview">
-        <el-col :span="8" style="height:100%;overflow-y: auto">
+        <el-col :span="8" style="height:100%;overflow-y: hidden">
           <el-row class="tree-head">
-            <span style="float: left;margin-left: 30px">{{ $t('panel.column_name') }}</span>
-            <span style="float: right;margin-right: 10px">{{ $t('panel.enable_column') }}</span>
+            <span style="float: left;margin-left: 30px">{{ $t('panel.param_name') }}</span>
+            <span style="float: right;margin-right: 10px">{{ $t('panel.enable_param') }}</span>
           </el-row>
+          <el-row class="tree-content">
             <el-tree
               ref="outerParamsInfoTree"
               :data="outerParamsInfoArray"
-            node-key="paramsInfoId"
+              node-key="id"
               highlight-current
               :props="treeProp"
               @node-click="nodeClick"
             >
               <span slot-scope="{ node, data }" class="custom-tree-node">
                 <span>
-                <span style="margin-left: 6px"><el-input v-model="data.paramName" size="mini" :placeholder="$t('fu.search_bar.please_select')" /></span>
+                  <span style="margin-left: 6px"><el-input
+                    v-model="data.paramName"
+                    size="mini"
+                    :placeholder="$t('panel.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)" />
+                      <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>
             </el-tree>
-          <el-row class="bottom">
-            <el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsInfo">添加参数</el-button>
+          </el-row>
+          <el-row class="tree-bottom">
+            <el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsInfo">{{ $t('panel.add_param') }}</el-button>
           </el-row>
         </el-col>
         <el-col :span="16" class="preview-show">
           <el-row v-if="outerParamsInfo">
-            <el-row style="margin-top: 10px;height: 30px;">
-              <el-col :span="4" style="margin-left: 20px">
-                {{ $t('panel.link_type') }}：
-              </el-col>
-              <el-col :span="10">
-                <el-radio-group v-model="outerParamsInfo.linkType" size="mini">
-                  <el-radio label="outer">{{ $t('panel.link_outer') }}</el-radio>
-                  <el-radio label="inner">{{ $t('panel.link_panel') }}</el-radio>
-                </el-radio-group>
-              </el-col>
-              <el-col v-if="outerParamsInfo.linkType==='inner'" :span="9">
-                <treeselect
-                  v-model="outerParamsInfo.targetPanelId"
-                  :options="panelList"
-                  :disable-branch-nodes="true"
-                  :normalizer="normalizer"
-                  :placeholder="$t('panel.select_jump_panel')"
-                  :no-children-text="$t('commons.treeselect.no_children_text')"
-                  :no-options-text="$t('commons.treeselect.no_options_text')"
-                  :no-results-text="$t('commons.treeselect.no_results_text')"
-                  style="margin-right: 10px"
-                  @select="panelNodeClick"
-                  @input="inputVal"
-                />
-              </el-col>
-            </el-row>
-            <el-row style="margin-top: 10px;height: 30px">
-              <el-col :span="4" style="margin-left: 20px">
-                {{ $t('panel.open_model') }}：
-              </el-col>
-              <el-col :span="10">
-                <el-radio-group v-model="outerParamsInfo.jumpType" size="mini">
-                  <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
-                  <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
-                </el-radio-group>
-              </el-col>
-            </el-row>
-            <el-row v-if="outerParamsInfo.linkType==='inner'" style="margin-top: 5px;" class="top_border">
+            <el-row class="top_border">
               <el-row style="margin-top: 10px">
                 <el-col :span="11">
                   <div class="ellip">{{ $t('panel.link_view') }}</div>
@@ -86,11 +64,17 @@
                   <div class="ellip">{{ $t('panel.link_view_field') }}</div>
                 </el-col>
               </el-row>
-              <el-row style="height: 180px;overflow-y: auto">
+              <el-row style="height: 266px;overflow-y: auto">
                 <el-row v-for="(targetViewInfo,index) in outerParamsInfo.targetViewInfoList" :key="index">
                   <el-col :span="11">
                     <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetViewId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')" @change="viewInfoOnChange(targetViewInfo)">
+                      <el-select
+                        v-model="targetViewInfo.targetViewId"
+                        style="width: 100%"
+                        size="mini"
+                        :placeholder="$t('fu.search_bar.please_select')"
+                        @change="viewInfoOnChange(targetViewInfo)"
+                      >
                         <el-option
                           v-for="item in currentLinkPanelViewArray"
                           :key="item.id"
@@ -107,7 +91,12 @@
                   </el-col>
                   <el-col :span="11">
                     <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetFieldId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')">
+                      <el-select
+                        v-model="targetViewInfo.targetFieldId"
+                        style="width: 100%"
+                        size="mini"
+                        :placeholder="$t('fu.search_bar.please_select')"
+                      >
                         <el-option
                           v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                           :key="viewField.id"
@@ -117,8 +106,16 @@
                           <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.value === 3" icon-class="field_value" class="field-icon-value" />
-                            <svg-icon v-if="viewField.deType === 5" icon-class="field_location" class="field-icon-location" />
+                            <svg-icon
+                              v-if="viewField.deType === 2 || viewField.value === 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>
@@ -127,14 +124,22 @@
                   </el-col>
                   <el-col :span="2">
                     <div>
-                      <el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteOuterParamsField(index)" />
+                      <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('panel.add_jump_field') }}</el-button>
+                <el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsField">{{
+                  $t('panel.add_param_link_field') }}
+                </el-button>
               </el-row>
 
               <!--    <el-button slot="reference">T</el-button>-->
@@ -150,7 +155,7 @@
             </el-row>
           </el-row>
           <el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
-            {{ $t('panel.select_dimension') }}
+            {{ $t('panel.select_param') }}
           </el-row>
         </el-col>
       </el-row>
@@ -167,10 +172,11 @@ import { detailList } from '@/api/panel/panelView'
 import { mapState } from 'vuex'
 import { queryWithPanelId, updateOuterParamsSet } from '@/api/panel/outerParams'
 import { uuid } from 'vue-uuid'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'OuterParamsSet',
-  components: { },
+  components: {},
   data() {
     return {
       loading: false,
@@ -196,7 +202,7 @@ export default {
       outerParamsInfo: null,
       currentFiledTreeNode: null,
       defaultOuterParamsInfo: {
-        paramName: '测试',
+        paramName: '',
         checked: false,
         targetViewInfoList: []
       },
@@ -218,9 +224,7 @@ export default {
       'canvasStyleData'
     ])
   },
-  watch: {
-
-  },
+  watch: {},
   created() {
   },
   mounted() {
@@ -247,6 +251,8 @@ export default {
           })
         }
       })
+
+      this.getPanelViewList(this.panelInfo.id)
     },
     handleExceed(file) {
     },
@@ -260,22 +266,11 @@ export default {
           type: 'success',
           showClose: true
         })
+        this.cancel()
       })
     },
     nodeClick(data, node) {
       this.outerParamsInfo = this.mapOuterParamsInfoArray[data.paramsInfoId]
-      if (!this.outerParamsInfo.linkType) {
-        this.outerParamsInfo.linkType = 'inner'
-      }
-      if (!this.outerParamsInfo.jumpType) {
-        this.outerParamsInfo.jumpType = '_blank'
-      }
-      if (!this.outerParamsInfo.content) {
-        this.outerParamsInfo.content = 'http://'
-      }
-      if (this.outerParamsInfo.targetPanelId) {
-        this.getPanelViewList(this.outerParamsInfo.targetPanelId)
-      }
     },
     // 获取当前视图字段 关联仪表板的视图信息列表
     getPanelViewList(panelId) {
@@ -326,14 +321,10 @@ export default {
       })
     },
     addOuterParamsInfo() {
-      this.outerParamsInfoArray.push(
-        {
-          paramsInfoId: uuid.v1,
-          paramName: '',
-          checked: false,
-          targetViewInfoList: []
-        }
-      )
+      const outerParamsInfo = deepCopy(this.defaultOuterParamsInfo)
+      outerParamsInfo['paramsInfoId'] = uuid.v1()
+      this.outerParamsInfoArray.push(outerParamsInfo)
+      this.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
     },
     removeOuterParamsInfo(node, data) {
       const parent = node.parent
@@ -347,56 +338,57 @@ export default {
 
 <style scoped>
 
-.my_table >>> .el-table__row>td{
+  .my_table >>> .el-table__row > td {
     /* 去除表格线 */
     border: none;
     padding: 0 0;
-}
-.my_table >>> .el-table th.is-leaf {
+  }
+
+  .my_table >>> .el-table th.is-leaf {
     /* 去除上边框 */
     border: none;
-}
-.my_table >>> .el-table::before{
+  }
+
+  .my_table >>> .el-table::before {
     /* 去除下边框 */
     height: 0;
-}
+  }
 
   .root-class {
     margin: 15px 0px 5px;
     text-align: center;
   }
+
   .preview {
     margin-top: 5px;
-    border:1px solid #E6E6E6;
-    height:350px !important;
-    overflow:hidden;
+    border: 1px solid #E6E6E6;
+    height: 350px !important;
+    overflow: hidden;
     background-size: 100% 100% !important;
   }
+
   .preview-show {
-    border-left:1px solid #E6E6E6;
-    height:350px;
+    border-left: 1px solid #E6E6E6;
+    height: 350px;
     background-size: 100% 100% !important;
   }
-.top_border {
-  border-top:1px solid #E6E6E6;
-}
 
-.slot-class{
+  .slot-class {
     color: white;
-}
+  }
 
-.bottom {
+  .bottom {
     margin-top: 20px;
     text-align: center;
+  }
 
-}
-.ellip{
+  .ellip {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-  overflow: hidden;/*超出部分隐藏*/
-  white-space: nowrap;/*不换行*/
-  text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     text-align: center;
     background-color: #f7f8fa;
     color: #3d4d66;
@@ -404,26 +396,28 @@ export default {
     line-height: 24px;
     height: 24px;
     border-radius: 3px;
-}
+  }
 
-.select-filed{
+  .select-filed {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-  overflow: hidden;/*超出部分隐藏*/
-  white-space: nowrap;/*不换行*/
-  text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     color: #3d4d66;
     font-size: 12px;
     line-height: 35px;
     height: 35px;
     border-radius: 3px;
-}
->>>.el-popover{
+  }
+
+  >>> .el-popover {
     height: 200px;
     overflow: auto;
-}
-.custom-position {
+  }
+
+  .custom-position {
     flex: 1;
     display: flex;
     align-items: center;
@@ -431,49 +425,66 @@ export default {
     font-size: 14px;
     flex-flow: row nowrap;
     color: #9ea6b2;
-}
-.tree-style {
+  }
+
+  .tree-style {
     padding: 10px 15px;
     height: 100%;
     overflow-y: auto;
-}
-/deep/ .vue-treeselect__control{
+  }
+
+  /deep/ .vue-treeselect__control {
     height: 28px;
-}
-/deep/ .vue-treeselect__single-value{
-  color:#606266;
-  line-height: 28px!important;
-}
+  }
 
-.custom-tree-node {
+  /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{
+  }
+
+  .auth-span {
     float: right;
-  width:40px;
+    width: 40px;
     margin-right: 5px
-}
-.tree-head{
+  }
+
+  .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) ;
-}
-/deep/ .vue-treeselect__placeholder{
-    line-height:28px
+    color: var(--TableColor, #3d4d66);
+  }
+
+  .tree-content {
+    height: calc(100% - 70px);
+    overflow-y: auto;
   }
 
-/deep/ .el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {
+  .tree-bottom {
+    margin-top: 12px;
+    text-align: center;
+  }
+
+  /deep/ .vue-treeselect__placeholder {
+    line-height: 28px
+  }
+
+  /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
     background-color: #8dbbef !important;
-}
-/deep/ .el-input__inner{
+  }
+
+  .tree-content ::v-deep .el-input__inner {
     background: transparent;
-  border:0px!important;
-}
+    border: 0px !important;
+  }
 </style>

frontend/src/views/panel/edit/index.vue

@@ -322,7 +322,7 @@
       :destroy-on-close="true"
       :append-to-body="true"
     >
-      <OuterParamsSet v-if="outerParamsSetVisible" @closeOuterParamsSetDialog="closeOuterParamsSetDialog" />
+      <OuterParamsSet v-if="outerParamsSetVisible" @outerParamsSetVisibleChange="outerParamsSetVisibleChange" />
     </el-dialog>
 
   </el-row>
@@ -612,7 +612,7 @@ export default {
     elx && elx.remove()
   },
   methods: {
-    closeOuterParamsSetDialog(){
+    closeOuterParamsSetDialog() {
       this.outerParamsSetVisible = false
     },
     changeRightDrawOpen(param) {