TaxControlApp_OLD/page/invoiceDistribution/invoice_distribution.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 {GetMonthDate} from '../../utils/date';
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 application_info 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>
          <Picker
            data={this.state.distributeStatusList}
            cols={1}
            value={[this.state.distributeStatus]}
            onChange={(select) => this.distributeStatusChange(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()}
              onEndReached={() => this.onReached()}
              onEndReachedThreshold={0.1}
            />
          </Drawer>
        </SafeAreaView>
      </Provider>
    );
  }

  // render加载完后调用
  async componentDidMount() {
    this.setLoadingStatus(true);
    let date = GetMonthDate();
    this.setState({
      monthDate: date,
      beginDate: date.startDate,
      endDate: date.endDate,
      beginDateString: date.startDateString,
      endDateString: date.endDateString,
    });
    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/invoicePurchase/distributeInfos';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCategory: this.state.invoiceType,
          distributeStatus: this.state.distributeStatus,
          pageNo: this.state.pageNum,
          pageSize: this.state.pageSize,
          mobile: account,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            isNextPage: response.data.hasNext,
            isPreviousPage: response.data.hasPrv,
          });
          this.setLoadingStatus(false);
          if (response.data.distributeVOs.length > 0) {
            this.setState({
              isRefreshing: false,
              totalPage: response.data.distributeVOs.length,
            });
            this.setList(response.data.distributeVOs);
          } else {
            this.setState({
              showFoot: 0,
              isRefreshing: false,
            });
          }
        } else {
          this.setLoadingStatus(false);
          await this.abnormalMessage(response);
        }
      }
    }
  };

  //设置抬头列表
  setList = (data) => {
    let listData = [];
    data.map((item, index) => {
      let data = {
        key: index,
        invoiceCateCode: item.invoiceCateCode,
        invoiceCateName: item.invoiceCateName,
        invoiceCode: item.invoiceCode,
        invoiceBeginNo: item.invoiceBeginNo,
        invoiceEndNo: item.invoiceEndNo,
        surplusNum: item.surplusNum,
        invoicePurchaseDate: item.invoicePurchaseDate,
        effectiveDate: item.effectiveDate,
        administratorsCode: item.administratorsCode,
        taxPanel: item.taxPanel,
      };
      listData = listData.concat(data);
    });
    let showFoot = 0;
    if (this.state.isNextPage) {
      showFoot = 2;
    }
    this.setState({
      invoiceList: listData,
      showFoot: showFoot,
    });
  };

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

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

  //获取查询发票分发状态
  distributeStatusChange = (select) => {
    let distributeStatus = '';
    if (select.length > 0) {
      distributeStatus = select[0];
    }
    this.setState({
      distributeStatus: distributeStatus,
    });
  };

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

  //清空查询数据
  searchDataEmpty = async () => {
    this.setState({
      invoiceType: '1',
      distributeStatus: '0',
      invoiceList: [],
      showFoot: 0,
      isNextPage: false,
      isPreviousPage: false,
      pageNum: 1,
    });
    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.invoiceCateName}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票代码：{data.item.invoiceCode}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票起始号码：{data.item.invoiceBeginNo}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              发票终止号码：{data.item.invoiceEndNo}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              剩余份数：{data.item.surplusNum}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              领购日期：{data.item.invoicePurchaseDate}
            </Text>
          </View>
          <View style={{flexDirection: 'row', margin: 10}}>
            <View style={{flex: 1}} />
            <View style={{flex: 1}}>
              <TouchableOpacity
                style={{
                  flex: 1,
                  borderWidth: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderColor: '#2A67FE',
                  borderRadius: 30,
                  height: 30,
                  marginLeft: 5,
                  width: 150,
                }}
                onPress={() => {
                  this.confirmDistribution(data);
                }}>
                <Text style={{color: '#2A67FE'}}>确认分发</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  // 下拉刷新
  onRefresh = async () => {
    this.setState({
      isRefreshing: true,
      showFoot: 1,
      invoiceList: [],
      isNextPage: false,
      isPreviousPage: false,
      pageNum: 1,
    });
    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>
      );
    }
  }

  //列表末尾控制,若请求到的数据数据少于一页，则默认没有更多数据了
  onReached = async () => {
    if (this.state.showFoot === 2 && this.state.isNextPage) {
      if (this.state.pageNum >= this.state.totalPage) {
        this.setState({showFoot: 0});
      } else {
        this.setState({
          pageNum: this.state.pageNum + 1,
          showFoot: 1,
        });
        //获取数据
        await this.getDistributeList();
      }
    } else {
      return;
    }
  };

  // 确认分发
  confirmDistribution = async (data) => {
    const company = JSON.parse(await RetrieveData('company'));
    const token = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (token && account) {
      const url = '/sys/invoicePurchase/distribute';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCateCode: data.item.invoiceCateCode,
          surplusNum: data.item.surplusNum,
          invoiceCode: data.item.invoiceCode,
          invoiceBeginNo: data.item.invoiceBeginNo,
          invoiceEndNo: data.item.invoiceEndNo,
          distributeNum: data.item.surplusNum,
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          ToastShow(1, '发票分发成功！');
          await this.searchDataEmpty();
        } else {
          ToastShow(1, '发票分发失败！');
        }
      }
    }
  };

  // 设置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);
    }
  };
}