vxe-table 3.10.0-beta.2 → 3.10.0-beta.3

package/es/table/module/export/import-panel.js

@@ -2,7 +2,7 @@ import { VxeUI } from '../../../ui';
 import XEUtils from 'xe-utils';
 import { parseFile } from '../../../ui/src/utils';
 import { errLog } from '../../../ui/src/log';
-const { getI18n, getIcon, globalMixins } = VxeUI;
+const { getI18n, getIcon, globalMixins, renderEmptyElement } = VxeUI;
 export default {
     name: 'VxeTableImportPanel',
     mixins: [
@@ -16,6 +16,11 @@ export default {
     // VxeModal,
     // VxeRadio
     },
+    inject: {
+        $xeTable: {
+            default: null
+        }
+    },
     data() {
         return {
             loading: false
@@ -58,18 +63,30 @@ export default {
         }
     },
     render(h) {
+        const $xeTable = this.$xeTable;
+        const importOpts = $xeTable.importOpts;
         const { hasFile, parseTypeLabel, defaultOptions, storeData, selectName } = this;
+        const slots = importOpts.slots || {};
+        const topSlot = slots.top;
+        const bottomSlot = slots.bottom;
+        const defaultSlot = slots.default;
+        const footerSlot = slots.footer;
         return h('vxe-modal', {
             ref: 'modal',
             props: {
+                id: 'VXE_IMPORT_MODAL',
                 value: storeData.visible,
                 title: getI18n('vxe.import.impTitle'),
                 width: 540,
+                minWidth: 360,
+                minHeight: 240,
                 mask: true,
                 lockView: true,
-                showFooter: false,
+                showFooter: true,
                 escClosable: true,
                 maskClosable: true,
+                showMaximize: true,
+                resize: true,
                 loading: this.loading
             },
             on: {
@@ -77,91 +94,131 @@ export default {
                     storeData.visible = value;
                 },
                 show: this.showEvent
-            }
-        }, [
-            h('div', {
-                class: 'vxe-export--panel'
-            }, [
-                h('table', {
-                    attrs: {
-                        cellspacing: 0,
-                        cellpadding: 0,
-                        border: 0
-                    }
-                }, [
-                    h('tbody', [
-                        h('tr', [
-                            h('td', getI18n('vxe.import.impFile')),
-                            h('td', [
-                                hasFile
-                                    ? h('div', {
-                                        class: 'vxe-import-selected--file',
-                                        attrs: {
-                                            title: selectName
-                                        }
-                                    }, [
-                                        h('span', selectName),
-                                        h('i', {
-                                            class: getIcon().INPUT_CLEAR,
-                                            on: {
-                                                click: this.clearFileEvent
-                                            }
-                                        })
+            },
+            scopedSlots: {
+                default: () => {
+                    const params = {
+                        $table: $xeTable,
+                        $grid: $xeTable.xegrid,
+                        options: importOpts,
+                        params: importOpts.params
+                    };
+                    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', {
+                                    class: 'vxe-table-export--panel-table',
+                                    attrs: {
+                                        cellspacing: 0,
+                                        cellpadding: 0,
+                                        border: 0
+                                    }
+                                }, [
+                                    h('tbody', [
+                                        h('tr', [
+                                            h('td', getI18n('vxe.import.impFile')),
+                                            h('td', [
+                                                hasFile
+                                                    ? h('div', {
+                                                        class: 'vxe-table-export--selected--file',
+                                                        attrs: {
+                                                            title: selectName
+                                                        }
+                                                    }, [
+                                                        h('span', selectName),
+                                                        h('i', {
+                                                            class: getIcon().INPUT_CLEAR,
+                                                            on: {
+                                                                click: this.clearFileEvent
+                                                            }
+                                                        })
+                                                    ])
+                                                    : h('button', {
+                                                        ref: 'fileBtn',
+                                                        class: 'vxe-table-export--select--file',
+                                                        attrs: {
+                                                            type: 'button'
+                                                        },
+                                                        on: {
+                                                            click: this.selectFileEvent
+                                                        }
+                                                    }, getI18n('vxe.import.impSelect'))
+                                            ])
+                                        ]),
+                                        h('tr', [
+                                            h('td', getI18n('vxe.import.impType')),
+                                            h('td', parseTypeLabel)
+                                        ]),
+                                        h('tr', [
+                                            h('td', getI18n('vxe.import.impMode')),
+                                            h('td', [
+                                                h('vxe-select', {
+                                                    props: {
+                                                        value: defaultOptions.mode,
+                                                        options: storeData.modeList
+                                                    },
+                                                    on: {
+                                                        input(value) {
+                                                            defaultOptions.mode = value;
+                                                        }
+                                                    }
+                                                })
+                                            ])
+                                        ])
                                     ])
-                                    : h('button', {
-                                        ref: 'fileBtn',
-                                        class: 'vxe-import-select--file',
-                                        attrs: {
-                                            type: 'button'
-                                        },
-                                        on: {
-                                            click: this.selectFileEvent
-                                        }
-                                    }, getI18n('vxe.import.impSelect'))
-                            ])
-                        ]),
-                        h('tr', [
-                            h('td', getI18n('vxe.import.impType')),
-                            h('td', parseTypeLabel)
-                        ]),
-                        h('tr', [
-                            h('td', getI18n('vxe.import.impMode')),
-                            h('td', [
-                                h('vxe-select', {
+                                ])
+                            ]),
+                        bottomSlot
+                            ? h('div', {
+                                class: 'vxe-table-export--panel-bottom'
+                            }, $xeTable.callSlot(bottomSlot, params, h))
+                            : renderEmptyElement(this)
+                    ]);
+                },
+                footer: () => {
+                    const params = {
+                        $table: $xeTable,
+                        $grid: $xeTable.xegrid,
+                        options: importOpts,
+                        params: importOpts.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', {
+                                    on: {
+                                        click: this.cancelEvent
+                                    }
+                                }, getI18n('vxe.import.impCancel')),
+                                h('vxe-button', {
                                     props: {
-                                        value: defaultOptions.mode,
-                                        options: storeData.modeList
+                                        status: 'primary',
+                                        disabled: !hasFile
                                     },
                                     on: {
-                                        input(value) {
-                                            defaultOptions.mode = value;
-                                        }
+                                        click: this.importEvent
                                     }
-                                })
+                                }, getI18n('vxe.import.impConfirm'))
                             ])
-                        ])
-                    ])
-                ]),
-                h('div', {
-                    class: 'vxe-export--panel-btns'
-                }, [
-                    h('vxe-button', {
-                        on: {
-                            click: this.cancelEvent
-                        }
-                    }, getI18n('vxe.import.impCancel')),
-                    h('vxe-button', {
-                        props: {
-                            status: 'primary',
-                            disabled: !hasFile
-                        },
-                        on: {
-                            click: this.importEvent
-                        }
-                    }, getI18n('vxe.import.impConfirm'))
-                ])
-            ])
-        ]);
+                        ]);
+                }
+            }
+        });
     },
     methods: {
         clearFileEvent() {

package/es/table/module/export/mixin.js

@@ -882,6 +882,12 @@ function handleFileImport($xetable, file, opts) {
         return Promise.reject(e);
     });
 }
