yylib-quick-mobile/dist/yylib/bpm/YYAssignRef.js

yylib-quick-mobile

/**
 * Created By whh 2018/1/2
 * */
import React, {Component} from 'react';
import {Modal, Icon, List, Checkbox,Button} from 'antd-mobile';
const CheckboxItem = Checkbox.CheckboxItem;
import {createForm} from 'rc-form';
import classnames from 'classnames';
import YYToast from '../toast/YYToast';
import YYNavBar from '../navBar/YYNavBar';
import PropTypes from 'prop-types';
import {isFunction} from '../../utils/FunctionUtil';
import {MODULE_URL} from '../../common/RestUrl';
//import ajax from '../../utils/ajax';
import './YYApprove.less';

class YYAssignRef extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: this.props.visible,
            activeKey: [],
            AssignUser: [],             //搜索的人员信息
            selectedNodes: [],
            allUsers: [],            //储存全部人员信息
            searchValue: ""
        }
    }

    componentDidMount() {
    	var  ajax=window.YYUtils.Ajax;
        console.log(1)
        let {visible, type, bpmId, userId} = this.props;
        let params = {
            userId: userId,
            cbiztypeId: "",
            bpmId: bpmId,
            approveType: "同意"
        };
        let url = '';
        if (type != null && type == 'approve') {
            url = MODULE_URL.queryAssignUser;
        } else if (type != null && type == 'submit') {
            url = MODULE_URL.queryStartAssignUser;
        }
        ajax.postText(url, params, (AssignUserTextData) => {
            var AssignUserData = JSON.parse(AssignUserTextData);
            if (AssignUserData.success && AssignUserData.success === true && AssignUserData.assignAble === true) {
                let assignUserList = AssignUserData.data;
                /*将取到的数据进行整理，将外层的activityId添加到内层*/
                assignUserList.forEach((value, index) => {
                    this.conFirmParams.push({activeKey: value["activityId"], targetKeys: []});
                    value["participants"].forEach((i) => {
                        _.set(i, "activityId", value["activityId"]);
                        _.set(i, "checked", false);
                    });
                });
                this.setState({
                    allUsers: AssignUserData.data,
                })
            } else {
                YYToast.fail('没有审批权限!！', 2);
            }
        })
    }

    componentWillReceiveProps(nextprops) {
        if (nextprops.visible !== this.state.visible) {
            this.setState({
                visible: nextprops.visible
            })
        }
    }

    closeAssign = () => {
        this.setState({
            AssignUser: this.state.allUsers,
            visible: false
        })
        if (isFunction(this.props.onClose)){
            this.props.onClose();
        }
    }
    /*点击判断选中与取消进行逻辑数据处理*/
    onAssignChange = (selectedNode, i, activeKey) => {
        let selectedNodes = [],
            selectConFirmParams = {},
            paramIndex = 0,
            newConfirmParams = JSON.parse(JSON.stringify(this.conFirmParams));
        newConfirmParams.map((item, index) => {
            if (item["activeKey"] === activeKey) {
                selectConFirmParams = item;
                selectedNodes = item["targetKeys"];
                paramIndex = index;
                return false;
            }
        });
        if (!selectedNodes.some(item => (item === selectedNode))) {
            selectedNodes.push(selectedNode);
            //i.checked = true;
            //this.initDefaultChecked(selectedNode);
            _.set(selectConFirmParams, "targetKeys", selectedNodes)
        } else {
            let newNodes = [];
            //i.checked = false;
            selectedNodes.forEach((item) => {
                if (item !== selectedNode) newNodes.push(item);
            });
            _.set(selectConFirmParams, "targetKeys", newNodes)
        }

        this.conFirmParams[paramIndex] = selectConFirmParams;
        this.initDefaultChecked();
    };
    /*初始化总表选择框列表是否选中状态处理*/
    initDefaultChecked = () => {
        let {allUsers,AssignUser} = this.state;
        let searchUsers = [];
        let AsearchUsers = [];
        //搜索到的人员数据处理
        allUsers.forEach((item) => {
            let newParticipants = [];
            item["participants"].forEach((value) => {
                let newChecked=false;
                this.conFirmParams.forEach((c)=>{
                    if(item["activityId"]===c["activeKey"]){
                        c["targetKeys"].forEach((i)=>{
                            if(value["id"]===i){
                                newChecked=true
                            }
                        })
                    }
                });
                newParticipants.push({
                    "code": value["code"],
                    "id": value["id"],
                    "name": value["name"],
                    "org": value["org"],
                    "priority": value["priority"],
                    "type": value["type"],
                    "checked":newChecked
                });
            });
            searchUsers.push({
                "activityId": item["activityId"],
                "activityName": item["activityName"],
                "gatewayRule": item["gatewayRule"],
                "participants": newParticipants
            });
        });
        AssignUser.forEach((item, index) => {
            let newParticipants = [];
            item["participants"].forEach((value,indexI) => {
                let newChecked=false;
                this.conFirmParams.forEach((c)=>{
                    if(item["activityId"]===c["activeKey"]){
                        c["targetKeys"].forEach((i)=>{
                            if(value["id"]===i){
                                newChecked=true
                            }
                        })
                    }
                });
                newParticipants.push({
                    "code": value["code"],
                    "id": value["id"],
                    "name": value["name"],
                    "org": value["org"],
                    "priority": value["priority"],
                    "type": value["type"],
                    "checked":newChecked
                });
            });
            AsearchUsers.push({
                "activityId": item["activityId"],
                "activityName": item["activityName"],
                "gatewayRule": item["gatewayRule"],
                "participants": newParticipants
            });
        });
        this.setState({
            allUsers:searchUsers,
            AssignUser:AsearchUsers
        })
    };
    /*提交数据*/
    comfirm = () => {
        let onOff = true;
        this.conFirmParams.forEach((item) => {
            if (item["targetKeys"].length === 0) {
                onOff = false;
            }
        });
        if (onOff) {
            this.props.comfirm(this.conFirmParams);
        } else (
            YYToast.fail('每个节点都必须选择参与者！', 2)
        )
    };
    /*搜索数据*/
    onSearchSubmit = (val) => {
        this.activeOnOff = false;
        if (val === '') {
            this.setState({
                AssignUser: [],
            })
        } else {
            let {allUsers} = this.state;
            let searchUsers = [];
            //搜索到的人员数据处理
            allUsers.forEach((item, index) => {
                let newParticipants = [];
                item["participants"].forEach((value) => {
                    if (value.name.indexOf(val) !== -1) {
                        let newChecked = false;
                        this.conFirmParams.forEach((c)=>{
                            if(item["activityId"]===c["activeKey"]){
                                c["targetKeys"].forEach((i)=>{
                                    if(value["id"]===i){
                                        newChecked=true
                                    }
                                })
                            }
                        });
                        newParticipants.push({
                            "code": value["code"],
                            "id": value["id"],
                            "name": value["name"],
                            "org": value["org"],
                            "priority": value["priority"],
                            "type": value["type"],
                            "checked":newChecked
                        });

                    }

                });
                searchUsers.push({
                    "activityId": item["activityId"],
                    "activityName": item["activityName"],
                    "gatewayRule": item["gatewayRule"],
                    "participants": newParticipants
                });
            });
            this.setState({
                AssignUser: searchUsers,
            })
        }
    };
    /*渲染选择人员列表*/
    renderAssignList = (allUsers, num) => {
        let accordionDom = [];
        let onOff = [];
        allUsers.forEach((value) => {
            let AssignUser = value["participants"];
            onOff.push(value["activityId"]);
            accordionDom.push(
                <Accordion.Panel key={value["activityId"]} header={value["activityName"]}
                                 className="yy-bpm-assignRef-modal-body-list">
                    <List className="my-list">
                        {AssignUser && AssignUser.length > 0 ? AssignUser.map(i => (
                            <CheckboxItem key={value["activityId"] + i.id} checked={i.checked}
                                          onChange={() => this.onAssignChange(i.id, i, value["activityId"])}>
                                {i.name}
                            </CheckboxItem>
                        )) : null}
                    </List>
                </Accordion.Panel>
            )
        });
        if (num === 2 && !this.activeOnOff) this.state.activeKey = onOff;//当首次搜索出数据折叠面板是展开的
        let renderDom = <Accordion
            activeKey={this.state.activeKey}
            onChange={(activeKey) => {
                this.activeOnOff = true;
                this.setState({activeKey})
            }}
            className="yy-bpm-assignRef-modal-body-list">
            {accordionDom}
        </Accordion>;
        return renderDom
    };
    render() {
        let {visible} = this.state;
        return (
            <div className="yy-assign-ref">
                <Modal popup
                       visible={visible}
                       maskClosable={false}
                       animationType="slide-up"
                >
                    <div className="yy-bpm-assignRef-modal-body">
                        <div className="yy-bpm-assignRef-modal-body-nav">
                            <YYNavBar
                                mode="light"
                                leftContent={<Icon type="left"/>}
                                onLeftClick={this.closeAssign}>
                                指派下一环节参与人</YYNavBar>
                            <SearchBar
                                placeholder="搜索"
                                onSubmit={this.onSearchSubmit}
                                value={this.state.searchValue}
                                onChange={(searchValue) => {
                                    this.setState({searchValue})
                                }}
                                onClear={() => {
                                    this.setState({searchValue: ""})
                                }}
                                onCancel={() => {
                                    this.setState({AssignUser: [], searchValue: ""})
                                }}/>
                        </div>
                        {this.state.AssignUser["length"] === 0 ? this.renderAssignList(this.state.allUsers, 1) : this.renderAssignList(this.state.AssignUser, 2)}
                        <div>
                            <Button type="primary"
                                    onClick={this.comfirm}>确定</Button>
                        </div>

                    </div>
                </Modal>
            </div>
        )
    }
}

YYAssignRef.defaultProps = {
    userId: '',
    billId: ''//单据id
}
export default YYAssignRef;