plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/form/DemoFormSimplify.tsx

@@ -1,587 +1,587 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Checkbox, Form, FormCheckboxGroup, FormColorPicker, FormDatePicker, FormInput, FormItem, FormRadioGroup, FormRate, FormSelect, FormSlider, FormTimePicker, FormToggle, Icon, Input, InputNumber, Radio, Segment, SegmentGroup, SelectOption, Tooltip} from "../../../../packages";
-import {PlainObject} from "plain-utils/utils/event";
-import {pick} from "../../../../packages/utils/pick";
-
-export const demo01 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form
-  });
-
-  const state = reactive({
-    formData: {
-      field1: '111',
-      field2: '222',
-      field11: 25,
-    } as any,
-    disabled: undefined as undefined | boolean,
-    showFlag: true,
-    size: 'small' as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  const treeData = [
-    {
-      id: '1',
-      name: '一级 1',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '1-' + index,
-          name: '二级 1-' + index,
-          subs: [{
-            id: `1-${index}-1`,
-            name: `三级 1-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '2',
-      name: '一级 2',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '2-' + index,
-          name: '二级 2-' + index,
-          subs: [{
-            id: `2-${index}-1`,
-            name: `三级 2-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '3',
-      name: '一级 3',
-      subs: [{
-        id: '3-1',
-        name: '二级 3-1',
-        subs: [{
-          id: '3-1-1',
-          name: '三级 3-1-1'
-        }, {
-          id: '3-1-2',
-          name: '三级 3-1-2'
-        }]
-      }, {
-        id: '3-2',
-        name: '二级 3-2',
-        subs: [{
-          id: '3-2-1',
-          name: '三级 3-2-1'
-        }]
-      }]
-    }];
-
-  async function saveValidate() {
-    await refs.form!.validate();
-    $message.success('校验通过');
-  }
-
-  return () => (
-    <DemoRow title={'表单组件'}>
-      <div>
-        <Form ref={onRef.form} modelValue={formData} disabled={state.disabled} singleColumnCenter size={state.size}>
-          <FormItem label="大小尺寸">
-            <SegmentGroup v-model={state.size}>
-              <Segment label="Mini" val="mini"/>
-              <Segment label="Small" val="small"/>
-              <Segment label="Normal" val="normal"/>
-              <Segment label="Large" val="large"/>
-            </SegmentGroup>
-          </FormItem>
-          <FormInput v-model={formData.field1} placeholder={'请输入文本'} label={'普通文本框'} field={'field1'} required/>
-          <FormInput v-model={formData.field2} placeholder={'请输入文本'} label={'普通文本框'} field={'field2'} required/>
-          <FormInput v-model={formData.field2} textarea placeholder={'请输入文本域'} label={'普通文本域'} field={'field2'} required/>
-          <FormItem label={'数字框'} field={'field3'} rules={{ type: 'number', max: 100, message: '最大值100' }} required>
-            {{
-              default: () => <InputNumber v-model={formData.field3} placeholder={'请输入数字'}/>,
-              append: () => <Tooltip message={'提示'}><Icon icon={'el-icon-question'}/></Tooltip>,
-            }}
-          </FormItem>
-          <FormCheckboxGroup v-model={formData.field5} itemWidth={'50%'} label={'复选框'} field={'field5'} rules={{ min: 1, max: 3, type: 'array', message: '1-3个元素' }} required>
-            <Checkbox checkboxForAll label="全部"/>
-            <Checkbox label="大客户" val="large"/>
-            <Checkbox label="潜在客户" val="potential"/>
-            <Checkbox label="长久客户" val="long"/>
-            <Checkbox label="赢单客户" val="order"/>
-          </FormCheckboxGroup>
-          <FormSelect v-model={formData.field6} placeholder={'请选择'} label={'下拉选项'} field={'field6'} required rules={{ message: '只能选择二级', enum: ['2'] }}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </FormSelect>
-          <FormSelect v-model={formData.field62} placeholder={'请选择'} multiple label={'下拉选项（多选）'} field={'field62'} required rules={{ required: true, type: 'array', min: 1, message: '最少选择一项' }}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </FormSelect>
-          <FormRadioGroup v-model={formData.field9} itemWidth="33%" label={'单选按钮'} field={'field9'} required>
-            <Radio label="是" val="Y"/>
-            <Radio label="否" val="N"/>
-            <Radio label="未知" val="NO"/>
-          </FormRadioGroup>
-          <FormToggle v-model={formData.field10} label={'开关按钮'} field={'field10'} rules={{ message: '请阅读并同意使用协议', enum: [true] }}/>
-          <FormSlider v-model={formData.field11} label={'滑块'} field={'field11'} required rules={{ min: 50, type: 'number', message: '最小值50' }}/>
-          <FormInput multiple v-model={formData.field12} placeholder={'请选择'} label={'标签输入框'} field={'field12'} required rules={[{ min: 3, type: 'array', message: '最少输入3个标签' }, { max: 5, type: 'array', message: '最多5个标签' }]}/>
-          <FormRate v-model={formData.field13} label={'评分'} field={'field13'} required rules={{ min: 1, type: 'number', message: '最低1分' }}/>
-          <FormColorPicker v-model={formData.field14} placeholder={'请选择'} label={'颜色选择器'} field={'field14'} rules={{ required: true, message: '颜色不能为空' }}/>
-          <FormTimePicker v-model={formData.field15} placeholder={'请选择'} label={'时间选择'} field={'field15'} required/>
-          <FormTimePicker
-            v-model:start={formData.field17}
-            v-model:end={formData.field18}
-            range
-            label={'时间范围选择'}
-            rules={[
-              { field: 'field17', required: true },
-              { field: 'field18', required: true },
-            ]}
-          />
-          <p>{JSON.stringify(pick(formData, ['field17', 'field18']))}</p>
-          <FormDatePicker v-model={formData.field19} datetime placeholder={'请选择'} label={'日期时间选择'} field={'field19'} required/>
-
-          <FormToggle label="state.showFlag" v-model={state.showFlag}/>
-          {!!state.showFlag && (
-            <FormDatePicker
-              separate
-              v-model:start={formData.field20}
-              v-model:end={formData.field21}
-              range
-              datetime
-              label={'日期时间范围选择_2'}
-              rules={[
-                { field: 'field20', required: true },
-                { field: 'field21', required: true },
-              ]}/>
-          )}
-          <FormDatePicker v-model:start={formData.field22} v-model:end={formData.field23} range datetime label={'日期时间范围选择_1'}/>
-
-          <FormInput textarea v-model={formData.field22} label="文本域" field="field22" required/>
-          <FormItem colon={false}>
-            <Button label={'校验'} onClick={saveValidate}/>
-            <Button label={'清空校验'} onClick={() => refs.form!.clearValidate()}/>
-          </FormItem>
-          <FormItem colon={false}>
-            <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoRequired = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-      registryCapital: { label: 'Form.rules->label', required: true },
-    },
-  });
-
-  const dynamicRequired = (formData: PlainObject | null | undefined) => {
-    return !!formData!.enterpriseName;
-  };
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormInput
-          label="FormInput.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="企业名称"
-          required
-        />
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-        />
-        <FormInput
-          label="Form.rules->label"
-          v-model={state.formData.registryCapital}
-          placeholder="注册资本"
-        />
-        <FormInput
-          label="FormItem.required有值时必填"
-          v-model={state.formData.businessNature}
-          placeholder="经营范围"
-          required={dynamicRequired}
-        />
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoString = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验string">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormInput
-          label="FormInput.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="string,min:3,max:5"
-          required
-          rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}
-        />
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-        />
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoNumber = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验number">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormInput
-          label="FormInput.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="number,min:3,max:5"
-          required
-          rules={{ type: 'number', min: 3, max: 5 }}
-        />
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-        />
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoArray = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验array">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormSelect
-          label="FormSelect.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="array,min:3,max:5"
-          required
-          rules={{ type: 'array', min: 3, max: 5 }}
-          multiple
-        >
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </FormSelect>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-        />
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoArraystring = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验arraystring">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormSelect
-          label="FormSelect.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="arraystring,min:3,max:5"
-          required
-          rules={{ type: 'arraystring', min: 3, max: 5 }}
-          multiple
-          valueType="arraystring"
-        >
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </FormSelect>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-        />
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoArrayjson = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-    input: Input,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验arrayjson">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormSelect
-          label="FormSelect.required"
-          v-model={state.formData.enterpriseName}
-          placeholder="arrayjson,min:3,max:5"
-          required
-          rules={{ type: 'arrayjson', min: 3, max: 5 }}
-          multiple
-          valueType="arrayjson"
-        >
-          {{
-            default: () => <>
-              <SelectOption label="支付宝" val="alipay"/>
-              <SelectOption label="微信支付" val="wechat_pay"/>
-              <SelectOption label="财付通" val="qq_pay"/>
-              <SelectOption label="快支付" val="fast_pay"/>
-              <SelectOption label="云闪付" val="cloud_pay"/>
-              <SelectOption label="网银支付" val="net_pay"/>
-              <SelectOption label="快捷支付" val="convince_pay"/>
-              <SelectOption label="paypal" val="paypal"/>
-            </>,
-            noMatch: () => (
-              <div style={{ textAlign: 'center', padding: '8px 0' }}>
-                没有匹配数据！！！
-              </div>
-            )
-          }}
-        </FormSelect>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormInput
-            label="FormInput.rules[0].required"
-            v-model={state.formData.address}
-            placeholder="所在地"
-            required
-            rules={[{ required: true }, { pattern: /\d/ }]}
-          />
-        )}
-        <FormInput
-          label="Form.rules->field"
-          field="legalName"
-          v-model={state.formData.legalName}
-          placeholder="法人代表"
-          editorRef={onRef.input}
-        />
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill" style={{ marginRight: '4px' }}/>
-          <Button label="Last Input Focus" onClick={() => refs.input?.focus()} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
+import {designPage, reactive, useRefs} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, Checkbox, Form, FormCheckboxGroup, FormColorPicker, FormDatePicker, FormInput, FormItem, FormRadioGroup, FormRate, FormSelect, FormSlider, FormTimePicker, FormToggle, Icon, Input, InputNumber, Radio, Segment, SegmentGroup, SelectOption, Tooltip} from "../../../../packages";
+import {PlainObject} from "plain-utils/utils/event";
+import {pick} from "../../../../packages/utils/pick";
+
+export const demo01 = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form
+  });
+
+  const state = reactive({
+    formData: {
+      field1: '111',
+      field2: '222',
+      field11: 25,
+    } as any,
+    disabled: undefined as undefined | boolean,
+    showFlag: true,
+    size: 'small' as any,
+  });
+
+  const { formData } = state;
+
+  const levelData = [
+    { levelName: '一级', code: '1' },
+    { levelName: '二级', code: '2' },
+    { levelName: '三级', code: '3' },
+  ];
+
+  const treeData = [
+    {
+      id: '1',
+      name: '一级 1',
+      subs: [
+        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
+          id: '1-' + index,
+          name: '二级 1-' + index,
+          subs: [{
+            id: `1-${index}-1`,
+            name: `三级 1-${index}-1`
+          }]
+        })))
+      ]
+    }, {
+      id: '2',
+      name: '一级 2',
+      subs: [
+        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
+          id: '2-' + index,
+          name: '二级 2-' + index,
+          subs: [{
+            id: `2-${index}-1`,
+            name: `三级 2-${index}-1`
+          }]
+        })))
+      ]
+    }, {
+      id: '3',
+      name: '一级 3',
+      subs: [{
+        id: '3-1',
+        name: '二级 3-1',
+        subs: [{
+          id: '3-1-1',
+          name: '三级 3-1-1'
+        }, {
+          id: '3-1-2',
+          name: '三级 3-1-2'
+        }]
+      }, {
+        id: '3-2',
+        name: '二级 3-2',
+        subs: [{
+          id: '3-2-1',
+          name: '三级 3-2-1'
+        }]
+      }]
+    }];
+
+  async function saveValidate() {
+    await refs.form!.validate();
+    $message.success('校验通过');
+  }
+
+  return () => (
+    <DemoRow title={'表单组件'}>
+      <div>
+        <Form ref={onRef.form} modelValue={formData} disabled={state.disabled} singleColumnCenter size={state.size}>
+          <FormItem label="大小尺寸">
+            <SegmentGroup v-model={state.size}>
+              <Segment label="Mini" val="mini"/>
+              <Segment label="Small" val="small"/>
+              <Segment label="Normal" val="normal"/>
+              <Segment label="Large" val="large"/>
+            </SegmentGroup>
+          </FormItem>
+          <FormInput v-model={formData.field1} placeholder={'请输入文本'} label={'普通文本框'} field={'field1'} required/>
+          <FormInput v-model={formData.field2} placeholder={'请输入文本'} label={'普通文本框'} field={'field2'} required/>
+          <FormInput v-model={formData.field2} textarea placeholder={'请输入文本域'} label={'普通文本域'} field={'field2'} required/>
+          <FormItem label={'数字框'} field={'field3'} rules={{ type: 'number', max: 100, message: '最大值100' }} required>
+            {{
+              default: () => <InputNumber v-model={formData.field3} placeholder={'请输入数字'}/>,
+              append: () => <Tooltip message={'提示'}><Icon icon={'el-icon-question'}/></Tooltip>,
+            }}
+          </FormItem>
+          <FormCheckboxGroup v-model={formData.field5} itemWidth={'50%'} label={'复选框'} field={'field5'} rules={{ min: 1, max: 3, type: 'array', message: '1-3个元素' }} required>
+            <Checkbox checkboxForAll label="全部"/>
+            <Checkbox label="大客户" val="large"/>
+            <Checkbox label="潜在客户" val="potential"/>
+            <Checkbox label="长久客户" val="long"/>
+            <Checkbox label="赢单客户" val="order"/>
+          </FormCheckboxGroup>
+          <FormSelect v-model={formData.field6} placeholder={'请选择'} label={'下拉选项'} field={'field6'} required rules={{ message: '只能选择二级', enum: ['2'] }}>
+            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
+          </FormSelect>
+          <FormSelect v-model={formData.field62} placeholder={'请选择'} multiple label={'下拉选项（多选）'} field={'field62'} required rules={{ required: true, type: 'array', min: 1, message: '最少选择一项' }}>
+            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
+          </FormSelect>
+          <FormRadioGroup v-model={formData.field9} itemWidth="33%" label={'单选按钮'} field={'field9'} required>
+            <Radio label="是" val="Y"/>
+            <Radio label="否" val="N"/>
+            <Radio label="未知" val="NO"/>
+          </FormRadioGroup>
+          <FormToggle v-model={formData.field10} label={'开关按钮'} field={'field10'} rules={{ message: '请阅读并同意使用协议', enum: [true] }}/>
+          <FormSlider v-model={formData.field11} label={'滑块'} field={'field11'} required rules={{ min: 50, type: 'number', message: '最小值50' }}/>
+          <FormInput multiple v-model={formData.field12} placeholder={'请选择'} label={'标签输入框'} field={'field12'} required rules={[{ min: 3, type: 'array', message: '最少输入3个标签' }, { max: 5, type: 'array', message: '最多5个标签' }]}/>
+          <FormRate v-model={formData.field13} label={'评分'} field={'field13'} required rules={{ min: 1, type: 'number', message: '最低1分' }}/>
+          <FormColorPicker v-model={formData.field14} placeholder={'请选择'} label={'颜色选择器'} field={'field14'} rules={{ required: true, message: '颜色不能为空' }}/>
+          <FormTimePicker v-model={formData.field15} placeholder={'请选择'} label={'时间选择'} field={'field15'} required/>
+          <FormTimePicker
+            v-model:start={formData.field17}
+            v-model:end={formData.field18}
+            range
+            label={'时间范围选择'}
+            rules={[
+              { field: 'field17', required: true },
+              { field: 'field18', required: true },
+            ]}
+          />
+          <p>{JSON.stringify(pick(formData, ['field17', 'field18']))}</p>
+          <FormDatePicker v-model={formData.field19} datetime placeholder={'请选择'} label={'日期时间选择'} field={'field19'} required/>
+
+          <FormToggle label="state.showFlag" v-model={state.showFlag}/>
+          {!!state.showFlag && (
+            <FormDatePicker
+              separate
+              v-model:start={formData.field20}
+              v-model:end={formData.field21}
+              range
+              datetime
+              label={'日期时间范围选择_2'}
+              rules={[
+                { field: 'field20', required: true },
+                { field: 'field21', required: true },
+              ]}/>
+          )}
+          <FormDatePicker v-model:start={formData.field22} v-model:end={formData.field23} range datetime label={'日期时间范围选择_1'}/>
+
+          <FormInput textarea v-model={formData.field22} label="文本域" field="field22" required/>
+          <FormItem colon={false}>
+            <Button label={'校验'} onClick={saveValidate}/>
+            <Button label={'清空校验'} onClick={() => refs.form!.clearValidate()}/>
+          </FormItem>
+          <FormItem colon={false}>
+            <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
+          </FormItem>
+        </Form>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoRequired = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+      registryCapital: { label: 'Form.rules->label', required: true },
+    },
+  });
+
+  const dynamicRequired = (formData: PlainObject | null | undefined) => {
+    return !!formData!.enterpriseName;
+  };
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormInput
+          label="FormInput.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="企业名称"
+          required
+        />
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+        />
+        <FormInput
+          label="Form.rules->label"
+          v-model={state.formData.registryCapital}
+          placeholder="注册资本"
+        />
+        <FormInput
+          label="FormItem.required有值时必填"
+          v-model={state.formData.businessNature}
+          placeholder="经营范围"
+          required={dynamicRequired}
+        />
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});
+
+
+export const demoString = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+    },
+  });
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="校验string">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormInput
+          label="FormInput.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="string,min:3,max:5"
+          required
+          rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}
+        />
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+        />
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});
+
+
+export const demoNumber = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+    },
+  });
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="校验number">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormInput
+          label="FormInput.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="number,min:3,max:5"
+          required
+          rules={{ type: 'number', min: 3, max: 5 }}
+        />
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+        />
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});
+
+
+export const demoArray = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+    },
+  });
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="校验array">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormSelect
+          label="FormSelect.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="array,min:3,max:5"
+          required
+          rules={{ type: 'array', min: 3, max: 5 }}
+          multiple
+        >
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </FormSelect>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+        />
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});
+
+
+export const demoArraystring = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+    },
+  });
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="校验arraystring">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormSelect
+          label="FormSelect.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="arraystring,min:3,max:5"
+          required
+          rules={{ type: 'arraystring', min: 3, max: 5 }}
+          multiple
+          valueType="arraystring"
+        >
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </FormSelect>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+        />
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});
+
+
+export const demoArrayjson = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+    input: Input,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    showAddress: true,
+    rules: {
+      legalName: { required: true },
+    },
+  });
+
+  const submit = async () => {
+    await refs.form?.validate();
+    $message('校验通过');
+  };
+
+  return () => (
+    <DemoRow title="校验arrayjson">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormSelect
+          label="FormSelect.required"
+          v-model={state.formData.enterpriseName}
+          placeholder="arrayjson,min:3,max:5"
+          required
+          rules={{ type: 'arrayjson', min: 3, max: 5 }}
+          multiple
+          valueType="arrayjson"
+        >
+          {{
+            default: () => <>
+              <SelectOption label="支付宝" val="alipay"/>
+              <SelectOption label="微信支付" val="wechat_pay"/>
+              <SelectOption label="财付通" val="qq_pay"/>
+              <SelectOption label="快支付" val="fast_pay"/>
+              <SelectOption label="云闪付" val="cloud_pay"/>
+              <SelectOption label="网银支付" val="net_pay"/>
+              <SelectOption label="快捷支付" val="convince_pay"/>
+              <SelectOption label="paypal" val="paypal"/>
+            </>,
+            noMatch: () => (
+              <div style={{ textAlign: 'center', padding: '8px 0' }}>
+                没有匹配数据！！！
+              </div>
+            )
+          }}
+        </FormSelect>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormInput
+            label="FormInput.rules[0].required"
+            v-model={state.formData.address}
+            placeholder="所在地"
+            required
+            rules={[{ required: true }, { pattern: /\d/ }]}
+          />
+        )}
+        <FormInput
+          label="Form.rules->field"
+          field="legalName"
+          v-model={state.formData.legalName}
+          placeholder="法人代表"
+          editorRef={onRef.input}
+        />
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill" style={{ marginRight: '4px' }}/>
+          <Button label="Last Input Focus" onClick={() => refs.input?.focus()} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});