TaxControlAppTest/page/invoiceQrcode/invoice_qrcode_product_list.js

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  DeviceEventEmitter,
  Image,
} from 'react-native';

import {List, SwipeAction} from '@ant-design/react-native';
import public_css from '../../source/css/public_css';
import {RoundingData} from '../../source/inspect/inspect';
import {ShowToast} from '../../components/rootToast/root_toast';
import invoice_qrcode_css from './invoice_qrcode_css';

export default class invoice_qrcode_product_list extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      listData: [],
      product_number_total: 0,
      amount_total: 0.0,
      tax_rate_total: 0.0,
    };
  }

  render() {
    return (
      <View style={public_css.body}>
        <View style={invoice_qrcode_css.list_view}>
          <Text style={invoice_qrcode_css.list_title_text}>产品名称</Text>
          <Text style={invoice_qrcode_css.list_title_text}>产品数量</Text>
          <Text sstyle={invoice_qrcode_css.list_title_text}>规格型号</Text>
          <Text style={invoice_qrcode_css.list_title_text}>单价</Text>
          <Text style={invoice_qrcode_css.list_title_text}>税率(%)</Text>
        </View>
        <View style={{flex: 1}}>
          <FlatList
            data={this.state.listData}
            renderItem={item => this.renderItem(item)}
          />
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-around',
            alignItems: 'center',
            height: 50,
          }}>
          <Text>共{this.state.product_number_total}个产品</Text>
          <Text>
            开票金额:{RoundingData(parseFloat(this.state.amount_total))}元
          </Text>
          <Text>
            税额:{RoundingData(parseFloat(this.state.tax_rate_total))}
          </Text>
        </View>
        <View style={[public_css.bottomStaus]}>
          <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>
      </View>
    );
  }

  componentDidMount(): void {
    //收到监听
    this.listener = DeviceEventEmitter.addListener('扫码开票', data => {
      //收到监听后想做的事情
      this.setList(data);
    });
  }

  componentWillUnmount() {
    //移除监听
    if (this.listener) {
      this.listener.remove();
    }
  }

  selectProduct = () => {
    this.setState({
      productVisible: !this.state.productVisible,
    });
  };

  //提交数据到下一步
  submitData = () => {
    if (this.state.listData.length > 0) {
      this.props.navigation.navigate('invoice_qrcode', this.state);
    } else {
      ShowToast('开票产品信息不能为空！');
    }
  };

  //加载list列表
  setList = data => {
    let numberTotal =
      parseInt(this.state.product_number_total) + parseInt(data.XMSL);
    let taxRateTotal = this.state.tax_rate_total + parseFloat(data.SE);
    let amountTotal =
      this.state.amount_total + parseFloat(data.XMJE) + parseFloat(data.SE);
    let list = this.state.listData.concat(data);
    this.setState({
      listData: list,
      amount_total: amountTotal,
      tax_rate_total: taxRateTotal,
      product_number_total: numberTotal,
    });
  };

  //加载items
  renderItem = data => (
    <SwipeAction
      autoClose
      style={{backgroundColor: 'transparent'}}
      right={this.right(data)}>
      <List.Item>
        <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
          <Text>{data.item.XMMC} </Text>
          <Text>{data.item.XMSL} </Text>
          <Text>{data.item.GGXH}</Text>
          <Text>{data.item.XMDJ}</Text>
          <Text>{data.item.SL * 100}</Text>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //左滑删除
  right = data => [
    {
      text: '删除',
      onPress: () => {
        this.deleteData(data.item);
      },
      style: {backgroundColor: 'red', color: 'white'},
    },
  ];

  //删除产品信息
  deleteData = data => {
    let listData = this.state.listData;
    let numberTotal =
      parseInt(this.state.product_number_total) - parseInt(data.XMSL);
    let taxRateTotal =
      parseFloat(this.state.tax_rate_total) - parseFloat(data.SE);
    let amountTotal =
      parseFloat(this.state.amount_total) - data.XMJE - parseFloat(data.SE);
    const prevIndex = listData.findIndex(item => item.key === data.SPBM);
    listData.splice(prevIndex, 1);
    this.setState({
      listData: listData,
      amount_total: amountTotal,
      tax_rate_total: taxRateTotal,
      product_number_total: numberTotal,
    });
  };
}