Merge pull request #937 from dataease/pr@dev@feat_panel-hyperlinks

feat:增加支持文本超链接

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

@@ -0,0 +1,120 @@
+<template>
+
+  <el-popover
+    ref="popover"
+    width="340"
+    trigger="click"
+  >
+    <el-row>
+      <el-form ref="form" size="mini" label-width="70px">
+        <el-form-item :label="$t('panel.is_enable')">
+          <el-switch v-model="linkInfo.enable" size="mini" />
+          <span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
+            Tips:{{ $t('panel.link_open_tips') }}
+          </span>
+        </el-form-item>
+        <el-form-item :label="$t('panel.open_mode')">
+          <el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
+            <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
+            <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('panel.hyperLinks')">
+          <el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+  </el-popover>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
+export default {
+  props: {
+    linkInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      componentType: null,
+      linkageActiveStatus: false,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  methods: {
+    onSubmit() {
+      this.curComponent.hyperlinks = deepCopy(this.linkInfo)
+      this.popoverClose()
+    },
+    onClose() {
+      this.$emit('close')
+      this.popoverClose()
+    },
+    popoverClose() {
+      this.$refs.popover.showPopper = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    margin-top: 20px;
+    text-align: center;
+
+  }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+  >>>.el-popover{
+    height: 200px;
+    overflow: auto;
+  }
+
+</style>

frontend/src/components/canvas/components/TextAttr.vue

@@ -1,6 +1,6 @@
 <template>
   <el-card class="el-card-main" :style="mainStyle">
-    <div style="position: relative;">
+    <div id="main-attr" style="position: relative;">
       <div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
           <el-radio-button
@@ -76,13 +76,23 @@
           <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
+
+      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="超链接">
+          <Hyperlinks :link-info="this.curComponent.hyperlinks" />
+        </el-tooltip>
+      </div>
+
     </div>
   </el-card>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
+
 export default {
+  components: { Hyperlinks },
   props: {
     scrollLeft: {
       type: Number,
@@ -96,6 +106,7 @@ export default {
   data() {
     return {
       innerOpacity: 0,
+      mainWidthOffset: 600,
       textAlignOptions: [
         {
           icon: 'iconfont icon-juzuo',
@@ -125,6 +136,8 @@ export default {
     if (this.styleInfo['opacity']) {
       this.innerOpacity = this.styleInfo['opacity'] * 100
     }
+    this.mainWidthOffset = document.getElementById('main-attr').offsetWidth - 50
+    // console.log('mainWidthOffset:' + this.mainWidthOffset)
   },
   computed: {
     letterDivColor() {
@@ -181,7 +194,7 @@ export default {
         ps = x + 60
       }
       // 防止toolbar超出边界
-      const xGap = ps + 565 - this.canvasWidth
+      const xGap = ps + this.mainWidthOffset - this.canvasWidth
       // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
       if (xGap > 0) {
         return ps - xGap
@@ -213,7 +226,6 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 10;
-    width: 620px;
     position: absolute;
 
   }

frontend/src/components/canvas/custom-component/VText.vue

@@ -18,7 +18,7 @@
     <div v-if="!canEdit" :style="{ verticalAlign: element.style.verticalAlign }" @dblclick="setEdit" v-html="element.propValue" />
   </div>
   <div v-else class="v-text">
-    <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="element.propValue" />
+    <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="textInfo" />
   </div>
 </template>
 
@@ -56,6 +56,13 @@ export default {
     }
   },
   computed: {
+    textInfo() {
+      if (this.element && this.element.hyperlinks && this.element.hyperlinks.enable) {
+        return "<a target='" + this.element.hyperlinks.openMode + "' href='" + this.element.hyperlinks.content + "'>" + this.element.propValue + '</a>'
+      } else {
+        return this.element.propValue
+      }
+    }
   },
 
   watch: {
@@ -123,9 +130,9 @@ export default {
     selectText(element) {
       const selection = window.getSelection()
       const range = document.createRange()
-      range.selectNodeContents(element)
-      selection.removeAllRanges()
-      selection.addRange(range)
+      // range.selectNodeContents(element)
+      // selection.removeAllRanges()
+      // selection.addRange(range)
     },
 
     removeSelectText() {

frontend/src/components/canvas/custom-component/component-list.js

@@ -11,6 +11,13 @@ export const commonAttr = {
   isLock: false // 是否锁定组件
 }
 
+// 超链接配置
+export const HYPERLINKS = {
+  openMode: '_blank',
+  enable: false,
+  content: 'http://'
+}
+
 export const assistList = [
   {
     id: '10001',
@@ -71,6 +78,7 @@ const list = [
       backgroundColor: '#ffffff',
       borderRadius: 0
     },
+    hyperlinks: HYPERLINKS,
     x: 1,
     y: 1,
     sizex: 10,

frontend/src/lang/en.js

@@ -1319,7 +1319,13 @@ export default {
     suspension: 'suspension',
     new_element_distribution: 'New element Distribution',
     subject_no_edit: 'System Subject Can Not Edit',
-    subject_name_not_null: 'Subject Name Can Not Be Null And Less Than 20 charts'
+    subject_name_not_null: 'Subject Name Can Not Be Null And Less Than 20 charts',
+    is_enable: 'Enable',
+    open_mode: 'Open Model',
+    new_window: 'New Window',
+    now_window: 'Now Window',
+    hyperLinks: 'hyperlinks',
+    link_open_tips: 'Open When Panel Not In Edit Status'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1322,7 +1322,13 @@ export default {
     suspension: '悬浮',
     new_element_distribution: '当前元素移入分布方式',
     subject_no_edit: '系统主题不能修改',
-    subject_name_not_null: '主题名称需要1~20字符'
+    subject_name_not_null: '主题名称需要1~20字符',
+    is_enable: '是否启用',
+    open_mode: '打开方式',
+    new_window: '新窗口',
+    now_window: '当前窗口',
+    hyperLinks: '超链接',
+    link_open_tips: '仪表板非编辑状态可打开链接'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1327,7 +1327,13 @@ export default {
     suspension: '悬浮',
     new_element_distribution: '当前元素移入分布方式',
     subject_no_edit: '系统主题不能修改',
-    subject_name_not_null: '主题名称需要1~20字符'
+    subject_name_not_null: '主题名称需要1~20字符',
+    is_enable: '是否启用',
+    open_mode: '打开方式',
+    new_window: '新窗口',
+    now_window: '当前窗口',
+    hyperLinks: '超链接',
+    link_open_tips: '仪表板非编辑状态可打开链接'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1633678290478') format('woff2'),
-       url('iconfont.woff?t=1633678290478') format('woff'),
-       url('iconfont.ttf?t=1633678290478') format('truetype');
+  src: url('iconfont.woff2?t=1634191971474') format('woff2'),
+       url('iconfont.woff?t=1634191971474') format('woff'),
+       url('iconfont.ttf?t=1634191971474') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-chaolianjie:before {
+  content: "\e9b2";
+}
+
+.icon-kexuejishu:before {
+  content: "\e60f";
+}
+
 .icon-shujujuzhen:before {
   content: "\e69c";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "3229030",
+      "name": "超链接",
+      "font_class": "chaolianjie",
+      "unicode": "e9b2",
+      "unicode_decimal": 59826
+    },
+    {
+      "icon_id": "23880814",
+      "name": "科学技术",
+      "font_class": "kexuejishu",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
     {
       "icon_id": "1766500",
       "name": "符号-数据矩阵",