TaxControlApp/components/product/product_confirm.js

import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  DeviceEventEmitter,
  Image,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import {
  List,
  Picker,
  Provider,
  WingBlank,
  WhiteSpace,
} from '@ant-design/react-native';
import {NumberTwoDecimal, NumberTenDecimal} from '../../source/inspect/inspect';
import {RetrieveData} from '../../data/storage';
import {ToastShow} from '../toast/toast';
import public_css from '../../source/css/public_css';

export default class product_confirm extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      status: this.props.route.params.status,
      key: '',
      productName: '',
      specsModel: '',
      unit: '',
      number: '',
      price: '',
      taxRate: '',
      companyTypes: [
        {
          label: '个人',
          value: '1',
        },
        {
          label: '企业',
          value: '2',
        },
      ],
      rateData: '',
      amount: '',
      taxAmount: '',
    };
  }

  render() {
    return (
      <Provider>
        <SafeAreaView style={public_css.body}>
          <ScrollView>
            <View style={public_css.body}>
              <List>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{color: 'red', marginRight: 5}}>*</Text>
                      <Text style={{fontSize: 16}}>产品名称：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入产品名称"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      value={this.state.productName}
                      onChangeText={(text) => {
                        this.setState({
                          productName: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{fontSize: 16}}>规格型号：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入规格型号"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      value={this.state.specsModel}
                      onChangeText={(text) => {
                        this.setState({
                          specsModel: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{fontSize: 16}}>单位：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入规格型号"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      value={this.state.unit}
                      onChangeText={(text) => {
                        this.setState({
                          unit: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{fontSize: 16}}>数量：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入产品数量"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      keyboardType={'numeric'}
                      value={this.state.number}
                      onChangeText={(text) => {
                        this.numberChange(text);
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{fontSize: 16}}>单价：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入单价"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      keyboardType={'numeric'}
                      value={this.state.price}
                      onChangeText={(text) => {
                        this.priceChange(text);
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{color: 'red', marginRight: 5}}>*</Text>
                      <Text style={{fontSize: 16}}>合计：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      placeholder="请输入合计金额"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      value={this.state.amount}
                      onChangeText={(text) => {
                        this.amountChange(text);
                      }}
                    />
                  </View>
                </WingBlank>
                <Picker
                  data={this.state.rateData}
                  cols={1}
                  value={[this.state.taxRate]}
                  onChange={(value) => {
                    this.taxRateChange(value);
                  }}>
                  <List.Item arrow="horizontal" onPress={this.onPress}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{color: 'red', marginRight: 5}}>*</Text>
                      <Text style={{fontSize: 16}}>税率(%)：</Text>
                    </View>
                  </List.Item>
                </Picker>
                <WingBlank>
                  <View style={[public_css.view, public_css.lineTopBottom]}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <Text style={{color: 'red', marginRight: 5}}>*</Text>
                      <Text style={{fontSize: 16}}>税额：</Text>
                    </View>
                    <TextInput
                      style={public_css.textInputStyle}
                      editable={false}
                      value={this.state.taxAmount}
                    />
                  </View>
                </WingBlank>
              </List>
            </View>
          </ScrollView>
          <WingBlank>
            <View style={public_css.bottomStatus}>
              <TouchableOpacity
                style={[public_css.statusBtn, public_css.statusRBtn]}
                onPress={() => this.submitData()}>
                {/*<Image*/}
                {/*  source={require('../../source/img/productImg/confirm.png')}*/}
                {/*  style={{width: 32, height: 32}}*/}
                {/*/>*/}
                <Text style={{color: '#fff'}}>确定添加</Text>
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WhiteSpace />
        </SafeAreaView>
      </Provider>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    this.getProductInfo();
    await this.getTaxRate();
  }

  // 页面加载完成后获取传递的数据
  getProductInfo = () => {
    let price = this.props.route.params.data.XMDJ;
    if (price) {
      price = price.toString();
    }
    let number = this.props.route.params.data.XMSL;
    if (number) {
      number = number.toString();
    }
    let taxRate = this.props.route.params.data.SL;
    if (taxRate) {
      taxRate = taxRate.toString();
    }
    this.setState({
      key: this.props.route.params.data.key,
      productName: this.props.route.params.data.XMMC,
      specsModel: this.props.route.params.data.GGXH,
      unit: this.props.route.params.data.DW,
      price: price,
      number: number,
      taxRate: taxRate,
    });
  };

  //提交数据添加到产品列表中
  submitData = () => {
    if (this.state.productName === '') {
      ToastShow(1, '产品名称不能为空!');
      return;
    }
    // if (this.state.price === '') {
    //   ToastShow(1, '单价不能为空!');
    //   return;
    // }
    // if (this.state.number === '') {
    //   ToastShow(1, '产品数量不能为空!');
    //   return;
    // }
    if (this.state.amount === '') {
      ToastShow(1, '合计金额不能为空!');
      return;
    }
    if (this.state.taxRate.length === 0) {
      ToastShow(1, '税率不能为空!');
      return;
    }
    if (this.state.taxAmount === '') {
      ToastShow(1, '税额不能为空!');
      return;
    }
    let number = '';
    if (this.state.number !== 0 && this.state.number !== '') {
      number = this.state.number;
    }
    let price = '';
    let priceTax = '';
    if (this.state.price !== 0 && this.state.price !== '') {
      price = NumberTenDecimal(
        parseFloat(this.state.price) / (1 + parseFloat(this.state.taxRate)),
      );
      priceTax = this.state.price;
    }
    let data = {
      FPHXZ: this.props.route.params.data.FPHXZ, //发票行性质 0正常行 1折扣行 2被折扣行 必填
      SPBM: this.props.route.params.data.SPBM, //商品编码
      ZXBM: this.props.route.params.data.ZXBM, //自行编码
      YHZCBS: this.props.route.params.data.YHZCBS, //优惠政策标识 0不使用 1使用
      LSLBS: this.props.route.params.data.LSLBS, //零税率标识
      ZZSTSGL: this.props.route.params.data.ZZSTSGL, //增值税特殊管理
      XMMC: this.state.productName, //项目名称 必填
      DW: this.state.unit, //计量单位
      GGXH: this.state.specsModel, //规格型号
      XMSL: number, //项目数量
      XMDJ: price, //项目单价
      XMJE: NumberTwoDecimal(
        parseFloat(this.state.amount) -
          (parseFloat(this.state.amount) /
            (1 + parseFloat(this.state.taxRate))) *
            parseFloat(this.state.taxRate),
      ), //项目金额 不含税
      SL: this.state.taxRate, //税率 必填
      SE:
        (parseFloat(this.state.amount) / (1 + parseFloat(this.state.taxRate))) *
        this.state.taxRate, //税额 必填
      price: priceTax,
      amount: this.state.amount,
      taxAmount: this.state.taxAmount,
    };
    if (this.state.status === 1) {
      DeviceEventEmitter.emit('productInfo', data);
      this.props.navigation.navigate('invoice');
    }
    if (this.state.status === 2) {
      DeviceEventEmitter.emit('buyerInvoice', data);
      this.props.navigation.navigate('buyer_invoice');
    }
    if (this.state.status === 3) {
      DeviceEventEmitter.emit('headInvoice', data);
      this.props.navigation.navigate('invoice_head');
    }
  };

  // 加载可用税率
  getTaxRate = async () => {
    let companyInfo = JSON.parse(await RetrieveData('company'));
    if (!this.emptyString(companyInfo.availableTaxes.trim())) {
      let rates = companyInfo.availableTaxes.trim().split(',');
      let data = [];
      rates.map((tax) => {
        let status = data.some((item) => item.value === tax);
        if (!status) {
          data.push({
            value: tax,
            label: tax * 100 + '%',
          });
        }
      });
      this.setState({rateData: data});
    }
  };

  // 判断可用税率是否为空
  emptyString = (str) => {
    return str === '' || str === null ? true : false;
  };

  // 单价变化计算
  priceChange = (value) => {
    this.setState({
      price: value,
    });
    if (value === '') {
      this.setState({
        amount: '',
        taxAmount: '',
      });
      return;
    }
    let number = this.state.number;
    if (number !== '' || number > 0) {
      let amount = parseFloat(value) * parseInt(number);
      this.setState({
        amount: NumberTwoDecimal(amount).toString(),
      });
      let taxRate = this.state.taxRate;
      if (taxRate !== '' || taxRate !== null) {
        let taxAmount = amount * parseFloat(taxRate);
        this.setState({
          taxAmount: NumberTwoDecimal(taxAmount).toString(),
        });
      }
    }
  };

  // 数量变化计算
  numberChange = (value) => {
    this.setState({
      number: value,
    });
    if (value === '') {
      this.setState({
        amount: '',
        taxAmount: '',
      });
      return;
    }
    let price = this.state.price;
    if (price !== '' || price > 0) {
      let amount = parseFloat(price) * parseInt(value);
      this.setState({
        amount: NumberTwoDecimal(amount).toString(),
      });
      let taxRate = this.state.taxRate;
      if (taxRate !== '' || taxRate !== null) {
        let taxAmount = amount * parseFloat(taxRate);
        this.setState({
          taxAmount: NumberTwoDecimal(taxAmount).toString(),
        });
      }
    } else {
      let amount = this.state.amount;
      if (amount !== '' || amount > 0) {
        let price = parseFloat(amount) / parseFloat(value);
        this.setState({
          price: NumberTenDecimal(price).toString(),
        });
      }
    }
  };

  // 合计金额变化计算
  amountChange = (value) => {
    this.setState({
      amount: value,
    });
    if (value === '') {
      this.setState({
        price: '',
        taxAmount: '',
      });
      return;
    }
    let number = this.state.number;
    let price = this.state.price;
    if (number === 0 || number === '') {
      if (price === 0 || price === '') {
        let taxRate = this.state.taxRate;
        if (taxRate !== '' || taxRate !== null) {
          let taxAmount = parseFloat(value) * parseFloat(taxRate);
          this.setState({
            taxAmount: NumberTwoDecimal(taxAmount).toString(),
          });
        }
      }
    } else {
      let price = parseFloat(value) / parseFloat(number);
      this.setState({
        price: NumberTenDecimal(price).toString(),
      });
      let taxRate = this.state.taxRate;
      if (taxRate !== '' || taxRate !== null) {
        let taxAmount = parseFloat(value) * parseFloat(taxRate);
        this.setState({
          taxAmount: NumberTwoDecimal(taxAmount).toString(),
        });
      }
    }
  };

  // 税率变化计算
  taxRateChange = (value) => {
    let taxRate = '';
    if (value.length > 0) {
      taxRate = value[0];
    }
    this.setState({
      taxRate: taxRate,
    });
    let amount = this.state.amount;
    // if (amount === '') {
    //   this.setState({
    //     taxRate: '',
    //   });
    //   return;
    // }
    if (taxRate !== '' || taxRate !== null) {
      let taxAmount = parseFloat(amount) * parseFloat(taxRate);
      this.setState({
        taxAmount: NumberTwoDecimal(taxAmount).toString(),
      });
    }
  };
}