general-basic-form 2.4.2 → 2.4.4

package/README.md

@@ -1,30 +1,27 @@
-<!-- @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                 |      |      |                        |              |               | √       | √         |
-| RBaseTabs                 |      |      |                        |              |               | √       | √         |
-| RBaseCombobox             |      |      |                        |              |               | √       | √         |
+## 一个兼容 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
 
-webpack4 兼容：
+webpack4兼容：
 加入配置：module.exports = {
-transpileDependencies: ['general-basic-form'],
+  transpileDependencies: ['general-basic-form'],
 }
 
 示例:
@@ -32,62 +29,63 @@ transpileDependencies: ['general-basic-form'],
 因为兼容性问题，目前只能使用完整引入
 
 ```
-import { RGeneralBasicForm,RBasicForm } from 'general-basic-form';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+app.use(ElementPlus)
 ```
 
 ```
-<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>
+import { VGeneralBasicForm } from 'general-basic-form'
+import 'general-basic-form/style'
 ```
 
+    <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)
 
 在单纯作为表单的时候可以这样使用：
 
-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>
+    <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>
 
-getList 会传出默认的参数,首次请求时会有页数和分页大小,重置后会传出默认页数 1
+getList会传出默认的参数,首次请求时会有页数和分页大小,重置后会传出默认页数1
 
     async getList(
        params = {
@@ -96,548 +94,296 @@ getList 会传出默认的参数,首次请求时会有页数和分页大小,重
        }
      ) {}
 
-表单数据校验需要拿到内部表单的 ref
+表单数据校验需要拿到内部表单的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()
+          }
+        }
+      )
+    })
 
-    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            | 是           | 否                   | 是             | 高       | 中           |
 
 数据示例:
 
-    formOnly:true // 只展示表单不展示按钮
-    getList(queryParams); // 请求数据的函数
-    afterReset(queryParams); // 在重置按钮点击完后但还没重新请求时触发的的函数
+    showSearch: true, // 显示搜索条件
+    getList(); // 请求数据的函数
+    afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
     formOnly:true // 只展示表单不展示按钮
     parametersType:"url" // 见parametersType类型介绍
-    DBPrimaryKey: user_id // indexDB主键，配合indexDB使用
     loading:false // 加载动画
-    formData:{} // 表单数据不完整
+    formData:{} // 注意，因为可能出现的性能问题在组件watch formData的变化时没有使用deep，所以有时候深度的修改会不生效，导致表单数据不完整
     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,//初始化完成后自动触发查找数据函数
-    footFieldSetting: {} // 表单底部按钮设置
-    fieldGroupSetting: {} // 表单分组设置
-    fieldLabelSetting: {} // 表单字段label设置
-    onFormChange(queryParams):表单数据变化时触发的函数
-    <!--formItem的fieldSetting加入gap-0以避免表单内元素间隔 -->
+    queryWhenReady:false,//初始化完成后自动触发查找数据函数，建议用这个this.$refs["VGeneralBasicFormRef"].handleQuery({ defaultPageFirst: false })
     formItem: [
-
-    {
-      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();
+    	{
+          label: '',
+          prop: 'bsName35',
+          type: 'divider',
+          setting: {
           },
-        },
-      ],
-      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>
-              );
+          template: {
+            default: () => {
+              return "123123123";
             },
           },
-          {
-            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 })
         },
