TaxControlApp/page/tax/invoiceStock/invoice_stock.js

import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  SafeAreaView,
  FlatList,
  ActivityIndicator,
  Alert,
  RefreshControl,
} from 'react-native';
import {
  Drawer,
  List,
  Provider,
  SwipeAction,
  Picker,
} from '@ant-design/react-native';
import public_css from '../../../source/css/public_css';
import {RetrieveData} from '../../../data/storage';
import {RequestNetwork} from '../../../data/encryption';
import {ToastShow} from '../../../components/toast/toast';
import {InvoiceType, Distribute} from '../../../utils/config';
import {CleanAll} from '../../../components/abnormalMessage/abnormal_message';
import Spinner from 'react-native-loading-spinner-overlay';
import loading_css from '../../../source/css/loading_css';

export default class invoice_stock extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      isShowSearch: false,
      beginDate: '',
      endDate: '',
      beginDateString: '',
      endDateString: '',
      invoiceList: [],
      isRefreshing: false,
      pageNum: 1, //当前页码
      pageSize: 10, //每页数量
      totalPage: 10, //总页数
      showFoot: 0,
      monthDate: {},
      invoiceTypeList: InvoiceType(),
      invoiceType: '1',
      distributeStatusList: Distribute(),
      distributeStatus: '0',
      spinner: false,
      isNextPage: false, // 是否有下一页
      isPreviousPage: false, // 是否有上一页
    };
  }

  render() {
    let draw = (
      <View style={public_css.body}>
        <View style={{flex: 1}}>
          <Picker
            value={[this.state.invoiceType]}
            data={this.state.invoiceTypeList}
            cols={1}
            onChange={(select) => this.invoiceTypeChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              发票类型：
            </List.Item>
          </Picker>
        </View>
        <View style={public_css.bottomStatus}>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderRadius: 30,
                borderColor: '#8B8B8B',
                width: 100,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.searchDataEmpty();
              }}>
              <Text style={{color: '#262626'}}>重置</Text>
            </TouchableOpacity>
          </View>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              style={{
                borderWidth: 1,
                borderRadius: 30,
                borderColor: '#2A67FE',
                backgroundColor: '#2A67FE',
                width: 100,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => this.searchData()}>
              <Text style={{color: '#FFFFFF'}}>查询</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
    return (
      <Provider>
        <SafeAreaView style={public_css.body}>
          <Spinner
            visible={this.state.spinner}
            textContent={'Loading...'}
            textStyle={loading_css.spinnerTextStyle}
          />
          <Drawer
            sidebar={draw}
            position="right"
            open={this.state.isShowSearch}
            drawerRef={(el) => (this.drawer = el)}
            onOpenChange={(open) => this.openStatus(open)}
            drawerBackgroundColor="#ccc"
            drawerWidth={300}>
            <FlatList
              data={this.state.invoiceList}
              renderItem={(item) => this.renderItem(item)}
              refreshControl={
                <RefreshControl
                  title={'加载中...'}
                  colors={['#B7B7B7']} //此颜色无效
                  tintColor={'#B7B7B7'}
                  titleColor={'#B7B7B7'} //只有ios有效
                  refreshing={this.state.isRefreshing}
                  onRefresh={() => this.onRefresh()}
                />
              }
              ListFooterComponent={() => this.renderFooter()}
            />
          </Drawer>
        </SafeAreaView>
      </Provider>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    this.setLoadingStatus(true);
    await this.getDistributeList();
  }

  //判断是否点击了查询
  shouldComponentUpdate(
    nextProps: Readonly<P>,
    nextState: Readonly<S>,
    nextContext: any,
  ): boolean {
    if (nextProps.route.params != undefined) {
      if (nextProps.route.params.isShow) {
        this.setState({
          isShowSearch: true,
        });
        this.drawer.openDrawer();
        this.props.navigation.setParams({
          isShow: false,
        });
      }
    }
    return true;
  }

  // 获取发票分发列表
  getDistributeList = async () => {
    const company = JSON.parse(await RetrieveData('company'));
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && account) {
      const url = '/sys/invoiceExt/purchaseQuery';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCategory: this.state.invoiceType,
        },
        false,
        2,
      );
      if (response) {
        console.log(response);
        if (response.code === 0) {
          this.setLoadingStatus(false);
          if (response.data.purchaseDetailVOs.length > 0) {
            this.setState({
              isRefreshing: false,
              totalPage: response.data.purchaseDetailVOs.length,
            });
            this.setList(response.data.purchaseDetailVOs);
          } else {
            this.setState({
              showFoot: 0,
              isRefreshing: false,
            });
          }
        } else {
          this.setLoadingStatus(false);
          await this.abnormalMessage(response);
        }
      }
    }
  };

  //设置抬头列表
  setList = (data) => {
    let invoiceType = '';
    if (data[0].invoiceCategory === 1) {
      invoiceType = '增值税普通电子发票';
    }
    if (data[0].invoiceCategory === 2) {
      invoiceType = '增值税电子专用发票';
    }
    if (data[0].invoiceCategory === 3) {
      invoiceType = '增值税普通纸质发票';
    }
    if (data[0].invoiceCategory === 4) {
      invoiceType = '增值税专用纸质发票';
    }
    let invoiceList = data[0].purchaseRecords;
    let listData = invoiceList.map((_, i) => ({
      invoiceCategory: invoiceType,
      invoiceCode: invoiceList[i].invoiceCode,
      invoiceStartNo: invoiceList[i].invoiceStartNo,
      invoiceEndNo: invoiceList[i].invoiceEndNo,
      invoicePurchaseQuantity: invoiceList[i].invoicePurchaseQuantity,
      invoiceSurplusQuantity: invoiceList[i].invoiceSurplusQuantity,
      invoicePurchaseDate: invoiceList[i].invoicePurchaseDate,
      invoicePurchaseOperator: invoiceList[i].invoicePurchaseOperator,
    }));
    let list = this.state.invoiceList.concat(listData);
    console.log(list);
    this.setState({
      invoiceList: list,
      showFoot: 0,
    });
  };

  //查询菜单开关状态
  openStatus = (open) => {
    if (open) {
    } else {
      // this.props.children.setClickNum();
    }
  };

  //获取查询发票类型
  invoiceTypeChange = (select) => {
    let invoiceType = '';
    if (select.length > 0) {
      invoiceType = select[0];
    }
    this.setState({
      invoiceType: invoiceType,
    });
  };

  //查询
  searchData = async () => {
    this.setState({
      isShowSearch: false,
      invoiceList: [],
      showFoot: 0,
    });
    this.setLoadingStatus(true);
    await this.getDistributeList();
  };

  //清空查询数据
  searchDataEmpty = async () => {
    this.setState({
      invoiceType: '1',
      invoiceList: [],
      showFoot: 0,
    });
    await this.getDistributeList();
  };

  // 加载list项
  renderItem = (data) => (
    <SwipeAction autoClose style={{backgroundColor: 'transparent'}}>
      <List.Item style={{backgroundColor: '#F7F7F7'}}>
        <View style={{backgroundColor: 'white', marginTop: 10}}>
          <View style={{margin: 10}}>
            <Text style={{fontSize: 15, fontWeight: 'bold', color: '#050505'}}>
              发票类别：{data.item.invoiceCategory}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票代码：{data.item.invoiceCode}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票起始号码：{data.item.invoiceStartNo}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票终止号码：{data.item.invoiceEndNo}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              申领份数：{data.item.invoicePurchaseQuantity}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              剩余份数：{data.item.invoiceSurplusQuantity}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              领购日期：{data.item.invoicePurchaseDate}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              领购人员：{data.item.invoicePurchaseOperator}
            </Text>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  // 下拉刷新
  onRefresh = async () => {
    this.setState({
      isRefreshing: true,
      showFoot: 1,
      invoiceList: [],
    });
    await this.getDistributeList();
  };

  // list尾部组件
  renderFooter() {
    if (this.state.showFoot === 0) {
      return (
        <View
          style={{height: 30, alignItems: 'center', justifyContent: 'center'}}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5,
            }}>
            没有更多数据了
          </Text>
        </View>
      );
    } else if (this.state.showFoot === 1) {
      return (
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <ActivityIndicator />
          <Text>正在加载...</Text>
        </View>
      );
    } else if (this.state.showFoot === 2) {
      return (
        <View
          style={{height: 30, alignItems: 'center', justifyContent: 'center'}}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5,
            }}>
            上拉加载
          </Text>
        </View>
      );
    }
  }

  // 设置load层是否显示
  setLoadingStatus = (isLoading) => {
    this.setState({
      spinner: isLoading,
    });
  };

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}