ProcessManagement.js 4.3 KB
import React, {Component} from 'react';
import {
    View,
    ScrollView
} from "react-native";
import {width} from "../utils/getSize";
import PickerView from "../components/PickerView";
import FiveStarView from "../components/FiveStarView";
import SliderView from "../components/SliderView";
import TextSingleEditView from "../components/TextSingleEditView";
import TextMultiEditView from "../components/TextMultiEditView";
import PhoneEditView from "../components/PhoneEditView";
import NumberEditView from "../components/NumberEditView";
import LocationTextView from "../components/LocationTextView";
import CalculatorView from "../components/CalculatorView";
import TabDetailView from "../components/TabDetailView";

export default class ProcessManagement extends Component {

    constructor(props) {
        super(props);
        this.state={
            amountData: {name: '加班时长', type: 'NUMBER', uom: '小时'},
            querySwitch: 'Common',
            amount: 0,// 金额
        };
    }

    componentWillMount() {
        //设置头部
        this.props.navigation.setParams({
            isBack:true,
            title: '组件'
        });
    }

    renderDividerView() {
        return(
            <View style={{width: width, height: 5, backgroundColor: 'rgba(245, 245, 245, 1)'}}/>
        )
    }

    performCalculate() {
        this.refs.calculate.calculateValue(this.state.amount)
    }

    onChangeCalculate = (text) => {
        console.log("=--200==-", text);
    }

    onChangeAmount = (amount) => {
        this.setState({
            amount: amount
        }, () => this.performCalculate())
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'white'}}>
                <ScrollView
                    horizontal={false}
                >
                    <PickerView
                        attrData={{name: "日期", type: 'DATE', data:{placeholder: '请选择'}}}
                    />
                    {this.renderDividerView()}
                    <PickerView
                        attrData={{name: "日期区间", type: 'PERIOD', data:{beginPlaceholder: '请选择请假开始日期', endPlaceholder: '请选择请假结束日期'}}}
                    />
                    {this.renderDividerView()}
                    <PickerView
                        attrData={{name: "省市区", type: 'CITY', data:{placeholder: '请选择'}}}
                    />
                    {this.renderDividerView()}
                    <FiveStarView
                        attrData={{name: "评分", }}
                    />
                    {this.renderDividerView()}
                    <SliderView
                        attrData={{name: "滑块", data:{}}}
                    />
                    {this.renderDividerView()}
                    <NumberEditView
                        data={this.state.amountData}
                        attrData={{name: "数字输入", data:{placeholder: 'test'}}}
                        onChangeText={this.onChangeAmount}
                    />
                    {this.renderDividerView()}
                    <CalculatorView
                        ref={'calculate'}
                        attrData={{name: "计算公式", data:{placeholder: 'test'}}}
                        editable={false}
                        onChangeText={this.onChangeCalculate}
                    />
                    {/*<TabDetailView/>*/}
                    {this.renderDividerView()}
                    <TextSingleEditView
                        attrData={{name: "单行输入", data:{placeholder: 'test'}}}
                    />
                    {this.renderDividerView()}
                    <PhoneEditView
                        attrData={{name: "电话", data:{placeholder: 'test'}}}
                    />
                    {this.renderDividerView()}
                    <TextMultiEditView
                        attrData={{name: "多行输入", data:{placeholder: 'test'}}}
                    />
                    {this.renderDividerView()}
                    <LocationTextView
                        attrData={{}}
                    />
                    <TabDetailView
                        attrData={{data:{placeholder: 'test', buttonText: '添加'}}}
                    />
                </ScrollView>
            </View>
        );
    }
}