TaxControlApp/page/invoiceHead/invoice_head_list.js

import React, {Component} from 'react';
import {
  View,
  FlatList,
  Text,
  ActivityIndicator,
  RefreshControl,
  TouchableOpacity,
  Image, Alert,
} from "react-native";
import {
  DatePicker,
  List,
  Provider,
  InputItem,
  SwipeAction,
  Drawer,
  WingBlank,
} from "@ant-design/react-native";

import public_css from '../../source/css/public_css';
import moment from 'moment';
import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';

import invoice_head_css from './invoice_head_css';
import { ToastShow } from "../../components/toast/toast";
import { CleanAll } from "../../components/abnormalMessage/abnormal_message";

let pageNo = 1; //当前第几页
let totalPage = 5; //总的页数
export default class invoice_head_list extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      isShowSearch: false,
      clickNum: 0,
      customerName: '',
      customerEntTaxId: '',
      customerMobile: '',
      belongEntTaxId: '',
      entName: '',
      createTimeEnd: undefined,
      createTimeBegin: undefined,
      listData: [],
      status: 0,
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
      isOpen: false,
    };
  }

  render() {
    let draw = (
      <View style={public_css.body}>
        <View style={{flex: 1}}>
          <View>
            <List>
              <DatePicker
                value={this.state.createTimeBegin}
                mode="date"
                defaultDate={new Date()}
                minDate={new Date(2020, 0, 1)}
                maxDate={new Date(2030, 11, 3)}
                onChange={(time) => this.beginTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">开始时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <View>
            <List>
              <DatePicker
                value={this.state.createTimeEnd}
                mode="date"
                defaultDate={new Date()}
                minDate={this.state.createTimeBegin}
                maxDate={new Date(2030, 11, 3)}
                onChange={(time) => this.endTimeChange(time)}
                format="YYYY-MM-DD">
                <List.Item arrow="horizontal">结束时间</List.Item>
              </DatePicker>
            </List>
          </View>
          <InputItem
            clear
            value={this.state.customerName}
            onChange={(value) => {
              this.setState({
                customerName: value,
              });
            }}
            placeholder="请输入要查询的客户方名称">
            客户方名称:
          </InputItem>
          <InputItem
            clear
            value={this.state.customerEntTaxId}
            onChange={(value) => {
              this.setState({
                customerEntTaxId: value,
              });
            }}
            placeholder="请输入要查询的客户方税号">
            客户方税号:
          </InputItem>
          <InputItem
            clear
            value={this.state.customerMobile}
            onChange={(value) => {
              this.setState({
                customerMobile: value,
              });
            }}
            placeholder="请输入要查询的客户方手机号">
            客户方手机号:
          </InputItem>
        </View>
        <View style={public_css.bottomStatus}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusLBtn]}
            onPress={() => {
              this.searchDataEmpty();
            }}>
            <Image
              source={require('../../source/img/productImg/clear.png')}
              style={{width: 32, height: 32}}
            />
            <Text>全部清除</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusRBtn]}
            onPress={() => this.initData()}>
            <Image
              source={require('../../source/img/productImg/confirm.png')}
              style={{width: 32, height: 32}}
            />
            <Text style={{color: '#fff'}}>查询</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
    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}>
            <View style={invoice_head_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>
          </Drawer>
        </Provider>
      </View>
    );
  }

  //判断是否点击了查询
  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,
          });
          this.drawer.openDrawer();
          this.props.navigation.setParams({
            isShow: false,
          });
          return true;
        }
      }
    }
    return true;
  }

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

  //获取查询开始时间
  beginTimeChange = (time) => {
    this.setState({
      createTimeBegin: time,
    });
  };

  //获取查询结束时间
  endTimeChange = (time) => {
    this.setState({
      createTimeEnd: time,
    });
  };

  //清空查询数据
  searchDataEmpty = () => {
    this.setState({
      customerName: '',
      customerEntTaxId: '',
      customerMobile: '',
      createTimeEnd: undefined,
      createTimeBegin: undefined,
    });
  };

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

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

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

  //页面加载完成后加载数据
  componentDidMount(): void {
    this.getInvoiceHeads();
  }

  // 清空数据重新加载
  cleanData = async () => {
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
      status: 0,
    });
    pageNo = 1;
    await this.getInvoiceHeads();
  };

  //获取抬头列表数据
  getInvoiceHeads = async () => {
    let beginTime = '';
    let endTime = '';
    if (this.state.createTimeBegin != undefined) {
      beginTime = moment(this.state.createTimeBegin).format('YYYY-MM-DD');
      beginTime = beginTime + ' 00:00:00';
    }
    if (this.state.createTimeEnd != undefined) {
      endTime = moment(this.state.createTimeEnd).format('YYYY-MM-DD');
      endTime = endTime + ' 23:59:59';
    }
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    let company = JSON.parse(await RetrieveData('company'));
    if (token && account) {
      const url = '/sys/taitou/todo/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          pageNum: pageNo,
          pageSize: 10,
          createTimeEnd: endTime,
          createTimeBegin: beginTime,
          customerName: this.state.customerName,
          customerEntTaxId: this.state.customerEntTaxId,
          customerMobile: this.state.customerMobile,
          belongEntTaxId: company.entTaxId,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        } 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,
      status: data[i].status,
      entName: data[i].entName,
      createTime: data[i].createTime,
      customerType: data[i].customerType,
      interactType: data[i].interactType,
      interactTypeDetail: data[i].interactTypeDetail,
      belongEntName: data[i].belongEntName,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //显示发票抬头列表
  renderItem = (data) => (
    <SwipeAction autoClose style={{backgroundColor: 'transparent'}}>
      <List.Item style={{backgroundColor: '#F7F7F7'}}>
        <View style={{backgroundColor: '#ffffff'}}>
          <View style={{margin: 10}}>
            <Text
              style={{fontWeight: 'bold', fontSize: 16, color: '#050505'}}
              ellipsizeMode={'tail'}
              numberOfLines={1}>
              发票抬头：{data.item.customerName}
            </Text>
            <Text style={{color: '#898989', marginTop: 5}}>
              税号：{data.item.customerEntTaxId}
            </Text>
          </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={{flexDirection: 'row', flex: 1}}>
              <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.props.navigation.navigate('invoice_head', {
                    invoiceData: data,
                  });
                }}>
                <Text style={{color: '#2A67FE'}}>点击开票</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );

  //左滑显示删除按钮
  right = (data) => [
    {
      text: '删除',
      onPress: () => {
        this.deleteData(data.item);
      },
      style: {backgroundColor: 'red', color: 'white'},
    },
  ];

  //删除发票抬头信息
  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/taitou/todo/delete';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          delList: [
            {
              recordId: data.item.key,
              belongEntTaxId: company.entTaxId,
            },
          ],
        },
        false,
        1,
      );
      if (res) {
        if (res.code === 0) {
          ToastShow(1, '删除成功！');
          await this.cleanData();
        } else {
          ToastShow(1, res.msg);
        }
      }
    }
  };

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