twmodule 0.0.45 → 0.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +517 -447
  2. package/lib/twComp.common.js +84 -37
  3. package/lib/twComp.css +1 -1
  4. package/lib/twComp.umd.js +84 -37
  5. package/lib/twComp.umd.min.js +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,448 +1,518 @@
1
- # 说明文档
2
- ```
3
- 该组件为项目提供了一些常用的方法，组件，样式。
4
- ```
5
- ## 指令操作
6
- ```
7
- npm/cnpm i
8
- 依赖包下载
9
-
10
- npm run serve
11
- 启动开发环境
12
-
13
- npm run build
14
- 打包正式环境
15
-
16
- npm run test
17
- 打包测试环境
18
- ```
19
- ## 组件库说明
20
- ### 公共方法
21
- ```
22
- 1、formatDate(time, fmt) //时间格式化
23
- 参数说明：
24
- time:传入的时间
25
- fmt:期望的格式（yyyy年MM月dd日 hh时mm分ss秒）
26
-
27
- 2、changeNum(num,changeType,len) //数字格式化
28
- 参数说明：
29
- num:传入的数字
30
- changeType：格式化后返回的格式
31
- tofixed3--保留三位小数
32
- comma3--保留3位小数，正数部分添加百分号
33
- comma：正数部分添加千分位符号 //10,000.00
34
- percent ：添加百分号
35
- pointL-返回整数部分
36
- pointLC-返回整数部分,带千分位
37
- pointR-返回小数部分
38
- len：所有类型保留几位小数，默认保留2位小数。
39
-
40
- 3、sortFunc(arr,word,type,isDate) //数组对象的排序
41
- 参数说明：
42
- arr：传入的数组
43
- word：按照对象中的某个字段排序（字段值为可以比较大小的内容，比如时间或数字）
44
- type：排序规则
45
- 默认||asc：升序
46
- 任意值：降序
47
- isDate：是否是按时间排序
48
-
49
- 4、urlSearch(name) //获取路由中的参数
50
- 参数说明：
51
- name：参数名
52
-
53
- 5、deepClone(obj)//深度克隆
54
-
55
- 6、getObjFromList(arr,key,value,child,currObj)//从多层级数组中获取指定key:value的该对象
56
- arr：数组
57
- key：key值
58
- value：value值
59
- child：子级名字
60
- currObj：承接返回对象的对象名
61
-
62
- 7、delRepeat(arr)数组去重
63
- 8、delRepeatObj(arr,keyWord)数组对象去重
64
- ```
65
- ### 公共样式
66
- #### 1、字体
67
- ```
68
- 导航文字： .twFontNav
69
- 标题文字： .twFontTitle
70
- 主要文字： .twFontMain
71
- 次要文字： .twFontMinor
72
- 辅助文字： .twFontNote
73
- ```
74
- #### 2、主题色
75
- ```
76
- （1）用于移动端的蓝色
77
- 蓝色字体： .twMoFoBlue
78
- 可跳转字体: .twMoFontPoint
79
- 按钮: .twBtnMo
80
- 显示/禁用按钮: .twBtnMo .twMoBgRead
81
-
82
- （2）用于PC端的蓝色
83
- 蓝色字体： .twPcFoBlue
84
- 可跳转字体: .twPcFontPoint
85
- 按钮: .twBtnPc
86
- 显示/禁用按钮: .twBtnPc .twPcBgRead
87
-
88
- （3）主题红色
89
- 蓝色字体： .twRedFoRed
90
- 可跳转字体: .twRedFontPoint
91
- 按钮: .twBtnRed
92
- 显示/禁用按钮: .twBtnRed .twRedBgRead
93
-
94
- （4）辅助色
95
- 警告：.twWarCo .twWarBg
96
- 成功: .twSucCo .twSucBg
97
- 危险：.twDanCo .twDanBg
98
- 信息：.twInfCo .twInfBg
99
-
100
- （5）中间色
101
- 不可操作背景色：.twDisColor
102
- 页面背景色：.twBgColor
103
-
104
- ```
105
- #### 3、一些简单的样式
106
- ```
107
- .twBorder //添加线条
108
- .twBorder-b //添加底部线条
109
-
110
- .twEllipsis //文字超过1行后结尾截断并出现...
111
- .twEllipsis2 //文字超过2行
112
- .twEllipsis3 //文字超过3行
113
-
114
- .twRadius //圆角弧度5px
115
- .twRadius10 //圆角弧度10px
116
-
117
- .twBtnForm //表单按钮样式
118
- .twBtnBasic //基础按钮样式
119
-
120
- //flex布局样式
121
- .twFlex
122
- .twFlex-between
123
- .twFlex-around
124
- .twFlexCo
125
- .twFlexCo-between
126
- .twFlexCo-around
127
-
128
- ......未完待续
129
- ```
130
-
131
- ### 公共组件
132
- #### 1、表单
133
- ```
134
- 一、主要用于移动端(基于mint-ui),推荐使用第二种表单控件。
135
- <twForm :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForm>
136
- 参数说明：
137
- func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
138
- gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
139
- formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
140
- 字段是否填
141
- 写。如果都填写完成，则会在此方法中返回一个对象。
142
- obj = {
143
- currState: true,//表示必填已填完（此方法中必为true）。
144
- mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
145
- （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
146
- sendData:{}//可用于发起请求的表单数据。
147
- }
148
- ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
149
- ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
150
- data:{
151
- title:'',//为空时，则没有标题。（表单独占一页时，强烈建议title不为空！）
152
- hideSaveBtn:false,//（可选项，默认false）
153
- isLocalShow:false,//（可选项，默认false）是否以块级表单显示，默认占屏100vh。
154
- id:'formId',//此ID为表单ID，也可以用ref方式获取该dom节点。
155
- formList:[//构建表单数据
156
- {name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate',timeType:'',startDate:'2018-01-01',endDate:'2021-01-01'},
157
- {name:'放养品种',showName:'',value:'',valueName:'breedVarietyCode',placeholder:'请选择品种',type:'selectMore',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
158
- {name:'品种分类',showName:'',value:'',valueName:'varietyClassifyCode',require:true,placeholder:'请选择分类',type:'selectOne',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
159
- {name:'放养重量',value:'',valueName:'breedWeight',require:true,placeholder:'请输入重量',type:'number',unit:'kg',tofixed:3,blur:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
160
- {name:'放养数量',value:'',valueName:'breedNumber',require:true,placeholder:'请输入数量',type:'tel',unit:'尾',blur:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
161
- {name:'放养规格',value:'',valueName:'breedSpecification',require:true,placeholder:'自动计算',type:'number',unit:'克/尾',tofixed:1,readonly:true},
162
- {name:'单价',value:'',valueName:'price',require:true,placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
163
- {name:'总金额',value:'',valueName:'totalMoney',placeholder:'自动计算',type:'number',unit:'元',readonly:true,tofixed:2},
164
- {name:'备注',value:'',valueName:'remark',type:'textarea',limit:200,placeholder:'请输入备注'},
165
- {name:'模块ID',value:'',valueName:'pkId',isHidden:true},
166
- {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
167
- ]
168
- }
169
-
170
- formList字段说明：
171
- name：label名字。
172
- showName：单选或者多选时，选中后需要展示的文案。
173
- value：传给后台的value值。多选时，value为选中的数组对象
174
- valueName：传给后台的key。
175
- require：true为必填。
176
- type：输入框类型//text,tel,number,selectDate,selectMore,selectOne，textarea。
177
- timeType：type为selectDate时，timeType选择时间的类型（year,month,不填为默认年月日的格式）。
178
- startDate：type为selectDate时，设置时间控件的起始时间。
179
- endtDate：type为selectDate时，设置时间控件的结束时间。
180
- list：type为selectMore,selectOne时，弹出框的内容。
181
- tofixed：type为number时，小数位数保留X位。
182
- limit：type为textarea时，内容字数限制以及右下角的字数实时展示。
183
- readonly：是否可填。
184
- isHidden：是否隐藏该项。
185
- unit：该项单位。
186
-
187
- blur：该字段将会与blurContact中的字段进行相加复值到blurResult字段中。
188
- blurContact：
189
- blurResult：
190
-
191
- ggContact：//如果blur的这个字段会联动2次加法计算，就要启动该字段，值为
192
- [本身的valueName,'关联的另一个字段']，会计算[]中的2个字段并复值给ggResult字段中。
193
- ggResult：
194
-
195
- 额外方法：
196
- //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
197
- 1、this.$refs.childForm.saveData();
198
-
199
- //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
200
- 2、this.$refs.childForm.getCurrData();
201
-
202
-
203
-
204
- 二、主要用于移动端(基于vant),推荐使用该表单。
205
- <twForms :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForms>
206
- 参数说明：
207
- func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
208
- gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
209
- formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
210
- 字段是否填写。如果都填写完成，则会在此方法中返回一个对象。
211
- obj = {
212
- currState: true,//表示必填已填完（此方法中必为true）。
213
- mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
214
- （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
215
- sendData:{}//可用于发起请求的表单数据。
216
- }
217
- ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
218
- ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
219
- data:{
220
- title:'vantForm',
221
- hideSaveBtn:false,
222
- isLocalShow:false,
223
- id:'formId',
224
- formList:[
225
- {name:'整数（正负）',id:'',className:'',required:true,showName:'',value:'',valueName:'breedDate1',placeholder:'digit',type:'digit',limit:50,showLimit:false},
226
- {name:'数字',required:true,value:'',valueName:'breedWeight',placeholder:'number',type:'number',unit:'kg',tofixed:3,isCount:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
227
- {name:'正整数（电话号码）',required:true,limit:11,value:'',valueName:'breedNumber',placeholder:'请输入数量',type:'tel',unit:'尾',isCount:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
228
- {name:'放养规格',value:'',required:true,valueName:'breedSpecification',placeholder:'自动计算（数字*正整数）',type:'number',unit:'克/尾',tofixed:1,readonly:true},
229
- {name:'单价',value:'',required:true,valueName:'price',placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,isCount:true,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
230
- {name:'总金额',value:'',required:true,valueName:'totalMoney',placeholder:'自动计算（数字*单价）',type:'number',unit:'元',readonly:true,tofixed:2},
231
-
232
- {name:'radio',showName:'',required:true,value:'',valueName:'breedCode111',placeholder:'请选择品种',type:'radio',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
233
- {name:'radioPop',showName:'',required:true,value:'',valueName:'breedVarietyCode222',placeholder:'请选择品种',type:'radioPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
234
-
235
- {name:'checkBox',showName:'',required:true,value:[],valueName:'breedCode',placeholder:'请选择品种',type:'checkBox',maxChoose:3,list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
236
- {name:'checkBoxPop',showName:'',required:true,value:[],valueName:'breedVarietyCode',placeholder:'请选择品种',radioCheckColor:'red',type:'checkBoxPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
237
-
238
- {name:'选择客户2',showName:'',required:true,value:'',valueName:'breedDate2',placeholder:'selectPage',type:'selectPage'},
239
- {name:'放养日期',value:'',required:true,valueName:'breedDate',placeholder:'时间选择',type:'selectDate',timeType:'year',startDate:'2020-01-01',endDate:'2020-12-31'},
240
- {name:'放养日期2',value:'',required:true,valueName:'breedDate2',placeholder:'时间段选择',type:'selectRange',startDate:'2020-01-01',rangeColor:'#3399ff',rangeType:'range',endDate:'2020-12-31',startText:'出差',endText:'结束'},
241
- {name:'品种分类',showName:'',required:true,value:'',valueName:'varietyClassifyCode',placeholder:'上拉选择',type:'selectOne',list:
242
- [{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]},
243
- {name:'品种分类2',required:true,showName:'',value:'',valueName:'varietyClassifyCode2',placeholder:'多列上拉选择',type:'selectOne',list:
244
- [{values:[{text:'分类1',value:1},{text:'分类2',value:2}],defaultIndex: 0},{values:[{text:'分类3',value:3},{text:'分类4',value:4}],defaultIndex: 0},{defaultIndex: 0}]},
245
- {name:'选址',showName:'',required:true,value:'',valueName:'varietyClassifyCode3',placeholder:'级联上拉选择',type:'selectOneContact',levelNum:3,list:
246
- [{
247
- text: '浙江',
248
- value:'1',
249
- children: [{
250
- text: '杭州',
251
- value:'11',
252
- children: [{ text: '西湖区',value:'111' }, { text: '余杭区',value:'112' }]
253
- }, {
254
- text: '温州',
255
- value:'12',
256
- children: [{ text: '鹿城区',value:'121' }, { text: '瓯海区',value:'122' }]
257
- }]
258
- }, {
259
- text: '福建',
260
- value:'2',
261
- children: [{
262
- text: '福州',
263
- value:'21',
264
- children: [{ text: '鼓楼区',value:'211' }, { text: '台江区',value:'212' }]
265
- }, {
266
- text: '厦门',
267
- value:'22',
268
- children: [{ text: '思明区',value:'221' }, { text: '海沧区',value:'222' }]
269
- }]
270
- }]
271
- },
272
- {name:'备注',value:'',valueName:'remark',required:true,type:'textarea',limit:200,placeholder:'富文本框inline',isInline:true},
273
- {name:'备注2',value:'',valueName:'remark2',required:true,type:'textarea',limit:200,placeholder:'富文本框block'},
274
- {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
275
- ]
276
- }
277
-
278
- formList字段说明：
279
- name：label名字。
280
- id:'',
281
- className:'',
282
- showName：单选或者多选时，选中后需要展示的文案。
283
- value：传给后台的value值。多选时，value为选中的数组对象
284
- valueName：传给后台的key。
285
- require：true为必填。
286
- list：所有弹出框的内容。
287
- limit：输入框右下角的字数实时展示（针对手动输入项）。
288
- showLimit：是否显示右下角字数实时展示（true/false）。
289
- readonly：是否可填。
290
- disabled：是否禁用。
291
- isHidden：是否隐藏该项。
292
- unit：该项单位。
293
- errMsg：必填输入框的错误提示。（默认：必填！）
294
-
295
- isCount：是否有表单字段需要相互计算。
296
- countContact：需要进行计算的字段名。//['price','num']
297
- countResult：计算出来的值赋值到另一个字段。//totalPrice
298
- countRule：计算规则（eval解析）,注释中的a,b对应countContact数组中的字段，目前可以对4个字段进行计算。//(a*b).toFixed(2)
299
-
300
- 第二套计算模板，与上面三个字段的用法完全一致。当某个字段会进行2次计算的时候，可以用第二套模板进行计算
301
- secContact：//['price','num','discount']
302
- secResult：//totalPrice
303
- secRule：为避免变量冲突，abcd变为a1,b1,c1,d1//(a1*b1*c1).toFixed(2)
304
-
305
- type：输入框类型//
306
- text:文本
307
- tel:纯数字
308
- number:数字
309
- tofixed：type为number时，小数位数保留X位。
310
- digit: ±整数
311
- password:密码
312
- selectPage:触发自定义事件
313
-
314
- selectDate:选择时间点
315
- startDate：起始时间。
316
- endtDate：结束时间。
317
- timeType：
318
- time：23时59分
319
- datetime（默认） ：2020-01-01 01:01:01
320
- date ：2020-01-01
321
- year-month ：2020-01
322
- year：2020
323
-
324
- selectRange:选择时间段
325
- startDate：起始时间。
326
- endtDate：结束时间。
327
- rangeType：
328
- single(默认)：选某天
329
- range：选时间段
330
- rangeColor：组件自定义颜色，默认#3399ff
331
- startText:开始时间下方的文案//'入住'
332
- endText:结束时间下方的文案//'离店'
333
-
334
- selectOne:上拉选择（单列，多列）
335
- list:每一列中，values存放展示的数组，defaultIndex设置默认值（0开始）
336
- //[{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]
337
- selectOneContact:级联上拉选择
338
- list：数据模型见demo
339
-
340
- radio:表单内的radio
341
- radioPop:弹出框的radio
342
- radioCheckColor：自定义颜色
343
-
344
- checkBox:表单内的checkBox
345
- checkBoxPop:弹出框的checkBox
346
- radioCheckColor：自定义颜色
347
- maxChoose：可以选择的最大数量（默认不限制）
348
-
349
- textarea:多行文本
350
- isInline：是否是行内元素。（默认false）
351
- maxHeight：默认100高度（25为一行）
352
-
353
- 额外方法：
354
- //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
355
- 1、this.$refs.childForm.saveData();
356
-
357
- //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
358
- 2、this.$refs.childForm.getCurrData();
359
-
360
- 引导方法：
361
- this.guidance(this.yindao);
362
- yindao:[
363
- {
364
- id: 'create1',
365
- className: 'firstStyle',
366
- title: '新功能引导',
367
- description: '现在可以查看XX拉！',
368
- position: 'bottom-center'
369
- },
370
- {
371
- id: 'create2',
372
- title: '新功能引导',
373
- description: '现在可以查看YY拉！',
374
- position: 'bottom'
375
- },
376
- {
377
- id: 'create3',
378
- title: '新功能引导',
379
- description: '现在可以查看ZZ拉！',
380
- position: 'bottom'
381
- }
382
- ]
383
- ```
384
- #### 版本16的更新内容：
385
- ```
386
- 新增form表单 单项模板：
387
- <formItem :formData="formData.data"></formItem>
388
- formData的数据格式与之前整个form表单的对应对象保持一致。
389
- ```
390
- #### 2、搜索
391
- ```
392
-
393
- <twSearch :searchForm="data" @getSendData="func"></twSearch>
394
- 参数说明：
395
- func：//点击组件中的搜索按钮后，会在此方法中返回组件内所填数据。
396
- data:{
397
- formSize:'',//large 默认 small mini
398
- defaultList:[
399
- {name:'',value:'',valueName:'keywords',placeholder:'请输入关键字',type:'text'}
400
- ],
401
- highList:[
402
- {name:'所属公司',value:'',valueName:'orgCode',placeholder:'请输入关键字',type:'text'},
403
- {name:'放养品种',value:'',valueName:'breedCode',placeholder:'请选择品种',type:'selectMore',list:[{label:'品种1',value:'1'},{label:'品种2',value:'2'},{label:'品种3',value:'3'},{label:'品种4',value:'4'},{label:'品种5',value:'5'}]},
404
- {name:'品种分类',value:'',valueName:'varietyCode',placeholder:'请选择分类',type:'selectOne',list:[{label:'分类1',value:'1'},{label:'分类2',value:'2'}]},
405
- {name:'放养日期',value:'',valueName:'breedDate',placeholder:'请输入年限',type:'selectDate',dateType:'month'},//默认->date month year
406
- {name:'放养周期',value:'',placeholder:'请输入周期',type:'selectPeriod',startDate:'startDate',endDate:'endDate'}
407
- ]
408
- }
409
-
410
- 字段说明：
411
- formSize：为整个组件的大小配置。
412
- defaultList：默认显示的搜索组件列表。
413
- highList：高级搜索内的组件列表（有相关触发按钮）。
414
- name：label名字。
415
- value：传给后台的value值。多选时，value为选中的数组对象
416
- valueName：传给后台的key。
417
- type：输入框类型//text,selectDate,selectPeriod,selectMore,selectOne。
418
- list：type为selectMore,selectOne时，下拉框的内容。
419
-
420
- ```
421
-
422
- #### 3、分页
423
- ```
424
- <twPagination :total="total" :size="size" :pageSize="pageSize" @paginaFunc="paginaFunc"></twPagination>
425
- pageSize:每页条数，非必填，默认10条 支持 10,20,30,50
426
- size:样式大小，字符串，非必填，可选值为：'small'。
427
- total：table表的总条数。
428
- paginaFunc：当页数或一页显示多少条触发时，返回一个对象。
429
- {currPage: 2, currSize: 10}//当前页、每页显示条数
430
-
431
- ```
432
-
433
-
434
- #### 4、步骤条
435
- ```
436
- <Step :stepData="stepData" @toggleStep="toggleStep"></Step>
437
- toggleStep：切换步骤时的回调函数。
438
- stepData：{
439
- class:'moBlueStep',//moBlueStep redStep pcBlueStep 三种颜色，默认moBlueStep
440
- icon:'el-icon-success',//完成后的icon图标，可以用element里面的所有icon，默认el-icon-success
441
- list:[
442
- {name:'步骤1'},
443
- {name:'步骤2'},
444
- {name:'步骤3'}
445
- ]
446
- }
447
-
1
+ # 说明文档
2
+ ```
3
+ 该组件为项目提供了一些常用的方法，组件，样式。
4
+ ```
5
+ ## 指令操作
6
+ ```
7
+ npm/cnpm i
8
+ 依赖包下载
9
+
10
+ npm run serve
11
+ 启动开发环境
12
+
13
+ npm run build
14
+ 打包正式环境
15
+
16
+ npm run test
17
+ 打包测试环境
18
+ ```
19
+ ## 组件库说明
20
+ ### 公共方法
21
+ ```
22
+ 1、formatDate(time, fmt) //时间格式化
23
+ 参数说明：
24
+ time:传入的时间
25
+ fmt:期望的格式（yyyy年MM月dd日 hh时mm分ss秒）
26
+
27
+ 2、changeNum(num,changeType,len) //数字格式化
28
+ 参数说明：
29
+ num:传入的数字
30
+ changeType：格式化后返回的格式
31
+ tofixed3--保留三位小数
32
+ comma3--保留3位小数，正数部分添加百分号
33
+ comma：正数部分添加千分位符号 //10,000.00
34
+ percent ：添加百分号
35
+ pointL-返回整数部分
36
+ pointLC-返回整数部分,带千分位
37
+ pointR-返回小数部分
38
+ len：所有类型保留几位小数，默认保留2位小数。
39
+
40
+ 3、sortFunc(arr,word,type,isDate) //数组对象的排序
41
+ 参数说明：
42
+ arr：传入的数组
43
+ word：按照对象中的某个字段排序（字段值为可以比较大小的内容，比如时间或数字）
44
+ type：排序规则
45
+ 默认||asc：升序
46
+ 任意值：降序
47
+ isDate：是否是按时间排序
48
+
49
+ 4、urlSearch(name) //获取路由中的参数
50
+ 参数说明：
51
+ name：参数名
52
+
53
+ 5、deepClone(obj)//深度克隆
54
+
55
+ 6、getObjFromList(arr,key,value,child,currObj)//从多层级数组中获取指定key:value的该对象
56
+ arr：数组
57
+ key：key值
58
+ value：value值
59
+ child：子级名字
60
+ currObj：承接返回对象的对象名
61
+
62
+ 7、delRepeat(arr)数组去重
63
+ 8、delRepeatObj(arr,keyWord)数组对象去重
64
+ ```
65
+ ### 公共样式
66
+ #### 1、字体
67
+ ```
68
+ 导航文字： .twFontNav
69
+ 标题文字： .twFontTitle
70
+ 主要文字： .twFontMain
71
+ 次要文字： .twFontMinor
72
+ 辅助文字： .twFontNote
73
+ ```
74
+ #### 2、主题色
75
+ ```
76
+ （1）用于移动端的蓝色
77
+ 蓝色字体： .twMoFoBlue
78
+ 可跳转字体: .twMoFontPoint
79
+ 按钮: .twBtnMo
80
+ 显示/禁用按钮: .twBtnMo .twMoBgRead
81
+
82
+ （2）用于PC端的蓝色
83
+ 蓝色字体： .twPcFoBlue
84
+ 可跳转字体: .twPcFontPoint
85
+ 按钮: .twBtnPc
86
+ 显示/禁用按钮: .twBtnPc .twPcBgRead
87
+
88
+ （3）主题红色
89
+ 蓝色字体： .twRedFoRed
90
+ 可跳转字体: .twRedFontPoint
91
+ 按钮: .twBtnRed
92
+ 显示/禁用按钮: .twBtnRed .twRedBgRead
93
+
94
+ （4）辅助色
95
+ 警告：.twWarCo .twWarBg
96
+ 成功: .twSucCo .twSucBg
97
+ 危险：.twDanCo .twDanBg
98
+ 信息：.twInfCo .twInfBg
99
+
100
+ （5）中间色
101
+ 不可操作背景色：.twDisColor
102
+ 页面背景色：.twBgColor
103
+
104
+ ```
105
+ #### 3、一些简单的样式
106
+ ```
107
+ .twBorder //添加线条
108
+ .twBorder-b //添加底部线条
109
+
110
+ .twEllipsis //文字超过1行后结尾截断并出现...
111
+ .twEllipsis2 //文字超过2行
112
+ .twEllipsis3 //文字超过3行
113
+
114
+ .twRadius //圆角弧度5px
115
+ .twRadius10 //圆角弧度10px
116
+
117
+ .twBtnForm //表单按钮样式
118
+ .twBtnBasic //基础按钮样式
119
+
120
+ //flex布局样式
121
+ .twFlex
122
+ .twFlex-between
123
+ .twFlex-around
124
+ .twFlexCo
125
+ .twFlexCo-between
126
+ .twFlexCo-around
127
+
128
+ ......未完待续
129
+ ```
130
+
131
+ ### 公共组件
132
+ #### 1、表单
133
+ ```
134
+ 一、主要用于移动端(基于mint-ui),推荐使用第二种表单控件。
135
+ <twForm :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForm>
136
+ 参数说明：
137
+ func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
138
+ gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
139
+ formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
140
+ 字段是否填
141
+ 写。如果都填写完成，则会在此方法中返回一个对象。
142
+ obj = {
143
+ currState: true,//表示必填已填完（此方法中必为true）。
144
+ mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
145
+ （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
146
+ sendData:{}//可用于发起请求的表单数据。
147
+ }
148
+ ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
149
+ ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
150
+ data:{
151
+ title:'',//为空时，则没有标题。（表单独占一页时，强烈建议title不为空！）
152
+ hideSaveBtn:false,//（可选项，默认false）
153
+ isLocalShow:false,//（可选项，默认false）是否以块级表单显示，默认占屏100vh。
154
+ id:'formId',//此ID为表单ID，也可以用ref方式获取该dom节点。
155
+ formList:[//构建表单数据
156
+ {name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate',timeType:'',startDate:'2018-01-01',endDate:'2021-01-01'},
157
+ {name:'放养品种',showName:'',value:'',valueName:'breedVarietyCode',placeholder:'请选择品种',type:'selectMore',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
158
+ {name:'品种分类',showName:'',value:'',valueName:'varietyClassifyCode',require:true,placeholder:'请选择分类',type:'selectOne',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
159
+ {name:'放养重量',value:'',valueName:'breedWeight',require:true,placeholder:'请输入重量',type:'number',unit:'kg',tofixed:3,blur:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
160
+ {name:'放养数量',value:'',valueName:'breedNumber',require:true,placeholder:'请输入数量',type:'tel',unit:'尾',blur:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
161
+ {name:'放养规格',value:'',valueName:'breedSpecification',require:true,placeholder:'自动计算',type:'number',unit:'克/尾',tofixed:1,readonly:true},
162
+ {name:'单价',value:'',valueName:'price',require:true,placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
163
+ {name:'总金额',value:'',valueName:'totalMoney',placeholder:'自动计算',type:'number',unit:'元',readonly:true,tofixed:2},
164
+ {name:'备注',value:'',valueName:'remark',type:'textarea',limit:200,placeholder:'请输入备注'},
165
+ {name:'模块ID',value:'',valueName:'pkId',isHidden:true},
166
+ {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
167
+ ]
168
+ }
169
+
170
+ formList字段说明：
171
+ name：label名字。
172
+ showName：单选或者多选时，选中后需要展示的文案。
173
+ value：传给后台的value值。多选时，value为选中的数组对象
174
+ valueName：传给后台的key。
175
+ require：true为必填。
176
+ type：输入框类型//text,tel,number,selectDate,selectMore,selectOne，textarea。
177
+ timeType：type为selectDate时，timeType选择时间的类型（year,month,不填为默认年月日的格式）。
178
+ startDate：type为selectDate时，设置时间控件的起始时间。
179
+ endtDate：type为selectDate时，设置时间控件的结束时间。
180
+ list：type为selectMore,selectOne时，弹出框的内容。
181
+ tofixed：type为number时，小数位数保留X位。
182
+ limit：type为textarea时，内容字数限制以及右下角的字数实时展示。
183
+ readonly：是否可填。
184
+ isHidden：是否隐藏该项。
185
+ unit：该项单位。
186
+
187
+ blur：该字段将会与blurContact中的字段进行相加复值到blurResult字段中。
188
+ blurContact：
189
+ blurResult：
190
+
191
+ ggContact：//如果blur的这个字段会联动2次加法计算，就要启动该字段，值为
192
+ [本身的valueName,'关联的另一个字段']，会计算[]中的2个字段并复值给ggResult字段中。
193
+ ggResult：
194
+
195
+ 额外方法：
196
+ //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
197
+ 1、this.$refs.childForm.saveData();
198
+
199
+ //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
200
+ 2、this.$refs.childForm.getCurrData();
201
+
202
+
203
+
204
+ 二、主要用于移动端(基于vant),推荐使用该表单。
205
+ <twForms :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForms>
206
+ 参数说明：
207
+ func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
208
+ gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
209
+ formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
210
+ 字段是否填写。如果都填写完成，则会在此方法中返回一个对象。
211
+ obj = {
212
+ currState: true,//表示必填已填完（此方法中必为true）。
213
+ mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
214
+ （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
215
+ sendData:{}//可用于发起请求的表单数据。
216
+ }
217
+ ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
218
+ ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
219
+ data:{
220
+ title:'vantForm',
221
+ hideSaveBtn:false,
222
+ isLocalShow:false,
223
+ id:'formId',
224
+ formList:[
225
+ {name:'整数（正负）',id:'',className:'',required:true,showName:'',value:'',valueName:'breedDate1',placeholder:'digit',type:'digit',limit:50,showLimit:false},
226
+ {name:'数字',required:true,value:'',valueName:'breedWeight',placeholder:'number',type:'number',unit:'kg',tofixed:3,isCount:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
227
+ {name:'正整数（电话号码）',required:true,limit:11,value:'',valueName:'breedNumber',placeholder:'请输入数量',type:'tel',unit:'尾',isCount:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
228
+ {name:'放养规格',value:'',required:true,valueName:'breedSpecification',placeholder:'自动计算（数字*正整数）',type:'number',unit:'克/尾',tofixed:1,readonly:true},
229
+ {name:'单价',value:'',required:true,valueName:'price',placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,isCount:true,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
230
+ {name:'总金额',value:'',required:true,valueName:'totalMoney',placeholder:'自动计算（数字*单价）',type:'number',unit:'元',readonly:true,tofixed:2},
231
+
232
+ {name:'radio',showName:'',required:true,value:'',valueName:'breedCode111',placeholder:'请选择品种',type:'radio',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
233
+ {name:'radioPop',showName:'',required:true,value:'',valueName:'breedVarietyCode222',placeholder:'请选择品种',type:'radioPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
234
+
235
+ {name:'checkBox',showName:'',required:true,value:[],valueName:'breedCode',placeholder:'请选择品种',type:'checkBox',maxChoose:3,list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
236
+ {name:'checkBoxPop',showName:'',required:true,value:[],valueName:'breedVarietyCode',placeholder:'请选择品种',radioCheckColor:'red',type:'checkBoxPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
237
+
238
+ {name:'选择客户2',showName:'',required:true,value:'',valueName:'breedDate2',placeholder:'selectPage',type:'selectPage'},
239
+ {name:'放养日期',value:'',required:true,valueName:'breedDate',placeholder:'时间选择',type:'selectDate',timeType:'year',startDate:'2020-01-01',endDate:'2020-12-31'},
240
+ {name:'放养日期2',value:'',required:true,valueName:'breedDate2',placeholder:'时间段选择',type:'selectRange',startDate:'2020-01-01',rangeColor:'#3399ff',rangeType:'range',endDate:'2020-12-31',startText:'出差',endText:'结束'},
241
+ {name:'品种分类',showName:'',required:true,value:'',valueName:'varietyClassifyCode',placeholder:'上拉选择',type:'selectOne',list:
242
+ [{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]},
243
+ {name:'品种分类2',required:true,showName:'',value:'',valueName:'varietyClassifyCode2',placeholder:'多列上拉选择',type:'selectOne',list:
244
+ [{values:[{text:'分类1',value:1},{text:'分类2',value:2}],defaultIndex: 0},{values:[{text:'分类3',value:3},{text:'分类4',value:4}],defaultIndex: 0},{defaultIndex: 0}]},
245
+ {name:'选址',showName:'',required:true,value:'',valueName:'varietyClassifyCode3',placeholder:'级联上拉选择',type:'selectOneContact',levelNum:3,list:
246
+ [{
247
+ text: '浙江',
248
+ value:'1',
249
+ children: [{
250
+ text: '杭州',
251
+ value:'11',
252
+ children: [{ text: '西湖区',value:'111' }, { text: '余杭区',value:'112' }]
253
+ }, {
254
+ text: '温州',
255
+ value:'12',
256
+ children: [{ text: '鹿城区',value:'121' }, { text: '瓯海区',value:'122' }]
257
+ }]
258
+ }, {
259
+ text: '福建',
260
+ value:'2',
261
+ children: [{
262
+ text: '福州',
263
+ value:'21',
264
+ children: [{ text: '鼓楼区',value:'211' }, { text: '台江区',value:'212' }]
265
+ }, {
266
+ text: '厦门',
267
+ value:'22',
268
+ children: [{ text: '思明区',value:'221' }, { text: '海沧区',value:'222' }]
269
+ }]
270
+ }]
271
+ },
272
+ {name:'备注',value:'',valueName:'remark',required:true,type:'textarea',limit:200,placeholder:'富文本框inline',isInline:true},
273
+ {name:'备注2',value:'',valueName:'remark2',required:true,type:'textarea',limit:200,placeholder:'富文本框block'},
274
+ {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
275
+ ]
276
+ }
277
+
278
+ formList字段说明：
279
+ name：label名字。
280
+ id:'',
281
+ className:'',
282
+ showName：单选或者多选时，选中后需要展示的文案。
283
+ value：传给后台的value值。多选时，value为选中的数组对象
284
+ valueName：传给后台的key。
285
+ require：true为必填。
286
+ list：所有弹出框的内容。
287
+ limit：输入框右下角的字数实时展示（针对手动输入项）。
288
+ showLimit：是否显示右下角字数实时展示（true/false）。
289
+ readonly：是否可填。
290
+ disabled：是否禁用。
291
+ isHidden：是否隐藏该项。
292
+ unit：该项单位。
293
+ errMsg：必填输入框的错误提示。（默认：必填！）
294
+
295
+ isCount：是否有表单字段需要相互计算。
296
+ countContact：需要进行计算的字段名。//['price','num']
297
+ countResult：计算出来的值赋值到另一个字段。//totalPrice
298
+ countRule：计算规则（eval解析）,注释中的a,b对应countContact数组中的字段，目前可以对4个字段进行计算。//(a*b).toFixed(2)
299
+
300
+ 第二套计算模板，与上面三个字段的用法完全一致。当某个字段会进行2次计算的时候，可以用第二套模板进行计算
301
+ secContact：//['price','num','discount']
302
+ secResult：//totalPrice
303
+ secRule：为避免变量冲突，abcd变为a1,b1,c1,d1//(a1*b1*c1).toFixed(2)
304
+
305
+ type：输入框类型//
306
+ text:文本
307
+ tel:纯数字
308
+ number:数字
309
+ tofixed：type为number时，小数位数保留X位。
310
+ digit: ±整数
311
+ password:密码
312
+ selectPage:触发自定义事件
313
+
314
+ selectDate:选择时间点
315
+ startDate：起始时间。
316
+ endtDate：结束时间。
317
+ timeType：
318
+ time：23时59分
319
+ datetime（默认） ：2020-01-01 01:01:01
320
+ date ：2020-01-01
321
+ year-month ：2020-01
322
+ year：2020
323
+
324
+ selectRange:选择时间段
325
+ startDate：起始时间。
326
+ endtDate：结束时间。
327
+ rangeType：
328
+ single(默认)：选某天
329
+ range：选时间段
330
+ rangeColor：组件自定义颜色，默认#3399ff
331
+ startText:开始时间下方的文案//'入住'
332
+ endText:结束时间下方的文案//'离店'
333
+
334
+ selectOne:上拉选择（单列，多列）
335
+ list:每一列中，values存放展示的数组，defaultIndex设置默认值（0开始）
336
+ //[{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]
337
+ selectOneContact:级联上拉选择
338
+ list：数据模型见demo
339
+
340
+ radio:表单内的radio
341
+ radioPop:弹出框的radio
342
+ radioCheckColor：自定义颜色
343
+
344
+ checkBox:表单内的checkBox
345
+ checkBoxPop:弹出框的checkBox
346
+ radioCheckColor：自定义颜色
347
+ maxChoose：可以选择的最大数量（默认不限制）
348
+
349
+ textarea:多行文本
350
+ isInline：是否是行内元素。（默认false）
351
+ maxHeight：默认100高度（25为一行）
352
+
353
+ 额外方法：
354
+ //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
355
+ 1、this.$refs.childForm.saveData();
356
+
357
+ //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
358
+ 2、this.$refs.childForm.getCurrData();
359
+
360
+ 引导方法：
361
+ this.guidance(this.yindao);
362
+ yindao:[
363
+ {
364
+ id: 'create1',
365
+ className: 'firstStyle',
366
+ title: '新功能引导',
367
+ description: '现在可以查看XX拉！',
368
+ position: 'bottom-center'
369
+ },
370
+ {
371
+ id: 'create2',
372
+ title: '新功能引导',
373
+ description: '现在可以查看YY拉！',
374
+ position: 'bottom'
375
+ },
376
+ {
377
+ id: 'create3',
378
+ title: '新功能引导',
379
+ description: '现在可以查看ZZ拉！',
380
+ position: 'bottom'
381
+ }
382
+ ]
383
+ ```
384
+ #### 版本16的更新内容：
385
+ ```
386
+ 新增form表单 单项模板：
387
+ <formItem :formData="formData.data"></formItem>
388
+ formData的数据格式与之前整个form表单的对应对象保持一致。
389
+ ```
390
+ #### 2、搜索
391
+ ```
392
+
393
+ <twSearch :searchForm="data" @getSendData="func"></twSearch>
394
+ 参数说明：
395
+ func：//点击组件中的搜索按钮后，会在此方法中返回组件内所填数据。
396
+ data:{
397
+ formSize:'',//large 默认 small mini
398
+ defaultList:[
399
+ {name:'',value:'',valueName:'keywords',placeholder:'请输入关键字',type:'text'}
400
+ ],
401
+ highList:[
402
+ {name:'所属公司',value:'',valueName:'orgCode',placeholder:'请输入关键字',type:'text'},
403
+ {name:'放养品种',value:'',valueName:'breedCode',placeholder:'请选择品种',type:'selectMore',list:[{label:'品种1',value:'1'},{label:'品种2',value:'2'},{label:'品种3',value:'3'},{label:'品种4',value:'4'},{label:'品种5',value:'5'}]},
404
+ {name:'品种分类',value:'',valueName:'varietyCode',placeholder:'请选择分类',type:'selectOne',list:[{label:'分类1',value:'1'},{label:'分类2',value:'2'}]},
405
+ {name:'放养日期',value:'',valueName:'breedDate',placeholder:'请输入年限',type:'selectDate',dateType:'month'},//默认->date month year
406
+ {name:'放养周期',value:'',placeholder:'请输入周期',type:'selectPeriod',startDate:'startDate',endDate:'endDate'}
407
+ ]
408
+ }
409
+
410
+ 字段说明：
411
+ formSize：为整个组件的大小配置。
412
+ defaultList：默认显示的搜索组件列表。
413
+ highList：高级搜索内的组件列表（有相关触发按钮）。
414
+ name：label名字。
415
+ value：传给后台的value值。多选时，value为选中的数组对象
416
+ valueName：传给后台的key。
417
+ type：输入框类型//text,selectDate,selectPeriod,selectMore,selectOne。
418
+ list：type为selectMore,selectOne时，下拉框的内容。
419
+
420
+ ```
421
+
422
+ #### 3、分页
423
+ ```
424
+ <twPagination :total="total" :size="size" :pageSize="pageSize" @paginaFunc="paginaFunc"></twPagination>
425
+ pageSize:每页条数，非必填，默认10条 支持 10,20,30,50
426
+ size:样式大小，字符串，非必填，可选值为：'small'。
427
+ total：table表的总条数。
428
+ paginaFunc：当页数或一页显示多少条触发时，返回一个对象。
429
+ {currPage: 2, currSize: 10}//当前页、每页显示条数
430
+
431
+ ```
432
+
433
+
434
+ #### 4、步骤条
435
+ ```
436
+ <Step :stepData="stepData" @toggleStep="toggleStep"></Step>
437
+ toggleStep：切换步骤时的回调函数。
438
+ stepData：{
439
+ class:'moBlueStep',//moBlueStep redStep pcBlueStep 三种颜色，默认moBlueStep
440
+ icon:'el-icon-success',//完成后的icon图标，可以用element里面的所有icon，默认el-icon-success
441
+ list:[
442
+ {name:'步骤1'},
443
+ {name:'步骤2'},
444
+ {name:'步骤3'}
445
+ ]
446
+ }
447
+
448
+ ```
449
+
450
+
451
+ #### 5、搜索组件
452
+ ```
453
+ <TwSearchBox :formData="formData" :formModule="formModule" :formDataList="formDataList" :formDataHideList="formDataHideList"
454
+ @getSearch="getSearch" @getChange="getChange" @getBlur="getBlur" @getFocus="getFocus"></TwSearchBox>
455
+
456
+ formData:{} 1，非必须的，有需求3或者需要使用整个表单输入的数据时再用。
457
+ 2，该对象用于承接所有搜索项的输入数据。
458
+ 3，可用于数据的默认或者回显，对应的key值必须与formDataList（formDataHideList）中itemValue的值一致。
459
+
460
+ formModule:{//整个对象都是非必须的，有配置需求再用
461
+ size:'small',//表单尺寸大小,非必填，默认small
462
+ labelWidth:'85px',//整体label的宽度,非必填，默认85px(满足5个汉字不换行)
463
+ hideLabelWidth:'85px',//隐藏表单里面，整体label的宽度,非必填，默认85px(满足5个汉字不换行)
464
+ reset:true,//是否需要重置按钮,非必填，默认false
465
+ showSearchMore:true//是否需要启用隐藏表单,非必填，默认false
466
+ }
467
+
468
+ formDataHideList:[]//非必须，用于隐藏表单数据
469
+
470
+ getChange://change事件，非必须
471
+ 返回 一个对象包含三个值 val,item,formData 当前值-当前列表-输出的表单对象
472
+ getBlur://blur事件，非必须
473
+ 返回 一个对象包含二个值 item,formData 当前列表-输出的表单对象
474
+ getFocus://focus事件，非必须
475
+ 返回 一个对象包含二个值 item,formData 当前列表-输出的表单对象
476
+
477
+ getSearch://必须定义，输出整个对象，包含输入项的所有字段，时间字段未处理，需要自行处理。
478
+
479
+ formDataList:[//必须定义
480
+ //通用字段：label左侧标题 itemValue绑定字段名(必填) itemType组件类型(必填) placeholder占位符 className组件自定义样式 itemChange组件change事件 itemBlur组件blur事件 itemFocus组件focus事件 disabled禁用 readonly只读(下拉组件自带该属性)
481
+ {label:'文本',itemValue:'text',itemType:'text',className:'className1',itemChange:true,itemBlur:true,itemFocus:true, placeholder:'请输入文本',inputIcon:'el-icon-date',iconDirection:'left',disabled:false,readonly:false},
482
+ {label:'数字',itemValue:'number',itemType:'number',itemChange:true,itemBlur:true,itemFocus:true, placeholder:'请输入数字',inputIcon:'el-icon-date',iconDirection:'right',disabled:false,readonly:false},
483
+ //input输入和数字类型时：inputIcon加入框内图标使用的值为element的icon库；
484
+ //iconDirection：图标位置left(默认)和right
485
+ {label:'下拉单选',itemValue:'select',itemType:'select',selectSearch:true,disabled:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
486
+ //下拉选择时：selectList为下拉列表数据（对象中必要字段为label与value） selectSearch开启列表搜索(默认true)
487
+ {label:'下拉多选',itemValue:'selectMore',itemType:'selectMore',showAllName:false,selectSearch:true,disabled:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
488
+ //下拉多选时：selectSearch同上 showAllName计数的方式展示选中，而不是全部显示（全部显示可能会使input框变高，影响排版，默认采用计数方式）
489
+ {label:'下拉级联',itemValue:'selectCascade',itemType:'selectCascade',showAllName:false,selectSearch:true,showAllLevel:false,trigger:'click',isSelectMore:true,disabled:false,selectList:[{label:'层级1',value:'1',children:[{label:'层级2-1',value:'1-1',children:[{label:'层级3-1',value:'3-1'},{label:'层级3-2',value:'3-2'}]},{label:'层级2-2',value:'2-2'}]},{label:'层级1-2',value:'1-2'}]},
490
+ //级联选择时：selectSearch同上 showAllName同上 showAllLevel是否显示选择的所有层级（默认false） trigger触发级联方式hover（默认）、click
491
+ //isSelectMore是否开启多选（默认false） selectList下拉列表，注意对象中必要字段为label与value
492
+ {label:'时间选择',itemValue:'date',itemType:'date',dateType:'week',dateFormat:'yyyy第WW周',disabled:false,readonly:false,minDate:'2023-04-23',maxDate:'2023-05-23'},
493
+ //dateType时间类型date,month,year,week dateFormat显示的自定义样式（yyyy年MM月dd日WW周）
494
+ //minDate可选最小日期 maxDate可选最大日期
495
+ {label:'时间段选择',itemValue:'dateRange',itemType:'dateRange',dateType:'date',dateFormat:'yyyy年MM月dd日',separator:'-',startPlaceholder:'开始',endPlaceholder:'结束',disabled:false,readonly:false,itemChange:true,minDate:'2023-04-23',maxDate:'2023-05-23'},
496
+ //dateType时间类型date,month,默认date dateFormat显示的自定义样式（yyyy年MM月dd日）
497
+ //separator分离占位符 startPlaceholder开始占位符 endPlaceholder结束占位符 minDate可选最小日期 maxDate可选最大日期
498
+ {label:'单选',itemValue:'radio',itemType:'radio',radioList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'},{name:'鲨鱼',value:'4'}]},
499
+ {label:'多选',itemValue:'checkBox',itemType:'checkBox',itemChange:true,checkBoxList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'},{name:'鲨鱼',value:'4'}]},
500
+ //单选，多选 只有change事件
501
+ {label:'树形选择',itemValue:'selectTree',itemType:'selectTree',defaultProps:{ children: 'children',label: 'label'},treeList:[objTree]}
502
+ //树形结构选择:treeList:树结构数据,标准格式为[{}]一个数组里面包含一个一级对象，兼容格式为{}，只有一个对象时会自动包装成[{}]，如果传的数据第一层有2个对象，那么会自动往上包装一层名为“全部”的一级。
503
+ //defaultProps：自定义名称和子集映射对象，children与label都是必须替换的，不然默认就得是这2个字段。
504
+ ]
505
+
506
+ 最简单的使用案例：
507
+ <TwSearchBox :formDataList="formDataList" @getSearch="getSearch">
508
+ formDataList:[
509
+ {label:'文本',itemValue:'text',itemType:'text'},
510
+ {label:'数字',itemValue:'number',itemType:'number'},
511
+ {label:'下拉单选',itemValue:'select',itemType:'select',selectList:[]},
512
+ {label:'下拉多选',itemValue:'selectMore',itemType:'selectMore',selectList:[]},
513
+ {label:'下拉级联',itemValue:'selectCascade',itemType:'selectCascade',selectList:[]},
514
+ {label:'时间选择',itemValue:'date',itemType:'date'},
515
+ {label:'单选',itemValue:'radio',itemType:'radio',radioList:[]},
516
+ {label:'多选',itemValue:'checkBox',itemType:'checkBox',checkBoxList:[]},
517
+ ],
448
518
  ```