TaxControlAppTest/page/productInfo/product_info.js

import React, {Component} from 'react';
import {
    Animated,
    View,
    Image,
    TouchableHighlight,
    Text,
    StyleSheet,
    TextInput,
    FlatList,
    TouchableOpacity,
    ActivityIndicator,
    DeviceEventEmitter,
} from 'react-native';

import Spinner from 'react-native-loading-spinner-overlay';
import ListView from '../../components/listView/list_view';
import SearchBar from '../../components/searchBar/search_bar';
import loading_css from '../../source/css/loading_css';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import {RetrieveData, StorageData} from '../../data/storage';

//已废弃
export default class product_info extends Component {
    constructor(props) {
        super(props);
        this.props.navigation.dangerouslyGetParent().setOptions({
            tabBarVisible: false,
        });
        this.state = {
            listViewData : [],

            productName: '',
            productCode: '',
            taxItem: '',
            specsModel: '',
            taxPriceFlag: '',
            entTaxIds: '',
            taxationCategoryName: '',
            preferentialFlag: '',
            mobile: '',
            reqChannel: 3,

            pageNum: 1, //当前页码
            pageSize: 10,     //每页数量
            reflag: false,
            showFoot: 0,
            spinner: true,
            fetctFlag: 0,  //是否第一次请求
        }

        //this._fetchData();
        this._fetchData();
    }

    componentDidMount() {
        // 收到监听
        this.listener = DeviceEventEmitter.addListener('updatePage', (message) => {
            // 收到监听后想做的事情 // 监听
            this._fetchData();
        });
    }
    componentWillUnmount() {
        // 移除监听
        if (this.listener) { this.listener.remove(); }
        this.setState = (state,callback)=>{
            return;
        }
    }

    //获取数据
    _fetchData = async () => {
        if (0 === this.state.fetctFlag) {
            this.setLoadingStatus(true);
        } else {
            this.setState({
                reflag: true
            });
        }
        const res = await RetrieveData('token');
        const account = await RetrieveData('account');
        if (res && account) {
            let token = res.substring(1, res.length - 1);
            let mobile = account.substring(1, account.length - 1);
            const url = '/sys/product/findPage';
            let response = await GetDataPost(
                url,
                token,
                {
                    productName: this.state.productName,
                    productCode: this.state.productCode,
                    taxItem: this.state.taxItem,
                    specsModel: this.state.specsModel,
                    taxationCategoryName: this.state.taxationCategoryName,
                    mobile: mobile,
                    entTaxIds: this.state.entTaxIds,
                    reqChannel: 3,
                    pageNum: this.state.pageNum,
                    pageSize: this.state.pageSize,
                },
                false,
                2,
            );
            if (response.code != 0) {
                ShowToast(response.msg);
                this.setState({reflag: false});
                this.setLoadingStatus(false);
            } else {
                this.setState({
                    listViewData: [].concat(response.data.records)
                });
                this.setState({reflag: false});
                this.setLoadingStatus(false);
            }
        }
    }

    //删除数据
    _fetchDeleteRow = async (item, index) => {
        this.setLoadingStatus(true);
        const res = await RetrieveData('token');
        const account = await RetrieveData('account');
        if (res && account) {
            let token = res.substring(1, res.length - 1);
            let mobile = account.substring(1, account.length - 1);
            let productInfos = {
                productId: item.productId,
                productCode: item.productCode,
                manageUserId: item.manageUserId
            };
            let list = [productInfos];
            //console.log(list);
            const url = '/sys/product/delete';
            let response = await GetDataPost(
                url,
                token,
                {
                    delList: list,
                    mobile: mobile,
                    reqChannel: 3,
                    ip: '192.168.1.2',
                },
                false,
                1,
            );
            if (response.code != 0) {
                console.log(JSON.stringify(response));
                ShowToast(response);
                this.setLoadingStatus(false);
            } else {
                //console.log("序列号等于"+index);
                let list = this.state.listViewData;
                //console.log("删除之前列表数目：" + list.length);
                list.splice(index,1);
                //console.log("删除之后列表数目：" + list.length);
                this.setState({
                    listViewData: list
                });
                ShowToast("删除成功！");
                this.setLoadingStatus(false);
            }
        }
    }

    //搜索数据
    _searchData = (text) => {
        this.setState({productName: text});
        this._fetchData();
    }

    setLoadingStatus = (isLoading) => {
        this.setState({
            spinner: isLoading,
        });
    }

    //列表末尾控制,若请求到的数据数据少于一页，则默认没有更多数据了
    _onEndReached() {
        if (10 >= this.state.listViewData.length) {
            this.setState({
                showFoot: 1,
                fetchFlag: 1
            });
        } else {
            this.setState({showFoot: 2});
        }
    }

    //每项列表分割线
    _itemSeparatorComponent() {
        return (<View style={{height:1,backgroundColor:'#696969'}}></View>);
    }

