tuns-mobile-components
Version:
Tuns Design UI
548 lines (531 loc) • 15.4 kB
JavaScript
import React from "react";
import { Toast } from "antd-mobile";
import Form from "../../../components/mobile/src/form";
import Button from "../../../components/mobile/src/button";
import FormInput from "../../../components/mobile/src/form/input";
import SelectButton from "../../../components/mobile/src/form/selectbutton";
import FormStepper from "../../../components/mobile/src/form/stepper";
import TeamPicker from "../../../components/mobile/src/form/teampick";
import PickerModal from "../../../components/mobile/src/form/teampick/pick";
import FormModal from "../../../components/mobile/src/form/modal";
import FormModalSelect from "../../../components/mobile/src/form/modal/select";
import FormDatePicker from "../../../components/mobile/src/form/datepicker";
import FormPick from "../../../components/mobile/src/form/picker";
import { data1, data2, data3 } from "./pickTestData";
import Agreement from "../../../components/mobile/src/agreement";
import FormDrawer from "../../../components/mobile/src/form/drawer";
import FormDrawerSelect from "../../../components/mobile/src/form/drawer/select";
import FormAccordion from "../../../components/mobile/src/form/accordion";
import FormUpload from "../../../components/mobile/src/form/upload";
import FormCheckboxGroup from "../../../components/mobile/src/form/checkboxgroup";
import "./index.less";
import { professionData, checkboxOptions } from "./demoData";
// const demoRules = {
// beginUnitLabel: "",
// beginVal: "1",
// beginOper: "ge",
// beginUnit: "",
// beginOperLabel: "大于等于",
// endUnitLabel: "",
// endVal: "3",
// endOper: "le",
// endUnit: "",
// endOperLabel: "小于等于",
// };
const { Group } = Form;
const modalSelectData = [
{
id: "001",
value: "1",
name: "计划一33",
support: true,
},
{
id: "002",
value: "2",
name: "计划二",
support: false,
},
{
id: "003",
value: "3",
name: "计划三",
},
{
id: "004",
value: "4",
name: "计划四1",
},
{
id: "005",
value: "5",
name: "计划五23",
},
{
id: "006",
value: "6",
name: "计划六",
},
{
id: "007",
value: "7",
name: "计划七",
},
];
class formDemo extends React.Component {
onSubmit = form => {
form.validateFields((error, value) => {
console.log(error, value); // eslint-disable-line
});
};
submitRender = form => {
return (
<div className="demo-form-root-submit">
<Button
className="demo-form-root-submit-btn"
onClick={this.onSubmit.bind(this, form)}
type="primary"
isGradual
>
提交
</Button>
</div>
);
};
render() {
return (
<div className="demo-form-root">
<Form submitRender={this.submitRender}>
<FormInput
title="姓名"
name="name"
placeholder="请输入姓名"
moneyKeyboardAlign="right"
rules={[
{
required: true,
message: "姓名必须输入",
},
]}
/>
<Group title="基础信息" classname="demo-form-root-group">
<FormInput
title="年龄"
name="age"
placeholder="请输入年龄"
defaultValue="22"
type="number"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
/>
</Group>
<Group
title={
<div style={{ display: "flex", alignItems: "center" }}>
基础信息
<div style={{ fontSize: "40px", color: "#ccc" }}>
(卡片头附加信息)
</div>
</div>
}
classname="demo-form-root-group"
headerExtra={<div style={{ marginRight: "20px" }}>more</div>}
>
<FormInput
title="年龄"
name="age2"
placeholder="请输入年龄"
defaultValue="22"
type="number"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
/>
</Group>
<Group title="基础信息2" classname="demo-form-root-group">
<SelectButton
title="是否有医保"
name="health"
data={[
{ id: "s1", value: "01", name: "是" },
{ id: "s2", value: "02", name: "否" },
]}
defaultValue="01"
rules={[
{
required: true,
message: "医保必选",
},
]}
/>
<SelectButton
title="是否有社保"
name="social"
data={[
{ id: "s1", value: "01", name: "是" },
{ id: "s2", value: "02", name: "否" },
{ id: "s3", value: "03", name: "分" },
{ id: "s4", value: "04", name: "人" },
]}
rules={[
{
required: true,
message: "社保必选",
},
]}
/>
</Group>
<FormStepper
title="投保份数"
name="number"
defaultValue={1}
min="1"
max="3"
step="1"
showNumber
rules={[
{
required: true,
message: "选择份数",
},
]}
/>
<FormModal
name="plan"
title="职业类别"
// defaultValue="1"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<FormModalSelect data={modalSelectData} />
</FormModal>
<FormModal
name="plan222"
title="职业类别"
// defaultValue="1"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<div
style={{
height: "50vh",
backgroundColor: "red",
}}
>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</FormModal>
<FormModal
name="plan2"
title="职业类别"
buttonText="修改"
placeholder="请选择"
// defaultValue="1"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<FormModalSelect data={modalSelectData} />
</FormModal>
<FormModal
name="plan3"
title="职业类别2"
defaultValue="2"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<FormModalSelect data={modalSelectData} />
</FormModal>
<FormDrawer
name="plan3"
title="职业类别3"
defaultValue="010205"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<FormDrawerSelect data={professionData} />
</FormDrawer>
<FormPick
title="有关联数据"
pickTitle="保障计划"
data={data1}
cascade
name="test1"
rules={[
{
required: true,
message: "test1必须输入",
},
]}
/>
<FormPick
title="无关联单条数据"
data={data2}
name="test2"
rules={[
{
required: true,
message: "test2必须输入",
},
]}
/>
<FormPick
title="无关联多条数据"
data={data3}
name="test3"
rules={[
{
required: true,
message: "test3必须输入",
},
]}
/>
<FormDatePicker
name="insBegin"
title="保险起期"
mode="datetime"
minDate={new Date(1970, 1, 1, 0, 0, 0)}
maxDate={new Date()}
defaultValue={new Date()}
rules={[
{
required: true,
message: "请选择保险起期",
},
]}
/>
<FormAccordion
name="check"
check
data={[
{
id: "1",
title: "保险条例1",
content: "111",
value: "reg1",
},
{
id: "2",
title: "保险条例2",
content: "222",
value: "reg2",
money: "十万元",
},
{
id: "3",
title: "保险条例3",
content: "333",
value: "reg3",
},
]}
rules={[
{
required: true,
message: "请选择保险权益",
},
]}
defaultValue="reg1"
/>
<TeamPicker
name="teampick"
title="团险选择项"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<FormModalSelect data={modalSelectData} />
</TeamPicker>
<TeamPicker
name="teampick1"
title="团险选择项1"
defaultValue="2"
// onSuperChange={(form, value, change) => { if (!value) { change() } }}
detailValue="内容内容内容内容内容内容内容内容内容内容内容内容"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<PickerModal data={data1} />
</TeamPicker>
<TeamPicker
name="teampick2"
title="团险选择项2"
placeholder="请选择123"
rules={[
{
required: true,
message: "年龄必须输入",
},
]}
>
<PickerModal
data={data1}
disvalues={["2"]}
title="内容内容内容内容内容内容内容内容内容内容内容内容"
/>
</TeamPicker>
<FormAccordion
name="group"
check
group
data={[
{
id: "1",
value: "reg8",
data: [
{
id: "11",
title: "组合11",
content: "啊大大非官方",
},
{
id: "12",
title: "组合12",
content: "色粉胜多负少",
},
],
},
{
id: "2",
value: "reg9",
data: [
{
id: "21",
title:
"雇主责任-雇员发生工伤事故10万雇主责任雇主责任雇主责任雇主责任",
content:
"若选择正确车型后带出来的核定座位数与行驶证副本的核定载人数不一致，此处可根据行驶证副本的核定载人数进行修改。",
},
{
id: "22",
title:
"雇主责任-雇员发生工伤事故10万（死亡/伤残）+1万(医疗）/人",
content: "222222222-1",
},
],
},
]}
rules={[
{
required: true,
message: "请选择组合保险权益",
},
]}
defaultValue="reg8"
/>
<Group title="文件操作" classname="demo-form-root-group">
<FormUpload
name="file1"
rules={[
{
required: true,
message: "文件必须上传",
},
]}
title="照片/图片"
token="d43326be54fbaad61dae8230690def2a"
businessType="cache"
businessNumber="group"
onSuperChange={value => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
</Group>
<Agreement
onChange={checked => {
// eslint-disable-next-line no-console
console.log(checked);
}}
text="本人承诺投保信息的真实性，已认证阅读 《投保须知》 《产品条款》 并同意上述协议约定"
eventText={{
"《投保须知》": () => Toast.info("投保须知"),
"《产品条款》": () => Toast.info("产品条款"),
}}
/>
<FormCheckboxGroup
name="checkboxGroup"
title="水果"
options={checkboxOptions}
defaultValue={["2"]}
onChange={() => {}}
disabled={false}
multiple={false}
flip
rules={[
(rule, value, callback) => {
const errors = [];
if (value.length === 0) {
errors.push(new Error(`请选择水果`, rule.field));
}
callback(errors);
},
]}
/>
</Form>
</div>
);
}
}
export default formDemo;