From 7ba64e1c86e4493ebfbeb618b534b901f3f209db Mon Sep 17 00:00:00 2001 From: aringlai Date: Tue, 28 Nov 2023 17:11:52 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20curd=E4=B8=ADbefore=E3=80=81after?= =?UTF-8?q?=E4=B8=AD=E6=8E=A7=E5=88=B6=E5=90=8E=E7=BB=AD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples/antdUseCurd.vue | 45 +++++++++++++++++++++ docs/examples/elementUseCurd.vue | 45 +++++++++++++++++++++ docs/examples/fesdUseCurd.vue | 45 +++++++++++++++++++++ package.json | 2 +- packages/antd-plugin/package.json | 2 +- packages/antd-plugin/src/useCurd.ts | 49 ++++++++++++----------- packages/element-plugin/package.json | 2 +- packages/element-plugin/src/useCurd.ts | 48 +++++++++++++---------- packages/fes-plugin/package.json | 2 +- packages/fes-plugin/src/index.ts | 2 +- packages/fes-plugin/src/useCurd.ts | 54 ++++++++++++++------------ 11 files changed, 224 insertions(+), 72 deletions(-) diff --git a/docs/examples/antdUseCurd.vue b/docs/examples/antdUseCurd.vue index a1d289a..685eb3e 100644 --- a/docs/examples/antdUseCurd.vue +++ b/docs/examples/antdUseCurd.vue @@ -106,17 +106,62 @@ const { render, editTypeRef, selectedRows, openModal } = useCurd({ actions: { query: { api: '/user.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认数据绑定逻辑 + // 修改请求接口，适配绑定数据 + const { pager, list } = data; + return { + list: list, + pager: pager, + }; + }, }, create: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, reset: {}, update: { hidden: true, // 更新按钮修改行数据判断时，可以隐藏默认更新按钮，在template实现 api: '/error.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, delete: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认提示和刷新列表 + return data; + }, }, view: {}, }, diff --git a/docs/examples/elementUseCurd.vue b/docs/examples/elementUseCurd.vue index 2f425db..2047f67 100644 --- a/docs/examples/elementUseCurd.vue +++ b/docs/examples/elementUseCurd.vue @@ -103,17 +103,62 @@ const { render, editTypeRef, selectedRows, openModal } = useCurd({ actions: { query: { api: '/user.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认数据绑定逻辑 + // 修改请求接口，适配绑定数据 + const { pager, list } = data; + return { + list: list, + pager: pager, + }; + }, }, create: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, reset: {}, update: { hidden: true, // 更新按钮修改行数据判断时，可以隐藏默认更新按钮，在template实现 api: '/error.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, delete: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认提示和刷新列表 + return data; + }, }, view: {}, }, diff --git a/docs/examples/fesdUseCurd.vue b/docs/examples/fesdUseCurd.vue index e31d5f3..a79459a 100644 --- a/docs/examples/fesdUseCurd.vue +++ b/docs/examples/fesdUseCurd.vue @@ -98,17 +98,62 @@ const { render, editTypeRef, query, selectedRows, openModal } = useCurd({ actions: { query: { api: '/user.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认数据绑定逻辑 + // 修改请求接口，适配绑定数据 + const { pager, list } = data; + return { + list: list, + pager: pager, + }; + }, }, create: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, reset: {}, update: { hidden: true, // 更新按钮修改行数据判断时，可以隐藏默认更新按钮，在template实现 api: '/error.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止关闭弹窗和刷新列表 + return data; + }, }, delete: { api: '/success.json', + before(params) { + // 修改请求参数 + params.myId = '111'; + // return false; // 阻止请求 + return params; + }, + after(data) { + // return false; // 阻止默认提示和刷新列表 + return data; + }, }, view: {}, }, diff --git a/package.json b/package.json index be96eed..e1ca510 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "koala-form", - "version": "2.0.2", + "version": "2.0.3", "description": "vue form helper", "author": "aringlai", "license": "MIT", diff --git a/packages/antd-plugin/package.json b/packages/antd-plugin/package.json index 0e80ee2..795b33c 100644 --- a/packages/antd-plugin/package.json +++ b/packages/antd-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@koala-form/antd-plugin", - "version": "2.0.2", + "version": "2.0.3", "description": "KoalaForm Ant Design Vue ui插件", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/antd-plugin/src/useCurd.ts b/packages/antd-plugin/src/useCurd.ts index 289df1a..80ddefc 100644 --- a/packages/antd-plugin/src/useCurd.ts +++ b/packages/antd-plugin/src/useCurd.ts @@ -41,10 +41,10 @@ interface Action extends ComponentDesc { reqConfig?: any; /** 隐藏默认按钮 */ hidden?: boolean; - /** 请求前执行，可修改参数 */ - before?: (params: Record, ...args: any[]) => Record; - /** 请求后执行，可修改结果 */ - after?: (params: Record) => Record; + /** 请求前执行，可修改请求参数，返回false可阻止请求发送 */ + before?: (params: Record, ...args: any[]) => Record | boolean; + /** 请求后执行，可修改结果，返回false可阻止默认流程的执行 */ + after?: (params: Record) => Record | boolean; /** 打开modal前执行，可修改modal里表单的值 */ open?: (params: Record) => Record; } @@ -125,13 +125,17 @@ export const useCurd = (config: CurdConfig) => { throw new Error(`action.query.api required!`); } const { api, after, before, reqConfig } = actions.query; - let params = doBeforeQuery(query, pager); - if (before) { - params = before(params); + let params: any = doBeforeQuery(query, pager); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.query.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } let data = await doRequest(api, params, reqConfig); - if (after) { - data = after(data); + data = after?.(data); + if (!data) { + getGlobalConfig().debug && console.warn('actions.query.after返回false阻止了默认逻辑数据绑定，请自行绑定数据！'); + return; } table.modelRef.value = data.list; if (pagerCfg) { @@ -208,13 +212,14 @@ export const useCurd = (config: CurdConfig) => { } await doValidate(edit); let params = doGetFormData(edit); - if (before) { - params = before(params); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.[create/update].before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { message.success(`${actionTypeMap[editTypeRef.value]}成功！`); doClose(modal); doQuery(); @@ -223,19 +228,19 @@ export const useCurd = (config: CurdConfig) => { /** 删除记录 */ const doDelete = async (record: any) => { - debugger; const { api, after, before, reqConfig } = (actions.delete || {}) as Action; if (!api) { throw new Error(`action.delete.api required!`); } let params: any = { id: record?.record[rowKey] }; - if (before) { - params = before(params, record?.record); + params = before?.(params, record?.row); + if (!params) { + getGlobalConfig().debug && console.warn('actions.delete.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { message.success('删除成功！'); doQuery(); } diff --git a/packages/element-plugin/package.json b/packages/element-plugin/package.json index 0b1e251..a325715 100644 --- a/packages/element-plugin/package.json +++ b/packages/element-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@koala-form/element-plugin", - "version": "2.0.5", + "version": "2.0.6", "description": "KoalaForm element plus ui插件", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/element-plugin/src/useCurd.ts b/packages/element-plugin/src/useCurd.ts index 9f3dcbc..788b8f2 100644 --- a/packages/element-plugin/src/useCurd.ts +++ b/packages/element-plugin/src/useCurd.ts @@ -39,10 +39,10 @@ interface Action extends ComponentDesc { reqConfig?: any; /** 隐藏默认按钮 */ hidden?: boolean; - /** 请求前执行，可修改参数 */ - before?: (params: Record, ...args: any[]) => Record; - /** 请求后执行，可修改结果 */ - after?: (params: Record) => Record; + /** 请求前执行，可修改请求参数，返回false可阻止请求发送 */ + before?: (params: Record, ...args: any[]) => Record | boolean; + /** 请求后执行，可修改结果，返回false可阻止默认流程的执行 */ + after?: (params: Record) => Record | boolean; /** 打开modal前执行，可修改modal里表单的值 */ open?: (params: Record) => Record; } @@ -123,13 +123,17 @@ export const useCurd = (config: CurdConfig) => { throw new Error(`action.query.api required!`); } const { api, after, before, reqConfig } = actions.query; - let params = doBeforeQuery(query, pager); - if (before) { - params = before(params); + let params: any = doBeforeQuery(query, pager); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.query.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } let data = await doRequest(api, params, reqConfig); - if (after) { - data = after(data); + data = after?.(data); + if (!data) { + getGlobalConfig().debug && console.warn('actions.query.after返回false阻止了默认逻辑数据绑定，请自行绑定数据！'); + return; } table.modelRef.value = data.list; if (pagerCfg) { @@ -194,13 +198,14 @@ export const useCurd = (config: CurdConfig) => { } await doValidate(edit); let params = doGetFormData(edit); - if (before) { - params = before(params); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.[create/update].before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { ElMessage.success(`${actionTypeMap[editTypeRef.value]}成功！`); doClose(modal); doQuery(); @@ -214,13 +219,14 @@ export const useCurd = (config: CurdConfig) => { throw new Error(`action.delete.api required!`); } let params: any = { id: record?.row[rowKey] }; - if (before) { - params = before(params, record?.row); + params = before?.(params, record?.row); + if (!params) { + getGlobalConfig().debug && console.warn('actions.delete.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { ElMessage.success('删除成功！'); doQuery(); } diff --git a/packages/fes-plugin/package.json b/packages/fes-plugin/package.json index 568a9f1..0578b8b 100644 --- a/packages/fes-plugin/package.json +++ b/packages/fes-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@koala-form/fes-plugin", - "version": "2.0.0", + "version": "2.0.1", "description": "KoalaForm fes design ui插件", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/fes-plugin/src/index.ts b/packages/fes-plugin/src/index.ts index 95b88cc..13faf38 100644 --- a/packages/fes-plugin/src/index.ts +++ b/packages/fes-plugin/src/index.ts @@ -13,7 +13,7 @@ export const componentPlugin: PluginFunction = (api) api.onSelfStart(({ ctx }) => { ctx.getComponent = (name) => { if (typeof name === 'string') { - const comp = fesD[`F${name}`]; + const comp = (fesD as any)[`F${name}`]; if (isComponent(comp)) return comp; else return name; } else { diff --git a/packages/fes-plugin/src/useCurd.ts b/packages/fes-plugin/src/useCurd.ts index 00c6791..3be48d0 100644 --- a/packages/fes-plugin/src/useCurd.ts +++ b/packages/fes-plugin/src/useCurd.ts @@ -39,10 +39,10 @@ interface Action extends ComponentDesc { reqConfig?: any; /** 隐藏默认按钮 */ hidden?: boolean; - /** 请求前执行，可修改参数 */ - before?: (params: Record, ...args: any[]) => Record; - /** 请求后执行，可修改结果 */ - after?: (params: Record) => Record; + /** 请求前执行，可修改请求参数，返回false可阻止请求发送 */ + before?: (params: Record, ...args: any[]) => Record | boolean; + /** 请求后执行，可修改结果，返回false可阻止默认流程的执行 */ + after?: (params: Record) => Record | boolean; /** 打开modal前执行，可修改modal里表单的值 */ open?: (params: Record) => Record; } @@ -93,7 +93,7 @@ export const mapTableFields = (fields: Field[], comm?: Field) => { field.format = formatByOptions; getGlobalConfig().debug && console.log(`字段${field.name}将默认加上formatByOptions`); } - if (components?.['name'] === ComponentType.DatePicker && !field.format) { + if ((components as ComponentDesc)?.['name'] === ComponentType.DatePicker && !field.format) { field.format = genFormatByDate(); getGlobalConfig().debug && console.log(`字段${field.name}将默认加上genFormatByDate()`); } @@ -123,13 +123,17 @@ export const useCurd = (config: CurdConfig) => { throw new Error(`action.query.api required!`); } const { api, after, before, reqConfig } = actions.query; - let params = doBeforeQuery(query, pager); - if (before) { - params = before(params); + let params: any = doBeforeQuery(query, pager); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.query.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } let data = await doRequest(api, params, reqConfig); - if (after) { - data = after(data); + data = after?.(data); + if (!data) { + getGlobalConfig().debug && console.warn('actions.query.after返回false阻止了默认逻辑数据绑定，请自行绑定数据！'); + return; } table.modelRef.value = data.list; if (pagerCfg) { @@ -164,7 +168,7 @@ export const useCurd = (config: CurdConfig) => { if (open) data = open(data); if (data) { editCfg?.fields.forEach((field) => { - const comp = field.components?.[0] || field.components; + const comp = (field.components as Array)?.[0] || field.components; if (!comp) return; if (comp.name === ComponentType.CheckboxGroup || (comp.name === ComponentType.Select && unref(comp.props)?.multiple)) { const text = data[field.name as string]; @@ -194,13 +198,14 @@ export const useCurd = (config: CurdConfig) => { } await doValidate(edit); let params = doGetFormData(edit); - if (before) { - params = before(params); + params = before?.(params); + if (!params) { + getGlobalConfig().debug && console.warn('actions.[create/update].before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { FMessage.success(`${actionTypeMap[editTypeRef.value]}成功！`); doClose(modal); doQuery(); @@ -214,13 +219,14 @@ export const useCurd = (config: CurdConfig) => { throw new Error(`action.delete.api required!`); } let params: any = { id: record?.row[rowKey] }; - if (before) { - params = before(params, record?.row); + params = before?.(params, record?.row); + if (!params) { + getGlobalConfig().debug && console.warn('actions.delete.before返回false阻止了请求执行，如果是自定义请求流程，可忽略'); + return; } - const data = await doRequest(api, params, reqConfig); - if (after) { - after(data); - } else { + const data = (await doRequest(api, params, reqConfig)) || {}; + const res = after?.(data); + if (!after || res) { FMessage.success('删除成功！'); doQuery(); } @@ -260,7 +266,7 @@ export const useCurd = (config: CurdConfig) => { ctx: table, table: merge( { name: ComponentType.Table, vModels: { checkedKeys: { name: '__value', ref: selectedRows } }, props: { rowKey } }, - tableCfg.table, + tableCfg.table as ComponentDesc, ), fields: [ tableCfg.selection && merge({ props: { type: 'selection' } }, tableCfg.selection as Field),