general-basic-form 2.1.6 → 2.1.8

package/README.md

@@ -2,18 +2,21 @@
 
 # GeneralBasicForm
 
-## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2 版本
-
-| 组件\兼容性               | vue2 | vue3 | Ant Design Vue（next） | Element Plus | Element（ui） |
-| ------------------------- | ---- | ---- | ---------------------- | ------------ | ------------- |
-| VGeneralBasicForm         | √    | √    |                        | √            | √             |
-| VSearchBox                | √    |      |                        |              | √             |
-| VInfiniteScrollList       |      | √    |                        | √            |               |
-| VDescriptions             | √    | √    | √                      | √            | √             |
-| VInputMobilecVerification |      | √    | √                      | √            |               |
-| VInputGraphicVerification |      | √    | √                      | √            |               |
-| VTreeTransfer             | √    | √    |                        | √            | √             |
-| VTabs                     | √    |      |                        |              | √             |
+## 一个兼容 Vue2 、Vue3 和 React(未来实现) 的表单组件，支持 typescript，vue2 请使用@1 版本，Vue3 请使用@2 版本，React19请使用@3 版本。
+
+| 组件\兼容性         | vue2 | vue3 | Ant Design Vue（next） | Element Plus | Element（ui） | React19 | shadcn/ui |
+| ------------------- | ---- | ---- | ---- | ---- | ---- | ------------------- | ------------------- |
+| VGeneralBasicForm    | √    | √    |     | √   | √   |    |    |
+| VSearchBox           | √    |      |      |  | √ |  |  |
+| VInfiniteScrollList |      | √    |     | √   |     |     |     |
+| VDescriptions       | √ | √    | √ | √   | √ |  |  |
+| VInputMobilecVerification | | √ | √ | √ |  |  |  |
+| VInputGraphicVerification | | √ | √ | √ |  |  |  |
+| VTreeTransfer | √ | √ |  | √ | √ |  |  |
+| VTabs | √ | | | | √ |  |  |
+| RGeneralBasicForm |  | | | |  | √ | √ |
+| RFormList | | | | | | √ | √ |
+| RTabs |  | | | |  | √ | √ |
 
 安装：npm i general-basic-form<br/>
 install: npm i general-basic-form
@@ -34,7 +37,7 @@ app.use(ElementPlus)
 ```
 
 ```
