plain-design 1.0.0-beta.22 → 1.0.0-beta.23

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

@@ -1,516 +1,516 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Checkbox, DatePicker, Form, FormItem, Input, Select, SelectOption, TimePicker} from "../../../../packages";
-import {PlainObject} from "plain-utils/utils/event";
-
-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 | 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>
-        <FormItem label="FormItem.required" required field="enterpriseName">
-          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
-        </FormItem>
-        {/*{!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <FormItem label="Form.rules->label" field="registryCapital">
-          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
-        </FormItem>
-        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
-          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
-        </FormItem>
-        <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>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}>
-          <Input v-model={state.formData.enterpriseName} placeholder="string,min:3,max:5"/>
-        </FormItem>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'number', min: 3, max: 5 }}>
-          <Input v-model={state.formData.enterpriseName} placeholder="number,min:3,max:5"/>
-        </FormItem>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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 demoDate = 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="校验date">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'date', min: '2022-09-04', max: '2022-10-05' }}>
-          <DatePicker v-model={state.formData.enterpriseName} placeholder="date,min:2022-09-04,max:2022-10-05"/>
-        </FormItem>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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 demoTime = 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="校验time">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'time', min: '20:00:00', max: '22:30:00' }}>
-          <TimePicker v-model={state.formData.enterpriseName} placeholder="time,min:20:00:00,max:22:30:00"/>
-        </FormItem>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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 demoDatetime = 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="校验datetime">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'datetime', min: '2022-09-04 20:00:00', max: '2022-10-05 22:30:00' }}>
-          <DatePicker datetime v-model={state.formData.enterpriseName} placeholder="datetime,min:2022-09-04 20:00:00,max:2022-10-05 22:30:00"/>
-        </FormItem>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'array', min: 3, max: 5 }}>
-          <Select multiple v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
-            <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"/>
-          </Select>
-        </FormItem>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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: {
-      enterpriseName: '',
-    } 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>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arraystring', min: 3, max: 5 }}>
-          <Select multiple valueType="arraystring" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
-            <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"/>
-          </Select>
-        </FormItem>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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,
-  });
-
-  const state = reactive({
-    formData: {
-      enterpriseName: '',
-    } 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>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arrayjson', min: 3, max: 5 }}>
-          <Select multiple valueType="arrayjson" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
-            <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"/>
-          </Select>
-        </FormItem>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <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 demoFormRules = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    rules: {
-      legalName: { required: true },
-      registryCapital: { 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="FormItem.required" required field="enterpriseName">
-          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
-        </FormItem>
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <FormItem label="Form.rules->label" field="registryCapital">
-          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
-        </FormItem>
-        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
-          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
-        </FormItem>
-
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
+import {designPage, reactive, useRefs} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, Checkbox, DatePicker, Form, FormItem, Input, Select, SelectOption, TimePicker} from "../../../../packages";
+import {PlainObject} from "plain-utils/utils/event";
+
+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 | 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>
+        <FormItem label="FormItem.required" required field="enterpriseName">
+          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
+        </FormItem>
+        {/*{!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <FormItem label="Form.rules->label" field="registryCapital">
+          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
+        </FormItem>
+        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
+          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
+        </FormItem>
+        <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>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}>
+          <Input v-model={state.formData.enterpriseName} placeholder="string,min:3,max:5"/>
+        </FormItem>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'number', min: 3, max: 5 }}>
+          <Input v-model={state.formData.enterpriseName} placeholder="number,min:3,max:5"/>
+        </FormItem>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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 demoDate = 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="校验date">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'date', min: '2022-09-04', max: '2022-10-05' }}>
+          <DatePicker v-model={state.formData.enterpriseName} placeholder="date,min:2022-09-04,max:2022-10-05"/>
+        </FormItem>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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 demoTime = 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="校验time">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'time', min: '20:00:00', max: '22:30:00' }}>
+          <TimePicker v-model={state.formData.enterpriseName} placeholder="time,min:20:00:00,max:22:30:00"/>
+        </FormItem>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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 demoDatetime = 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="校验datetime">
+      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
+        <FormItem label="所在地">
+          <Checkbox v-model={state.showAddress} label="所在地"/>
+        </FormItem>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'datetime', min: '2022-09-04 20:00:00', max: '2022-10-05 22:30:00' }}>
+          <DatePicker datetime v-model={state.formData.enterpriseName} placeholder="datetime,min:2022-09-04 20:00:00,max:2022-10-05 22:30:00"/>
+        </FormItem>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'array', min: 3, max: 5 }}>
+          <Select multiple v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
+            <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"/>
+          </Select>
+        </FormItem>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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: {
+      enterpriseName: '',
+    } 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>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arraystring', min: 3, max: 5 }}>
+          <Select multiple valueType="arraystring" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
+            <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"/>
+          </Select>
+        </FormItem>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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,
+  });
+
+  const state = reactive({
+    formData: {
+      enterpriseName: '',
+    } 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>
+        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arrayjson', min: 3, max: 5 }}>
+          <Select multiple valueType="arrayjson" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
+            <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"/>
+          </Select>
+        </FormItem>
+        <div style={{ textAlign: 'right' }}>
+          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
+        </div>
+        {!!state.showAddress && (
+          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
+            <Input v-model={state.formData.address} placeholder="所在地"/>
+          </FormItem>
+        )}
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <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 demoFormRules = designPage(() => {
+
+  const { refs, onRef } = useRefs({
+    form: Form,
+  });
+
+  const state = reactive({
+    formData: {} as any,
+    rules: {
+      legalName: { required: true },
+      registryCapital: { 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="FormItem.required" required field="enterpriseName">
+          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
+        </FormItem>
+        <FormItem label="Form.rules->field" field="legalName">
+          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
+        </FormItem>
+        <FormItem label="Form.rules->label" field="registryCapital">
+          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
+        </FormItem>
+        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
+          <Input v-model={state.formData.businessNature} placeholder="经营范围"/>
+        </FormItem>
+
+        <FormItem colon={false}>
+          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
+          <Button label="Commit" onClick={submit} mode="fill"/>
+        </FormItem>
+      </Form>
+    </DemoRow>
+  );
+});