app-export-excel.vue 3.8 KB
Newer Older
ibizdev's avatar
ibizdev 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 38 39 40 41 42 43 44 45 46 47 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 80 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 127 128 129 130 131 132 133 134 135 136 137 138 139 140
<template>
    <dropdown v-if="itemLevel === 0" :transfer="true" trigger='click'>
        <i-button :disabled="item.disabled">
            <i class='fa fa-file-excel-o'></i>
            <span class='caption'>{{caption}}</span>
        </i-button>
        <dropdown-menu slot='list'>
            <dropdown-item>
                <p @click="exportExcel($event, 'maxRowCount')">
                    {{caption}}{{$t('components.appExportExcel.total')}}({{$t('components.appExportExcel.max')}}{{caption}}{{item.MaxRowCount}}{{$t('components.appExportExcel.row')}})
                </p>
            </dropdown-item>
            <dropdown-item>
                <p @click="exportExcel($event, 'activatedPage')">
                    {{caption}}{{$t('components.appExportExcel.currentPage')}}
                </p>
            </dropdown-item>
        </dropdown-menu>
    </dropdown>
</template>

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

/**
 * 数据导出组件
 *
 * @export
 * @class AppExportExcel
 * @extends {Vue}
 */
@Component({
})
export default class AppExportExcel extends Vue {

    /**
     * 工具栏项
     *
     * @type {*}
     * @memberof AppExportExcel
     */
    @Prop() public item?: any;

    /**
     * 工具栏项
     *
     * @type {*}
     * @memberof AppExportExcel
     */
    @Prop() public caption?: any;

    /**
     * 工具栏项层级
     *
     * @type {number}
     * @memberof AppExportExcel
     */
    @Prop({ default: 0 }) public itemLevel!: number;

    /**
     * 起始页
     *
     * @type {(string | null)}
     * @memberof AppExportExcel
     */
    public startPage: string | null = null;

    /**
     * 结束页
     *
     * @type {(string | null)}
     * @memberof AppExportExcel
     */
    public endPage: string | null = null;

    /**
     * 是否显示下拉菜单
     *
     * @type {boolean}
     * @memberof AppExportExcel
     */
    public visible: boolean = false;

    /**
     * 点击触发相似
     *
     * @memberof AppExportExcel
     */
    public clickVisible(): void {
        this.visible = !this.visible
    }

    /**
     * 导出数据
     *
     * @param {*} $event
     * @param {string} type
     * @returns {void}
     * @memberof AppExportExcel
     */
    public exportExcel($event: any, type: string): void {
        const exportparms: any = { type: type };
        if (Object.is(type, 'maxRowCount')) {
            Object.assign(exportparms, { maxRowCount: this.item.MaxRowCount })
            this.visible = false;
        } else if (Object.is(type, 'activatedPage')) {
            this.visible = false;
        } else if (Object.is(type, 'custom')) {
            if (!this.startPage || !this.endPage) {
                this.$Notice.warning({ title: '警告', desc: '请输入起始页' });
                return;
            }
            const startPage: any = Number.parseInt(this.startPage, 10);
            const endPage: any = Number.parseInt(this.endPage, 10);
            if (Number.isNaN(startPage) || Number.isNaN(endPage)) {
                this.$Notice.warning({ title: '警告', desc: '请输入有效的起始页' });
                return;
            }

            if (startPage < 1 || endPage < 1 || startPage > endPage) {
                this.$Notice.warning({ title: '警告', desc: '请输入有效的起始页' });
                return;
            }
            this.startPage = null;
            this.endPage = null;
            Object.assign(exportparms, { startPage: startPage, endPage: endPage });
            this.visible = false;
        }
        if (!this.visible) {
            Object.assign($event, { exportparms: exportparms });
            this.$emit('exportexcel', $event);
        }
    }

}
</script>

<style lang='less'>
@import './app-export-excel.less';
</style>