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

refactor:仪表板跳转优化，样式调整，国际化等
2021-10-29 12:54:43 +08:00 · 2021-10-29 12:54:43 +08:00 · ffb931edfc
commit ffb931edfc
parent e1d9cd3c23 5ce24a47b2
6 changed files with 98 additions and 41 deletions
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkJumpMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkJumpMapper.xml
@ -47,6 +47,8 @@
            AND panel_link_jump_info.link_jump_id = #{id}
        WHERE
            chart_view.id =#{source_view_id}
+        order by ifnull( panel_link_jump_info.checked, 0 ) desc
+
    </select>

    <select id="queryWithPanelId" resultMap="BaseResultMapDTO">
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -352,7 +352,7 @@ export default {
          if (jumpInfo.targetPanelId) {
            const url = '#/preview/' + jumpInfo.targetPanelId
            localStorage.setItem('jumpInfoParam', JSON.stringify(param))
-            window.open(url, '_blank')
+            window.open(url, jumpInfo.jumpType)
          } else {
            this.$message({
              type: 'warn',
@ -362,7 +362,7 @@ export default {
          }
        } else {
          const url = jumpInfo.content
-          window.open(url, '_blank')
+          window.open(url, jumpInfo.jumpType)
        }
      } else {
        this.$message({
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1341,7 +1341,25 @@ export default {
    new_window: 'New Window',
    now_window: 'Now Window',
    hyperLinks: 'hyperlinks',
-    link_open_tips: 'Open When Panel Not In Edit Status'
+    link_open_tips: 'Open When Panel Not In Edit Status',
+    data_loading: 'Data Loading...',
+    export_loading: 'Export Loading...',
+    export_pdf: 'Export PDF',
+    jump_set: 'Jump Set',
+    enable_jump: 'Enable Jump',
+    column_name: 'Column Name',
+    enable_column: 'Enable Column',
+    open_model: 'Open Model',
+    link_type: 'Link Type',
+    link_outer: 'Outer',
+    link_panel: 'panel',
+    select_jump_panel: 'Select Jump Panel',
+    link_view: 'Link View',
+    link_view_field: 'Link View Field',
+    add_jump_field: 'Add Jump Field',
+    input_jump_link: 'Input Jump Link',
+    select_dimension: 'Select Dimension...',
+    please_select: 'Please Select'
  },
  plugin: {
    local_install: 'Local installation',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1344,7 +1344,25 @@ export default {
    new_window: '新窗口',
    now_window: '当前窗口',
    hyperLinks: '超链接',
-    link_open_tips: '仪表板非编辑状态可打开链接'
+    link_open_tips: '仪表板非编辑状态可打开链接',
+    data_loading: '数据准备中...',
+    export_loading: '导出中...',
+    export_pdf: '导出PDF',
+    jump_set: '跳转设置',
+    enable_jump: '启用跳转',
+    column_name: '字段名称',
+    enable_column: '启用字段',
+    open_model: '打开方式',
+    link_type: '链接类型',
+    link_outer: '外部链接',
+    link_panel: '仪表板',
+    select_jump_panel: '选择关联的仪表板',
+    link_view: '联动视图',
+    link_view_field: '联动视图字段',
+    add_jump_field: '追加跳转联动依赖字段',
+    input_jump_link: '请输入跳转连接',
+    select_dimension: '请选择维度...',
+    please_select: '请选择'
  },
  plugin: {
    local_install: '本地安裝',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1350,13 +1350,28 @@ export default {
    subject_name_not_null: '主题名称需要1~20字符',
    is_enable: '是否启用',
    open_mode: '打开方式',
-    new_window: '新窗口',
-    now_window: '当前窗口',
+    new_window: '新开页面',
+    now_window: '当前页面',
    hyperLinks: '超链接',
    link_open_tips: '仪表板非编辑状态可打开链接',
    data_loading: '数据准备中...',
    export_loading: '导出中...',
-    export_pdf: '导出PDF'
+    export_pdf: '导出PDF',
+    jump_set: '跳转设置',
+    enable_jump: '启用跳转',
+    column_name: '字段名称',
+    enable_column: '启用字段',
+    open_model: '打开方式',
+    link_type: '链接类型',
+    link_outer: '外部链接',
+    link_panel: '仪表板',
+    select_jump_panel: '选择关联的仪表板',
+    link_view: '联动视图',
+    link_view_field: '联动视图字段',
+    add_jump_field: '追加跳转联动依赖字段',
+    input_jump_link: '请输入跳转连接',
+    select_dimension: '请选择维度...',
+    please_select: '请选择'
  },
  plugin: {
    local_install: '本地安装',
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@ -1,15 +1,15 @@
 <template>
  <el-row v-if="linkJump" v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: 430px">
    <el-row>
-      <span style="font-weight:600;margin-right: 20px">跳转设置</span>
-      <el-checkbox v-model="linkJump.checked">启用跳转</el-checkbox>
+      <span style="font-weight:600;margin-right: 20px">{{ $t('panel.jump_set') }}</span>
+      <el-checkbox v-model="linkJump.checked">{{ $t('panel.enable_jump') }}</el-checkbox>
    </el-row>
    <el-row v-loading="loading">
      <el-row class="preview">
        <el-col :span="8" style="height:100%;overflow-y: auto">
          <el-row class="tree-head">
-            <span style="float: left;margin-left: 30px">字段名称</span>
-            <span style="float: right;margin-right: 10px">启用字段</span>
+            <span style="float: left;margin-left: 30px">{{ $t('panel.column_name') }}</span>
+            <span style="float: right;margin-right: 10px">{{ $t('panel.enable_column') }}</span>
          </el-row>
          <el-tree
            ref="linkJumpInfoTree"
@ -35,34 +35,35 @@
        </el-col>
        <el-col :span="16" class="preview-show">
          <el-row v-if="linkJumpInfo">
-            <!--            <el-row style="margin-top: 10px">-->
-            <!--              <el-col :span="4" class="custom-position">-->
-            <!--                打开方式：-->
-            <!--              </el-col>-->
-            <!--              <el-col :span="10">-->
-            <!--                <el-radio-group v-model="linkJumpInfo.jumpType" size="mini">-->
-            <!--                  <el-radio label="self">当前页面</el-radio>-->
-            <!--                  <el-radio label="_blank">新开页面</el-radio>-->
-            <!--                </el-radio-group>-->
-            <!--              </el-col>-->
-            <!--            </el-row>-->
            <el-row style="margin-top: 10px">
-              <el-col :span="4">
-                链接类型：
+              <el-col :span="4" style="margin-left: 20px">
+                {{ $t('panel.open_model') }}：
+              </el-col>
+              <el-col :span="10">
+                <el-radio-group v-model="linkJumpInfo.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 style="margin-top: 10px">
+              <el-col :span="4" style="margin-left: 20px">
+                {{ $t('panel.link_type') }}：
              </el-col>
              <el-col :span="10">
                <el-radio-group v-model="linkJumpInfo.linkType" size="mini">
-                  <el-radio label="outer">外部链接</el-radio>
-                  <el-radio label="inner">仪表板</el-radio>
+                  <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="linkJumpInfo.linkType==='inner'" :span="10">
+              <el-col v-if="linkJumpInfo.linkType==='inner'" :span="9">
                <treeselect
                  v-model="linkJumpInfo.targetPanelId"
                  :options="panelList"
                  :disable-branch-nodes="true"
                  :normalizer="normalizer"
-                  :placeholder="'选择关联的仪表板'"
+                  :placeholder="$t('panel.select_jump_panel')"
+                  style="margin-right: 10px"
                  @select="panelNodeClick"
                />
              </el-col>
@ -70,17 +71,17 @@
            <el-row v-if="linkJumpInfo.linkType==='inner'" style="margin-top: 5px;" class="top_border">
              <el-row style="margin-top: 10px">
                <el-col :span="11">
-                  <div class="ellip">联动视图</div>
+                  <div class="ellip">{{ $t('panel.link_view') }}</div>
                </el-col>
                <el-col :span="11">
-                  <div class="ellip">联动视图字段</div>
+                  <div class="ellip">{{ $t('panel.link_view_field') }}</div>
                </el-col>
              </el-row>
              <el-row style="height: 180px;overflow-y: auto">
                <el-row v-for="(targetViewInfo,index) in linkJumpInfo.targetViewInfoList" :key="index">
                  <el-col :span="11">
                    <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetViewId" size="mini" placeholder="请选择" @change="viewInfoOnChange(targetViewInfo)">
+                      <el-select v-model="targetViewInfo.targetViewId" style="width: 100%" size="mini" :placeholder="$t('panel.please_select')" @change="viewInfoOnChange(targetViewInfo)">
                        <el-option
                          v-for="item in currentLinkPanelViewArray"
                          :key="item.id"
@ -94,7 +95,7 @@
                  </el-col>
                  <el-col :span="11">
                    <div class="select-filed">
-                      <el-select v-model="targetViewInfo.targetFieldId" size="mini" placeholder="请选择">
+                      <el-select v-model="targetViewInfo.targetFieldId" style="width: 100%" size="mini" :placeholder="$t('panel.please_select')">
                        <el-option
                          v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
                          :key="viewField.id"
@ -121,7 +122,7 @@
              </el-row>

              <el-row class="bottom">
-                <el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkJumpField">追加跳转联动依赖字段</el-button>
+                <el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkJumpField">{{ $t('panel.add_jump_field') }}</el-button>
              </el-row>

              <!--    <el-button slot="reference">T</el-button>-->
@ -132,12 +133,12 @@
                v-model="linkJumpInfo.content"
                :autosize="{ minRows: 14}"
                type="textarea"
-                placeholder="请输入跳转连接"
+                :placeholder="$t('panel.input_jump_link')"
              />
            </el-row>
          </el-row>
          <el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
-            请选择维度...
+            {{ $t('panel.select_dimension') }}
          </el-row>
        </el-col>
      </el-row>
@ -244,10 +245,10 @@ export default {
          this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
        })
        const firstNode = this.linkJumpInfoArray[0]
-        // this.$nextTick(() => {
-        //   this.$refs.linkJumpInfoTree.setCurrentKey(firstNode.sourceFieldId)
-        //   this.nodeClick(firstNode)
-        // })
+        this.$nextTick(() => {
+          this.$refs.linkJumpInfoTree.setCurrentKey(firstNode.sourceFieldId)
+          this.nodeClick(firstNode)
+        })
      })
      // 获取当前视图的字段信息
      // getTableFieldWithViewId(this.viewId).then(rsp => {
@ -279,7 +280,7 @@ export default {
        this.linkJumpInfo.linkType = 'inner'
      }
      if (!this.linkJumpInfo.jumpType) {
-        this.linkJumpInfo.jumpType = '_self'
+        this.linkJumpInfo.jumpType = '_blank'
      }
      if (!this.linkJumpInfo.content) {
        this.linkJumpInfo.content = 'http://'
@ -375,7 +376,7 @@ export default {
 .ellip{
  /*width: 100%;*/
  margin-left: 10px;
-  margin-right: 25px;
+  margin-right: 10px;
  overflow: hidden;/*超出部分隐藏*/
  white-space: nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出部分文字以...显示*/
@ -447,5 +448,8 @@ export default {
  font-size: 12px;
  color: var(--TableColor, #3d4d66) ;
 }
+/deep/ .vue-treeselect__placeholder{
+    line-height:28px
+  }

 </style>