TaxControlApp/page/invoice/invoice_product_list_add.js

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  FlatList,
  PixelRatio,
  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 invoice_css from './invoice_css';
import { ToastShow } from "../../components/toast/toast";

export default class invoice_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_css.list_view}>*/}
        {/*  <Text style={invoice_css.list_title_text}>产品名称</Text>*/}
        {/*  <Text style={invoice_css.list_title_text}>产品数量</Text>*/}
        {/*  <Text sstyle={invoice_css.list_title_text}>规格型号</Text>*/}
        {/*  <Text style={invoice_css.list_title_text}>单价</Text>*/}
        {/*  <Text style={invoice_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)).replace(
              /(\d)(?=(\d{3})+(?:\.\d+)?$)/g,
              '$1,',
            )}
            元
          </Text>
          <Text>
            税额:{RoundingData(parseFloat(this.state.tax_rate_total))}
          </Text>
        </View>
        <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>
      </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_customer_information',
        this.state,
      );
    } else {
      ToastShow(1, '编辑成功!');
    }
  };

  //加载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>*/}
        {/*<View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5}}>*/}
        {/*  <View style={{flexDirection: 'row'}}>*/}
        {/*    <Text>金额合计：</Text>*/}
        {/*    <Text>{data.item.XMSL} </Text>*/}
        {/*  </View>*/}
        {/*  <View style={{flexDirection: 'row'}}>*/}
        {/*    <Text>税额合计：</Text>*/}
        {/*    <Text>{data.item.XMSL} </Text>*/}
        {/*  </View>*/}
        {/*</View>*/}
        <View>
          <View>
            <Text style={{fontSize: 18, fontWeight: '900'}}>
              {data.item.XMMC}
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 5,
            }}>
            <View>
              <Text style={{margin: 5}}>规格：{data.item.GGXH}</Text>
              <Text style={{margin: 5}}>税率：{data.item.SL * 100}</Text>
              <Text style={{margin: 5}}>税额:{data.item.SE}</Text>
            </View>
            <View>
              <Text style={{margin: 5}}>单价：{data.item.XMDJ}</Text>
              <Text style={{margin: 5}}>数量：{data.item.XMSL}</Text>
              <Text style={{margin: 5}}>
                小计:
                {RoundingData(data.item.XMSL * parseFloat(data.item.XMDJ))
                  .toString()
                  .replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,')}
              </Text>
            </View>
          </View>
        </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,
    });
  };
}

const styles = StyleSheet.create({
  buttonView: {
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  //通用按钮样式
  button: {
    marginTop: 5,
    width: Dimensions.get('window').width * 0.8,
    height: 34,
    borderRadius: 10,
    backgroundColor: '#1874CD',
    justifyContent: 'center',
    alignItems: 'center',
  },
  //通用按钮样式
  buttonText: {
    textAlign: 'center',
    color: 'white',
  },

  inputView: {
    padding: 5,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    display: 'flex',
  },

  view: {
    flexDirection: 'row',
    height: 34,
    width: Dimensions.get('window').width * 0.8,
  },
  //通用textInput样式
  text: {
    lineHeight: 34,
    fontSize: 14,
  },
  //通用textInput样式
  lineTopBottom: {
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)',
  },

  textInputStyle: {
    marginRight: 10,
    marginLeft: 20,
    fontSize: 14,
    marginTop: 4,
  },
});