TaxControlApp/page/invoiceApplication/application_info.js

import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Image,
  Text,
  SafeAreaView,
  FlatList,
  ActivityIndicator,
  Alert,
  RefreshControl,
} from 'react-native';
import {
  DatePicker,
  Drawer,
  List,
  Provider,
  WingBlank,
  SwipeAction,
  Picker,
  WhiteSpace,
} 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, GetDateString} from '../../utils/date';
import {ToastShow} from '../../components/toast/toast';
import {InvoiceType, ApplicationStatus} 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',
      applicationStatusList: ApplicationStatus(),
      applicationStatus: '0',
      spinner: false,
      isNextPage: false, // 是否有下一页
      isPreviousPage: false, // 是否有上一页
    };
  }

  render() {
    let draw = (
      <View style={public_css.body}>
        <View style={{flex: 1}}>
          <View>
            <List>
              <DatePicker
                value={this.state.beginDate}
                mode="date"
                defaultDate={new Date()}
                onChange={(time) => this.beginTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">开始时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <View>
            <List>
              <DatePicker
                value={this.state.endDate}
                mode="date"
                defaultDate={new Date()}
                minDate={this.state.beginDate}
                onChange={(time) => this.endTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">结束时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <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.applicationStatusList}
            cols={1}
            value={[this.state.applicationStatus]}
            onChange={(select) => this.applicationStatusChange(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: 120,
                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: 120,
                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}
            />
            <WingBlank>
              <View style={public_css.bottomStatus}>
                <TouchableOpacity
                  style={[public_css.statusBtn, public_css.statusRBtn]}
                  onPress={() =>
                    this.props.navigation.navigate('invoice_application', {
                      setRefresh: () => {
                        this.setRefresh();
                      },
                    })
                  }>
                  <Image
                    source={require('../../source/img/productImg/confirm.png')}
                    style={{width: 32, height: 32}}
                  />
                  <Text style={{color: '#fff'}}>发票申领</Text>
                </TouchableOpacity>
              </View>
            </WingBlank>
            <WhiteSpace />
          </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.getApplicationList();
  }

  //判断是否点击了查询
  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;
  }

  // 获取发票申领列表
  getApplicationList = 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/statusInfos';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCategory: this.state.invoiceType,
          applyDateBegin: this.state.beginDateString,
          applyDateEnd: this.state.endDateString,
          handleStatus: this.state.applicationStatus,
          pageNum: 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.statusInfoVOs.length > 0) {
            this.setState({
              isRefreshing: false,
              totalPage: response.data.statusInfoVOs.length,
            });
            this.setList(response.data.statusInfoVOs);
          } else {
            this.setState({
              showFoot: 0,
              isRefreshing: false,
            });
          }
        } else {
          this.setLoadingStatus(false);
          await this.abnormalMessage(response);
        }
      }
    }
  };

  //设置抬头列表
  setList = (data) => {
    let listData = data.map((_, i) => ({
      key: data[i].applySerialNumber,
      invoiceKindCode: data[i].invoiceKindCode,
      invoiceKindName: data[i].invoiceKindName,
      invoiceCateCode: data[i].invoiceCateCode,
      invoiceCateName: data[i].invoiceCateName,
      applyNum: data[i].applyNum,
      applyDate: data[i].applyDate,
      handleStatus: data[i].handleStatus,
      handleInformation: data[i].handleInformation,
      resultEnterFlag: data[i].resultEnterFlag,
      details: data[i].details,
    }));
    let list = this.state.invoiceList.concat(listData);
    let showFoot = 0;
    if (this.state.isNextPage) {
      showFoot = 2;
    }
    this.setState({
      invoiceList: list,
      showFoot: showFoot,
    });
  };

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

  //获取查询开始时间
  beginTimeChange = (time) => {
    let date = GetDateString(time);
    this.setState({
      beginDate: time,
      beginDateString: date,
    });
  };

  //获取查询结束时间
  endTimeChange = (time) => {
    let date = GetDateString(time);
    this.setState({
      endDate: time,
      endDateString: date,
    });
  };

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

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

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

  //清空查询数据
  searchDataEmpty = async () => {
    let date = GetMonthDate();
    this.setState({
      monthDate: date,
      beginDate: date.startDate,
      endDate: date.endDate,
      beginDateString: date.startDateString,
      endDateString: date.endDateString,
      invoiceType: '1',
      applicationStatus: '0',
      invoiceList: [],
      showFoot: 0,
      isNextPage: false,
      isPreviousPage: false,
      pageNum: 1,
    });
    await this.getApplicationList();
  };

  // 加载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.applyNum}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              申领时间：{data.item.applyDate}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              处理时间：{data.item.handleDate}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              处理状态：
              {data.item.handleStatus === '0'
                ? '申领中'
                : data.item.handleStatus === '1'
                ? '成功'
                : data.item.handleStatus === '2'
                ? '失败'
                : ''}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              处理信息：{data.item.handleInformation}
            </Text>
          </View>
          <View style={{flexDirection: 'row', margin: 10}}>
            <View style={{flex: 1}}>
              {data.item.handleStatus === '1' ? (
                data.item.resultEnterFlag === 'N' ? (
                  <TouchableOpacity
                    style={{
                      flex: 1,
                      borderWidth: 1,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderColor: '#2A67FE',
                      borderRadius: 30,
                      height: 30,
                      marginLeft: 5,
                      width: 150,
                    }}
                    onPress={() => {
                      this.applicationConfirmation(data);
                    }}>
                    <Text style={{color: '#2A67FE'}}>申领确认</Text>
                  </TouchableOpacity>
                ) : (
                  <View />
                )
              ) : (
                <View />
              )}
            </View>
            <View style={{flex: 1}}>
              {data.item.handleStatus === '0' ? (
                <TouchableOpacity
                  style={{
                    flex: 1,
                    borderWidth: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderColor: '#CCCCCC',
                    borderRadius: 30,
                    height: 30,
                    width: 150,
                  }}
                  onPress={() => {
                    this.applicationCancel(data);
                  }}>
                  <Text style={{color: '#666666'}}>申领撤销</Text>
                </TouchableOpacity>
              ) : (
                <View />
              )}
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

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

  // 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.getApplicationList();
      }
    } else {
      return;
    }
  };

  // 申领成功后返回刷新
  setRefresh = async () => {
    await this.getApplicationList();
  };

  // 申领确认
  applicationConfirmation = 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/confirm';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCateCode: data.item.invoiceCateCode,
          invoiceCateName: data.item.invoiceCateName,
          applySerialNumber: data.item.key,
          mobile: account,
          reqChannel: 3,
          details: [
            {
              invoiceBeginNo: data.item.details[0].invoiceBeginNo,
              invoiceNums: data.item.details[0].invoiceNums,
              invoiceEndNo: data.item.details[0].invoiceEndNo,
              invoiceCode: data.item.details[0].invoiceCode,
            },
          ],
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          ToastShow(1, '申领确认成功！');
          await this.searchDataEmpty();
        } else {
          ToastShow(1, '申领确认失败！');
        }
      }
    }
  };

  //申领撤销
  applicationCancel = 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/revoke';
      let response = await RequestNetwork(
        url,
        token,
        {
          entTaxId: company.entTaxId,
          deviceType: company.defaultDeviceInfo.deviceType,
          taxDiscId: company.defaultDeviceInfo.taxDiscId,
          invoiceCateCode: data.item.invoiceCateCode,
          invoiceCateName: data.item.invoiceCateName,
          applySerialNumber: data.item.key,
          mobile: account,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          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);
    }
  };
}