diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index b789d127d8..0652e2b47a 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -24,6 +24,7 @@
:out-style="config.style"
:style="getComponentStyleDefault(config.style)"
:prop-value="config.propValue"
+ :is-edit="false"
:element="config"
:search-count="searchCount"
/>
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index a7c2c2a277..6972fcbb89 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -12,6 +12,7 @@
{{ $t('panel.upComponent') }}
{{ $t('panel.downComponent') }}
{{ $t('panel.linkage_setting') }}
+ 新增Tab
@@ -137,6 +138,9 @@ export default {
getViewLinkageGather(requestInfo).then(rsp => {
this.$store.commit('setLinkageInfo', rsp.data)
})
+ },
+ addTab() {
+ bus.$emit('add-new-tab')
}
}
}
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 0065e5f052..54b1489995 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -630,7 +630,7 @@ export default {
this.$refs.wrapperChild[index].openChartDetailsDialog()
},
resizestop(index, item) {
- if (item.type === 'view') {
+ if (item.type === 'view' || item.type === 'de-tabs') {
this.$refs.wrapperChild[index].chartResize()
}
}
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 4b7903ce00..f000f45bf3 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -162,6 +162,13 @@ const list = [
borderColor: '#000000',
backgroundColor: '#ffffff',
borderRadius: 0
+ },
+ options: {
+ tabList: [{
+ title: 'Tab1',
+ name: '1',
+ content: null
+ }]
}
},
{
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 8e20216a3c..399b9a89b4 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -1,37 +1,41 @@
-
-
+
+
+
+ {{ item.title }}
-
-
+
+
- {{ item.title }}
-
-
+
+
+
-
-
- 编辑标题
-
+
+
+ 编辑标题
+
-
- 选择视图
-
+
+ 选择视图
+
-
- 删除
-
+
+ 删除
+
-
-
+
+
+
-
+
@@ -82,7 +86,9 @@
import ViewSelect from '@/views/panel/ViewSelect'
import { uuid } from 'vue-uuid'
+import bus from '@/utils/bus'
import componentList from '@/components/canvas/custom-component/component-list'
+
export default {
name: 'DeTabls',
components: { ViewSelect },
@@ -90,31 +96,37 @@ export default {
element: {
type: Object,
default: null
+ },
+ isEdit: {
+ type: Boolean,
+ default: true
+ },
+ outStyle: {
+ type: Object,
+ required: false,
+ default: function() {
+ return {}
+ }
}
},
data() {
return {
- editableTabsValue: '1',
- editableTabs: [{
- title: 'Tab 1',
- name: '1',
- content: ''
- }],
+ activeTabName: null,
+
tabIndex: 1,
- isEdit: true,
+ // isEdit: true,
dialogVisible: false,
textarea: '',
curItem: null,
viewDialogVisible: false,
- curViewInfo: null,
- tabList: [],
- options: null
+ tabList: []
}
},
created() {
- this.options = this.element.options
- this.tabList = this.options && this.options.tabList || this.editableTabs
+ bus.$on('add-new-tab', this.addNewTab)
+ this.tabList = this.element.options && this.element.options.tabList
+ this.activeTabName = this.tabList[0].name
},
methods: {
beforeHandleCommond(item, param) {
@@ -136,6 +148,11 @@ export default {
break
}
},
+ selectView(param) {
+ this.activeTabName = param.name
+ this.curItem = param
+ this.viewDialogVisible = true
+ },
sureViewSelector() {
const nodes = this.$refs.viewSelect.getCurrentSelected()
const node = nodes[0]
@@ -162,12 +179,20 @@ export default {
component.id = newComponentId
component.style.width = '100%'
component.style.height = '100%'
- this.curItem.viewInfo = component
+ this.curItem.content = component
this.curItem.name = newComponentId
this.viewDialogVisible = false
+ this.activeTabName = newComponentId
+ this.styleChange()
+ // this.setComponentInfo()
+ },
+
+ setComponentInfo() {
+ console.log('aaa')
},
editCurTitle(param) {
+ this.activeTabName = param.name
this.curItem = param
this.textarea = param.title
this.dialogVisible = true
@@ -175,48 +200,57 @@ export default {
sureCurTitle() {
this.curItem.title = this.textarea
this.dialogVisible = false
+ this.styleChange()
},
deleteCur(param) {
-
- },
- selectView(param) {
this.curItem = param
- this.viewDialogVisible = true
+ let len = this.element.options.tabList.length
+ while (len--) {
+ if (this.element.options.tabList[len].name === param.name) {
+ this.element.options.tabList.splice(len, 1)
+ this.tabList = this.element.options.tabList
+ const activIndex = (len - 1 + this.element.options.tabList.length) % this.element.options.tabList.length
+ this.activeTabName = this.element.options.tabList[activIndex].name
+ }
+ }
+ this.styleChange()
},
- handleTabsEdit(targetName, action) {
- if (action === 'add') {
- const newTabName = ++this.tabIndex + ''
- this.editableTabs.push({
- title: 'New Tab',
- name: newTabName,
- content: 'New Tab content'
- })
- this.editableTabsValue = newTabName
- }
- if (action === 'remove') {
- const tabs = this.editableTabs
- let activeName = this.editableTabsValue
- if (activeName === targetName) {
- tabs.forEach((tab, index) => {
- if (tab.name === targetName) {
- const nextTab = tabs[index + 1] || tabs[index - 1]
- if (nextTab) {
- activeName = nextTab.name
- }
- }
- })
- }
-
- this.editableTabsValue = activeName
- this.editableTabs = tabs.filter(tab => tab.name !== targetName)
+ addNewTab() {
+ const curName = uuid.v1()
+ const tab = {
+ title: 'NewTab',
+ name: curName,
+ content: null
}
+ this.element.options.tabList.push(tab)
+ this.tabList = this.element.options.tabList
+ this.styleChange()
+ },
+ styleChange() {
+ this.$store.state.styleChangeTimes++
+ },
+ chartResize() {
+ // this.$refs[this.activeTabName]
}
+
}
}