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

faet: 集成新的tabs插件
2022-03-25 14:29:12 +08:00 · 2022-03-25 14:29:12 +08:00 · 9bcf1980cd
commit 9bcf1980cd
parent dd306a3004 70dbd65a1a
6 changed files with 255 additions and 14 deletions
--- a/backend/src/main/resources/db/migration/V33__1.9.sql
+++ b/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);
--- a/frontend/src/components/AsyncSoltComponent/index.vue
+++ b/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>
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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;
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/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%;
  }

--- a/frontend/src/components/widget/DeWidget/TabStyle.vue
+++ b/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>
--- a/frontend/src/styles/index.scss
+++ b/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;
+  }
+}