app-tab-panel.vue 2.9 KB
Newer Older
tony001's avatar
tony001 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<template>
    <Tabs v-model="activeName" @on-click="handleClick" :name="name" :class="curClassName">
        <template v-if="containerModel.length > 0">
            <template v-for="name of containerModel">
                <slot :name="name"></slot>
            </template>
        </template>
    </Tabs>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
export default class AppTabPanel extends Vue {
    /**
    * 名称
    *
    * @type {string}
    * @memberof AppTabPanel
    */
    @Prop() public name!: string;

    /**
     * 布局模型详情
     *
     * @type {*}
     * @memberof AppTabPanel
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppTabPanel
     */
tony001's avatar
tony001 committed
38
    @Prop() public index?: number;
tony001's avatar
tony001 committed
39 40 41 42 43 44 45 46

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppTabPanel
     */
    get itemName() {
tony001's avatar
tony001 committed
47
        return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name;
tony001's avatar
tony001 committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
    }

    /**
     * 插槽对象
     *
     * @memberof AppTabPanel
     */
    public containerModel: any[] = [];

    /**
     * 当前激活项
     *
     * @memberof AppTabPanel
     */
    public activeName: string = '';

    /**
     * 布局模型详情变更
     * @param newVal 
     * @param oldVal 
     */
    @Watch('layoutModelDetails')
    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
        this.initTabPanel();
    }

    /**
     * 初始化分页
     *
     * @memberof AppTabPanel
     */
    public initTabPanel() {
tony001's avatar
tony001 committed
80
        this.containerModel = [];
tony001's avatar
tony001 committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel && layoutModel.details && layoutModel.details.length > 0) {
            layoutModel.details.forEach((key: string) => {
                this.containerModel.push(key);
            })
        }
        this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
        this.layoutModelDetails[this.itemName].clickPage(this.activeName);
    }

    /**
     * 处理分页点击
     *
     * @memberof AppTabPanel
     */
    public handleClick(tab: any) {
        if (this.layoutModelDetails[this.itemName]) {
            this.layoutModelDetails[this.itemName].clickPage(tab);
        }
    }

    /**
     * 当前容器类名
     *
     * @memberof AppTabPanel
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-tab-panel ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * 当前容器样式
     *
     * @memberof AppTabPanel
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }
}
</script>
127 128
<style lang='scss'>
@import './app-tab-panel.scss';
129
</style>