zyAdmin/node_modules/vxe-table/lib/table/module/export/export-panel.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _ui = require("../../../ui");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _utils = require("../../../ui/src/utils");
var _log = require("../../../ui/src/log");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  getI18n,
  getIcon,
  globalMixins,
  renderEmptyElement
} = _ui.VxeUI;
var _default = exports.default = {
  name: 'VxeTableExportPanel',
  mixins: [globalMixins.sizeMixin],
  props: {
    defaultOptions: Object,
    storeData: Object
  },
  components: {
    // VxeModal,
    // VxeInput,
    // VxeCheckbox,
    // VxeSelect,
    // VxeOption
  },
  inject: {
    $xeTable: {
      default: null
    }
  },
  data() {
    return {
      isAll: false,
      isIndeterminate: false,
      loading: false
    };
  },
  computed: {
    checkedAll() {
      return this.storeData.columns.every(column => column.checked);
    },
    showSheet() {
      return ['html', 'xml', 'xlsx', 'pdf'].indexOf(this.defaultOptions.type) > -1;
    },
    supportMerge() {
      const {
        storeData,
        defaultOptions
      } = this;
      return !defaultOptions.original && defaultOptions.mode === 'current' && (storeData.isPrint || ['html', 'xlsx'].indexOf(defaultOptions.type) > -1);
    },
    // computeSupportGroup () {
    //   const { defaultOptions } = this
    //   return ['html', 'xlsx', 'csv', 'txt'].indexOf(defaultOptions.type) > -1
    // },
    supportStyle() {
      const {
        defaultOptions
      } = this;
      return !defaultOptions.original && ['xlsx'].indexOf(defaultOptions.type) > -1;
    }
  },
  created() {
    const $xeTableExportPanel = this;
    const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
    const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
    const VxeUISelectComponent = _ui.VxeUI.getComponent('VxeSelect');
    const VxeUIInputComponent = _ui.VxeUI.getComponent('VxeInput');
    const VxeUICheckboxComponent = _ui.VxeUI.getComponent('VxeCheckbox');
    $xeTableExportPanel.$nextTick(() => {
      if (!VxeUIModalComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['vxe-modal']);
      }
      if (!VxeUIButtonComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['vxe-button']);
      }
      if (!VxeUISelectComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['vxe-select']);
      }
      if (!VxeUIInputComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['vxe-input']);
      }
      if (!VxeUICheckboxComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['vxe-checkbox']);
      }
    });
  },
  render(h) {
    const $xeTable = this.$xeTable;
    const $xeGrid = $xeTable.$xeGrid;
    const $xeGantt = $xeTable.$xeGantt;
    const {
      _e,
      checkedAll,
      isAll: isAllChecked,
      isIndeterminate: isAllIndeterminate,
      showSheet,
      supportMerge,
      supportStyle,
      defaultOptions,
      storeData
    } = this;
    const {
      hasTree,
      hasMerge,
      isPrint,
      hasColgroup,
      columns
    } = storeData;
    const {
      isHeader
    } = defaultOptions;
    // const supportGroup = this.computeSupportGroup
    const slots = defaultOptions.slots || {};
    const topSlot = slots.top;
    const bottomSlot = slots.bottom;
    const defaultSlot = slots.default;
    const footerSlot = slots.footer;
    const parameterSlot = slots.parameter;
    const cols = [];
    _xeUtils.default.eachTree(columns, column => {
      const colTitle = (0, _utils.formatText)(column.getTitle(), 1);
      const isColGroup = column.children && column.children.length;
      const isChecked = column.checked;
      const indeterminate = column.halfChecked;
      const isHtml = column.type === 'html';
      cols.push(h('li', {
        class: ['vxe-table-export--panel-column-option', `level--${column.level}`, {
          'is--group': isColGroup,
          'is--checked': isChecked,
          'is--indeterminate': indeterminate,
          'is--disabled': column.disabled
        }],
        attrs: {
          title: colTitle
        },
        on: {
          click: () => {
            if (!column.disabled) {
              this.changeOption(column);
            }
          }
        }
      }, [h('span', {
        class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
      }), isHtml ? h('span', {
        key: '1',
        class: 'vxe-checkbox--label',
        domProps: {
          innerHTML: colTitle
        }
      }) : h('span', {
        key: '0',
        class: 'vxe-checkbox--label'
      }, colTitle)]));
    });
    return h('vxe-modal', {
      ref: 'modal',
      props: {
        id: 'VXE_EXPORT_MODAL',
        value: storeData.visible,
        title: getI18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
        width: 660,
        minWidth: 500,
        minHeight: 400,
        mask: true,
        lockView: true,
        showFooter: true,
        escClosable: true,
        maskClosable: true,
        showMaximize: true,
        resize: true,
        loading: this.loading
      },
      on: {
        input(value) {
          storeData.visible = value;
        },
        show: this.showEvent
      },
      scopedSlots: {
        default: () => {
          const params = {
            $table: $xeTable,
            $grid: $xeGrid,
            $gantt: $xeGantt,
            options: defaultOptions,
            columns,
            params: defaultOptions.params
          };
          const hasEmptyData = defaultOptions.mode === 'empty';
          return h('div', {
            class: 'vxe-table-export--panel'
          }, [topSlot ? h('div', {
            class: 'vxe-table-export--panel-top'
          }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement(this), h('div', {
            class: 'vxe-table-export--panel-body'
          }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('table', {
            attrs: {
              class: 'vxe-table-export--panel-table',
              cellspacing: 0,
              cellpadding: 0,
              border: 0
            }
          }, [h('tbody', [[isPrint ? _e() : h('tr', [h('td', getI18n('vxe.export.expName')), h('td', [h('vxe-input', {
            ref: 'filename',
            props: {
              value: defaultOptions.filename,
              type: 'text',
              clearable: true,
              placeholder: getI18n('vxe.export.expNamePlaceholder')
            },
            on: {
              modelValue(value) {
                defaultOptions.filename = value;
              }
            }
          })])]), isPrint ? _e() : h('tr', [h('td', getI18n('vxe.export.expType')), h('td', [h('vxe-select', {
            props: {
              value: defaultOptions.type,
              options: storeData.typeList
            },
            on: {
              modelValue(value) {
                defaultOptions.type = value;
              }
            }
          })])]), isPrint || showSheet ? h('tr', [h('td', getI18n('vxe.export.expSheetName')), h('td', [h('vxe-input', {
            ref: 'sheetname',
            props: {
              value: defaultOptions.sheetName,
              type: 'text',
              clearable: true,
              placeholder: getI18n('vxe.export.expSheetNamePlaceholder')
            },
            on: {
              modelValue(value) {
                defaultOptions.sheetName = value;
              }
            }
          })])]) : _e(), h('tr', [h('td', getI18n('vxe.export.expMode')), h('td', [h('vxe-select', {
            props: {
              value: defaultOptions.mode,
              options: storeData.modeList
            },
            on: {
              modelValue(value) {
                defaultOptions.mode = value;
              }
            }
          })])]), h('tr', [h('td', [getI18n('vxe.export.expColumn')]), h('td', [h('div', {
            class: 'vxe-table-export--panel-column'
          }, [h('ul', {
            class: 'vxe-table-export--panel-column-header'
          }, [h('li', {
            class: ['vxe-table-export--panel-column-option', {
              'is--checked': isAllChecked,
              'is--indeterminate': isAllIndeterminate
            }],
            attrs: {
              title: getI18n('vxe.table.allTitle')
            },
            on: {
              click: this.allColumnEvent
            }
          }, [h('span', {
            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
          }), h('span', {
            class: 'vxe-checkbox--label'
          }, getI18n('vxe.export.expCurrentColumn'))])]), h('ul', {
            class: 'vxe-table-export--panel-column-body'
          }, cols)])])]), h('tr', [h('td', getI18n('vxe.export.expOpts')), parameterSlot ? h('td', [h('div', {
            class: 'vxe-table-export--panel-option-row'
          }, $xeTable.callSlot(parameterSlot, params, h))]) : h('td', [h('div', {
            class: 'vxe-table-export--panel-option-row'
          }, [h('vxe-checkbox', {
            props: {
              value: hasEmptyData || isHeader,
              disabled: hasEmptyData,
              title: getI18n('vxe.export.expHeaderTitle'),
              content: getI18n('vxe.export.expOptHeader')
            },
            on: {
              input(value) {
                defaultOptions.isHeader = value;
              }
            }
          }), h('vxe-checkbox', {
            props: {
              value: isHeader ? defaultOptions.isTitle : false,
              disabled: !isHeader,
              title: getI18n('vxe.export.expTitleTitle'),
              content: getI18n('vxe.export.expOptTitle')
            },
            on: {
              input(value) {
                defaultOptions.isTitle = value;
              }
            }
          }), h('vxe-checkbox', {
            props: {
              value: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
              disabled: !isHeader || !hasColgroup || !supportMerge,
              title: getI18n('vxe.export.expColgroupTitle'),
              content: getI18n('vxe.export.expOptColgroup')
            },
            on: {
              input(value) {
                defaultOptions.isColgroup = value;
              }
            }
          })]), h('div', {
            class: 'vxe-table-export--panel-option-row'
          }, [h('vxe-checkbox', {
            props: {
              value: hasEmptyData ? false : defaultOptions.original,
              disabled: hasEmptyData,
              title: getI18n('vxe.export.expOriginalTitle'),
              content: getI18n('vxe.export.expOptOriginal')
            },
            on: {
              input(value) {
                defaultOptions.original = value;
              }
            }
          }), h('vxe-checkbox', {
            props: {
              value: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
              disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
              title: getI18n('vxe.export.expMergeTitle'),
              content: getI18n('vxe.export.expOptMerge')
            },
            on: {
              input(value) {
                defaultOptions.isMerge = value;
              }
            }
          }), isPrint ? _e() : h('vxe-checkbox', {
            props: {
              value: supportStyle ? defaultOptions.useStyle : false,
              disabled: !supportStyle,
              title: getI18n('vxe.export.expUseStyleTitle'),
              content: getI18n('vxe.export.expOptUseStyle')
            },
            on: {
              input(value) {
                defaultOptions.useStyle = value;
              }
            }
          }), h('vxe-checkbox', {
            props: {
              value: hasTree ? defaultOptions.isAllExpand : false,
              disabled: hasEmptyData || !hasTree,
              title: getI18n('vxe.export.expAllExpandTitle'),
              content: getI18n('vxe.export.expOptAllExpand')
            },
            on: {
              input(value) {
                defaultOptions.isAllExpand = value;
              }
            }
          })]), h('div', {
            class: 'vxe-table-export--panel-option-row'
          }, [h('vxe-checkbox', {
            props: {
              value: defaultOptions.isFooter,
              disabled: !storeData.hasFooter,
              title: getI18n('vxe.export.expFooterTitle'),
              content: getI18n('vxe.export.expOptFooter')
            },
            on: {
              input(value) {
                defaultOptions.isFooter = value;
              }
            }
          })])])])]])])]), bottomSlot ? h('div', {
            class: 'vxe-table-export--panel-bottom'
          }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement(this)]);
        },
        footer: () => {
          const params = {
            $table: $xeTable,
            $grid: $xeGrid,
            $gantt: $xeGantt,
            options: defaultOptions,
            columns,
            params: defaultOptions.params
          };
          return h('div', {
            class: 'vxe-table-export--panel-footer'
          }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
            class: 'vxe-table-export--panel-btns'
          }, [h('vxe-button', {
            props: {
              content: getI18n('vxe.export.expCancel')
            },
            on: {
              click: this.cancelEvent
            }
          }), h('vxe-button', {
            ref: 'confirmBtn',
            props: {
              status: 'primary',
              content: getI18n(isPrint ? 'vxe.export.expPrint' : 'vxe.export.expConfirm')
            },
            on: {
              click: this.confirmEvent
            }
          })])]);
        }
      }
    });
  },
  methods: {
    changeOption(column) {
      const isChecked = !column.checked;
      _xeUtils.default.eachTree([column], item => {
        item.checked = isChecked;
        item.halfChecked = false;
      });
      this.handleOptionCheck(column);
      this.checkStatus();
    },
    handleOptionCheck(column) {
      const matchObj = _xeUtils.default.findTree(this.storeData.columns, item => item === column);
      if (matchObj && matchObj.parent) {
        const {
          parent
        } = matchObj;
        if (parent.children && parent.children.length) {
          parent.checked = parent.children.every(column => column.checked);
          parent.halfChecked = !parent.checked && parent.children.some(column => column.checked || column.halfChecked);
          this.handleOptionCheck(parent);
        }
      }
    },
    checkStatus() {
      const columns = this.storeData.columns;
      this.isAll = columns.every(column => column.disabled || column.checked);
      this.isIndeterminate = !this.isAll && columns.some(column => !column.disabled && (column.checked || column.halfChecked));
    },
    allColumnEvent() {
      const isAll = !this.isAll;
      _xeUtils.default.eachTree(this.storeData.columns, column => {
        if (!column.disabled) {
          column.checked = isAll;
          column.halfChecked = false;
        }
      });
      this.isAll = isAll;
      this.checkStatus();
    },
    showEvent() {
      this.$nextTick(() => {
        const {
          $refs
        } = this;
        const targetElem = $refs.filename || $refs.sheetname || $refs.confirmBtn;
        if (targetElem) {
          targetElem.focus();
        }
      });
      this.checkStatus();
    },
    getExportOption() {
      const {
        checkedAll,
        storeData,
        defaultOptions,
        supportMerge
      } = this;
      const {
        hasMerge,
        columns
      } = storeData;
      const expColumns = _xeUtils.default.searchTree(columns, column => column.checked, {
        children: 'children',
        mapChildren: 'childNodes',
        original: true
      });
      return Object.assign({}, defaultOptions, {
        columns: expColumns,
        isMerge: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false
      });
    },
    cancelEvent() {
      this.storeData.visible = false;
    },
    confirmEvent(evnt) {
      if (this.storeData.isPrint) {
        this.printEvent(evnt);
      } else {
        this.exportEvent(evnt);
      }
    },
    printEvent() {
      const $xeTable = this.$parent;
      this.storeData.visible = false;
      $xeTable.print(Object.assign({}, $xeTable.printOpts, this.getExportOption()));
    },
    exportEvent() {
      const $xeTable = this.$xeTable;
      const exportOpts = $xeTable.exportOpts;
      this.loading = true;
      $xeTable.exportData(Object.assign({}, exportOpts, this.getExportOption())).then(() => {
        this.loading = false;
        this.storeData.visible = false;
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};