TaxBackApp/page/invoiceInquiry/invoice_inquiry_completed.js

import React, {Component} from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  FlatList,
  RefreshControl,
} from 'react-native';
import {List, SwipeAction, Modal} from '@ant-design/react-native';
import moment from 'moment';

import {RetrieveData} from '../../data/storage';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import invoice_inquiry_css from './invoice_inquiry_css';

let pageNo = 1; //当前第几页
let totalPage = 5; //总的页数
export default class invoice_inquiry_completed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      status: 0,
      search_data: '',
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
      isOpen: false,
      visible1: false,
    };
  }

  render() {
    return (
      <View style={invoice_inquiry_css.container}>
        <FlatList
          data={this.state.listData}
          renderItem={item => this.renderItem(item)}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#B7B7B7']} //此颜色无效
              tintColor={'#B7B7B7'}
              titleColor={'#B7B7B7'} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.initData();
              }}
            />
          }
          ListFooterComponent={this._renderFooter.bind(this)}
          onEndReached={this._onEndReached.bind(this)}
          onEndReachedThreshold={0.1}
        />
      </View>
    );
  }

  //显示红冲确认信息
  showAlert = data => {
    Modal.alert('发票红冲', '是否确认红冲此发票', [
      {
        text: '取消',
        // onPress: () => console.log('cancel'),
        style: 'cancel',
      },
      {text: '确认', onPress: () => this.invoice_red_rush(data)},
    ]);
  };

  //初始化数据
  initData = () => {
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
      status: 0,
    });
    pageNo = 1;
    this.getSearchData();
  };

  //上拉加载
  _onEndReached() {
    if (this.state.showFoot === 0) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 1});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 2});
        //获取数据
        this.getSearchData();
      }
    }
  }

  //列表尾部显示
  _renderFooter() {
    if (this.state.showFoot === 1) {
      return (
        <View
          style={{
            height: 30,
            alignItems: 'center',
            justifyContent: 'flex-start',
          }}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5,
            }}>
            没有更多数据了
          </Text>
        </View>
      );
    } else if (this.state.showFoot === 2) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <Text />
        </View>
      );
    }
  }

  //页面加载完后显示数据
  componentDidMount(): void {
    this.props.children.getCompletedRef(this);
    this.getSearchData();
  }

  //页面销毁
  componentWillUnmount(): void {
    pageNo = 1;
  }

  //获取查询数据
  getSearchData = async () => {
    let hongchongFlag = '';
    if (this.props.children.state.hongchongFlag != undefined) {
      if (this.props.children.state.hongchongFlag[0] != 2) {
        hongchongFlag = this.props.children.state.hongchongFlag[0];
      }
    }
    let beginTime = '';
    let endTime = '';
    if (this.props.children.state.beginDateTime != undefined) {
      beginTime = moment(this.props.children.state.beginDateTime).format(
        'YYYY-MM-DD',
      );
      beginTime = beginTime + ' 00:00:00';
    }
    if (this.props.children.state.endDateTime != undefined) {
      endTime = moment(this.props.children.state.endDateTime).format(
        'YYYY-MM-DD',
      );
      endTime = endTime + ' 23:59:59';
    }
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/sys/invoiceInfo/findPage';
      GetDataPost(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          pageNum: pageNo,
          pageSize: 10,
          status: 3,
          invoiceDateBegin: beginTime,
          invoiceDateEnd: endTime,
          customerName: this.props.children.state.customerName,
          customerEntTaxId: this.props.children.state.customerEntTaxId,
          invoiceCode: this.props.children.state.invoiceCode,
          invoiceNumber: this.props.children.state.invoiceNumber,
          hongchongFlag: hongchongFlag,
        },
        false,
        2,
      ).then(res => {
        totalPage = res.data.pages;
        this.setList(res.data.records);
      });
    }
  };

  //设置列表list数据
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].invoiceId,
      invoiceCode: data[i].invoiceCode,
      invoiceNumber: data[i].invoiceNumber,
      invoiceDate: data[i].invoiceDate,
      customerName: data[i].customerName,
      customerEntTaxId: data[i].customerEntTaxId,
      totalAmountTaxes: data[i].totalAmountTaxes,
      invoiceReqFlowNo: data[i].invoiceReqFlowNo,
      hongchongFlag: data[i].hongchongFlag,
      pdfUrl: data[i].pdfUrl,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //设置列表list数据
  renderItem = data => (
    <SwipeAction>
      <List.Item
        onLongPress={() => {
          this.showAlert(data.item);
        }}
        onPress={() => this.see_invoice(data.item.pdfUrl)}>
        <Text style={invoice_inquiry_css.itemTop}>
          {data.item.customerName}
        </Text>
        <View style={invoice_inquiry_css.itemView}>
          <Text style={invoice_inquiry_css.itemViewName}>
            发票代码:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.invoiceCode}
            </Text>
          </Text>
          <Text style={invoice_inquiry_css.itemViewName}>
            企业税号:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.customerEntTaxId}
            </Text>
          </Text>
        </View>
        <View style={invoice_inquiry_css.itemView}>
          <Text style={invoice_inquiry_css.itemViewName}>
            发票号码:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.invoiceNumber}
            </Text>
          </Text>
          <Text style={invoice_inquiry_css.itemViewName}>
            是否可红冲:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.hongchongFlag ? '是' : '否'}
            </Text>
          </Text>
        </View>
        <View style={invoice_inquiry_css.itemView}>
          <Text style={invoice_inquiry_css.itemViewName}>
            价税合计:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.totalAmountTaxes
                .toString()
                .replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,')}
            </Text>
          </Text>
          <Text style={invoice_inquiry_css.itemViewName}>
            开票日期:
            <Text style={invoice_inquiry_css.itemViewText}>
              {data.item.invoiceDate}
            </Text>
          </Text>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //发票红冲
  invoice_red_rush = async data => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/sys/hongchongInfo/save';
      GetDataPost(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          oriInvoiceReqFlowNo: data.invoiceReqFlowNo,
        },
        false,
        1,
      ).then(res => {
        if (res.code == 0) {
          ShowToast('发票红冲申请提交成功！');
          this.initData();
        } else {
          ShowToast('发票红冲申请提交失败！');
          this.initData();
        }
      });
    }
  };

  //发票在线查看
  see_invoice = data => {
    this.props.children.props.navigation.navigate('preview_pdf', data);
  };
}