-        columns: [
-          {
-            prop: 'id',
-            label: '套餐ID',
-            type: 'input',
-            setting: {
-              placeholder: '请输入套餐ID',
-              disabled: true,
-              className: 'hidden',
-            },
-          },
-          {
-            prop: 'days',
-            label: '套餐名称',
-            type: 'input',
-            setting: {
-              required: true,
-              placeholder: '请输入套餐名称',
-              type: 'number'
-            },
+        { label: "款式名称",
+          prop: "bsName",
+          type: "input",
+       	  setting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
           },
-          {
-            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: '请输入分类',
+          rules: [
+            {
+              message: "请输入信息"
             },
-            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',
+            {
+              pattern: /^\w+[\,\，\-\w' '#]+$/,
+              message: "请输入正确的Invoice单号"
+            }
+          ],
+          template: {
+            suffix: () => {
+              return <svg-icon icon-class="baifenbi" />;
             },
-            option: [
-              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj3', value: 'Y3' },
-              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj4', value: 'Y4' },
-
-            ],
           },
-        ],
-      },
-      fieldSetting: {
-        className: fieldClassName,
-      },
-      rules: [
+    	},
         {
-          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();
-          },
+          label: "二次工艺",
+          prop: "spName",
+          type: "select",
+          setting:{ multiple:true, //多选},
+          option: [
+            { value: "3", label: "满印" },
+            { value: "1", label: "区域印花" },
+            { value: "2", label: "绣花" },
+          ],
         },
-      ],
-      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: [
-        {
-          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();
-          },
+        { 
+          label: "创建时间",
+          prop: "create_time",
+          type: "date-picker",
+          setting: {
+            "range-separator": "至",
+          }
         },
-      ],
-    },
-    {
-      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: '请选择创建时间',
-      },
-      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: "指南",
-          value: "guide",
-          separator: true, //分割线
-          children: [
+          label: "二次工艺成本价格（人民币分）",
+          prop: "spCost",
+          type: "input-number",
+          "controls-position": "right",
+          min: 0,
+          rules: [
             {
-              value: 'shejiyuanze',
-              label: '设计原则',
-              onSelect: (value) => {
-                console.log('Selected', value);
-              },
-              shortcut: 'ctrl+z', //选项右侧的内容
+              required: true,
+              message: "请输入二次工艺成本价格",
+              trigger: "blur",
             },
-
           ],
         },
         {
-          label: "资源",
-          value: "resource",
-          children: [
+          label: '',
+          prop: 'bsName2',
+          type: 'input-graphic-verification',
+          setting: {
+            placeholder: '请输入图形验证码',
+            style: 'width: 100%'
+          },
+          rules: [
             {
-              value: "axure",
-              label: "Axure Components",
+              message: '请输入图形验证码',
+              trigger: 'blur'
             }
           ],
+          graphicSrc, // 请求图像的URL
+          getGraphic, // 重新请求图像的函数
+          key:Math.random(),  // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
         },
-      ],
-    },
-    {
-      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: '指南',
-          value: '指南',
-          separator: true, //分割线
-          children: [
+          label: '',
+          prop: 'bsName3',
+          type: 'input-mobile-verification',
+          inputSetting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
+          },
+    	  buttonSetting: {
+      		type: "text",
+      		style: 'text-align: end',
+    	  },
+          rules: [
             {
-              value: 'shejiyuanze',
-              label: '设计原则',
-              shortcut: 'ctrl+z', //选项右侧的内容
-            },
+              message: '请输入手机验证码',
+              trigger: 'blur'
+            }
           ],
