feat: FieldCustom

src/components/form/components/Field.jsx

@@ -3,33 +3,8 @@ import { Form } from 'ant-design-vue'
 import ColWrap from '../helpers/ColWrap'
 import BaseField from '@/components/base-field'
 import { useFormInstance } from '../base-form/hooks/useFormInstance'
-import { isNumber, pick } from 'lodash-es'
-
-const sizeEnum = {
-    xs: 104,
-    sm: 216,
-    md: 328,
-    lg: 440,
-    xl: 552
-}
-
-function unit (value) {
-    if (value && isNumber(value)) {
-        return `${value}px`
-    }
-    return undefined
-}
-
-function fieldStyles (style, fieldWidth) {
-    const { maxWidth, minWidth, width, ...restStyles } = style || {}
-    const fieldSize = isNumber(fieldWidth) ? unit(fieldWidth) : unit(sizeEnum[fieldWidth])
-    return {
-        ...restStyles,
-        maxWidth: maxWidth || '100%',
-        minWidth: minWidth || unit(sizeEnum['xs']),
-        width: width || fieldSize || '100%'
-    }
-}
+import { pick } from 'lodash-es'
+import { fieldStyles } from './utils'
 
 export default defineComponent({
     inheritAttrs: false,

src/components/form/components/FieldCustom.jsx

@@ -0,0 +1,78 @@
+import { cloneVNode, defineComponent, unref } from 'vue'
+import { Form } from 'ant-design-vue'
+import ColWrap from '../helpers/ColWrap'
+import { useFormInstance } from '../base-form/hooks/useFormInstance'
+import { isValidElement } from '@/utils'
+import { head, pick } from 'lodash-es'
+import { fieldStyles } from './utils'
+
+const fieldCustomProps = {
+    ...Form.Item.props,
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    hidden: {
+        type: Boolean,
+        default: false
+    },
+    colProps: {
+        type: Object,
+        default: () => ({})
+    },
+    formItemProps: {
+        type: Object,
+        default: () => ({})
+    }
+}
+
+export default defineComponent({
+    props: fieldCustomProps,
+    setup (props, { slots }) {
+        const formInstance = useFormInstance()
+
+        function onUpdateValue (value) {
+            const { name } = { ...pick(props, Object.keys(Form.Item.props)), ...props.formItemProps }
+            if (formInstance.setModelValue && name) {
+                formInstance.setModelValue(value, name)
+            }
+        }
+
+        return () => {
+            const formItemProps = {
+                ...pick(props, Object.keys(Form.Item.props)),
+                ...props.formItemProps,
+            }
+            const { width: fieldWidth, hidden, colProps } = props
+            const { model = {}, formProps = {} } = formInstance
+
+            const needSlots = {
+                default: () => {
+                    const children = slots.default ? slots.default() : []
+                    const vNode = head(children)
+                    if (!isValidElement(vNode)) {
+                        return vNode
+                    }
+                    const inputValue = unref(model)[formItemProps.name]
+                    return cloneVNode(vNode, {
+                        value: inputValue,
+                        style: fieldStyles({}, fieldWidth),
+                        'onUpdate:value': onUpdateValue
+                    })
+                }
+            }
+
+            const colWrapProps = {
+                ...colProps,
+                hidden: hidden,
+                grid: !!(unref(formProps).grid),
+            }
+
+            return (
+                <ColWrap {...colWrapProps} key={formItemProps.name}>
+                    <Form.Item {...formItemProps} v-slots={needSlots}/>
+                </ColWrap>
+            )
+        }
+    }
+})

src/components/form/components/index.js

@@ -5,6 +5,7 @@ import Password from './Password'
 import Select from './Select'
 import DatePicker from './DatePicker'
 import RangePicker from './RangePicker'
+import FieldCustom from './FieldCustom'
 
 export { Text }
 export { Number }
@@ -13,3 +14,4 @@ export { Password }
 export { Select }
 export { DatePicker }
 export { RangePicker }
+export { FieldCustom }

src/components/form/components/utils.js

@@ -0,0 +1,27 @@
+import { isNumber } from 'lodash-es'
+
+const sizeEnum = {
+    xs: 104,
+    sm: 216,
+    md: 328,
+    lg: 440,
+    xl: 552
+}
+
+export function unit (value) {
+    if (value && isNumber(value)) {
+        return `${value}px`
+    }
+    return undefined
+}
+
+export function fieldStyles (style, fieldWidth) {
+    const { maxWidth, minWidth, width, ...restStyles } = style || {}
+    const fieldSize = isNumber(fieldWidth) ? unit(fieldWidth) : unit(sizeEnum[fieldWidth])
+    return {
+        ...restStyles,
+        maxWidth: maxWidth || '100%',
+        minWidth: minWidth || unit(sizeEnum['xs']),
+        width: width || fieldSize || '100%'
+    }
+}

src/components/form/drawer-form/index.jsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    setup () {
+        return () => {
+            return (
+                <div></div>
+            )
+        }
+    }
+})

src/views/form/Modal.jsx

@@ -1,6 +1,6 @@
 import { defineComponent, ref, unref } from 'vue'
-import { Button, Card } from 'ant-design-vue'
-import { ModalForm, Number, Text } from '@/components/form'
+import { Button, Card, Input } from 'ant-design-vue'
+import { ModalForm, Number, Text, FieldCustom } from '@/components/form'
 
 export default defineComponent({
     name: 'FormModal',
@@ -11,6 +11,10 @@ export default defineComponent({
             open.value = !unref(open)
         }
 
+        function onValuesChange (values) {
+            console.log('cole', values)
+        }
+
         function onFinish (values) {
             console.log(values)
             return new Promise((resolve) => {
@@ -29,6 +33,7 @@ export default defineComponent({
                         grid={true}
                         width={800}
                         onFinish={onFinish}
+                        onValuesChange={onValuesChange}
                         v-slots={{
                             trigger: () => {
                                 return <Button>新建表单</Button>
@@ -50,6 +55,9 @@ export default defineComponent({
                             name={'number'}
                             colProps={{ span: 12 }}
                         />
+                        <FieldCustom colProps={{ span: 12 }} label={'自定义'} name={'custom'}>
+                            <Input/>
+                        </FieldCustom>
                     </ModalForm>
                 </Card>
             )