general-basic-form 2.1.9 → 2.2.0

package/README.md

@@ -156,8 +156,8 @@ parametersType 类型介绍
 数据示例:
 
     showSearch: true, // 显示搜索条件
-    getList(); // 请求数据的函数
-    afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
+    getList(queryParams); // 请求数据的函数
+    afterReset(queryParams); // 在重置按钮点击完后但还没重新请求时触发的的函数
     formOnly:true // 只展示表单不展示按钮
     parametersType:"url" // 见parametersType类型介绍
     DBPrimaryKey: user_id // indexDB主键，配合indexDB使用
@@ -173,298 +173,365 @@ parametersType 类型介绍
     footFieldSetting: {} // 表单底部按钮设置
     fieldGroupSetting: {} // 表单分组设置
     fieldLabelSetting: {} // 表单字段label设置
+    onFormChange(queryParams):表单数据变化时触发的函数
     formItem: [
 
-        { label: "款式名称",
-          prop: "bsName",
-          type: "input",
-          legend: '这是一个可选的标题',
-       	  setting: {
-            placeholder: '请输入手机验证码',
-            style: 'width: 100%',
-            required: true,
-          },
+    {
+      label: "普通输入框",
+      prop: "bsName",
+      type: "input",
+      legend: '这是一个可选的标题',
+      setting: {
+        placeholder: '请输入手机验证码',
+        // style: 'width: 100%',
+        required: true,
+      },
       fieldSetting: {
-        orientation: 'responsive',//表单布局-响应式
+        className: fieldClassName,
       },
-          rules: [
-            {
-              message: "请输入信息",
-                  required: true,
-            },
-            {
-              pattern: /^\w+[\,\，\-\w' '#]+$/,
-              message: "请输入正确的Invoice单号"
-            },
-                    {
+      rules: [
+        {
+          message: "请输入信息",
+          required: true,
+        },
+        {
+          pattern: /^\w+[\,\，\-\w' '#]+$/,
+          message: "请输入正确的Invoice单号"
+        },
+        {
           validator: (rule, value, callback) => {
             callback();
           },
         },
-          ],
-          separator: true, //分割线
-
-          //template: {
-          //  suffix: () => {
-          //    return <svg-icon icon-class="baifenbi" />;
-          //  },
-          //},
-    	},
+      ],
+      separator: true, //分割线
+    },
+    {
+      label: "复杂输入框",
+      prop: "input-group",
+      type: "input-group",
+      setting: {
+        placeholder: '请输入手机验证码',
+        // style: 'width: 100%',
+        addons: [
           {
-            label: '天数-价格配置',
-            prop: 'prices',
-            type: 'form-list',
-            description: [
-              '段落1',
-              '段落2',
-            ],
-            separator: "text", //文字分割线
-            setting: {
-              heading:true, //是否显示标题
-              dim: 3, // 多维数组，注意要和columns的长度相等，输出为对象数组
-              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'
-                  },
-                },
-                  {
-                    prop: 'serviceType',
-                    label: '服务类型',
-                    type: 'select',
-                    option: [
-                      { label: '到家服务', value: 'home_service' },
-                      { label: '医院陪护', value: 'hospital_care' },
-                    ],
-                    setting: {
-                      placeholder: '请选择服务类型',
-                      required: true,
-                      className: 'w-full',
-                    },
-                  },
-              ],
-            },
-            fieldSetting: {
-              className: 'col-span-2 col-start-2 mb-8',
-            },
-            rules: [
-              {
-                validator: (rule, value, callback) => {
-                  console.log(value);
-                  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);
+            text: '前缀，一般和type: input 配合使用',
+            align: "inline-start",
+            render: (props) => {
+              return (
+                <div className="flex items-center">
+                  <span>{props}</span>
+                </div>
+              );
             },
           },
-           {
-              label: '护士在线增值服务内容',
-              prop: 'nursingCare',
-              type: 'form-list',
-              setting: {
-                placeholder: ['请输入服务内容'],
-                required: true,
-                dim: 1, // 1维数组，输出为字符串数组
-              },
-              fieldSetting: {
-                className: 'col-span-2',
-              },
-              rules: [
-                {
-                  validator: (rule, value, callback) => {
-                    for (let i = 0; i < value.length; i++) {
-                      const element = value[i];
-                      if (!element) {
-                        callback(new Error('请输入服务内容'));
-                        return;
-                      }
-                    }
-                    callback();
-                  },
-                },
-              ],
+          {
+            text: '后缀，一般和type: input 配合使用',
+            align: "inline-end"
+          },
+          // {
+          //   text: '底部盒子，一般和type: 'textarea'配合使用',
+          //   align: "block-end"
+          // },
+        ],
+        // type: 'textarea',//input|textarea
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+    },
+    {
+      label: '多维数组',
+      prop: 'prices',
+      type: 'form-list',
+      description: [
+        '段落1',
+        '段落2',
+      ],
+      separator: "text", //文字分割线
+      setting: {
+        heading: true, //是否显示标题
+        dim: 4, // 多维数组，注意要和columns的长度相等，输出为对象数组
+        columns: [
+          {
+            prop: 'id',
+            label: '套餐ID',
+            type: 'input',
+            setting: {
+              placeholder: '请输入套餐ID',
+              disabled: true,
+              className: 'hidden',
             },
-         {
-           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",
-          type: "date-picker",
-          setting: {
-            "range-separator": "至",
-          }
-        },
-
-        {
-          label: '是否必填',
-          prop: 'is_optional',
-          type: 'radio',
-          setting: {
-            disabled: true
           },
-          option: [
-            { value: '是', label: 'true',border: true },
-            { value: '否', label: 'false' }
-          ],
-          rules: [
-            {
+          {
+            prop: 'days',
+            label: '套餐名称',
+            type: 'input',
+            setting: {
               required: true,
-              message: '请输入标签项名称',
-              trigger: 'blur'
-            }
-          ]
-        },
-            {
-            prop: 'level',
-            label: '多选',
-            legend: 标题',
-            type: 'checkbox-list',
-            gap: 3,
+              placeholder: '请输入套餐名称',
+              type: 'number'
+            },
+          },
+          {
+            prop: 'serviceType',
+            label: '服务类型',
+            type: 'select',
             option: [
-              { label: 'Y3', value: 'Y3' },
-              { label: 'Y4', value: 'Y4' },
-              { label: 'Y5', value: 'Y5' },
+              { label: '到家服务', value: 'home_service' },
+              { label: '医院陪护', value: 'hospital_care' },
             ],
-            fieldSetting: {
-              className: 'col-span-4',
+            setting: {
+              placeholder: '请选择服务类型',
+              required: true,
+              className: 'w-full',
             },
+          },
+
+          {
+            label: '组合分类-多选',
+            prop: 'expense_multiple_checkbox_test',
+            type: 'combobox',
             setting: {
               placeholder: '请选择等级',
+              type: 'checkbox-list',
             },
+            fieldSetting: {
+              className: fieldClassName,
+            },
+            option: [
+              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj3', value: 'Y3' },
+              { label: 'Yysyayayasuydsaiewqnkerwjrklwjlwerjwlejrlj4', value: 'Y4' },
+
+            ],
+          },
+        ],
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      rules: [
+        {
+          validator: (rule, value, callback) => {
+            console.log(value);
+            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: [
+        {
+          validator: (rule, value, callback) => {
+            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: "create_time",
+    //   type: "date-picker",
+    //   setting: {
+    //     "range-separator": "至",
+    //   },
+    //   fieldSetting: {
+    //     className: fieldClassName,
+    //   },
+    // },
+
+    // {
+    //   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: fieldClassName,
+      },
+      setting: {
+        placeholder: '请选择等级',
+      },
+    },
+    {
       prop: 'test1',
-      label: 'test1(多选)',
+      label: '选择框',
       type: 'checkbox',
       fieldSetting: {
-        className: 'col-span-4',
+        className: fieldClassName,
       },
       setting: {
         placeholder: '请选择套餐',
       },
     },
+
+    {
+      label: "分类",
+      prop: "分类",
+      type: "command",
+      setting: {
+        placeholder: "请输入分类",
+        empty: "搜索内容为空的提示",
+      },
+      fieldSetting: {
+        className: fieldClassName,
+      },
+      options: [
+        {
+          label: "指南",
+          value: "guide",
+          separator: true, //分割线
+          children: [
+            {
+              value: 'shejiyuanze',
+              label: '设计原则',
+              onSelect: (value) => {
+                console.log('Selected', value);
+              },
+              shortcut: 'ctrl+z', //选项右侧的内容
+            },
+
+          ],
+        },
         {
-          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",
+          children: [
+            {
+              value: "axure",
+              label: "Axure Components",
+            }
+          ],
         },
+      ],
+    },
+    {
+      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: "分类",
-          type: "cascader",
-          setting:{},
-          options: [
+          label: '指南',
+          value: '指南',
+          separator: true, //分割线
+          children: [
             {
-              value: "zhinan",
-              label: "指南",
-              children: [
-                {
-                  value: "shejiyuanze",
-                  label: "设计原则",
-                  children: [
-                    {
-                      value: "yizhi",
-                      label: "一致",
-                    },
-                    {
-                      value: "fankui",
-                      label: "反馈",
-                    },
-                    {
-                      value: "xiaolv",
-                      label: "效率",
-                    },
-                    {
-                      value: "kekong",
-                      label: "可控",
-                    },
-                  ],
-                },
-                {
-                  value: "daohang",
-                  label: "导航",
-                  children: [
-                    {
-                      value: "cexiangdaohang",
-                      label: "侧向导航",
-                    },
-                    {
-                      value: "dingbudaohang",
-                      label: "顶部导航",
-                    },
-                  ],
-                },
-              ],
+              value: 'shejiyuanze',
+              label: '设计原则',
+              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为表单校验规则，每个组件都可以传入
 
@@ -479,51 +546,63 @@ parametersType 类型介绍
 
 支持组件 type:
 
-/\*\*
-
-- @description: 输入框
-- @return {_}
-  _/
+export enum FormType {
+  /**
+   * @description: 输入框
+   * @return {*}
+   */
   "input" = "input",
-  /\*\*
-- @description: 表单中的多维列表，可增减元素
-- @return {_}
-  _/
+  /**
+   * @description: 复杂输入框，可自定义前后缀和大小
+   * @return {*}
+   */
+  "input-group" = "input-group",
+  /**
+   * @description: 表单中的多维列表，可增减元素，内部可以使用的数据类型除自身form-list外同FormType
+   * @return {*}
+   */
   "form-list" = "form-list",
-  /\*\*
-- @description: 选择器
-- @return {_}
-  _/
+  /**
+   * @description: 选择器
+   * @return {*}
+   */
   "select" = "select",
-  /\*\*
-- @description: 级联选择器
-- @return {_}
-  _/
-  "cascader" = "cascader",
-  /\*\*
-- @description: 日期选择器
-- @return {_}
-  _/
+  /**
+   * @description: 带搜索的二级菜单
+   * @return {*}
+   */
+  "command" = "command",
+  /**
+   * @description: 响应式下拉框+带搜索的二级菜单/多选
+   * @return {*}
+   */
+  "combobox" = "combobox",
+  /**
+   * @description: 日期选择器
+   * @return {*}
+   */
   "date-picker" = "date-picker",
 
-/\*\*
-
-- @description: 单选框
-- @return {_}
-  _/
+  /**
+   * @description: 单选框
+   * @return {*}
+   */
   "radio" = "radio",
   // /**
-  // _ @description: 自定义元素，插槽组件
-  // _ @return {_}
-  // _/
+  //  * @description: 自定义元素，插槽组件
+  //  * @return {*}
+  //  */
   // "form-item-slot" = "form-item-slot",
   /**
-- @description: 多选框
-- @return {_}
-  _/
+   * @description: 多选框
+   * @return {*}
+   */
   "checkbox" = "checkbox",
-  /\*\*
-- @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
-- @return {_}
-  _/
+  /**
+   * @description: 多选框列表，输入输出都是字符串列表 ["value1", "value2", "value3"]
+   * @return {*}
+   */
   "checkbox-list" = "checkbox-list",
+}
+
+