Merge pull request #2660 from dataease/pr@dev@feat_panel-jump

feat(仪表板): 仪表板跳转外部链接时支持自定义参数设置，优化S2表格跳转逻辑支持点击时获取整行数据信息
2022-07-22 10:41:36 +08:00 · 2022-07-22 10:41:36 +08:00 · 45a72fb89d
commit 45a72fb89d
parent bfacd16d08 44b56f759f
8 changed files with 378 additions and 80 deletions
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -625,14 +625,24 @@ export default {
    },

    jumpClick(param) {
-      let dimension, jumpInfo, sourceInfo, jumpFieldName
-      // 倒序取最后一个能匹配的
-      for (let i = param.dimensionList.length - 1; i >= 0; i--) {
-        dimension = param.dimensionList[i]
-        sourceInfo = param.viewId + '#' + dimension.id
-        jumpInfo = this.nowPanelJumpInfo[sourceInfo]
-        if (jumpInfo) {
-          break
+      let dimension, jumpInfo, sourceInfo
+      // 如果有名称name 获取和name匹配的dimension 否则倒序取最后一个能匹配的
+      if (param.name) {
+        param.dimensionList.forEach(dimensionItem => {
+          if (dimensionItem.value === param.name) {
+            dimension = dimensionItem
+            sourceInfo = param.viewId + '#' + dimension.id
+            jumpInfo = this.nowPanelJumpInfo[sourceInfo]
+          }
+        })
+      } else {
+        for (let i = param.dimensionList.length - 1; i >= 0; i--) {
+          dimension = param.dimensionList[i]
+          sourceInfo = param.viewId + '#' + dimension.id
+          jumpInfo = this.nowPanelJumpInfo[sourceInfo]
+          if (jumpInfo) {
+            break
+          }
        }
      }
      if (jumpInfo) {
@ -667,21 +677,8 @@ export default {
            })
          }
        } else {
-          let url = jumpInfo.content
-          // 是否追加点击参数
-          if (jumpInfo.attachParams && this.chart.data && this.chart.data.sourceFields) {
-            this.chart.data.sourceFields.forEach(item => {
-              if (item.id === dimension.id) {
-                jumpFieldName = item.name
-              }
-            })
-            const urlAttachParams = jumpFieldName + '=' + dimension.value
-            if (url.indexOf('?') > -1) {
-              url = url + '&' + urlAttachParams
-            } else {
-              url = url + '?' + urlAttachParams
-            }
-          }
+          const colList = [...param.dimensionList, ...param.quotaList]
+          const url = this.setIdValueTrans('id', 'value', jumpInfo.content, colList)
          window.open(url, jumpInfo.jumpType)
        }
      } else {
@ -692,6 +689,24 @@ export default {
        })
      }
    },
