data-export.tsx 2.2 KB
Newer Older
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
import { useNamespace } from '@ibiz-template/vue-util';
import { defineComponent, PropType, ref } from 'vue';
import '@ibiz-template/theme/style/components/common/data-export/data-export.scss';

export const DataExport = defineComponent({
  name: 'DataExport',
  props: {
    dismiss: {
      type: Function as PropType<(_result: IParams) => void>,
      required: true,
    },
    maxRowCount: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('data-export');
    const startPage = ref(1);
    const endPage = ref(1);

    const customExport = () => {
      props.dismiss({
        page: 0,
        offset: (startPage.value - 1) * props.pageSize,
        size: (endPage.value - startPage.value + 1) * props.pageSize,
      });
    };

    const exportAll = () => {
      props.dismiss({ page: 0, size: props.maxRowCount });
    };
    const exportCurrent = () => {
      props.dismiss({});
    };

    return {
      ns,
      startPage,
      endPage,
      customExport,
      exportAll,
      exportCurrent,
    };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <i-button
          class={this.ns.e('text-button')}
          type='text'
          onClick={this.exportAll}
        >
          导出全部(最大导出{this.maxRowCount}行)
        </i-button>
        <i-button
          class={this.ns.e('text-button')}
          type='text'
          onClick={this.exportCurrent}
        >
          导出当前页
        </i-button>
        <div class={this.ns.e('custom-bar')}>
          <i-input-number
            class={this.ns.e('input-number')}
            min={1}
            v-model={this.startPage}
          />
          <span class={this.ns.e('delimiter')}>~</span>
          <i-input-number
            class={this.ns.e('input-number')}
            min={1}
            v-model={this.endPage}
          />
          <span class={this.ns.e('delimiter')}></span>
          <i-button
            type='primary'
            disabled={!this.startPage || !this.endPage}
            onClick={this.customExport}
          >
            导出
          </i-button>
        </div>
      </div>
    );
  },
});