Skip to content

D
dataease
提交 fe43c9cd authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

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

上级 84890390
隐藏空白字符变更
内嵌 并排
正在显示 包含 302 行增加 和 46 行删除
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -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 0 → 100644
浏览文件 @ fe43c9cd
<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
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
......@@ -1426,6 +1426,7 @@ export default {
sure_bt: '确定'
},
panel: {
hyperlinks: '超链接',
is_live: '是否直播',
yes: '是',
no: '否',
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ fe43c9cd
......@@ -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
浏览文件 @ fe43c9cd
@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.js
浏览文件 @ fe43c9cd
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ fe43c9cd
......@@ -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": "网格\表格",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论