general-basic-form 2.4.4 → 3.0.1

package/README.md

@@ -1,27 +1,30 @@
+<!-- @format -->
+
 # GeneralBasicForm
 
-## 一个兼容 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 |  | | | |  | √ | √ |
+## 一个兼容 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                 |      |      |                        |              |               | √       | √         |
+| RBaseTabs                 |      |      |                        |              |               | √       | √         |
+| RBaseCombobox             |      |      |                        |              |               | √       | √         |
 
 安装：npm i general-basic-form<br/>
 install: npm i general-basic-form
 
-webpack4兼容：
+webpack4 兼容：
 加入配置：module.exports = {
-  transpileDependencies: ['general-basic-form'],
+transpileDependencies: ['general-basic-form'],
 }
 
 示例:
@@ -29,63 +32,62 @@ webpack4兼容：
 因为兼容性问题，目前只能使用完整引入
 
 ```
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-app.use(ElementPlus)
+import { RGeneralBasicForm,RBasicForm } from 'general-basic-form';
 ```
 
 ```
-import { VGeneralBasicForm } from 'general-basic-form'
-import 'general-basic-form/style'
+<RGeneralBasicForm
+  formItem={formItem}
+  getList={getList}
+  parametersType="data"
+  noInputBlank
+  formData={detail}
+  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' }}
+    footFieldSetting={{ className: 'col-start-1 col-span-4 col-end-3 mb-8' }}
+    fieldLabelSetting={{ className: "text-lg" }}
+    coms={{
+      Input,
+      Button,
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue,
+      SelectGroup,
+    }} >
+</RBasicForm>
 ```
 
