cl-form-tabs 添加 lazy 参数

package.json

@@ -9,7 +9,7 @@
 		"lint:eslint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.0.2",
+		"@cool-vue/crud": "^7.0.3",
 		"@element-plus/icons-vue": "^2.1.0",
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",

packages/crud/index.d.ts

@@ -422,6 +422,17 @@ declare namespace ClTable {
 	}
 }
 
+declare namespace ClFormTabs {
+	type labels = {
+		label: string;
+		value: string;
+		name?: string;
+		icon?: any;
+		lazy?: boolean;
+		[key: string]: any;
+	}[];
+}
+
 declare namespace ClForm {
 	type CloseAction = "close" | "save";
 
@@ -455,7 +466,7 @@ declare namespace ClForm {
 		type?: "tabs";
 		prop?: string;
 		props?: {
-			labels?: Array<{ label: string; value: string; name?: string; icon?: any }>;
+			labels?: ClFormTabs.labels;
 			justify?: "left" | "center" | "right";
 			color?: string;
 			mergeProp?: boolean;

packages/crud/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.0.2",
+	"version": "7.0.3",
 	"private": false,
 	"main": "./dist/index.umd.min.js",
 	"typings": "types/index.d.ts",

packages/crud/src/components/form/helper/tabs.ts

@@ -1,20 +1,71 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 export function useTabs({ config, Form }: { config: ClForm.Config; Form: Vue.Ref<any> }) {
 	// 选中
-	const active = ref<any>();
+	const active = ref<string | undefined>();
+
+	// 列表
+	const list = computed(() => {
+		return get()?.props?.labels || [];
+	});
+
+	// 获取选项
+	function getItem(value: any) {
+		return list.value.find((e) => e.value == value);
+	}
+
+	// 是否已加载
+	function isLoaded(value: any) {
+		const d = getItem(value);
+		return d?.lazy ? d.loaded : true;
+	}
+
+	// 加载后
+	function onLoad(value: any) {
+		const d = getItem(value);
+		d!.loaded = true;
+	}
+
+	// 查找分组
+	function findGroup(list: ClForm.Item[], prop: string) {
+		let name;
+
+		function deep(d: ClForm.Item) {
+			if (d.prop == prop) {
+				name = d.group;
+			} else {
+				if (d.children) {
+					d.children.forEach(deep);
+				}
+			}
+		}
+
+		list.forEach(deep);
+
+		return name;
+	}
 
 	// 获取参数
 	function get() {
 		return config.items.find((e) => e.type === "tabs");
 	}
 
+	// 设置参数
 	function set(data: any) {
 		active.value = data;
 	}
 
+	// 清空
 	function clear() {
-		active.value = null;
+		// 清空选中
+		active.value = undefined;
+
+		// 清空加载状态
+		list.value.forEach((e) => {
+			if (e.lazy && e.loaded) {
+				e.loaded = undefined;
+			}
+		});
 	}
 
 	// 切换
@@ -29,8 +80,8 @@ export function useTabs({ config, Form }: { config: ClForm.Config; Form: Vue.Ref
 				let isError = false;
 
 				const arr = config.items
-					.filter((e: any) => e.group == active.value && !e._hidden && e.prop)
-					.map((e: any) => {
+					.filter((e) => e.group == active.value && !e._hidden && e.prop)
+					.map((e) => {
 						return new Promise((r: Function) => {
 							// 验证表单
 							Form.value.validateField(e.prop, (valid: string) => {
@@ -75,10 +126,14 @@ export function useTabs({ config, Form }: { config: ClForm.Config; Form: Vue.Ref
 
 	return {
 		active,
+		list,
+		isLoaded,
+		onLoad,
 		get,
 		set,
 		change,
 		clear,
-		mergeProp
+		mergeProp,
+		findGroup
 	};
 }

packages/crud/src/components/form/index.tsx

@@ -181,14 +181,11 @@ export default defineComponent({
 						done();
 					}
 				} else {
-					// 判断是否使用form-tabs，切换到对应的选项卡
-					const keys = Object.keys(error);
-
+					// 判断是否使用 cl-form-tabs，切换到对应的选项卡
 					if (Tabs.active.value) {
-						const el = refs.form.querySelector(`[data-prop="${keys[0]}"]`);
+						const group = Tabs.findGroup(config.items, Object.keys(error)[0]);
 
-						if (el) {
-							const group = el.getAttribute("data-group");
+						if (group) {
 							Tabs.set(group);
 						}
 					}
@@ -332,7 +329,9 @@ export default defineComponent({
 			const { isDisabled } = config._data;
 
 			if (e.type == "tabs") {
-				return <cl-form-tabs v-model={Tabs.active.value} {...e.props} />;
+				return (
+					<cl-form-tabs v-model={Tabs.active.value} {...e.props} onChange={Tabs.onLoad} />
+				);
 			}
 
 			// 是否隐藏
@@ -341,13 +340,13 @@ export default defineComponent({
 			});
 
 			// 分组显示
-			const inGroup =
-				isEmpty(Tabs.active.value) || isEmpty(e.group)
-					? true
-					: e.group === Tabs.active.value;
+			const inGroup = e.group ? e.group === Tabs.active.value : true;
+
+			// 是否已加载完成
+			const isLoaded = e.component && Tabs.isLoaded(e.group);
 
 			// 表单项
-			const FormItem = e.component
+			const FormItem = isLoaded
 				? h(
 						<el-form-item
 							class={{

packages/crud/types/components/form/helper/index.d.ts

@@ -27,10 +27,12 @@ export declare function useForm(): {
             props?: {
                 [x: string]: any;
                 labels?: {
+                    [x: string]: any;
                     label: string;
                     value: string;
                     name?: string | undefined;
                     icon?: any;
+                    lazy?: boolean | undefined;
                 }[] | undefined;
                 justify?: "center" | "left" | "right" | undefined;
                 color?: string | undefined;

packages/crud/types/components/form/helper/tabs.d.ts

@@ -3,10 +3,14 @@ export declare function useTabs({ config, Form }: {
     config: ClForm.Config;
     Form: Vue.Ref<any>;
 }): {
-    active: import("vue").Ref<any>;
+    active: import("vue").Ref<string | undefined>;
+    list: import("vue").ComputedRef<ClFormTabs.labels>;
+    isLoaded: (value: any) => any;
+    onLoad: (value: any) => void;
     get: () => ClForm.Item | undefined;
     set: (data: any) => void;
     change: (value: any, isValid?: boolean) => Promise<unknown>;
     clear: () => void;
     mergeProp: (item: ClForm.Item) => void;
+    findGroup: (list: ClForm.Item[], prop: string) => undefined;
 };

src/cool/bootstrap/eps.ts

@@ -63,7 +63,7 @@ function onUpdate() {
 
 	// 提示
 	if (isDev) {
-		console.log("[eps] update", service);
+		console.log("[eps] update");
 	}
 }
 

yarn.lock

@@ -295,10 +295,10 @@
     mitt "^3.0.1"
     vue "^3.3.4"
 
-"@cool-vue/crud@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.2.tgz#582b31a1eaadfe39f8189c2b587ccc1bdd2ed442"
-  integrity sha512-5q/xvymhUYEyV/bwBJDyYglhQcKsm8L7ngpUymgccLkEJQY+XUogPK453FGEsqsTOCVj/1Nd0Mx66Gv96SMEuw==
+"@cool-vue/crud@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.3.tgz#a6e03ac5bcd22690fae3f61549fe9ff744291a1b"
+  integrity sha512-DyzIZGHL8CxY/Mr8SGfBQgLpl1SLxY6COBKR5khoXqhUQ5XqHKIbjYz5h2UwZh9GfY+nswYaW4vCbKumKiS8KQ==
   dependencies:
     "@cool-vue/crud" "^7.0.1-beta14"
     array.prototype.flat "^1.2.4"