plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,311 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, CheckboxGroup, Form, FormItem, Icon, Input, InputNumber, Radio, RadioGroup, Segment, SegmentGroup, Select, SelectOption, Tooltip} from "../../../../packages";
-import './DemoFormLayout.scss';
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ form: Form });
-
-  const state = reactive({
-    formData: {} as any,
-    align: 'left',
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'单列表单'}>
-      <Form column={1} modelValue={state.formData} labelAlign={state.align as any} ref={onRef.form}>
-        <FormItem label="文本对其方式">
-          <SegmentGroup v-model={state.align}>
-            <Segment label="左对齐" val="left"/>
-            <Segment label="居中对其" val="center"/>
-            <Segment label="右对齐" val="right"/>
-          </SegmentGroup>
-        </FormItem>
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'} onClick={() => refs.form?.validate()}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ form: Form });
-
-  const state = reactive({
-    formData: {} as any,
-    align: 'left' as any
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'单列居中表单(label不占用宽度)'}>
-      <div>
-        <Form column={1} modelValue={state.formData} singleColumnCenter labelAlign={state.align} ref={onRef.form}>
-          <FormItem label="文本对其方式">
-            <SegmentGroup v-model={state.align}>
-              <Segment label="左对齐" val="left"/>
-              <Segment label="居中对其" val="center"/>
-              <Segment label="右对齐" val="right"/>
-            </SegmentGroup>
-          </FormItem>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'}>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'}>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'} onClick={() => refs.form?.validate()}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-    align: 'left' as any
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'双列表单'}>
-      <div>
-        <Form column={2} modelValue={state.formData} labelAlign={state.align}>
-          <FormItem label="文本对其方式">
-            <SegmentGroup v-model={state.align}>
-              <Segment label="左对齐" val="left"/>
-              <Segment label="居中对其" val="center"/>
-              <Segment label="右对齐" val="right"/>
-            </SegmentGroup>
-          </FormItem>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'} block>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'} block>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'三列表单'}>
-      <div>
-        <Form column={3} modelValue={state.formData}>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'} block>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'} block>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});