general-basic-form 2.1.8 → 2.1.10

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 (4) hide show
  1. package/README.md +165 -173
  2. package/dist/index.js +5764 -3604
  3. package/dist/index.umd.cjs +43 -32
  4. package/package.json +7 -2
package/README.md CHANGED
@@ -2,21 +2,21 @@
2
2
 
3
3
  # GeneralBasicForm
4
4
 
5
- ## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2 版本，React19请使用@3 版本。
6
-
7
- | 组件\兼容性 | vue2 | vue3 | Ant Design Vue（next） | Element Plus | Element（ui） | React19 | shadcn/ui |
8
- | ------------------- | ---- | ---- | ---- | ---- | ---- | ------------------- | ------------------- |
9
- | VGeneralBasicForm | √ | √ | | √ | √ | | |
10
- | VSearchBox | √ | | | | √ | | |
11
- | VInfiniteScrollList | | √ | | √ | | | |
12
- | VDescriptions | √ | √ | √ | √ | √ | | |
13
- | VInputMobilecVerification | | √ | √ | √ | | | |
14
- | VInputGraphicVerification | | √ | √ | √ | | | |
15
- | VTreeTransfer | √ | √ | | √ | √ | | |
16
- | VTabs | √ | | | | √ | | |
17
- | RGeneralBasicForm | | | | | | √ | √ |
18
- | RFormList | | | | | | √ | √ |
19
- | RTabs | | | | | | √ | √ |
5
+ ## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2 版本，React19 请使用@3 版本。
6
+
7
+ | 组件\兼容性 | vue2 | vue3 | Ant Design Vue（next） | Element Plus | Element（ui） | React19 | shadcn/ui |
8
+ | ------------------------- | ---- | ---- | ---------------------- | ------------ | ------------- | ------- | --------- |
9
+ | VGeneralBasicForm | √ | √ | | √ | √ | | |
10
+ | VSearchBox | √ | | | | √ | | |
11
+ | VInfiniteScrollList | | √ | | √ | | | |
12
+ | VDescriptions | √ | √ | √ | √ | √ | | |
13
+ | VInputMobilecVerification | | √ | √ | √ | | | |
14
+ | VInputGraphicVerification | | √ | √ | √ | | | |
15
+ | VTreeTransfer | √ | √ | | √ | √ | | |
16
+ | VTabs | √ | | | | √ | | |
17
+ | RGeneralBasicForm | | | | | | √ | √ |
18
+ | RFormList | | | | | | √ | √ |
19
+ | RTabs | | | | | | √ | √ |
20
20
 
21
21
  安装：npm i general-basic-form<br/>
22
22
  install: npm i general-basic-form
@@ -30,44 +30,42 @@ transpileDependencies: ['general-basic-form'],
30
30
 
31
31
  因为兼容性问题，目前只能使用完整引入
32
32
 
33
- ```
34
- import ElementPlus from 'element-plus'
35
- import 'element-plus/dist/index.css'
36
- app.use(ElementPlus)
37
- ```
38
-
39
33
  ```
40
34
  import { RGeneralBasicForm,RBasicForm } from 'general-basic-form';
41
35
  ```
42
36
 