+function handleCloseExport() {
+    if (VxeUI.modal) {
+        return VxeUI.modal.close('VXE_EXPORT_MODAL');
+    }
+    return Promise.resolve();
+}
 /**
  * 读取本地文件
  * @param {*} options 参数
@@ -1388,6 +1394,12 @@ export default {
                 };
             });
         },
+        _closeImport() {
+            if (VxeUI.modal) {
+                return VxeUI.modal.close('VXE_IMPORT_MODAL');
+            }
+            return Promise.resolve();
+        },
         _openImport(options) {
             const { importOpts } = this;
             const defOpts = Object.assign({
@@ -1441,6 +1453,7 @@ export default {
             }
             this.initStore.import = true;
         },
+        _closeExport: handleCloseExport,
         _openExport(options) {
             const { exportOpts } = this;
             if (process.env.NODE_ENV === 'development') {
@@ -1450,6 +1463,7 @@ export default {
             }
             return handleExportAndPrint(this, Object.assign({}, exportOpts, options));
         },
+        _closePrint: handleCloseExport,
         _openPrint(options) {
             const { printOpts } = this;
             if (process.env.NODE_ENV === 'development') {

package/es/table/src/methods.js

@@ -6018,7 +6018,7 @@ const Methods = {
     }
 };
 // Module methods
-const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,openPrint,getPrintHtml,exportData,openImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom'.split(',');
+const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom'.split(',');
 funcs.forEach(name => {
     Methods[name] = function (...args) {
         if (process.env.NODE_ENV === 'development') {

package/es/table/style.css

@@ -1148,7 +1148,7 @@
   cursor: help;
 }
 
-.vxe-export--panel-column > ul {
+.vxe-table-export--panel-column > ul {
   list-style-type: none;
   overflow: auto;
   margin: 0;
@@ -1158,37 +1158,37 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-export--panel-column > ul > li {
+.vxe-table-export--panel-column > ul > li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
 }
 
-.vxe-export--panel > table {
+.vxe-table-export--panel .vxe-table-export--panel-table {
   width: 100%;
   border: 0;
   table-layout: fixed;
 }
-.vxe-export--panel > table tr td {
+.vxe-table-export--panel .vxe-table-export--panel-table tr td {
   padding: 0 10px;
 }
-.vxe-export--panel > table tr td:nth-child(1) {
+.vxe-table-export--panel .vxe-table-export--panel-table tr td:nth-child(1) {
   text-align: right;
   width: 30%;
   font-weight: 700;
   padding: 8px 10px;
 }
-.vxe-export--panel > table tr td:nth-child(2) {
+.vxe-table-export--panel .vxe-table-export--panel-table tr td:nth-child(2) {
   width: 70%;
 }
-.vxe-export--panel > table tr td > .vxe-input, .vxe-export--panel > table tr td > .vxe-select {
+.vxe-table-export--panel .vxe-table-export--panel-table tr td > .vxe-input, .vxe-table-export--panel .vxe-table-export--panel-table tr td > .vxe-select {
   width: 80%;
 }
-.vxe-export--panel > table tr td > .vxe-export--panel-option-row {
+.vxe-table-export--panel .vxe-table-export--panel-table tr td > .vxe-table-export--panel-option-row {
   padding: 0.25em 0;
 }
-.vxe-export--panel .vxe-export--panel-column {
+.vxe-table-export--panel .vxe-table-export--panel-column {
   width: 80%;
   border: 1px solid var(--vxe-ui-input-border-color);
   margin: 3px 0;
@@ -1197,63 +1197,68 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li {
   padding: 0.2em 1em 0.2em 1em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--2 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--2 {
   padding-left: 3.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--2 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--2 .vxe-checkbox--icon {
   left: 1.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--3 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--3 {
   padding-left: 4.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--3 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--3 .vxe-checkbox--icon {
   left: 2.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--4 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--4 {
   padding-left: 5.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--4 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--4 .vxe-checkbox--icon {
   left: 3.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--5 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--5 {
   padding-left: 6.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--5 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--5 .vxe-checkbox--icon {
   left: 4.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--6 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--6 {
   padding-left: 7.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--6 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--6 .vxe-checkbox--icon {
   left: 5.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--7 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--7 {
   padding-left: 8.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--7 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--7 .vxe-checkbox--icon {
   left: 6.8em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--8 {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--8 {
   padding-left: 9.5em;
 }
-.vxe-export--panel .vxe-export--panel-column > ul > li.level--8 .vxe-checkbox--icon {
+.vxe-table-export--panel .vxe-table-export--panel-column > ul > li.level--8 .vxe-checkbox--icon {
   left: 7.8em;
 }
-.vxe-export--panel .vxe-export--panel-column .vxe-export--panel-column-header {
+.vxe-table-export--panel .vxe-table-export--panel-column .vxe-table-export--panel-column-header {
   padding: 0.1em 0;
   background-color: var(--vxe-ui-table-header-background-color);
   font-weight: 700;
   border-bottom: 1px solid var(--vxe-ui-table-border-color);
 }
-.vxe-export--panel .vxe-export--panel-column .vxe-export--panel-column-body {
+.vxe-table-export--panel .vxe-table-export--panel-column .vxe-table-export--panel-column-body {
   padding: 0.2em 0;
   min-height: 10em;
   max-height: 17.6em;
 }
-.vxe-export--panel .vxe-import-selected--file {
+.vxe-table-export--panel .vxe-table-export--panel-btns {
+  text-align: right;
+  padding: 0.8em 0.25em 0.25em 0.25em;
+}
+
+.vxe-table-export--panel .vxe-table-export--selected--file {
   padding-right: 40px;
   position: relative;
   overflow: hidden;
@@ -1263,7 +1268,7 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-export--panel .vxe-import-selected--file > i {
+.vxe-table-export--panel .vxe-table-export--selected--file > i {
   display: none;
   position: absolute;
   top: 50%;
@@ -1272,13 +1277,13 @@
   font-size: 16px;
   cursor: pointer;
 }
-.vxe-export--panel .vxe-import-selected--file:hover {
+.vxe-table-export--panel .vxe-table-export--selected--file:hover {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel .vxe-import-selected--file:hover > i {
+.vxe-table-export--panel .vxe-table-export--selected--file:hover > i {
   display: block;
 }
-.vxe-export--panel .vxe-import-select--file {
+.vxe-table-export--panel .vxe-table-export--select--file {
   width: 80%;
   border: 1px dashed var(--vxe-ui-input-border-color);
   padding: 6px 34px;
@@ -1291,23 +1296,19 @@
           user-select: none;
   cursor: pointer;
 }
-.vxe-export--panel .vxe-import-select--file:focus {
+.vxe-table-export--panel .vxe-table-export--select--file:focus {
   border-color: var(--vxe-ui-font-primary-color);
   box-shadow: 0 0 0.25em 0 var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel .vxe-import-select--file:hover {
+.vxe-table-export--panel .vxe-table-export--select--file:hover {
   color: var(--vxe-ui-font-primary-color);
   border-color: var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel .vxe-export--panel-btns {
-  text-align: right;
-  padding: 0.8em 0.25em 0.25em 0.25em;
-}
 
-.vxe-export--panel-column-option .vxe-checkbox--icon {
+.vxe-table-export--panel-column-option .vxe-checkbox--icon {
   font-size: 1.34em;
 }
-.vxe-export--panel-column-option .vxe-checkbox--icon {
+.vxe-table-export--panel-column-option .vxe-checkbox--icon {
   color: var(--vxe-ui-input-border-color);
   vertical-align: middle;
   font-weight: 700;
@@ -1315,29 +1316,29 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-export--panel-column-option.is--checked, .vxe-export--panel-column-option.is--indeterminate {
+.vxe-table-export--panel-column-option.is--checked, .vxe-table-export--panel-column-option.is--indeterminate {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel-column-option.is--checked .vxe-checkbox--icon, .vxe-export--panel-column-option.is--indeterminate .vxe-checkbox--icon {
+.vxe-table-export--panel-column-option.is--checked .vxe-checkbox--icon, .vxe-table-export--panel-column-option.is--indeterminate .vxe-checkbox--icon {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel-column-option:not(.is--disabled) {
+.vxe-table-export--panel-column-option:not(.is--disabled) {
   cursor: pointer;
 }
-.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon {
+.vxe-table-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-export--panel-column-option.is--hidden {
+.vxe-table-export--panel-column-option.is--hidden {
   cursor: default;
 }
-.vxe-export--panel-column-option.is--disabled {
+.vxe-table-export--panel-column-option.is--disabled {
   color: var(--vxe-ui-font-disabled-color);
   cursor: not-allowed;
 }
-.vxe-export--panel-column-option.is--disabled .vxe-checkbox--icon {
+.vxe-table-export--panel-column-option.is--disabled .vxe-checkbox--icon {
   color: var(--vxe-ui-input-disabled-color);
 }
-.vxe-export--panel-column-option .vxe-checkbox--label {
+.vxe-table-export--panel-column-option .vxe-checkbox--label {
   padding-left: 0.5em;
   vertical-align: middle;
 }