#### 基础样例

包含字段的自动适配、联动隐藏

```vue
<template>
  <sd-form :init-values="values">
    <template v-slot="{ model }">
      <!-- 常规字段写 name 即可，input 框的显示、校验规则等都能自动适配 -->
      <sd-form-item name="title" />
      <sd-form-item name="number" />
      <!-- 数据字典会字段渲染成单选框/select -->
      <sd-form-item name="status" />
      <sd-form-item name="test" />
      <!-- input-props 可以给内部的 input 框传递 prop -->
      <sd-form-item name="printDate" :input-props="{ showToday: false }" />
      <!-- 自动适配不管用的，可以自己在 slot 中写字段的内容部分。注意用 v-model 绑定 -->
      <sd-form-item name="remarks">
        <a-textarea v-model="model.remarks" />
      </sd-form-item>
    </template>
  </sd-form>
</template>

<script>
export default {
  data() {
    return {
      // 以下数据应该由后台接口返回，这里是模拟数据
      values: [
        {
          name: 'title',
          caption: '发文标题',
          dataType: 'string',
          required: true,
          value: '标题内容',
        },
        {
          name: 'status',
          caption: '是否可用',
          dataType: 'selectlist',
          value: '1',
          attr: {
            displayValue: '启用',
            controlType: 'DictType',
            selectListItem: [
              { label: '启用', value: '1' },
              { label: '停用', value: '0' },
            ],
          },
        },
        {
          name: 'test',
          caption: '联动隐藏',
          dataType: 'string',
          value: '文本',
          // 联动隐藏需要在后端xml里面配置displayExpr
          attr: { displayExpr: '#bean.status == "0"' },
        },
        { name: 'remarks', caption: '备注', dataType: 'string', value: '更多内容\n更多内容' },
        { name: 'printDate', caption: '印发日期', dataType: 'date', value: 1596510490362 },
        { name: 'number', caption: '份数', dataType: 'number', value: 23 },
      ],
    }
  },
}
</script>
```

#### 日期、数值范围

输入时就保证结束日期大于开始日期，不需要再写校验逻辑

```vue
<template>
  <sd-form :init-values="values">
    <template v-slot="{ model }">
      <!--
        日期范围，确保后面的大于前面的
        input-props如果是数组，会对应传给每个日期框
      -->
      <sd-form-item
        :name="['printDate1', 'printDate2']"
        :input-props="[{ placeholder: '开始' }, { placeholder: '结束' }]"
      />
      <sd-form-item :name="['number1', 'number2']" />
      <!--
        日期范围也可以分开显示。通过 range-after 属性进行关联
      -->
      <sd-form-item name="printDate3" />
      <sd-form-item name="printDate4" range-after="printDate3" />
    </template>
  </sd-form>
</template>

<script>
export default {
  data() {
    return {
      // 以下数据应该由后台接口返回，这里是模拟数据
      values: [
        { name: 'printDate1', caption: '日期范围', dataType: 'date' },
        { name: 'printDate2', caption: '日期范围2', dataType: 'date' },
        { name: 'number1', caption: '数值范围', dataType: 'number' },
        { name: 'number2', caption: '数值范围2', dataType: 'number' },
        { name: 'printDate3', caption: '开始日期', dataType: 'date' },
        { name: 'printDate4', caption: '结束日期', dataType: 'date' },
      ],
    }
  },
}
</script>
```

#### 只读、可编辑模式的插槽处理

