TaxControlAppTest/page/enterpriseInformation/enterprise_user.js

import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  FlatList,
  TextInput,
  TouchableOpacity,
  DeviceEventEmitter,
  ScrollView,
  SafeAreaView,
  StyleSheet,
  Dimensions,
  PixelRatio,
} from 'react-native';
import {List, SwipeAction} from '@ant-design/react-native';
import DragSortableView from 'react-native-drag-sort/DragSortableView';

import {ShowToast} from '../../components/rootToast/root_toast';
import public_css from '../../source/css/public_css';

const {width} = Dimensions.get('window');

const parentWidth = width;
const childrenWidth = width;
const childrenHeight = 48;
export default class enterprise_user extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: this.props.route.params.type,
      user: [],
      userName: '',
    };
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#ffffff',
          display: 'flex',
        }}>
        <View style={{alignItems: 'center'}}>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>人员添加:</Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入需要添加的人员姓名"
              clearButtonMode="while-editing"
              secureTextEntry={false}
              onChangeText={value => {
                this.setState({
                  userName: value,
                });
              }}
              value={this.state.userName}
            />
            <View>
              <TouchableOpacity
                onPress={() => {
                  this.addUser();
                }}>
                <Image
                  source={require('../../source/img/productImg/addIcon.png')}
                  style={{height: 16, width: 16}}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          <View />
          <View style={{margin: 5}}>
            <Text>人员姓名</Text>
          </View>
          <View style={{margin: 5}}>
            <Text>排序</Text>
          </View>
        </View>
        <View style={{flex: 1}}>
          <SafeAreaView style={{backgroundColor: '#fff', flex: 1}}>
            <ScrollView
              ref={scrollView => (this.scrollView = scrollView)}
              scrollEnabled={this.state.scrollEnabled}
              style={styles.container}>
              <DragSortableView
                dataSource={this.state.user}
                parentWidth={parentWidth}
                childrenWidth={childrenWidth}
                childrenHeight={childrenHeight}
                scaleStatus={'scaleY'}
                onDragStart={(startIndex, endIndex) => {
                  this.setState({
                    scrollEnabled: false,
                  });
                }}
                onDragEnd={startIndex => {
                  this.setState({
                    scrollEnabled: true,
                  });
                }}
                onDataChange={data => {
                  this.setState({
                    user: data,
                  });
                }}
                // keyExtractor={(item, index) => item.key} // FlatList作用一样，优化
                onClickItem={(data, item, index) => {}}
                renderItem={(item, index) => {
                  return this.renderItem(item, index);
                }}
              />
            </ScrollView>
          </SafeAreaView>
        </View>
        <View style={public_css.bottomStaus}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusLBtn]}
            onPress={() => {
              this.setState({
                user: '',
                userName: '',
              });
            }}>
            <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.submitData()}>
            <Image
              source={require('../../source/img/productImg/confirm.png')}
              style={{width: 32, height: 32}}
            />
            <Text style={{color: '#fff'}}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  //显示页面加载
  componentDidMount(): void {
    if (this.props.route.params.type == 1) {
      let payees = this.props.route.params.data.state.payees;
      if (payees != null) {
        if (payees.length > 0) {
          let list = payees.split(',');
          let userList = list.map((_, i) => ({
            key: i,
            name: list[i],
          }));
          this.setState({
            user: this.state.user.concat(userList),
            userName: '',
          });
        }
      }
    }
    if (this.props.route.params.type == 2) {
      let reviewers = this.props.route.params.data.state.reviewers;
      if (reviewers != null) {
        if (reviewers.length > 0) {
          let list = reviewers.split(',');
          let userList = list.map((_, i) => ({
            key: i,
            name: list[i],
          }));
          this.setState({
            user: this.state.user.concat(userList),
            userName: '',
          });
        }
      }
    }
  }

  //关闭页面加载
  componentWillUnmount(): void {
    this.timer && clearTimeout(this.timer);
  }

  //加载客户列表数据
  renderItem = data => (
    <View style={styles.item}>
      <SwipeAction
        autoClose
        style={{backgroundColor: 'transparent', flex: 1}}
        right={this.right(data)}>
        <View style={styles.item_children}>
          <Text
            style={{
              fontSize: 18,
              fontFamily: 'PingFang-SC-Regular',
              color: '#333333',
              textAlign: 'center',
              flex: 1,
            }}>
            {data.name}
          </Text>
        </View>
      </SwipeAction>
      <Image source={require('../../source/img/category.png')} />
    </View>
  );

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

  //删除用户信息
  deleteData = data => {
    let listData = this.state.user;
    const prevIndex = listData.findIndex(item => item.key === data.key);
    listData.splice(prevIndex, 1);
    let userList = listData.map((_, i) => ({
      key: i,
      name: listData[i].name,
    }));
    this.setState({
      user: userList,
    });
  };

  //添加人员信息
  addUser = () => {
    if (this.state.userName.length > 0) {
      let user = {
        key: this.state.user.length,
        name: this.state.userName,
      };
      this.setState({
        user: this.state.user.concat(user),
        userName: '',
      });
    } else {
      ShowToast('请输入人员姓名！');
      return;
    }
  };

  //提交用户信息
  submitData = () => {
    let user = '';
    if (this.state.user.length > 0) {
      this.state.user.map((_, i) => {
        user = user + this.state.user[i].name + ',';
      });
      user = user.substring(0, user.length - 1);
    }
    if (this.state.type == 1) {
      this.props.route.params.data.setPayees(user);
    }
    if (this.state.type == 2) {
      this.props.route.params.data.setReviewers(user);
    }
    this.props.navigation.goBack();
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  item: {
    width: childrenWidth,
    height: childrenHeight,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)',
  },
  item_children: {
    width: childrenWidth,
    height: childrenHeight - 4,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
  },
  item_icon: {
    width: childrenHeight * 0.6,
    height: childrenHeight * 0.6,
    marginLeft: 15,
    resizeMode: 'contain',
  },
  item_text: {
    marginRight: 15,
    color: '#2ecc71',
  },
});