+          getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
         },
         {
-          label: '资源',
-          value: 'resource',
-
+          label: '是否必填',
+          prop: 'is_optional',
+          type: 'radio',
+          setting: {
+            disabled: true
+          },
+          option: [
+            { value: '是', label: 'true',border: true },
+            { value: '否', label: 'false' }
+          ],
+          rules: [
+            {
+              required: true,
+              message: '请输入标签项名称',
+              trigger: 'blur'
+            }
+          ]
+        },
+        {
+          label: '多选',
+          prop: 'is_multi',
+          type: 'checkbox',
+          setting: {
+          },
+          option: [
+            { value: '是', label: 'true' },
+            { value: '否', label: 'false' }
+          ],
+          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: '树形选择',
-      prop: 'select_tree',
-      type: 'combobox',
-      setting: {
-        placeholder: '请输入分类',
-        empty: '搜索内容为空的提示',
-        type: 'ant-tree',
-        width: `300px`,//控制组件宽度
-        // checkable: true,
-        // selectable: false
-      },
-      container: "Dialog",
-      fieldSetting: {
-        className: fieldClassName,
-      },
-      options: [
         {
-          label: '指南',
-          value: '指南',
-          children: [
+          label: "分类",
+          prop: "分类",
+          type: "cascader",
+          setting:{},
+          options: [
             {
-              value: 'shejiyuanze',
-              label: '设计原则',
-              setting: {
-                icon: () => {
-                  return <div>ID</div>
-                }
-              },
+              value: "zhinan",
+              label: "指南",
               children: [
                 {
-                  value: 'leaf',
-                  label: '叶子节点',
-                  shortcut: 'ctrl+z', //选项右侧的内容
+                  value: "shejiyuanze",
+                  label: "设计原则",
+                  children: [
+                    {
+                      value: "yizhi",
+                      label: "一致",
+                    },
+                    {
+                      value: "fankui",
+                      label: "反馈",
+                    },
+                    {
+                      value: "xiaolv",
+                      label: "效率",
+                    },
+                    {
+                      value: "kekong",
+                      label: "可控",
+                    },
+                  ],
                 },
                 {
-                  value: 'leaf1',
-                  label: '叶子节点1',
-                  shortcut: 'ctrl+z', //选项右侧的内容
+                  value: "daohang",
+                  label: "导航",
+                  children: [
+                    {
+                      value: "cexiangdaohang",
+                      label: "侧向导航",
+                    },
+                    {
+                      value: "dingbudaohang",
+                      label: "顶部导航",
+                    },
+                  ],
                 },
               ],
             },
-          ],
-        },
-        {
-          label: '资源',
-          value: 'resource',
-          children: [
             {
-              value: 'axure',
-              label: 'Axure Components',
+              value: "ziyuan",
+              label: "资源",
+              children: [
+                {
+                  value: "axure",
+                  label: "Axure Components",
+                },
+                {
+                  value: "sketch",
+                  label: "Sketch Templates",
+                },
+                {
+                  value: "jiaohu",
+                  label: "组件交互文档",
+                },
+              ],
             },
           ],
         },
       ],
-    },
-  ]
-
+    
       //rules为表单校验规则，每个组件都可以传入
     
       //input支持template,支持以下几个属性：
@@ -645,165 +391,265 @@ 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',
 
-支持组件 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
+ /**
+
+  \* @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
+```
 
 ```
-import { RBaseTabs } from 'general-basic-form';
-  const tabPanes = [
+ 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
+      }
+    },
     {
-      value: 'rewards',
-      label: '配置1',
-      render: (tabPane, index) => {
-        return <Rewards />;
-      },
-    }
-  ]
-<RBaseTabs tabPanes={tabPanes} parametersType="indexDB" DBPrimaryKey={auth.get.user().id}></RBaseTabs>;
+      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); // 输入框回车触发
 
-# RBaseCombobox 单独使用
+调用发送短信验证码和重置的方法
+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([])
+```
 
 ```
-import { RBaseCombobox } from 'general-basic-form';
-<RBaseCombobox
-  onFormChange={(params) => {
-    console.log('queryParams', params);
-  }}
-  value='resource'
-  item={{
-    options: [
+dataSource:[
+  {
+    label: 'Level one 1',
+    id:1,
+    children: [
       {
-        label: '指南',
-        value: '指南',
-        separator: true, //分割线
+        label: 'Level two 1-1',
+        id:2,
         children: [
           {
-            value: 'shejiyuanze',
-            label: '设计原则',
-            shortcut: 'ctrl+z', //选项右侧的内容
+            label: 'Level three 1-1-1',
+            id:3,
           },
         ],
       },
-      {
-        label: '资源',
-        value: 'resource',
-      },
     ],
-    setting: {
-      placeholder: '请输入分类',
-      empty: '搜索内容为空的提示',
-    },
-    container: 'Dialog',
-  }}
-/>
-
+  },] 树状结构数据
+treeAttributes:{} 树形控件的属性，见https://element-plus.org/zh-CN/component/tree.html
+transferTitleLeft:"" 左标题
+transferTitleRight:"" 右标题
+filterable:false 是否显示搜索框
+checkedKeys:[1,2] 选中的值
+
+获取选中的数组详情：
+VTreeTransferRef.value["selectedList"].map((item) => {}))
 ```
-# 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
-  }}
-/>
-
-```