general-basic-form 2.1.7 → 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 +121 -155
  2. package/dist/index.js +3958 -3554
  3. package/dist/index.umd.cjs +47 -47
  4. package/package.json +2 -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,29 +170,22 @@ parametersType 类型介绍
171
170
  defCurrentPage:1, //默认的页数
172
171
  defPageSize：10, //默认的每页显示个数
173
172
  queryWhenReady:false,//初始化完成后自动触发查找数据函数
173
+ footFieldSetting: {} // 表单底部按钮设置
174
+ fieldGroupSetting: {} // 表单分组设置
175
+ fieldLabelSetting: {} // 表单字段label设置
174
176
  formItem: [
175
- {
176
- label: '',
177
- prop: 'bsName35',
178
- type: 'divider',
179
- setting: {
180
- },
181
- template: {
182
- default: () => {
183
- return "123123123";
184
- },
185
- },
186
- },
177
+
187
178
  { label: "款式名称",
188
179
  prop: "bsName",
189
180
  type: "input",
181
+ legend: '这是一个可选的标题',
190
182
  setting: {
191
183
  placeholder: '请输入手机验证码',
192
184
  style: 'width: 100%',
193
185
  required: true,
194
186
  },
195
187
  fieldSetting: {
196
- orientation: 'responsive',
188
+ orientation: 'responsive',//表单布局-响应式
197
189
  },
198
190
  rules: [
199
191
  {
@@ -210,6 +202,8 @@ parametersType 类型介绍
210
202
  },
211
203
  },
212
204
  ],
205
+ separator: true, //分割线
206
+
213
207
  //template: {
214
208
  // suffix: () => {
215
209
  // return <svg-icon icon-class="baifenbi" />;
@@ -224,8 +218,10 @@ parametersType 类型介绍
224
218
  '段落1',
225
219
  '段落2',
226
220
  ],
221
+ separator: "text", //文字分割线
227
222
  setting: {
228
- ndim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
223
+ heading:true, //是否显示标题
224
+ dim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
229
225
  columns: [
230
226
  {
231
227
  prop: 'id',
@@ -238,12 +234,13 @@ parametersType 类型介绍
238
234
  },
239
235
  },
240
236
  {
241
- prop: 'packageCode',
237
+ prop: 'days',
242
238
  label: '套餐名称',
243
239
  type: 'input',
244
240
  setting: {
245
241
  required: true,
246
242
  placeholder: '请输入套餐名称',
243
+ type: 'number'
247
244
  },
248
245
  },
249
246
  {
@@ -257,12 +254,13 @@ parametersType 类型介绍
257
254
  setting: {
258
255
  placeholder: '请选择服务类型',
259
256
  required: true,
257
+ className: 'w-full',
260
258
  },
261
259
  },
262
260
  ],
263
261
  },
264
262
  fieldSetting: {
265
- className: 'col-span-4 overflow-auto',
263
+ className: 'col-span-2 col-start-2 mb-8',
266
264
  },
