lambo-design-bi 0.0.224 → 0.0.226

package/bi/widget/container/card/card-widget.vue

@@ -1,12 +1,18 @@
 <template>
   <lambo-indicator-card-bi
-    :has-title="(widget.options && widget.options.title && widget.options.title.length > 0) ? true : false">
-    <template slot="content-title" v-if="(widget.options.title && widget.options.title.length > 0)">
-      <div>{{ widget.options.title }}</div>
+    :has-title="(cardOptions.title && cardOptions.title.length > 0) ? true : false"
+    :has-extend="isTabsLayout">
+    <template slot="content-title" v-if="(cardOptions.title && cardOptions.title.length > 0)">
+      <div>{{ cardOptions.title }}</div>
       <div class="card-subtitle" v-if="subTitle">{{ subTitle }}</div>
     </template>
+    <template slot="content-extend" v-if="isTabsLayout">
+      <RadioGroup v-model="activeWidgetIndex" type="button" size="small" class="card-tabs-radio">
+        <Radio v-for="(item, index) in childWidgets" :key="index" :label="index">{{ getWidgetLabel(item, index) }}</Radio>
+      </RadioGroup>
+    </template>
     <div :style="containerStyle || {}">
-      <div v-for="(item, index) in widget.widgets" :key="index">
+      <div v-for="(item, index) in visibleWidgets" :key="getWidgetKey(item, index)">
         <component :is="getWidgetName(item)" :widget="item" :params="params">
           <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
             <slot :name="slot" v-bind="scope" />
@@ -37,18 +43,42 @@ export default {
   data() {
     return {
       containerStyle: {},
-      subTitle: null
+      subTitle: null,
+      activeWidgetIndex: 0
+    }
+  },
+  computed: {
+    cardOptions() {
+      return Object.assign({}, this.widget.options || {}, this.widget.optsion || {})
+    },
+    isTabsLayout() {
+      return this.cardOptions.layout === 'tabs'
+    },
+    childWidgets() {
+      return this.widget.widgets || []
+    },
+    visibleWidgets() {
+      if (!this.isTabsLayout) {
+        return this.childWidgets
+      }
+      return this.childWidgets[this.activeWidgetIndex] ? [this.childWidgets[this.activeWidgetIndex]] : []
     }
   },
   methods: {
     getWidgetName,
+    getWidgetLabel(item, index) {
+      return item.name || (item.options && item.options.title) || `组件${index + 1}`
+    },
+    getWidgetKey(item, index) {
+      return this.isTabsLayout ? `${this.activeWidgetIndex}_${item.id || index}` : (item.id || index)
+    },
     initConfig() {
-      if (this.widget.options) {
-        if (Object.prototype.hasOwnProperty.call(this.widget.options, "subTitle")) {
-          this.subTitle = this.widget.options["subTitle"] || ''
+      if (this.cardOptions) {
+        if (Object.prototype.hasOwnProperty.call(this.cardOptions, "subTitle")) {
+          this.subTitle = this.cardOptions["subTitle"] || ''
         }
-        if (Object.prototype.hasOwnProperty.call(this.widget.options, "style")) {
-          this.containerStyle = parseStyleStr(this.widget.options["style"] || {}) || {}
+        if (Object.prototype.hasOwnProperty.call(this.cardOptions, "style")) {
+          this.containerStyle = parseStyleStr(this.cardOptions["style"] || {}) || {}
         }
       }
     }
@@ -59,6 +89,16 @@ export default {
   },
   mounted() {
 
+  },
+  watch: {
+    'widget.widgets': {
+      handler(val) {
+        if (this.activeWidgetIndex >= (val || []).length) {
+          this.activeWidgetIndex = 0
+        }
+      },
+      deep: true
+    }
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.224",
+  "version": "0.0.226",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",