TaxControlAppTest/page/invoice/invoice_product_list_add.js

import React, {Component} from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  ActivityIndicator,
  RefreshControl,
  Alert,
} from 'react-native';
import {List, SearchBar, SwipeAction} from '@ant-design/react-native';

import {RetrieveData} from '../../data/storage';
import {GetDataPost} from '../../data/encryption';
import public_css from '../../source/css/public_css';
import invoice_css from './invoice_css';

let pageNo = 1; //当前页码
let totalPage = 5; //总的页数
let pageSize = 10; //每页数量
export default class invoice_product_list_add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      productName: '',
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
    };
  }

  render() {
    return (
      <View style={public_css.body}>
        <View
          style={{
            width: Dimensions.get('window').width,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#ffffff',
            height: 50,
          }}>
          <SearchBar
            placeholder="搜索"
            value={this.state.productName}
            onCancel={() => this.searchClear()}
            onChange={value => this.searchData(value)}
            showCancelButton={false}
            style={{borderRadius: 15}}
          />
        </View>
        <View style={invoice_css.list_view}>
          <Text style={invoice_css.list_title_text}>产品名称</Text>
          <Text sstyle={invoice_css.list_title_text}>规格型号</Text>
          <Text style={invoice_css.list_title_text}>单价</Text>
          <Text style={invoice_css.list_title_text}>税率(%)</Text>
        </View>
        <View style={{height: Dimensions.get('window').height}}>
          <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>
      </View>
    );
  }

  //页面渲染完成后加载
  componentDidMount(): void {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: '',
      showFoot: 0,
    });
    this.getProductList();
  }

  //搜索
  searchData = text => {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: text,
      showFoot: 0,
    });
    this.getProductList();
  };

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

  //清空搜索栏
  searchClear = () => {
    this.initData();
  };

  //获取当前账户下企业税号
  getProductList = async () => {
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    let ents = await RetrieveData('defaultEnt');
    if (token && account && ents) {
      token = token.substring(1, token.length - 1);
      account = account.substring(1, account.length - 1);
      let ent = JSON.parse(ents);
      const url = '/sys/product/findPage';
      GetDataPost(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          entTaxIds: ent.entTaxId,
          pageNum: pageNo,
          pageSize: pageSize,
          productName: this.state.productName,
        },
        false,
        2,
      ).then(res => {
        if (res) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
          if (res.data.records.length == 0 || res.data == null) {
            Alert.alert(
              '商品信息为空',
              '请先在【商品管理】中添加商品信息，再进行开票操作！',
              [
                {
                  text: '取消',
                  onPress: () => console.log('Cancel Pressed'),
                  style: 'cancel',
                },
                {text: '确定', onPress: () => console.log('submit')},
              ],
              {cancelable: false},
            );
          }
        }
      });
    }
  };

  //加载产品列表
  setList = data => {
    let listDatas = data.map((_, i) => ({
      key: data[i].productId, //产品Id
      FPHXZ: '0', //发票行性质 0正常行 1折扣行 2被折扣行 必填
      SPBM: data[i].taxationCateCode, //商品编码
      ZXBM: data[i].productCode, //自行编码
      YHZCBS: '', //优惠政策标识 0不使用 1使用
      LSLBS: '', //零税率标识
      ZZSTSGL: '', //增值税特殊管理
      XMMC: data[i].productName, //项目名称 必填
      DW: data[i].unit, //计量单位
      GGXH: data[i].specsModel, //规格型号
      XMSL: '', //项目数量
      XMDJ: data[i].price, //项目单价
      XMJE: '', //项目金额 不含税
      SL: data[i].taxRate, //税率 必填
      SE: '', //税额 必填
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      showFoot: 0,
      listData: list,
    });
  };

  //加载列表item
  renderItem = data => (
    <SwipeAction
      autoClose
      style={{
        backgroundColor: 'transparent',
        width: Dimensions.get('window').width,
      }}>
      <List.Item
        onPress={() => {
          this.props.navigation.navigate('invoice_product_number', data.item);
        }}
        style={{display: 'flex'}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
          <Text
            style={invoice_css.list_item_text}
            ellipsizeMode={'tail'}
            numberOfLines={2}>
            {data.item.XMMC}{' '}
          </Text>
          <Text style={invoice_css.list_item_text}>{data.item.GGXH}</Text>
          <Text style={invoice_css.list_item_text}>{data.item.XMDJ}</Text>
          <Text style={invoice_css.list_item_text}>{data.item.SL}</Text>
        </View>
      </List.Item>
    </SwipeAction>
  );

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

  //列表上拉加载
  _onEndReached() {
    if (this.state.showFoot == 0) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 1});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 2});
        this.getProductList();
      }
    }
  }
}