增加透视表组件、依赖声明

src/app-register.ts

@@ -99,6 +99,7 @@ import AppAlertGroup from './components/app-alert-group/app-alert-group.vue'
 import AppRawItem from './components/app-rawitem/app-rawitem.vue'
 import AppImageRomate from './components/app-image-romate/app-image-romate.vue'
 import { MenuIcon } from './components/menu-icon/menu-icon'
+import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -213,5 +214,6 @@ export const AppComponents = {
         v.component('app-rawitem',AppRawItem);
         v.component('app-image-romate', AppImageRomate);
         v.component('menu-icon', MenuIcon);
+        v.component('app-vue-pivottable', AppVuePivottable);
     },
 };
\ No newline at end of file

src/components/app-vue-pivottable/app-vue-pivottable.vue

+<template>
+    <vue-pivottable-ui
+        class="app-vue-pivottable"
+        :data="datas"
+        :aggregatorName="aggregatorName"
+        :rendererName="rendererName"
+        :columns="columns"
+        :rows="rows"
+        :cols="cols"
+        :vals="vals"
+        :locales="locales"
+        :rowTotal="rowTotal"
+        :colTotal="colTotal"
+        :onChange="onChange"
+        :hiddenFromDragDrop="hiddenFromDragDrop"
+    >           
+    </vue-pivottable-ui>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { VuePivottableUi } from 'ibiz-vue-pivottable';
+import 'ibiz-vue-pivottable/dist/vue-pivottable.css';
+
+@Component({
+    components: {
+        VuePivottableUi
+    }
+})
+export default class AppVuePivotTable extends Vue {
+
+    /**
+     * 数据集
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    @Prop() datas: any;
+
+    /**
+     * 列集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    @Prop() allColumns: any;
+
+    /**
+     * 聚合模式
+     *
+     * @type {string}
+     * @memberof AppVuePivotTable
+     */
+    protected aggregatorName: string = 'Sum';
+
+    /**
+     * 渲染模式
+     *
+     * @type {string}
+     * @memberof AppVuePivotTable
+     */
+    protected rendererName: string = 'Table Heatmap';
+
+    /**
+     * 行统计
+     *
+     * @type {boolean}
+     * @memberof AppVuePivotTable
+     */
+    protected rowTotal: boolean = true;
+
+    /**
+     * 列统计
+     *
+     * @type {boolean}
+     * @memberof AppVuePivotTable
+     */
+    protected colTotal: boolean = true;
+
+    /**
+     * 列属性列集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected cols: any[] = [];
+
+    /**
+     * 行属性列集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected rows: any[] = [];
+
+    /**
+     * 值属性集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected vals: any[] =  [];
+
+    /**
+     * 隐藏列集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected hiddenFromDragDrop: any[] = [];
+
+    /**
+     * 展现列集合
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected columns: any[] = [];
+
+    /**
+     * 语言资源
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    protected locales: any = {
+        aggregators: {
+            'Count': 'Count',
+            'Count Unique Values': 'Count Unique Values',
+            'List Unique Values': 'List Unique Values',
+            'Sum': 'Sum',
+            'Integer Sum': 'Integer Sum',
+            'Average': 'Average',
+            'Median': 'Median',
+            'Sample Variance': 'Sample Variance',
+            'Sample Standard Deviation': 'Sample Standard Deviation',
+            'Minimum': 'Minimum',
+            'Maximum': 'Maximum',
+            'First': 'First',
+            'Last': 'Last',
+            'Sum over Sum': 'Sum over Sum',
+            'Sum as Fraction of Total': 'Sum as Fraction of Total',
+            'Sum as Fraction of Rows': 'Sum as Fraction of Rows',
+            'Sum as Fraction of Columns': 'Sum as Fraction of Columns',
+            'Count as Fraction of Total': 'Count as Fraction of Total',
+            'Count as Fraction of Rows': 'Count as Fraction of Rows',
+            'Count as Fraction of Columns': 'Count as Fraction of Columns'
+        },
+        renderer: {
+            'Table': 'Table',
+            'Table Heatmap': 'Table Heatmap',
+            'Table Col Heatmap': 'Table Col Heatmap',
+            'Table Row Heatmap': 'Table Row Heatmap',
+            'Expor Table TSV': 'Expor Table TSV',
+            'Grouped Column Chart': 'Grouped Column Chart',
+            'Stacked Column Chart': 'Stacked Column Chart',
+            'Grouped Bar Chart': 'Grouped Bar Chart',
+            'Stacked Bar Chart': 'Stacked Bar Chart',
+            'Line Chart': 'Line Chart',
+            'Dot Chart': 'Dot Chart',
+            'Area Chart': 'Area Chart',
+            'Scatter Chart': 'Scatter Chart',
+            'Multiple Pie Chart': 'Multiple Pie Chart'
+        },
+        'Filter Values': 'Filter Values',
+        'Select All': 'Select All',
+        'Deselect All': 'Deselect All',
+        'Totals': 'Totals'
+    };
+
+    /**
+     * 生命周期
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    public created() {
+        if(this.allColumns) {
+            this.allColumns.forEach((item: any) => {
+                if(!item.show) {
+                    this.hiddenFromDragDrop.push(item.name);
+                }
+                let col: any = { ...item };
+                col.prop = col.name;
+                this.columns.push(col);
+            });
+        }
+    }
+
+    /**
+     * 事件
+     *
+     * @type {*}
+     * @memberof AppVuePivotTable
+     */
+    public onChange(evt: any) {
+        console.log(evt);
+    }
+}
+</script>
+
+<style lang="less">
+.app-vue-pivottable {
+    height: calc(100% - 1px);
+    .pvtTable {
+        min-width: 100%;
+    }
+}
+</style>
\ No newline at end of file

src/shims-vue.d.ts

@@ -9,4 +9,5 @@ declare module '@fullcalendar/list';
 declare module '@fullcalendar/interaction';
 declare module 'vue-grid-layout';
 declare module 'vue-print-nb';
-declare module 'vuedraggable';
\ No newline at end of file
+declare module 'vuedraggable';
+declare module 'ibiz-vue-pivottable';
\ No newline at end of file