优化

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",

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;
 	}

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",

packages/crud/src/components/adv/search.tsx

@@ -150,7 +150,8 @@ export default defineComponent({
 			close,
 			clear,
 			...useApi({ Form }),
-			reset
+			reset,
+			Form
 		});
 
 		return () => {

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<obj>({});
 
+	// 表单数据备份
+	const oldForm = ref<obj>({});
+
 	// 表单是否可见
 	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,

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";

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({
@@ -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)
 					}
 				}
 			});

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;

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

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) {