Merge pull request #1964 from dataease/pr@dev@feat_de_tabs_plugin

faet: 集成新的tabs插件

backend/src/main/resources/db/migration/V33__1.9.sql

@@ -89,3 +89,4 @@ INSERT INTO `system_parameter`(`param_key`, `param_value`, `type`, `sort`) VALUE
 
 UPDATE `demo_gdp_district_top100` set `province` = '新疆维吾尔自治区' WHERE `province` = '新疆维吾尔族自治区';
 
+INSERT INTO `my_plugin`(`plugin_id`, `name`, `store`, `free`, `cost`, `category`, `descript`, `version`, `install_type`, `creator`, `load_mybatis`, `release_time`, `install_time`, `module_name`, `icon`) VALUES (3, 'tabs插件', 'default', 0, 20000, 'panel', 'tabs插件', '1.0-SNAPSHOT', NULL, 'fit2cloud-chenyw', 0, NULL, NULL, 'dataease-extensions-tabs-backend', NULL);

frontend/src/components/AsyncSoltComponent/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <component
+    :is="mode"
+    :ref="refId"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-slot:default>
+      <slot name="default" />
+    </template>
+  </component>
+</template>
+
+<script>
+import { uuid } from 'vue-uuid'
+import { get } from '@/api/system/dynamic'
+
+export default {
+  name: 'AsyncComponent',
+  inheritAttrs: true,
+  props: {
+    // 父组件提供请求地址
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      resData: '',
+      mode: '',
+      refId: null
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      async handler(val, oldVal) {
+        if (!this.url) return
+        // Cache 缓存 根据 url 参数
+        if (!window.SyncComponentCache) {
+          window.SyncComponentCache = {}
+        }
+        let res
+        if (!window.SyncComponentCache[this.url]) {
+          window.SyncComponentCache[this.url] = get(this.url)
+
+          // window.SyncComponentCache[this.url] = Axios.get(this.url)
+          res = await window.SyncComponentCache[this.url]
+        } else {
+          res = await window.SyncComponentCache[this.url]
+        }
+
+        const Fn = Function
+        this.mode = new Fn(`return ${res.data || res}`)()
+        /* if (res && res.data) {
+          const Fn = Function
+          this.mode = new Fn(`return ${res.data || res}`)()
+        } */
+      }
+    }
+  },
+  created() {
+    this.refId = uuid.v1
+  },
+  methods: {
+    /* chartResize() {
+      this.$refs[this.refId] && this.$refs[this.refId].chartResize && this.$refs[this.refId].chartResize()
+    }, */
+    callPluginInner(param) {
+      const { methodName, methodParam } = param
+      this.$refs[this.refId] && this.$refs[this.refId][methodName] && this.$refs[this.refId][methodName](methodParam)
+    }
+  }
+}
+</script>

frontend/src/components/canvas/components/TextAttr.vue

@@ -140,6 +140,12 @@
         </el-tooltip>
       </div>
 
+      <div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+        <el-tooltip content="tab内部样式">
+          <tab-style :style-info="styleInfo" />
+        </el-tooltip>
+      </div>
+
     </div>
   </el-card>
 </template>
@@ -150,7 +156,6 @@ import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
-import { chartTransStr2Object } from '@/views/panel/panel'
 
 export default {
   components: { Hyperlinks, DateFormat, VideoLinks },
@@ -245,7 +250,8 @@ export default {
         'borderWidth',
         'borderRadius',
         'opacity',
-        'borderColor'
+        'borderColor',
+        'deTabStyle'
       ],
       // 矩形组件显示的属性
       'rect-shape': [
@@ -416,6 +422,18 @@ export default {
     },
     styleChange() {
       this.$store.commit('recordStyleChange')
+    },
+    goHeadFontColor() {
+      this.$refs.headFontColorPicker.handleTrigger()
+    },
+    goHeadFontActiveColor() {
+      this.$refs.headFontActiveColorPicker.handleTrigger()
+    },
+    goHeadBorderColor() {
+      this.$refs.headBorderColorPicker.handleTrigger()
+    },
+    goHeadBorderActiveColor() {
+      this.$refs.headBorderActiveColorPicker.handleTrigger()
     }
   }
 }
@@ -448,7 +466,6 @@ export default {
     display: inline!important;
   }
 
