center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 图片支持超链接设置

Browse Source
This commit is contained in:
wangjiahao 2021-12-23 14:44:04 +08:00
parent 4ea876fb80
commit 5236b5ba21
7 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -105,6 +105,7 @@
:element="item"
:out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
:edit-mode="'edit'"
:h="getShapeStyleIntDeDrag(item.style,'height')"
/>
</de-drag>

3
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -224,7 +224,8 @@ export default {
'borderWidth',
'borderRadius',
'opacity',
'borderColor'
'borderColor',
'hyperlinks'
],
// 过滤组件显示的属性
'custom': [

20
frontend/src/components/canvas/custom-component/Picture.vue
View File

@ -1,16 +1,28 @@
<template>
<div style="overflow: hidden;width: 100%;height: 100%;">
<img :src="propValue">
<img v-if="!showLink" :src="element.propValue">
<a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
<img :src="element.propValue">
</a>
</div>
</template>
<script>
export default {
props: {
// eslint-disable-next-line vue/require-default-prop
propValue: {
type: String,
element: {
type: Object,
require: true
},
editMode: {
type: String,
require: false,
default: 'preview'
}
},
computed: {
showLink() {
return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
}
}
}

1
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -332,6 +332,7 @@ const list = [
icon: 'iconfont icon-picture',
defaultClass: 'text-filter',
mobileStyle: BASE_MOBILE_STYLE,
hyperlinks: HYPERLINKS,
style: {
width: 400,
height: 200,

19
frontend/src/components/canvas/utils/utils.js
View File

@ -1,3 +1,5 @@
import { BASE_MOBILE_STYLE, HYPERLINKS } from '@/components/canvas/custom-component/component-list'
export function deepCopy(target) {
if (typeof target === 'object') {
const result = Array.isArray(target) ? [] : {}
@ -55,3 +57,20 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
mainSource.mobileStyle.sizex = mobileSource.sizex
mainSource.mobileStyle.sizey = mobileSource.sizey
}
export function panelInit(componentDatas) {
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
item.x = (item.x || 1)
item.y = (item.y || 1)
item.sizex = (item.sizex || 5)
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)
}
})
}

52
frontend/src/views/panel/edit/index.vue
View File

@ -220,8 +220,8 @@ import ViewSelect from '../ViewSelect'
import SubjectSetting from '../SubjectSetting'
import bus from '@/utils/bus'
import Editor from '@/components/canvas/components/Editor/index'
import { deepCopy } from '@/components/canvas/utils/utils'
import componentList, { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import {deepCopy, panelInit} from '@/components/canvas/utils/utils'
import componentList, { BASE_MOBILE_STYLE ,HYPERLINKS} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
import Toolbar from '@/components/canvas/components/Toolbar'
@ -474,15 +474,7 @@ export default {
const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
if (componentDataTemp && canvasStyleDataTemp) {
const componentDatas = JSON.parse(componentDataTemp)
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
item.x = (item.x || 1)
item.y = (item.y || 1)
item.sizex = (item.sizex || 5)
item.sizey = (item.sizey || 5)
})
panelInit(componentDatas)
this.$store.commit('setComponentData', this.resetID(componentDatas))
const temp = JSON.parse(canvasStyleDataTemp)
temp.refreshTime = (temp.refreshTime || 5)
@ -496,25 +488,12 @@ export default {
} else if (panelId) {
findOne(panelId).then(response => {
const componentDatas = JSON.parse(response.data.panelData)
const mobileComponentData = response.data.panelDataMobile ? JSON.parse(response.data.panelDataMobile) : []
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
item.x = (item.x || 1)
item.y = (item.y || 1)
item.sizex = (item.sizex || 5)
item.sizey = (item.sizey || 5)
item.mobileSelected = (item.mobileSelected || false)
item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
})
panelInit(componentDatas)
this.$store.commit('setComponentData', this.resetID(componentDatas))
this.$store.commit('setMobileComponentData', this.resetID(mobileComponentData))
const panelStyle = JSON.parse(response.data.panelStyle)
panelStyle.refreshTime = (panelStyle.refreshTime || 5)
panelStyle.refreshViewLoading = (panelStyle.refreshViewLoading || false)
panelStyle.refreshUnit = (panelStyle.refreshUnit || 'minute')
this.$store.commit('setCanvasStyle', panelStyle)
this.$store.commit('recordSnapshot', 'init')// 记录快照
// 刷新联动信息
@ -784,31 +763,20 @@ export default {
type: 'picture-add',
label: '图片',
icon: '',
hyperlinks: HYPERLINKS,
propValue: fileResult,
style: {
...commonStyle
}
}
component.auxiliaryMatrix = _this.canvasStyleData.auxiliaryMatrix
if (_this.canvasStyleData.auxiliaryMatrix) {
component.x = _this.dropComponentInfo.x
component.y = _this.dropComponentInfo.y
component.sizex = _this.dropComponentInfo.sizex
component.sizey = _this.dropComponentInfo.sizey
component.style.left = (_this.dropComponentInfo.x - 1) * _this.curCanvasScale.matrixStyleOriginWidth
component.style.top = (_this.dropComponentInfo.y - 1) * _this.curCanvasScale.matrixStyleOriginHeight
component.style.width = _this.dropComponentInfo.sizex * _this.curCanvasScale.matrixStyleOriginWidth
component.style.height = _this.dropComponentInfo.sizey * _this.curCanvasScale.matrixStyleOriginHeight
} else {
component.style.top = _this.dropComponentInfo.shadowStyle.y
component.style.left = _this.dropComponentInfo.shadowStyle.x
component.style.width = _this.dropComponentInfo.shadowStyle.width
component.style.height = _this.dropComponentInfo.shadowStyle.height
}
component.auxiliaryMatrix = false
component.style.top = _this.dropComponentInfo.shadowStyle.y
component.style.left = _this.dropComponentInfo.shadowStyle.x
component.style.width = _this.dropComponentInfo.shadowStyle.width
component.style.height = _this.dropComponentInfo.shadowStyle.height
this.$store.commit('addComponent', {
component: component
})
this.$store.commit('recordSnapshot', 'handleFileChange')
}

11
frontend/src/views/panel/list/PanelList.vue
View File

@ -235,6 +235,7 @@ import {
} from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector'
import { queryAuthModel } from '@/api/authModel/authModel'
import { panelInit } from '@/components/canvas/utils/utils'
export default {
name: 'PanelList',
@ -647,15 +648,7 @@ export default {
// 加载视图数据
findOne(data.id).then(response => {
const componentDatas = JSON.parse(response.data.panelData)
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
item.x = (item.x || 1)
item.y = (item.y || 1)
item.sizex = (item.sizex || 5)
item.sizey = (item.sizey || 5)
})
panelInit(componentDatas)
this.$store.commit('setComponentData', this.resetID(componentDatas))
const temp = JSON.parse(response.data.panelStyle)
temp.refreshTime = (temp.refreshTime || 5)