> yqg-simple-form (ysf)
表单组件

API

* Form

|Property|Description|Type|Default Value|
|---|---|---|---|
|ctx|一般是父级this|Object|this.$parent|
|title|表单标题，一般在使用modal时配置|string\|slot|''|
|confirmLabel|提交按钮展示内容|String|'common.confirm'|
|confirmProps|提交按钮props|Object|null|
|cancelLabel|取消按钮展示内容|String|'common.cancel'|
|resetLabel|重置按钮展示内容|String|'common.reset'|
|defaultValues|表单默认值（诞生场景：覆盖field组件props default value）|Object|null|
|values|表单初始化value，通常用于edit回填场景，可覆盖defaultValues|Object|null|
|options|表单配置对象|Object|required|
|autoSearch|自动查询：在mounted时调用onReset，一般用于使用了table mixin的场景|Boolean|false|
|enterSubmit|开启input回车提交|Boolean|false|
|autocomplete|自动完成，配置在a-form的autocomplete属性|String|'off'|
|layout|表单布局 inline\|horizontal\|verticla\| inline一般用于查询表单，horizontal一般用于弹窗提交表单，vertical可以配合column属性使用|String|'inline'|

* formCtx

```
{
    ctx: ctx || this.$parent,
    ysf: this,
    form: Object, // 表单对象，用来访问form的api方法，如form.getFieldsValue()
    values: formValues, // 当前表单数据
    initialValues: object, // 初始化数据 {...options.defaultValues, ...defaultValues, ...values}
    record: {
        ...initialValues,
        ...formValues
    }
}
```

* Form.options

|Property|Description|Type|Default Value|
|---|---|---|---|
|layout|表单布局，同Form.layout|Object|'inline'|
|column|配合vertical，多列展示，如{span: 12}, 2列|Object|null|
|row|配合vertical使用，同Row.props|Object|{type: 'flex', gutter: 10, justify: 'space-between'}|
|labelCol|label布局|Object|{span: 4}|
|wrapperCol|输入控件布局|Object|24-labelCol.span|
|commonItemProps|Form.Item.props|Object|{colon: false}|
|fieldDefs|表单fields配置项|Array|required|

* FieldDefOption

|Property|Description|Type|Default Value|
|---|---|---|---|
|field|字段key|String\|slot|required|
|label|字段名称|String|若不配置，则不展示label占位;若需要占位但不展示label，可配置为空格' '|
|type|控件类型|String|'text'，展示为input|
|enumType|enum，枚举类控件需要配置|String\|Object\|Enum|--|
|enumOptions|同@yqg/enum EnumOption, 若配置的i18n key 对应的是一个Array，则需配置|Object|--|
|format|用于格式化输入输出，详见util/format.js, 可自定义|String\|Object|--|
|required|是否必填|Boolean\|function(formCtx) => requiredValue:Boolean|false|
|disabled|是否禁用|Boolean\|function(formCtx) => disabledValue:Boolean|false|
|hide|是否隐藏field|Boolean\|function(formCtx) => hideValue:Boolean|fales|
|rules|校验规则, 详见antd Form rules|Array|--|
|component|自定义组件|Component|--|
|roundMode|通常用于设置日期控件输出时间|'dayStart'\|'dayEnd'\|'secondStart'\|'secondEnd'|--|
|tooltipOption|通常用于设置select组件是否展示tooltip|Boolean|--|
|onChange|监听field change事件|function({record, values, value, def}) => {}:any|--|
|props|field组件props|Object|--|
|itemProps|a-form-item props|Object|--|
|notrim|value是否trim string|Boolean|true|
|isFormatBtnVisible|type: code 控件是否展示格式化按钮|Boolean|true|

* Field type

(详见field-map.js)

