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

yylib-quick-mobile

import React, {Component} from 'react';
import {Popover, NavBar, Icon, Modal} from 'antd-mobile'
import YYIcon from './../icon/YYIcon';
import YYToast from './../toast/YYToast';
const Item = Popover.Item;
import YYApprove from './YYApprove';
import YYApproveHistory from './YYApproveHistory';
import './YYApprove.less';
import {MODULE_URL} from '../../common/RestUrl';
import classnames from 'classnames';
import {backOrClose} from '../../utils/lfwUtil';
const BILL_STATE = {
  STORAGE: -1, // 暂存
  FREE: 0, // 自由态
  COMMIT: 1, // 已提交
  APPROVING: 2, // 审批进行中
  APPROVED: 3, // 审批通过
  UNAPPROVED: 4, // 审批不通过
  APPROVED2: 5 // 已审批(直审)
}
class YYApproveNavBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showApprove: false,
      visible:false,
      showApproveHistory:false
    }
  }
  /**
   * 默认进行返回 or 关闭
   */
  onLeftClick = (e) => {
    if(this.props.RunInDesign){
      return;
    }
    if (this.props.onLeftClick) {
        this.props.onLeftClick(e);
    }else{
        backOrClose();
    }
  }
  onSelect = (opt,index) => {
    var  ajax=window.YYUtils.Ajax;
    var self = this;
    let {billId,billTypeId} = this.props;
    let userId = window.YYUtils.AuthToken.getUserId();
    this.setState({
      visible:false
    });
    let url = null;
    if(index==0){//执行审批
      this.showApprove()
    }
    else if (index==1) {//执行弃审
      this.setState({
        showApprove:false
      });
      url = MODULE_URL.unapprove;
    }
    else if (index==2) {//查看审批历史
      this.setState({
        showApprove: false
      });
      this.setState({
        showApproveHistory: true
      });
    }
    else if (index==3) {//收回
      this.setState({
        showApprove:false
      });
      url = MODULE_URL.doCallBack;
    }
    if (index==1||index==3) {
      if (!billId) {
          YYToast.info("找不到对应的表单！", 2);
      } else if (!billTypeId) {
          YYToast.info("找不到对应的单据类型！", 2);
      } else {
          YYToast.loading('Loading...', 0, null, false);
          ajax.postJSON(url, {userId: userId, billId: billId, billTypeId: billTypeId}, null, function (error) {
          }, function (data) {
              if (data != null && data.status == 200) {
                  let param = eval("(" + data.text + ")");
                  if (param != null) {
                      if (param.success == true && param.msg) {
                          YYToast.success(param.msg, 2)
                          if (self.props.onSelect) {
                            self.props.onSelect(true,index);
                          }
                      } else {
                          YYToast.info(param.msg, 2);
                          if (self.props.onSelect) {
                            self.props.onSelect(false,index);
                          }
                      }
                  }
              }
          });
      }
    }
  }
  showApprove = () => {
    this.setState({
      showApprove: true
    })
  }
  closeApprove = () => {
    this.setState({
      showApprove: false
    });
  }
  onClose(){
    this.setState({
      showApproveHistory: false
    });
  }
  onBpmApprove(flag) {//审批成功
    this.setState({
      showApprove:false
    });
    this.props.onSelect(flag);
  }
  render() {
    let {mode, leftIcon, leftContent, children, className,billId,billTypeId,billState, ...restProps} = this.props;
    let userId = window.YYUtils.AuthToken.getUserId();
    let wrapClz = classnames('yy-approve-navBar', className);
    //leftIcon左边按钮 字符串时认为是按钮类型
    let leftIconCom=typeof(leftIcon)==='string'?<YYIcon type={leftIcon}/>:leftIcon;
    return (
      <div>
          <NavBar
            className={wrapClz}
            mode={mode}
            icon={leftIconCom}
            leftContent={leftContent}
            onLeftClick={this.onLeftClick}
            rightContent={
              billState||billState===0?billState===BILL_STATE.FREE?null:<Popover
                  visible={this.state.visible}
                  overlay=
                    {billState===BILL_STATE.COMMIT?[
                      (<Item icon={<YYIcon type="edit" size='xs'/>}>执行审批</Item>),
                      (<Item disabled icon={<Icon type="cross" size='xs'/>}>执行弃审</Item>),
                      (<Item icon={<YYIcon type="more" size='xs'/>}>审批历史</Item>),
                      (<Item icon={<YYIcon type="triangle_up_fill" size='xs'/>}>收回</Item>),
                    ]:[(billState===BILL_STATE.APPROVED?<Item disabled icon={<YYIcon type="edit" size='xs'/>}>执行审批</Item>:<Item icon={<YYIcon type="edit" size='xs'/>}>执行审批</Item>),
                      (billState===BILL_STATE.APPROVING||billState===BILL_STATE.APPROVED?<Item icon={<Icon type="cross" size='xs'/>}>执行弃审</Item>:<Item disabled icon={<Icon type="cross" size='xs'/>}>执行弃审</Item>),
                      (<Item icon={<YYIcon type="more" size='xs'/>}>审批历史</Item>)]}

                  onSelect={this.onSelect.bind(this)}
              >
              <div>审批</div>
            </Popover>:null
          }
          >
              {children}
          </NavBar>
          {this.state.showApprove ? <YYApprove
          showApprove={this.state.showApprove}
          billTypeId={billTypeId}
          userId={userId}
          billId={billId}
          onBpmApprove={this.onBpmApprove.bind(this)}
          onCloseApprove={this.closeApprove.bind(this)}/>
          : null}
          <Modal
            visible={this.state.showApproveHistory}
            style={{backgroundColor:"black"}}
            className='yy-modal-approvehistory yy-modal-fill'
            popup={true}
            closable={true}
            animationType='slide-up'
            title='查看审批流'
            maskClosable={true}
            onClose={this.onClose.bind(this)}>
            <YYApproveHistory
              userId={userId}
              billId={billId}/>
          </Modal>
      </div>
    );
  }
}
YYApproveNavBar.defaultProps = {
    mode:'light',
    leftIcon:null,
    leftContent: null,
    onLeftClick:null,
    visible:true,
    userId: '',
    billId: '',//单据id
    billTypeId:'',//单据类型
    billState: '',//单据状态
}
export default YYApproveNavBar;