|
@@ -0,0 +1,163 @@
|
|
|
+import React, {Component} from 'react';
|
|
|
+import {
|
|
|
+ View,
|
|
|
+ FlatList,
|
|
|
+ Text, StyleSheet, StatusBar,
|
|
|
+} from 'react-native';
|
|
|
+
|
|
|
+import {connect} from 'react-redux';
|
|
|
+import TreeSelect from 'react-native-tree-select';
|
|
|
+
|
|
|
+@connect(customer => ({...customer}))
|
|
|
+class SearchProcess extends Component {
|
|
|
+ // 搜索进度
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ callback: this.props.navigation.state.params.callback,
|
|
|
+ data: [],
|
|
|
+ StageCount: [],
|
|
|
+ field: '',
|
|
|
+ store_id: '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this._fetchData();
|
|
|
+ this._fetchStageCount();
|
|
|
+ }
|
|
|
+
|
|
|
+ _fetchData = () => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'customer/fetchEmployeeTree',
|
|
|
+ callback: (data) => {
|
|
|
+ this.setState({data: data});
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ _fetchStageCount = (type, id) => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'customer/queryStageCount',
|
|
|
+ payload: {type, id},
|
|
|
+ callback: (data) => {
|
|
|
+ this.setState({StageCount: data});
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ _onClickLeaf = (item) => {
|
|
|
+ this._fetchStageCount(item.item.field, item.item.id);
|
|
|
+ this.setState({field: item.item.field, store_id: item.item.id});
|
|
|
+ };
|
|
|
+
|
|
|
+ _onStagePress = (stage_id, event) => {
|
|
|
+ const {field, store_id} = this.state;
|
|
|
+ let param = '';
|
|
|
+ if (field && store_id) {
|
|
|
+ param = field + '_' + store_id;
|
|
|
+ }
|
|
|
+ this.state.callback(stage_id, event, param);
|
|
|
+ this.props.navigation.goBack();
|
|
|
+ };
|
|
|
+
|
|
|
+ renderItem = (data, index) => {
|
|
|
+ return (
|
|
|
+ <View style={index % 2 === 0 ? styles.tableRowOdd : styles.tableRowEven}>
|
|
|
+ <Text
|
|
|
+ onPress={() => this._onStagePress(data.stage_id, 'stage')}
|
|
|
+ style={[styles.tableCell, {width: '30%'}]}>{data.stage}</Text>
|
|
|
+ <Text
|
|
|
+ onPress={() => this._onStagePress(data.stage_id, 'total')}
|
|
|
+ style={[styles.tableCell, {width: '20%'}]}>{data.total_count}</Text>
|
|
|
+ <Text
|
|
|
+ onPress={() => this._onStagePress(data.stage_id, 'today')}
|
|
|
+ style={[styles.tableCell, {width: '25%'}]}>{data.today_count}</Text>
|
|
|
+ <Text
|
|
|
+ onPress={() => this._onStagePress(data.stage_id, 'overdue')}
|
|
|
+ style={[styles.tableCell, {width: '25%'}]}>{data.overdue_count}</Text>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={{flex: 1, backgroundColor: '#fff'}}>
|
|
|
+ <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
|
|
|
+ <TreeSelect
|
|
|
+ data={this.state.data}
|
|
|
+ // isOpen={true}
|
|
|
+ // openIds={[3]}
|
|
|
+ // defaultSelectedId={['B062']}
|
|
|
+ isShowTreeId={false}
|
|
|
+
|
|
|
+ selectType="single"
|
|
|
+ itemStyle={{
|
|
|
+ marginVertical: 10,
|
|
|
+ // backgroudColor: '#8bb0ee',
|
|
|
+ fontSize: 14,
|
|
|
+ // color: '#2b90ea',
|
|
|
+ }}
|
|
|
+ selectedItemStyle={{
|
|
|
+ backgroudColor: '#f7edca',
|
|
|
+ fontSize: 14,
|
|
|
+ // color: '#171e99'
|
|
|
+ }}
|
|
|
+ leafCanBeSelected={true}
|
|
|
+ // onClickLeaf={this._onClickLeaf}
|
|
|
+ onClick={this._onClickLeaf}
|
|
|
+ treeNodeStyle={{
|
|
|
+ openIcon: <Text style={{fontFamily: 'iconfont'}}>{'\ue617'}</Text>,
|
|
|
+ closeIcon: <Text style={{fontFamily: 'iconfont'}}>{'\ue601'}</Text>,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View>
|
|
|
+ <View style={styles.tableHeader}>
|
|
|
+ <Text style={[styles.tableHeaderItem, {width: '30%'}]}>阶段</Text>
|
|
|
+ <Text style={[styles.tableHeaderItem, {width: '20%'}]}>总数</Text>
|
|
|
+ <Text style={[styles.tableHeaderItem, {width: '25%'}]}>今日</Text>
|
|
|
+ <Text style={[styles.tableHeaderItem, {width: '25%'}]}>逾期</Text>
|
|
|
+ </View>
|
|
|
+ <FlatList
|
|
|
+ data={this.state.StageCount}
|
|
|
+ renderItem={({item, index}) => this.renderItem(item, index)}
|
|
|
+ keyExtractor={(item, index) => index.toString()}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ icon: {
|
|
|
+ fontFamily: 'iconfont',
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#2b90ea',
|
|
|
+ padding: 3,
|
|
|
+ },
|
|
|
+ tableHeader: {
|
|
|
+ backgroundColor: '#03C762',
|
|
|
+ flexDirection: 'row',
|
|
|
+ },
|
|
|
+ tableHeaderItem: {
|
|
|
+ color: '#fff',
|
|
|
+ paddingVertical: 10,
|
|
|
+ textAlign: 'center',
|
|
|
+ // flex: 1
|
|
|
+ },
|
|
|
+ tableRowOdd: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ },
|
|
|
+ tableRowEven: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ backgroundColor: '#f8f8f8',
|
|
|
+ },
|
|
|
+ tableCell: {
|
|
|
+ color: '#666',
|
|
|
+ padding: 10,
|
|
|
+ textAlign: 'center',
|
|
|
+ // flex: 1
|
|
|
+ },
|
|
|
+});
|
|
|
+export default SearchProcess;
|