Merge pull request #16 from icssoa/vue3-ts-vite

cl-form添加hook

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc --noEmit --skipLibCheck && vite build",

src/cool/modules/crud/components/form/index.tsx

@@ -6,6 +6,7 @@ import { deepMerge, isBoolean, isEmpty, isObject, isString } from "../../utils";
 import Parse from "../../utils/parse";
 import { renderNode } from "../../utils/vnode";
 import { Browser, Form } from "../../types";
+import FormHook from "../../hooks/form";
 
 export default defineComponent({
 	name: "cl-form",
@@ -131,7 +132,6 @@ export default defineComponent({
 		function submit(callback?: Function) {
 			// 验证表单
 			refs.value.form.validate(async (valid: boolean, error: any) => {
-				console.log(valid, error);
 				if (valid) {
 					saving.value = true;
 
@@ -143,6 +143,10 @@ export default defineComponent({
 						if (e._hidden) {
 							delete d[e.prop];
 						}
+
+						if (e.hook) {
+							d[e.prop] = FormHook.submit(d[e.prop], e.hook, d);
+						}
 					});
 
 					const submit = callback || conf.on?.submit;
@@ -214,7 +218,11 @@ export default defineComponent({
 			// 设置表单数据
 			conf.items.map((e: any) => {
 				if (e.prop) {
-					form[e.prop] = form[e.prop] || cloneDeep(e.value);
+					form[e.prop] = FormHook.bind(
+						isEmpty(form[e.prop]) ? cloneDeep(e.value) : form[e.prop],
+						e.hook,
+						form
+					);
 				}
 			});
 
@@ -247,6 +255,14 @@ export default defineComponent({
 			};
 		}
 
+		// 重新绑定表单数据
+		function reBindForm(data: any) {
+			for (const i in data) {
+				const d: any = conf.items.find((e) => e.prop === i);
+				form[i] = d ? FormHook.bind(data[i], d.hook, form) : data[i];
+			}
+		}
+
 		return {
 			visible,
 			saving,
@@ -263,6 +279,7 @@ export default defineComponent({
 			done,
 			clear,
 			submit,
+			reBindForm,
 			showLoading,
 			hiddenLoading,
 			collapseItem,

src/cool/modules/crud/components/upsert/index.tsx

@@ -198,7 +198,7 @@ export default defineComponent({
 
 				// 合并数据
 				if (data) {
-					Object.assign(form, data);
+					refs.value.form.reBindForm(data);
 				}
 			};
 

src/cool/modules/crud/hooks/form.ts

@@ -0,0 +1,74 @@
+import { isArray, isFunction, isObject, isString } from "../utils";
+
+export const format: any = {
+	number(value: any) {
+		return isArray(value) ? value.map(Number) : Number(value);
+	},
+	string(value: any) {
+		return isArray(value) ? value.map(String) : String(value);
+	},
+	split(value: any, separator = ",") {
+		return value.split(separator);
+	},
+	join(value: any, separator = ",") {
+		return value.join(separator);
+	},
+	boolean(value: any) {
+		return Boolean(value);
+	},
+	booleanNumber(value: any) {
+		return Boolean(value) ? 1 : 0;
+	}
+};
+
+function parse(method: string, { value, pipe, form }: any) {
+	if (value === undefined) {
+		return value;
+	}
+
+	if (!pipe) {
+		return value;
+	}
+
+	let pipes = [];
+
+	if (isString(pipe)) {
+		if (format[pipe]) {
+			pipes = [pipe];
+		} else {
+			console.error(`${pipe} is not found.`);
+			return value;
+		}
+	} else if (isArray(pipe)) {
+		pipes = pipe;
+	} else if (isObject(pipe)) {
+		pipes = isArray(pipe[method]) ? pipe[method] : [pipe[method]];
+	} else if (isFunction(pipe)) {
+		pipes = [pipe];
+	} else {
+		console.error(`Hook data error!`);
+		return value;
+	}
+
+	let d = value;
+
+	pipes.forEach((e: any) => {
+		if (isString(e)) {
+			d = format[e](d);
+		} else if (isFunction(e)) {
+			d = e(d, form);
+		}
+	});
+
+	return d;
+}
+
+export default {
+	bind(value: any, pipe: any, form: any) {
+		return parse("bind", { value, pipe, form });
+	},
+
+	submit(value: any, pipe: any, form: any) {
+		return parse("submit", { value, pipe, form });
+	}
+};

src/cool/modules/crud/types/form.d.ts

@@ -1,3 +1,4 @@
+import { FormHook } from "./hook";
 import { RenderOptions } from "./render";
 
 export declare interface FormItem {
@@ -11,6 +12,7 @@ export declare interface FormItem {
 		inlineMessage?: boolean;
 		size?: "medium" | "small" | "mini";
 	};
+	hook?: FormHook;
 	group?: string;
 	collapse?: boolean;
 	value?: any;

src/cool/modules/crud/types/hook.ts

@@ -0,0 +1,14 @@
+export declare type Pipe =
+	| "number"
+	| "string"
+	| "split"
+	| "join"
+	| "boolean"
+	| "booleanNumber"
+	| Function
+	| Array<Pipe>;
+
+export declare interface FormHook {
+	bind?: Pipe;
+	submit?: Pipe;
+}

src/cool/modules/crud/types/index.d.ts

@@ -7,3 +7,4 @@ export * from "./adv-search";
 export * from "./query";
 export * from "./op";
 export * from "./browser";
+export * from "./hook";

src/cool/modules/demo/components/crud/upsert.vue

@@ -13,6 +13,34 @@ export default defineComponent({
 		const upsertRef = ref<UpsertRef>();
 
 		const items = ref<UpsertItem[]>([
+			{
+				label: "测试hook",
+				prop: "hook",
+				hook: {
+					bind: ["split", "number"],
+					submit: "join"
+				},
+				component: {
+					name: "el-select",
+					props: {
+						multiple: true
+					},
+					options: [
+						{
+							label: "景天",
+							value: 1
+						},
+						{
+							label: "李逍遥",
+							value: 2
+						},
+						{
+							label: "宇文拓",
+							value: 3
+						}
+					]
+				}
+			},
 			{
 				type: "tabs",
 				props: {

src/cool/modules/demo/utils/service.ts

@@ -8,7 +8,8 @@ export const UserList = [
 		name: "刘一",
 		createTime: "2019年09月02日",
 		price: 75.99,
-		status: 1
+		status: 1,
+		hook: "1,2"
 	},
 	{
 		id: 2,
@@ -76,7 +77,9 @@ export const TestService = {
 	info: (d: any) => {
 		console.log("GET[info]", d);
 		return new Promise((resolve) => {
-			resolve(UserList.find((e) => e.id == d.id));
+			setTimeout(() => {
+				resolve(UserList.find((e) => e.id == d.id));
+			}, 500);
 		});
 	},
 	add: (d: any) => {