-    <VGeneralBasicForm
-      :showSearch="showSearch"
-      :getList="getList"
-      :formItem="formItem"
-      :size="size"
-      ref="VGeneralBasicFormRef"
-      labelWidth="90px"
-      :noInputBlank="true"
-    >
-      <template v-slot:default>
-        ...一些传入插槽的内容
-      </template>
-      <template v-slot:behind-the-button>
-        <el-form-item>
-          <div>上次同步时间：</div>
-        </el-form-item>
-      </template>
-    </VGeneralBasicForm>
-
 ![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
 
 在单纯作为表单的时候可以这样使用：
 
-    <VGeneralBasicForm
-        formOnly
-        :formItem="formItem"
-        size="small"
-        ref="VGeneralBasicFormRef"
-        :labelWidth="formLabelWidth"
-        :formData: {
-          // 外部传入的表单数据，用于回填
-        }
-        noUrlParameters
-        :afterReset="afterReset"
-        v-model:loading="loading"
-      />
-    
-      <style lang="scss" scoped>
-      :deep(.el-form-item) {
-        margin-bottom: 16px;
-      }
-      :deep(.el-divider--horizontal) {
-        margin: 8px 0px;
-      }
-      </style>
+const RGeneralBasicFormRef = useRef(null);
+
+        <RGeneralBasicForm
+          formOnly
+          ref={RGeneralBasicFormRef}
+          className="py-4"
+          formItem={formItem}
+          getList={getList}
+          parametersType="data"
+          noInputBlank
+          formData={formData}
+          fieldGroupSetting={{ className: 'grid grid-cols-2 gap-4' }}
+        >
+          //自定义组件
+        </RGeneralBasicForm>
 
-getList会传出默认的参数,首次请求时会有页数和分页大小,重置后会传出默认页数1
+getList 会传出默认的参数,首次请求时会有页数和分页大小,重置后会传出默认页数 1
 
     async getList(
        params = {
@@ -94,296 +96,550 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
        }
      ) {}
 
-表单数据校验需要拿到内部表单的ref
-
-    async getSmscode() {
-      const VGeneralBasicFormRef = this.$refs['VGeneralBasicFormRef'] as any
-      const state = await new Promise<boolean>((resolve, reject) => {
-        VGeneralBasicFormRef.$refs['queryFormRef']?.validateField(
-          'user_phone',
-          async (valid: boolean, props?: FormItemProp[] | undefined) => {
-            if (valid) {
-              const { user_phone } = VGeneralBasicFormRef['queryParams']
-              const res: any = await SmscodeList({ user_phone })
-              if (res) {
-                console.log(res)
-                resolve(true)
-              } else {
-                resolve(false)
-              }
-            } else {
-              resolve(false)
-            }
-          }
-        )
-      })
-      return state
-    },
-    
-    setup写法：
-    const VGeneralBasicFormRef = ref()
-    const params = await new Promise<any>((resolve, reject) => {
-      VGeneralBasicFormRef.value.$refs['queryFormRef']?.validate(
-        async (valid: boolean, props?: FormItemProp[] | undefined) => {
-          if (valid) {
-            const params = VGeneralBasicFormRef.value['queryParams']
-            resolve(params)
-          } else {
-            reject()
-          }
-        }
-      )
-    })
+表单数据校验需要拿到内部表单的 ref
 
+    RGeneralBasicFormRef.current.formAction(); // 触发表单校验和getList
 
 ![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
 
-parametersType类型介绍
+parametersType 类型介绍
 
-| parametersType形式 | 支持页面刷新 | 参数改变引起路由跳转 | 组件间共享数据 | 存储上限 | 浏览器兼容性 |
-| ------------------ | ------------ | -------------------- | -------------- | -------- | ------------ |
-| url                | 是           | 是                   | 是             | 中       | 高           |
-| data               | 否           | 否                   | 否             | 高       | 高           |
-| indexDB            | 是           | 否                   | 是             | 高       | 中           |
+| parametersType 形式 | 支持页面刷新 | 参数改变引起路由跳转 | 组件间共享数据 | 存储上限 | 浏览器兼容性 |
+| ------------------- | ------------ | -------------------- | -------------- | -------- | ------------ |
+| url                 | 是           | 是                   | 是             | 中       | 高           |
+| data                | 否           | 否                   | 否             | 高       | 高           |
+| indexDB             | 是           | 否                   | 是             | 高       | 中           |
 
 数据示例:
 
-    showSearch: true, // 显示搜索条件
-    getList(); // 请求数据的函数
-    afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
+    formOnly:true // 只展示表单不展示按钮
+    getList(queryParams); // 请求数据的函数
+    afterReset(queryParams); // 在重置按钮点击完后但还没重新请求时触发的的函数
     formOnly:true // 只展示表单不展示按钮
     parametersType:"url" // 见parametersType类型介绍
+    DBPrimaryKey: user_id // indexDB主键，配合indexDB使用
     loading:false // 加载动画
-    formData:{} // 注意，因为可能出现的性能问题在组件watch formData的变化时没有使用deep，所以有时候深度的修改会不生效，导致表单数据不完整
+    formData:{} // 表单数据不完整
     noInputBlank: true //校验input框不能仅输入空格
     //例子：formData.value.x=y ✘ | formData.value={...formData.value,x:y} ✔
     currentPageKey:"page", //当前页数key
     pageSizeKey:"limit", //每页显示个数key
     defCurrentPage:1, //默认的页数
     defPageSize：10, //默认的每页显示个数
-    queryWhenReady:false,//初始化完成后自动触发查找数据函数，建议用这个this.$refs["VGeneralBasicFormRef"].handleQuery({ defaultPageFirst: false })
+    queryWhenReady:false,//初始化完成后自动触发查找数据函数
+    footFieldSetting: {} // 表单底部按钮设置
+    fieldGroupSetting: {} // 表单分组设置
+    fieldLabelSetting: {} // 表单字段label设置
+    onFormChange(queryParams):表单数据变化时触发的函数
+    <!--formItem的fieldSetting加入gap-0以避免表单内元素间隔 -->
     formItem: [
-    	{
-          label: '',
-          prop: 'bsName35',
-          type: 'divider',
-          setting: {
+
+    {
+      label: "普通输入框",
+      prop: "bsName",
+      type: "input",
+      legend: '这是一个可选的标题',
+      setting: {
+        placeholder: '请输入手机验证码',
+        // style: 'width: 100%',
+        required: true,
+        // type: 'number',
+        // min: 1,
+        // max: 100,
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      rules: [
+        {
+          message: "请输入信息",
+          required: true,
+        },
+        {
+          pattern: /^\w+[\,\，\-\w' '#]+$/,
+          message: "请输入正确的Invoice单号"
+        },
+        {
+          validator: (rule, value, callback) => {
+            callback();
           },
-          template: {
-            default: () => {
-              return "123123123";
+        },
+      ],
+      separator: true, //分割线
+    },
+    {
+      label: "文本区域",
+      prop: "Textarea",
+      type: "textarea",
+      setting: {
+        placeholder: '请输入文本区域',
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      }
+    },
+    {
+      label: "复杂输入框",
+      prop: "input-group",
+      type: "input-group",
+      setting: {
+        placeholder: '请输入手机验证码',
+        // style: 'width: 100%',
+        addons: [
+          {
+            text: '前缀，一般和type: input 配合使用',
+            align: "inline-start",
+            render: (props) => {
+              return (
+                <div className="flex items-center">
+                  <span>{props}</span>
+                </div>
+              );
             },
           },
+          {
+            text: '后缀，一般和type: input 配合使用',
+            align: "inline-end"
+          },
+          // {
+          //   text: '底部盒子，一般和type: 'textarea'配合使用',
+          //   align: "block-end"
+          // },
+        ],
+        // type: 'textarea',//input|textarea
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+    },
+    {
+      label: '',
+      prop: 'description',
+      type: 'description',
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      description: [
+        'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        '段落2',
+        'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+      ],
+    },
+    {
+      label: '多维数组',
+      prop: 'prices',
+      type: 'form-list',
+      description: [
+        '段落1',
+        '段落2',
+      ],
+      separator: "text", //文字分割线
+      setting: {
+        heading: true, //是否显示标题
+        dim: 5, // 多维数组，注意要和columns的长度相等，输出为对象数组
+        itemWidth: 'mean',//itemWidth: 'auto' | 'mean' 自动宽度（满行） | 平均分配宽度
+        onChange: (value) => {
+          console.log(value);
+          setDetail({ ...detail, prices: value })
         },
-        { label: "款式名称",
-          prop: "bsName",
-          type: "input",
-       	  setting: {
-            placeholder: '请输入手机验证码',
-            style: 'width: 100%'
+        columns: [
+          {
+            prop: 'id',
+            label: '套餐ID',
+            type: 'input',
+            setting: {
+              placeholder: '请输入套餐ID',
+              disabled: true,
+              className: 'hidden',
+            },
           },
-          rules: [
-            {
-              message: "请输入信息"
+          {
+            prop: 'days',
+            label: '套餐名称',
+            type: 'input',
+            setting: {
+              required: true,
+              placeholder: '请输入套餐名称',
+              type: 'number'
             },
-            {
-              pattern: /^\w+[\,\，\-\w' '#]+$/,
-              message: "请输入正确的Invoice单号"
-            }
-          ],
-          template: {
-            suffix: () => {
-              return <svg-icon icon-class="baifenbi" />;
+          },
+          {
+            prop: 'serviceType',
+            label: '服务类型',
+            type: 'select',
+            option: [
+              { label: '到家服务', value: 'home_service' },
+              { label: '医院陪护', value: 'hospital_care' },
+            ],
+            setting: {
+              placeholder: '请选择服务类型',
+              required: true,
+              className: 'w-full',
+            },
+          },
+          {
+            label: '组合分类',
+            prop: 'expense_category_id',
+            type: 'combobox',
+            setting: {
+              placeholder: '请输入分类',
             },
+            options: [
+              {
+                label: '指南',
+                value: '指南',
+                separator: true, //分割线
+                children: [
+                  {
+                    value: 'shejiyuanze',
+                    label: '设计原则',
+                    shortcut: 'ctrl+z', //选项右侧的内容
+                  },
+                ],
+              },
+              {
+                label: '资源',
+                value: 'resource',
+                children: [
+                  {
+                    value: 'axure',
+                    label: 'Axure Components',
+                  },
+                ],
+              },
+            ],
           },
-    	},
+          {
+            label: '组合分类-多选',
+            prop: 'expense_multiple_checkbox_test',
+            type: 'combobox',
+            setting: {
+              placeholder: '请选择等级',
+              type: 'checkbox-list',
+            },
+            option: [
+              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj3', value: 'Y3' },
+              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj4', value: 'Y4' },
+
+            ],
+          },
+        ],
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      rules: [
         {
-          label: "二次工艺",
-          prop: "spName",
-          type: "select",
-          setting:{ multiple:true, //多选},
-          option: [
-            { value: "3", label: "满印" },
-            { value: "1", label: "区域印花" },
-            { value: "2", label: "绣花" },
-          ],
-        },
-        { 
-          label: "创建时间",
-          prop: "create_time",
-          type: "date-picker",
-          setting: {
-            "range-separator": "至",
-          }
+          validator: (rule, value, callback) => {
+            console.log(value);
+            if (!value) {
+              callback();
+              return;
+            }
+            for (let i = 0; i < value.length; i++) {
+              const element = value[i];
+              if (!Number(element.days)) {
+                callback(new Error('请输入数字'));
+                return;
+              }
+            }
+            callback();
+          },
         },
+      ],
+      removeItemAction: (item, index) => {
+        // 删除项会触发此函数
+        console.log(item, index);
+      },
+    },
+    {
+      label: '1维数组',
+      prop: 'nursingCare',
+      type: 'form-list',
+      setting: {
+        placeholder: ['请输入服务内容'],
+        required: true,
+        dim: 1, // 1维数组，输出为字符串数组
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      rules: [
         {
-          label: "二次工艺成本价格（人民币分）",
-          prop: "spCost",
-          type: "input-number",
-          "controls-position": "right",
-          min: 0,
-          rules: [
-            {
-              required: true,
-              message: "请输入二次工艺成本价格",
-              trigger: "blur",
-            },
-          ],
+          validator: (rule, value, callback) => {
+            if (!value) {
+              callback();
+              return;
+            }
+            for (let i = 0; i < value.length; i++) {
+              const element = value[i];
+              if (!element) {
+                callback(new Error('请输入服务内容'));
+                return;
+              }
+            }
+            callback();
+          },
         },
+      ],
+    },
+    {
+      prop: 'level1',
+      label: '选择框',
+      type: 'select',
+      option: [
+        { label: 'Y3', value: 'Y3' },
+        { label: 'Y4', value: 'Y4' },
+        { label: 'Y5', value: 'Y5' },
+      ],
+      setting: {
+        placeholder: '请选择等级',
+        required: true,
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+    },
+    {
+      label: "开关",
+      prop: "switch_test",
+      type: "switch",
+      setting: {
+      },
+      fieldSetting: {
+        className: 'col-start-2 col-span-2 mb-8',
+      },
+    },
+    {
+      label: "创建时间",
+      prop: "create_time",
+      type: "date-picker",
+      setting: {
+        placeholder: '请选择创建时间',
+        // timeZone: "Asia/Shanghai",
+        // locale: ,
+      },
+      dataPickerType: "month",//day|month
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      // rules: [
+      //   {
+      //     message: "请输入信息",
+      //     required: true,
+      //   }
+      // ],
+    },
+
+    // {
+    //   label: '是否必填',
+    //   prop: 'is_optional',
+    //   type: 'radio',
+    //   setting: {
+    //     disabled: true
+    //   },
+    //   option: [
+    //     { value: '是', label: 'true', border: true },
+    //     { value: '否', label: 'false' }
+    //   ],
+    //   fieldSetting: {
+    //     className: fieldClassName,
+    //   },
+    //   rules: [
+    //     {
+    //       required: true,
+    //       message: '请输入标签项名称',
+    //       trigger: 'blur'
+    //     }
+    //   ]
+    // },
+    {
+      prop: 'level',
+      label: '多选列表',
+      legend: '标题',
+      type: 'checkbox-list',
+      gap: 3,
+      option: [
+        { label: 'Y3', value: 'Y3' },
+        { label: 'Y4', value: 'Y4' },
+        { label: 'Y5', value: 'Y5' },
+      ],
+      fieldSetting: {
+        className: 'col-start-2 col-span-2 mb-8',
+      },
+      setting: {
+        placeholder: '请选择等级',
+      },
+    },
+    {
+      prop: 'test1',
+      label: '选择框',
+      type: 'checkbox',
+      fieldSetting: {
+        className: 'col-start-4 col-span-2 mb-8',
+      },
+      setting: {
+        placeholder: '请选择套餐',
+      },
+    },
+    //  enum ComTypes {
+    //     "command" = "command",
+    //     "rc-tree" = "rc-tree",
+    //     "ant-tree" = "ant-tree",
+    //     "checkbox-list" = "checkbox-list",
+    //   }
+
+    // enum ContainerTypes {
+    //   "Popover" = "Popover",
+    //   "Drawer" = "Drawer",
+    //   "Dialog" = "Dialog",
+    // }
+    {
+      label: "分类",
+      prop: "分类",
+      type: "command",
+      setting: {
+        placeholder: "请输入分类",
+        empty: "搜索内容为空的提示",
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      options: [
         {
-          label: '',
-          prop: 'bsName2',
-          type: 'input-graphic-verification',
-          setting: {
-            placeholder: '请输入图形验证码',
-            style: 'width: 100%'
-          },
-          rules: [
+          label: "指南",
+          value: "guide",
+          separator: true, //分割线
+          children: [
             {
-              message: '请输入图形验证码',
-              trigger: 'blur'
-            }
+              value: 'shejiyuanze',
+              label: '设计原则',
+              onSelect: (value) => {
+                console.log('Selected', value);
+              },
+              shortcut: 'ctrl+z', //选项右侧的内容
+            },
+
           ],
-          graphicSrc, // 请求图像的URL
-          getGraphic, // 重新请求图像的函数
-          key:Math.random(),  // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
         },
         {
-          label: '',
-          prop: 'bsName3',
-          type: 'input-mobile-verification',
-          inputSetting: {
-            placeholder: '请输入手机验证码',
-            style: 'width: 100%'
-          },
-    	  buttonSetting: {
-      		type: "text",
-      		style: 'text-align: end',
-    	  },
-          rules: [
+          label: "资源",
+          value: "resource",
+          children: [
             {
-              message: '请输入手机验证码',
-              trigger: 'blur'
+              value: "axure",
+              label: "Axure Components",
             }
           ],
-          getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
         },
+      ],
+    },
+    {
+      label: '组合分类-多选',
+      prop: 'expense_multiple_checkbox',
+      type: 'combobox',
+      setting: {
+        placeholder: '请选择等级',
+        type: 'checkbox-list',
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      option: [
+        { label: 'Y3', value: 'Y3' },
+        { label: 'Y4', value: 'Y4' },
+        { label: 'Y5', value: 'Y5' },
+      ],
+    },
+    {
+      label: '组合分类',
+      prop: 'expense_category_id',
+      type: 'combobox',
+      setting: {
+        placeholder: '请输入分类',
+        empty: '搜索内容为空的提示',
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      options: [
         {
-          label: '是否必填',
-          prop: 'is_optional',
-          type: 'radio',
-          setting: {
-            disabled: true
-          },
-          option: [
-            { value: '是', label: 'true',border: true },
-            { value: '否', label: 'false' }
-          ],
-          rules: [
+          label: '指南',
+          value: '指南',
+          separator: true, //分割线
+          children: [
             {
-              required: true,
-              message: '请输入标签项名称',
-              trigger: 'blur'
-            }
-          ]
-        },
-        {
-          label: '多选',
-          prop: 'is_multi',
-          type: 'checkbox',
-          setting: {
-          },
-          option: [
-            { value: '是', label: 'true' },
-            { value: '否', label: 'false' }
+              value: 'shejiyuanze',
+              label: '设计原则',
+              shortcut: 'ctrl+z', //选项右侧的内容
+            },
           ],
-          rules: []
         },
         {
-          label: '受访人',
-          prop: 'contactors',
-          type: 'form-item-slot',
-          name: "contactors"
-          // 插槽组件使用：
-          // <VGeneralBasicForm ...>
-          // 	<template #contactors>
-          //		<div>一些组件
-          //			一些组件
-          //			<el-form-item prop="contactors">...</el-form-item>
-          //		</div>
-          //	</template>
-      	  // </VGeneralBasicForm>
+          label: '资源',
+          value: 'resource',
+
         },
+      ],
+    },
+    {
+      label: '树形选择',
+      prop: 'select_tree',
+      type: 'combobox',
+      setting: {
+        placeholder: '请输入分类',
+        empty: '搜索内容为空的提示',
+        type: 'ant-tree',
+        width: `300px`,//控制组件宽度
+        // checkable: true,
+        // selectable: false
+      },
+      container: "Dialog",
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      options: [
         {
-          label: "分类",
-          prop: "分类",
-          type: "cascader",
-          setting:{},
-          options: [
+          label: '指南',
+          value: '指南',
+          children: [
             {
-              value: "zhinan",
-              label: "指南",
+              value: 'shejiyuanze',
+              label: '设计原则',
+              setting: {
+                icon: () => {
+                  return <div>ID</div>
+                }
+              },
               children: [
                 {
-                  value: "shejiyuanze",
-                  label: "设计原则",
-                  children: [
-                    {
-                      value: "yizhi",
-                      label: "一致",
-                    },
-                    {
-                      value: "fankui",
-                      label: "反馈",
-                    },
-                    {
-                      value: "xiaolv",
-                      label: "效率",
-                    },
-                    {
-                      value: "kekong",
-                      label: "可控",
-                    },
-                  ],
+                  value: 'leaf',
+                  label: '叶子节点',
+                  shortcut: 'ctrl+z', //选项右侧的内容
                 },
                 {
-                  value: "daohang",
-                  label: "导航",
-                  children: [
-                    {
-                      value: "cexiangdaohang",
-                      label: "侧向导航",
-                    },
-                    {
-                      value: "dingbudaohang",
-                      label: "顶部导航",
-                    },
-                  ],
+                  value: 'leaf1',
+                  label: '叶子节点1',
+                  shortcut: 'ctrl+z', //选项右侧的内容
                 },
               ],
             },
+          ],
+        },
+        {
+          label: '资源',
+          value: 'resource',
+          children: [
             {
-              value: "ziyuan",
-              label: "资源",
-              children: [
-                {
-                  value: "axure",
-                  label: "Axure Components",
-                },
-                {
-                  value: "sketch",
-                  label: "Sketch Templates",
-                },
-                {
-                  value: "jiaohu",
-                  label: "组件交互文档",
-                },
-              ],
+              value: 'axure',
+              label: 'Axure Components',
             },
           ],
         },
       ],
-    
+    },
+  ]
+
       //rules为表单校验规则，每个组件都可以传入
     
       //input支持template,支持以下几个属性：
@@ -391,265 +647,165 @@ parametersType类型介绍
       //suffix	输入框尾部内容，只对 type="text" 有效
       //prepend	输入框前置内容，只对 type="text" 有效
       //append	输入框后置内容，只对 type="text" 有效
-      
+    
       //divider支持template：
       //default
-支持组件type:
-
- /**
-
-  \* @description: 输入框
-
-  */
-
- 'input' = 'input',
-
- /**
-
-  \* @description: 输入框/图像验证码
-
-  */
-
- 'input-graphic-verification' = 'input-graphic-verification',
-
- /**
-
-  \* @description: 输入框/手机验证码
-
-  */
-
- 'input-mobile-verification' = 'input-mobile-verification',
-
- /**
-
-  \* @description: 分割线
-
-  */
-
- 'divider' = 'divider',
-
- /**
-
-  \* @description: 选择器
-
-  */
-
- 'select' = 'select',
-
- /**
-
-  \* @description: 级联选择器
-
-  */
-
- 'cascader' = 'cascader',
-
- /**
-
-  \* @description: 日期选择器
-
-  */
-
- 'date-picker' = 'date-picker',
-
- /**
-
-  \* @description: 数字输入框
-
-  */
-
- 'input-number' = 'input-number',
 
- /**
-
-  \* @description: 单选框
-
-  */
-
- 'radio' = 'radio',
-
- /**
-
-  \* @description: 自定义元素，插槽组件
-
-  */
-
- 'form-item-slot'='form-item-slot',
-
- /**
-
-  \* @description: 多选框
-
-  */
-
- '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
-```
+支持组件 type:
+
+export enum FormType {
+/\*\*
+
+- @description: 输入框
+- @return {_}
+  _/
+  "input" = "input",
+  /\*\*
+- @description: 文本区域
+- @return {_}
+  _/
+  "textarea" = "textarea",
+  /\*\*
+- @description: 复杂输入框，可自定义前后缀和大小
+- @return {_}
+  _/
+  "input-group" = "input-group",
+  /\*\*
+- @description: 表单中的多维列表，可增减元素，内部可以使用的数据类型除自身 form-list 外同 FormType
+- @return {_}
+  _/
+  "form-list" = "form-list",
+  /\*\*
+- @description: 选择器
+- @return {_}
+  _/
+  "select" = "select",
+  /\*\*
+- @description: 开关
+- @return {_}
+  _/
+  "switch" = "switch",
+  /\*\*
+- @description: 带搜索的二级菜单
+- @return {_}
+  _/
+  "command" = "command",
+  /\*\*
+- @description: 响应式下拉框+带搜索的二级菜单/多选
+- @return {_}
+  _/
+  "combobox" = "combobox",
+  /\*\*
+- @description: 日期选择器
+- @return {_}
+  _/
+  "date-picker" = "date-picker",
+
+/\*\*
+
+- @description: 单选框
+- @return {_}
+  _/
+  "radio" = "radio",
+  // /**
+  // _ @description: 自定义元素，插槽组件
+  // _ @return {_}
+  // _/
+  // "form-item-slot" = "form-item-slot",
+  /**
+- @description: 多选框
+- @return {_}
+  _/
+  "checkbox" = "checkbox",
+  /\*\*
+- @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
+- @return {_}
+  _/
+  "checkbox-list" = "checkbox-list",
+  /\*\*
+- @description: FieldDescription 描述
+- @return {_}
+  _/
+  "description" = "description",
+  }
+
+# RBaseTabs
+
+tab栏，支持parametersType
 
 ```
- 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
-      }
-    },
+import { RBaseTabs } from 'general-basic-form';
+  const tabPanes = [
     {
-      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"（默认）
-```
-
+      value: 'rewards',
+      label: '配置1',
+      render: (tabPane, index) => {
+        return <Rewards />;
+      },
+    }
+  ]
+<RBaseTabs tabPanes={tabPanes} parametersType="indexDB" DBPrimaryKey={auth.get.user().id}></RBaseTabs>;
 ```
-此用法下必须提供：
-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 树形数据穿梭框
+# RBaseCombobox 单独使用
 
-![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: [
+import { RBaseCombobox } from 'general-basic-form';
+<RBaseCombobox
+  onFormChange={(params) => {
+    console.log('queryParams', params);
+  }}
+  value='resource'
+  item={{
+    options: [
       {
-        label: 'Level two 1-1',
-        id:2,
+        label: '指南',
+        value: '指南',
+        separator: true, //分割线
         children: [
           {
-            label: 'Level three 1-1-1',
-            id:3,
+            value: 'shejiyuanze',
+            label: '设计原则',
+            shortcut: 'ctrl+z', //选项右侧的内容
           },
         ],
       },
+      {
+        label: '资源',
+        value: 'resource',
+      },
     ],
-  },] 树状结构数据
-treeAttributes:{} 树形控件的属性，见https://element-plus.org/zh-CN/component/tree.html
-transferTitleLeft:"" 左标题
-transferTitleRight:"" 右标题
-filterable:false 是否显示搜索框
-checkedKeys:[1,2] 选中的值
-
-获取选中的数组详情：
-VTreeTransferRef.value["selectedList"].map((item) => {}))
+    setting: {
+      placeholder: '请输入分类',
+      empty: '搜索内容为空的提示',
+    },
+    container: 'Dialog',
+  }}
+/>
+
 ```
+# RBaseDatePicker 单独使用
 
+日期选择器
+
+```
+import { RBaseDatePicker } from 'general-basic-form';
+<RBaseDatePicker
+  onFormChange={(params) => {
+    console.log('queryParams', params);
+  }}
+  // ref={RBaseComboboxRef}
+  value={new Date()}
+  item={{
+    setting: {
+      placeholder: '请选择创建时间',
+    },
+    dataPickerType: "month",//day|month
+  }}
+/>
+
+```