37
+ ```
43
38
  <RGeneralBasicForm
44
- formItem={formItem}
45
- getList={getList}
46
- parametersType="data"
47
- noInputBlank
48
- formData={detail}
49
- fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
50
-
39
+ formItem={formItem}
40
+ getList={getList}
41
+ parametersType="data"
42
+ noInputBlank
43
+ formData={detail}
44
+ fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
51
45
  > </RGeneralBasicForm>
52
46
 
53
- <RBasicForm
54
- formItem={formItem}
55
- getList={getList}
56
- parametersType="data"
57
- noInputBlank
58
- formData={detail}
59
- fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
60
- coms={{
61
- Input,
62
- Button,
63
- Select,
64
- SelectContent,
65
- SelectItem,
66
- SelectTrigger,
67
- SelectValue,
68
- SelectGroup,
69
- }}
70
- ></RBasicForm>
47
+ <RBasicForm
48
+ formItem={formItem}
49
+ getList={getList}
50
+ parametersType="data"
51
+ noInputBlank
52
+ formData={detail}
53
+ fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
54
+ footFieldSetting={{ className: 'col-start-1 col-span-4 col-end-3 mb-8' }}
55
+ fieldLabelSetting={{ className: "text-lg" }}
56
+ coms={{
57
+ Input,
58
+ Button,
59
+ Select,
60
+ SelectContent,
61
+ SelectItem,
62
+ SelectTrigger,
63
+ SelectValue,
64
+ SelectGroup,
65
+ }} >
66
+ </RBasicForm>
67
+ ```
68
+
71
69
  ![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
72
70
 
73
71
  在单纯作为表单的时候可以这样使用：
@@ -162,8 +160,9 @@ parametersType 类型介绍
162
160
  afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
163
161
  formOnly:true // 只展示表单不展示按钮
164
162
  parametersType:"url" // 见parametersType类型介绍
163
+ DBPrimaryKey: user_id // indexDB主键，配合indexDB使用
165
164
  loading:false // 加载动画
166
- formData:{} // 注意，因为可能出现的性能问题在组件watch formData的变化时没有使用deep，所以有时候深度的修改会不生效，导致表单数据不完整
165
+ formData:{} // 表单数据不完整
167
166
  noInputBlank: true //校验input框不能仅输入空格
168
167
  //例子：formData.value.x=y ✘ | formData.value={...formData.value,x:y} ✔
169
168
  currentPageKey:"page", //当前页数key
@@ -171,6 +170,9 @@ parametersType 类型介绍
171
170
  defCurrentPage:1, //默认的页数
172
171
  defPageSize：10, //默认的每页显示个数
173
172
  queryWhenReady:false,//初始化完成后自动触发查找数据函数
173
+ footFieldSetting: {} // 表单底部按钮设置
174
+ fieldGroupSetting: {} // 表单分组设置
175
+ fieldLabelSetting: {} // 表单字段label设置
174
176
  formItem: [
175
177
 
176
178
  { label: "款式名称",
@@ -218,7 +220,8 @@ parametersType 类型介绍
218
220
  ],
219
221
  separator: "text", //文字分割线
220
222
  setting: {
221
- ndim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
223
+ heading:true, //是否显示标题
224
+ dim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
222
225
  columns: [
223
226
  {
224
227
  prop: 'id',
@@ -251,12 +254,13 @@ parametersType 类型介绍
251
254
  setting: {
252
255
  placeholder: '请选择服务类型',
253
256
  required: true,
257
+ className: 'w-full',
254
258
  },
255
259
  },
256
260
  ],
257
261
  },
258
262
  fieldSetting: {
259
- className: 'col-span-4',
263
+ className: 'col-span-2 col-start-2 mb-8',
260
264
  },
261
265
  rules: [
262
266
  {
@@ -285,7 +289,7 @@ parametersType 类型介绍
285
289
  setting: {
286
290
  placeholder: ['请输入服务内容'],
287
291
  required: true,
288
- ndim: 1, // 1维数组，输出为字符串数组
292
+ dim: 1, // 1维数组，输出为字符串数组
289
293
  },
290
294
  fieldSetting: {
291
295
  className: 'col-span-2',
@@ -328,44 +332,7 @@ parametersType 类型介绍
328
332
  "range-separator": "至",
329
333
  }
330
334
  },
331
- {
332
- label: '',
333
- prop: 'bsName2',
334
- type: 'input-graphic-verification',
335
- setting: {
336
- placeholder: '请输入图形验证码',
337
- style: 'width: 100%'
338
- },
339
- rules: [
340
- {
341
- message: '请输入图形验证码',
342
- trigger: 'blur'
343
- }
344
- ],
345
- graphicSrc, // 请求图像的URL
346
- getGraphic, // 重新请求图像的函数
347
- key:Math.random(), // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
348
- },
349
- {
350
- label: '',
351
- prop: 'bsName3',
352
- type: 'input-mobile-verification',
353
- inputSetting: {
354
- placeholder: '请输入手机验证码',
355
- style: 'width: 100%'
356
- },
357
- buttonSetting: {
358
- type: "text",
359
- style: 'text-align: end',
360
- },
361
- rules: [
362
- {
363
- message: '请输入手机验证码',
364
- trigger: 'blur'
365
- }
366
- ],
367
- getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
368
- },
335
+
369
336
  {
370
337
  label: '是否必填',
371
338
  prop: 'is_optional',
@@ -389,7 +356,7 @@ parametersType 类型介绍
389
356
  prop: 'level',
390
357
  label: '多选',
391
358
  legend: 标题',
392
- type: 'checkbox',
359
+ type: 'checkbox-list',
393
360
  gap: 3,
394
361
  option: [
395
362
  { label: 'Y3', value: 'Y3' },
@@ -403,6 +370,17 @@ parametersType 类型介绍
403
370
  placeholder: '请选择等级',
404
371
  },
405
372
  },
373
+ {
374
+ prop: 'test1',
375
+ label: 'test1(多选)',
376
+ type: 'checkbox',
377
+ fieldSetting: {
378
+ className: 'col-span-4',
379
+ },
380
+ setting: {
381
+ placeholder: '请选择套餐',
382
+ },
383
+ },
406
384
  {
407
385
  label: '受访人',
408
386
  prop: 'contactors',
@@ -421,71 +399,76 @@ parametersType 类型介绍
421
399
  {
422
400
  label: "分类",
423
401
  prop: "分类",
424
- type: "cascader",
425
- setting:{},
402
+ type: "command",
403
+ setting:{
404
+ placeholder:"请输入分类",
405
+ empty:"搜索内容为空的提示",
406
+ },
426
407
  options: [
427
408
  {
428
- value: "zhinan",
429
409
  label: "指南",
410
+ value: "guide",
411
+ separator:true, //分割线
430
412
  children: [
431
- {
432
- value: "shejiyuanze",
433
- label: "设计原则",
434
- children: [
435
- {
436
- value: "yizhi",
437
- label: "一致",
438
- },
439
- {
440
- value: "fankui",
441
- label: "反馈",
442
- },
443
- {
444
- value: "xiaolv",
445
- label: "效率",
446
- },
447
- {
448
- value: "kekong",
449
- label: "可控",
450
- },
451
- ],
452
- },
453
- {
454
- value: "daohang",
455
- label: "导航",
456
- children: [
457
- {
458
- value: "cexiangdaohang",
459
- label: "侧向导航",
460
- },
461
- {
462
- value: "dingbudaohang",
463
- label: "顶部导航",
464
- },
465
- ],
413
+ {
414
+ value: 'shejiyuanze',
415
+ label: '设计原则',
416
+ onSelect: (value) => {
417
+ console.log('Selected', value);
466
418
  },
419
+ shortcut: 'ctrl+z', //选项右侧的内容
420
+ },
421
+
467
422
  ],
468
423
  },
469
424
  {
470
- value: "ziyuan",
471
425
  label: "资源",
426
+ value: "resource",
472
427
  children: [
473
428
  {
474
429
  value: "axure",
475
430
  label: "Axure Components",
476
- },
431
+ }
432
+ ],
433
+ },
434
+ ],
435
+ },
436
+ {
437
+ label: '分类',
438
+ prop: 'expense_category_id',
439
+ type: 'combobox',
440
+ setting: {
441
+ placeholder: '请输入分类',
442
+ empty: '搜索内容为空的提示',
443
+ },
444
+ fieldSetting: {
445
+ className: fieldClassName,
446
+ },
447
+ options: [
477
448
  {
478
- value: "sketch",
479
- label: "Sketch Templates",
449
+ label: '指南',
450
+ value: '指南',
451
+ separator: true, //分割线
452
+ children: [
453
+ {
454
+ value: 'shejiyuanze',
455
+ label: '设计原则',
456
+ shortcut: 'ctrl+z', //选项右侧的内容
457
+ },
458
+ ],
480
459
  },
481
460
  {
482
- value: "jiaohu",
483
- label: "组件交互文档",
461
+ label: '资源',
462
+ value: 'resource',
463
+ children: [
464
+ {
465
+ value: 'axure',
466
+ label: 'Axure Components',
467
+ },
468
+ ],
484
469
  },
485
470
  ],
486
471
  },
487
- ],
488
- },
489
472
  ],
490
473
 
491
474
  //rules为表单校验规则，每个组件都可以传入
@@ -501,49 +484,58 @@ parametersType 类型介绍
501
484
 
502
485
  支持组件 type:
503
486
 
504
- /\*\*
505
-
506
- - @description: 输入框
507
- - @return {_}
508
- _/
487
+ export enum FormType {
488
+ /**
489
+ * @description: 输入框
490
+ * @return {*}
491
+ */
509
492
  "input" = "input",
510
- /\*\*
511
- - @description: 表单中的多维列表，可增减元素
512
- - @return {_}
513
- _/
493
+ /**
494
+ * @description: 表单中的多维列表，可增减元素，内部可以使用的数据类型除自身form-list外同FormType
495
+ * @return {*}
496
+ */
514
497
  "form-list" = "form-list",
515
- /\*\*
516
- - @description: 分割线
517
- - @return {_}
518
- _/
519
- "divider" = "divider",
520
- /\*\*
521
- - @description: 选择器
522
- - @return {_}
523
- _/
498
+ /**
499
+ * @description: 选择器
500
+ * @return {*}
501
+ */
524
502
  "select" = "select",
525
- /\*\*
526
- - @description: 级联选择器
527
- - @return {_}
528
- _/
529
- "cascader" = "cascader",
530
- /\*\*
531
- - @description: 日期选择器
532
- - @return {_}
533
- _/
503
+ /**
504
+ * @description: 带搜索的二级菜单
505
+ * @return {*}
506
+ */
507
+ "command" = "command",
508
+ /**
509
+ * @description: 响应式下拉框+带搜索的二级菜单
510
+ * @return {*}
511
+ */
512
+ "combobox" = "combobox",
513
+ /**
514
+ * @description: 日期选择器
515
+ * @return {*}
516
+ */
534
517
  "date-picker" = "date-picker",
535
- /\*\*
536
518
 
537
- /\*\*
538
- - @description: 单选框
539
- - @return {_}
540
- _/
519
+ /**
520
+ * @description: 单选框
521
+ * @return {*}
522
+ */
541
523
  "radio" = "radio",
542
-
543
- /\*\*
544
-
545
- - @description: 多选框
546
- - @return {_}
547
- _/
524
+ // /**
525
+ // * @description: 自定义元素，插槽组件
526
+ // * @return {*}
527
+ // */
528
+ // "form-item-slot" = "form-item-slot",
529
+ /**
530
+ * @description: 多选框
531
+ * @return {*}
532
+ */
548
533
  "checkbox" = "checkbox",
534
+ /**
535
+ * @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
536
+ * @return {*}
537
+ */
538
+ "checkbox-list" = "checkbox-list",
539
+ }
540
+
549
541