xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    Platform,
    TextInput,
    ScrollView,
    Modal, StyleSheet,
} from "react-native";

import AppService from "../service/AppService"
import AutoExpandingInput from "./AutoExpandingInput";

const checkedImg = require("../img/checked.png");
const unCheckedImg = require("../img/dati-xuanze-02.png");
const defaultHeight = (72);
const titleViewHeight = (24);
const HPading = (16);
const VPading = (6);

export default class SelectItemView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            dataList: [],
            selectData: {},
            selectDataList: [],
            selectText: '',
            autoIncrease:20
        }
        this.attrData = this.props.attrData;
        this.modalTitle = this.props.modalTitle || '';
        this.extendData = JSON.parse(this.attrData.data);
    }

    componentWillMount() {
        if (this.attrData.type === 'ORGANIZATION') {
            this.getOrganizationList();
        } else if (this.attrData.type === 'OPERATING_UNIT') {
            this.getOperatingUnitList();
        } else if (this.attrData.type === 'POSITION') {
            this.getPositionList();
        }
    }

    /**
     * 查询组织机构数据
     */
    getOrganizationList() {

        const params = {pageSize: 0}

        AppService.findMasterOrganization(params).then(data => {
            //console.log("部门=====", data)
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            this.setState({
                dataList: data.result
            })
        })
    }

    /**
     * 高级搜索经营单元
     */
    getOperatingUnitList() {
        const params = {pageSize: 0}

        AppService.findMasterOperatingUnit(params).then(data => {
            console.log("经营单元=====", data)
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            this.setState({
                dataList: data.result
            })
        })
    }

    /**
     * 模糊查询岗位列表
     */
    getPositionList() {
        const params = {pageSize: 0}

        AppService.findMasterPosition(params).then(data => {
            console.log("岗位=====", data)
            if (data.message) {
                return;
            }
            if (data.errors && data.errors.length > 0) {
                return;
            }
            this.setState({
                dataList: data.result
            })
        })
    }

    showModal() {
        this.setState({
            showModal: true,
        });
    }

    /**
     * 模态框取消操作
     */
    closeModal() {
        this.setState({
            showModal: false,
        });
    }

    confirmChecked() {
        this.closeModal();
        if (this.state.selectDataList && this.state.selectDataList.length > 0) {
            let tempTex = '';
            let result=[];
            this.state.selectDataList.map((item, index) => {
                if (index === 0) {
                    tempTex = item.name;
                } else {
                    tempTex = tempTex + '\n' + item.name;
                }
                this.setMultiResult(result, item);
            });
            this.setState({
                selectText: tempTex
            })
            this.attrData.value = JSON.stringify(result);
        } else {
            this.setState({
                selectText: ''
            })
            this.attrData.value = "";
        }
    }

    getItemText(item) {
        if (this.attrData.type === 'POSITION') {
            let firstName = item.firstName;
            let jobName = item.jobName
            let organizationName = item.organizationName;
            let lastName = item.lastName;

            let text = "";
            if (organizationName) {
                text = organizationName;
            }
            if (jobName) {
                text = text + ' - ' + jobName;
            }
            if (lastName) {
                text = text + ' - ' + lastName;
            }
            if (firstName) {
                text = text + firstName;
            }
            item.name = text;
        }
        return item.name || '';
    }

    /**
     * 设置多选结果
     */
    setMultiResult(result, item) {
        if (this.attrData.type === 'ORGANIZATION' || this.attrData.type === 'OPERATING_UNIT') {
            result.push({id: item.id, name: item.name})
        } else if (this.attrData.type === 'POSITION') {
            let emName = item.lastName + item.firstName;
            result.push({id: item.id, employeeName: emName, organizationName: item.organizationName, jobName: item.jobName});
        }
    }

    /**
     * 设置单选结果
     */
    setSingleResult(item) {
        if (this.attrData.type === 'ORGANIZATION' || this.attrData.type === 'OPERATING_UNIT') {
            let result={id: item.id, name: item.name};
            this.attrData.value = JSON.stringify(result);
        } else if (this.attrData.type === 'POSITION') {
            let emName = item.lastName + item.firstName;
            let result={id: item.id, employeeName: emName, organizationName: item.organizationName, jobName: item.jobName};
            this.attrData.value = JSON.stringify(result);
        }
    }

    renderItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={{flexDirection: 'row', width: '100%', alignItems: 'center'}}
                activeOpacity={0.8}
                onPress={() => {
                    if (this.extendData.multipleSelect) {
                        // 多选
                        let tempArr = this.state.selectDataList;
                        if (item.checked) {
                            item.checked = false;
                            tempArr = tempArr.filter(value => value.id !== item.id);
                        } else {
                            item.checked = true;
                            tempArr.push(item)
                        }
                        this.setState({
                            selectDataList: tempArr
                        })
                    } else {
                        this.closeModal();
                        this.setState({
                            selectData: item,
                            selectText: item.name
                        })
                        this.setSingleResult(item)
                    }
                }}
            >
                {this.extendData.multipleSelect &&
                <Image
                    source={item.checked ? checkedImg : unCheckedImg}
                    style={styles.checkedBox}
                />}
                <View style={{flex: 1, marginLeft: 15}}>
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0 , 1)', paddingVertical: 10}}>{this.getItemText(item)}</Text>
                    <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                </View>
            </TouchableOpacity>
        )
    }

    render() {
        let {name, code, type, uom, description, isRequired, isPreview} = this.attrData;
        let {placeholder} = this.extendData;
        let autoIncrease = 100;
        return (
            <View style={{width: '100%',minHeight:defaultHeight,paddingTop: VPading,paddingHorizontal:HPading,backgroundColor:'#fff'}}>
                <TouchableOpacity
                    style={{
                        flex:1,
                        flexDirection: 'row',
                        width: '100%',
                        backgroundColor: '#fff',
                        alignItems: 'center'
                    }}
                    activeOpacity={0.8}
                    onPress={() => this.showModal()}
                >
                    <View style={{flex: 1}}>
                        <View style={{flexDirection: 'row',height:titleViewHeight,backgroundColor:'#fff'}}>
                            {isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
                            {!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
                            <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name||""}</Text>
                        </View>
                        <AutoExpandingInput
                            style={{fontSize: 16,
                                marginLeft:HPading,
                                color: this.state.selectText.length>0?'black':'#999',
                                backgroundColor: '#fff',
                                textAlign: 'left',
                                flex:1
                            }}
                            editable={false}
                            onChangeText={text => {
                                if (this.onChangeText) {
                                    this.onChangeText(text)
                                }
                            }}
                            placeholderTextColor={'#999'}
                            placeholder={placeholder}
                            value={this.state.selectText||'请选择'}
                        />
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
                <Modal animationType={"fade"} transparent={true} visible={this.state.showModal} onRequestClose={() => this.closeModal()}>
                    {/** 目录弹窗 */}
                    <View style={{flex: 1}}>
                        <TouchableOpacity style={styles.modalBg} activeOpacity={1} onPress={() => this.closeModal()}/>
                        {/** 实体内容 */}
                        <View style={styles.contentBg}>
                            {/** 标题栏 */}
                            <View style={styles.titleBar}>
                                <TouchableOpacity
                                    style={{paddingLeft: 15, paddingRight: 5}}
                                    activeOpacity={0.8}
                                    onPress={() => this.closeModal()}
                                >
                                    <Image style={{width: 14, height: 14}}
                                           source={require('../img/loadBack.png')}/>
                                </TouchableOpacity>
                                <Text style={styles.modelTitle}>{this.modalTitle}</Text>
                                {this.extendData && this.extendData.multipleSelect &&
                                    <TouchableOpacity
                                        style={{
                                            justifyContent: "center",
                                            alignItems: "center",
                                            borderRadius: 20,
                                            paddingVertical: 3,
                                            paddingHorizontal: 8,
                                            backgroundColor: global.homeColor
                                        }}
                                        activeOpacity={0.8}
                                        onPress={() => this.confirmChecked()}
                                    >
                                        <Text style={{fontSize: 14, color: 'white'}}>确定</Text>
                                    </TouchableOpacity>
                                }
                            </View>
                            <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                            {/** 内容 */}
                            <ScrollView style={{flex: 1}} horizontal={false} showsVerticalScrollIndicator={false}>
                                {this.state.dataList && this.state.dataList.map((item, index) => this.renderItem(item, index))}
                            </ScrollView>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    modalBg: {
        backgroundColor: 'rgba(0,0,0,.5)',
        width: '100%',
        height: '100%',
        display: 'flex',
        position: 'absolute'
    },
    contentBg: {
        width: '100%',
        flex: 1,
        marginTop: 122,
        backgroundColor: "rgba(255, 255, 255, 1)",
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16
    },
    titleBar: {
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "center",
        marginTop: 15,
        marginBottom: 10,
        marginRight: 15
    },
    modelTitle: {
        flex: 1,
        color: "rgba(0, 0, 0, 1)",
        fontSize: 16,
        textAlign: "center",
        justifyContent: "center"
    },
    checkedBox: {
        width: 20,
        height: 20,
        marginLeft: 8,
    },
});