-import { RGeneralBasicForm } from 'general-basic-form';
+import { RGeneralBasicForm,RBasicForm } from 'general-basic-form';
 ```
 
 <RGeneralBasicForm
@@ -47,6 +50,24 @@ fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
 
 > </RGeneralBasicForm>
 
+ <RBasicForm
+              formItem={formItem}
+              getList={getList}
+              parametersType="data"
+              noInputBlank
+              formData={detail}
+              fieldGroupSetting={{ className: 'grid grid-cols-4 gap-4' }}
+              coms={{
+                Input,
+                Button,
+                Select,
+                SelectContent,
+                SelectItem,
+                SelectTrigger,
+                SelectValue,
+                SelectGroup,
+              }}
+            ></RBasicForm>
 ![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
 
 在单纯作为表单的时候可以这样使用：
@@ -151,28 +172,18 @@ parametersType 类型介绍
     defPageSize：10, //默认的每页显示个数
     queryWhenReady:false,//初始化完成后自动触发查找数据函数
     formItem: [
-    	{
-          label: '',
-          prop: 'bsName35',
-          type: 'divider',
-          setting: {
-          },
-          template: {
-            default: () => {
-              return "123123123";
-            },
-          },
-        },
+
         { label: "款式名称",
           prop: "bsName",
           type: "input",
+          legend: '这是一个可选的标题',
        	  setting: {
             placeholder: '请输入手机验证码',
             style: 'width: 100%',
             required: true,
           },
       fieldSetting: {
-        orientation: 'responsive',
+        orientation: 'responsive',//表单布局-响应式
       },
           rules: [
             {
@@ -189,6 +200,8 @@ parametersType 类型介绍
           },
         },
           ],
+          separator: true, //分割线
+
           //template: {
           //  suffix: () => {
           //    return <svg-icon icon-class="baifenbi" />;
@@ -199,6 +212,11 @@ parametersType 类型介绍
             label: '天数-价格配置',
             prop: 'prices',
             type: 'form-list',
+            description: [
+              '段落1',
+              '段落2',
+            ],
+            separator: "text", //文字分割线
             setting: {
               ndim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
               columns: [
@@ -213,12 +231,13 @@ parametersType 类型介绍
                   },
                 },
                 {
-                  prop: 'packageCode',
+                  prop: 'days',
                   label: '套餐名称',
                   type: 'input',
                   setting: {
                     required: true,
                     placeholder: '请输入套餐名称',
+                    type: 'number'
                   },
                 },
                   {
@@ -237,7 +256,7 @@ parametersType 类型介绍
               ],
             },
             fieldSetting: {
-              className: 'col-span-4 overflow-auto',
+              className: 'col-span-4',
             },
             rules: [
               {
@@ -245,7 +264,7 @@ parametersType 类型介绍
                   console.log(value);
                   for (let i = 0; i < value.length; i++) {
                     const element = value[i];
-                    if (!Number(element.days) || !Number(element.price)) {
+                    if (!Number(element.days)) {
                       callback(new Error('请输入数字'));
                       return;
                     }
@@ -274,7 +293,6 @@ parametersType 类型介绍
               rules: [
                 {
                   validator: (rule, value, callback) => {
-                    console.log(value);
                     for (let i = 0; i < value.length; i++) {
                       const element = value[i];
                       if (!element) {
@@ -287,17 +305,21 @@ parametersType 类型介绍
                 },
               ],
             },
-        {
-          label: "二次工艺",
-          prop: "spName",
-          type: "select",
-          setting:{ multiple:true, //多选},
-          option: [
-            { value: "3", label: "满印" },
-            { value: "1", label: "区域印花" },
-            { value: "2", label: "绣花" },
-          ],
-        },
+         {
+           prop: 'level',
+           label: '等级',
+           type: 'select',
+           option: [
+             { label: 'Y3', value: 'Y3' },
+             { label: 'Y4', value: 'Y4' },
+             { label: 'Y5', value: 'Y5' },
+           ],
+           setting: {
+             placeholder: '请选择等级',
+             required: true,
+             multiple: true,
+           },
+         },
         {
           label: "创建时间",
           prop: "create_time",
@@ -306,20 +328,6 @@ parametersType 类型介绍
             "range-separator": "至",
           }
         },
-        {
-          label: "二次工艺成本价格（人民币分）",
-          prop: "spCost",
-          type: "input-number",
-          "controls-position": "right",
-          min: 0,
-          rules: [
-            {
-              required: true,
-              message: "请输入二次工艺成本价格",
-              trigger: "blur",
-            },
-          ],
-        },
         {
           label: '',
           prop: 'bsName2',
@@ -377,18 +385,24 @@ parametersType 类型介绍
             }
           ]
         },
-        {
-          label: '多选',
-          prop: 'is_multi',
-          type: 'checkbox',
-          setting: {
+            {
+            prop: 'level',
+            label: '多选',
+            legend: 标题',
+            type: 'checkbox',
+            gap: 3,
+            option: [
+              { label: 'Y3', value: 'Y3' },
+              { label: 'Y4', value: 'Y4' },
+              { label: 'Y5', value: 'Y5' },
+            ],
+            fieldSetting: {
+              className: 'col-span-4',
+            },
+            setting: {
+              placeholder: '请选择等级',
+            },
           },
-          option: [
-            { value: '是', label: 'true' },
-            { value: '否', label: 'false' }
-          ],
-          rules: []
-        },
         {
           label: '受访人',
           prop: 'contactors',
@@ -519,10 +533,7 @@ parametersType 类型介绍
   _/
   "date-picker" = "date-picker",
   /\*\*
-- @description: 数字输入框
-- @return {_}
-  _/
-  "input-number" = "input-number",
+
   /\*\*
 - @description: 单选框
 - @return {_}
@@ -536,169 +547,3 @@ parametersType 类型介绍
   _/
   "checkbox" = "checkbox",
 
-# VInfiniteScrollList 对虚拟滚动列表+接口的封装
-
-![image-20231208165229296](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202312081652392.png)
-
-```
-import { VInfiniteScrollList } from 'general-basic-form'
-import 'general-basic-form/style'
-<VInfiniteScrollList
-  :search="search"
-  id="user_id"
-  name="name"
-  ref="InfiniteScrollListRef"
-  checkbox
-  :extra="extraRender"
-  :max="1"
- />
-```
-
-```
-移动端配合下拉刷新使用
-import { getOrderItem } from "../orderItem/functional"
-// getOrderItem为JSX函数，返回一个VUE组件
-
-<t-pull-down-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-content">
-      <VInfiniteScrollList :search="loadData" :checkbox="false" id="cancelId" ref="InfiniteScrollListRef" checkbox
-        :extra="getOrderItem" height="100%" infinite-scroll-distance="50"/>
-    </t-pull-down-refresh>
-```
-
-```
-search：数据接口 (page: Number) => Promise<[]>
-id：数据key值（唯一和选择值）
-name：显示名字
-checkbox：是否有多选功能，不传的话就是单纯的虚拟滚动列表
-extra：同行额外显示的内容，(item: any) => VNode | String;
-//el-checkbox有固定高度，如果需要配置高度比较高，例如有换行的自定义extra，最好处理一下样式，例子：
-//:deep(.el-checkbox) {
-//  padding: 6px 16px !important;
-//  display: flex;
-//  align-items: baseline;
-//  height: auto;
-//}
-defaultSelection：包含数据key值的对象数组或者直接传入key值数组
-height:默认272px String
-```
-
-```
- defineExpose({ reset, loadList, selectInfo, list, ifbottom });
- InfiniteScrollListRef?.value?.reset()：重置列表内容
- InfiniteScrollListRef?.value?.lowReset()：重置列表内容，但保留已选择的选项
- InfiniteScrollListRef?.value?.loadList()：向下滚动列表内容，受到loading和ifbottom的影响
- InfiniteScrollListRef?.value?.refreshList()：刷新列表，滚动列表会对整个内容重新请求数据，已选择的内容会自动选择
- InfiniteScrollListRef?.value?.selectInfo：选择的内容
- InfiniteScrollListRef?.value?.list：列表的内容
- InfiniteScrollListRef?.value?.ifbottom：是否到底部
- InfiniteScrollListRef?.value?.loading：加载中
-```
-
-# VDescriptions 对展示描述列表的封装
-
-![image-20231208182455415](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202312081824708.png)
-
-```
-import { VDescriptions } from 'general-basic-form'
- <VDescriptions
-  :formData="props.formData"
-  :formItem="formItem"
-  componentType="Ant Design Vue"
-  ...其他el-descriptions的配置
- />
-```
-
-```
-formData:Object
-formItem:[ {
-      label: '受访人',
-      prop: 'contactors',
-      render: (scope: any) => {
-        const { $index, row = {} } = scope
-        const { contactors = [] } = row
-        const ele = (contactors.length > 0 ? <span>{contactors.map((item: any) => item.name).join("，")} </span> : null)
-        return ele
-      }
-    },
-    {
-      label: '拜访详情',
-      prop: 'detail',
-      descriptionsItemProps:{
-       'label-class-name': 'label-class-name'
-      }
-  }]
-componentType:"Ant Design Vue"|"Element Plus"（默认）
-strict:Boolean //使用strict参数后，如果formData内的某个字段没有值，对应的描述元素将不会展示（包括标签文字），但有render的字段仍然会展示
-descriptionsItemProps:a-descriptions-item|el-descriptions-item的配置
-```
-
-# VInputMobilecVerification，VInputGraphicVerification 表单里的图形验证码、手机验证码组件，可以单独引入
-
-```
-<VInputGraphicVerification :item="{同表单，可忽略label和rules字段}" :loading="loading"></VInputGraphicVerification>
-
-<VInputMobilecVerification :item="{同表单，可忽略label和rules字段}" componentType="Ant Design Vue" ref="VInputMobilecVerificationRef"></VInputMobilecVerification>
-```
-
-```
-componentType:"Ant Design Vue"|"Element Plus"（默认）
-```
-
-```
-此用法下必须提供：
-provide(/* 注入名 */ "queryParams", /* 表单值对象 */ queryParams);
-
-componentType为Ant Design Vue需要提供：
-import { Form } from 'ant-design-vue';
-provide(/* 注入名 */ "Form", /* Ant Design Vue Form实例，用于表单数据更新等 */ Form);
-
-可选：
-provide("size", size); // 同组件size
-provide("getList", getList); // 输入框回车触发
-
-调用发送短信验证码和重置的方法
-VInputMobilecVerificationRef.value.VerificationButtonRef.buttonClick()
-VInputMobilecVerificationRef.value.VerificationButtonRef.reset()
-```
-
-# VTreeTransfer 树形数据穿梭框
-
-![image-20250425183446375](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202504251834575.png)
-
-```
-<VTreeTransfer :dataSource="classmate" :treeAttributes="{
-      'node-key': 'user_id', props: { label: 'user_name' }, 'default-expand-all': false
-    }" transferTitleRight="白名单(不会被选中)" transferTitleLeft="普通名单" filterable 		:checkedKeys="checkedKeys">
-</VTreeTransfer>
-
-import { VTreeTransfer } from 'general-basic-form';
-const VTreeTransferRef = ref([])
-```
-
-```
-dataSource:[
-  {
-    label: 'Level one 1',
-    id:1,
-    children: [
-      {
-        label: 'Level two 1-1',
-        id:2,
-        children: [
-          {
-            label: 'Level three 1-1-1',
-            id:3,
-          },
-        ],
-      },
-    ],
-  },] 树状结构数据
-treeAttributes:{} 树形控件的属性，见https://element-plus.org/zh-CN/component/tree.html
-transferTitleLeft:"" 左标题
-transferTitleRight:"" 右标题
-filterable:false 是否显示搜索框
-checkedKeys:[1,2] 选中的值
-
-获取选中的数组详情：
-VTreeTransferRef.value["selectedList"].map((item) => {}))
-```

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-07 17:55:59
+ * @LastEditTime: 2025-10-24 20:47:29
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: /GeneralBasicForm/public/index.d.ts
+ * 
+ */
+/// <reference types="vite/client" />
+declare module "general-basic-form";