From 40e52b20f498613929d2bf17bb2839009758d9a3 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Sat, 28 Jan 2023 22:08:57 +0800 Subject: [PATCH] =?UTF-8?q?grid=E5=A2=9E=E5=8A=A0=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=20proxy-query?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en.md | 6 +-- README.md | 6 +-- README.zh-TW.md | 6 +-- packages/grid/src/grid.ts | 70 +++++++++++++++++++++++---------- packages/table/src/table.ts | 4 +- packages/toolbar/src/toolbar.ts | 4 +- types/grid.d.ts | 4 ++ 7 files changed, 67 insertions(+), 33 deletions(-) diff --git a/README.en.md b/README.en.md index fb2b1172e..ca8eaecb2 100644 --- a/README.en.md +++ b/README.en.md @@ -20,9 +20,9 @@ A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, * Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time. * Plan - * [x] v1.0 Based on vue2.6+, Support for all major browsers. - * [x] v2.0 Based on vue2.6+, Support for all major browsers. - * [x] v3.0 Support modern browser and keep IE11 compatible to improve rendering performance. + * [x] ~~v1.0 Based on vue2.6+, Support for all major browsers.~~ + * [x] ~~v2.0 Based on vue2.6+, Support for all major browsers.~~ + * [x] v3.0 Based on vue2.6+, supports modern browsers and retains compatibility with IE11. * [x] v4.0 Based on vue3.2+, Only support modern browser, not IE. ## Browser Support diff --git a/README.md b/README.md index c8067c506..174479e3c 100644 --- a/README.md +++ b/README.md @@ -20,9 +20,9 @@ * 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 * 计划 - * [x] v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能 - * [x] v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能 - * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11，提升渲染性能 + * [x] ~~v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能~~ + * [x] ~~v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能~~ + * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11 * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE * [ ] 下一阶段：sticky 渲染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化 diff --git a/README.zh-TW.md b/README.zh-TW.md index 57b679794..79e78337d 100644 --- a/README.zh-TW.md +++ b/README.zh-TW.md @@ -20,9 +20,9 @@ * 為單行編輯表格而設計，支持增删改查及更多擴展，强大的功能的同時兼具效能 * 計劃 - * [x] v1.0 基於 vue2.6+，支持所有主流的瀏覽器，實現表格的一切實用的功能 - * [x] v2.0 基於 vue2.6+，支持所有主流的瀏覽器，同時兼具功能與效能 - * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11，提升渲染效能 + * [x] ~~v1.0 基於 vue2.6+，支持所有主流的瀏覽器，實現表格的一切實用的功能~~ + * [x] ~~v2.0 基於 vue2.6+，支持所有主流的瀏覽器，同時兼具功能與效能~~ + * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11 * [x] v4.0 基于 vue3.2+，只支持現代瀏覽器，不支持IE ## 瀏覽器支持 diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts index e67ff45f4..09fdc7b07 100644 --- a/packages/grid/src/grid.ts +++ b/packages/grid/src/grid.ts @@ -25,6 +25,9 @@ const gridComponentEmits: VxeGridEmits = [ 'form-reset', 'form-collapse', 'form-toggle-collapse', + 'proxy-query', + 'proxy-delete', + 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom' @@ -296,7 +299,7 @@ export default defineComponent({ if (selectRecords.length) { return VXETable.modal.confirm({ id: `cfm_${code}`, content: GlobalConfig.i18n(alertKey), escClosable: true }).then((type) => { if (type === 'confirm') { - callback() + return callback() } }) } else { @@ -324,7 +327,9 @@ export default defineComponent({ tablePage.pageSize = pageSize gridMethods.dispatchEvent('page-change', params) if (proxyConfig) { - gridMethods.commitProxy('query') + gridMethods.commitProxy('query').then((rest) => { + gridMethods.dispatchEvent('proxy-query', rest, params.$event) + }) } } @@ -338,7 +343,9 @@ export default defineComponent({ reactData.sortData = params.sortList if (proxyConfig) { reactData.tablePage.currentPage = 1 - gridMethods.commitProxy('query') + gridMethods.commitProxy('query').then((rest) => { + gridMethods.dispatchEvent('proxy-query', rest, params.$event) + }) } } gridMethods.dispatchEvent('sort-change', params) @@ -354,7 +361,9 @@ export default defineComponent({ reactData.filterData = params.filterList if (proxyConfig) { reactData.tablePage.currentPage = 1 - gridMethods.commitProxy('query') + gridMethods.commitProxy('query').then((rest) => { + gridMethods.dispatchEvent('proxy-query', rest, params.$event) + }) } } gridMethods.dispatchEvent('filter-change', params) @@ -363,7 +372,9 @@ export default defineComponent({ const submitFormEvent: VxeFormEvents.Submit = (params) => { const { proxyConfig } = props if (proxyConfig) { - gridMethods.commitProxy('reload') + gridMethods.commitProxy('reload').then((rest) => { + gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event) + }) } gridMethods.dispatchEvent('form-submit', params) } @@ -371,7 +382,9 @@ export default defineComponent({ const resetFormEvent: VxeFormEvents.Reset = (params) => { const { proxyConfig } = props if (proxyConfig) { - gridMethods.commitProxy('reload') + gridMethods.commitProxy('reload').then((rest) => { + gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event) + }) } gridMethods.dispatchEvent('form-reset', params) } @@ -663,7 +676,9 @@ export default defineComponent({ if (!proxyInited) { reactData.proxyInited = true if (proxyOpts.autoLoad !== false) { - nextTick(() => gridMethods.commitProxy('_init')) + nextTick().then(() => gridMethods.commitProxy('_init')).then((rest) => { + gridMethods.dispatchEvent('proxy-query', { ...rest, isInited: true }, new Event('init')) + }) } } } @@ -699,11 +714,9 @@ export default defineComponent({ const btnParams = button ? button.params : null switch (code) { case 'insert': - $xetable.insert({}) - break + return $xetable.insert({}) case 'insert_actived': - $xetable.insert({}).then(({ row }) => $xetable.setActiveRow(row)) - break + return $xetable.insert({}).then(({ row }) => $xetable.setEditRow(row)) case 'mark_cancel': triggerPendingEvent(code) break @@ -722,8 +735,7 @@ export default defineComponent({ $xetable.openExport(btnParams) break case 'reset_custom': - $xetable.resetColumn(true) - break + return $xetable.resetColumn(true) case '_init': case 'reload': case 'query': { @@ -769,9 +781,11 @@ export default defineComponent({ filterList = $xetable.getCheckedFilters() } } - const params: any = { + const commitParams = { code, button, + isInited, + isReload, $grid: $xegrid, page: pageParams, sort: sortList.length ? sortList[0] : {}, @@ -783,9 +797,8 @@ export default defineComponent({ reactData.sortData = sortList reactData.filterData = filterList reactData.tableLoading = true - const applyArgs = [params].concat(args) + const applyArgs = [commitParams].concat(args) return Promise.resolve((beforeQuery || ajaxMethods)(...applyArgs)) - .catch(e => e) .then(rest => { reactData.tableLoading = false if (rest) { @@ -807,6 +820,9 @@ export default defineComponent({ if (afterQuery) { afterQuery(...applyArgs) } + return { status: true } + }).catch(() => { + return { status: false } }) } else { if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') { @@ -821,7 +837,8 @@ export default defineComponent({ const selectRecords = gridExtendTableMethods.getCheckboxRecords() const removeRecords = selectRecords.filter(row => !$xetable.isInsertByRow(row)) const body = { removeRecords } - const applyArgs = [{ $grid: $xegrid, code, button, body, options: ajaxMethods }].concat(args) + const commitParams = { $grid: $xegrid, code, button, body, options: ajaxMethods } + const applyArgs = [commitParams].concat(args) if (selectRecords.length) { return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => { if (!removeRecords.length) { @@ -846,6 +863,7 @@ export default defineComponent({ } else { gridMethods.commitProxy('query') } + return { status: true } }) .catch(rest => { reactData.tableLoading = false @@ -857,6 +875,7 @@ export default defineComponent({ } VXETable.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' }) } + return { status: false } }) }) } else { @@ -882,7 +901,8 @@ export default defineComponent({ if (ajaxMethods) { const body = Object.assign({ pendingRecords: reactData.pendingRecords }, $xetable.getRecordset()) const { insertRecords, removeRecords, updateRecords, pendingRecords } = body - const applyArgs = [{ $grid: $xegrid, code, button, body, options: ajaxMethods }].concat(args) + const commitParams = { $grid: $xegrid, code, button, body, options: ajaxMethods } + const applyArgs = [commitParams].concat(args) // 排除掉新增且标记为删除的数据 if (insertRecords.length) { body.pendingRecords = pendingRecords.filter((row) => $xetable.findRowIndexOf(insertRecords, row) === -1) @@ -921,6 +941,7 @@ export default defineComponent({ } else { gridMethods.commitProxy('query') } + return { status: true } }) .catch(rest => { reactData.tableLoading = false @@ -933,6 +954,7 @@ export default defineComponent({ } VXETable.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' }) } + return { status: false } }) } else { if (isMsg) { @@ -1065,12 +1087,20 @@ export default defineComponent({ } return 0 }, + triggerToolbarCommitEvent (params, evnt) { + const { code } = params + return gridMethods.commitProxy(params, evnt).then((rest) => { + if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) { + gridMethods.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code as 'delete' | 'save'}` : 'proxy-query', { ...rest, isReload: code === 'reload' }, evnt) + } + }) + }, triggerToolbarBtnEvent (button, evnt) { - gridMethods.commitProxy(button, evnt) + gridPrivateMethods.triggerToolbarCommitEvent(button, evnt) gridMethods.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt) }, triggerToolbarTolEvent (tool, evnt) { - gridMethods.commitProxy(tool, evnt) + gridPrivateMethods.triggerToolbarCommitEvent(tool, evnt) gridMethods.dispatchEvent('toolbar-tool-click', { code: tool.code, tool, $event: evnt }) }, triggerZoomEvent (evnt) { diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index a252d800c..2fbf025d1 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -3294,7 +3294,7 @@ export default defineComponent({ const rowOpts = computeRowOpts.value const el = refElem.value tableMethods.clearCurrentRow() - tableMethods.clearCurrentColumn() + // tableMethods.clearCurrentColumn() reactData.currentRow = row if (rowOpts.isCurrent || props.highlightCurrentRow) { if (el) { @@ -3385,7 +3385,7 @@ export default defineComponent({ setCurrentColumn (fieldOrColumn) { const column = handleFieldOrColumn($xetable, fieldOrColumn) if (column) { - tableMethods.clearCurrentRow() + // tableMethods.clearCurrentRow() tableMethods.clearCurrentColumn() reactData.currentColumn = column } diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts index 4e4527c09..9c5717529 100644 --- a/packages/toolbar/src/toolbar.ts +++ b/packages/toolbar/src/toolbar.ts @@ -264,7 +264,7 @@ export default defineComponent({ }, 300) } - const refreshEvent = () => { + const refreshEvent = (evnt: KeyboardEvent) => { const { isRefresh } = reactData const refreshOpts = computeRefreshOpts.value if (!isRefresh) { @@ -280,7 +280,7 @@ export default defineComponent({ } } else if ($xegrid) { reactData.isRefresh = true - $xegrid.commitProxy(refreshOpts.code || 'reload').catch((e) => e).then(() => { + $xegrid.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, evnt).catch((e) => e).then(() => { reactData.isRefresh = false }) } diff --git a/types/grid.d.ts b/types/grid.d.ts index 3b0bbf7fa..c7cb2b5ff 100644 --- a/types/grid.d.ts +++ b/types/grid.d.ts @@ -73,6 +73,9 @@ export type VxeGridEmits = [ 'form-reset', 'form-collapse', 'form-toggle-collapse', + 'proxy-query', + 'proxy-delete', + 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom' @@ -132,6 +135,7 @@ export interface VxeGridMethods extends GridMethods, TablePublicMethods { } export interface GridPrivateMethods { callSlot(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[] extendTableMethods(methodKeys: T[]): any + triggerToolbarCommitEvent(params: VxeToolbarPropTypes.ButtonConfig | VxeToolbarPropTypes.ToolConfig, evnt: Event): Promise triggerToolbarBtnEvent(button: VxeToolbarPropTypes.ButtonConfig, evnt: Event): void triggerToolbarTolEvent(button: VxeToolbarPropTypes.ToolConfig, evnt: Event): void triggerZoomEvent(evnt: Event): void