yylib-quick-mobile/dist/yylib/query-plan/YYQueryPlan.js

yylib-quick-mobile

import React, {Component} from 'react';
import classnames from 'classnames';
import {NavBar,Popover  } from 'antd-mobile';
import YYIcon  from '../icon/YYIcon';
import './YYQueryPlan.less';
import {MODULE_URL} from '../../common/RestUrl';
const Item = Popover.Item;
import {isFunction} from '../../utils/FunctionUtil';
import {backOrClose} from '../../utils/lfwUtil';
class YYQueryPlan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      popoverVisible: false,
      select:''
    };
  }
  /******生成设计期间的数据******/
  createDesignData(){
    var  data=[];
    for(var i=0;i<5;i++){
      data.push({tplId:"id"+(i+1),
      tplName:'查询方案'+(i+1),
      title:'查询方案'+(i+1)});
    }
    this.setState({
      data: data
    });
  }
  onSelect = (opt) => {
    this.setState({
      popoverVisible: false,
      select:opt.key
    });
    if (this.props.onSelect) this.props.onSelect(opt.props.value)
  }
  handleVisibleChange = (popoverVisible) => {
    this.setState({
      popoverVisible,
    });
  }
  componentWillReceiveProps(nextprops){
  	var  ajax=window.YYUtils.Ajax;

    var _self = this;
    var {billType,offline} = nextprops;
    let getJSON = offline?ajax.getJSONOffLine:ajax.getJSON;
    let {RunInDesign}=nextprops;//当前的运行环境 RunInDesign为true时，说明在设计环境
    if(RunInDesign){
      this.createDesignData();
      return;
    }
    if (billType) {
      let getParam = {
        userId: window.YYUtils.AuthToken.getUserId(),
        billType: billType&&billType.code,
        orgId: window.YYUtils.AuthToken.getOrgaId(),
        roleId: window.YYUtils.AuthToken.getCurrentRoleId(),
      }
      getJSON.call(ajax, MODULE_URL.getTemplates, getParam, (msg) => {
         let backData = msg["backData"];
          if (msg["success"]) {
            _self.setState({
              data:backData
            });
          }
      });
    }
    if(nextprops.select!=this.props.select){
        this.setState({
          select:nextprops.select
        });
    }
  }
  componentDidMount() {
    var _self = this;
    var  ajax=window.YYUtils.Ajax;

    var {billType,offline} = this.props;
    let {RunInDesign}=this.props;//当前的运行环境 RunInDesign为true时，说明在设计环境
    let getJSON = offline?ajax.getJSONOffLine:ajax.getJSON;
    if(RunInDesign){
      this.createDesignData();
      return;
    }
    if (billType) {
      let getParam = {
        userId: window.YYUtils.AuthToken.getUserId(),
        billType: billType&&billType.code,
        orgId: window.YYUtils.AuthToken.getOrgaId(),
        roleId: window.YYUtils.AuthToken.getCurrentRoleId(),
      }
      getJSON.call(ajax, MODULE_URL.getTemplates, getParam, (msg) => {
         let backData = msg["backData"];
          if (msg["success"]) {
            _self.setState({
              data:backData
            });
          }
      });
    }
  }
  onLeftClick(e) {
    if (isFunction(this.props.onLeftClick)) {
        this.props.onLeftClick(e);
    }else{
        backOrClose();
    }
  }
  renderItem(data) {
    var {select} = this.state;
    var itemList = [];
    data.map((item,index)=>{
      if (item.tplId===select) {
        itemList.push(<Item key={item.tplId} style={{color:'#0091fa'}} value={item}>{item.tplName}</Item>);
      }
      else {
        itemList.push(<Item key={item.tplId} value={item}>{item.tplName}</Item>);
      }
    });
    return itemList;
  }
  render() {
    let {visible,mode, leftIcon, leftContent, children, className, ...restProps} = this.props;
    let {data} = this.state;
    let leftIconCom=typeof(leftIcon)==='string'?<YYIcon type={leftIcon}/>:leftIcon;
    let wrapClz = classnames('yy-query-plan-navBar',(!visible&&'hidden'), className);
    return (
       <NavBar
         mode={mode}
         className={wrapClz}
         icon={leftIconCom}
         leftContent={leftContent}
         onLeftClick={this.onLeftClick.bind(this)}
         rightContent={
          <Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.popoverVisible}
            overlay={this.renderItem(data)}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
           >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
             }}
             >
              <YYIcon type="shaixuan"/>
             </div>
           </Popover>
         }
       >
        {children}
       </NavBar>
    );
  }
}
YYQueryPlan.defaultProps = {
  mode: 'light',
  visible: true,
  billType: '',
  leftIcon:null,
  leftContent: null,
  onLeftClick:null,
}
export default YYQueryPlan;