Merge pull request #2855 from dataease/pr@dev@perf_merge_de_tabs

perf(仪表板-选项卡): 选项卡从插件合并到dataease主工程

frontend/src/components/dataease-tabs/index.vue

@@ -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>
+

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -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>
+    </dataease-tabs>
-    <!-- </el-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

frontend/src/styles/de-tabs.scss

@@ -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;
+             }
+           }
+         }
+       }
+     }
+   }
+