    //列表末尾控件
    _renderFooter(){
        if (this.state.showFoot === 1) {
            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 === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator />
                    <Text>正在加载...</Text>
                </View>
            );
        } else if(this.state.showFoot === 0){
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            );
        }
    }

    render() {
        return (
            <View>
                <Spinner
                    visible={this.state.spinner}
                    textContent={'Loading...'}
                    textStyle={loading_css.spinnerTextStyle}
                />
                <View style={{flexDirection: 'column', display: 'flex',  marginTop: 20, marginBottom: 100}}>
                    <View>
                        <SearchBar _searchData={this._searchData.bind(this)}/>
                    </View>
                    <View style={styles.cardList}>
                        <FlatList
                            data={this.state.listViewData}
                            renderItem={({item, index}) => (
                                <View style={styles.productCard}>
                                    <View style={styles.productCardItem1}>
                                        <Text style={styles.topTag}><Text style={styles.topTagName}>名称：</Text><Text>{item.productName}</Text></Text>
                                        <View style={styles.optIcons}>
                                            <TouchableOpacity
                                                style={[styles.backRightBtn, styles.backRightBtnLeft]}
                                                onPress={() => {
                                                    this.props.navigation.navigate('product_edit', {
                                                        datas: item,
                                                    });
                                                }}>
                                                <Image source={require('../../source/img/productImg/edit1.png')} style={styles.trash}/>
                                            </TouchableOpacity>
                                            <TouchableOpacity
                                                onPress={this._fetchDeleteRow.bind(this, item, index)}
                                            >
                                                <Image source={require('../../source/img/productImg/delete.png')} style={styles.trash} />
                                            </TouchableOpacity>

                                        </View>
                                    </View>
                                    <View style={styles.productCardItem2}>
                                        <Text style={styles.centerTag} style={styles.tagLeft}><Text style={styles.topTagName}>单价：</Text>{item.price}</Text>
                                        <Text style={styles.centerTag} style={styles.tagRight}><Text style={styles.topTagName}>税率：</Text>{item.taxRate}</Text>
                                    </View>
                                    <View style={styles.productCardItem3}>
                                        <Text style={styles.centerTag} style={styles.tagLeft}><Text style={styles.topTagName}>规格：</Text>{item.specsModel}</Text>
                                        <Text style={styles.centerTag} style={styles.tagRight}><Text style={styles.topTagName}>计量单位：</Text>{item.unit}</Text>
                                    </View>
                                    <View style={styles.productCardItem4}>
                                        <Text style={styles.bottomTag}><Text style={styles.bottomTagName}>税收分类编码：</Text><Text style={styles.bottomBM}>{item.taxationCategoryCode}</Text></Text>
                                    </View>
                                </View>
                            )}
                            onRefresh={this._fetchData}
                            refreshing={this.state.reflag}
                            ItemSeparatorComponent={this._itemSeparatorComponent}
                            ListFooterComponent={this._renderFooter.bind(this)}
                            onEndReached={this._onEndReached.bind(this)}
                            onEndReachedThreshold={0.1}
                        ></FlatList>
                    </View>
                </View>
            </View>
        );
    }

   //刷新数据
   //  _fetchRefreshData = async () => {
   //      this._fetchData;
   //  }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1,
    },
    backTextWhite: {
        color: '#FFF',
    },
    cardList: {
      marginTop: 20
    },
    productCard: {
        flexDirection: 'column',
        height: 120,
        backgroundColor: '#ffffff',
        margin : 0,
        // borderRadius: 10,
        // borderWidth: 1,
        justifyContent: 'space-around'
    },
    productCardItem1: {
        flexDirection: 'row',
        marginTop: 8,
        marginLeft: 30,
        marginRight: 30,
        marginBottom: 15,
        // flex: 3,
    },
    productCardItem2: {
        flexDirection: 'row',
        marginLeft: 40,
        // justifyContent: 'space-around'
        // flex: 2,
    },
    productCardItem3: {
        flexDirection: 'row',
        marginLeft: 40,
        // justifyContent: 'space-around'
        // flex: 2,
    },
    productCardItem4: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginRight: 20,
        marginTop: 5,
        marginBottom: 5
        // flex: 1,
    },
    topTag: {
        flex: 1,
        fontSize: 16,
        fontWeight: "600"
    },
    centerTag: {
        fontSize: 12
    },
    bottomTag: {
        fontSize: 11,
    },
    tagLeft: {
        flex: 1,
        justifyContent: 'flex-start',
    },
    tagRight: {
        flex: 1,
        justifyContent: 'flex-start',
    },
    optIcons: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    trash: {
        width: 24,
        height: 24,
        marginLeft: 5
    },
    topTagName: {
        fontSize: 14,
        color: '#1E90FF',
    },
    bottomTagName: {
        fontSize: 12,
        color: '#696969',

    },
    bottomBM: {
        color: '#000000',
        fontWeight: '800'
    }
    // trashSep: {
    //     // marginRight: 10
    // }
});