diff --git a/package.json b/package.json index 412a649..71c2f9e 100644 --- a/package.json +++ b/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", diff --git a/src/cool/modules/crud/components/form/index.tsx b/src/cool/modules/crud/components/form/index.tsx index e29b5b6..72ae370 100644 --- a/src/cool/modules/crud/components/form/index.tsx +++ b/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, diff --git a/src/cool/modules/crud/components/upsert/index.tsx b/src/cool/modules/crud/components/upsert/index.tsx index bbaf741..080e5c8 100644 --- a/src/cool/modules/crud/components/upsert/index.tsx +++ b/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); } }; diff --git a/src/cool/modules/crud/hooks/form.ts b/src/cool/modules/crud/hooks/form.ts new file mode 100644 index 0000000..dafd1dc --- /dev/null +++ b/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 }); + } +}; diff --git a/src/cool/modules/crud/types/form.d.ts b/src/cool/modules/crud/types/form.d.ts index 1fdefc3..7d72529 100644 --- a/src/cool/modules/crud/types/form.d.ts +++ b/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; diff --git a/src/cool/modules/crud/types/hook.ts b/src/cool/modules/crud/types/hook.ts new file mode 100644 index 0000000..dc1249a --- /dev/null +++ b/src/cool/modules/crud/types/hook.ts @@ -0,0 +1,14 @@ +export declare type Pipe = + | "number" + | "string" + | "split" + | "join" + | "boolean" + | "booleanNumber" + | Function + | Array; + +export declare interface FormHook { + bind?: Pipe; + submit?: Pipe; +} diff --git a/src/cool/modules/crud/types/index.d.ts b/src/cool/modules/crud/types/index.d.ts index d6e89f3..97718f3 100644 --- a/src/cool/modules/crud/types/index.d.ts +++ b/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"; diff --git a/src/cool/modules/demo/components/crud/upsert.vue b/src/cool/modules/demo/components/crud/upsert.vue index 59f0d4a..5f46212 100644 --- a/src/cool/modules/demo/components/crud/upsert.vue +++ b/src/cool/modules/demo/components/crud/upsert.vue @@ -13,6 +13,34 @@ export default defineComponent({ const upsertRef = ref(); const items = ref([ + { + 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: { diff --git a/src/cool/modules/demo/utils/service.ts b/src/cool/modules/demo/utils/service.ts index d6c5e5f..50c471c 100644 --- a/src/cool/modules/demo/utils/service.ts +++ b/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) => {