+    setIdValueTrans(from, to, content, colList) {
+      if (!content) {
+        return content
+      }
+      let name2Id = content
+      const nameIdMap = colList.reduce((pre, next) => {
+        pre[next[from]] = next[to]
+        return pre
+      }, {})
+      const on = content.match(/\[(.+?)\]/g)
+      if (on) {
+        on.forEach(itm => {
+          const ele = itm.slice(1, -1)
+          name2Id = name2Id.replace(itm, nameIdMap[ele])
+        })
+      }
+      return name2Id
+    },

    resetDrill() {
      const length = this.drillClickDimensionList.length
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1546,6 +1546,9 @@ export default {
    sure_bt: 'Confirm'
  },
  panel: {
+    target_url: 'Target Url',
+    target_url_tips: 'You can click fields to splice URLs or parameters',
+    select_world: 'Select World',
    template_market: 'Template Market',
    template_preview: 'Template Preview',
    apply: 'Apply',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1546,6 +1546,9 @@ export default {
    sure_bt: '確定'
  },
  panel: {
+    target_url: '目标URL',
+    target_url_tips: '可以点击字段用来拼接URL或者参数',
+    select_world: '点击选择字段',
    template_market: '模板市场',
    template_preview: '预览模板',
    apply: '应用',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1554,6 +1554,9 @@ export default {
    sure_bt: '确定'
  },
  panel: {
+    target_url: '目标URL',
+    target_url_tips: '可以点击字段用来拼接URL或者参数',
+    select_world: '点击选择字段',
    template_market: '模板市场',
    template_preview: '预览模板',
    apply: '应用',
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -332,18 +332,23 @@ export default {
        }
        return
      }
+      const quotaList = this.pointParam.data.quotaList
+      quotaList[0]['value'] = this.pointParam.data.value
      const linkageParam = {
        option: 'linkage',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
-        quotaList: this.pointParam.data.quotaList
+        quotaList: quotaList
      }
      const jumpParam = {
        option: 'jump',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
-        quotaList: this.pointParam.data.quotaList
+        quotaList: quotaList
      }
+      jumpParam.quotaList[0]['value'] = this.pointParam.data.value
      switch (trackAction) {
        case 'drill':
          this.$emit('onChartClick', this.pointParam)
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@ -271,17 +271,21 @@ export default {
        }
        return
      }
+      const quotaList = this.pointParam.data.quotaList
+      quotaList[0]['value'] = this.pointParam.data.value
      const linkageParam = {
        option: 'linkage',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
-        quotaList: this.pointParam.data.quotaList
+        quotaList: quotaList
      }
      const jumpParam = {
        option: 'jump',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
-        quotaList: this.pointParam.data.quotaList
+        quotaList: quotaList
      }

      switch (trackAction) {
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@ -221,38 +221,20 @@ export default {
    antVAction(param) {
      const cell = this.myChart.getCell(param.target)
      const meta = cell.getMeta()
-
-      let xAxis = []
-      if (this.chart.xaxis) {
-        xAxis = JSON.parse(this.chart.xaxis)
-      }
-      let drillFields = []
-      if (this.chart.drillFields) {
-        try {
-          drillFields = JSON.parse(this.chart.drillFields)
-        } catch (err) {
-          drillFields = JSON.parse(JSON.stringify(this.chart.drillFields))
-        }
-      }
-
-      let field = {}
-      if (this.chart.drill) {
-        field = drillFields[this.chart.drillFilters.length]
-        // check click field is drill?
-        if (field.dataeaseName !== meta.valueField) {
-          return
-        }
-      } else {
-        if (meta.colIndex < xAxis.length) {
-          field = xAxis[meta.colIndex]
-        }
-      }
-
+      const nameIdMap = this.chart.data.fields.reduce((pre, next) => {
+        pre[next['dataeaseName']] = next['id']
+        return pre
+      }, {})
+      const rowData = this.chart.data.tableRow[meta.rowIndex]
      const dimensionList = []
-      dimensionList.push({ id: field.id, value: meta.fieldValue })
+      for (const key in rowData) {
+        dimensionList.push({ id: nameIdMap[key], value: rowData[key] })
+      }
      this.pointParam = {
        data: {
-          dimensionList: dimensionList
+          dimensionList: dimensionList,
+          quotaList: [],
+          name: meta.fieldValue
        }
      }

@ -291,12 +273,14 @@ export default {
      }
      const linkageParam = {
        option: 'linkage',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
        quotaList: this.pointParam.data.quotaList
      }
      const jumpParam = {
        option: 'jump',
+        name: this.pointParam.data.name,
        viewId: this.chart.id,
        dimensionList: this.pointParam.data.dimensionList,
        quotaList: this.pointParam.data.quotaList
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@ -71,9 +71,6 @@
                  <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
                </el-radio-group>
              </el-col>
-              <el-col v-if="linkJumpInfo.linkType==='outer'" :span="9">
-                <el-checkbox v-model="linkJumpInfo.attachParams">附加点击参数</el-checkbox>
-              </el-col>
            </el-row>
            <el-row v-if="linkJumpInfo.linkType==='inner'" style="margin-top: 5px;" class="top_border">
              <el-row style="margin-top: 10px">
@ -137,17 +134,87 @@
              <el-row class="bottom">
                <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>-->
              <i slot="reference" class="icon iconfont icon-edit slot-class" />
            </el-row>
-            <el-row v-if="linkJumpInfo.linkType==='outer'" style="height: 300px">
-              <el-input
-                v-model="linkJumpInfo.content"
-                :autosize="{ minRows: 14}"
-                type="textarea"
-                :placeholder="$t('panel.input_jump_link')"
-              />
+            <el-row v-if="linkJumpInfo.linkType==='outer'" style="border-top: 1px solid #E6E6E6;padding:14px">
+              <el-row style="height: 230px;border: 1px solid #E6E6E6">
+                <el-col :span="18" style="height: 100%">
+                  <el-row>
+                    <span>
+                      {{$t(panel.target_url)}}
+                      <el-tooltip class="item" effect="dark" placement="bottom">
+                        <div slot="content">
+                          {{$t(panel.target_url_tips)}}
+                        </div>
+                        <i class="el-icon-info" style="cursor: pointer;" />
+                      </el-tooltip>
+                    </span>
+                    <codemirror
+                      ref="myCm"
+                      v-model="linkJumpInfo.content"
+                      class="codemirror"
+                      :options="cmOption"
+                      @ready="onCmReady"
+                      @focus="onCmFocus"
+                      @input="onCmCodeChange"
+                    />
+                  </el-row>
+                </el-col>
+                <el-col :span="6" style="height: 100%;border-left: 1px solid #E6E6E6;">
+                  <el-col :span="24" style="height: 100%" class="padding-lr">
+                    <span>
+                       {{$t(panel.select_world)}}
+                      <el-tooltip class="item" effect="dark" placement="bottom">
+                        <div slot="content">
+                          引用字段以 "[" 开始， "]" 结束
+                          <br>
+                          请勿修改引用内容，否则将引用失败
+                          <br>
+                          若输入与引用字段相同格式的内容，将被当作引用字段处理
+                        </div>
+                        <i class="el-icon-info" style="cursor: pointer;" />
+                      </el-tooltip>
+                    </span>
+                    <el-input
+                      v-model="searchField"
+                      size="mini"
+                      :placeholder="$t('dataset.search')"
+                      prefix-icon="el-icon-search"
+                      clearable
+                    />
+                    <div class="field-height">
+                      <el-divider />
+                      <draggable
+                        v-model="linkJumpInfoArray"
+                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
+                        animation="300"
+                        class="drag-list"
+                        :disabled="true"
+                      >
+                        <transition-group>
+                          <span
+                            v-for="item in linkJumpInfoArray"
+                            :key="item.sourceFieldId"
+                            class="item-dimension"
+                            :title="item.sourceFieldName"
+                            @click="insertFieldToCodeMirror('['+item.sourceFieldName+']')"
+                          >
+                            <svg-icon v-if="item.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
+                            <svg-icon v-if="item.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                            <svg-icon
+                              v-if="item.deExtractType === 2 || item.deExtractType === 3"
+                              icon-class="field_value"
+                              class="field-icon-value"
+                            />
+                            <svg-icon v-if="item.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                            {{ item.sourceFieldName }}
+                          </span>
+                        </transition-group>
+                      </draggable>
+                    </div>
+                  </el-col>
+                </el-col>
+              </el-row>
            </el-row>
          </el-row>
          <el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
@ -168,11 +235,35 @@ import { queryPanelJumpInfo, queryWithViewId, updateJumpSet } from '@/api/panel/
 import { groupTree } from '@/api/panel/panel'
 import { detailList } from '@/api/panel/panelView'
 import { mapState } from 'vuex'
-import { deepCopy } from '@/components/canvas/utils/utils'
 import { checkAddHttp } from '@/utils/urlUtils'

+import draggable from 'vuedraggable'
+import { codemirror } from 'vue-codemirror'
+// 核心样式
+import 'codemirror/lib/codemirror.css'
+// 引入主题后还需要在 options 中指定主题才会生效
+import 'codemirror/theme/solarized.css'
+import 'codemirror/mode/sql/sql.js'
+// require active-line.js
+import 'codemirror/addon/selection/active-line.js'
+// closebrackets
+import 'codemirror/addon/edit/closebrackets.js'
+// keyMap
+import 'codemirror/mode/clike/clike.js'
+import 'codemirror/addon/edit/matchbrackets.js'
+import 'codemirror/addon/comment/comment.js'
+import 'codemirror/addon/dialog/dialog.js'
+import 'codemirror/addon/dialog/dialog.css'
+import 'codemirror/addon/search/searchcursor.js'
+import 'codemirror/addon/search/search.js'
+import 'codemirror/keymap/emacs.js'
+// 引入代码自动提示插件
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/sql-hint'
+import 'codemirror/addon/hint/show-hint'
+
 export default {
-  components: { },
+  components: { codemirror, draggable },
  props: {
    viewId: {
      type: String,
@ -181,6 +272,9 @@ export default {
  },
  data() {
    return {
+      name2Auto: [],
+      searchField: '',
+      searchFunction: '',
      loading: false,
      inputType: 'self',
      fieldName: 'name',
@ -198,7 +292,7 @@ export default {
        children: 'children'
      },
      linkJump: null,
-      linkJumpInfoArray: null,
+      linkJumpInfoArray: [],
      mapJumpInfoArray: {},
      panelList: [],
      linkJumpInfo: null,
@ -213,8 +307,18 @@ export default {
        targetFieldId: null
      },
      currentLinkPanelViewArray: [],
-      viewIdFieldArrayMap: {}
-
+      viewIdFieldArrayMap: {},
+      cmOption: {
+        tabSize: 2,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: 'text/x-sql',
+        theme: 'solarized',
+        hintOptions: { // 自定义提示选项
+          completeSingle: false // 当匹配只有一项的时候是否自动补全
+        }
+      }
    }
  },
  computed: {
@ -230,9 +334,13 @@ export default {
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
+    codemirror() {
+      return this.$refs.myCm.codemirror
+    },
    ...mapState([
      'componentData',
-      'canvasStyleData'
+      'canvasStyleData',
+      'panelViewDetailsInfo'
    ])
  },
  watch: {
@ -247,6 +355,8 @@ export default {
  },
  methods: {
    init() {
+      const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.viewId])
+      const checkStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
      // 获取可关联的仪表板
      groupTree({}).then(rsp => {
        this.panelList = rsp.data
@ -254,9 +364,15 @@ export default {
      // 获取当前视图的关联信息
      queryWithViewId(this.panelInfo.id, this.viewId).then(rsp => {
        this.linkJump = rsp.data
-        this.linkJumpInfoArray = this.linkJump.linkJumpInfoArray
+        this.linkJumpInfoArray = []
+        this.linkJump.linkJumpInfoArray.forEach(linkJumpInfo => {
+          if (checkStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
+            this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
+            this.linkJumpInfoArray.push(linkJumpInfo)
+          }
+        })
        this.linkJumpInfoArray.forEach(linkJumpInfo => {
-          this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
+          linkJumpInfo.content = this.setNameIdTrans('sourceFieldId', 'sourceFieldName', linkJumpInfo.content, this.name2Auto)
        })
        const firstNode = this.linkJumpInfoArray[0]
        this.$nextTick(() => {
@ -264,10 +380,6 @@ export default {
          this.nodeClick(firstNode)
        })
      })
-      // 获取当前视图的字段信息
-      // getTableFieldWithViewId(this.viewId).then(rsp => {
-      //   this.sourceViewFields = rsp.data
-      // })
    },
    handleExceed(file) {
    },
@ -276,6 +388,9 @@ export default {
    },
    save() {
      this.linkJumpInfo.content = checkAddHttp(this.linkJumpInfo.content)
+      this.linkJumpInfoArray.forEach(jumpInfo => {
+        jumpInfo.content = this.setNameIdTrans('sourceFieldName', 'sourceFieldId', jumpInfo.content)
+      })
      updateJumpSet(this.linkJump).then(rsp => {
        this.$message({
          message: '保存成功',
@ -306,6 +421,9 @@ export default {
      if (this.linkJumpInfo.targetPanelId) {
        this.getPanelViewList(this.linkJumpInfo.targetPanelId)
      }
+      setTimeout(() => {
+        this.matchToAuto()
+      }, 500)
    },
    // 获取当前视图字段 关联仪表板的视图信息列表
    getPanelViewList(panelId) {
@ -356,6 +474,53 @@ export default {
        this.$refs.linkJumpInfoTree.setCurrentKey(data.sourceFieldId)
        this.nodeClick(data)
      })
+    },
+    onCmReady(cm) {
+      this.codemirror.setSize('-webkit-fill-available', 'auto')
+    },
+    onCmFocus(cm) {
+    },
+    onCmCodeChange(newCode) {
+      // this.fieldForm.originName = newCode
+    },
+    insertFieldToCodeMirror(param) {
+      const pos1 = this.$refs.myCm.codemirror.getCursor()
+      const pos2 = {}
+      pos2.line = pos1.line
+      pos2.ch = pos1.ch
+      this.$refs.myCm.codemirror.replaceRange(param, pos2)
+      this.$refs.myCm.codemirror.markText(pos2, { line: pos2.line, ch: param.length + pos2.ch }, { atomic: true, selectRight: true })
+    },
+    matchToAuto() {
+      if (!this.name2Auto.length) return
+      this.name2Auto.forEach(ele => {
+        const search = this.$refs.myCm.codemirror.getSearchCursor(ele, { line: 0, ch: 0 })
+        if (search.find()) {
+          const { from, to } = search.pos
+          this.$refs.myCm.codemirror.markText({ line: from.line, ch: from.ch - 1 }, { line: to.line, ch: to.ch + 1 }, { atomic: true, selectRight: true })
+        }
+      })
+    },
+    setNameIdTrans(from, to, originName, name2Auto) {
+      if (!originName) {
+        return originName
+      }
+      let name2Id = originName
+      const nameIdMap = this.linkJumpInfoArray.reduce((pre, next) => {
+        pre[next[from]] = next[to]
+        return pre
+      }, {})
+      const on = originName.match(/\[(.+?)\]/g)
+      if (on) {
+        on.forEach(itm => {
+          const ele = itm.slice(1, -1)
+          if (name2Auto) {
+            name2Auto.push(nameIdMap[ele])
+          }
+          name2Id = name2Id.replace(ele, nameIdMap[ele])
+        })
+      }
+      return name2Id
    }
  }
 }
@ -488,4 +653,120 @@ export default {
 /deep/ .el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {
  background-color: #8dbbef !important;
 }
+.codemirror {
+  height: 190px;
+  overflow-y: auto;
+  font-size: 12px;
+}
+
+.codemirror >>> .CodeMirror-scroll {
+  height: 200px;
+  overflow-y: auto;
+  font-size: 12px;
+}
+
+.padding-lr {
+  padding: 0 4px;
+}
+
+.field-height {
+  height: calc(100% - 25px);
+  margin-top: 4px;
+}
+
+.drag-list {
+  height: calc(100% - 26px);
+  overflow: auto;
+}
+
+.item-dimension {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: #495865;
+  color: #F2F6FC;
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 2px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  /* color: var(--Main); */
+  background: var(--ContentBG);
+  /* cursor: pointer; */
+}
+
+.item-quota {
+  padding: 2px 10px;
+  margin: 2px 2px 0 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: block;
+  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-quota {
+
+  border: solid 1px;
+  border-color: #495865;
+  color: #F2F6FC;
+  background-color: var(--MainBG);
+
+}
+
+.item-quota + .item-quota {
+  margin-top: 2px;
+}
+
+.item-quota:hover {
+  color: #67c23a;
+  background: #f0f9eb;
+  border-color: #b2d3a3;
+  cursor: pointer;
+}
+
+.blackTheme .item-quota:hover {
+  background: var(--ContentBG);
+}
+
+span {
+  font-size: 12px;
+}
+
+.field-height ::v-deep .el-divider--horizontal{
+  margin: 2px 0!important;
+}
+
+::v-deep .CodeMirror {
+  height: 190px!important;
+}
+
 </style>