-
   ::v-deep input::-webkit-outer-spin-button,
   ::v-deep input::-webkit-inner-spin-button {
     -webkit-appearance: none !important;

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

@@ -1,6 +1,19 @@
 <template>
   <div class="de-tabs-div">
-    <el-tabs v-model="activeTabName" type="card" class="de-tabs" @tab-click="handleClick">
+    <async-solt-component
+      v-model="activeTabName"
+      :url="url"
+      type="card"
+      style-type="radioGroup"
+      class="de-tabs-height"
+      :font-color="fontColor"
+      :active-color="activeColor"
+      :border-color="borderColor"
+      :border-active-color="borderActiveColor"
+      @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"
@@ -58,7 +71,8 @@
         </div>
 
       </el-tab-pane>
-    </el-tabs>
+    </async-solt-component>
+    <!-- </el-tabs> -->
 
     <el-dialog
       :title="$t('detabs.eidttitle')"
@@ -108,7 +122,7 @@
 </template>
 
 <script>
-
+import AsyncSoltComponent from '@/components/AsyncSoltComponent'
 import ViewSelect from '@/views/panel/ViewSelect'
 import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
@@ -118,7 +132,7 @@ import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
 export default {
   name: 'DeTabls',
-  components: { ViewSelect },
+  components: { ViewSelect, AsyncSoltComponent },
   props: {
     element: {
       type: Object,
@@ -150,7 +164,13 @@ export default {
       dialogVisible: false,
       textarea: '',
       curItem: null,
-      viewDialogVisible: false
+      viewDialogVisible: false,
+      url: '/api/pluginCommon/component/dataease-tabs'
+      /* fontColor: '#999999',
+      activeColor: '#f18406',
+
+      borderColor: '#999999',
+      borderActiveColor: '#f18406' */
 
     }
   },
@@ -165,11 +185,24 @@ export default {
       const map = buildFilterMap(this.componentData)
       return map
     },
+
     ...mapState([
       'componentData',
       'curComponent',
       'mobileLayoutStatus'
-    ])
+    ]),
+    fontColor() {
+      return this.element && this.element.style && this.element.style.headFontColor || 'none'
+    },
+    activeColor() {
+      return this.element && this.element.style && this.element.style.headFontActiveColor || 'none'
+    },
+    borderColor() {
+      return this.element && this.element.style && this.element.style.headBorderColor || 'none'
+    },
+    borderActiveColor() {
+      return this.element && this.element.style && this.element.style.headBorderActiveColor || 'none'
+    }
   },
   watch: {
     curComponent: {
@@ -315,7 +348,7 @@ export default {
     height: 100%;
     overflow: hidden;
   }
-  .de-tabs {
+  .de-tabs-height {
     height: 100%;
   }
 

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

@@ -0,0 +1,97 @@
+<template>
+
+  <el-popover
+    placement="right"
+    trigger="click"
+  >
+    <el-form ref="tabsStyleForm" :model="styleInfo" size="small" class="demo-form-inline">
+      <el-form-item label="头部字体颜色" prop="headFrontColor">
+        <div class="picker-color-div" @click="triggerTheme('headFontColor')">
+          <el-input
+            v-model="styleInfo.headFontColor"
+            readonly
+            class="theme-input"
+          >
+            <el-color-picker ref="headFontColorPicker" slot="prefix" v-model="styleInfo.headFontColor" class="theme-picker" @change="styleChange" />
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item label="头部字体选中颜色" prop="headFontActiveColor">
+        <div class="picker-color-div" @click="triggerTheme('headFontActiveColor')">
+          <el-input
+            v-model="styleInfo.headFontActiveColor"
+            readonly
+            class="theme-input"
+          >
+            <el-color-picker ref="headFontActiveColorPicker" slot="prefix" v-model="styleInfo.headFontActiveColor" class="theme-picker" @change="styleChange" />
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item label="头部边框颜色" prop="headBorderColor">
+        <div class="picker-color-div" @click="triggerTheme('headBorderColor')">
+          <el-input
+            v-model="styleInfo.headBorderColor"
+            readonly
+            class="theme-input"
+          >
+            <el-color-picker ref="headBorderColorPicker" slot="prefix" v-model="styleInfo.headBorderColor" class="theme-picker" @change="styleChange" />
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item label="头部边框选中颜色" prop="headBorderActiveColor">
+        <div class="picker-color-div" @click="triggerTheme('headBorderActiveColor')">
+          <el-input
+            v-model="styleInfo.headBorderActiveColor"
+            readonly
+            class="theme-input"
+          >
+            <el-color-picker ref="headBorderActiveColorPicker" slot="prefix" v-model="styleInfo.headBorderActiveColor" class="theme-picker" @change="styleChange" />
+          </el-input>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <i slot="reference" class="iconfont icon-tabs" />
+  </el-popover>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'TabStyle',
+  props: {
+    styleInfo: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+
+    ...mapState([
+      'componentData',
+      'curComponent'
+    ])
+  },
+  methods: {
+    triggerTheme(key) {
+      const pickKey = key + 'Picker'
+      const current = this.$refs[pickKey]
+      current && (current.showPicker = true)
+    },
+    styleChange() {
+      this.$store.commit('recordStyleChange')
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/src/styles/index.scss

@@ -399,9 +399,9 @@ div:focus {
   height: 5px;
 }
 
-.el-color-dropdown__link-btn {
+/* .el-color-dropdown__link-btn {
   display: none !important;
-}
+} */
 
 .el-table {
   background-color: var(--TableBG) !important;
@@ -549,11 +549,11 @@ div:focus {
 }
 
 .blackTheme .el-tabs__item:not(.is-active) {
-  color: var(--TextPrimary) !important;
+  color: var(--TextPrimary);
 }
 
 .blackTheme .el-tabs__item:hover {
-  color: var(--Main) !important;
+  color: var(--Main);
 }
 
 .blackTheme:not(.in-panel) .elx-table--main-wrapper {
@@ -793,3 +793,20 @@ div:focus {
     margin-left: 10px !important;
   }
 }
+
+.picker-color-div {
+  height: 32px;
+  margin-top: 32px;
+}
+
+
+
+.theme-input {
+  >input {
+    padding-left: 40px !important;
+  }
+
+  >span.el-input__prefix {
+    padding-top: 0px;
+  }
+}