diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index 5fe9f501..3dcf37e8 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -229,16 +229,11 @@ export function useFormEvents({ const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]); if (!prefixField || index === -1 || first) { first ? schemaList.unshift(..._schemaList) : schemaList.push(..._schemaList); - schemaRef.value = schemaList; - _setDefaultValue(schema); - return; - } - if (index !== -1) { + } else if (index !== -1) { schemaList.splice(index + 1, 0, ..._schemaList); } - _setDefaultValue(schema); - schemaRef.value = schemaList; + _setDefaultValue(schema); } async function resetSchema(data: Partial | Partial[]) { diff --git a/src/components/Prompt/dialog.vue b/src/components/Prompt/dialog.vue new file mode 100644 index 00000000..22b5a887 --- /dev/null +++ b/src/components/Prompt/dialog.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/components/Prompt/index.ts b/src/components/Prompt/index.ts new file mode 100644 index 00000000..f258c66f --- /dev/null +++ b/src/components/Prompt/index.ts @@ -0,0 +1,39 @@ +import { createVNode, VNode, defineComponent, h, render, reactive } from 'vue'; +import { PromptProps, genFormSchemas } from './state'; +import Dialog from './dialog.vue'; + +export function createPrompt(props: PromptProps) { + let vm: Nullable = null; + const data = reactive({ + ...props, + addFormSchemas: genFormSchemas({ + label: props.label, + required: props.required, + inputType: props.inputType, + defaultValue: props.defaultValue, + }), + }); + const DialogWrap = defineComponent({ + render() { + return h(Dialog, { ...data } as any); + }, + }); + + vm = createVNode(DialogWrap); + + render(vm, document.createElement('div')); + + function close() { + if (vm?.el && vm.el.parentNode) { + vm.el.parentNode.removeChild(vm.el); + } + } + + return { + vm, + close, + get $el() { + return vm?.el as HTMLElement; + }, + }; +} diff --git a/src/components/Prompt/state.ts b/src/components/Prompt/state.ts new file mode 100644 index 00000000..c90079de --- /dev/null +++ b/src/components/Prompt/state.ts @@ -0,0 +1,69 @@ +import { FormSchema } from '/@/components/Form'; + +type InputType = 'InputTextArea' | 'InputNumber' | 'Input'; +export interface PromptProps { + title: string; + label?: string; + required?: boolean; + onOK?: Fn; + inputType?: InputType; + labelWidth?: number; + width?: string; + layout?: 'horizontal' | 'vertical' | 'inline'; + defaultValue?: string | number; +} + +interface genFormSchemasProps { + label?: string; + required?: boolean; + inputType?: InputType; + defaultValue?: string | number; +} + +const inputTypeMap: { + [key in InputType]: { + colProps: { span: number; offset?: number }; + componentProps: FormSchema['componentProps']; + }; +} = { + InputTextArea: { + colProps: { span: 23 }, + componentProps: { + placeholder: '请输入内容', + autoSize: { minRows: 2, maxRows: 6 }, + maxlength: 255, + showCount: true, + }, + }, + InputNumber: { + colProps: { span: 20, offset: 2 }, + componentProps: { + placeholder: '请输入数字', + min: 0, + }, + }, + Input: { + colProps: { span: 20, offset: 2 }, + componentProps: { + placeholder: '请输入内容', + min: 0, + }, + }, +}; + +export function genFormSchemas({ + label = '备注信息', + required = true, + inputType = 'InputTextArea', + defaultValue = '', +}: genFormSchemasProps) { + const formSchema: FormSchema = { + field: 'txt', + component: inputType, + label, + defaultValue, + required: Boolean(required), + ...inputTypeMap[inputType], + }; + return [formSchema]; +} diff --git a/src/views/demo/comp/modal/index.vue b/src/views/demo/comp/modal/index.vue index 8c2444be..d7cbd730 100644 --- a/src/views/demo/comp/modal/index.vue +++ b/src/views/demo/comp/modal/index.vue @@ -25,6 +25,12 @@ 打开弹窗4 + + Prompt + @@ -35,7 +41,7 @@