diff --git a/frontend/src/components/canvas/components/Editor/FrameLinks.vue b/frontend/src/components/canvas/components/Editor/FrameLinks.vue index c0e3b21497..390fbc773e 100644 --- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue +++ b/frontend/src/components/canvas/components/Editor/FrameLinks.vue @@ -35,6 +35,12 @@ export default { linkInfo: { type: Object, required: true + }, + // 属性所属组件位置 + attrPosition: { + type: String, + required: false, + default: 'panel' } }, data() { @@ -63,7 +69,8 @@ export default { }, computed: { ...mapState([ - 'curComponent' + 'curComponent', + 'curActiveTabInner' ]) }, methods: { @@ -72,7 +79,11 @@ export default { }, onSubmit() { this.linkInfoTemp.src = checkAddHttp(this.linkInfoTemp.src) - this.curComponent.frameLinks = this.linkInfoTemp + if (this.attrPosition === 'panel') { + this.curComponent.frameLinks = this.linkInfoTemp + } else { + this.curActiveTabInner.frameLinks = this.linkInfoTemp + } this.$store.state.styleChangeTimes++ bus.$emit('frameLinksChange-' + this.curComponent.id) this.popoverClose() diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue index e2f433cc37..02e782cf2f 100644 --- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue +++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue @@ -58,6 +58,12 @@ export default { linkInfo: { type: Object, required: true + }, + // 属性所属组件位置 + attrPosition: { + type: String, + required: false, + default: 'panel' } }, data() { @@ -86,7 +92,8 @@ export default { }, computed: { ...mapState([ - 'curComponent' + 'curComponent', + 'curActiveTabInner' ]) }, methods: { @@ -95,7 +102,11 @@ export default { }, onSubmit() { this.streamMediaInfoTemp[this.streamMediaInfoTemp.videoType].url = checkAddHttp(this.streamMediaInfoTemp[this.streamMediaInfoTemp.videoType].url) - this.curComponent.streamMediaLinks = this.streamMediaInfoTemp + if (this.attrPosition === 'panel') { + this.curComponent.streamMediaLinks = this.streamMediaInfoTemp + } else { + this.curActiveTabInner.streamMediaLinks = this.streamMediaInfoTemp + } this.$store.state.styleChangeTimes++ bus.$emit('streamMediaLinksChange-' + this.curComponent.id) this.popoverClose() diff --git a/frontend/src/components/canvas/components/Editor/VideoLinks.vue b/frontend/src/components/canvas/components/Editor/VideoLinks.vue index c839335f03..7620a293e6 100644 --- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue +++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue @@ -43,13 +43,19 @@ import { mapState } from 'vuex' import { deepCopy } from '@/components/canvas/utils/utils' import { checkAddHttp } from '@/utils/urlUtils' -import bus from "@/utils/bus"; +import bus from '@/utils/bus' export default { props: { linkInfo: { type: Object, required: true + }, + // 属性所属组件位置 + attrPosition: { + type: String, + required: false, + default: 'panel' } }, data() { @@ -78,7 +84,8 @@ export default { }, computed: { ...mapState([ - 'curComponent' + 'curComponent', + 'curActiveTabInner' ]) }, methods: { @@ -87,6 +94,12 @@ export default { }, onSubmit() { this.linkInfoTemp[this.linkInfoTemp.videoType].sources[0].src = checkAddHttp(this.linkInfoTemp[this.linkInfoTemp.videoType].sources[0].src) + + if (this.attrPosition === 'panel') { + this.curComponent.videoLinks = this.linkInfoTemp + } else { + this.curActiveTabInner.videoLinks = this.linkInfoTemp + } this.curComponent.videoLinks = this.linkInfoTemp this.$store.state.styleChangeTimes++ bus.$emit('videoLinksChange-' + this.curComponent.id) diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue index 8b3c8d8278..e482550d12 100644 --- a/frontend/src/components/canvas/components/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -156,6 +156,24 @@ + +
+ + + +
+ +
+ + + +
+ +
+ + + +
@@ -340,7 +358,8 @@ export default { ...mapState([ 'curComponent', 'curCanvasScale', - 'canvasStyleData' + 'canvasStyleData', + 'curActiveTabInner' ]) }, @@ -399,6 +418,10 @@ export default { } // console.log('mainWidthOffset:' + this.mainWidthOffset) }, + attrTabShow(attr) { + // console.log('attr:' + attr + this[this.curComponent.type].includes(attr)) + return this.curActiveTabInner && this[this.curActiveTabInner.type] && this[this.curActiveTabInner.type].includes(attr) + }, attrShow(attr) { // console.log('attr:' + attr + this[this.curComponent.type].includes(attr)) return this[this.curComponent.type].includes(attr) diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 3cacf68e48..de8a94a057 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -171,6 +171,33 @@ export const pictureList = [ } ] +export const tabUseList = [ + { + id: '20002', + component: 'video', + type: 'video', + label: '视频', + icon: 'iconfont icon-video', + defaultClass: 'text-filter' + }, + { + id: '20003', + component: 'stream-media', + type: 'stream-media', + label: '流媒体', + icon: 'iconfont icon-a-liumeitimeitiliebiao', + defaultClass: 'text-filter' + }, + { + id: '30002', + component: 'de-frame', + type: 'de-frame', + label: '网页', + icon: 'iconfont icon-iframe', + defaultClass: 'text-filter' + } +] + export const otherList = [ { id: '30001', diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue index 5ee238bd1e..681c83fdd2 100644 --- a/frontend/src/components/widget/DeWidget/DeTabs.vue +++ b/frontend/src/components/widget/DeWidget/DeTabs.vue @@ -40,30 +40,35 @@ - 添加其他组件 + {{ $t('detabs.selectOthers') }} - + {{ $t('table.delete') }} - +
- + + + + {{ $t('table.cancel') }} + {{ $t('table.confirm') }} + + +
@@ -134,9 +156,11 @@ import componentList from '@/components/canvas/custom-component/component-list' import { mapState } from 'vuex' import { chartCopy } from '@/api/chart/chart' import { buildFilterMap } from '@/utils/conditionUtil' +import TabUseList from '@/views/panel/AssistComponent/tabUseList' + export default { name: 'DeTabls', - components: { ViewSelect, AsyncSoltComponent }, + components: { TabUseList, ViewSelect, AsyncSoltComponent }, props: { element: { type: Object, @@ -156,6 +180,15 @@ export default { default: function() { return {} } + }, + editMode: { + type: String, + require: false, + default: 'edit' + }, + h: { + type: Number, + default: 200 } }, data() { @@ -169,16 +202,20 @@ export default { textarea: '', curItem: null, viewDialogVisible: false, + otherComponentDialogVisible: false, url: '/api/pluginCommon/component/dataease-tabs' /* fontColor: '#999999', - activeColor: '#f18406', + activeColor: '#f18406', - borderColor: '#999999', - borderActiveColor: '#f18406' */ + borderColor: '#999999', + borderActiveColor: '#f18406' */ } }, computed: { + tabH() { + return this.h - 50 + }, dropdownShow() { return this.isEdit && !this.mobileLayoutStatus }, @@ -212,10 +249,26 @@ export default { } }, watch: { - curComponent: { + // curComponent: { + // handler(newVal, oldVla) { + // }, + // deep: true + // }, + active: { handler(newVal, oldVla) { - }, - deep: true + let activeTabInner + this.element.options.tabList.forEach(item => { + if (item && item.name === this.activeTabName && item.content) { + activeTabInner = item.content + } + }) + if (newVal && activeTabInner) { + this.$store.commit('setCurActiveTabInner', activeTabInner) + } else { + this.$store.commit('setCurActiveTabInner', null) + } + } + } }, created() { @@ -240,6 +293,9 @@ export default { case 'selectView': this.selectView(command.param) break + case 'selectOthers': + this.selectOthers(command.param) + break } }, selectView(param) { @@ -247,6 +303,31 @@ export default { this.curItem = param this.viewDialogVisible = true }, + selectOthers(param) { + this.activeTabName = param.name + this.curItem = param + this.otherComponentDialogVisible = true + }, + sureOtherComponentSelector() { + const curSelectedId = this.$refs.otherComponentSelect.getCurSelectedComponent() + if (curSelectedId) { + let component + const newComponentId = uuid.v1() + componentList.forEach(componentTemp => { + if (componentTemp.id === curSelectedId) { + component = JSON.parse(JSON.stringify(componentTemp)) + component.style.width = '100%' + component.style.height = '100%' + this.curItem.content = component + this.curItem.name = newComponentId + this.activeTabName = newComponentId + this.$store.commit('setCurActiveTabInner', component) + this.styleChange() + } + }) + } + this.otherComponentDialogVisible = false + }, sureViewSelector() { const nodes = this.$refs.viewSelect.getCurrentSelected() if (!nodes || nodes.length === 0) { @@ -341,23 +422,29 @@ export default { handleClick(tab) { const name = tab.name this.element.options.tabList.forEach(item => { - if (item && item.name === name && item.content && item.content.propValue && item.content.propValue.viewId) { - this.filterMap[item.content.propValue.viewId] = item.content.filters - this.$store.dispatch('chart/setViewId', item.content.propValue.viewId) + if (item && item.name === name && item.content) { + this.$store.commit('setCurActiveTabInner', item.content) + if (item.content.propValue && item.content.propValue.viewId) { + this.filterMap[item.content.propValue.viewId] = item.content.filters + this.$store.dispatch('chart/setViewId', item.content.propValue.viewId) + } } }) - // console.log(tab) } - } } diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index bdd3456737..1a6f159c9f 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -419,7 +419,6 @@ export default { this.editPanel.optType = param.optType this.editPanel.panelInfo.nodeType = param.type this.editPanel.visible = true - const temp = DEFAULT_COMMON_CANVAS_STYLE_STRING switch (param.optType) { case 'new': this.editPanel.titlePre = this.$t('commons.create')