```vue
<template>
  <div>
    <p>
      切换模式：<a-radio-group v-model="formEditable">
        <a-radio-button :value="true">
          可编辑
        </a-radio-button>
        <a-radio-button :value="false">
          只读
        </a-radio-button>
      </a-radio-group>
    </p>
    <sd-form :init-values="values" :read-only="!formEditable">
      <template v-slot="{ model }">
        <!-- 自动适配的，不用关心只读和编辑模式 -->
        <sd-form-item name="title" />
        <!-- 默认slot是编辑模式使用的，只读模式自动适配 -->
        <sd-form-item name="keyword">
          <a-textarea v-model="model.keyword"></a-textarea>
        </sd-form-item>
        <!-- 也可以分开控制编辑和只读模式的行为 -->
        <sd-form-item name="docNumber">
          <template v-slot:default> # <a-input-number v-model="model.docNumber" /> </template>
          <template v-slot:read> $ {{ model.docNumber }} </template>
        </sd-form-item>
        <!-- 还可以编辑和只读用一个slot处理 -->
        <sd-form-item name="printDate">
          <template v-slot:read-and-edit="{ editable }">
            <a-date-picker v-model="model.printDate" :disabled="!editable" />
          </template>
        </sd-form-item>
      </template>
    </sd-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formEditable: true,
      values: [
        {
          name: 'title',
          caption: '发文标题',
          dataType: 'string',
          required: true,
          value: '标题内容',
        },
        {
          name: 'keyword',
          caption: '主题词',
          dataType: 'string',
          value: '主题词\n其他',
        },
        {
          name: 'printDate',
          caption: '印发日期',
          required: false,
          dataType: 'date',
          value: 1596510490362,
        },
        {
          name: 'docNumber',
          caption: '编号',
          required: false,
          dataType: 'number',
          value: 23,
        },
      ],
    }
  },
}
</script>
```

#### 响应输入框的事件

自动适配生成的输入框的所有事件，都可以直接在 SdFormItem 上监听

```vue
<template>
  <sd-form :init-values="values" ref="form">
    <template>
      <sd-form-item name="title" @pressEnter="pressEnter" />
      <sd-form-item :name="['printDate', 'printDate2']" @change="dateChange" />
      天数：{{ days }}
    </template>
  </sd-form>
</template>

<script>
export default {
  methods: {
    pressEnter() {
      console.log('pressEnter')
    },
    dateChange() {
      const form = this.$refs.form
      this.days = form.getFieldValue('printDate2').diff(form.getFieldValue('printDate'), 'days')
    },
  },
  data() {
    return {
      days: undefined,
      values: [
        {
          name: 'title',
          caption: '发文标题',
          dataType: 'string',
          required: true,
          value: '标题内容',
        },

        {
          name: 'printDate',
          caption: '日期范围',
          required: false,
          dataType: 'date',
          value: 1596510490362,
        },
        {
          name: 'printDate2',
          caption: '日期范围2',
          required: false,
          dataType: 'date',
          value: 1596510490362,
        },
      ],
    }
  },
}
</script>
```

#### 输入框插槽的处理

加上`input-`前缀的插槽，会转发给自动适配生成的输入框

```vue
<template>
  <sd-form :init-values="values" ref="form">
    <template>
      <sd-form-item name="title">
        <template v-slot:input-suffix>
          <a-icon type="setting" />
        </template>
      </sd-form-item>
    </template>
  </sd-form>
</template>

<script>
export default {
  data() {
    return {
      values: [
        {
          name: 'title',
          caption: '发文标题',
          dataType: 'string',
          required: true,
          value: '标题内容',
        },
      ],
    }
  },
}
</script>
```

#### 更改自动适配的组件

字段具体使用哪个组件来渲染，是通过后台返回的数据自动适配的，比如：

- dataType === 'selectperson' 适配成选人框
- dataType === 'date' && attr.showTime === 'true' 适配成日期时间选择器

对于数据字典类型，为了优化用户体验，还有更进一步的适配规则：

- 单选 + 备选项<=2 以单选框显示（启用/禁用，直接平铺）
- 单选 + 备选项>2 以下拉框显示
- 多选 + 备选项<=10 以多选框显示
- 多选 + 备选项>10 以下拉框显示（备选项太多，平铺出来难以找到选项）

如果自动适配的组件不满足要求，可以通过`component`属性来更改

```vue
<template>
  <sd-form :init-values="values">
    <template>
      <sd-form-item name="status" />
      <sd-form-item name="status2" component="a-select" />
    </template>
  </sd-form>
</template>

<script>
export default {
  data() {
    return {
      days: undefined,
      values: [
        {
          name: 'status',
          caption: '是否可用',
          dataType: 'selectlist',
          value: '1',
          attr: {
            displayValue: '启用',
            controlType: 'DictType',
            selectListItem: [
              { label: '启用', value: '1' },
              { label: '停用', value: '0' },
            ],
          },
        },
        {
          name: 'status2',
          caption: '状态',
          dataType: 'selectlist',
          value: '1',
          attr: {
            displayValue: '启用',
            controlType: 'DictType',
            selectListItem: [
              { label: '启用', value: '1' },
              { label: '停用', value: '0' },
            ],
          },
        },
      ],
    }
  },
}
</script>
```
