TaxControlApp/page/waitInvoice/wait_invoice_list.js

import React, {Component} from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  ScrollView,
  SafeAreaView,
  RefreshControl,
  FlatList,
  DeviceEventEmitter,
  Alert,
  ActivityIndicator,
} from 'react-native';
import {
  Drawer,
  List,
  Picker,
  Provider,
  SwipeAction,
  Tabs,
  WhiteSpace,
  WingBlank,
} from '@ant-design/react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import public_css from '../../source/css/public_css';
import {GetDateString} from '../../utils/date';
import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';
import {ToastShow} from '../../components/toast/toast';
import {CleanAll} from '../../components/abnormalMessage/abnormal_message';
import wait_invoice_css from './wait_invoice_css';

let pageNo = 1; //当前第几页
let totalPage = 5; //总的页数
export default class wait_invoice_list extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      isShowSearch: false,
      visible1: false,
      tab: 0,
      clickNum: 0,
      beginDateTime: undefined,
      endDateTime: undefined,
      customerName: '',
      customerPhone: '',
      invoiceCode: '',
      invoiceNumber: '',
      beginDate: new Date(),
      beginDateText: '开始时间',
      endDate: new Date(),
      endDateText: '结束时间',
      beginDateShow: false,
      endDateShow: false,
      invoiceCategory: 1,
      statusList: [
        {
          value: 2,
          label: '待提交',
        },
        {
          value: 3,
          label: '已提交',
        },
        {
          value: 4,
          label: '开票成功',
        },
        {
          value: 5,
          label: '开票失败',
        },
      ],

      customerMobile: '',
      belongEntTaxId: '',
      entName: '',
      createTimeEnd: undefined,
      createTimeBegin: undefined,
      listData: [],
      status: 2,
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
    };
  }

  render() {
    let draw = (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <View>
            <View style={{margin: 10}}>
              <Text
                style={{color: '#414141', fontSize: 16, fontWeight: 'bold'}}>
                时间区间
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TouchableOpacity
                style={{
                  backgroundColor: '#F5F5F5',
                  width: 120,
                  height: 40,
                  borderRadius: 99,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                  this.isShowDateSelect(1);
                }}>
                <View>
                  <Text
                    style={{
                      color: '#D7D7D7',
                      fontWeight: 'bold',
                      fontSize: 16,
                    }}>
                    {this.state.beginDateText}
                  </Text>
                </View>
              </TouchableOpacity>
              <View>
                <Text style={{color: '#8C8C8C'}}>—</Text>
              </View>
              <TouchableOpacity
                style={{
                  backgroundColor: '#F5F5F5',
                  width: 120,
                  height: 40,
                  borderRadius: 99,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                onPress={() => {
                  this.isShowDateSelect(2);
                }}>
                <View>
                  <Text
                    style={{
                      color: '#D7D7D7',
                      fontWeight: 'bold',
                      fontSize: 16,
                    }}>
                    {this.state.endDateText}
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
            {this.state.beginDateShow === true ? (
              <DateTimePicker
                testID="dateTimePicker"
                value={this.state.beginDate}
                mode={'date'}
                is24Hour={true}
                display="default"
                placeholder="起始时间"
                dateFormat="yyyy-MM-dd"
                onChange={(event, date) => {
                  this.beginDateChange(event, date);
                }}
              />
            ) : (
              <View />
            )}
            {this.state.endDateShow === true ? (
              <DateTimePicker
                testID="dateTimePicker"
                value={this.state.endDate}
                mode={'date'}
                is24Hour={true}
                display="default"
                placeholder="起始时间"
                dateFormat="yyyy-MM-dd"
                onChange={(event, date) => {
                  this.endDateChange(event, date);
                }}
              />
            ) : (
              <View />
            )}
          </View>
          <Picker
            value={[this.state.status]}
            data={this.state.statusList}
            cols={1}
            onChange={(select) => this.statusChange(select)}>
            <List.Item arrow="horizontal" onPress={this.onPress}>
              状态：
            </List.Item>
          </Picker>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                客户名称：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的客户名称'}
                clearButtonMode={'while-editing'}
                value={this.state.customerName}
                onChangeText={(value) => {
                  this.setState({
                    customerName: value,
                  });
                }}
              />
            </View>
          </View>
          <View>
            <View>
              <Text
                style={{
                  fontWeight: 'bold',
                  color: '#414141',
                  fontSize: 16,
                  margin: 10,
                }}>
                客户手机号：
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TextInput
                style={{
                  paddingVertical: 0,
                  width: 260,
                  height: 35,
                  borderRadius: 99,
                  backgroundColor: '#F5F5F5',
                }}
                placeholder={'请输入要查询的客户手机号'}
                clearButtonMode={'while-editing'}
                value={this.state.customerPhone}
                onChangeText={(value) => {
                  this.setState({
                    customerPhone: value,
                  });
                }}
              />
            </View>
          </View>
        </ScrollView>
        <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.setEmptyData();
              }}>
              <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.getSearchData()}>
              <Text style={{color: '#FFFFFF'}}>查询</Text>
            </TouchableOpacity>
          </View>
        </View>
        <WhiteSpace />
      </SafeAreaView>
    );
    return (
      <View style={{flex: 1}}>
        <Provider>
          <Drawer
            sidebar={draw}
            position="right"
            open={false}
            drawerRef={(el) => (this.drawer = el)}
            onOpenChange={(open) => this.openStatus(open)}
            drawerBackgroundColor="#ccc"
            drawerWidth={300}>
            <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}
            />
          </Drawer>
        </Provider>
      </View>
    );
  }

  componentDidMount() {
    this.getWaitInvoiceList();
  }

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

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

  // 点击开始和结束时间显示时间选择器
  isShowDateSelect = (dateStatus) => {
    // 开始时间和结束时间选择器显示 1:开始时间 2：结束时间
    if (dateStatus === 1) {
      this.setState({
        beginDateShow: true,
      });
    } else {
      this.setState({
        endDateShow: true,
      });
    }
  };

  // 获取开始时间
  beginDateChange = (event, date) => {
    let dateText = GetDateString(date);
    this.setState({
      beginDate: date,
      beginDateShow: false,
      beginDateText: dateText,
    });
  };

  //获取结束时间
  endDateChange = (event, date) => {
    let dateText = GetDateString(date);
    this.setState({
      endDate: date,
      endDateShow: false,
      endDateText: dateText,
    });
  };

  // 重置
  setEmptyData = () => {
    this.drawer.closeDrawer();
    this.initData();
  };

  // 查询
  getSearchData = () => {
    this.drawer.closeDrawer();
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
    });
    pageNo = 1;
    this.getWaitInvoiceList();
  };

  //数据初始化
  initData = () => {
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
      beginDate: new Date(),
      beginDateText: '开始时间',
      endDate: new Date(),
      endDateText: '结束时间',
      beginDateShow: false,
      endDateShow: false,
      customerName: '',
      customerPhone: '',
      status: 2,
    });
    pageNo = 1;
    this.getWaitInvoiceList();
  };

  //获取抬头列表数据
  getWaitInvoiceList = async () => {
    let beginTime = '';
    let endTime = '';
    if (this.state.beginDateText !== undefined) {
      if (this.state.beginDateText !== '开始时间') {
        beginTime = this.state.beginDateText + ' 00:00:00';
      }
    }
    if (this.state.endDateText !== undefined) {
      if (this.state.endDateText !== '结束时间') {
        endTime = this.state.endDateText + ' 23:59:59';
      }
    }
    console.log('岑氏');
    console.log(beginTime);
    console.log(endTime);
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    let company = JSON.parse(await RetrieveData('company'));
    if (token && account) {
      const url = '/sys/fapiao/todo/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          pageNum: pageNo,
          pageSize: 10,
          createTimeEnd: endTime,
          createTimeBegin: beginTime,
          customerName: this.state.customerName,
          customerMobile: this.state.customerPhone,
          belongEntTaxId: company.entTaxId,
          status: this.state.status,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          if (res.data.pages > 0) {
            totalPage = res.data.pages;
            this.setList(res.data.records);
          } else {
            totalPage = res.data.pages;
            this.setState({
              listData: [],
              showFoot: 1,
            });
          }
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //设置抬头列表
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].recordId,
      customerName: data[i].customerName,
      customerEntTaxId: data[i].customerEntTaxId,
      address: data[i].address,
      contactPhone: data[i].contactPhone,
      bankName: data[i].bankName,
      bankAccountNo: data[i].bankAccountNo,
      customerEmail: data[i].customerEmail,
      customerMobile: data[i].customerMobile,
      remark: data[i].remark,
      belongEntTaxId: data[i].belongEntTaxId,
      entName: data[i].entName,
      createTime: data[i].createTime,
      totalAmountTaxes: data[i].totalAmountTaxes,
      invoiceCategory: data[i].invoiceCategory,
      interactType: data[i].interactType,
      interactTypeDetail: data[i].interactTypeDetail,
      customerType: data[i].customerType,
      status: data[i].status,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //删除发票抬头信息
  deleteData = async (data) => {
    let company = JSON.parse(await RetrieveData('company'));
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (account && token) {
      const url = '/sys/fapiao/todo/delete';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          delList: [
            {
              recordId: data.item.key,
              belongEntTaxId: company.entTaxId,
              status: 2,
            },
          ],
        },
        false,
        1,
      );
      if (res) {
        if (res.code === 0) {
          ToastShow(1, '删除成功！');
          await this.cleanData();
        } else {
          ToastShow(1, res.msg);
        }
      }
    }
  };

  // 提交开票
  submitInvoice = async (data) => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/fapiao/todo/findCmdParam';
      let res = await RequestNetwork(
        url,
        token,
        {
          recordId: data.item.key,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.TTLX =
            data.item.customerType;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_MC =
            data.item.customerName;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_NSRSBH =
            data.item.customerEntTaxId;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_DZ =
            data.item.address;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_DH =
            data.item.contactPhone;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_KHHMC =
            data.item.bankName;
          res.data.cmdParamObject.REQUEST_COMMON_FPKJ.SPF_YHZH =
            data.item.bankAccountNo;
          const url = '/sys/fapiao/todo/commit';
          let response = await RequestNetwork(
            url,
            token,
            {
              mobile: account,
              reqChannel: 3,
              interactType: data.item.interactType,
              interactTypeDetail: data.item.interactTypeDetail,
              cmdParam: res.data.cmdParamObject,
              todoRecordId: data.item.key,
            },
            false,
            1,
          );
          if (response) {
            if (response.code === 0) {
              DeviceEventEmitter.emit('updateStatistics');
              ToastShow(1, '开票成功！');
              await this.cleanData();
            } else {
              ToastShow(1, response.msg);
            }
          }
        } else {
          ToastShow(1, res.msg);
        }
      }
    }
  };

  //加载列表list数据
  renderItem = (data) => (
    <SwipeAction autoClose style={{backgroundColor: 'transparent'}}>
      <List.Item style={{backgroundColor: '#F7F7F7'}}>
        <View style={{backgroundColor: '#ffffff'}}>
          <View
            style={{
              marginLeft: 10,
              marginTop: 10,
              marginBottom: 10,
              flexDirection: 'row',
            }}>
            <View style={{flex: 1}}>
              <View style={{flex: 1}}>
                <Text
                  style={{fontWeight: 'bold', fontSize: 16, color: '#050505'}}
                  ellipsizeMode={'tail'}
                  numberOfLines={1}>
                  发票抬头：{data.item.customerName}
                </Text>
              </View>
              <View style={{flex: 1, marginTop: 10, marginBottom: 10}}>
                <Text style={{color: '#898989'}}>
                  税号：{data.item.customerEntTaxId}
                </Text>
              </View>
              <View style={{flex: 1}}>
                {data.item.invoiceCategory === 1 ? (
                  <View style={wait_invoice_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>增值税普通电子发票</Text>
                  </View>
                ) : data.item.invoiceCategory === 2 ? (
                  <View style={wait_invoice_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>增值税电子专用发票</Text>
                  </View>
                ) : data.item.invoiceCategory === 3 ? (
                  <View style={wait_invoice_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>增值税普通纸质发票</Text>
                  </View>
                ) : data.item.invoiceCategory === 4 ? (
                  <View style={wait_invoice_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>增值税专用纸质发票</Text>
                  </View>
                ) : (
                  <Text />
                )}
              </View>
            </View>
            <View style={{width: 80}}>
              <View style={{alignItems: 'flex-end'}}>
                {data.item.status === 2 ? (
                  <View style={wait_invoice_css.listBlueHead}>
                    <Text style={{color: '#ffffff'}}>待提交</Text>
                  </View>
                ) : data.item.status === 3 ? (
                  <View style={wait_invoice_css.listBlueHead}>
                    <Text style={{color: '#ffffff'}}>已提交</Text>
                  </View>
                ) : data.item.status === 4 ? (
                  <View style={wait_invoice_css.listBlueHead}>
                    <Text style={{color: '#ffffff'}}>开票成功</Text>
                  </View>
                ) : data.item.status === 5 ? (
                  <View style={wait_invoice_css.listRedHead}>
                    <Text style={{color: '#ffffff'}}>开票失败</Text>
                  </View>
                ) : (
                  <View />
                )}
              </View>
              <View style={{flex: 1}}>
                <Text style={{fontWeight: 'bold', fontSize: 18, marginTop: 10}}>
                  ¥{data.item.totalAmountTaxes}
                </Text>
              </View>
            </View>
          </View>
          <WingBlank>
            <View style={{borderTopWidth: 1, borderColor: '#D9D9D9'}} />
          </WingBlank>
          <View style={{flexDirection: 'row', margin: 10}}>
            <View style={{flex: 1, justifyContent: 'center'}}>
              <Text>{data.item.createTime}</Text>
            </View>
            <View style={{flex: 1}}>
              {data.item.status === 2 ? (
                <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity
                    style={{
                      flex: 1,
                      borderWidth: 1,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderColor: '#CCCCCC',
                      borderRadius: 30,
                      height: 30,
                    }}
                    onPress={() => {
                      this.deleteData(data);
                    }}>
                    <Text style={{color: '#666666'}}>删除</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={{
                      flex: 1,
                      borderWidth: 1,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderColor: '#2A67FE',
                      borderRadius: 30,
                      height: 30,
                      marginLeft: 5,
                    }}
                    onPress={() => {
                      this.submitInvoice(data);
                    }}>
                    <Text style={{color: '#2A67FE'}}>点击开票</Text>
                  </TouchableOpacity>
                </View>
              ) : (
                <View />
              )}
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

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

  //列表尾部显示
  _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={wait_invoice_css.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
        <View style={wait_invoice_css.footer}>
          <Text />
        </View>
      );
    }
  };

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

  // 处理网络请求数据
  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);
    }
  };
}