forked from github/dataease
Merge pull request #2855 from dataease/pr@dev@perf_merge_de_tabs
perf(仪表板-选项卡): 选项卡从插件合并到dataease主工程
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
166654b8ee
59
frontend/src/components/dataease-tabs/index.vue
Normal file
59
frontend/src/components/dataease-tabs/index.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<el-tabs :class="['de-tabs',...tabClassName]" :style="tabStyle" v-bind="$attrs" v-on="$listeners">
|
||||
<slot />
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataeaseTabs',
|
||||
props: {
|
||||
|
||||
fontColor: String,
|
||||
activeColor: String,
|
||||
borderColor: String,
|
||||
borderActiveColor: String,
|
||||
styleType: {
|
||||
type: String,
|
||||
default: '',
|
||||
validator: (val) => ['', 'radioGroup'].includes(val)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
tabStyle() {
|
||||
return {
|
||||
'--font-color': this.fontColor,
|
||||
'--active-color': this.activeColor,
|
||||
'--border-color': this.borderColor,
|
||||
'--border-active-color': this.borderActiveColor
|
||||
}
|
||||
},
|
||||
tabClassName() {
|
||||
const classes = [
|
||||
this.styleType,
|
||||
this.fontColor && 'fontColor',
|
||||
this.activeColor && 'activeColor',
|
||||
this.noBorder ? 'noBorder' : this.borderColor && 'borderColor',
|
||||
this.borderActiveColor && 'borderActiveColor'
|
||||
]
|
||||
return classes
|
||||
},
|
||||
noBorder() {
|
||||
return this.borderColor === 'none'
|
||||
},
|
||||
noBorderActive() {
|
||||
return this.borderActiveColor === 'none'
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../../styles/de-tabs";
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="de-tabs-div">
|
||||
<async-solt-component
|
||||
|
||||
<dataease-tabs
|
||||
v-model="activeTabName"
|
||||
:url="url"
|
||||
type="card"
|
||||
style-type="radioGroup"
|
||||
class="de-tabs-height"
|
||||
@ -15,8 +15,7 @@
|
||||
@tab-add="addTab"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<!-- <plugin-com ref="dataease-tabs" v-model="activeTabName" type="card" class="de-tabs" component-name="dataease-tabs" @tab-click="handleClick"> -->
|
||||
<!-- <el-tabs v-model="activeTabName" type="card" class="de-tabs" @tab-click="handleClick"> -->
|
||||
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in element.options.tabList"
|
||||
:key="item.name+index"
|
||||
@ -29,7 +28,6 @@
|
||||
<el-dropdown v-if="dropdownShow" slot="label" class="de-tab-drop" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
|
||||
<!-- <span>{{ item.title }}</span> -->
|
||||
<i v-if="isEdit" class="de-tab-i el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
|
||||
@ -85,8 +83,7 @@
|
||||
</div>
|
||||
|
||||
</el-tab-pane>
|
||||
</async-solt-component>
|
||||
<!-- </el-tabs> -->
|
||||
</dataease-tabs>
|
||||
|
||||
<el-dialog
|
||||
:title="$t('detabs.eidttitle')"
|
||||
@ -153,7 +150,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AsyncSoltComponent from '@/components/AsyncSoltComponent'
|
||||
import DataeaseTabs from '@/components/dataease-tabs'
|
||||
import ViewSelect from '@/views/panel/ViewSelect'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import bus from '@/utils/bus'
|
||||
@ -162,11 +159,10 @@ import { mapState } from 'vuex'
|
||||
import { chartCopy } from '@/api/chart/chart'
|
||||
import { buildFilterMap } from '@/utils/conditionUtil'
|
||||
import TabUseList from '@/views/panel/AssistComponent/tabUseList'
|
||||
import { $error } from '@/utils/message'
|
||||
|
||||
export default {
|
||||
name: 'DeTabls',
|
||||
components: { TabUseList, ViewSelect, AsyncSoltComponent },
|
||||
components: { TabUseList, ViewSelect, DataeaseTabs },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -208,18 +204,12 @@ export default {
|
||||
activeTabName: null,
|
||||
|
||||
tabIndex: 1,
|
||||
// isEdit: true,
|
||||
dialogVisible: false,
|
||||
textarea: '',
|
||||
curItem: null,
|
||||
viewDialogVisible: false,
|
||||
otherComponentDialogVisible: false,
|
||||
url: '/api/pluginCommon/component/dataease-tabs'
|
||||
/* fontColor: '#999999',
|
||||
activeColor: '#f18406',
|
||||
|
||||
borderColor: '#999999',
|
||||
borderActiveColor: '#f18406' */
|
||||
|
||||
}
|
||||
},
|
||||
@ -368,7 +358,6 @@ export default {
|
||||
const newComponentId = uuid.v1()
|
||||
const componentInfo = {
|
||||
type: 'view',
|
||||
/* id: node.id */
|
||||
id: node.innerId
|
||||
}
|
||||
|
||||
@ -396,7 +385,6 @@ export default {
|
||||
this.$store.dispatch('chart/setViewId', component.propValue.viewId)
|
||||
this.styleChange()
|
||||
})
|
||||
// this.setComponentInfo()
|
||||
},
|
||||
|
||||
setComponentInfo() {
|
||||
@ -447,7 +435,6 @@ export default {
|
||||
this.$store.commit('canvasChange')
|
||||
},
|
||||
chartResize() {
|
||||
// this.$refs[this.activeTabName]
|
||||
},
|
||||
handleClick(tab) {
|
||||
const name = tab.name
|
||||
|
||||
136
frontend/src/styles/de-tabs.scss
Normal file
136
frontend/src/styles/de-tabs.scss
Normal file
@ -0,0 +1,136 @@
|
||||
/* 引入variables例子，是这里需要用到 $--color-primary
|
||||
项目中可根据自己的styles路径 自行更改 */
|
||||
@import "./variables";
|
||||
|
||||
.de-tabs {
|
||||
&.fontColor {
|
||||
.el-tabs__item {
|
||||
color: var(--font-color);
|
||||
|
||||
&.is-active {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.activeColor {
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--active-color);
|
||||
}
|
||||
}
|
||||
|
||||
// card样式的边框
|
||||
&.noBorder.el-tabs--card {
|
||||
>.el-tabs__header {
|
||||
border-bottom: none;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.borderActiveColor.el-tabs--card {
|
||||
>.el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: var(--border-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.borderColor.el-tabs--card {
|
||||
>.el-tabs__header {
|
||||
border-bottom-color: var(--border-color);
|
||||
|
||||
.el-tabs__nav {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-left-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--active-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 简洁样式的边框
|
||||
&.noBorder {
|
||||
.el-tabs__nav-wrap::after {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.borderColor {
|
||||
.el-tabs__nav-wrap::after {
|
||||
background: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// radioGroup 类型
|
||||
&.radioGroup.borderColor.el-tabs--card {
|
||||
>.el-tabs__header {
|
||||
border-bottom: none;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border: 1px solid var(--border-color);
|
||||
border-right: 0;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid var(--border-color);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 1px solid var(--border-active-color);
|
||||
|
||||
&+.el-tabs__item {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user