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

yylib-quick-mobile

import React, {Component} from 'react';
import {Modal, Icon, List, Checkbox, Button, SearchBar, Accordion} from 'antd-mobile';
import YYToast from '../toast/YYToast';
import YYNavBar from '../navBar/YYNavBar';
import YYIcon from './../icon/YYIcon';
import YYRefer from './../refer/YYRefer';
import YYAssignRef from './../bpm/YYAssignRef';
import YYForm from './../form/YYForm';
import _ from 'lodash';
import {MODULE_URL} from '../../common/RestUrl';
// import ajax from '../../utils/ajax';
import './YYApprove.less';
import {getAppointDate} from '../../utils/util';

const Item = List.Item;

class YYAddSignModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: this.props.visible,
      addSignData:[],
      referOpen:false
    }
  }

  componentDidMount() {
    this.getAllSigner();
  }
  /*获取详细被加签人信息*/
  getAllSigner=()=>{
    var  ajax=window.YYUtils.Ajax;
    let param = {taskid: this.props.taskId};
    ajax.getText(MODULE_URL.getAllSign, param, (msg) => {
      msg = msg["length"] && msg.length > 1 ? JSON.parse(msg) : "";
      if(msg!==""&&msg["success"]){
        this.setState({
          addSignData:msg["data"]
        })
      }
    })
  };
  componentWillReceiveProps(nextprops) {
    if (nextprops.visible !== this.state.visible) {
      this.setState({
        modalVisible: nextprops.visible
      })
    }
  };

  closeAssign = () => {
    this.setState({
      modalVisible: false
    });
    if (_.isFunction(this.props.onClose)) {
      this.props.onClose();
    }
  };
  renderItemDom=()=>{
    let personList = [],
      assignList = [],
      {addSignData}=this.state,
      length = addSignData.length;
    addSignData.forEach((value,index)=>{
      let stateValue = this.renderItemState(value);
      personList.push(<span key={"name"+value["id"]}>{value["assigneeName"]}{length !== index+1 ? "、":""}</span>);
      if(value["taskstate"]===1){
        assignList.push(<Item key={"list"+value["id"]} className="yy-bpm-addAssignRef-modal-personListLi">
          <p className="yy-bpm-addAssignRef-personListLi-title"><span>{value["assigneeName"]}</span><span style={{borderColor:stateValue["stateColor"],color:stateValue["stateColor"]}}>{stateValue["stateText"]}</span></p>
          <div className="yy-bpm-addAssignRef-personListLi-body">
            <p>
              <span>加签时间：</span><span>{getAppointDate(value["createtime"])["TimeStr"]}</span>
            </p>
            {value["endtime"]!==null?<p>
              <span>处理时间：</span><span>{getAppointDate(value["endtime"])["TimeStr"]}</span>
            </p>:null}
          </div>
          <p className="yy-bpm-addAssignRef-personListLi-footer">
            <span>审批语：</span><span>{value["comment"]}</span>
          </p>
        </Item>)
      }
    });
    return{personList:personList,assignList:assignList}
  };
  /*渲染状态*/
  renderItemState = (value) =>{
    let stateValue = {
      stateText:"",
      stateColor:""
    };
    if(value["taskstate"]===1){
      if(value["optype"]===0){
        stateValue["stateText"]="拒绝";
        stateValue["stateColor"]="#FF6161"
      }else if(value["optype"]===1){
        stateValue["stateText"]="同意";
        stateValue["stateColor"]="#31CB7B"
      }
    }else if(value["taskstate"]===0){
      stateValue["stateText"]="未处理";
      stateValue["stateColor"]="#FF9C00"
    }else if(value["taskstate"]===2){
      stateValue["stateText"]="终止";
      stateValue["stateColor"]="#7D8291"
    }
    return stateValue;
  };
  /*点击添加加签人员*/
  onOkAddSigner=(users)=>{
    var ajax=window.YYUtils.Ajax;
    if(users.length>0){
      let userIds = [];
      users.forEach((value)=>{
        userIds.push(value["id"])
      });
      let param = {userIds:userIds,taskid:this.props.taskId};
      ajax.postText(MODULE_URL.saveSign,param,(msg)=>{
        msg = JSON.parse(msg);
        if(msg["success"]){
          this.setState({referOpen:false});
          this.getAllSigner();
        }
      })
    }else {
      YYToast.fail('请选择加签人员', 2);
    }
  };
  render() {
    let {addSignData}=this.state;
    let renderItem = this.renderItemDom();
    let {form} = this.props;
    return (
      <Modal popup
        visible={this.state.modalVisible}
        maskClosable={false}
        animationType="slide-up">
        <div className="yy-bpm-assignRef-modal-body">
          <div className="yy-bpm-addAssignRef-modal-body-nav">
            <YYNavBar
              mode="light"
              leftContent={<Icon type="left"/>}
              onLeftClick={this.closeAssign}>
              加签</YYNavBar>
          </div>
          <div className="yy-bpm-addAssignRef-modal-middle">
            <div className="yy-bpm-addAssignRef-modal-middle-add yylib-borderBottomOnePxZk">
              <span className="yy-bpm-addAssignRef-modal-middle-addSpan" onClick={()=>{this.setState({referOpen:true})}}><YYIcon
                className="action-icon" type="approvejiaqianAdd" style={{color: "#0091FA"}} size='xxs'/>
              <span>我要加签</span></span>
              <YYRefer
                referlabel="选择加签人员"
                form={form}
                custom={true}
                referName='Addsigner'
                isSearch={true}
                onOk={this.onOkAddSigner}
                onClose={()=>{this.setState({referOpen:false})}}
                multiMode={true}
                open={this.state.referOpen}
                referCode="00081"
                referStyle='list'/>
            </div>
            <div className="yy-bpm-addAssignRef-modal-middle-person">
              <p>被加签人({addSignData.length})</p>
              <p>{renderItem["personList"]}</p>
            </div>
          </div>
          <List className="yy-bpm-addAssignRef-modal-personList">
            {renderItem["assignList"]}
          </List>
        </div>
      </Modal>
    );
  }
}

export default YYAddSignModal = YYForm.create()(YYAddSignModal);