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

package/packages/table/module/export/import-panel.ts

@@ -6,7 +6,7 @@ import { errLog } from '../../../ui/src/log'
 
 import type { VxeModalComponent, VxeSelectComponent, VxeButtonComponent } from 'vxe-pc-ui'
 
-const { getI18n, getIcon, globalMixins } = VxeUI
+const { getI18n, getIcon, globalMixins, renderEmptyElement } = VxeUI
 
 export default {
   name: 'VxeTableImportPanel',
@@ -21,6 +21,11 @@ export default {
     // VxeModal,
     // VxeRadio
   },
+  inject: {
+    $xeTable: {
+      default: null
+    }
+  },
   data () {
     return {
       loading: false
@@ -65,18 +70,32 @@ export default {
     }
   },
   render (this: any, h: CreateElement) {
+    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: {
@@ -84,91 +103,134 @@ export default {
           storeData.visible = value
         },
         show: this.showEvent
-      }
-    }, [
-      h('div', {
-        class: 'vxe-export--panel'
-      }, [
-        h('table', {
-          attrs: {
-            cellspacing: 0,
-            cellpadding: 0,
-            border: 0
+      },
+      scopedSlots: {
+        default: () => {
+          const params = {
+            $table: $xeTable,
+            $grid: $xeTable.xegrid,
+            options: importOpts,
+            params: importOpts.params as any
           }
-        }, [
-          h('tbody', [
-            h('tr', [
-              h('td', getI18n('vxe.import.impFile')),
-              h('td', [
-                hasFile
-                  ? h('div', {
-                    class: 'vxe-import-selected--file',
+
+          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: {
-                      title: selectName
+                      cellspacing: 0,
+                      cellpadding: 0,
+                      border: 0
                     }
                   }, [
-                    h('span', selectName),
-                    h('i', {
-                      class: getIcon().INPUT_CLEAR,
-                      on: {
-                        click: this.clearFileEvent
-                      }
-                    })
+                    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: any) {
+                                defaultOptions.mode = value
+                              }
+                            }
+                          })
+                        ])
+                      ])
+                    ])
                   ])
-                  : h('button', {
-                    ref: 'fileBtn',
-                    class: 'vxe-import-select--file',
-                    attrs: {
-                      type: 'button'
-                    },
+                ]
+            ),
+            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 as any
+          }
+          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.selectFileEvent
+                      click: this.cancelEvent
                     }
-                  }, 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: any) {
-                      defaultOptions.mode = value
+                  }, getI18n('vxe.import.impCancel')),
+                  h('vxe-button', {
+                    props: {
+                      status: 'primary',
+                      disabled: !hasFile
+                    },
+                    on: {
+                      click: this.importEvent
                     }
-                  }
-                })
-              ])
-            ])
-          ])
-        ]),
-        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'))
-        ])
-      ])
-    ])
+                  }, getI18n('vxe.import.impConfirm'))
+                ])
+              ]
+          )
+        }
+      }
+    })
   },
   methods: {
     clearFileEvent () {

package/packages/table/module/export/mixin.ts

@@ -919,6 +919,13 @@ function handleFileImport ($xetable: any, file: any, opts: any) {
   })
 }
 
+function handleCloseExport () {
+  if (VxeUI.modal) {
+    return VxeUI.modal.close('VXE_EXPORT_MODAL')
+  }
+  return Promise.resolve()
+}
+
 /**
  * 读取本地文件
  * @param {*} options 参数
@@ -1429,6 +1436,12 @@ export default {
         }
       })
     },
+    _closeImport () {
+      if (VxeUI.modal) {
+        return VxeUI.modal.close('VXE_IMPORT_MODAL')
+      }
+      return Promise.resolve()
+    },
     _openImport (options: any) {
       const { importOpts } = this
       const defOpts = Object.assign({
@@ -1482,6 +1495,7 @@ export default {
       }
       this.initStore.import = true
     },
+    _closeExport: handleCloseExport,
     _openExport (options: any) {
       const { exportOpts } = this
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -1491,6 +1505,7 @@ export default {
       }
       return handleExportAndPrint(this, Object.assign({}, exportOpts, options))
     },
+    _closePrint: handleCloseExport,
     _openPrint (options: any) {
       const { printOpts } = this
       if (process.env.VUE_APP_VXE_ENV === 'development') {

package/packages/table/src/methods.ts

@@ -5971,7 +5971,7 @@ const Methods = {
 } as any
 
 // 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: any[]) {

package/styles/components/table-module/export.scss

@@ -1,6 +1,6 @@
 @use '../../helpers/baseMixin.scss';
 
-.vxe-export--panel-column > ul {
+.vxe-table-export--panel-column > ul {
   list-style-type: none;
   overflow: auto;
   margin: 0;
@@ -15,8 +15,8 @@
   }
 }
 
-.vxe-export--panel {
-  & > table {
+.vxe-table-export--panel {
+  .vxe-table-export--panel-table {
     width: 100%;
     border: 0;
     table-layout: fixed;
@@ -36,13 +36,13 @@
         & > .vxe-select {
           width: 80%;
         }
-        & > .vxe-export--panel-option-row {
+        & > .vxe-table-export--panel-option-row {
           padding: 0.25em 0;
         }
       }
     }
   }
-  .vxe-export--panel-column {
+  .vxe-table-export--panel-column {
     width: 80%;
     border: 1px solid var(--vxe-ui-input-border-color);
     margin: 3px 0;
@@ -62,19 +62,26 @@
         }
       }
     }
-    .vxe-export--panel-column-header {
+    .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-column-body {
+    .vxe-table-export--panel-column-body {
       padding: 0.2em 0;
       min-height: 10em;
       max-height: 17.6em;
     }
   }
-  .vxe-import-selected--file {
+  .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;
@@ -97,7 +104,7 @@
       }
     }
   }
-  .vxe-import-select--file {
+  .vxe-table-export--select--file {
     width: 80%;
     border: 1px dashed var(--vxe-ui-input-border-color);
     padding: 6px 34px;
@@ -116,12 +123,8 @@
       border-color: var(--vxe-ui-font-primary-color);
     }
   }
-  .vxe-export--panel-btns {
-    text-align: right;
-    padding: 0.8em 0.25em 0.25em 0.25em;
-  }
 }
 
-.vxe-export--panel-column-option {
+.vxe-table-export--panel-column-option {
   @include baseMixin.createCheckboxIcon();
 }