vxe-table 3.19.39 → 3.20.0-beta.1

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

@@ -1,3 +1,4 @@
+import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import XEUtils from 'xe-utils';
 import { parseFile } from '../../../ui/src/utils';
@@ -9,12 +10,14 @@ export default {
         globalMixins.sizeMixin
     ],
     props: {
-        defaultOptions: Object,
-        storeData: Object
-    },
-    components: {
-    // VxeModal,
-    // VxeRadio
+        defaultOptions: {
+            type: Object,
+            default: () => ({})
+        },
+        storeData: {
+            type: Object,
+            default: () => ({})
+        }
     },
     inject: {
         $xeTable: {
@@ -22,27 +25,36 @@ export default {
         }
     },
     data() {
-        return {
+        const reactData = {
             loading: false
         };
+        return {
+            reactData
+        };
     },
-    computed: {
-        selectName() {
-            return `${this.storeData.filename}.${this.storeData.type}`;
+    computed: Object.assign(Object.assign({}, {}), { computeSelectName() {
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const { storeData } = props;
+            return `${storeData.filename}.${storeData.type}`;
         },
-        hasFile() {
-            return this.storeData.file && this.storeData.type;
+        computeHasFile() {
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const { storeData } = props;
+            return storeData.file && storeData.type;
         },
-        parseTypeLabel() {
-            const { storeData } = this;
+        computeParseTypeLabel() {
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const { storeData } = props;
             const { type, typeList } = storeData;
             if (type) {
                 const selectItem = XEUtils.find(typeList, item => type === item.value);
-                return selectItem ? selectItem.label : '*.*';
+                return `${selectItem ? selectItem.label : '*.*'}`;
             }
             return `*.${typeList.map((item) => item.value).join(', *.')}`;
-        }
-    },
+        } }),
     created() {
         const $xeTableImportPanel = this;
         const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
@@ -60,167 +72,6 @@ export default {
             }
         });
     },
-    render(h) {
-        const $xeTable = this.$parent;
-        const $xeGrid = $xeTable.$xeGrid;
-        const $xeGantt = $xeTable.$xeGantt;
-        const { hasFile, loading, parseTypeLabel, defaultOptions, storeData, selectName } = this;
-        const slots = defaultOptions.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: true,
-                escClosable: true,
-                maskClosable: true,
-                showMaximize: true,
-                resize: true,
-                loading
-            },
-            on: {
-                input(value) {
-                    storeData.visible = value;
-                },
-                show: this.showEvent
-            },
-            scopedSlots: {
-                default: () => {
-                    const params = {
-                        $table: $xeTable,
-                        $grid: $xeGrid,
-                        $gantt: $xeGantt,
-                        options: defaultOptions,
-                        params: defaultOptions.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: {
-                                                        modelValue(value) {
-                                                            defaultOptions.mode = 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,
-                        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', {
-                                    on: {
-                                        click: this.cancelEvent
-                                    }
-                                }, getI18n('vxe.import.impCancel')),
-                                h('vxe-button', {
-                                    props: {
-                                        status: 'primary',
-                                        disabled: !hasFile || loading
-                                    },
-                                    on: {
-                                        click: this.importEvent
-                                    }
-                                }, getI18n('vxe.import.impConfirm'))
-                            ])
-                        ]);
-                }
-            }
-        });
-    },
     methods: {
         clearFileEvent() {
             Object.assign(this.storeData, {
@@ -230,33 +81,214 @@ export default {
             });
         },
         selectFileEvent() {
-            const $xeTable = this.$parent;
-            $xeTable.readFile(this.defaultOptions).then((params) => {
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const $xeTable = $xeImportPanel.$xeTable;
+            const { storeData, defaultOptions } = props;
+            $xeTable.readFile(defaultOptions).then((params) => {
                 const { file } = params;
-                Object.assign(this.storeData, parseFile(file), { file });
-            }).catch((e) => e);
+                Object.assign(storeData, parseFile(file), { file });
+            }).catch(() => { });
         },
         showEvent() {
-            this.$nextTick(() => {
-                const { $refs } = this;
-                const targetElem = $refs.fileBtn;
+            const $xeImportPanel = this;
+            $xeImportPanel.$nextTick(() => {
+                const targetElem = $xeImportPanel.$refs.fileBtn;
                 if (targetElem) {
                     targetElem.focus();
                 }
             });
         },
         cancelEvent() {
-            this.storeData.visible = false;
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const { storeData } = props;
+            storeData.visible = false;
         },
         importEvent() {
-            const $xeTable = this.$parent;
-            this.loading = true;
-            $xeTable.importByFile(this.storeData.file, Object.assign({}, $xeTable.importOpts, this.defaultOptions)).then(() => {
-                this.loading = false;
-                this.storeData.visible = false;
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const reactData = $xeImportPanel.reactData;
+            const $xeTable = $xeImportPanel.$xeTable;
+            const { storeData, defaultOptions } = props;
+            const importOpts = $xeTable.computeImportOpts;
+            reactData.loading = true;
+            $xeTable.importByFile(storeData.file, Object.assign({}, importOpts, defaultOptions)).then(() => {
+                reactData.loading = false;
+                storeData.visible = false;
             }).catch(() => {
-                this.loading = false;
+                reactData.loading = false;
+            });
+        },
+        renderVN(h) {
+            const $xeImportPanel = this;
+            const props = $xeImportPanel;
+            const reactData = $xeImportPanel.reactData;
+            const $xeTable = $xeImportPanel.$xeTable;
+            const $xeGrid = $xeTable.$xeGrid;
+            const $xeGantt = $xeTable.$xeGantt;
+            const { defaultOptions, storeData } = props;
+            const selectName = $xeImportPanel.computeSelectName;
+            const hasFile = $xeImportPanel.computeHasFile;
+            const parseTypeLabel = $xeImportPanel.computeParseTypeLabel;
+            const slots = defaultOptions.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: true,
+                    escClosable: true,
+                    maskClosable: true,
+                    showMaximize: true,
+                    resize: true,
+                    loading: reactData.loading
+                },
+                on: {
+                    input(value) {
+                        storeData.visible = value;
+                    },
+                    show: $xeImportPanel.showEvent
+                },
+                scopedSlots: {
+                    default: () => {
+                        const params = {
+                            $table: $xeTable,
+                            $grid: $xeGrid,
+                            $gantt: $xeGantt,
+                            options: defaultOptions,
+                            params: defaultOptions.params
+                        };
+                        return h('div', {
+                            class: 'vxe-table-export--panel'
+                        }, [
+                            topSlot
+                                ? h('div', {
+                                    class: 'vxe-table-export--panel-top'
+                                }, $xeTable.callSlot(topSlot, params, h))
+                                : renderEmptyElement($xeTable),
+                            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: $xeImportPanel.clearFileEvent
+                                                                }
+                                                            })
+                                                        ])
+                                                        : h('button', {
+                                                            ref: 'fileBtn',
+                                                            class: 'vxe-table-export--select--file',
+                                                            attrs: {
+                                                                type: 'button'
+                                                            },
+                                                            on: {
+                                                                click: $xeImportPanel.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: {
+                                                            modelValue(value) {
+                                                                defaultOptions.mode = value;
+                                                            }
+                                                        }
+                                                    })
+                                                ])
+                                            ])
+                                        ])
+                                    ])
+                                ]),
+                            bottomSlot
+                                ? h('div', {
+                                    class: 'vxe-table-export--panel-bottom'
+                                }, $xeTable.callSlot(bottomSlot, params, h))
+                                : renderEmptyElement($xeTable)
+                        ]);
+                    },
+                    footer: () => {
+                        const params = {
+                            $table: $xeTable,
+                            $grid: $xeGrid,
+                            $gantt: $xeGantt,
+                            options: defaultOptions,
+                            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', {
+                                        on: {
+                                            click: $xeImportPanel.cancelEvent
+                                        }
+                                    }, getI18n('vxe.import.impCancel')),
+                                    h('vxe-button', {
+                                        props: {
+                                            status: 'primary',
+                                            disabled: !hasFile || reactData.loading
+                                        },
+                                        on: {
+                                            click: $xeImportPanel.importEvent
+                                        }
+                                    }, getI18n('vxe.import.impConfirm'))
+                                ])
+                            ]);
+                    }
+                }
             });
         }
+    },
+    render(h) {
+        return this.renderVN(h);
     }
 };

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

@@ -502,8 +502,8 @@ export default {
             const checkboxOpts = $xeTable.computeCheckboxOpts;
             const mouseOpts = $xeTable.computeMouseOpts;
             const editOpts = $xeTable.computeEditOpts;
-            if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModnEvent) {
-                return $xeTable.triggerCellAreaModnEvent(evnt, params);
+            if (mouseConfig && mouseOpts.area && $xeTable.triggerClAreaModnEvent) {
+                return $xeTable.triggerClAreaModnEvent(evnt, params);
             }
             else {
                 if (checkboxConfig && checkboxOpts.range) {