diff --git a/package.json b/package.json index fc14a86..ac700d6 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .eslintignore" }, "dependencies": { - "@cool-vue/crud": "^7.2.1", + "@cool-vue/crud": "^7.2.2", "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^10.4.0", "@wangeditor/editor": "^5.1.23", diff --git a/packages/crud/index.d.ts b/packages/crud/index.d.ts index 1b49816..6e033cc 100644 --- a/packages/crud/index.d.ts +++ b/packages/crud/index.d.ts @@ -532,6 +532,7 @@ declare namespace ClForm { open?(data: T): void; close?(action: CloseAction, done: fn): void; submit?(data: T, event: { close: fn; done: fn }): void; + change?(data: T, prop: string): void; }; op: { hidden?: boolean; @@ -658,6 +659,8 @@ declare namespace ClSearch { data?: T; props?: ElementPlus.FormProps; resetBtn?: boolean; + Form?: ClForm.Ref; + onChange?(data: T, prop: string): void; onLoad?(data: T): void; onSearch?(data: T, options: { next: ClCrud.Service["api"]["page"] }): void; } diff --git a/packages/crud/package.json b/packages/crud/package.json index 8bb2405..d6e3885 100644 --- a/packages/crud/package.json +++ b/packages/crud/package.json @@ -1,6 +1,6 @@ { "name": "@cool-vue/crud", - "version": "7.2.1", + "version": "7.2.2", "private": false, "main": "./dist/index.umd.min.js", "typings": "types/index.d.ts", diff --git a/packages/crud/src/components/adv/search.tsx b/packages/crud/src/components/adv/search.tsx index cd02a25..2f49a1c 100644 --- a/packages/crud/src/components/adv/search.tsx +++ b/packages/crud/src/components/adv/search.tsx @@ -150,7 +150,8 @@ export default defineComponent({ close, clear, ...useApi({ Form }), - reset + reset, + Form }); return () => { diff --git a/packages/crud/src/components/form/helper/index.ts b/packages/crud/src/components/form/helper/index.ts index 7520fe5..e91bd4a 100644 --- a/packages/crud/src/components/form/helper/index.ts +++ b/packages/crud/src/components/form/helper/index.ts @@ -1,5 +1,6 @@ -import { reactive, ref } from "vue"; +import { reactive, ref, watch } from "vue"; import { useConfig } from "../../../hooks"; +import { cloneDeep } from "lodash-es"; export function useForm() { const { dict } = useConfig(); @@ -33,6 +34,9 @@ export function useForm() { // 表单数据 const form = reactive({}); + // 表单数据备份 + const oldForm = ref({}); + // 表单是否可见 const visible = ref(false); @@ -45,6 +49,25 @@ export function useForm() { // 表单禁用状态 const disabled = ref(false); + // 监听表单变化 + watch( + () => form, + (val) => { + if (config.on?.change) { + for (let i in val) { + if (form[i] !== oldForm.value[i]) { + config.on?.change(val, i); + } + } + } + + oldForm.value = cloneDeep(val); + }, + { + deep: true + } + ); + return { Form, config, diff --git a/packages/crud/src/components/form/index.tsx b/packages/crud/src/components/form/index.tsx index df5af16..89af8be 100644 --- a/packages/crud/src/components/form/index.tsx +++ b/packages/crud/src/components/form/index.tsx @@ -1,4 +1,4 @@ -import { defineComponent, h, nextTick } from "vue"; +import { defineComponent, h, nextTick, toRef, watch } from "vue"; import { cloneDeep, isBoolean } from "lodash-es"; import { useAction, useForm, usePlugins, useTabs } from "./helper"; import { useBrowser, useConfig, useElApi, useRefs } from "../../hooks"; diff --git a/packages/crud/src/components/search/index.tsx b/packages/crud/src/components/search/index.tsx index 3608144..f1f7c65 100644 --- a/packages/crud/src/components/search/index.tsx +++ b/packages/crud/src/components/search/index.tsx @@ -1,6 +1,6 @@ import { useConfig, useCore, useForm } from "../../hooks"; -import { isEmpty } from "lodash-es"; -import { onMounted, PropType, defineComponent, ref, h, reactive, inject, mergeProps } from "vue"; +import { isEmpty, keys } from "lodash-es"; +import { onMounted, PropType, defineComponent, ref, h, reactive, inject, mergeProps, watch, watchEffect } from "vue"; import { useApi } from "../form/helper"; export default defineComponent({ @@ -13,7 +13,7 @@ export default defineComponent({ }, props: { type: Object, - default: () => {} + default: () => { } }, // 表单值 @@ -115,6 +115,7 @@ export default defineComponent({ expose({ search, reset, + Form, ...useApi({ Form }) }); @@ -129,6 +130,9 @@ export default defineComponent({ on: { open(data) { config.onLoad?.(data); + }, + change(data, prop) { + config.onChange?.(data, prop) } } }); diff --git a/packages/crud/types/components/form/helper/index.d.ts b/packages/crud/types/components/form/helper/index.d.ts index 7d9fbe2..2d5a42d 100644 --- a/packages/crud/types/components/form/helper/index.d.ts +++ b/packages/crud/types/components/form/helper/index.d.ts @@ -199,6 +199,7 @@ export declare function useForm(): { close: fn; done: fn; }) => void) | undefined; + change?: ((data: any, prop: string) => void) | undefined; } | undefined; op: { hidden?: boolean | undefined; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7e4edd..10920fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,8 +6,8 @@ settings: dependencies: '@cool-vue/crud': - specifier: ^7.2.1 - version: 7.2.1(typescript@5.4.2) + specifier: ^7.2.2 + version: 7.2.2(typescript@5.4.2) '@element-plus/icons-vue': specifier: ^2.3.1 version: 2.3.1(vue@3.5.6) @@ -488,8 +488,8 @@ packages: '@babel/helper-validator-identifier': 7.24.7 to-fast-properties: 2.0.0 - /@cool-vue/crud@7.2.1(typescript@5.4.2): - resolution: {integrity: sha512-Ir4JmY8YlxWi7ewuFJsUTIZfveap2sd1RzihTUmFgAUWiAiDebo/8WBrkuWHEghUZWXGn5t7Rpq2QtQvQFdz/Q==} + /@cool-vue/crud@7.2.2(typescript@5.4.2): + resolution: {integrity: sha512-S9DwIKMJlc5ghLn5aslcApCskTGOrZaj/9mMi0gSvY0jItLT/n/gCso4oESk7l4A1c2cRfWj4WY9pCLTU6x9Fg==} dependencies: '@element-plus/icons-vue': 2.3.1(vue@3.5.6) array.prototype.flat: 1.3.2 diff --git a/src/modules/demo/views/crud/components/search/base.vue b/src/modules/demo/views/crud/components/search/base.vue index 33c5f3d..4d62883 100644 --- a/src/modules/demo/views/crud/components/search/base.vue +++ b/src/modules/demo/views/crud/components/search/base.vue @@ -128,7 +128,11 @@ const Search = useSearch({ } } } - ] + ], + + onChange(data, prop) { + console.log(data, prop); + } }); function refresh(params?: any) {