# Common Form 通用表单

通用表单组件（common-form）已注册到全局，无需单独引入。但如果需要引入到其他项目中，首先需要将该组件复制到目标项目的 src/components 目录，然后参考下面的如何引入。

common-form 组件用于数据记录详述的展示、编辑、录入。组件内嵌了表单校验、表单模式、表单分段、字段元素关联、计算字段等模块。

# 如何引入

import commonForm from '@/components/common-form'

export default {
  name: '',
  components: {
    commonForm
  },
  ...
}

1
2
3
4
5
6
7
8
9

# 使用示例

你可以直接复制使用此处代码

<template>
  <page class="filter-table-demo" class-name="hw100">
    <panel
      :title-fixed="true"
      title="表具详述"
      class="h100 w-2-1"
    >
      <common-form
        ref="form"
        v-model="formData"
        :fields="formFields"
        class="pl15 pr0"
      >
        <!-- 插槽示例 -->
        <template #meterNo-el-input-append>
          <el-button size="small" icon="el-icon-search"></el-button>
        </template>
      </common-form>
    </panel>
  </page>
</template>

<script>
export default {
  data () {
    return {
      formData: {},
      formFields: [{
        label: '表具编号',
        field: 'meterNo',
        value: '',
        type: 'input',
        clearable: true,
        rule: [
          'required',
          { type: 'length', check: [6, 12] }
        ]
      }, {
        label: '表具类型',
        field: 'meterType',
        type: 'select',
        value: '',
        rule: 'required',
        options: [{
          label: '普表',
          value: 11
        }, {
          label: '卡表',
          value: 12
        }, {
          label: '远传表',
          value: 13
        }],
        clearable: true
      }, {
        label: '在用状态',
        field: 'meterStatus',
        type: 'select',
        value: '',
        rule: 'required',
        options: [{
          label: '待安装',
          value: 0
        }, {
          label: '已安装',
          value: 1
        }, {
          label: '未用',
          value: 2
        }, {
          label: '在用',
          value: 3
        }]
      }, {
        label: '安装日期',
        field: 'installDate',
        type: 'datepicker',
        value: '',
        rule: 'required',
        valueFormat: 'timestamp',
        innerType: 'date'
      }, {
        label: '客户地址',
        field: 'address',
        type: 'cascader',
        rule: ['required'],
        value: [],
        options: [{
          value: '河北省',
          label: '河北省',
          children: [{
            value: '石家庄市',
            label: '石家庄',
            children: [{
              value: '长安区',
              label: '长安区'
            }, {
              value: '桥西区',
              label: '桥西区'
            }, {
              value: '裕华区',
              label: '裕华区'
            }]
          }, {
            value: '邢台市',
            label: '邢台',
            children: [{
              value: '桥西区',
              label: '桥西区'
            }, {
              value: '新华区',
              label: '新华区'
            }]
          }]
        }]
      }, {
        label: '保修年限',
        field: 'years',
        innerType: 'number',
        value: '',
        rule: { type: 'min', check: 3 }
      }, {
        label: '预约时间',
        field: 'time',
        type: 'timepicker',
        value: '',
        rule: 'required'
      }, {
        label: '备注',
        field: 'remark',
        value: '',
        innerType: 'textarea',
        row: 2,
        rule: [
          { type: '汉字', message: '备注只能是汉字！' },
          { type: 'length', check: [10, 20], message: '字数必须在 10 - 20 之间！' }
        ],
        span: 2
      }]
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

# 属性

属性名称	属性说明	默认值
form-setting	[Object] 表单原生属性设置 id: 表单 ID action: 表单提交接口 method: 表单提交方法 post\|get 等	{}
value	[Object] 默认参数输入用于 v-model 双向绑定，无需单独使用通过该参数可以设置默认筛选值
show-label	[Boolean] 是否显示文本标签	true
col	[Number\|String] 表单元素列数 *移动设备和小屏设备（或浏览器被缩放）下可能不生效	2
fields	[Array] 表单字段配置具体配置参见 fields 配置	无
form-mode	[Object] 表单模式配置，具体配置参见表单模式	无
form-mode-set	[String] 默认采用的模式名称指定的模式应在 `form-mode` 属性中配置好，参见表单模式	无
data-schema	[Object] 数据模型字段，表单更新数据将按照数据模型规范化，在想要保持输入输出相同结构数据的情况下有用	无

# Data Schema

默认情况下，表单将过滤输入的数据，在数据更新时，将返回表单元素对应的数据属性组成的数据对象。例如输入数据中包含 a b c 等属性，表单内仅包含 a b 以及额外的 d 属性，则在表单数据更新时将返回 a b d 三个属性组成的数据对象。在希望获得数据增量更新的场景下，此策略非常有效。

但另一种常见的情况是开发者期望输入输出的数据保持结构一致。此时，便可通过 data-schema 属性设置数据的格式以及当前各个属性对应的数据值。一般情况下，将与 v-model 绑定的数据配置到该属性即可满足要求。

<common-form v-model="formData" :data-schema="formData" />

# 事件

事件名称	事件说明
input	表单元素数据更新时，将抛出该事件，并携带更新后表单数据用于 `v-model` 双向绑定，无需单独使用
change	表单元素数据更新时，将抛出该事件，并携带更新后表单数据该事件将在 `input` 事件之后抛出

# 方法

方法名称	参数	返回值	说明
setData	[Object] 表单数据对象	无	设置表单详述数据推荐使用 `v-model` 替代
getData	无	[Object] 表单数据对象	获取表单详述数据推荐使用 `v-model` 替代
submitCheck	无	[Boolean]	校验表单字段输入
resetCheckStatus	无	无	重置表单校验状态
formClear	[Array] 忽略字段列表列表中的字段不会被清空	无	清空表单数据
setFormMode	[String] 模式名称	无	切换表单模式查看表单模式

← 列表插槽字段配置 →