# 聚合表单
# 基础案例
展示表格，搭配不同元素类别，新增表单
<tForm
ref="t-form01"
:form-info="tFormInfo"
:edit-items="createItems"
:item="item"
>
<hlta-superTitle
slot="title"
:theme="1"
:font="'h5'"
:title="'基本信息'"
></hlta-superTitle>
</tForm>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
data() {
return {
item:{},
tFormInfo: {
labelWidth: '110px',
},
createItems: [
{
type: 'text',
property: 'projectName',
label: '项目名称',
require: true,
maxLength: 50,
fieldDecoratorOptions: {
rules: [
{
max: 50,
message: '字段最大长度为50',
},
],
},
// disabled: true,
},
{
type: 'date',
property: 'projectStartTime',
label: '项目开始时间',
require: true,
// disabled: true,
},
{
type: 'date',
property: 'projectEndTime',
label: '项目结束时间',
require: true,
// disabled: true,
},
{
type: 'multiSingleSelected',
label: '实施区域',
property: 'admsAreaList',
treeId: 'result',
replaceFields: {
title: 'areaName',
key: 'areaCode',
value: 'areaCode',
},
treeDataLabel: 'areaName',
treeDataValue: 'areaCode',
treeNodeId: 'areaCode',
url: 'area/select',
multiple: true,
require: true,
hidden: false,
treeDataAsync: [],
treeDefaultExpandedKeys: [],
span: 24,
value: [],
},
{
type: 'select',
property: 'demandType',
label: '服务领域',
collectionType: 'REQUIRETYPE',
require: true,
mode: 'default',
// disabled: true,
},
{
type: 'select',
property: 'projectStatus',
label: '项目状态',
collectionType: 'PROJECTSTATUS',
colSpan: 8,
require: true,
mode: 'default',
// disabled: true,
},
{
type: 'textarea',
property: 'projectBackground',
// label: '项目背景',
slotMode: true,
allRound: true, //全手动配置模式-用于定制个性化样式
slot_label: {
name: '项目背景',
html: `<div style="text-align:left;display:inline-block">项目背景：</div>`,
labelSpan: 2,
inputSpan: 22,
colStyle: {
// width: "6.33333%", //终极解决大法
width: 'initial', //终极解决大法
},
},
maxLength: 300,
fieldDecoratorOptions: {
rules: [
{
max: 300,
message: '字段最大长度为300',
}
],
},
// labelWidth: '65px',
span: 24,
tooltip: {
colStyle: {
// width:"3.355555%",
// width: "initial", //终极解决大法
// margin: "0.5% 0.996% 0.1%",
},
show: true,
content: `项目设计缘由，清楚阐述项目需要解决什么社会问题、落地社区背景、已经开展过的调研结果、服务对象选定依据，不超过300字`,
},
},
{
type: 'textarea',
property: 'projectedOutputs',
// label: '预计产出',
slotMode: true,
allRound: true, //全手动配置模式-用于定制个性化样式
slot_label: {
html: `<div style="text-align:left;display:inline-block">预计产出：</div>`,
labelSpan: 2,
inputSpan: 22,
colStyle: {
// width: "6.33333%", //终极解决大法
width: 'initial', //终极解决大法
},
},
maxLength: 300,
fieldDecoratorOptions: {
rules: [
{
max: 300,
message: '字段最大长度为300',
},
],
},
span: 24,
tooltip: {
colStyle: {
// width:"3.355555%",
// width: "initial", //终极解决大法
// margin: "0.5% 0.996% 0.1%",
},
show: true,
content: `预期取得的成果和产出（需具体），并列明成果的具体表现和需达到的水平以及指标，300字以内`,
},
},
{
type: 'checkGroup',
property: 'cpServeObjectPoList',
label: '服务对象',
collectionType: 'SERVICEOBJECT',
require: true,
checkBoxAll: true,
span: 24,
checkAll: false,
onValues: [],
indeterminate: false,
cb_AllChange: async (it) => {
console.log('cb_AllChange', it)
let {
$event: e,
editItem
} = it
console.log('e', e, 'editItem', editItem)
const curDictArr = await Base.asyncGetCodeData('SERVICEOBJECT')
console.log('字典lll', curDictArr)
let isChecked = e.target.checked
if (isChecked) {
//全选
hlta_SetCompsCheckGroup_checkAll.call(
this,
this.createItems,
'cpServeObjectPoList',
true
)
const dictCodeArr = hlta_BackDictValueArr({
dict: 'SERVICEOBJECT',
arr: curDictArr,
})
it.editItem.indeterminate = false
this.item.cpServeObjectPoList = dictCodeArr
} else {
//反选
hlta_SetCompsCheckGroup_checkAll.call(
this,
this.createItems,
'cpServeObjectPoList',
false
)
it.editItem.indeterminate = false
this.item.cpServeObjectPoList = []
}
console.log('全选=', this.item)
},
cb_change: async (it) => {
console.log('cb_Change=', it)
let {
$event: e,
editItem
} = it
const curDictArr = await Base.asyncGetCodeData('SERVICEOBJECT')
console.log('字典lll', curDictArr)
if (e.length < curDictArr.length) {
hlta_SetCompsCheckGroup_checkAll.call(
this,
this.createItems,
'cpServeObjectPoList',
false
)
it.editItem.indeterminate = true
}
console.log('单选=', this.item)
},
// type: "select",
// property: "cpServeObjectPoList",
// label: "服务对象",
// collectionType: "SERVICEOBJECT",
// require: true,
// mode: "multiple",
// span: 24,
disabled: true,
},
{
type: 'number',
property: 'serveNum',
label: '服务人数',
require: false,
precision: 0,
// disabled: true,
},
{
type: 'number',
property: 'budget',
label: '经费预算(万元)',
require: true,
precision: 2,
wrapperColSpan: 22,
tooltip: {
wrapperColSpan: 2,
show: true,
content: `项目整体预算（完成项目所需资金总额）、申请创投资金、自筹资金、其他`,
},
// disabled: true,
},
],
}
}
}
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
# 进阶案例1
再遇到一些第3方组件或者复杂的部件，不怎么好实现的可以，通过tform的扩展槽来实现
<tForm
ref="t-form02"
:form-info="tFormInfo2"
:edit-items="createItems2"
:item="item2"
>
<hlta-superTitle
slot="title"
:theme="1"
:font="'h5'"
:title="'项目说明'"
>
</hlta-superTitle>
<template slot="addEdits">
<ta-col :span="8">
<div class="icontip icontip2">
<ta-tooltip placement="topLeft">
<template slot="title">
支持jpg/jpeg/png/word/pdf 格式，单个不超过10M
</template>
<ta-icon type="question-circle" class="icon-style"/>
</ta-tooltip>
</div>
<ta-form-item
label="附件"
:span="12"
fieldDecoratorId="ossIdList"
>
<ta-upload
:fileList="fileList"
:customRequest="handleChange"
:remove="handleRemove"
:action="url"
name="file"
:beforeUpload="beforeUpload"
accept=".jpg,.jpeg,.png,.doc,.docx,.pdf"
>
<ta-button>
<ta-icon type="upload"/>
上传
</ta-button>
</ta-upload>
</ta-form-item>
</ta-col>
</template>
<template slot="addEdits">
<ta-col :span="8">
<div class="icontip icontip3">
<ta-tooltip placement="topLeft">
<template slot="title">
多个附件，支持扩展名：.rar .zip .doc .docx .pdf .jpg .png ，单个附件不超过10M
</template>
<ta-icon type="question-circle" class="icon-style"/>
</ta-tooltip>
</div>
<ta-form-item
label="项目评估报告"
:span="12"
fieldDecoratorId="assReportList"
>
<ta-upload
name="file"
:fileList="fileList2"
:action="url"
:remove="handleRemove2"
:customRequest="handleChange2"
:beforeUpload="beforeUploadReport"
>
<ta-button>
<ta-icon type="upload"/>
上传
</ta-button>
</ta-upload>
<!-- <div style="color: #aaa; display: block">-->
<!-- (多个附件，支持扩展名：.rar .zip .doc .docx .pdf .jpg .png-->
<!-- ，单个附件不超过10M)-->
<!-- </div>-->
</ta-form-item>
</ta-col>
</template>
</tForm>
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
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
export default {
data() {
return {
tFormInfo2: {
labelWidth: '150px',
},
createItems2: [
{
type: 'select',
property: 'projectQuality',
label: '项目性质',
initValue: this.projectQuality,
collectionType: 'PROJECTNATURE',
// colSpan: 6,
// wrapperCol: {span: 2},
labelWidth: '121px',
require: true,
mode: 'default',
cb_select: (e) => {
// hlta_SetCompsRadioGroup_boolean.call(
// this,
// this.createItems2,
// ['funder'],
// e.$event != '01' ? true : false,
// )
// hlta_SetCompsRadioGroup_boolean.call(
// this,
// this.createItems2,
// ['publicFundraising'],
// e.$event != '03' ? true : false
// )
hlta_SetCompsRadioGroup_muliPropertys.call(
this,
this.createItems2,
['funder'],
{
hidden: () => {
let bn = e.$event == '01' ? true : false
if (!bn) {
let formData =
this.$refs['t-form02'].form999.getFieldsValue()
Object.assign(formData, { funder: null })
this.$refs['t-form02'].form999.setFieldsValue(formData)
}
return bn
},
}
)
hlta_SetCompsRadioGroup_muliPropertys.call(
this,
this.createItems2,
['publicFundraising'],
{
hidden: () => {
let bn = e.$event == '03' ? true : false
if (!bn) {
let formData =
this.$refs['t-form02'].form999.getFieldsValue()
Object.assign(
formData,
{ publicFundraising: '0' },
{ recordCode: null },
{ recordName: null }
)
this.$refs['t-form02'].form999.setFieldsValue(formData)
}
return bn
},
}
)
},
},
{
type: 'select',
property: 'funder',
label: '资助方',
options: this.businessDepList,
labelWidth: '121px',
mode: 'default',
require: true,
hidden: true,
},
{
type: 'select',
property: 'fundSource',
label: '资金来源',
collectionType: 'SOURCEFUNDS',
labelWidth: '121px',
// colSpan: 6,
require: true,
mode: 'default',
// disabled: true,
},
{
type: 'radioGroup',
property: 'publicFundraising',
label: '是否公开募捐',
labelWidth: '121px',
options: [
{
label: '否',
value: '0',
},
{
label: '是',
value: '1',
},
],
colSpan: 6,
require: true,
initValue: '0',
hidden: true,
cb_change: (e) => {
// hlta_SetCompsRadioGroup_boolean.call(
// this,
// this.createItems2,
// ["recordCode"],
// e.$event.target.value == "0" ? true : false
// );
// hlta_SetCompsRadioGroup_boolean.call(
// this,
// this.createItems2,
// ["recordName"],
// e.$event.target.value == "0" ? true : false
// );
hlta_SetCompsRadioGroup_muliPropertys.call(
this,
this.createItems2,
['recordCode', 'recordName'],
{
hidden: () => {
let bn = e.$event.target.value != '0' ? true : false
if (!bn) {
let formData =
this.$refs['t-form02'].form999.getFieldsValue()
Object.assign(
formData,
{ recordCode: null },
{ recordName: null }
)
this.$refs['t-form02'].form999.setFieldsValue(formData)
}
return bn
},
}
)
},
},
{
type: 'text',
property: 'recordCode',
label: '公募备案编号',
labelWidth: '121px',
maxLength: 50,
fieldDecoratorOptions: {
rules: [
{
max: 50,
message: '字段最大长度为50',
},
{
pattern: /^[A-Za-z0-9]+$/,
message: '只支持数字和字母',
},
],
},
hidden: true,
},
{
type: 'text',
property: 'recordName',
label: '募捐备案名称',
labelWidth: '121px',
colSpan: 6,
maxLength: 50,
fieldDecoratorOptions: {
rules: [
{
max: 50,
message: '字段最大长度为50',
},
],
},
hidden: true,
},
{
type: 'multiSingleSelected',
property: 'cpTypePoList',
label: '项目分类',
treeId: 'result',
labelWidth: '121px',
replaceFields: {
title: 'label',
key: 'value',
value: 'value',
},
multiple: true,
treeDataLabel: 'label',
treeDataValue: 'value',
span: 18,
treeDataAsync: [],
treeDefaultExpandedKeys: [],
cb_change: (val) => {
this.cpTypeChange(val)
},
},
{
type: 'textarea',
property: 'projectInnovation',
// label: "项目创新性",
slotMode: true,
allRound: true, //全手动配置模式-用于定制个性化样式
slot_label: {
html: `<div style="text-align:left;display:inline-block">项目创新性：</div>`,
labelSpan: 2,
inputSpan: 22,
colStyle: {
// width: "6.33333%", //终极解决大法
width: 'initial', //终极解决大法
},
},
maxLength: 300,
fieldDecoratorOptions: {
rules: [
{
max: 300,
message: '字段最大长度为300',
},
],
},
// wrapperCol: {
// span: 16,
// },
// labelCol: {
// span: 8,
// },
// labelWidth: "85px",
span: 24,
tooltip: {
colStyle: {
// width:"3.355555%",
// width: "initial", //终极解决大法
// margin: "0.5% 0.996% 0.1%",
},
show: true,
content: `（分析本项目与同类项目的差异性及本项目的独特性，以及完成本项目规定的目标和产出之外的亮点或成效）`,
},
},
{
type: 'textarea',
property: 'riskMeasure',
isLongLabel: true, //插槽模式开启
// label: "可预见风险及应对措施",
slotMode: true,
allRound: true, //全手动配置模式-用于定制个性化样式
slot_label: {
html: `<div style="text-align:left;display:inline-block">可预见风险<br/>及应对措施：</div>`,
labelSpan: 2,
inputSpan: 22,
colStyle: {
// width: "6.33333%", //终极解决大法
width: 'initial', //终极解决大法
},
},
// labelCol: {
// span: 20,
// },
// wrapperCol: {
// span: 16,
// },
maxLength: 300,
fieldDecoratorOptions: {
rules: [
{
max: 300,
message: '字段最大长度为300',
},
],
},
// labelWidth: "88px",
span: 24,
tooltip: {
colStyle: {
// width:"3.355555%",
// width: "initial", //终极解决大法
// margin: "0.5% 0.996% 0.1%",
},
show: true,
content: `可预见风险及应对措施：(说明实施过程中，在技术、人力、经济或政策等方面，有可能遇到哪些困难和风险，如何避免或克服这些困难或风险。)`,
},
},
],
}
}
}
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
# 进阶案例2
多个tform块交互展示
<tForm
v-for="(table, tbIdx) in tform_group"
:key="tbIdx"
:ref="`t-form${tbIdx}`"
:form-info="tFormInfo3"
:edit-items="table.createItems"
:item="table.item"
>
<hlta-superTitle
slot="title"
v-if="tbIdx === 0"
:theme="1"
:font="'h5'"
:title="'项目执行方'"
:more-btn="projectQuality != '01'"
:addNewForm="true"
:addFormOb="addFormObj"
:roller="true"
>
<template slot="moreBtn"></template>
</hlta-superTitle>
<ta-divider
v-else
slot="title"
:dashed="true"
:orientation="'center'"
>
第{{ tbIdx + 1 }}部分
</ta-divider>
</tForm>
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
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
export default {
data() {
return {
item3: {}, //用于存放-tForm-字段值
tform_group: [
{
item: {}, //用于存放-tForm-字段值
createItems: [
{
type: 'select',
property: 'bsoId',
options: [],
label: '执行机构',
require: true,
mode: 'default',
span: 24,
},
{
type: 'textarea',
property: 'synopsis',
label: '机构简介',
maxLength: 1000,
fieldDecoratorOptions: {
rules: [
{
max: 1000,
message: '字段最大长度为1000',
},
],
},
span: 24,
},
{
type: 'text',
property: 'personName',
label: '项目联系人',
require: true,
maxLength: 100,
fieldDecoratorOptions: {
rules: [
{
max: 100,
message: '字段最大长度为100',
},
],
},
span: 11,
},
{
type: 'text',
property: 'personPhone',
label: '联系人手机',
fieldDecoratorOptions: {
rules: [
{
required: true,
pattern:
/(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\(\d{3}\))|(\d{3}\-))?(1[3578]\d{9})$)|(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/,
message: '请输入正确的联系电话',
},
],
},
span: 12,
},
],
},
],
}
}
}
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
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
# prop(属性)
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| form-info | form全局样式 | object | {labelWidth: '110px', } |
| edit-items | 初始化表单模型 | Array | 具体用法详见options |
| item | 查询信息数据归集 | object | - |
# options(可选项配置)
# edit-items
| 参数 | 说明 | 类型 | 默认 |
|---|---|---|---|
| type | 部件类型 | string | text / password / number / checkGroup / radioGroup / switchBtn / uploadImg / uploadFile / textarea / select / date / month / year / quarter / rangeDate / rangeMonth / dupAloneSelected / cascader1 / multiSingleSelected / |
| property | api键名 | string | - |
| label | 块标签名 | string | - |
| require | 开启必填项*出现 | boolean | - |
| maxLength | 输入最大长度 | boolean | - |
| fieldDecoratorOptions | 字段正则多组合数组验证规则 | boolean | 详见ta404ui- ta-form组件说明 |
| collectionType | 字典文本匹配展示，传入字典名称 | string | - |
| hidden | 控制字段是否显示 | boolean | true/false/ boolean=>()=>boolean |
| disabled | 控制字段是否禁用输入 | boolean | - |
| slotMode | label标签-插槽模式开启 | boolean | - |
| slot_label | label插槽标签样式全控制 | object | { html:``, labelSpan:2 , inputSpan:22 } |
| labelWidth | label宽度手动局部重写 | string | - |
| tooltip | 气泡icon内容样式全控制 | object | { show:true, content: leram,leramleram,leram } |
| span | 一行占位布局格数 | Number | 1 ~ 24 |
| allRound | 全手动配置模式-用于定制个性化样式 | boolean | 不是很了解组件设计的慎用，开启后会重置业务组件内默认定义样式，便于手动重写 |
| checkBoxAll | 多选盒子组件是否开启 | boolean | false |
| checkAll | 全选按钮选择状态 | boolean | false |
| onValues | 初始化查询并回显多选状态的控制变量 | Array | - |
| indeterminate | 详见ta404ui文档用法 | boolean | - |
更多属性用法详见：ta404ui1.5.x版本中的taForm组件释义
# Events(事件)
| 方法名称 | 说明 | 返回类型 | 参数 |
|---|---|---|---|
| initFormAllIt | 初始化全部-字段内容 | - | { [property]:[value],[property]:[value],... } |
| verifyFormAllIt | 表单全量验证方法 | Promise | |
| initFormIt | 初始化某一个-字段内容 | - | {} |
| initFormDateIt | 初始化一组，时间格式item-内容 | - | {} |
# slots(插槽)
| 属性 | 说明 | 默认值 | op |
|---|---|---|---|
| title | 表单标题 | - | |
| addEdits | 自定义布局表单单元块 | - | - |
# protocol(规约)
> 1. 该组件局部部件的值应该怎么设置回显？ > 统一用hlta-utils包中的方法，方法名一般是hlta_SetComps 前缀开头 组件 初始化数据 某个对象的值 > 2. 非特殊情况，不要用自己重新定义的方法去设置 部件的值，否则出现异常情况不可控，请统一规范 > 3. hidden属性可以用作一般需求的权限控制，前端拿到后端返回的权限配置信息，返回对应的boolean类型即可（只是控制显示隐藏的鉴权可以用这个属性） > 4. disabled属性用于表单禁用展示，通常是详情页的时候会用到，如果需求更美观的详情页，请使用intro-panel（超级信息展示板）组件去实现
# 列举几种常用设置tform部件值的方法
ps: 更多情况自行查看-hlta-utils包中index.js提供的方法
* 设置普通的select部件的options的值用
> hlta_SetCompsSelectModelData
* 初始化部件通用的options数据
> hlta_SetComps_general_initOptdata
* 用于设置checkGroup-全选-值
> hlta_SetCompsCheckGroup_onValues
...
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8