feat:组件增加设置超链接功能

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

@@ -29,6 +29,11 @@
       <span :title="$t('panel.switch_picture')">
         <i v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'" class="icon iconfont icon-genghuan" @click.stop="goFile" />
       </span>
+      <span :title="$t('panel.jump')">
+        <a v-if="showJumpFlag" :title="curComponent.hyperlinks.content " :target="curComponent.hyperlinks.openMode " :href="curComponent.hyperlinks.content ">
+          <i class="icon iconfont icon-com-jump" />
+        </a>
+      </span>
     </div>
   </div>
 </template>
@@ -39,9 +44,10 @@ import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 import LinkageField from '@/components/canvas/components/Editor/LinkageField'
 import toast from '@/components/canvas/utils/toast'
+import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 
 export default {
-  components: { SettingMenu, LinkageField },
+  components: { Hyperlinks, SettingMenu, LinkageField },
 
   props: {
     element: {
@@ -78,6 +84,9 @@ export default {
   mounted() {
   },
   computed: {
+    showJumpFlag() {
+      return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
+    },
     // 联动区域按钮显示
     linkageAreaShow() {
       return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
@@ -147,6 +156,10 @@ export default {
     showViewDetails() {
       this.$emit('showViewDetails')
     },
+    componentJump() {
+      window.open(url, '_blank')
+      // this.$emit('showViewDetails')
+    },
     auxiliaryMatrixChange() {
       if (this.curComponent.auxiliaryMatrix) {
         this.curComponent.auxiliaryMatrix = false

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

@@ -28,7 +28,7 @@
         </el-form-item>
       </el-form>
     </el-row>
-    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+    <i slot="reference" class="icon iconfont icon-font icon-chaolianjie1" />
   </el-popover>
 </template>
 
@@ -119,5 +119,8 @@ export default {
     height: 200px;
     overflow: auto;
   }
+  .icon-font{
+    color: white;
+  }
 
 </style>

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

+<template>
+  <el-row>
+    <el-form ref="form" size="mini" label-width="70px">
+      <el-form-item :label="$t('panel.enable_jump')">
+        <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>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { checkAddHttp } from '@/utils/urlUtils'
+
+export default {
+  props: {
+    linkInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      componentType: null,
+      linkageActiveStatus: false
+    }
+  },
+  mounted() {
+    this.linkInfo = { ...this.linkInfo }
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  methods: {
+    onSubmit() {
+      this.linkInfo.content = checkAddHttp(this.linkInfo.content)
+      this.curComponent.hyperlinks = deepCopy(this.linkInfo)
+      this.$store.state.styleChangeTimes++
+      this.onClose()
+    },
+    onClose() {
+      this.$emit('onClose')
+    }
+  }
+}
+</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;
+  }
+  .icon-font{
+    color: white;
+  }
+
+</style>

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

@@ -15,21 +15,40 @@
           <el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
           <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
           <el-dropdown-item icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="hyperlinksSet">
+            <i class="icon iconfont icon-font icon-chaolianjie1" />
+            {{ $t('panel.hyperlinks') }}
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <!--视图详情-->
+    <el-dialog
+      :visible.sync="hyperlinksSetVisible"
+      width="400px"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :show-close="true"
+    >
+      <HyperlinksDialog v-if="hyperlinksSetVisible" :link-info="curComponent.hyperlinks" @onClose="hyperlinksSetVisible = false" />
+    </el-dialog>
   </div>
+
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { getViewLinkageGather } from '@/api/panel/linkage'
+import HyperlinksDialog from '@/components/canvas/components/Editor/HyperlinksDialog'
 
 export default {
+  components: { HyperlinksDialog },
   data() {
     return {
       copyData: null,
+      hyperlinksSetVisible: false,
       editFilter: [
         'view',
         'custom'
@@ -139,6 +158,10 @@ export default {
     // 设置边框
     boardSet() {
       this.$emit('boardSet')
+    },
+    // 超链接设置
+    hyperlinksSet() {
+      this.hyperlinksSetVisible = true
     }
   }
 }

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

@@ -379,6 +379,7 @@ export default {
       this.canvasStyleData.auxiliaryMatrix = !this.canvasStyleData.auxiliaryMatrix
     },
     showGridChange() {
+      this.$store.state.styleChangeTimes++
       this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
     },
     // 启用移动端布局

frontend/src/components/canvas/utils/utils.js

@@ -100,9 +100,7 @@ export function panelInit(componentData, componentStyle) {
     item.sizey = (item.sizey || 5)
     item.mobileSelected = (item.mobileSelected || false)
     item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
-    if (item.type === 'picture-add') {
-      item.hyperlinks = (item.hyperlinks || HYPERLINKS)
-    }
+    item.hyperlinks = (item.hyperlinks || deepCopy(HYPERLINKS))
     item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
   })
   // 将data 和 style 数据设置到全局store中

frontend/src/lang/en.js

@@ -1417,6 +1417,7 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    hyperlinks: 'Hyperlinks',
     is_live: 'Is Live',
     yes: 'Yes',
     no: 'No',

frontend/src/lang/tw.js

@@ -413,8 +413,8 @@ export default {
   detabs: {
     eidttitle: '編輯標題',
     selectview: '選擇視圖',
-    selectOthers: '选择组件',
-    availableComponents: '可选组件'
+    selectOthers: '選擇組件',
+    availableComponents: '可選組件'
   },
   example: {
     warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基於 component name 來進行緩存的。如果妳想類似的實現緩存效果，可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'
@@ -658,7 +658,7 @@ export default {
     kettle_setting: 'Kettle 設置'
   },
   chart: {
-    title_repeat: '当前标题已存在',
+    title_repeat: '當前標題已存在',
     save_snapshot: '保存縮略圖',
     datalist: '視圖',
     add_group: '添加分組',
@@ -1418,30 +1418,31 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    hyperlinks: '超鏈接',
     is_live: '是否直播',
     yes: '是',
     no: '否',
-    live_tips: '优先HTTPS链接',
-    stream_media_add_tips: '请点击添加配置流媒体信息...',
-    json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
-    inner_padding: '内边距',
-    board_radio: '边框半径',
+    live_tips: '優先HTTPS鏈接',
+    stream_media_add_tips: '請點擊添加配置流媒體信息...',
+    json_params_error: '第三方參數解析失敗，請檢查參數格式是否正確',
+    inner_padding: '內邊距',
+    board_radio: '邊框半徑',
     background: '背景',
-    component_style: '组件样式',
-    web_set_tips: '部分网站可能设置不允许嵌入而无法显示',
-    repeat_params: '存在名称重复的参数',
-    enable_outer_param_set: '启用外部参数设置',
-    select_param: '请选择参数...',
-    add_param_link_field: '添加参数联动字段',
-    add_param: '添加参数',
-    enable_param: '启用参数',
-    param_name: '参数名称',
-    outer_param_set: '外部参数设置',
-    outer_param_decode_error: '外部参数解析错误未生效，请按规定编码方式传参',
-    input_param_name: '请输入参数名称',
-    params_setting: '外部参数设置',
-    template_view_tips: '当前是模板视图,请点击更换数据集',
-    edit_web_tips: '编辑状态不可操作网页内部',
+    component_style: '組件樣式',
+    web_set_tips: '部分網站可能設置不允許嵌入而無法顯示',
+    repeat_params: '存在名稱重復的參數',
+    enable_outer_param_set: '啟用外部參數設置',
+    select_param: '請選擇參數...',
+    add_param_link_field: '添加參數聯動字段',
+    add_param: '添加參數',
+    enable_param: '啟用參數',
+    param_name: '參數名稱',
+    outer_param_set: '外部參數設置',
+    outer_param_decode_error: '外部參數解析錯誤未生效，請按規定編碼方式傳參',
+    input_param_name: '請輸入參數名稱',
+    params_setting: '外部參數設置',
+    template_view_tips: '當前是模板視圖,請點擊更換數據集',
+    edit_web_tips: '編輯狀態不可操作網頁內部',
     no_auth_role: '未分享角色',
     auth_role: '已分享角色',
     picture_limit: '只能插入圖片',
@@ -1606,9 +1607,9 @@ export default {
     matrix: '矩陣',
     suspension: '懸浮',
     new_element_distribution: '當前元素移入分佈方式',
-    aided_grid: '辅助设计网格',
-    aided_grid_open: '打开',
-    aided_grid_close: '关闭',
+    aided_grid: '輔助設計網格',
+    aided_grid_open: '打開',
+    aided_grid_close: '關閉',
     subject_no_edit: '繫統主題不能修改',
     subject_name_not_null: '主題名稱需要1~20字符',
     is_enable: '是否啟用',
@@ -1644,9 +1645,9 @@ export default {
     play_once: '播放一次',
     play_circle: '循環播放',
     video_links: '視頻鏈接',
-    web_url: '网页地址',
+    web_url: '網頁地址',
     video_add_tips: '請點擊添加配置視頻信息...',
-    web_add_tips: '請點擊添加网页信息...',
+    web_add_tips: '請點擊添加網頁信息...',
     panel_view_result_show: '視圖結果展示',
     panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
     timeout_refresh: '請求超時，稍後刷新...',
@@ -1656,11 +1657,11 @@ export default {
     input_title: '請輸入標題',
     show_title: '顯示標題',
     default_settings: '默認值設置',
-    choose_background: '选择组件背景',
-    choose_background_tips: '组件自有的背景设置会覆盖当前设置',
-    setting_background: '设置背景',
-    setting_jump: '跳转设置',
-    select_view: '请选择视图...'
+    choose_background: '選擇組件背景',
+    choose_background_tips: '組件自有的背景設置會覆蓋當前設置',
+    setting_background: '設置背景',
+    setting_jump: '跳轉設置',
+    select_view: '請選擇視圖...'
   },
   plugin: {
     local_install: '本地安裝',
@@ -1707,8 +1708,8 @@ export default {
 
   },
   auth: {
-    authConfig: '按用户配置權限',
-    sourceConfig: '按资源配置權限',
+    authConfig: '按用戶配置權限',
+    sourceConfig: '按資源配置權限',
     authQuickConfig: '權限快捷配置',
     dept: '組織',
     role: '角色',

frontend/src/lang/zh.js

@@ -1426,6 +1426,7 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    hyperlinks: '超链接',
     is_live: '是否直播',
     yes: '是',
     no: '否',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e4;</span>
+                <div class="name">超链接</div>
+                <div class="code-name">&amp;#xe6e4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">跳转</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">跳转</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe60b;</span>
                 <div class="name">网格\表格</div>
@@ -540,9 +558,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650350932327') format('woff2'),
-       url('iconfont.woff?t=1650350932327') format('woff'),
-       url('iconfont.ttf?t=1650350932327') format('truetype');
+  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.ttf?t=1650358178587') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -568,6 +586,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-chaolianjie1"></span>
+            <div class="name">
+              超链接
+            </div>
+            <div class="code-name">.icon-chaolianjie1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-com-jump"></span>
+            <div class="name">
+              跳转
+            </div>
+            <div class="code-name">.icon-com-jump
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-component-tiaozhuan"></span>
+            <div class="name">
+              跳转
+            </div>
+            <div class="code-name">.icon-component-tiaozhuan
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-wangge-open"></span>
             <div class="name">
@@ -1297,6 +1342,30 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chaolianjie1"></use>
+                </svg>
+                <div class="name">超链接</div>
+                <div class="code-name">#icon-chaolianjie1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-com-jump"></use>
+                </svg>
+                <div class="name">跳转</div>
+                <div class="code-name">#icon-com-jump</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-component-tiaozhuan"></use>
+                </svg>
+                <div class="name">跳转</div>
+                <div class="code-name">#icon-component-tiaozhuan</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-wangge-open"></use>

frontend/src/styles/deicon/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1650350932327') format('woff2'),
-       url('iconfont.woff?t=1650350932327') format('woff'),
-       url('iconfont.ttf?t=1650350932327') format('truetype');
+  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.ttf?t=1650358178587') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-chaolianjie1:before {
+  content: "\e6e4";
+}
+
+.icon-com-jump:before {
+  content: "\e618";
+}
+
+.icon-component-tiaozhuan:before {
+  content: "\e616";
+}
+
 .icon-wangge-open:before {
   content: "\e60b";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "6156146",
+      "name": "超链接",
+      "font_class": "chaolianjie1",
+      "unicode": "e6e4",
+      "unicode_decimal": 59108
+    },
+    {
+      "icon_id": "11839649",
+      "name": "跳转",
+      "font_class": "com-jump",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "9595900",
+      "name": "跳转",
+      "font_class": "component-tiaozhuan",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
     {
       "icon_id": "4674763",
       "name": "网格\表格",