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

2022-04-19 17:30:45 +08:00 · 2022-04-19 17:30:45 +08:00 · fe43c9cd3a
commit fe43c9cd3a
parent 84890390b9
16 changed files with 303 additions and 47 deletions
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/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
--- a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
+++ b/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>
--- a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
+++ b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
@ -0,0 +1,113 @@
+<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>
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/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
    }
  }
 }
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/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
    },
    // 启用移动端布局
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/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中
--- a/frontend/src/lang/en.js
+++ b/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',
--- a/frontend/src/lang/tw.js
+++ b/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: '角色',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1426,6 +1426,7 @@ export default {
    sure_bt: '确定'
  },
  panel: {
+    hyperlinks: '超链接',
    is_live: '是否直播',
    yes: '是',
    no: '否',
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/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>
--- a/frontend/src/styles/deicon/iconfont.css
+++ b/frontend/src/styles/deicon/iconfont.css
@ -1,8 +1,8 @@
@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";
 }
--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
--- a/frontend/src/styles/deicon/iconfont.json
+++ b/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": "网格\表格",
--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2