267
265
  rules: [
268
266
  {
@@ -270,7 +268,7 @@ parametersType 类型介绍
270
268
  console.log(value);
271
269
  for (let i = 0; i < value.length; i++) {
272
270
  const element = value[i];
273
- if (!Number(element.days) || !Number(element.price)) {
271
+ if (!Number(element.days)) {
274
272
  callback(new Error('请输入数字'));
275
273
  return;
276
274
  }
@@ -291,7 +289,7 @@ parametersType 类型介绍
291
289
  setting: {
292
290
  placeholder: ['请输入服务内容'],
293
291
  required: true,
294
- ndim: 1, // 1维数组，输出为字符串数组
292
+ dim: 1, // 1维数组，输出为字符串数组
295
293
  },
296
294
  fieldSetting: {
297
295
  className: 'col-span-2',
@@ -299,7 +297,6 @@ parametersType 类型介绍
299
297
  rules: [
300
298
  {
301
299
  validator: (rule, value, callback) => {
302
- console.log(value);
303
300
  for (let i = 0; i < value.length; i++) {
304
301
  const element = value[i];
305
302
  if (!element) {
@@ -312,17 +309,21 @@ parametersType 类型介绍
312
309
  },
313
310
  ],
314
311
  },
315
- {
316
- label: "二次工艺",
317
- prop: "spName",
318
- type: "select",
319
- setting:{ multiple:true, //多选},
320
- option: [
321
- { value: "3", label: "满印" },
322
- { value: "1", label: "区域印花" },
323
- { value: "2", label: "绣花" },
324
- ],
325
- },
312
+ {
313
+ prop: 'level',
314
+ label: '等级',
315
+ type: 'select',
316
+ option: [
317
+ { label: 'Y3', value: 'Y3' },
318
+ { label: 'Y4', value: 'Y4' },
319
+ { label: 'Y5', value: 'Y5' },
320
+ ],
321
+ setting: {
322
+ placeholder: '请选择等级',
323
+ required: true,
324
+ multiple: true,
325
+ },
326
+ },
326
327
  {
327
328
  label: "创建时间",
328
329
  prop: "create_time",
@@ -331,58 +332,7 @@ parametersType 类型介绍
331
332
  "range-separator": "至",
332
333
  }
333
334
  },
334
- {
335
- label: "二次工艺成本价格（人民币分）",
336
- prop: "spCost",
337
- type: "input-number",
338
- "controls-position": "right",
339
- min: 0,
340
- rules: [
341
- {
342
- required: true,
343
- message: "请输入二次工艺成本价格",
344
- trigger: "blur",
345
- },
346
- ],
347
- },
348
- {
349
- label: '',
350
- prop: 'bsName2',
351
- type: 'input-graphic-verification',
352
- setting: {
353
- placeholder: '请输入图形验证码',
354
- style: 'width: 100%'
355
- },
356
- rules: [
357
- {
358
- message: '请输入图形验证码',
359
- trigger: 'blur'
360
- }
361
- ],
362
- graphicSrc, // 请求图像的URL
363
- getGraphic, // 重新请求图像的函数
364
- key:Math.random(), // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
365
- },
366
- {
367
- label: '',
368
- prop: 'bsName3',
369
- type: 'input-mobile-verification',
370
- inputSetting: {
371
- placeholder: '请输入手机验证码',
372
- style: 'width: 100%'
373
- },
374
- buttonSetting: {
375
- type: "text",
376
- style: 'text-align: end',
377
- },
378
- rules: [
379
- {
380
- message: '请输入手机验证码',
381
- trigger: 'blur'
382
- }
383
- ],
384
- getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
385
- },
335
+
386
336
  {
387
337
  label: '是否必填',
388
338
  prop: 'is_optional',
@@ -402,18 +352,35 @@ parametersType 类型介绍
402
352
  }
403
353
  ]
404
354
  },
405
- {
406
- label: '多选',
407
- prop: 'is_multi',
408
- type: 'checkbox',
409
- setting: {
355
+ {
356
+ prop: 'level',
357
+ label: '多选',
358
+ legend: 标题',
359
+ type: 'checkbox-list',
360
+ gap: 3,
361
+ option: [
362
+ { label: 'Y3', value: 'Y3' },
363
+ { label: 'Y4', value: 'Y4' },
364
+ { label: 'Y5', value: 'Y5' },
365
+ ],
366
+ fieldSetting: {
367
+ className: 'col-span-4',
368
+ },
369
+ setting: {
370
+ placeholder: '请选择等级',
371
+ },
410
372
  },
411
- option: [
412
- { value: '是', label: 'true' },
413
- { value: '否', label: 'false' }
414
- ],
415
- rules: []
416
- },
373
+ {
374
+ prop: 'test1',
375
+ label: 'test1(多选)',
376
+ type: 'checkbox',
377
+ fieldSetting: {
378
+ className: 'col-span-4',
379
+ },
380
+ setting: {
381
+ placeholder: '请选择套餐',
382
+ },
383
+ },
417
384
  {
418
385
  label: '受访人',
419
386
  prop: 'contactors',
@@ -524,11 +491,6 @@ parametersType 类型介绍
524
491
  _/
525
492
  "form-list" = "form-list",
526
493
  /\*\*
527
- - @description: 分割线
528
- - @return {_}
529
- _/
530
- "divider" = "divider",
531
- /\*\*
532
494
  - @description: 选择器
533
495
  - @return {_}
534
496
  _/
@@ -543,21 +505,25 @@ parametersType 类型介绍
543
505
  - @return {_}
544
506
  _/
545
507
  "date-picker" = "date-picker",
546
- /\*\*
547
- - @description: 数字输入框
548
- - @return {_}
549
- _/
550
- "input-number" = "input-number",
551
- /\*\*
508
+
509
+ /\*\*
510
+
552
511
  - @description: 单选框
553
512
  - @return {_}
554
513
  _/
555
514
  "radio" = "radio",
556
-
557
- /\*\*
558
-
515
+ // /**
516
+ // _ @description: 自定义元素，插槽组件
517
+ // _ @return {_}
518
+ // _/
519
+ // "form-item-slot" = "form-item-slot",
520
+ /**
559
521
  - @description: 多选框
560
522
  - @return {_}
561
523
  _/
562
524
  "checkbox" = "checkbox",
563
-
525
+ /\*\*
526
+ - @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
527
+ - @return {_}
528
+ _/
529
+ "checkbox-list" = "checkbox-list",