general-basic-form 2.1.8 → 2.1.9

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 +80 -100
  2. package/dist/index.js +1363 -1348
  3. package/dist/index.umd.cjs +18 -18
  4. package/package.json +1 -1
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',
@@ -513,11 +491,6 @@ parametersType 类型介绍
513
491
  _/
514
492
  "form-list" = "form-list",
515
493
  /\*\*
516
- - @description: 分割线
517
- - @return {_}
518
- _/
519
- "divider" = "divider",
520
- /\*\*
521
494
  - @description: 选择器
522
495
  - @return {_}
523
496
  _/
@@ -532,18 +505,25 @@ parametersType 类型介绍
532
505
  - @return {_}
533
506
  _/
534
507
  "date-picker" = "date-picker",
535
- /\*\*
536
508
 
537
- /\*\*
509
+ /\*\*
510
+
538
511
  - @description: 单选框
539
512
  - @return {_}
540
513
  _/
541
514
  "radio" = "radio",
542
-
543
- /\*\*
544
-
515
+ // /**
516
+ // _ @description: 自定义元素，插槽组件
517
+ // _ @return {_}
518
+ // _/
519
+ // "form-item-slot" = "form-item-slot",
520
+ /**
545
521
  - @description: 多选框
546
522
  - @return {_}
547
523
  _/
548
524
  "checkbox" = "checkbox",
549
-
525
+ /\*\*
526
+ - @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
527
+ - @return {_}
528
+ _/
529
+ "checkbox-list" = "checkbox-list",