|Type|Component|Description|Def|
|---|---|---|---|
|text|FieldInput|输入控件|--|
|textarea|a-textarea|可换行文本框|{props: {autosize: {minRows: 2}}|
|number|a-input-number|数字输入框|{props: {precision: 2 // 保留2位小数}|
|date|FieldDate -> a-date-picker|日期选择器|{timestamp: true // 输出时间戳}|
|dateTime|FieldDate -> a-date-picker|日期时间选择器|同date|
|dateRange|FieldDate -> a-range-picker|选择时间段|同date|
|time|FieldDate -> a-time-picker|时间选择器|同date|
|month|FieldDate -> a-month-picker|月份选择器|同date|
|switch|a-switch|开关|--|
|select|FieldSelect|下拉框|{props: {multiple: true // 多选}|
|checkbox|FieldSelect|多选框|{props: {single: boolean, parseFun: function, optionDisabled: (value, option) => Boolean}}|
|tree|FieldTree|树形选择框|{childrenKey: string, idKey: string, nameKey: string, leafOnly: boolean, // 只叶子节点可选择}|
|radio|FieldRadio|单选框|{props: {cancelable: boolean // 再次点击是否可取消}}|
|file|FieldFile|上传文件|{props: {previewValue: File\|array\|number\|string, //预览 props: {single: boolean, draggable: boolean}}}|
|code|FieldCode|code类输入框|--|
|sql|FiledSql|sql输入框|--|
|markdown|field-md-editor|markdown输入控件|--|
|rich|field-rich|富文本框|--|
|autoComplete|field-auto-complete|可输入、可选择|{props: {filterOption: function}}|

* field-child-form option

```
{
    ref: 'childForm',
    childCard: boolean, // 是否展示成卡片
    hasDelete: boolean | ({ctx}) => val:boolean, // 是否展示删除按钮
    hasAdd: boolean, // 是否展示新增按钮
    addIcon: string, // 新增按钮 icon
    addText: string, // 新增按钮文案
    maxLen: number, // 多大条数
    childKey: string | (formCtx) => childKeyValue:string, // 子表单key
    getInitialValue: ({ctx}) => initialValue:object, // 增加一组数据时的初始化数据
    extendAdd: function, // 自定义增加一组数据时操作逻辑（目前签名不太友好）
    itemTitle: string, // 每组数据的title，`${itemTitle} ${itemIndex + 1}`
    useYsfAsCtx: boolean, // 是否使用 ysf as ctx，仅 child-form 与 child-yst 支持
    formOptions: {
        fieldDefs: array,
        sync: boolean, // 是否即时emit change
        hasDelete: boolean | ({value: object, extraData: {idx: number, curValues
: array
}}) => val:boolean, // 根据当前表单数据判断某个子表单是否展示删除按钮
    }
}
```

* field-table-form option

TableOptions: yqg-simple-table options

```
{
    hasDelete: boolean | ({ctx}) => val:boolean, // 是否展示删除按钮
    hasAdd: boolean, // 是否展示新增按钮
    maxLen: number, // 多大条数
    getInitialValue: ({ctx}) => initialValue:object, // 增加一组数据时的初始化数据
    extendAdd: function, // 自定义增加一组数据时操作逻辑（目前签名不太友好）
    tableOptions: {
        formProps: object, // ysf props
        colDefs: array,
    } & TableOptions
}
```

* slot

1. field slot 可直接使用def.field 作slot name
```
slotScope: formCtx
```

2. field component slot 可使用[field.slotName] 作为slot name

* slotScope: 
```
{
    parent: formCtx,
    child: object // field componet scope
}
```
* 当前支持的slot

```
[
    'head', 'foot', 'prefix', 'suffix', 'addonAfter', 'addonBefore',
    'childFormExtraBtn',
    'optionLabel', // checkbox 的option label
]
```

3. 支持的内置slot

```
slotScope: formCtx
```

```
[
    'title', // form title
    'topBtns', // 表单上方button
    'btns', // 使用后将替换根据$listeners自动生成的 confirm,reset按钮，不建议使用，基本场景都可以通过extraBtns实现
    'extraBtns', // 展示在提交按钮后 
    'default' // 默认插槽
]
```

4. label slot

```
slotName: `${field}.label`
slotScope: {...formCtx, def}
```